@worktile/theia 2.1.5 → 2.1.9

package/bundles/worktile-theia.umd.js

@@ -520,7 +520,6 @@
     })(exports.ToolbarItemMode || (exports.ToolbarItemMode = {}));
     var DefaultGlobalToolbarDefinition = [
         exports.ElementKinds.headingList,
-        exports.MarkTypes.fontSize,
         exports.ToolbarActionTypes.split,
         exports.MarkTypes.bold,
         exports.MarkTypes.italic,
@@ -535,7 +534,6 @@
         exports.ToolbarActionTypes.split,
         exports.ElementKinds.numberedList,
         exports.ElementKinds.bulletedList,
-        // ElementKinds.checkItem,
         exports.ToolbarActionTypes.split,
         exports.ElementKinds.link,
         exports.ElementKinds.image,
@@ -562,7 +560,6 @@
         exports.ToolbarActionTypes.split,
         exports.ElementKinds.numberedList,
         exports.ElementKinds.bulletedList,
-        // ElementKinds.checkItem,
         exports.ToolbarActionTypes.split,
         exports.ElementKinds.link,
         exports.ElementKinds.image,
@@ -1941,9 +1938,6 @@
         var aboveResult = slate.Editor.above(editor, {
             match: function (n) { return slate.Editor.isBlock(editor, n) && n.type === type; }
         });
-        if (isEnd) {
-            editor.marks = {};
-        }
         if (aboveResult && aboveResult[0] && isEnd && isEmpty) {
             var wrapBlock = aboveResult[0];
             if (wrapBlock.type === type) {
@@ -2203,8 +2197,12 @@
         unwrapInlineCode: function (editor) {
             slate.Transforms.unwrapNodes(editor, { match: function (n) { return slate.Element.isElement(n) && n.type === exports.ElementKinds.inlineCode; } });
         },
-        isInlineCodeActive: function (editor) {
-            var _a = __read(slate.Editor.nodes(editor, { match: function (n) { return slate.Element.isElement(n) && n.type === exports.ElementKinds.inlineCode; } }), 1), inlineCode = _a[0];
+        isInlineCodeActive: function (editor, path) {
+            var _a;
+            var _b = __read(slate.Editor.nodes(editor, {
+                at: path ? path : (_a = editor.selection) === null || _a === void 0 ? void 0 : _a.anchor.path,
+                match: function (n) { return slate.Element.isElement(n) && n.type === exports.ElementKinds.inlineCode; }
+            }), 1), inlineCode = _b[0];
             return !!inlineCode;
         }
     };
@@ -2470,6 +2468,35 @@
     var IS_MAC = typeof window != 'undefined' && /Mac|iPod|iPhone|iPad/.test(window.navigator.platform);
     var CONTROL_KEY = IS_MAC ? '⌘' : 'Ctrl';
 
+    /**
+     * whether the current node is a clean paragraph
+     * @param editor
+     * @param text
+     * @returns boolean
+     */
+    var isCleanEmptyParagraph = function (editor) {
+        var isCollapsedCursor = TheEditor.isFocused(editor) && editor.selection && slate.Range.isCollapsed(editor.selection);
+        if (!isCollapsedCursor) {
+            return false;
+        }
+        var block = slate.Node.ancestor(editor, [editor.selection.anchor.path[0]]);
+        var textIndent = 'textIndent';
+        var align = 'align';
+        var hasTextIndent = block[textIndent];
+        var hasAlign = block[align];
+        if (slate.Node.string(block) === '' &&
+            slate.Element.isElement(block) &&
+            block.type === exports.ElementKinds.paragraph &&
+            block.children.length === 1 &&
+            slate.Text.isText(block.children[0]) &&
+            !slate.Editor.isVoid(editor, block) &&
+            !hasTextIndent &&
+            !hasAlign) {
+            return true;
+        }
+        return false;
+    };
+
     var withDeserializeMd = function (options) { return function (editor) {
         var insertData = editor.insertData, onKeydown = editor.onKeydown;
         editor.onKeydown = function (event) {
@@ -2972,7 +2999,7 @@
         return TheImageComponent;
     }(TheBaseElementComponent));
     TheImageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheImageComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace$2.DomSanitizer }, { token: THE_UPLOAD_SERVICE_TOKEN }, { token: i0__namespace.ChangeDetectorRef }, { token: TheContextService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheImageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheImageComponent, selector: "the-image, [theImage]", viewQueries: [{ propertyName: "imageContent", first: true, predicate: ["imageContent"], descendants: true }, { propertyName: "img", first: true, predicate: ["img"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n<div class=\"image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align || 'center'\">\n    <div\n        #imageContent\n        *ngIf=\"imageEntry.thumbUrl\"\n        class=\"image-content\"\n        [class.pointer]=\"!selection\"\n        [ngStyle]=\"{ width: imageEntry.width + 'px', height: imageEntry.height + 'px' }\"\n    >\n        <img #img class=\"main-image\" [src]=\"imageEntry.thumbUrl\" [alt]=\"imageEntry.name\" />\n        <div *ngIf=\"selection\" class=\"image-profile\" [class.outline]=\"selection\">\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n        </div>\n        <div *ngIf=\"uploading\" class=\"uploading\">\n            <div class=\"uploading-percentage\">\n                <thy-progress thyType=\"primary\" [thyValue]=\"percentage\" thySize=\"sm\"></thy-progress>\n                <thy-icon (click)=\"cancelUpload($event)\" thyIconName=\"close-circle-bold-fill\" thyIconLegging=\"true\"></thy-icon>\n            </div>\n        </div>\n        <div *ngIf=\"!uploading\" class=\"layer\" (mousedown)=\"preview($event)\" [class.readonly]=\"readonly\"></div>\n    </div>\n    <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading\" contenteditable=\"false\">\n        <thy-icon thyIconName=\"image\"></thy-icon>\n    </div>\n</div>\n", components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i4__namespace.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thyTips", "thyValue", "thySize", "thyMax"] }, { type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    TheImageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheImageComponent, selector: "the-image, [theImage]", viewQueries: [{ propertyName: "imageContent", first: true, predicate: ["imageContent"], descendants: true }, { propertyName: "img", first: true, predicate: ["img"], descendants: true }], usesInheritance: true, ngImport: i0__namespace, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n<div class=\"image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align || 'center'\">\n    <div\n        #imageContent\n        *ngIf=\"imageEntry.thumbUrl\"\n        class=\"image-content\"\n        [class.pointer]=\"!selection\"\n        [ngStyle]=\"{ width: imageEntry.width + 'px', height: imageEntry.height + 'px' }\"\n    >\n        <img #img class=\"main-image\" [src]=\"imageEntry.thumbUrl\" [alt]=\"imageEntry.name\" />\n        <div *ngIf=\"selection\" class=\"image-profile\" [class.outline]=\"selection\">\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n        </div>\n        <div *ngIf=\"uploading\" class=\"uploading\">\n            <div class=\"uploading-percentage\">\n                <thy-progress thyType=\"primary\" [thyValue]=\"percentage\" thySize=\"sm\"></thy-progress>\n                <thy-icon (click)=\"cancelUpload($event)\" thyIconName=\"close-circle-bold-fill\" thyIconLegging=\"true\"></thy-icon>\n            </div>\n        </div>\n        <div *ngIf=\"!uploading\" class=\"layer\" (mousedown)=\"preview($event)\" [class.readonly]=\"readonly\"></div>\n    </div>\n    <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading\" contenteditable=\"false\">\n        <thy-icon thyIconName=\"image\"></thy-icon>\n    </div>\n</div>\n", components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i4__namespace.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips"] }, { type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheImageComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -3484,14 +3511,17 @@
             }
             else {
                 /**
-                 * If end, insert a list item after and select it
+                 * If end, split nodes
                  */
                 slate.Editor.withoutNormalizing(editor, function () {
-                    slate.Transforms.insertNodes(editor, {
-                        type: exports.ElementKinds.listItem,
-                        children: [{ type: exports.ElementKinds.paragraph, children: [{ text: '' }] }]
-                    }, { at: nextListItemPath_1 });
-                    slate.Transforms.select(editor, nextListItemPath_1);
+                    slate.Transforms.splitNodes(editor, {
+                        always: true,
+                        mode: 'highest',
+                        match: function (node) {
+                            var path = node && TheEditor.findPath(editor, node);
+                            return path && path.length === nextListItemPath_1.length;
+                        }
+                    });
                 });
             }
             /**
@@ -5075,8 +5105,17 @@
         return editor;
     };
 
+    var isInline = function (editor, path) {
+        var _a;
+        var _b = __read(slate.Editor.nodes(editor, {
+            at: path ? path : (_a = editor.selection) === null || _a === void 0 ? void 0 : _a.anchor.path,
+            match: function (n) { return slate.Element.isElement(n) && slate.Editor.isInline(editor, n) && !slate.Editor.isVoid(editor, n); }
+        }), 1), inlineNode = _b[0];
+        return !!inlineNode;
+    };
+
     var withMoveSelection = function (editor) {
-        var onClick = editor.onClick, deleteBackward = editor.deleteBackward;
+        var onClick = editor.onClick, deleteBackward = editor.deleteBackward, onKeydown = editor.onKeydown;
         editor.onClick = function (event) {
             var domSelection = window.getSelection();
             if (domSelection && !domSelection.isCollapsed && event.detail >= 2 && editor.selection) {
@@ -5107,6 +5146,50 @@
             }
             deleteBackward(unit);
         };
+        editor.onKeydown = function (event) {
+            var selection = editor.selection;
+            if (!selection || !selection.anchor || !selection.focus) {
+                onKeydown(event);
+                return;
+            }
+            var isMoveBackward = i1.hotkeys.isMoveBackward(event);
+            var isMoveForward = i1.hotkeys.isMoveForward(event);
+            var isCollapsed$1 = selection && isCollapsed(selection);
+            var isInlineNode = isInline(editor);
+            if (isCollapsed$1 && isMoveForward) {
+                var isInlineCodeBefore = false;
+                if (!isInlineNode) {
+                    try {
+                        var path = slate.Editor.after(editor, selection).path;
+                        if (path) {
+                            isInlineCodeBefore = isInline(editor, path);
+                        }
+                    }
+                    catch (error) { }
+                }
+                if (isInlineNode || isInlineCodeBefore) {
+                    event.preventDefault();
+                    slate.Transforms.move(editor, { unit: 'offset' });
+                    return;
+                }
+            }
+            if (isCollapsed$1 && isMoveBackward) {
+                var isInlineCodeAfter = false;
+                if (!isInlineNode) {
+                    try {
+                        var path = slate.Editor.before(editor, selection).path;
+                        isInlineCodeAfter = isInline(editor, path);
+                    }
+                    catch (error) { }
+                }
+                if (isInlineNode || isInlineCodeAfter) {
+                    event.preventDefault();
+                    slate.Transforms.move(editor, { unit: 'offset', reverse: true });
+                    return;
+                }
+            }
+            onKeydown(event);
+        };
         return editor;
     };
 
@@ -5709,9 +5792,9 @@
     /**
      * Insert a new table
      */
-    function insertTable(opts, editor, columns, rows, getCellContent) {
-        if (columns === void 0) { columns = 3; }
+    function insertTable(opts, editor, rows, columns, getCellContent) {
         if (rows === void 0) { rows = 3; }
+        if (columns === void 0) { columns = 3; }
         var selection = editor.selection;
         if (!(selection === null || selection === void 0 ? void 0 : selection.anchor)) {
             return;
@@ -7527,7 +7610,7 @@
         return TheLinkEditComponent;
     }());
     TheLinkEditComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheLinkEditComponent, deps: [{ token: i1__namespace$3.ThyPopoverRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheLinkEditComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheLinkEditComponent, selector: "the-link-edit", inputs: { tag: "tag", node: "node", link: "link", text: "text", originSelection: "originSelection" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class": "this.className" } }, ngImport: i0__namespace, template: "<form\n    thyForm\n    #linkForm=\"thyForm\"\n    [thyFormValidatorConfig]=\"validatorConfig\"\n    name=\"linkForm\"\n>\n    <thy-form-group thyLabelText=\"\u6587\u672C\">\n        <input\n            thyInput\n            placeholder=\"\u8BF7\u8F93\u5165\u6587\u672C\"\n            required\n            name=\"text\"\n            [(ngModel)]=\"text\"\n            thyAutofocus\n            type=\"text\"\n        />\n    </thy-form-group>\n    <thy-form-group thyLabelText=\"\u94FE\u63A5\">\n        <input\n            name=\"link\"\n            thyInput\n            placeholder=\"\u8BF7\u8F93\u5165\u94FE\u63A5\"\n            required\n            type=\"text\"\n            #linkControl=\"ngModel\"\n            [(ngModel)]=\"link\"\n        />\n    </thy-form-group>\n    <thy-form-group-footer>\n        <div class=\"btn-pair\">\n            <button\n                thyButton=\"link-secondary\"\n                thySize=\"sm\"\n                (click)=\"closePopover()\"\n            >\u53D6\u6D88</button>\n            <button\n                thyButton=\"primary-square\"\n                thySize=\"sm\"\n                (thyFormSubmit)=\"applyLink(linkForm)\"\n            >\u5E94\u7528</button>\n        </div>\n    </thy-form-group-footer>\n</form>\n", components: [{ type: i2__namespace$1.ThyFormGroupComponent, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { type: i2__namespace$1.ThyFormGroupFooterComponent, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { type: i1__namespace$5.ThyButtonComponent, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thySquare", "thyBlock"] }], directives: [{ type: i4__namespace$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4__namespace$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4__namespace$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2__namespace$1.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { type: i5__namespace$3.ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutoSelect", "thyAutofocus"] }, { type: i4__namespace$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5__namespace.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { type: i4__namespace$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace$1.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }] });
+    TheLinkEditComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheLinkEditComponent, selector: "the-link-edit", inputs: { tag: "tag", node: "node", link: "link", text: "text", originSelection: "originSelection" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class": "this.className" } }, ngImport: i0__namespace, template: "<form\n    thyForm\n    #linkForm=\"thyForm\"\n    [thyFormValidatorConfig]=\"validatorConfig\"\n    name=\"linkForm\"\n>\n    <thy-form-group thyLabelText=\"\u6587\u672C\">\n        <input\n            thyInput\n            placeholder=\"\u8BF7\u8F93\u5165\u6587\u672C\"\n            required\n            name=\"text\"\n            [(ngModel)]=\"text\"\n            thyAutofocus\n            type=\"text\"\n        />\n    </thy-form-group>\n    <thy-form-group thyLabelText=\"\u94FE\u63A5\">\n        <input\n            name=\"link\"\n            thyInput\n            placeholder=\"\u8BF7\u8F93\u5165\u94FE\u63A5\"\n            required\n            type=\"text\"\n            #linkControl=\"ngModel\"\n            [(ngModel)]=\"link\"\n        />\n    </thy-form-group>\n    <thy-form-group-footer>\n        <div class=\"btn-pair\">\n            <button\n                thyButton=\"link-secondary\"\n                thySize=\"sm\"\n                (click)=\"closePopover()\"\n            >\u53D6\u6D88</button>\n            <button\n                thyButton=\"primary-square\"\n                thySize=\"sm\"\n                (thyFormSubmit)=\"applyLink(linkForm)\"\n            >\u5E94\u7528</button>\n        </div>\n    </thy-form-group-footer>\n</form>\n", components: [{ type: i2__namespace$1.ThyFormGroupComponent, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { type: i2__namespace$1.ThyFormGroupFooterComponent, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { type: i1__namespace$5.ThyButtonComponent, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thySquare", "thyBlock"] }], directives: [{ type: i4__namespace$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4__namespace$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4__namespace$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2__namespace$1.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { type: i5__namespace$3.ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutoSelect", "thyAutofocus"] }, { type: i4__namespace$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5__namespace.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { type: i4__namespace$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace$1.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheLinkEditComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -7697,17 +7780,21 @@
     var TheLinkComponent = /** @class */ (function (_super) {
         __extends(TheLinkComponent, _super);
         function TheLinkComponent() {
-            return _super !== null && _super.apply(this, arguments) || this;
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            // Put this at the start and end of an inline component to work around this Chromium bug:
+            // https://bugs.chromium.org/p/chromium/issues/detail?id=1249405
+            _this.inlineChromiumBugfix = '$' + String.fromCodePoint(160);
+            return _this;
         }
         return TheLinkComponent;
     }(TheBaseLinkComponent));
     TheLinkComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheLinkComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheLinkComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheLinkComponent, selector: "span[theLink]", usesInheritance: true, ngImport: i0__namespace, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>", isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
+    TheLinkComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheLinkComponent, selector: "span[theLink]", usesInheritance: true, ngImport: i0__namespace, template: " <span contenteditable=\"false\" style=\"font-size: 0;\">{{ inlineChromiumBugfix }}</span>\n        <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n        <span contenteditable=\"false\" style=\"font-size: 0;\">{{ inlineChromiumBugfix }}</span>", isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheLinkComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'span[theLink]',
-                        template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>"
+                        template: " <span contenteditable=\"false\" style=\"font-size: 0;\">{{ inlineChromiumBugfix }}</span>\n        <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n        <span contenteditable=\"false\" style=\"font-size: 0;\">{{ inlineChromiumBugfix }}</span>"
                     }]
             }] });
     var TheReadonlyLinkComponent = /** @class */ (function (_super) {
@@ -11689,35 +11776,6 @@
         }
     ];
 
-    /**
-     * whether the current node is a clean paragraph
-     * @param editor
-     * @param text
-     * @returns boolean
-     */
-    var isCleanEmptyParagraph = function (editor) {
-        var isCollapsedCursor = TheEditor.isFocused(editor) && editor.selection && slate.Range.isCollapsed(editor.selection);
-        if (!isCollapsedCursor) {
-            return false;
-        }
-        var block = slate.Node.ancestor(editor, [editor.selection.anchor.path[0]]);
-        var textIndent = 'textIndent';
-        var align = 'align';
-        var hasTextIndent = block[textIndent];
-        var hasAlign = block[align];
-        if (slate.Node.string(block) === '' &&
-            slate.Element.isElement(block) &&
-            block.type === exports.ElementKinds.paragraph &&
-            block.children.length === 1 &&
-            slate.Text.isText(block.children[0]) &&
-            !slate.Editor.isVoid(editor, block) &&
-            !hasTextIndent &&
-            !hasAlign) {
-            return true;
-        }
-        return false;
-    };
-
     var TheToolbarItemComponent = /** @class */ (function (_super) {
         __extends(TheToolbarItemComponent, _super);
         function TheToolbarItemComponent(ngZone, cfr) {
@@ -12079,32 +12137,27 @@
 
     var TheInlineCodeComponent = /** @class */ (function (_super) {
         __extends(TheInlineCodeComponent, _super);
-        function TheInlineCodeComponent(elementRef, cdr) {
-            var _this = _super.call(this, elementRef, cdr) || this;
-            _this.elementRef = elementRef;
-            _this.cdr = cdr;
+        function TheInlineCodeComponent() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            // Put this at the start and end of an inline component to work around this Chromium bug:
+            // https://bugs.chromium.org/p/chromium/issues/detail?id=1249405
+            _this.inlineChromiumBugfix = '$' + String.fromCodePoint(160);
             return _this;
         }
-        TheInlineCodeComponent.prototype.ngOnInit = function () {
-            _super.prototype.ngOnInit.call(this);
-        };
-        TheInlineCodeComponent.prototype.ngOnDestroy = function () {
-            _super.prototype.ngOnDestroy.call(this);
-        };
         return TheInlineCodeComponent;
     }(TheBaseElementComponent));
-    TheInlineCodeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheInlineCodeComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheInlineCodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheInlineCodeComponent, selector: "span[theInlineCode]", usesInheritance: true, ngImport: i0__namespace, template: '<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>', isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
+    TheInlineCodeComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheInlineCodeComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheInlineCodeComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheInlineCodeComponent, selector: "span[theInlineCode]", usesInheritance: true, ngImport: i0__namespace, template: " <span contenteditable=\"false\" style=\"font-size: 0;\">{{ inlineChromiumBugfix }}</span>\n        <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n        <span contenteditable=\"false\" style=\"font-size: 0;\">{{ inlineChromiumBugfix }}</span>", isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheInlineCodeComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'span[theInlineCode]',
-                        template: '<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>'
+                        template: " <span contenteditable=\"false\" style=\"font-size: 0;\">{{ inlineChromiumBugfix }}</span>\n        <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n        <span contenteditable=\"false\" style=\"font-size: 0;\">{{ inlineChromiumBugfix }}</span>"
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; } });
+            }] });
 
     var withInlineCode = function (editor) {
-        var isInline = editor.isInline, renderElement = editor.renderElement, insertText = editor.insertText;
+        var isInline = editor.isInline, renderElement = editor.renderElement, insertText = editor.insertText, onKeydown = editor.onKeydown;
         editor.isInline = function (element) {
             return element.type === exports.ElementKinds.inlineCode ? true : isInline(element);
         };
@@ -12353,9 +12406,9 @@
             }
         };
         TheToolbarComponent.prototype.setToolbarClass = function () {
-            var _b;
+            var _d;
             if (this.editor && !!this.containerClass.length) {
-                (_b = this.elementRef.nativeElement.classList).add.apply(_b, __spreadArray([], __read(this.containerClass)));
+                (_d = this.elementRef.nativeElement.classList).add.apply(_d, __spreadArray([], __read(this.containerClass)));
             }
         };
         TheToolbarComponent.prototype.resizeElement = function () {
@@ -12363,7 +12416,7 @@
             var editableElement = this.elementRef.nativeElement;
             // @ts-ignore
             this.resizeObserver = new ResizeObserver(function (entries) {
-                var e_1, _b;
+                var e_1, _d;
                 try {
                     for (var entries_1 = __values(entries), entries_1_1 = entries_1.next(); !entries_1_1.done; entries_1_1 = entries_1.next()) {
                         var entry = entries_1_1.value;
@@ -12377,7 +12430,7 @@
                 catch (e_1_1) { e_1 = { error: e_1_1 }; }
                 finally {
                     try {
-                        if (entries_1_1 && !entries_1_1.done && (_b = entries_1.return)) _b.call(entries_1);
+                        if (entries_1_1 && !entries_1_1.done && (_d = entries_1.return)) _d.call(entries_1);
                     }
                     finally { if (e_1) throw e_1.error; }
                 }
@@ -12385,7 +12438,7 @@
             this.resizeObserver.observe(editableElement);
         };
         TheToolbarComponent.prototype.statusChange = function (editor) {
-            var e_2, _b;
+            var e_2, _d;
             var toolbarItems = __spreadArray(__spreadArray([], __read(this.toolbarItems)), [this.moreGroupMenu]);
             try {
                 for (var toolbarItems_1 = __values(toolbarItems), toolbarItems_1_1 = toolbarItems_1.next(); !toolbarItems_1_1.done; toolbarItems_1_1 = toolbarItems_1.next()) {
@@ -12401,7 +12454,7 @@
             catch (e_2_1) { e_2 = { error: e_2_1 }; }
             finally {
                 try {
-                    if (toolbarItems_1_1 && !toolbarItems_1_1.done && (_b = toolbarItems_1.return)) _b.call(toolbarItems_1);
+                    if (toolbarItems_1_1 && !toolbarItems_1_1.done && (_d = toolbarItems_1.return)) _d.call(toolbarItems_1);
                 }
                 finally { if (e_2) throw e_2.error; }
             }
@@ -12413,7 +12466,7 @@
             var toolbarItems = this.toolbarItemsCompose();
             var items = toolbarItems.items, group = toolbarItems.group;
             this.ngZone.run(function () {
-                var e_3, _b;
+                var e_3, _d;
                 try {
                     for (var items_1 = __values(items), items_1_1 = items_1.next(); !items_1_1.done; items_1_1 = items_1.next()) {
                         var item = items_1_1.value;
@@ -12427,7 +12480,7 @@
                 catch (e_3_1) { e_3 = { error: e_3_1 }; }
                 finally {
                     try {
-                        if (items_1_1 && !items_1_1.done && (_b = items_1.return)) _b.call(items_1);
+                        if (items_1_1 && !items_1_1.done && (_d = items_1.return)) _d.call(items_1);
                     }
                     finally { if (e_3) throw e_3.error; }
                 }
@@ -12450,7 +12503,7 @@
          * set aside 50px
          */
         TheToolbarComponent.prototype.toolbarItemsCompose = function () {
-            var e_4, _b;
+            var e_4, _d;
             var elementWidth = this.isMore ? this.elementWidth : null;
             var maxItemWidth = 50;
             var defaultItemWidth = 35;
@@ -12460,8 +12513,8 @@
             var items = [];
             var group = [];
             try {
-                for (var _c = __values(this.toolbarItems), _d = _c.next(); !_d.done; _d = _c.next()) {
-                    var item = _d.value;
+                for (var _e = __values(this.toolbarItems), _f = _e.next(); !_f.done; _f = _e.next()) {
+                    var item = _f.value;
                     if (!this.isMore) {
                         items.push(item);
                         continue;
@@ -12490,7 +12543,7 @@
             catch (e_4_1) { e_4 = { error: e_4_1 }; }
             finally {
                 try {
-                    if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
+                    if (_f && !_f.done && (_d = _e.return)) _d.call(_e);
                 }
                 finally { if (e_4) throw e_4.error; }
             }
@@ -12503,12 +12556,12 @@
          * externally designated more group
          */
         TheToolbarComponent.prototype.toolbarItemsAndMoreCompose = function () {
-            var e_5, _b;
+            var e_5, _d;
             var items = [];
             var group = [];
             try {
-                for (var _c = __values(this.toolbarItems), _d = _c.next(); !_d.done; _d = _c.next()) {
-                    var item = _d.value;
+                for (var _e = __values(this.toolbarItems), _f = _e.next(); !_f.done; _f = _e.next()) {
+                    var item = _f.value;
                     if (item.key === exports.ToolbarActionTypes.split) {
                         items.push(item);
                         continue;
@@ -12519,7 +12572,7 @@
             catch (e_5_1) { e_5 = { error: e_5_1 }; }
             finally {
                 try {
-                    if (_d && !_d.done && (_b = _c.return)) _b.call(_c);
+                    if (_f && !_f.done && (_d = _e.return)) _d.call(_e);
                 }
                 finally { if (e_5) throw e_5.error; }
             }
@@ -12582,15 +12635,15 @@
             return TheToolbarItemComponent;
         };
         TheToolbarComponent.prototype.getDropdownItem = function (item) {
-            var _a;
+            var _a, _b, _c;
             var dropdownKey = item === null || item === void 0 ? void 0 : item.dropdownItemKey;
             // modify the fontsize option externally
-            var contextService = this.editor.injector.get(TheContextService);
-            var fontSize = contextService.getDefaultFontSize();
-            if (item.key === exports.MarkTypes.fontSize && fontSize) {
+            var contextService = (_b = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.injector) === null || _b === void 0 ? void 0 : _b.get(TheContextService);
+            var fontSize = contextService === null || contextService === void 0 ? void 0 : contextService.getDefaultFontSize();
+            if (contextService && item.key === exports.MarkTypes.fontSize && fontSize) {
                 dropdownKey = fontSize;
             }
-            return (_a = item === null || item === void 0 ? void 0 : item.includes) === null || _a === void 0 ? void 0 : _a.find(function (item) { return item.key === dropdownKey; });
+            return (_c = item === null || item === void 0 ? void 0 : item.includes) === null || _c === void 0 ? void 0 : _c.find(function (item) { return item.key === dropdownKey; });
         };
         return TheToolbarComponent;
     }());
@@ -12761,6 +12814,7 @@
             this.renderer = renderer;
             this.elementRef = elementRef;
             this.cdr = cdr;
+            this.isVisible = false;
             this.isHide = true;
             this.defaultIconName = 'plus-circle-thin';
             this.iconNameFill = 'plus-circle-thin-fill';
@@ -12771,19 +12825,21 @@
             event.stopPropagation();
         };
         TheQuickInsertComponent.prototype.checkStatus = function () {
-            var _this = this;
+            var _a;
             var editor = this.editor;
-            if (isCleanEmptyParagraph(editor)) {
-                setTimeout(function () {
-                    var _a;
-                    var block = slate.Node.ancestor(editor, [(_a = editor === null || editor === void 0 ? void 0 : editor.selection) === null || _a === void 0 ? void 0 : _a.anchor.path[0]]);
-                    var rootNode = i1.AngularEditor.toDOMNode(editor, block);
-                    _this.updatePosition(rootNode.offsetLeft, rootNode.offsetTop);
-                });
+            if (this.isVisible && isCleanEmptyParagraph(editor) && !this.hasExcludeAttribute()) {
+                var block = slate.Node.ancestor(editor, [(_a = editor === null || editor === void 0 ? void 0 : editor.selection) === null || _a === void 0 ? void 0 : _a.anchor.path[0]]);
+                var rootNode = i1.AngularEditor.toDOMNode(editor, block);
+                this.updatePosition(rootNode.offsetLeft, rootNode.offsetTop);
                 return;
             }
             this.isHide = true;
         };
+        TheQuickInsertComponent.prototype.hasExcludeAttribute = function () {
+            var marks = getSelectionMarks(this.editor);
+            var fontSizeMark = marks[exports.MarkTypes.fontSize];
+            return fontSizeMark;
+        };
         TheQuickInsertComponent.prototype.updatePosition = function (left, top) {
             this.isHide = false;
             this.renderer.setStyle(this.elementRef.nativeElement, 'top', top + "px");
@@ -12805,7 +12861,7 @@
         return TheQuickInsertComponent;
     }());
     TheQuickInsertComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheQuickInsertComponent, deps: [{ token: i0__namespace.Renderer2 }, { token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheQuickInsertComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: { editor: "editor", quickToolbarItems: "quickToolbarItems" }, host: { listeners: { "mousedown": "handleMousedownNativeElement($event)" }, properties: { "class.hide": "isHide" }, classAttribute: "the-quick-insert" }, viewQueries: [{ propertyName: "iconElement", first: true, predicate: ["iconElement"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, template: "<thy-icon\n    #iconElement\n    [thyIconName]=\"displayIconName\"\n    class=\"quick-insert-icon text-desc font-size-xlg\"\n    (mouseenter)=\"mouseEnter($event)\"\n    (mouseleave)=\"mouseLeave($event)\"\n    (mousedown)=\"handleClick($event)\"\n></thy-icon>\n", components: [{ type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] });
+    TheQuickInsertComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: { editor: "editor", quickToolbarItems: "quickToolbarItems", isVisible: "isVisible" }, host: { listeners: { "mousedown": "handleMousedownNativeElement($event)" }, properties: { "class.hide": "isHide" }, classAttribute: "the-quick-insert" }, viewQueries: [{ propertyName: "iconElement", first: true, predicate: ["iconElement"], descendants: true, read: i0.ElementRef }], ngImport: i0__namespace, template: "<thy-icon\n    #iconElement\n    [thyIconName]=\"displayIconName\"\n    class=\"quick-insert-icon text-desc font-size-xlg\"\n    (mouseenter)=\"mouseEnter($event)\"\n    (mouseleave)=\"mouseLeave($event)\"\n    (mousedown)=\"handleClick($event)\"\n></thy-icon>\n", components: [{ type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheQuickInsertComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -12820,6 +12876,8 @@
                     type: i0.Input
                 }], quickToolbarItems: [{
                     type: i0.Input
+                }], isVisible: [{
+                    type: i0.Input
                 }], iconElement: [{
                     type: i0.ViewChild,
                     args: ['iconElement', { read: i0.ElementRef, static: false }]
@@ -12828,84 +12886,6 @@
                     args: ['mousedown', ['$event']]
                 }] } });
 
-    var ThePlaceholderComponent = /** @class */ (function () {
-        function ThePlaceholderComponent(renderer, elementRef, contextService) {
-            this.renderer = renderer;
-            this.elementRef = elementRef;
-            this.contextService = contextService;
-            this.isHide = true;
-        }
-        ThePlaceholderComponent.prototype.handleCompositionStart = function () {
-            var _a;
-            if ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.selection) {
-                this.hide();
-            }
-        };
-        ThePlaceholderComponent.prototype.handleCompositionEnd = function (event) {
-            if (!event.data) {
-                this.checkStatus();
-            }
-        };
-        ThePlaceholderComponent.prototype.checkStatus = function () {
-            var _this = this;
-            var _a, _b, _c;
-            var editor = this.editor;
-            var isEmptyShow = typeof ((_a = this.options) === null || _a === void 0 ? void 0 : _a.isEmptyShowPlaceholder) === 'undefined' ? true : this.options.isEmptyShowPlaceholder;
-            var isMustShow = (_b = this.options) === null || _b === void 0 ? void 0 : _b.isMustShowPlaceholder;
-            var isReadonly = (_c = this.options) === null || _c === void 0 ? void 0 : _c.readonly;
-            // empty content and no selection processing
-            if (!isReadonly && isEmptyShow && isEmptyContent(editor.children)) {
-                var firstElementChild = this.contextService.getFirstElementChild();
-                var offsetTop = firstElementChild.offsetTop;
-                var offsetLeft = firstElementChild.offsetLeft;
-                this.updatePosition(offsetLeft, offsetTop);
-                return;
-            }
-            if (isMustShow && isCleanEmptyParagraph(editor)) {
-                setTimeout(function () {
-                    var _a;
-                    var block = slate.Node.ancestor(editor, [(_a = editor === null || editor === void 0 ? void 0 : editor.selection) === null || _a === void 0 ? void 0 : _a.anchor.path[0]]);
-                    var rootNode = i1.AngularEditor.toDOMNode(editor, block);
-                    _this.updatePosition(rootNode.offsetLeft, rootNode.offsetTop);
-                });
-                return;
-            }
-            this.isHide = true;
-        };
-        ThePlaceholderComponent.prototype.updatePosition = function (left, top) {
-            this.isHide = false;
-            this.renderer.setStyle(this.elementRef.nativeElement, 'top', top + "px");
-            this.renderer.setStyle(this.elementRef.nativeElement, 'left', left + "px");
-        };
-        ThePlaceholderComponent.prototype.hide = function () {
-            this.isHide = true;
-        };
-        return ThePlaceholderComponent;
-    }());
-    ThePlaceholderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: ThePlaceholderComponent, deps: [{ token: i0__namespace.Renderer2 }, { token: i0__namespace.ElementRef }, { token: TheContextService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ThePlaceholderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: ThePlaceholderComponent, selector: "div[thePlaceholder]", inputs: { editor: "editor", options: "options" }, host: { listeners: { "document:compositionstart": "handleCompositionStart()", "document:compositionend": "handleCompositionEnd($event)" }, properties: { "class.hide": "isHide" }, classAttribute: "the-placeholder" }, ngImport: i0__namespace, template: "{{ options?.placeholder }}", isInline: true });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: ThePlaceholderComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'div[thePlaceholder]',
-                        template: "{{ options?.placeholder }}",
-                        host: {
-                            class: 'the-placeholder',
-                            '[class.hide]': 'isHide'
-                        }
-                    }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.Renderer2 }, { type: i0__namespace.ElementRef }, { type: TheContextService }]; }, propDecorators: { editor: [{
-                    type: i0.Input
-                }], options: [{
-                    type: i0.Input
-                }], handleCompositionStart: [{
-                    type: i0.HostListener,
-                    args: ['document:compositionstart']
-                }], handleCompositionEnd: [{
-                    type: i0.HostListener,
-                    args: ['document:compositionend', ['$event']]
-                }] } });
-
     var TheTemplateComponent = /** @class */ (function () {
         function TheTemplateComponent() {
             var _this = this;
@@ -12970,13 +12950,14 @@
 
     var TheEditorComponent = /** @class */ (function (_super) {
         __extends(TheEditorComponent, _super);
-        function TheEditorComponent(toolbarService, theContextService, viewContainerRef, elementRef, ngZone) {
+        function TheEditorComponent(toolbarService, theContextService, viewContainerRef, elementRef, ngZone, cdr) {
             var _this = _super.call(this) || this;
             _this.toolbarService = toolbarService;
             _this.theContextService = theContextService;
             _this.viewContainerRef = viewContainerRef;
             _this.elementRef = elementRef;
             _this.ngZone = ngZone;
+            _this.cdr = cdr;
             _this.thePlugins = [];
             _this.theOnSave = new i0.EventEmitter();
             _this.theOnDOMEvent = new i0.EventEmitter();
@@ -13141,9 +13122,7 @@
             });
             this.toolbarCalculate();
             setTimeout(function () {
-                var _a;
                 _this.theEditorCreated.emit(_this.editor);
-                (_a = _this.placeholderInstance) === null || _a === void 0 ? void 0 : _a.checkStatus();
                 _this.applyAutoFocus();
             });
         };
@@ -13185,6 +13164,7 @@
             var data = dataDeserialize((_a = this.theOptions) === null || _a === void 0 ? void 0 : _a.mode, value);
             // data-deserialize
             this.editorValue = data;
+            this.cdr.markForCheck();
         };
         TheEditorComponent.prototype.registerOnChange = function (fn) {
             this.onChangeCallback = fn;
@@ -13194,13 +13174,16 @@
         };
         TheEditorComponent.prototype.valueChange = function (value) {
             var _a, _b, _c, _d, _e, _f;
-            (_a = this.theGlobalToolbarInstance) === null || _a === void 0 ? void 0 : _a.statusChange(this.editor);
-            (_b = this.quickInsertInstance) === null || _b === void 0 ? void 0 : _b.checkStatus();
-            (_c = this.placeholderInstance) === null || _c === void 0 ? void 0 : _c.checkStatus();
+            var isEditable = !((_a = this.theOptions) === null || _a === void 0 ? void 0 : _a.readonly) && !((_b = this.theOptions) === null || _b === void 0 ? void 0 : _b.disabled);
+            (_c = this.theGlobalToolbarInstance) === null || _c === void 0 ? void 0 : _c.statusChange(this.editor);
+            // quick insert button
+            if (isEditable) {
+                (_d = this.quickInsertInstance) === null || _d === void 0 ? void 0 : _d.checkStatus();
+            }
             // auto scroll view
-            var scrollContainer = (_d = this.theOptions) === null || _d === void 0 ? void 0 : _d.scrollContainer;
-            var maxHeight = (_e = this.theOptions) === null || _e === void 0 ? void 0 : _e.maxHeight;
-            if (!((_f = this.theOptions) === null || _f === void 0 ? void 0 : _f.readonly) && (scrollContainer || maxHeight)) {
+            var scrollContainer = (_e = this.theOptions) === null || _e === void 0 ? void 0 : _e.scrollContainer;
+            var maxHeight = (_f = this.theOptions) === null || _f === void 0 ? void 0 : _f.maxHeight;
+            if (isEditable && (scrollContainer || maxHeight)) {
                 var container = maxHeight ? DEFAULT_SCROLL_CONTAINER : scrollContainer;
                 this.autoScrollView(this.editor, container);
             }
@@ -13320,7 +13303,7 @@
         };
         return TheEditorComponent;
     }(core.mixinUnsubscribe(core.MixinBase)));
-    TheEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheEditorComponent, deps: [{ token: TheToolbarService }, { token: TheContextService }, { token: i0__namespace.ViewContainerRef }, { token: i0__namespace.ElementRef }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheEditorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheEditorComponent, deps: [{ token: TheToolbarService }, { token: TheContextService }, { token: i0__namespace.ViewContainerRef }, { token: i0__namespace.ElementRef }, { token: i0__namespace.NgZone }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
     TheEditorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheEditorComponent, selector: "the-editor, theEditor", inputs: { theOptions: "theOptions", thePlugins: "thePlugins", theGlobalToolbar: "theGlobalToolbar", theDecorate: "theDecorate", theOnError: "theOnError" }, outputs: { theOnSave: "theOnSave", theOnDOMEvent: "theOnDOMEvent", theEditorCreated: "theEditorCreated" }, host: { properties: { "class.the-editor-readonly": "theOptions?.readonly" }, classAttribute: "the-editor" }, providers: [
             TheToolbarService,
             TheContextService,
@@ -13330,7 +13313,7 @@
                 useExisting: i0.forwardRef(function () { return TheEditorComponent; }),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "templateInstance", first: true, predicate: ["templateInstance"], descendants: true, static: true }, { propertyName: "globalToolbarInstance", first: true, predicate: ["globalToolbar"], descendants: true }, { propertyName: "quickInsertInstance", first: true, predicate: ["quickInsert"], descendants: true, static: true }, { propertyName: "placeholderInstance", first: true, predicate: ["placeholder"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<the-toolbar\n    *ngIf=\"!theOptions?.readonly && !theGlobalToolbar\"\n    [ngClass]=\"{\n        'the-toolbar-disabled': theOptions?.disabled\n    }\"\n    #globalToolbar\n    [editor]=\"editor\"\n    [toolbarItems]=\"toolbarEntity.global\"\n    [containerClass]=\"globalToolbarClass\"\n    [align]=\"theOptions?.toolbar?.align\"\n></the-toolbar>\n\n<div\n    class=\"the-editable-container\"\n    [ngClass]=\"{\n        'the-editor-disabled': theOptions?.disabled,\n        'max-height': maxHeight\n    }\"\n    [ngStyle]=\"{ 'max-height': maxHeight }\"\n>\n    <slate-editable\n        class=\"the-editor-typo\"\n        [editor]=\"editor\"\n        [ngModel]=\"editorValue\"\n        (ngModelChange)=\"valueChange($event)\"\n        [decorate]=\"decorate\"\n        [renderElement]=\"renderElement\"\n        [renderText]=\"renderText\"\n        [renderLeaf]=\"renderLeaf\"\n        [readonly]=\"theOptions?.readonly || theOptions?.disabled\"\n        [keydown]=\"onKeyDown\"\n        [click]=\"onClick\"\n        [paste]=\"onSlaPaste\"\n        [beforeInput]=\"onSlaBeforeInput\"\n        [blur]=\"onSlaBlur\"\n        [focus]=\"onSlaFocus\"\n        [copy]=\"onSlaCopy\"\n        [cut]=\"onSlaCut\"\n        [isStrictDecorate]=\"false\"\n        [compositionStart]=\"onSlaCompositionStart\"\n        [compositionEnd]=\"onSlaCompositionEnd\"\n        [dragStart]=\"onSlaDragStart\"\n        [dragOver]=\"onSlaDragOver\"\n        [drop]=\"onDrop\"\n        (mousedown)=\"mousedown($event)\"\n    ></slate-editable>\n    <the-inline-toolbar *ngIf=\"!theOptions?.readonly\" [editor]=\"editor\" [toolbarItems]=\"toolbarEntity.inline\"></the-inline-toolbar>\n    <div #quickInsert theQuickInsert [editor]=\"editor\" [quickToolbarItems]=\"quickToolbarItems\"></div>\n    <div #placeholder thePlaceholder [editor]=\"editor\" [options]=\"theOptions\"></div>\n    <the-template #templateInstance></the-template>\n</div>\n", components: [{ type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }, { type: i1__namespace.SlateEditableComponent, selector: "slate-editable", inputs: ["editor", "renderElement", "renderLeaf", "renderText", "decorate", "placeholderDecorate", "isStrictDecorate", "trackBy", "readonly", "placeholder", "beforeInput", "blur", "click", "compositionEnd", "compositionStart", "copy", "cut", "dragOver", "dragStart", "dragEnd", "drop", "focus", "keydown", "paste", "spellCheck", "autoCorrect", "autoCapitalize"] }, { type: TheInlineToolbarComponent, selector: "the-inline-toolbar", inputs: ["editor", "toolbarItems"] }, { type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: ["editor", "quickToolbarItems"] }, { type: ThePlaceholderComponent, selector: "div[thePlaceholder]", inputs: ["editor", "options"] }, { type: TheTemplateComponent, selector: "the-template,[theTemplate]" }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "templateInstance", first: true, predicate: ["templateInstance"], descendants: true, static: true }, { propertyName: "globalToolbarInstance", first: true, predicate: ["globalToolbar"], descendants: true }, { propertyName: "quickInsertInstance", first: true, predicate: ["quickInsert"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<the-toolbar\n    *ngIf=\"!theOptions?.readonly && !theGlobalToolbar\"\n    [ngClass]=\"{\n        'the-toolbar-disabled': theOptions?.disabled\n    }\"\n    #globalToolbar\n    [editor]=\"editor\"\n    [toolbarItems]=\"toolbarEntity.global\"\n    [containerClass]=\"globalToolbarClass\"\n    [align]=\"theOptions?.toolbar?.align\"\n></the-toolbar>\n\n<div\n    class=\"the-editable-container\"\n    [ngClass]=\"{\n        'the-editor-disabled': theOptions?.disabled,\n        'max-height': maxHeight\n    }\"\n    [ngStyle]=\"{ 'max-height': maxHeight }\"\n>\n    <slate-editable\n        class=\"the-editor-typo\"\n        [editor]=\"editor\"\n        [ngModel]=\"editorValue\"\n        (ngModelChange)=\"valueChange($event)\"\n        [decorate]=\"decorate\"\n        [placeholder]=\"theOptions?.placeholder\"\n        [placeholderDecorate]=\"theOptions?.placeholderDecorate ? theOptions?.placeholderDecorate : null\"\n        [renderElement]=\"renderElement\"\n        [renderText]=\"renderText\"\n        [renderLeaf]=\"renderLeaf\"\n        [readonly]=\"theOptions?.readonly || theOptions?.disabled\"\n        [keydown]=\"onKeyDown\"\n        [click]=\"onClick\"\n        [paste]=\"onSlaPaste\"\n        [beforeInput]=\"onSlaBeforeInput\"\n        [blur]=\"onSlaBlur\"\n        [focus]=\"onSlaFocus\"\n        [copy]=\"onSlaCopy\"\n        [cut]=\"onSlaCut\"\n        [isStrictDecorate]=\"false\"\n        [compositionStart]=\"onSlaCompositionStart\"\n        [compositionEnd]=\"onSlaCompositionEnd\"\n        [dragStart]=\"onSlaDragStart\"\n        [dragOver]=\"onSlaDragOver\"\n        [drop]=\"onDrop\"\n        (mousedown)=\"mousedown($event)\"\n    ></slate-editable>\n    <the-inline-toolbar *ngIf=\"!theOptions?.readonly\" [editor]=\"editor\" [toolbarItems]=\"toolbarEntity.inline\"></the-inline-toolbar>\n    <div\n        #quickInsert\n        theQuickInsert\n        [editor]=\"editor\"\n        [quickToolbarItems]=\"quickToolbarItems\"\n        [isVisible]=\"theOptions?.quickInsertVisible\"\n    ></div>\n    <the-template #templateInstance></the-template>\n</div>\n", components: [{ type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }, { type: i1__namespace.SlateEditableComponent, selector: "slate-editable", inputs: ["editor", "renderElement", "renderLeaf", "renderText", "decorate", "placeholderDecorate", "isStrictDecorate", "trackBy", "readonly", "placeholder", "beforeInput", "blur", "click", "compositionEnd", "compositionStart", "copy", "cut", "dragOver", "dragStart", "dragEnd", "drop", "focus", "keydown", "paste", "spellCheck", "autoCorrect", "autoCapitalize"] }, { type: TheInlineToolbarComponent, selector: "the-inline-toolbar", inputs: ["editor", "toolbarItems"] }, { type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: ["editor", "quickToolbarItems", "isVisible"] }, { type: TheTemplateComponent, selector: "the-template,[theTemplate]" }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheEditorComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -13352,7 +13335,7 @@
                             '[class.the-editor-readonly]': 'theOptions?.readonly'
                         }
                     }]
-            }], ctorParameters: function () { return [{ type: TheToolbarService }, { type: TheContextService }, { type: i0__namespace.ViewContainerRef }, { type: i0__namespace.ElementRef }, { type: i0__namespace.NgZone }]; }, propDecorators: { theOptions: [{
+            }], ctorParameters: function () { return [{ type: TheToolbarService }, { type: TheContextService }, { type: i0__namespace.ViewContainerRef }, { type: i0__namespace.ElementRef }, { type: i0__namespace.NgZone }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { theOptions: [{
                     type: i0.Input
                 }], thePlugins: [{
                     type: i0.Input
@@ -13377,9 +13360,6 @@
                 }], quickInsertInstance: [{
                     type: i0.ViewChild,
                     args: ['quickInsert', { static: true }]
-                }], placeholderInstance: [{
-                    type: i0.ViewChild,
-                    args: ['placeholder']
                 }] } });
 
     var ENTRY_COMMON_COMPONENTS = [TheColumnResizeOverlayHandleComponent];
@@ -13594,7 +13574,6 @@
         TheTableComponent,
         TheTableRowComponent,
         TheTdComponent,
-        ThePlaceholderComponent,
         TheInlineCodeComponent
     ];
     var PIPES = [ElementStylePipe, ElementClassPipe];
@@ -13638,7 +13617,6 @@
             TheTableComponent,
             TheTableRowComponent,
             TheTdComponent,
-            ThePlaceholderComponent,
             TheInlineCodeComponent], imports: [i6.CommonModule, i1.SlateModule, i4$2.FormsModule, i4$1.ThyIconModule,
             avatar.ThyAvatarModule,
             i3.ThyNavModule,
@@ -13764,6 +13742,7 @@
     exports.getToolbarClass = getToolbarClass;
     exports.htmlToTheia = htmlToTheia;
     exports.inValidTypes = inValidTypes;
+    exports.isCleanEmptyParagraph = isCleanEmptyParagraph;
     exports.plainToTheia = plainToTheia;
     exports.toolbarCompose = toolbarCompose;
     exports.withTheEditor = withTheEditor;