@wizishop/wizi-block 4.2.30-beta → 4.2.33-beta

package/fesm2015/wizishop-wizi-block.js

@@ -23,6 +23,9 @@ import { NgScrollbarModule } from 'ngx-scrollbar';
 import { __awaiter } from 'tslib';
 import EditorJS from '@editorjs/editorjs';
 import iro from '@jaames/iro';
+import { basicSetup, EditorView } from 'codemirror';
+import { EditorState } from '@codemirror/state';
+import { html } from '@codemirror/lang-html';
 import { MonacoEditorModule } from 'ngx-monaco-editor';
 import { tileLayer, latLng, marker, icon } from 'leaflet';
 import places from 'places.js';
@@ -18648,6 +18651,13 @@ class EditorJSTool {
         const selection = this.currentSelection ? this.currentSelection : this.getSelection();
         return selection.anchorNode.parentElement.closest('.editorJs');
     }
+    findParentModifier() {
+        if (!this.parentEditor) {
+            this.parentEditor = this.findParentEditor();
+        }
+        return (this.parentEditor.querySelectorAll('.ce-block')[this.api.blocks.getCurrentBlockIndex()].querySelector('.ce-paragraph')
+            .children[0]);
+    }
     clear() {
         resetBlockFocus(this.parentEditor);
     }
@@ -18728,29 +18738,28 @@ class InlineStyleTool extends EditorJSTool {
                 : anchorNode.parentElement;
             const sameSelection = container && container.innerText === selection.toString();
             yield this.saveInlineSelection(container, true);
-            try {
-                // Link delete exception
-                if (this.linkDeletion) {
-                    yield this.replaceLink(selection, this.hasStyle(container));
+            console.log('=== inline tool execCommandStyle method ===');
+            console.log(this.hasStyle(container));
+            // Link delete exception
+            if (this.linkDeletion) {
+                yield this.replaceLink(selection, this.hasStyle(container));
+            }
+            else {
+                if (sameSelection &&
+                    !this.isContainer(this.textContainers, container) &&
+                    this.hasStyle(container) &&
+                    selection.toString() === this.hasStyle(container).innerText) {
+                    console.log('-> update selection');
+                    yield this.updateSelection(selection, this.hasStyle(container), action, this.textContainers);
                 }
                 else {
-                    if (sameSelection &&
-                        !this.isContainer(this.textContainers, container) &&
-                        this.hasStyle(container) &&
-                        selection.toString() === this.hasStyle(container).innerText) {
-                        yield this.updateSelection(selection, this.hasStyle(container), action, this.textContainers);
-                    }
-                    else {
-                        yield this.replaceSelection(this.getMostDescendantChild(container), action, selection, this.textContainers);
-                    }
-                }
-                yield this.cleanupContainer(selection, container, true);
-                if (this.modifiedContent) {
-                    yield this.resetInlineSelection(container, true);
+                    console.log('-> replace selection');
+                    yield this.replaceSelection(this.getMostDescendantChild(container), action, selection, this.textContainers);
                 }
             }
-            catch (error) {
-                console.warn('Inline Tool Error : ' + error);
+            yield this.cleanupContainer(selection, container, true);
+            if (this.modifiedContent) {
+                yield this.resetInlineSelection(container, true);
             }
         });
     }
@@ -18794,16 +18803,17 @@ class InlineStyleTool extends EditorJSTool {
     replaceSelection(container, action, selection, containers) {
         var _a;
         return __awaiter(this, void 0, void 0, function* () {
-            let parentContainer = this.hasStyle(container);
             const focusNode = selection.focusNode;
             let offsetContainer = focusNode.nodeType !== Node.TEXT_NODE && focusNode.nodeType !== Node.COMMENT_NODE
                 ? focusNode
                 : focusNode.parentElement;
+            let parentContainer = this.hasStyle(container);
             let offsetParentContainer = this.hasStyle(offsetContainer);
             if (parentContainer &&
                 parentContainer === offsetParentContainer &&
                 ((parentContainer.children.length > 0 && parentContainer.innerText !== parentContainer.children[0].textContent) ||
                     parentContainer.innerText !== selection.toString())) {
+                console.log('if');
                 const range = this.getRangeObject(selection);
                 const currentFragment = range.extractContents();
                 const currentElement = document.createElement('span');
@@ -18845,14 +18855,19 @@ class InlineStyleTool extends EditorJSTool {
                 newElement.appendChild(preFragment);
                 parentContainer.parentElement.insertBefore(currentElementToAppend, parentContainer);
                 parentContainer.parentElement.insertBefore(newElement, currentElementToAppend);
+                if (!parentContainer.textContent || parentContainer.textContent.length === 0) {
+                    parentContainer.parentElement.removeChild(parentContainer);
+                }
                 selection.selectAllChildren(currentElementToAppend);
             }
             else {
+                console.log('else');
                 const range = this.getRangeObject(selection);
                 const fragment = range.extractContents();
                 let fragmentElement = document.createElement('div');
                 let newElement = yield this.createElement(container, action, containers);
                 let elementToAppend = newElement;
+                console.log(newElement);
                 fragmentElement.append(fragment);
                 if (((_a = fragmentElement.children) === null || _a === void 0 ? void 0 : _a.length) === 1 &&
                     this.textContainers.split(',').indexOf(fragmentElement.children[0].tagName.toLowerCase()) > -1) {
@@ -19024,8 +19039,28 @@ class InlineStyleTool extends EditorJSTool {
             }
         });
     }
+    parentHasStyle(currentElement, referenceElement) {
+        // Link exception
+        if (!currentElement || referenceElement.tagName.toLowerCase() === 'a' || referenceElement.tagName.toLowerCase() === 'div') {
+            return false;
+        }
+        if (referenceElement.tagName.toLowerCase() !== 'span' &&
+            referenceElement.tagName.toLowerCase() === currentElement.tagName.toLowerCase()) {
+            return true;
+        }
+        if (Object.keys(this.getInlineStyle(currentElement)).length > 0 && this.identicalInlineStyle(currentElement, referenceElement)) {
+            return true;
+        }
+        if (currentElement.classList.length > 0 && this.identicalClassList(currentElement, referenceElement)) {
+            return true;
+        }
+        if (currentElement.parentElement && currentElement.parentElement.tagName.toLowerCase() !== 'div') {
+            return this.parentHasStyle(currentElement.parentElement, referenceElement);
+        }
+        return false;
+    }
     cleanupContainer(selection, container, firstTimeCall) {
-        var _a, _b;
+        var _a;
         return __awaiter(this, void 0, void 0, function* () {
             let parentContainer;
             let parentFound = false;
@@ -19050,51 +19085,57 @@ class InlineStyleTool extends EditorJSTool {
             const children = Array.from(parentContainer.childNodes);
             if ((children === null || children === void 0 ? void 0 : children.length) > 0) {
                 for (var currentNode = children[0]; currentNode; currentNode = currentNode.nextSibling) {
-                    console.log('currentNode');
-                    console.log(currentNode);
-                    console.log(currentNode.textContent);
-                    console.log((_b = currentNode.textContent) === null || _b === void 0 ? void 0 : _b.length);
-                    if (!currentNode.textContent || currentNode.textContent.length === 0) {
+                    if ((!currentNode.textContent || currentNode.textContent.length === 0) || (currentNode.nodeType === Node.ELEMENT_NODE && currentNode.innerText.length === 0)) {
+                        let previousSibling = currentNode.previousSibling;
                         parentContainer.removeChild(currentNode);
+                        currentNode = previousSibling;
                     }
-                    else {
-                        if (currentNode.childNodes.length > 0) {
-                            yield this.cleanupContainer(selection, currentNode, false);
-                        }
-                        let identicalElements = true;
-                        while (identicalElements &&
-                            currentNode.nextSibling &&
-                            currentNode.nodeType === Node.ELEMENT_NODE &&
-                            currentNode.nextSibling.nodeType === Node.ELEMENT_NODE) {
-                            let currentElement = currentNode;
-                            let nextElement = currentNode.nextSibling;
-                            if (this.identicalInlineStyle(currentElement, nextElement) &&
-                                currentElement.tagName.toLowerCase() === nextElement.tagName.toLowerCase() &&
-                                this.identicalClassList(currentElement, nextElement) &&
-                                !currentElement.hasAttributes() &&
-                                !nextElement.hasAttributes()) {
-                                currentElement.innerHTML += nextElement.innerHTML;
-                                nextElement.remove();
-                                this.modifiedContent = true;
-                            }
-                            else {
-                                identicalElements = false;
-                            }
+                    if (currentNode.nodeType === Node.ELEMENT_NODE &&
+                        this.parentHasStyle(currentNode.parentElement, currentNode)) {
+                        let currentNodeFirstChild = currentNode;
+                        let nextCurrentElement = currentNode.firstChild;
+                        while (currentNode.firstChild) {
+                            parentContainer.insertBefore(currentNode.firstChild, currentNodeFirstChild.nextSibling);
+                            currentNodeFirstChild = currentNodeFirstChild.nextSibling;
                         }
-                        if (currentNode.nodeType === Node.ELEMENT_NODE &&
-                            currentNode.tagName.toLowerCase() === 'span' &&
-                            Object.keys(this.getInlineStyle(currentNode)).length === 0 &&
-                            (!currentNode.classList || currentNode.classList.length === 0) &&
-                            this.hasNoAttributes(currentNode)) {
-                            let currentNodeFirstChild = currentNode;
-                            while (currentNode.firstChild) {
-                                currentNodeFirstChild.parentElement.insertBefore(currentNode.firstChild, currentNodeFirstChild.nextSibling);
-                                currentNodeFirstChild = currentNodeFirstChild.nextSibling;
-                            }
-                            currentNode.remove();
+                        parentContainer.removeChild(currentNode);
+                        currentNode = nextCurrentElement;
+                    }
+                    let identicalElements = true;
+                    while (identicalElements &&
+                        currentNode.nextSibling &&
+                        currentNode.nodeType === Node.ELEMENT_NODE &&
+                        currentNode.nextSibling.nodeType === Node.ELEMENT_NODE) {
+                        let currentElement = currentNode;
+                        let nextElement = currentNode.nextSibling;
+                        if (this.identicalInlineStyle(currentElement, nextElement) &&
+                            currentElement.tagName.toLowerCase() === nextElement.tagName.toLowerCase() &&
+                            this.identicalClassList(currentElement, nextElement) &&
+                            this.identicalAttributes(currentElement, nextElement)) {
+                            currentElement.innerHTML += nextElement.innerHTML;
+                            nextElement.remove();
                             this.modifiedContent = true;
                         }
-                        currentNode.normalize();
+                        else {
+                            identicalElements = false;
+                        }
+                    }
+                    if (currentNode.nodeType === Node.ELEMENT_NODE &&
+                        currentNode.tagName.toLowerCase() === 'span' &&
+                        Object.keys(this.getInlineStyle(currentNode)).length === 0 &&
+                        (!currentNode.classList || currentNode.classList.length === 0) &&
+                        this.hasNoAttributes(currentNode)) {
+                        let currentNodeFirstChild = currentNode;
+                        while (currentNode.firstChild) {
+                            currentNodeFirstChild.parentElement.insertBefore(currentNode.firstChild, currentNodeFirstChild.nextSibling);
+                            currentNodeFirstChild = currentNodeFirstChild.nextSibling;
+                        }
+                        currentNode.remove();
+                        this.modifiedContent = true;
+                    }
+                    currentNode.normalize();
+                    if (currentNode.childNodes.length > 0) {
+                        yield this.cleanupContainer(selection, currentNode, false);
                     }
                 }
             }
@@ -19114,6 +19155,17 @@ class InlineStyleTool extends EditorJSTool {
         return ([...currentElement.classList].every((classList) => nextElement.classList.contains(classList)) &&
             [...nextElement.classList].every((classList) => currentElement.classList.contains(classList)));
     }
+    identicalAttributes(currentElement, nextElement) {
+        let currentElementAttributes = currentElement.getAttributeNames();
+        currentElementAttributes.forEach(attribute => {
+            if (attribute !== 'style') {
+                if (!nextElement.getAttribute(attribute) || nextElement.getAttribute(attribute) !== currentElement.getAttribute(attribute)) {
+                    return false;
+                }
+            }
+        });
+        return true;
+    }
     identicalInlineStyle(currentElement, nextElement) {
         const currentElementInlineStyle = this.getInlineStyle(currentElement);
         const nextElementInlineStyle = this.getInlineStyle(nextElement);
@@ -19167,9 +19219,10 @@ class InlineStyleTool extends EditorJSTool {
             let nextNode = container.firstChild;
             while (nextNode && (!this.foundAnchorNode || !this.foundFocusNode)) {
                 if (nextNode === this.selectedAnchorNode) {
-                    this.foundAnchorNode = true;
-                    this.foundAnchorOffset += this.anchorOffset;
                     let selection = this.getSelection();
+                    const isLTR = this.isAnchorBeforeFocus(selection.anchorNode, selection.anchorOffset, selection.focusNode, selection.focusOffset);
+                    this.foundAnchorNode = true;
+                    this.foundAnchorOffset += isLTR ? this.anchorOffset : this.focusOffset;
                     let range = this.getRangeObject(selection);
                     const currentFragment = range.cloneContents();
                     const currentElement = document.createElement('span');
@@ -20549,7 +20602,7 @@ class ParagraphStyleTool extends EditorJSTool {
             if (!anchorNode) {
                 return;
             }
-            let parentModifier = this.findParentModifier(anchorNode.parentElement);
+            let parentModifier = this.findParentModifier();
             try {
                 if (this.tag.toLowerCase() !== 'span') {
                     this.changeContainerTag(parentModifier, selection);
@@ -20684,22 +20737,6 @@ class ParagraphStyleTool extends EditorJSTool {
             container.className += (container.className.length > 0 ? ' ' : '') + this.classToApply;
         }
     }
-    findParentModifier(element) {
-        let currentElement = element;
-        if (currentElement.tagName.toLowerCase() === 'div') {
-            if (currentElement.classList.contains('ce-paragraph')) {
-                return currentElement.children[0];
-            }
-            return currentElement.closest('.codex-editor__redactor').querySelector('.ce-paragraph').children[0];
-        }
-        while (this.modifiers.split(',').indexOf(currentElement.tagName.toLowerCase()) === -1) {
-            if (currentElement.tagName.toLowerCase() === 'div') {
-                return null;
-            }
-            currentElement = currentElement.parentElement;
-        }
-        return currentElement;
-    }
 }
 var listApi = null;
 var listEditor = null;
@@ -20996,7 +21033,7 @@ class TextTypeTool extends ParagraphTextTool {
         if (!isBlockFocused) {
             setBlockFocus(this.parentEditor);
         }
-        const parentModifier = this.findParentModifier(selection.anchorNode.parentElement);
+        const parentModifier = this.findParentModifier();
         if (!parentModifier) {
             return false;
         }
@@ -21271,7 +21308,7 @@ class TextAlignTool extends ParagraphTextTool {
         if (!isBlockFocused) {
             setBlockFocus(this.parentEditor);
         }
-        const parentModifier = this.findParentModifier(selection.anchorNode.parentElement);
+        const parentModifier = this.findParentModifier();
         if (!parentModifier) {
             return false;
         }
@@ -21375,7 +21412,7 @@ class UnorderedListTool extends ParagraphStyleTool {
         if (!isBlockFocused) {
             setBlockFocus(this.parentEditor);
         }
-        const parentModifier = this.findParentModifier(selection.anchorNode.parentElement);
+        const parentModifier = this.findParentModifier();
         if (!parentModifier) {
             return false;
         }
@@ -21440,7 +21477,7 @@ class OrderedListTool extends ParagraphStyleTool {
         if (!isBlockFocused) {
             setBlockFocus(this.parentEditor);
         }
-        const parentModifier = this.findParentModifier(selection.anchorNode.parentElement);
+        const parentModifier = this.findParentModifier();
         if (!parentModifier) {
             return false;
         }
@@ -21505,7 +21542,7 @@ class QuoteTool extends ParagraphStyleTool {
         if (!isBlockFocused) {
             setBlockFocus(this.parentEditor);
         }
-        const parentModifier = this.findParentModifier(selection.anchorNode.parentElement);
+        const parentModifier = this.findParentModifier();
         if (!parentModifier) {
             return false;
         }
@@ -22040,23 +22077,6 @@ class InlineTextTool extends InlineStyleTool {
             return true;
         }
     }
-    findParentModifier(element) {
-        const modifiers = 'h1,h2,h3,h4,h5,h6,p,ul,ol,blockquote';
-        let currentElement = element;
-        if (currentElement.tagName.toLowerCase() === 'div') {
-            if (currentElement.classList.contains('ce-paragraph')) {
-                return currentElement.firstElementChild;
-            }
-            return currentElement.querySelector('.ce-paragraph').children[0];
-        }
-        while (modifiers.split(',').indexOf(currentElement.tagName.toLowerCase()) === -1) {
-            if (currentElement.tagName.toLowerCase() === 'div') {
-                return null;
-            }
-            currentElement = currentElement.parentElement;
-        }
-        return currentElement;
-    }
 }
 
 // @dynamic
@@ -22256,20 +22276,17 @@ class TextEditionTool extends ParagraphStyleTool {
         modal.appendChild(editorContainer);
         modal.appendChild(buttonContainer);
         container.appendChild(modal);
-        document.querySelector('body').appendChild(container);
-        setTimeout(() => {
-            console.log('monacoeditor init');
-            var monacoEditor = editor.create(editorContainer, {
-                value: content,
-                language: 'html',
-                ariaContainerElement: container
-            });
-            saveButton.addEventListener('click', () => {
-                let content = monacoEditor.getValue();
-                saveCodeEditModal(content);
-            }, true);
-            buttonContainer.appendChild(saveButton);
-        }, 200);
+        document.body.appendChild(container);
+        let state = EditorState.create({
+            doc: content,
+            extensions: [basicSetup, html()],
+        });
+        let view = new EditorView({
+            state: state,
+            parent: editorContainer,
+        });
+        saveButton.addEventListener('click', () => saveCodeEditModal(view.state.doc.toString()), true);
+        buttonContainer.appendChild(saveButton);
     }
     getSavedEditorContent(name) {
         return localStorage.getItem(name);
@@ -22758,6 +22775,7 @@ class EditorJsComponent {
         this.timeoutHandle = null;
         this.timeoutTextEditionHandle = null;
         this.onChangeTimeoutHandle = null;
+        this.editorInitialized = false;
         this.wrapperTags = 'h1,h2,h3,h4,h5,h6,p,ul,ol,blockquote';
     }
     ngOnInit() {
@@ -22819,7 +22837,7 @@ class EditorJsComponent {
                     clearTimeout(this.onChangeTimeoutHandle);
                     this.onChangeTimeoutHandle = setTimeout(() => {
                         this.contentChanged(api, event);
-                    }, 300);
+                    }, 200);
                 },
                 i18n: this.getI18nDictionnary(),
             });
@@ -22830,12 +22848,10 @@ class EditorJsComponent {
                     this.content = content;
                     this.applyContent();
                     this.checkSingleChild();
-                    setTimeout(() => {
-                        const editorElement = document.getElementById('editorJs-' + this.uuid);
-                        editorElement.addEventListener('focusin', () => {
-                            setlistApiEditor(this.editor, editorElement);
-                        });
-                    }, 0);
+                    const editorElement = document.getElementById('editorJs-' + this.uuid);
+                    editorElement.addEventListener('focusin', () => {
+                        setlistApiEditor(this.editor, editorElement);
+                    });
                 });
             }
             catch (reason) {
@@ -22846,7 +22862,6 @@ class EditorJsComponent {
     ngOnDestroy() {
         const editorName = 'editorJs-' + this.uuid;
         this.deleteSavedEditorContent(editorName);
-        this.deleteSavedEditorContent(editorName);
         this.editor.destroy();
     }
     handleDefaultContentTranslation() {
@@ -22863,7 +22878,13 @@ class EditorJsComponent {
                     .save()
                     .then(() => {
                     this.content = this.getEditorContent();
-                    this.saveEditorContent(this.content, this.uuid);
+                    if (!this.editorInitialized) {
+                        this.handleSaveEditor(this.content, this.uuid);
+                        this.editorInitialized = true;
+                    }
+                    else {
+                        this.saveEditorContent(this.content);
+                    }
                     this.contentChange.emit(this.content);
                 })
                     .catch((error) => {
@@ -23005,11 +23026,11 @@ class EditorJsComponent {
         }
         return null;
     }
-    saveEditorContent(data, uuid) {
+    saveEditorContent(data) {
         if (!isTextEditionTool) {
             clearTimeout(this.timeoutHandle);
             this.timeoutHandle = setTimeout(() => {
-                this.handleSaveEditor(data, uuid);
+                this.handleSaveEditor(data, this.uuid);
             }, 2000);
         }
         else {
@@ -23025,6 +23046,10 @@ class EditorJsComponent {
         let savedDataIndex = this.getSavedEditorContent(editorName + '-index')
             ? parseInt(this.getSavedEditorContent(editorName + '-index'))
             : -1;
+        if (!this.editorInitialized) {
+            savedData = null;
+            savedDataIndex = -1;
+        }
         let parsedSavedData = [];
         if (savedData) {
             parsedSavedData = JSON.parse(savedData);
@@ -23046,6 +23071,7 @@ class EditorJsComponent {
     }
     deleteSavedEditorContent(name) {
         localStorage.removeItem(name);
+        localStorage.removeItem(name + '-index');
     }
 }
 EditorJsComponent.decorators = [