@worktile/theia 2.1.5 → 2.1.9

package/fesm2015/worktile-theia.js

@@ -210,7 +210,6 @@ var ToolbarItemMode;
 })(ToolbarItemMode || (ToolbarItemMode = {}));
 const DefaultGlobalToolbarDefinition = [
     ElementKinds.headingList,
-    MarkTypes.fontSize,
     ToolbarActionTypes.split,
     MarkTypes.bold,
     MarkTypes.italic,
@@ -225,7 +224,6 @@ const DefaultGlobalToolbarDefinition = [
     ToolbarActionTypes.split,
     ElementKinds.numberedList,
     ElementKinds.bulletedList,
-    // ElementKinds.checkItem,
     ToolbarActionTypes.split,
     ElementKinds.link,
     ElementKinds.image,
@@ -253,7 +251,6 @@ const DefaultQuickToolbarDefinition = [
     ToolbarActionTypes.split,
     ElementKinds.numberedList,
     ElementKinds.bulletedList,
-    // ElementKinds.checkItem,
     ToolbarActionTypes.split,
     ElementKinds.link,
     ElementKinds.image,
@@ -1539,9 +1536,6 @@ function handleContinualInsertBreak(editor, lowestBlock, type) {
     const aboveResult = Editor.above(editor, {
         match: n => Editor.isBlock(editor, n) && n.type === type
     });
-    if (isEnd) {
-        editor.marks = {};
-    }
     if (aboveResult && aboveResult[0] && isEnd && isEmpty) {
         const wrapBlock = aboveResult[0];
         if (wrapBlock.type === type) {
@@ -1785,8 +1779,12 @@ const InlineCodeEditor = {
     unwrapInlineCode(editor) {
         Transforms.unwrapNodes(editor, { match: n => Element$1.isElement(n) && n.type === ElementKinds.inlineCode });
     },
-    isInlineCodeActive(editor) {
-        const [inlineCode] = Editor.nodes(editor, { match: n => Element$1.isElement(n) && n.type === ElementKinds.inlineCode });
+    isInlineCodeActive(editor, path) {
+        var _a;
+        const [inlineCode] = Editor.nodes(editor, {
+            at: path ? path : (_a = editor.selection) === null || _a === void 0 ? void 0 : _a.anchor.path,
+            match: n => Element$1.isElement(n) && n.type === ElementKinds.inlineCode
+        });
         return !!inlineCode;
     }
 };
@@ -2050,6 +2048,35 @@ const getToolbarClass = (editor) => {
 const IS_MAC = typeof window != 'undefined' && /Mac|iPod|iPhone|iPad/.test(window.navigator.platform);
 const CONTROL_KEY = IS_MAC ? '⌘' : 'Ctrl';
 
+/**
+ * whether the current node is a clean paragraph
+ * @param editor
+ * @param text
+ * @returns boolean
+ */
+const isCleanEmptyParagraph = (editor) => {
+    const isCollapsedCursor = TheEditor.isFocused(editor) && editor.selection && Range.isCollapsed(editor.selection);
+    if (!isCollapsedCursor) {
+        return false;
+    }
+    const block = Node.ancestor(editor, [editor.selection.anchor.path[0]]);
+    const textIndent = 'textIndent';
+    const align = 'align';
+    const hasTextIndent = block[textIndent];
+    const hasAlign = block[align];
+    if (Node.string(block) === '' &&
+        Element$1.isElement(block) &&
+        block.type === ElementKinds.paragraph &&
+        block.children.length === 1 &&
+        Text.isText(block.children[0]) &&
+        !Editor.isVoid(editor, block) &&
+        !hasTextIndent &&
+        !hasAlign) {
+        return true;
+    }
+    return false;
+};
+
 const withDeserializeMd = (options) => (editor) => {
     const { insertData, onKeydown } = editor;
     editor.onKeydown = (event) => {
@@ -2533,7 +2560,7 @@ class TheImageComponent extends TheBaseElementComponent {
     }
 }
 TheImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheImageComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.DomSanitizer }, { token: THE_UPLOAD_SERVICE_TOKEN }, { token: i0.ChangeDetectorRef }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Component });
-TheImageComponent.ɵcmp = i0.ɵɵ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, 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.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i4.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thyTips", "thyValue", "thySize", "thyMax"] }, { type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+TheImageComponent.ɵcmp = i0.ɵɵ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, 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.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i4.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips"] }, { type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheImageComponent, decorators: [{
             type: Component,
             args: [{
@@ -3017,14 +3044,17 @@ const insertListItem = (editor) => {
         }
         else {
             /**
-             * If end, insert a list item after and select it
+             * If end, split nodes
              */
             Editor.withoutNormalizing(editor, () => {
-                Transforms.insertNodes(editor, {
-                    type: ElementKinds.listItem,
-                    children: [{ type: ElementKinds.paragraph, children: [{ text: '' }] }]
-                }, { at: nextListItemPath });
-                Transforms.select(editor, nextListItemPath);
+                Transforms.splitNodes(editor, {
+                    always: true,
+                    mode: 'highest',
+                    match: node => {
+                        const path = node && TheEditor.findPath(editor, node);
+                        return path && path.length === nextListItemPath.length;
+                    }
+                });
             });
         }
         /**
@@ -4542,8 +4572,17 @@ const withBlockCard = (editor) => {
     return editor;
 };
 
+const isInline = (editor, path) => {
+    var _a;
+    const [inlineNode] = Editor.nodes(editor, {
+        at: path ? path : (_a = editor.selection) === null || _a === void 0 ? void 0 : _a.anchor.path,
+        match: n => Element$1.isElement(n) && Editor.isInline(editor, n) && !Editor.isVoid(editor, n)
+    });
+    return !!inlineNode;
+};
+
 const withMoveSelection = (editor) => {
-    const { onClick, deleteBackward } = editor;
+    const { onClick, deleteBackward, onKeydown } = editor;
     editor.onClick = (event) => {
         const domSelection = window.getSelection();
         if (domSelection && !domSelection.isCollapsed && event.detail >= 2 && editor.selection) {
@@ -4574,6 +4613,50 @@ const withMoveSelection = (editor) => {
         }
         deleteBackward(unit);
     };
+    editor.onKeydown = (event) => {
+        const { selection } = editor;
+        if (!selection || !selection.anchor || !selection.focus) {
+            onKeydown(event);
+            return;
+        }
+        const isMoveBackward = hotkeys.isMoveBackward(event);
+        const isMoveForward = hotkeys.isMoveForward(event);
+        const isCollapsed$1 = selection && isCollapsed(selection);
+        const isInlineNode = isInline(editor);
+        if (isCollapsed$1 && isMoveForward) {
+            let isInlineCodeBefore = false;
+            if (!isInlineNode) {
+                try {
+                    const { path } = Editor.after(editor, selection);
+                    if (path) {
+                        isInlineCodeBefore = isInline(editor, path);
+                    }
+                }
+                catch (error) { }
+            }
+            if (isInlineNode || isInlineCodeBefore) {
+                event.preventDefault();
+                Transforms.move(editor, { unit: 'offset' });
+                return;
+            }
+        }
+        if (isCollapsed$1 && isMoveBackward) {
+            let isInlineCodeAfter = false;
+            if (!isInlineNode) {
+                try {
+                    const { path } = Editor.before(editor, selection);
+                    isInlineCodeAfter = isInline(editor, path);
+                }
+                catch (error) { }
+            }
+            if (isInlineNode || isInlineCodeAfter) {
+                event.preventDefault();
+                Transforms.move(editor, { unit: 'offset', reverse: true });
+                return;
+            }
+        }
+        onKeydown(event);
+    };
     return editor;
 };
 
@@ -5138,7 +5221,7 @@ function insertRow(opts, editor, count = 1, at // row index
 /**
  * Insert a new table
  */
-function insertTable(opts, editor, columns = 3, rows = 3, getCellContent) {
+function insertTable(opts, editor, rows = 3, columns = 3, getCellContent) {
     const { selection } = editor;
     if (!(selection === null || selection === void 0 ? void 0 : selection.anchor)) {
         return;
@@ -6916,7 +6999,7 @@ class TheLinkEditComponent {
     }
 }
 TheLinkEditComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheLinkEditComponent, deps: [{ token: i1$3.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-TheLinkEditComponent.ɵcmp = i0.ɵɵ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, 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$1.ThyFormGroupComponent, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { type: i2$1.ThyFormGroupFooterComponent, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { type: i1$5.ThyButtonComponent, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thySquare", "thyBlock"] }], directives: [{ type: i4$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$1.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { type: i5$3.ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutoSelect", "thyAutofocus"] }, { type: i4$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.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { type: i4$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$1.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }] });
+TheLinkEditComponent.ɵcmp = i0.ɵɵ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, 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$1.ThyFormGroupComponent, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { type: i2$1.ThyFormGroupFooterComponent, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { type: i1$5.ThyButtonComponent, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thySquare", "thyBlock"] }], directives: [{ type: i4$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$1.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { type: i5$3.ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutoSelect", "thyAutofocus"] }, { type: i4$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.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { type: i4$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$1.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheLinkEditComponent, decorators: [{
             type: Component,
             args: [{
@@ -7071,14 +7154,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                 args: ['click', ['$event']]
             }] } });
 class TheLinkComponent extends TheBaseLinkComponent {
+    constructor() {
+        super(...arguments);
+        // 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);
+    }
 }
 TheLinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheLinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TheLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheLinkComponent, selector: "span[theLink]", usesInheritance: true, ngImport: i0, template: `<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>`, isInline: true, components: [{ type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
+TheLinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheLinkComponent, selector: "span[theLink]", usesInheritance: true, ngImport: i0, template: ` <span contenteditable="false" style="font-size: 0;">{{ inlineChromiumBugfix }}</span>
+        <slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>
+        <span contenteditable="false" style="font-size: 0;">{{ inlineChromiumBugfix }}</span>`, isInline: true, components: [{ type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheLinkComponent, decorators: [{
             type: 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>
+        <slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>
+        <span contenteditable="false" style="font-size: 0;">{{ inlineChromiumBugfix }}</span>`
                 }]
         }] });
 class TheReadonlyLinkComponent extends TheBaseLinkComponent {
@@ -10790,35 +10883,6 @@ const PaintFormatOptions = [
     }
 ];
 
-/**
- * whether the current node is a clean paragraph
- * @param editor
- * @param text
- * @returns boolean
- */
-const isCleanEmptyParagraph = (editor) => {
-    const isCollapsedCursor = TheEditor.isFocused(editor) && editor.selection && Range.isCollapsed(editor.selection);
-    if (!isCollapsedCursor) {
-        return false;
-    }
-    const block = Node.ancestor(editor, [editor.selection.anchor.path[0]]);
-    const textIndent = 'textIndent';
-    const align = 'align';
-    const hasTextIndent = block[textIndent];
-    const hasAlign = block[align];
-    if (Node.string(block) === '' &&
-        Element$1.isElement(block) &&
-        block.type === ElementKinds.paragraph &&
-        block.children.length === 1 &&
-        Text.isText(block.children[0]) &&
-        !Editor.isVoid(editor, block) &&
-        !hasTextIndent &&
-        !hasAlign) {
-        return true;
-    }
-    return false;
-};
-
 class TheToolbarItemComponent extends TheToolbarBaseItemComponent {
     constructor(ngZone, cfr) {
         super();
@@ -11203,30 +11267,29 @@ const InlineCodeOptions = [
 ];
 
 class TheInlineCodeComponent extends TheBaseElementComponent {
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
-        this.elementRef = elementRef;
-        this.cdr = cdr;
-    }
-    ngOnInit() {
-        super.ngOnInit();
-    }
-    ngOnDestroy() {
-        super.ngOnDestroy();
+    constructor() {
+        super(...arguments);
+        // 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);
     }
 }
-TheInlineCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheInlineCodeComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TheInlineCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheInlineCodeComponent, selector: "span[theInlineCode]", usesInheritance: true, ngImport: i0, template: '<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>', isInline: true, components: [{ type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
+TheInlineCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheInlineCodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TheInlineCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheInlineCodeComponent, selector: "span[theInlineCode]", usesInheritance: true, ngImport: i0, template: ` <span contenteditable="false" style="font-size: 0;">{{ inlineChromiumBugfix }}</span>
+        <slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>
+        <span contenteditable="false" style="font-size: 0;">{{ inlineChromiumBugfix }}</span>`, isInline: true, components: [{ type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheInlineCodeComponent, decorators: [{
             type: 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>
+        <slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>
+        <span contenteditable="false" style="font-size: 0;">{{ inlineChromiumBugfix }}</span>`
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
+        }] });
 
 const withInlineCode = (editor) => {
-    const { isInline, renderElement, insertText } = editor;
+    const { isInline, renderElement, insertText, onKeydown } = editor;
     editor.isInline = (element) => {
         return element.type === ElementKinds.inlineCode ? true : isInline(element);
     };
@@ -11655,15 +11718,15 @@ class TheToolbarComponent {
         return TheToolbarItemComponent;
     }
     getDropdownItem(item) {
-        var _a;
+        var _a, _b, _c;
         let dropdownKey = item === null || item === void 0 ? void 0 : item.dropdownItemKey;
         // modify the fontsize option externally
-        const contextService = this.editor.injector.get(TheContextService);
-        const fontSize = contextService.getDefaultFontSize();
-        if (item.key === MarkTypes.fontSize && fontSize) {
+        const contextService = (_b = (_a = this.editor) === null || _a === void 0 ? void 0 : _a.injector) === null || _b === void 0 ? void 0 : _b.get(TheContextService);
+        const fontSize = contextService === null || contextService === void 0 ? void 0 : contextService.getDefaultFontSize();
+        if (contextService && item.key === MarkTypes.fontSize && fontSize) {
             dropdownKey = fontSize;
         }
-        return (_a = item === null || item === void 0 ? void 0 : item.includes) === null || _a === void 0 ? void 0 : _a.find((item) => item.key === dropdownKey);
+        return (_c = item === null || item === void 0 ? void 0 : item.includes) === null || _c === void 0 ? void 0 : _c.find((item) => item.key === dropdownKey);
     }
 }
 TheToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheToolbarComponent, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: TheToolbarGroupToken }], target: i0.ɵɵFactoryTarget.Component });
@@ -11830,6 +11893,7 @@ class TheQuickInsertComponent {
         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';
@@ -11840,18 +11904,21 @@ class TheQuickInsertComponent {
         event.stopPropagation();
     }
     checkStatus() {
+        var _a;
         const { editor } = this;
-        if (isCleanEmptyParagraph(editor)) {
-            setTimeout(() => {
-                var _a;
-                const block = Node.ancestor(editor, [(_a = editor === null || editor === void 0 ? void 0 : editor.selection) === null || _a === void 0 ? void 0 : _a.anchor.path[0]]);
-                const rootNode = AngularEditor.toDOMNode(editor, block);
-                this.updatePosition(rootNode.offsetLeft, rootNode.offsetTop);
-            });
+        if (this.isVisible && isCleanEmptyParagraph(editor) && !this.hasExcludeAttribute()) {
+            const block = Node.ancestor(editor, [(_a = editor === null || editor === void 0 ? void 0 : editor.selection) === null || _a === void 0 ? void 0 : _a.anchor.path[0]]);
+            const rootNode = AngularEditor.toDOMNode(editor, block);
+            this.updatePosition(rootNode.offsetLeft, rootNode.offsetTop);
             return;
         }
         this.isHide = true;
     }
+    hasExcludeAttribute() {
+        const marks = getSelectionMarks(this.editor);
+        const fontSizeMark = marks[MarkTypes.fontSize];
+        return fontSizeMark;
+    }
     updatePosition(left, top) {
         this.isHide = false;
         this.renderer.setStyle(this.elementRef.nativeElement, 'top', `${top}px`);
@@ -11872,7 +11939,7 @@ class TheQuickInsertComponent {
     }
 }
 TheQuickInsertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheQuickInsertComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TheQuickInsertComponent.ɵcmp = i0.ɵɵ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: ElementRef }], ngImport: i0, 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$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] });
+TheQuickInsertComponent.ɵcmp = i0.ɵɵ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: ElementRef }], ngImport: i0, 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$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheQuickInsertComponent, decorators: [{
             type: Component,
             args: [{
@@ -11887,6 +11954,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                 type: Input
             }], quickToolbarItems: [{
                 type: Input
+            }], isVisible: [{
+                type: Input
             }], iconElement: [{
                 type: ViewChild,
                 args: ['iconElement', { read: ElementRef, static: false }]
@@ -11895,82 +11964,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                 args: ['mousedown', ['$event']]
             }] } });
 
-class ThePlaceholderComponent {
-    constructor(renderer, elementRef, contextService) {
-        this.renderer = renderer;
-        this.elementRef = elementRef;
-        this.contextService = contextService;
-        this.isHide = true;
-    }
-    handleCompositionStart() {
-        var _a;
-        if ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.selection) {
-            this.hide();
-        }
-    }
-    handleCompositionEnd(event) {
-        if (!event.data) {
-            this.checkStatus();
-        }
-    }
-    checkStatus() {
-        var _a, _b, _c;
-        const { editor } = this;
-        const isEmptyShow = typeof ((_a = this.options) === null || _a === void 0 ? void 0 : _a.isEmptyShowPlaceholder) === 'undefined' ? true : this.options.isEmptyShowPlaceholder;
-        const isMustShow = (_b = this.options) === null || _b === void 0 ? void 0 : _b.isMustShowPlaceholder;
-        const isReadonly = (_c = this.options) === null || _c === void 0 ? void 0 : _c.readonly;
-        // empty content and no selection processing
-        if (!isReadonly && isEmptyShow && isEmptyContent(editor.children)) {
-            const firstElementChild = this.contextService.getFirstElementChild();
-            const offsetTop = firstElementChild.offsetTop;
-            const offsetLeft = firstElementChild.offsetLeft;
-            this.updatePosition(offsetLeft, offsetTop);
-            return;
-        }
-        if (isMustShow && isCleanEmptyParagraph(editor)) {
-            setTimeout(() => {
-                var _a;
-                const block = Node.ancestor(editor, [(_a = editor === null || editor === void 0 ? void 0 : editor.selection) === null || _a === void 0 ? void 0 : _a.anchor.path[0]]);
-                const rootNode = AngularEditor.toDOMNode(editor, block);
-                this.updatePosition(rootNode.offsetLeft, rootNode.offsetTop);
-            });
-            return;
-        }
-        this.isHide = true;
-    }
-    updatePosition(left, top) {
-        this.isHide = false;
-        this.renderer.setStyle(this.elementRef.nativeElement, 'top', `${top}px`);
-        this.renderer.setStyle(this.elementRef.nativeElement, 'left', `${left}px`);
-    }
-    hide() {
-        this.isHide = true;
-    }
-}
-ThePlaceholderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: ThePlaceholderComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Component });
-ThePlaceholderComponent.ɵcmp = i0.ɵɵ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, template: `{{ options?.placeholder }}`, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: ThePlaceholderComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'div[thePlaceholder]',
-                    template: `{{ options?.placeholder }}`,
-                    host: {
-                        class: 'the-placeholder',
-                        '[class.hide]': 'isHide'
-                    }
-                }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: TheContextService }]; }, propDecorators: { editor: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], handleCompositionStart: [{
-                type: HostListener,
-                args: ['document:compositionstart']
-            }], handleCompositionEnd: [{
-                type: HostListener,
-                args: ['document:compositionend', ['$event']]
-            }] } });
-
 class TheTemplateComponent {
     constructor() {
         this.renderElement = (element) => {
@@ -12032,13 +12025,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
             }] } });
 
 class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
-    constructor(toolbarService, theContextService, viewContainerRef, elementRef, ngZone) {
+    constructor(toolbarService, theContextService, viewContainerRef, elementRef, ngZone, cdr) {
         super();
         this.toolbarService = toolbarService;
         this.theContextService = theContextService;
         this.viewContainerRef = viewContainerRef;
         this.elementRef = elementRef;
         this.ngZone = ngZone;
+        this.cdr = cdr;
         this.thePlugins = [];
         this.theOnSave = new EventEmitter();
         this.theOnDOMEvent = new EventEmitter();
@@ -12189,9 +12183,7 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
         });
         this.toolbarCalculate();
         setTimeout(() => {
-            var _a;
             this.theEditorCreated.emit(this.editor);
-            (_a = this.placeholderInstance) === null || _a === void 0 ? void 0 : _a.checkStatus();
             this.applyAutoFocus();
         });
     }
@@ -12233,6 +12225,7 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
         const data = dataDeserialize((_a = this.theOptions) === null || _a === void 0 ? void 0 : _a.mode, value);
         // data-deserialize
         this.editorValue = data;
+        this.cdr.markForCheck();
     }
     registerOnChange(fn) {
         this.onChangeCallback = fn;
@@ -12242,13 +12235,16 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
     }
     valueChange(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();
+        const 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
-        const scrollContainer = (_d = this.theOptions) === null || _d === void 0 ? void 0 : _d.scrollContainer;
-        const 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)) {
+        const scrollContainer = (_e = this.theOptions) === null || _e === void 0 ? void 0 : _e.scrollContainer;
+        const maxHeight = (_f = this.theOptions) === null || _f === void 0 ? void 0 : _f.maxHeight;
+        if (isEditable && (scrollContainer || maxHeight)) {
             const container = maxHeight ? DEFAULT_SCROLL_CONTAINER : scrollContainer;
             this.autoScrollView(this.editor, container);
         }
@@ -12363,7 +12359,7 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
         };
     }
 }
-TheEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheEditorComponent, deps: [{ token: TheToolbarService }, { token: TheContextService }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+TheEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheEditorComponent, deps: [{ token: TheToolbarService }, { token: TheContextService }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 TheEditorComponent.ɵcmp = i0.ɵɵ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,
@@ -12373,7 +12369,7 @@ TheEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             useExisting: forwardRef(() => 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, 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.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.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, 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.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheEditorComponent, decorators: [{
             type: Component,
             args: [{
@@ -12395,7 +12391,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                         '[class.the-editor-readonly]': 'theOptions?.readonly'
                     }
                 }]
-        }], ctorParameters: function () { return [{ type: TheToolbarService }, { type: TheContextService }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { theOptions: [{
+        }], ctorParameters: function () { return [{ type: TheToolbarService }, { type: TheContextService }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { theOptions: [{
                 type: Input
             }], thePlugins: [{
                 type: Input
@@ -12420,9 +12416,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
             }], quickInsertInstance: [{
                 type: ViewChild,
                 args: ['quickInsert', { static: true }]
-            }], placeholderInstance: [{
-                type: ViewChild,
-                args: ['placeholder']
             }] } });
 
 const ENTRY_COMMON_COMPONENTS = [TheColumnResizeOverlayHandleComponent];
@@ -12620,7 +12613,6 @@ const PLUGIN_COMPONENTS = [
     TheTableComponent,
     TheTableRowComponent,
     TheTdComponent,
-    ThePlaceholderComponent,
     TheInlineCodeComponent
 ];
 const PIPES = [ElementStylePipe, ElementClassPipe];
@@ -12661,7 +12653,6 @@ TheEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         TheTableComponent,
         TheTableRowComponent,
         TheTdComponent,
-        ThePlaceholderComponent,
         TheInlineCodeComponent], imports: [CommonModule, SlateModule, FormsModule, ThyIconModule,
         ThyAvatarModule,
         ThyNavModule,
@@ -12711,5 +12702,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ALIGN_BLOCK_TYPES, A_TAG_REL_ATTR, AlignEditor, Alignment, BLOCK_DELETEBACKWARD_TYPES, BlockquoteEditor, CLIPBOARD_FORMAT_KEY, CODEMIRROR_PADDING_TOP, CODE_MODES, COMPONENTS, CONTAINER_BLOCKS, CONTROL_KEY, CodeEditor, CodeMode, ColorEditor, DEFAULT_LANGUAGE, DEFAULT_SCROLL_CONTAINER, DefaultElementOptions, DefaultGlobalToolbarDefinition, DefaultInlineToolbarDefinition, DefaultQuickToolbarDefinition, DropdownMode, ELEMENT_UNIQUE_ID, ElementKinds, ErrorCodes, FontSizeTypes, FontSizes, HEADING_TYPES, HeadingEditor, HrEditor, IS_MAC, ImageEditor, LINK_DEFAULT_TEXT, LIST_BLOCK_TYPES, LinkEditor, ListEditor, MarkEditor, MarkProps, MarkTypes, PICTURE_ACCEPTED_UPLOAD_MIME, PICTURE_ACCEPTED_UPLOAD_SIZE, PLUGIN_COMPONENTS, QUICK_TOOLBAR_HOTKEY, QuickInsertEditor, STANDARD_HEADING_TYPES, TAB_SPACE, THE_CODE_MODE_PROVIDER, THE_CODE_MODE_TOKEN, THE_EDITOR_CONVERSION_HINT_REF, THE_EDITOR_QUICK_TOOLBAR_REF, THE_EDITOR_UUID, THE_INLINE_TOOLBAR_TYPES, THE_UPLOAD_SERVICE_TOKEN, TableEditor, TheBaseElementComponent, TheCodeConfig, TheContextService, TheDataMode, TheDefaultElementComponent, TheEditor, TheEditorComponent, TheEditorModule, TheImageComponent, TheMode, index$1 as TheQueries, TheToolbarBaseItemComponent, TheToolbarComponent, TheToolbarDropdownComponent, TheToolbarGroupComponent, TheToolbarGroupToken, TheToolbarItemComponent, TheToolbarService, index as TheTransforms, TodoItemEditor, ToolbarActionTypes, ToolbarAlignment, ToolbarItemMode, ToolbarItemType, ToolbarMoreGroup, VOID_BLOCK_TYPES, VerticalAlignEditor, VerticalAlignment, ZERO_WIDTH_CHAR, createEmptyParagraph, dataDeserialize, dataSerializing, getToolbarClass, htmlToTheia, inValidTypes, plainToTheia, toolbarCompose, withTheEditor };
+export { ALIGN_BLOCK_TYPES, A_TAG_REL_ATTR, AlignEditor, Alignment, BLOCK_DELETEBACKWARD_TYPES, BlockquoteEditor, CLIPBOARD_FORMAT_KEY, CODEMIRROR_PADDING_TOP, CODE_MODES, COMPONENTS, CONTAINER_BLOCKS, CONTROL_KEY, CodeEditor, CodeMode, ColorEditor, DEFAULT_LANGUAGE, DEFAULT_SCROLL_CONTAINER, DefaultElementOptions, DefaultGlobalToolbarDefinition, DefaultInlineToolbarDefinition, DefaultQuickToolbarDefinition, DropdownMode, ELEMENT_UNIQUE_ID, ElementKinds, ErrorCodes, FontSizeTypes, FontSizes, HEADING_TYPES, HeadingEditor, HrEditor, IS_MAC, ImageEditor, LINK_DEFAULT_TEXT, LIST_BLOCK_TYPES, LinkEditor, ListEditor, MarkEditor, MarkProps, MarkTypes, PICTURE_ACCEPTED_UPLOAD_MIME, PICTURE_ACCEPTED_UPLOAD_SIZE, PLUGIN_COMPONENTS, QUICK_TOOLBAR_HOTKEY, QuickInsertEditor, STANDARD_HEADING_TYPES, TAB_SPACE, THE_CODE_MODE_PROVIDER, THE_CODE_MODE_TOKEN, THE_EDITOR_CONVERSION_HINT_REF, THE_EDITOR_QUICK_TOOLBAR_REF, THE_EDITOR_UUID, THE_INLINE_TOOLBAR_TYPES, THE_UPLOAD_SERVICE_TOKEN, TableEditor, TheBaseElementComponent, TheCodeConfig, TheContextService, TheDataMode, TheDefaultElementComponent, TheEditor, TheEditorComponent, TheEditorModule, TheImageComponent, TheMode, index$1 as TheQueries, TheToolbarBaseItemComponent, TheToolbarComponent, TheToolbarDropdownComponent, TheToolbarGroupComponent, TheToolbarGroupToken, TheToolbarItemComponent, TheToolbarService, index as TheTransforms, TodoItemEditor, ToolbarActionTypes, ToolbarAlignment, ToolbarItemMode, ToolbarItemType, ToolbarMoreGroup, VOID_BLOCK_TYPES, VerticalAlignEditor, VerticalAlignment, ZERO_WIDTH_CHAR, createEmptyParagraph, dataDeserialize, dataSerializing, getToolbarClass, htmlToTheia, inValidTypes, isCleanEmptyParagraph, plainToTheia, toolbarCompose, withTheEditor };
 //# sourceMappingURL=worktile-theia.js.map