@worktile/theia 1.2.15 → 2.0.0

package/esm2015/queries/is-empty-paragraph.js

@@ -2,7 +2,11 @@ import { Editor } from 'slate';
 import { ElementKinds } from '../constants/node-types';
 import { getAnchorBlockEntry } from './get-anchor-block-entry';
 export const isEmptyParagraph = (editor, at) => {
-    const [block] = getAnchorBlockEntry(editor, at);
+    const entry = getAnchorBlockEntry(editor, at);
+    if (!entry) {
+        return false;
+    }
+    const [block] = entry;
     return Editor.isEmpty(editor, block) && block.type === ElementKinds.paragraph;
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaXMtZW1wdHktcGFyYWdyYXBoLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcGFja2FnZXMvc3JjL3F1ZXJpZXMvaXMtZW1wdHktcGFyYWdyYXBoLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxNQUFNLEVBQWUsTUFBTSxPQUFPLENBQUM7QUFDNUMsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBRS9ELE1BQU0sQ0FBQyxNQUFNLGdCQUFnQixHQUFHLENBQUMsTUFBYyxFQUFFLEVBQWlCLEVBQUUsRUFBRTtJQUNsRSxNQUFNLENBQUMsS0FBSyxDQUFDLEdBQUcsbUJBQW1CLENBQUMsTUFBTSxFQUFFLEVBQUUsQ0FBQyxDQUFDO0lBQ2hELE9BQU8sTUFBTSxDQUFDLE9BQU8sQ0FBQyxNQUFNLEVBQUUsS0FBSyxDQUFDLElBQUksS0FBSyxDQUFDLElBQUksS0FBSyxZQUFZLENBQUMsU0FBUyxDQUFDO0FBQ2xGLENBQUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEVkaXRvciwgUGF0aCwgUG9pbnQgfSBmcm9tICdzbGF0ZSc7XG5pbXBvcnQgeyBFbGVtZW50S2luZHMgfSBmcm9tICcuLi9jb25zdGFudHMvbm9kZS10eXBlcyc7XG5pbXBvcnQgeyBnZXRBbmNob3JCbG9ja0VudHJ5IH0gZnJvbSAnLi9nZXQtYW5jaG9yLWJsb2NrLWVudHJ5JztcblxuZXhwb3J0IGNvbnN0IGlzRW1wdHlQYXJhZ3JhcGggPSAoZWRpdG9yOiBFZGl0b3IsIGF0PzogUGF0aCB8IFBvaW50KSA9PiB7XG4gICAgY29uc3QgW2Jsb2NrXSA9IGdldEFuY2hvckJsb2NrRW50cnkoZWRpdG9yLCBhdCk7XG4gICAgcmV0dXJuIEVkaXRvci5pc0VtcHR5KGVkaXRvciwgYmxvY2spICYmIGJsb2NrLnR5cGUgPT09IEVsZW1lbnRLaW5kcy5wYXJhZ3JhcGg7XG59O1xuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaXMtZW1wdHktcGFyYWdyYXBoLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcGFja2FnZXMvc3JjL3F1ZXJpZXMvaXMtZW1wdHktcGFyYWdyYXBoLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxNQUFNLEVBQWUsTUFBTSxPQUFPLENBQUM7QUFDNUMsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBRS9ELE1BQU0sQ0FBQyxNQUFNLGdCQUFnQixHQUFHLENBQUMsTUFBYyxFQUFFLEVBQWlCLEVBQUUsRUFBRTtJQUNsRSxNQUFNLEtBQUssR0FBRyxtQkFBbUIsQ0FBQyxNQUFNLEVBQUUsRUFBRSxDQUFDLENBQUM7SUFDOUMsSUFBSSxDQUFDLEtBQUssRUFBRTtRQUNSLE9BQU8sS0FBSyxDQUFDO0tBQ2hCO0lBQ0QsTUFBTSxDQUFDLEtBQUssQ0FBQyxHQUFHLEtBQUssQ0FBQztJQUN0QixPQUFPLE1BQU0sQ0FBQyxPQUFPLENBQUMsTUFBTSxFQUFFLEtBQUssQ0FBQyxJQUFJLEtBQUssQ0FBQyxJQUFJLEtBQUssWUFBWSxDQUFDLFNBQVMsQ0FBQztBQUNsRixDQUFDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBFZGl0b3IsIFBhdGgsIFBvaW50IH0gZnJvbSAnc2xhdGUnO1xuaW1wb3J0IHsgRWxlbWVudEtpbmRzIH0gZnJvbSAnLi4vY29uc3RhbnRzL25vZGUtdHlwZXMnO1xuaW1wb3J0IHsgZ2V0QW5jaG9yQmxvY2tFbnRyeSB9IGZyb20gJy4vZ2V0LWFuY2hvci1ibG9jay1lbnRyeSc7XG5cbmV4cG9ydCBjb25zdCBpc0VtcHR5UGFyYWdyYXBoID0gKGVkaXRvcjogRWRpdG9yLCBhdD86IFBhdGggfCBQb2ludCkgPT4ge1xuICAgIGNvbnN0IGVudHJ5ID0gZ2V0QW5jaG9yQmxvY2tFbnRyeShlZGl0b3IsIGF0KTtcbiAgICBpZiAoIWVudHJ5KSB7XG4gICAgICAgIHJldHVybiBmYWxzZTtcbiAgICB9XG4gICAgY29uc3QgW2Jsb2NrXSA9IGVudHJ5O1xuICAgIHJldHVybiBFZGl0b3IuaXNFbXB0eShlZGl0b3IsIGJsb2NrKSAmJiBibG9jay50eXBlID09PSBFbGVtZW50S2luZHMucGFyYWdyYXBoO1xufTtcbiJdfQ==

package/fesm2015/worktile-theia.js

@@ -8,7 +8,7 @@ import * as i1 from 'slate-angular';
 import { BaseTextComponent, BaseElementComponent, AngularEditor, NODE_TO_PARENT, NODE_TO_INDEX, IS_SAFARI, hotkeys, getPlainText as getPlainText$1, hasBlockCard, isCardLeft, FAKE_RIGHT_BLOCK_CARD_OFFSET, ELEMENT_TO_COMPONENT, EDITOR_TO_ELEMENT, isComponentType, withAngular, SlateModule } from 'slate-angular';
 import { mixinUnsubscribe, MixinBase } from 'ngx-tethys/core';
 import isHotkey from 'is-hotkey';
-import { Element as Element$1, Editor, Range, Node, Span, Path, Text, Point, Transforms, createEditor } from 'slate';
+import { Element as Element$1, Editor, Range, Node, Span, Path, Text, Point, Transforms, Operation, createEditor } from 'slate';
 import { HistoryEditor, withHistory } from 'slate-history';
 import { __rest, __awaiter } from 'tslib';
 import * as _lodash from 'lodash';
@@ -499,7 +499,11 @@ const getAnchorBlockEntry = (editor, at) => {
 };
 
 const isEmptyParagraph = (editor, at) => {
-    const [block] = getAnchorBlockEntry(editor, at);
+    const entry = getAnchorBlockEntry(editor, at);
+    if (!entry) {
+        return false;
+    }
+    const [block] = entry;
     return Editor.isEmpty(editor, block) && block.type === ElementKinds.paragraph;
 };
 
@@ -1144,7 +1148,7 @@ const isEmptyContent = (children) => {
     }
     if (children && children.length === 1) {
         const firstNode = children[0];
-        if (firstNode.type === ElementKinds.default && !Node.string(firstNode)) {
+        if (firstNode.type === ElementKinds.default && firstNode.children.length === 1 && !Node.string(firstNode)) {
             return true;
         }
     }
@@ -4204,20 +4208,66 @@ const withBlockCard = (editor) => {
         // block card cursor
         if (anchorNode && hasBlockCard(domSelection)) {
             const isCardLeftCursor = isCardLeft(anchorNode);
-            // ↓ + left-block-card 或者 → + right-block-card
-            if ((isMoveDown && isCardLeftCursor) || (isMoveForward && !isCardLeftCursor)) {
+            if (isMoveUp) {
+                const [, path] = AngularEditor.toSlateCardEntry(editor, anchorNode);
+                const previousPath = Path.hasPrevious(path) && Path.previous(path);
+                const previousNode = previousPath && getNode(editor, previousPath);
+                if (previousNode && editor.isBlockCard(previousNode)) {
+                    AngularEditor.moveBlockCard(editor, previousNode, { direction: isCardLeftCursor ? 'left' : 'right' });
+                }
+                else {
+                    const before = Editor.before(editor, path);
+                    if (before) {
+                        Transforms.select(editor, before);
+                    }
+                }
+                nativeEvent.preventDefault();
+                return;
+            }
+            if (isMoveDown) {
+                const [, path] = AngularEditor.toSlateCardEntry(editor, anchorNode);
+                const nextPath = Path.next(path);
+                const nextNode = getNode(editor, nextPath);
+                if (nextNode && editor.isBlockCard(nextNode)) {
+                    AngularEditor.moveBlockCard(editor, nextNode, { direction: isCardLeftCursor ? 'left' : 'right' });
+                }
+                else {
+                    const after = Editor.after(editor, path);
+                    if (after) {
+                        Transforms.select(editor, Editor.after(editor, path));
+                    }
+                }
+                nativeEvent.preventDefault();
+                return;
+            }
+            // → + right-block-card
+            if ((isMoveForward && !isCardLeftCursor)) {
                 nativeEvent.preventDefault();
                 const [, path] = AngularEditor.toSlateCardEntry(editor, anchorNode);
+                const nextPath = Path.next(path);
+                const nextNode = getNode(editor, nextPath);
+                if (nextNode && editor.isBlockCard(nextNode)) {
+                    event.preventDefault();
+                    AngularEditor.moveBlockCard(editor, nextNode, { direction: 'left' });
+                    return;
+                }
                 const after = Editor.after(editor, path);
                 if (after) {
                     Transforms.select(editor, Editor.after(editor, path));
                 }
                 return;
             }
-            // ↑ + right-block-card 或者 ← + left-block-card
-            if ((isMoveUp && !isCardLeftCursor) || (isMoveBackward && isCardLeftCursor)) {
+            // ← + left-block-card
+            if (isMoveBackward && isCardLeftCursor) {
                 nativeEvent.preventDefault();
                 const [, path] = AngularEditor.toSlateCardEntry(editor, anchorNode);
+                const previousPath = Path.hasPrevious(path) && Path.previous(path);
+                const previousNode = previousPath && getNode(editor, previousPath);
+                if (previousNode && editor.isBlockCard(previousNode)) {
+                    event.preventDefault();
+                    AngularEditor.moveBlockCard(editor, previousNode, { direction: 'right' });
+                    return;
+                }
                 const before = Editor.before(editor, path);
                 if (before) {
                     Transforms.select(editor, before);
@@ -4599,11 +4649,14 @@ class TablePosition {
                 columnIndex++;
                 nextCell = this.table.children[rowIndex].children[columnIndex];
             }
-            else {
+            else if (rowIndex + 1 < this.getHeight()) {
                 columnIndex = 0;
                 rowIndex++;
                 nextCell = this.table.children[rowIndex].children[columnIndex];
             }
+            else {
+                nextCell = null;
+            }
         }
         return nextCell;
     }
@@ -4754,7 +4807,7 @@ function calcSpanForColumn(table, targetIndex) {
         return rowspans.some(rowspan => isInside(rowspan, rowIndx, targetIndex));
     });
 }
-function calcOriginSpan(table, targetRowIndex, targetColumnIndex) {
+function getOriginCell(table, targetRowIndex, targetColumnIndex) {
     for (let rowIndex = 0; rowIndex <= targetRowIndex; rowIndex++) {
         const row = table.children[rowIndex];
         const originCell = row.children
@@ -5252,6 +5305,13 @@ const TableEditor = {
     isActiveHeader(editor) {
         const [tableRowEntry] = Editor.nodes(editor, { match: (n) => n.type === ElementKinds.tableRow });
         return tableRowEntry && tableRowEntry[0] && tableRowEntry[0].header;
+    },
+    selectOriginCell(editor, table, rowIndex, columnIndex, isStart) {
+        const origin = getOriginCell(table, rowIndex, columnIndex);
+        if (origin) {
+            const path = AngularEditor.findPath(editor, origin);
+            Transforms.select(editor, isStart ? Editor.start(editor, path) : Editor.end(editor, path));
+        }
     }
 };
 
@@ -6286,6 +6346,9 @@ class TheCodeComponent extends TheBaseElementComponent {
             if (this.options.mode !== this.element.language) {
                 this.useMode();
             }
+            if (!this.readonly && this.isCollapsed) {
+                this.initializeCodemirrorFocus();
+            }
         }
     }
     ngOnInit() {
@@ -9803,7 +9866,7 @@ const normalizeTable = (table) => {
             }
             // case 2
             if (cell.hidden && !normalizedNodes.includes(cell)) {
-                const origin = calcOriginSpan(table, rowIndex, columnIndex);
+                const origin = getOriginCell(table, rowIndex, columnIndex);
                 if (!origin) {
                     delete table.children[rowIndex].children[columnIndex].hidden;
                 }
@@ -9814,7 +9877,7 @@ const normalizeTable = (table) => {
 };
 
 const withTable = (editor) => {
-    const { deleteBackward, deleteForward, onKeydown, setFragmentData, insertData, normalizeNode, isBlockCard, renderElement, deleteCutData, isContainer } = editor;
+    const { deleteBackward, deleteForward, onKeydown, setFragmentData, insertData, normalizeNode, isBlockCard, renderElement, deleteCutData, isContainer, onChange } = editor;
     editor.deleteBackward = unit => {
         const opts = new TableOptions$1();
         if (!isSelectionInTable(opts, editor)) {
@@ -9885,13 +9948,11 @@ const withTable = (editor) => {
                     const aboveCell = aboveRow && aboveRow.children[startPosition.getColumnIndex()];
                     if (aboveCell) {
                         if (aboveCell.hidden) {
-                            const originSpan = calcOriginSpan(endPosition.table, startPosition.getRowIndex() - 1, startPosition.getColumnIndex());
-                            if (originSpan) {
-                                at = Editor.start(editor, TheEditor.findPath(editor, originSpan));
-                            }
+                            TableEditor.selectOriginCell(editor, startPosition.table, startPosition.getRowIndex() - 1, startPosition.getColumnIndex(), false);
+                            return;
                         }
                         else {
-                            at = Editor.start(editor, TheEditor.findPath(editor, aboveCell));
+                            at = Editor.end(editor, TheEditor.findPath(editor, aboveCell));
                         }
                     }
                     else {
@@ -9920,10 +9981,8 @@ const withTable = (editor) => {
                     const belowCell = belowRow && belowRow.children[startPosition.getColumnIndex()];
                     if (belowCell) {
                         if (belowCell.hidden) {
-                            const originSpan = calcOriginSpan(endPosition.table, belowRowIndex, startPosition.getColumnIndex());
-                            if (originSpan) {
-                                at = Editor.start(editor, TheEditor.findPath(editor, originSpan));
-                            }
+                            TableEditor.selectOriginCell(editor, startPosition.table, startPosition.getRowIndex() + 1, startPosition.getColumnIndex(), true);
+                            return;
                         }
                         else {
                             at = Editor.start(editor, TheEditor.findPath(editor, belowCell));
@@ -9942,18 +10001,27 @@ const withTable = (editor) => {
                 const beforePoint = Editor.before(editor, editor.selection);
                 const beforePosition = beforePoint && TablePosition.create(opts, editor, beforePoint.path);
                 if (beforePosition && beforePosition.cell && beforePosition.cell.hidden) {
+                    event.preventDefault();
                     const at = Editor.end(editor, TheEditor.findPath(editor, beforePosition.findPrevious()));
                     Transforms.select(editor, at);
-                    event.preventDefault();
                 }
             }
             if (isMoveForward) {
                 const afterPoint = Editor.after(editor, editor.selection);
                 const afterPosition = afterPoint && TablePosition.create(opts, editor, afterPoint.path);
                 if (afterPosition.cell && afterPosition.cell.hidden) {
-                    const at = Editor.start(editor, TheEditor.findPath(editor, afterPosition.findNext()));
-                    Transforms.select(editor, at);
                     event.preventDefault();
+                    const nextCell = afterPosition.findNext();
+                    if (nextCell) {
+                        const at = Editor.start(editor, TheEditor.findPath(editor, afterPosition.findNext()));
+                        Transforms.select(editor, at);
+                        event.preventDefault();
+                    }
+                    else {
+                        AngularEditor.moveBlockCard(editor, startPosition.tableEntry[0], { direction: 'right' });
+                        event.preventDefault();
+                    }
+                    return;
                 }
             }
             // Prevent deleting cells in the table
@@ -10023,12 +10091,12 @@ const withTable = (editor) => {
         }
         if (tableFragment) {
             tableFragment = normalizeTable(_.cloneDeep(tableFragment));
+            const plainText = Node.string(tableFragment);
             tableFragment = [tableFragment];
             const stringObj = JSON.stringify(tableFragment);
             const encoded = window.btoa(encodeURIComponent(stringObj));
             unit.setData(`application/${CLIPBOARD_FORMAT_KEY}`, encoded);
-            // unit.setData('text/html', div.innerHTML);
-            unit.setData('text/plain', Node.string(tableFragment));
+            unit.setData('text/plain', plainText);
             return;
         }
         setFragmentData(unit);
@@ -10053,7 +10121,7 @@ const withTable = (editor) => {
                     for (let j = selectColIndex; j <= lastColIndex; j++) {
                         const row = tablePosition.table.children[i];
                         if (row && row.children[j]) {
-                            const originCell = calcOriginSpan(tablePosition.table, i, j);
+                            const originCell = getOriginCell(tablePosition.table, i, j);
                             if (originCell && (originCell.colspan || originCell.rowspan)) {
                                 const path = TheEditor.findPath(editor, originCell).slice(-2);
                                 resetTableCell(editor, tablePosition.table, originCell, path[0], path[1]);
@@ -10111,6 +10179,21 @@ const withTable = (editor) => {
                 Transforms.setNodes(editor, { columns }, { at: entry[1] });
             }
         }
+        // adjust selection when selection is in hidden cell
+        if (Element$1.isElement(entry[0]) && entry[0].type === ElementKinds.tableCell && entry[0].hidden) {
+            if (editor.selection && Range.isCollapsed(editor.selection) && Path.isAncestor(entry[1], editor.selection.anchor.path)) {
+                setTimeout(() => {
+                    const opts = new TableOptions$1();
+                    const tablePosition = TablePosition.create(opts, editor, editor.selection.anchor.path);
+                    const origin = getOriginCell(tablePosition.table, tablePosition.getRowIndex(), tablePosition.getColumnIndex());
+                    if (origin) {
+                        const path = AngularEditor.findPath(editor, origin);
+                        Transforms.select(editor, Editor.end(editor, path));
+                    }
+                }, 0);
+                return;
+            }
+        }
         normalizeNode(entry);
     };
     editor.isBlockCard = (element) => {
@@ -10158,6 +10241,20 @@ const withTable = (editor) => {
     editor.isContainer = (element) => {
         return element.type === ElementKinds.tableCell ? true : isContainer(element);
     };
+    editor.onChange = () => {
+        onChange();
+        // adujst selection when selection is in hidden cell
+        // just hook set_selection
+        const isCollapsed = editor.selection && Range.isCollapsed(editor.selection);
+        const isSelectionOperation = editor.operations.every(op => Operation.isSelectionOperation(op));
+        if (isCollapsed && isSelectionOperation) {
+            const opts = new TableOptions$1();
+            const tablePosition = TablePosition.create(opts, editor, editor.selection.anchor.path);
+            if (tablePosition.isInTable() && tablePosition.cell.hidden) {
+                TableEditor.selectOriginCell(editor, tablePosition.table, tablePosition.getRowIndex(), tablePosition.getColumnIndex(), false);
+            }
+        }
+    };
     return editor;
 };
 
@@ -11377,12 +11474,13 @@ class ThePlaceholderComponent {
         }
     }
     checkStatus() {
-        var _a, _b;
+        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 (isEmptyShow && isEmptyContent(editor.children)) {
+        if (!isReadonly && isEmptyShow && isEmptyContent(editor.children)) {
             const firstElementChild = this.contextService.getFirstElementChild();
             const offsetTop = firstElementChild.offsetTop;
             const offsetLeft = firstElementChild.offsetLeft;
@@ -11831,7 +11929,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", "isStrictDecorate", "trackBy", "readonly", "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"] }] });
+    ], 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheEditorComponent, decorators: [{
             type: Component,
             args: [{