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

package/bundles/wizishop-wizi-block.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@ngx-translate/core'), require('uuid'), require('@angular/cdk/drag-drop'), require('@angular/animations'), require('@angular/common/http'), require('rxjs/operators'), require('@angular/common'), require('@angular/forms'), require('@angular/platform-browser'), require('@ctrl/tinycolor'), require('quill'), require('monaco-editor'), require('ngx-quill'), require('@fortawesome/fontawesome-svg-core'), require('@fortawesome/free-solid-svg-icons'), require('@fortawesome/free-regular-svg-icons'), require('@fortawesome/free-brands-svg-icons'), require('@wizishop/ng-wizi-bulma'), require('ngx-scrollbar'), require('@editorjs/editorjs'), require('@jaames/iro'), require('ngx-monaco-editor'), require('leaflet'), require('places.js'), require('@asymmetrik/ngx-leaflet'), require('ngx-color-picker')) :
-    typeof define === 'function' && define.amd ? define('@wizishop/wizi-block', ['exports', '@angular/core', 'rxjs', '@ngx-translate/core', 'uuid', '@angular/cdk/drag-drop', '@angular/animations', '@angular/common/http', 'rxjs/operators', '@angular/common', '@angular/forms', '@angular/platform-browser', '@ctrl/tinycolor', 'quill', 'monaco-editor', 'ngx-quill', '@fortawesome/fontawesome-svg-core', '@fortawesome/free-solid-svg-icons', '@fortawesome/free-regular-svg-icons', '@fortawesome/free-brands-svg-icons', '@wizishop/ng-wizi-bulma', 'ngx-scrollbar', '@editorjs/editorjs', '@jaames/iro', 'ngx-monaco-editor', 'leaflet', 'places.js', '@asymmetrik/ngx-leaflet', 'ngx-color-picker'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wizishop = global.wizishop || {}, global.wizishop['wizi-block'] = {}), global.ng.core, global.rxjs, global.i1, global['^3']['3']['2'], global.ng.cdk.dragDrop, global.ng.animations, global.ng.common.http, global.rxjs.operators, global.ng.common, global.ng.forms, global.ng.platformBrowser, global['^2']['5']['2'], global['^1']['3']['6'], global.monaco, global['^5']['0']['0'], global['^1']['2']['27'], global['^5']['12']['1'], global['^5']['12']['1'], global['^5']['12']['1'], global['^7']['0']['11'], global['^7']['2']['1-beta']['0'], global.EditorJS, global.iro, global['^8']['1']['1'], global['^1']['5']['1'], global['^1']['16']['4'], global['^5']['0']['2'], global['^9']['0']['0']));
-}(this, (function (exports, i0, rxjs, i1, uuid, dragDrop, animations, i1$1, operators, common, forms, platformBrowser, tinycolor, QuillNamespace, monaco, ngxQuill, fontawesomeSvgCore, freeSolidSvgIcons, freeRegularSvgIcons, freeBrandsSvgIcons, ngWiziBulma, ngxScrollbar, EditorJS, iro, ngxMonacoEditor, leaflet, places, ngxLeaflet, ngxColorPicker) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@ngx-translate/core'), require('uuid'), require('@angular/cdk/drag-drop'), require('@angular/animations'), require('@angular/common/http'), require('rxjs/operators'), require('@angular/common'), require('@angular/forms'), require('@angular/platform-browser'), require('@ctrl/tinycolor'), require('quill'), require('monaco-editor'), require('ngx-quill'), require('@fortawesome/fontawesome-svg-core'), require('@fortawesome/free-solid-svg-icons'), require('@fortawesome/free-regular-svg-icons'), require('@fortawesome/free-brands-svg-icons'), require('@wizishop/ng-wizi-bulma'), require('ngx-scrollbar'), require('@editorjs/editorjs'), require('@jaames/iro'), require('codemirror'), require('@codemirror/state'), require('@codemirror/lang-html'), require('ngx-monaco-editor'), require('leaflet'), require('places.js'), require('@asymmetrik/ngx-leaflet'), require('ngx-color-picker')) :
+    typeof define === 'function' && define.amd ? define('@wizishop/wizi-block', ['exports', '@angular/core', 'rxjs', '@ngx-translate/core', 'uuid', '@angular/cdk/drag-drop', '@angular/animations', '@angular/common/http', 'rxjs/operators', '@angular/common', '@angular/forms', '@angular/platform-browser', '@ctrl/tinycolor', 'quill', 'monaco-editor', 'ngx-quill', '@fortawesome/fontawesome-svg-core', '@fortawesome/free-solid-svg-icons', '@fortawesome/free-regular-svg-icons', '@fortawesome/free-brands-svg-icons', '@wizishop/ng-wizi-bulma', 'ngx-scrollbar', '@editorjs/editorjs', '@jaames/iro', 'codemirror', '@codemirror/state', '@codemirror/lang-html', 'ngx-monaco-editor', 'leaflet', 'places.js', '@asymmetrik/ngx-leaflet', 'ngx-color-picker'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.wizishop = global.wizishop || {}, global.wizishop['wizi-block'] = {}), global.ng.core, global.rxjs, global.i1, global['^3']['3']['2'], global.ng.cdk.dragDrop, global.ng.animations, global.ng.common.http, global.rxjs.operators, global.ng.common, global.ng.forms, global.ng.platformBrowser, global['^2']['5']['2'], global['^1']['3']['6'], global.monaco, global['^5']['0']['0'], global['^1']['2']['27'], global['^5']['12']['1'], global['^5']['12']['1'], global['^5']['12']['1'], global['^7']['0']['11'], global['^7']['2']['1-beta']['0'], global.EditorJS, global.iro, global.codemirror, global.state, global.langHtml, global['^8']['1']['1'], global['^1']['5']['1'], global['^1']['16']['4'], global['^5']['0']['2'], global['^9']['0']['0']));
+}(this, (function (exports, i0, rxjs, i1, uuid, dragDrop, animations, i1$1, operators, common, forms, platformBrowser, tinycolor, QuillNamespace, monaco, ngxQuill, fontawesomeSvgCore, freeSolidSvgIcons, freeRegularSvgIcons, freeBrandsSvgIcons, ngWiziBulma, ngxScrollbar, EditorJS, iro, codemirror, state, langHtml, ngxMonacoEditor, leaflet, places, ngxLeaflet, ngxColorPicker) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -20355,6 +20355,13 @@
             var selection = this.currentSelection ? this.currentSelection : this.getSelection();
             return selection.anchorNode.parentElement.closest('.editorJs');
         };
+        EditorJSTool.prototype.findParentModifier = function () {
+            if (!this.parentEditor) {
+                this.parentEditor = this.findParentEditor();
+            }
+            return (this.parentEditor.querySelectorAll('.ce-block')[this.api.blocks.getCurrentBlockIndex()].querySelector('.ce-paragraph')
+                .children[0]);
+        };
         EditorJSTool.prototype.clear = function () {
             resetBlockFocus(this.parentEditor);
         };
@@ -20422,7 +20429,7 @@
         }
         InlineStyleTool.prototype.execCommandStyle = function (action) {
             return __awaiter(this, void 0, void 0, function () {
-                var selection, anchorNode, container, sameSelection, error_1;
+                var selection, anchorNode, container, sameSelection;
                 return __generator(this, function (_c) {
                     switch (_c.label) {
                         case 0:
@@ -20444,41 +20451,38 @@
                             return [4 /*yield*/, this.saveInlineSelection(container, true)];
                         case 1:
                             _c.sent();
-                            _c.label = 2;
-                        case 2:
-                            _c.trys.push([2, 12, , 13]);
-                            if (!this.linkDeletion) return [3 /*break*/, 4];
+                            console.log('=== inline tool execCommandStyle method ===');
+                            console.log(this.hasStyle(container));
+                            if (!this.linkDeletion) return [3 /*break*/, 3];
                             return [4 /*yield*/, this.replaceLink(selection, this.hasStyle(container))];
-                        case 3:
+                        case 2:
                             _c.sent();
-                            return [3 /*break*/, 8];
-                        case 4:
+                            return [3 /*break*/, 7];
+                        case 3:
                             if (!(sameSelection &&
                                 !this.isContainer(this.textContainers, container) &&
                                 this.hasStyle(container) &&
-                                selection.toString() === this.hasStyle(container).innerText)) return [3 /*break*/, 6];
+                                selection.toString() === this.hasStyle(container).innerText)) return [3 /*break*/, 5];
+                            console.log('-> update selection');
                             return [4 /*yield*/, this.updateSelection(selection, this.hasStyle(container), action, this.textContainers)];
-                        case 5:
+                        case 4:
                             _c.sent();
-                            return [3 /*break*/, 8];
-                        case 6: return [4 /*yield*/, this.replaceSelection(this.getMostDescendantChild(container), action, selection, this.textContainers)];
-                        case 7:
+                            return [3 /*break*/, 7];
+                        case 5:
+                            console.log('-> replace selection');
+                            return [4 /*yield*/, this.replaceSelection(this.getMostDescendantChild(container), action, selection, this.textContainers)];
+                        case 6:
                             _c.sent();
-                            _c.label = 8;
-                        case 8: return [4 /*yield*/, this.cleanupContainer(selection, container, true)];
-                        case 9:
+                            _c.label = 7;
+                        case 7: return [4 /*yield*/, this.cleanupContainer(selection, container, true)];
+                        case 8:
                             _c.sent();
-                            if (!this.modifiedContent) return [3 /*break*/, 11];
+                            if (!this.modifiedContent) return [3 /*break*/, 10];
                             return [4 /*yield*/, this.resetInlineSelection(container, true)];
-                        case 10:
+                        case 9:
                             _c.sent();
-                            _c.label = 11;
-                        case 11: return [3 /*break*/, 13];
-                        case 12:
-                            error_1 = _c.sent();
-                            console.warn('Inline Tool Error : ' + error_1);
-                            return [3 /*break*/, 13];
-                        case 13: return [2 /*return*/];
+                            _c.label = 10;
+                        case 10: return [2 /*return*/];
                     }
                 });
             });
@@ -20535,20 +20539,21 @@
         InlineStyleTool.prototype.replaceSelection = function (container, action, selection, containers) {
             var _a;
             return __awaiter(this, void 0, void 0, function () {
-                var parentContainer, focusNode, offsetContainer, offsetParentContainer, range, currentFragment, currentElement_1, currentElementToAppend, currentParentElement, tmpElement, isLTR, selectionFocusOffset, selectionFocusNode, newSelection, preRange, preFragment, newElement, range, fragment, fragmentElement, newElement_2, elementToAppend;
+                var focusNode, offsetContainer, parentContainer, offsetParentContainer, range, currentFragment, currentElement_1, currentElementToAppend, currentParentElement, tmpElement, isLTR, selectionFocusOffset, selectionFocusNode, newSelection, preRange, preFragment, newElement, range, fragment, fragmentElement, newElement_2, elementToAppend;
                 return __generator(this, function (_c) {
                     switch (_c.label) {
                         case 0:
-                            parentContainer = this.hasStyle(container);
                             focusNode = selection.focusNode;
                             offsetContainer = focusNode.nodeType !== Node.TEXT_NODE && focusNode.nodeType !== Node.COMMENT_NODE
                                 ? focusNode
                                 : focusNode.parentElement;
+                            parentContainer = this.hasStyle(container);
                             offsetParentContainer = this.hasStyle(offsetContainer);
                             if (!(parentContainer &&
                                 parentContainer === offsetParentContainer &&
                                 ((parentContainer.children.length > 0 && parentContainer.innerText !== parentContainer.children[0].textContent) ||
                                     parentContainer.innerText !== selection.toString()))) return [3 /*break*/, 3];
+                            console.log('if');
                             range = this.getRangeObject(selection);
                             currentFragment = range.extractContents();
                             currentElement_1 = document.createElement('span');
@@ -20593,9 +20598,13 @@
                             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);
                             return [3 /*break*/, 7];
                         case 3:
+                            console.log('else');
                             range = this.getRangeObject(selection);
                             fragment = range.extractContents();
                             fragmentElement = document.createElement('div');
@@ -20603,6 +20612,7 @@
                         case 4:
                             newElement_2 = _c.sent();
                             elementToAppend = newElement_2;
+                            console.log(newElement_2);
                             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) {
@@ -20822,10 +20832,30 @@
                 });
             });
         };
+        InlineStyleTool.prototype.parentHasStyle = function (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;
+        };
         InlineStyleTool.prototype.cleanupContainer = function (selection, container, firstTimeCall) {
-            var _a, _b;
+            var _a;
             return __awaiter(this, void 0, void 0, function () {
-                var parentContainer, parentFound, children, currentNode, identicalElements, currentElement, nextElement, currentNodeFirstChild;
+                var parentContainer, parentFound, children, currentNode, previousSibling, currentNodeFirstChild, nextCurrentElement, identicalElements, currentElement, nextElement, currentNodeFirstChild;
                 return __generator(this, function (_c) {
                     switch (_c.label) {
                         case 0:
@@ -20849,25 +20879,27 @@
                             }
                             parentContainer.normalize();
                             children = Array.from(parentContainer.childNodes);
-                            if (!((children === null || children === void 0 ? void 0 : children.length) > 0)) return [3 /*break*/, 6];
+                            if (!((children === null || children === void 0 ? void 0 : children.length) > 0)) return [3 /*break*/, 4];
                             currentNode = children[0];
                             _c.label = 1;
                         case 1:
-                            if (!currentNode) return [3 /*break*/, 6];
-                            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)) return [3 /*break*/, 2];
-                            parentContainer.removeChild(currentNode);
-                            return [3 /*break*/, 5];
-                        case 2:
-                            if (!(currentNode.childNodes.length > 0)) return [3 /*break*/, 4];
-                            return [4 /*yield*/, this.cleanupContainer(selection, currentNode, false)];
-                        case 3:
-                            _c.sent();
-                            _c.label = 4;
-                        case 4:
+                            if (!currentNode) return [3 /*break*/, 4];
+                            if ((!currentNode.textContent || currentNode.textContent.length === 0) || (currentNode.nodeType === Node.ELEMENT_NODE && currentNode.innerText.length === 0)) {
+                                previousSibling = currentNode.previousSibling;
+                                parentContainer.removeChild(currentNode);
+                                currentNode = previousSibling;
+                            }
+                            if (currentNode.nodeType === Node.ELEMENT_NODE &&
+                                this.parentHasStyle(currentNode.parentElement, currentNode)) {
+                                currentNodeFirstChild = currentNode;
+                                nextCurrentElement = currentNode.firstChild;
+                                while (currentNode.firstChild) {
+                                    parentContainer.insertBefore(currentNode.firstChild, currentNodeFirstChild.nextSibling);
+                                    currentNodeFirstChild = currentNodeFirstChild.nextSibling;
+                                }
+                                parentContainer.removeChild(currentNode);
+                                currentNode = nextCurrentElement;
+                            }
                             identicalElements = true;
                             while (identicalElements &&
                                 currentNode.nextSibling &&
@@ -20878,8 +20910,7 @@
                                 if (this.identicalInlineStyle(currentElement, nextElement) &&
                                     currentElement.tagName.toLowerCase() === nextElement.tagName.toLowerCase() &&
                                     this.identicalClassList(currentElement, nextElement) &&
-                                    !currentElement.hasAttributes() &&
-                                    !nextElement.hasAttributes()) {
+                                    this.identicalAttributes(currentElement, nextElement)) {
                                     currentElement.innerHTML += nextElement.innerHTML;
                                     nextElement.remove();
                                     this.modifiedContent = true;
@@ -20902,11 +20933,15 @@
                                 this.modifiedContent = true;
                             }
                             currentNode.normalize();
-                            _c.label = 5;
-                        case 5:
+                            if (!(currentNode.childNodes.length > 0)) return [3 /*break*/, 3];
+                            return [4 /*yield*/, this.cleanupContainer(selection, currentNode, false)];
+                        case 2:
+                            _c.sent();
+                            _c.label = 3;
+                        case 3:
                             currentNode = currentNode.nextSibling;
                             return [3 /*break*/, 1];
-                        case 6: return [2 /*return*/];
+                        case 4: return [2 /*return*/];
                     }
                 });
             });
@@ -20926,6 +20961,17 @@
             return (__spread(currentElement.classList).every(function (classList) { return nextElement.classList.contains(classList); }) &&
                 __spread(nextElement.classList).every(function (classList) { return currentElement.classList.contains(classList); }));
         };
+        InlineStyleTool.prototype.identicalAttributes = function (currentElement, nextElement) {
+            var currentElementAttributes = currentElement.getAttributeNames();
+            currentElementAttributes.forEach(function (attribute) {
+                if (attribute !== 'style') {
+                    if (!nextElement.getAttribute(attribute) || nextElement.getAttribute(attribute) !== currentElement.getAttribute(attribute)) {
+                        return false;
+                    }
+                }
+            });
+            return true;
+        };
         InlineStyleTool.prototype.identicalInlineStyle = function (currentElement, nextElement) {
             var currentElementInlineStyle = this.getInlineStyle(currentElement);
             var nextElementInlineStyle = this.getInlineStyle(nextElement);
@@ -20971,7 +21017,7 @@
         InlineStyleTool.prototype.saveInlineSelection = function (container, firstTimeCall) {
             if (firstTimeCall === void 0) { firstTimeCall = false; }
             return __awaiter(this, void 0, void 0, function () {
-                var nextNode, selection, range, currentFragment, currentElement;
+                var nextNode, selection, isLTR, range, currentFragment, currentElement;
                 return __generator(this, function (_c) {
                     switch (_c.label) {
                         case 0:
@@ -20994,9 +21040,10 @@
                         case 1:
                             if (!(nextNode && (!this.foundAnchorNode || !this.foundFocusNode))) return [3 /*break*/, 4];
                             if (nextNode === this.selectedAnchorNode) {
-                                this.foundAnchorNode = true;
-                                this.foundAnchorOffset += this.anchorOffset;
                                 selection = this.getSelection();
+                                isLTR = this.isAnchorBeforeFocus(selection.anchorNode, selection.anchorOffset, selection.focusNode, selection.focusOffset);
+                                this.foundAnchorNode = true;
+                                this.foundAnchorOffset += isLTR ? this.anchorOffset : this.focusOffset;
                                 range = this.getRangeObject(selection);
                                 currentFragment = range.cloneContents();
                                 currentElement = document.createElement('span');
@@ -22667,7 +22714,7 @@
                     if (!anchorNode) {
                         return [2 /*return*/];
                     }
-                    parentModifier = this.findParentModifier(anchorNode.parentElement);
+                    parentModifier = this.findParentModifier();
                     try {
                         if (this.tag.toLowerCase() !== 'span') {
                             this.changeContainerTag(parentModifier, selection);
@@ -22804,22 +22851,6 @@
                 container.className += (container.className.length > 0 ? ' ' : '') + this.classToApply;
             }
         };
-        ParagraphStyleTool.prototype.findParentModifier = function (element) {
-            var 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;
-        };
         return ParagraphStyleTool;
     }(EditorJSTool));
     var listApi = null;
@@ -23158,7 +23189,7 @@
             if (!isBlockFocused) {
                 setBlockFocus(this.parentEditor);
             }
-            var parentModifier = this.findParentModifier(selection.anchorNode.parentElement);
+            var parentModifier = this.findParentModifier();
             if (!parentModifier) {
                 return false;
             }
@@ -23469,7 +23500,7 @@
             if (!isBlockFocused) {
                 setBlockFocus(this.parentEditor);
             }
-            var parentModifier = this.findParentModifier(selection.anchorNode.parentElement);
+            var parentModifier = this.findParentModifier();
             if (!parentModifier) {
                 return false;
             }
@@ -23605,7 +23636,7 @@
             if (!isBlockFocused) {
                 setBlockFocus(this.parentEditor);
             }
-            var parentModifier = this.findParentModifier(selection.anchorNode.parentElement);
+            var parentModifier = this.findParentModifier();
             if (!parentModifier) {
                 return false;
             }
@@ -23693,7 +23724,7 @@
             if (!isBlockFocused) {
                 setBlockFocus(this.parentEditor);
             }
-            var parentModifier = this.findParentModifier(selection.anchorNode.parentElement);
+            var parentModifier = this.findParentModifier();
             if (!parentModifier) {
                 return false;
             }
@@ -23781,7 +23812,7 @@
             if (!isBlockFocused) {
                 setBlockFocus(this.parentEditor);
             }
-            var parentModifier = this.findParentModifier(selection.anchorNode.parentElement);
+            var parentModifier = this.findParentModifier();
             if (!parentModifier) {
                 return false;
             }
@@ -24419,23 +24450,6 @@
                 return true;
             }
         };
-        InlineTextTool.prototype.findParentModifier = function (element) {
-            var modifiers = 'h1,h2,h3,h4,h5,h6,p,ul,ol,blockquote';
-            var 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;
-        };
         return InlineTextTool;
     }(InlineStyleTool));
 
@@ -24674,20 +24688,17 @@
             modal.appendChild(editorContainer);
             modal.appendChild(buttonContainer);
             container.appendChild(modal);
-            document.querySelector('body').appendChild(container);
-            setTimeout(function () {
-                console.log('monacoeditor init');
-                var monacoEditor = monaco.editor.create(editorContainer, {
-                    value: content,
-                    language: 'html',
-                    ariaContainerElement: container
-                });
-                saveButton.addEventListener('click', function () {
-                    var content = monacoEditor.getValue();
-                    saveCodeEditModal(content);
-                }, true);
-                buttonContainer.appendChild(saveButton);
-            }, 200);
+            document.body.appendChild(container);
+            var state$1 = state.EditorState.create({
+                doc: content,
+                extensions: [codemirror.basicSetup, langHtml.html()],
+            });
+            var view = new codemirror.EditorView({
+                state: state$1,
+                parent: editorContainer,
+            });
+            saveButton.addEventListener('click', function () { return saveCodeEditModal(view.state.doc.toString()); }, true);
+            buttonContainer.appendChild(saveButton);
         };
         TextEditionTool.prototype.getSavedEditorContent = function (name) {
             return localStorage.getItem(name);
@@ -25271,6 +25282,7 @@
             this.timeoutHandle = null;
             this.timeoutTextEditionHandle = null;
             this.onChangeTimeoutHandle = null;
+            this.editorInitialized = false;
             this.wrapperTags = 'h1,h2,h3,h4,h5,h6,p,ul,ol,blockquote';
         }
         EditorJsComponent.prototype.ngOnInit = function () {
@@ -25337,7 +25349,7 @@
                                     clearTimeout(_this.onChangeTimeoutHandle);
                                     _this.onChangeTimeoutHandle = setTimeout(function () {
                                         _this.contentChanged(api, event);
-                                    }, 300);
+                                    }, 200);
                                 },
                                 i18n: this.getI18nDictionnary(),
                             });
@@ -25352,12 +25364,10 @@
                                 _this.content = content;
                                 _this.applyContent();
                                 _this.checkSingleChild();
-                                setTimeout(function () {
-                                    var editorElement = document.getElementById('editorJs-' + _this.uuid);
-                                    editorElement.addEventListener('focusin', function () {
-                                        setlistApiEditor(_this.editor, editorElement);
-                                    });
-                                }, 0);
+                                var editorElement = document.getElementById('editorJs-' + _this.uuid);
+                                editorElement.addEventListener('focusin', function () {
+                                    setlistApiEditor(_this.editor, editorElement);
+                                });
                             });
                             return [3 /*break*/, 4];
                         case 3:
@@ -25372,7 +25382,6 @@
         EditorJsComponent.prototype.ngOnDestroy = function () {
             var editorName = 'editorJs-' + this.uuid;
             this.deleteSavedEditorContent(editorName);
-            this.deleteSavedEditorContent(editorName);
             this.editor.destroy();
         };
         EditorJsComponent.prototype.handleDefaultContentTranslation = function () {
@@ -25390,7 +25399,13 @@
                         .save()
                         .then(function () {
                         _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(function (error) {
@@ -25533,12 +25548,12 @@
             }
             return null;
         };
-        EditorJsComponent.prototype.saveEditorContent = function (data, uuid) {
+        EditorJsComponent.prototype.saveEditorContent = function (data) {
             var _this = this;
             if (!isTextEditionTool) {
                 clearTimeout(this.timeoutHandle);
                 this.timeoutHandle = setTimeout(function () {
-                    _this.handleSaveEditor(data, uuid);
+                    _this.handleSaveEditor(data, _this.uuid);
                 }, 2000);
             }
             else {
@@ -25554,6 +25569,10 @@
             var savedDataIndex = this.getSavedEditorContent(editorName + '-index')
                 ? parseInt(this.getSavedEditorContent(editorName + '-index'))
                 : -1;
+            if (!this.editorInitialized) {
+                savedData = null;
+                savedDataIndex = -1;
+            }
             var parsedSavedData = [];
             if (savedData) {
                 parsedSavedData = JSON.parse(savedData);
@@ -25575,6 +25594,7 @@
         };
         EditorJsComponent.prototype.deleteSavedEditorContent = function (name) {
             localStorage.removeItem(name);
+            localStorage.removeItem(name + '-index');
         };
         return EditorJsComponent;
     }());