@worktile/theia 1.2.12 → 1.2.16

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';
@@ -64,7 +64,6 @@ const TAB_SPACE = '    ';
 const ZERO_WIDTH_CHAR = '\u200B';
 const CLIPBOARD_FORMAT_KEY = 'x-theia-fragment';
 const DEFAULT_SCROLL_CONTAINER = '.the-editable-container';
-const BLOCK_INSERT_ORIGIN = 'block-insert';
 const ELEMENT_UNIQUE_ID = 'key';
 var TheMode;
 (function (TheMode) {
@@ -500,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;
 };
 
@@ -1040,7 +1043,10 @@ const extractFragment = (data, deleteKey = ELEMENT_UNIQUE_ID) => {
     const fragment = data.getData(`application/${CLIPBOARD_FORMAT_KEY}`);
     if (fragment) {
         const decoded = decodeURIComponent(window.atob(fragment));
-        const nodes = JSON.parse(decoded);
+        let nodes = JSON.parse(decoded);
+        if (!Array.isArray(nodes)) {
+            nodes = [nodes];
+        }
         // delete key to avoid duplicate keys
         if (deleteKey) {
             deleteElementKey(nodes, deleteKey);
@@ -1954,6 +1960,9 @@ const getToolbarClass = (editor) => {
     return `the-toolbar-${uuid}`;
 };
 
+const IS_MAC = typeof window != 'undefined' && /Mac|iPod|iPhone|iPad/.test(window.navigator.platform);
+const CONTROL_KEY = IS_MAC ? '⌘' : 'Ctrl';
+
 const withDeserializeMd = (options) => (editor) => {
     const { insertData, onKeydown } = editor;
     editor.onKeydown = (event) => {
@@ -1994,8 +2003,13 @@ const withDeserializeMd = (options) => (editor) => {
                                     });
                                     return;
                                 }
+                                else {
+                                    closeConversionHint(editor);
+                                }
+                            }
+                            catch (error) {
+                                closeConversionHint(editor);
                             }
-                            catch (error) { }
                         }
                     },
                     origin,
@@ -2230,10 +2244,18 @@ class TheContextService {
     }
     getOptions() {
         if (!this.options.width) {
-            this.options.width = this.options.nativeElement.querySelector('.slate-editable-container').firstElementChild.offsetWidth;
+            const firstElementChild = this.getFirstElementChild();
+            this.options.width = firstElementChild.offsetWidth;
         }
         return this.options;
     }
+    getEditableElement() {
+        return this.options.nativeElement.querySelector('.the-editor-typo');
+    }
+    getFirstElementChild() {
+        const editableElement = this.getEditableElement();
+        return editableElement === null || editableElement === void 0 ? void 0 : editableElement.firstElementChild;
+    }
     setUploadFileList(file) {
         this.fileList.push(file);
     }
@@ -4186,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);
@@ -4581,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;
     }
@@ -4736,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
@@ -5234,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));
+        }
     }
 };
 
@@ -5269,6 +5347,7 @@ const MarkOptions = [
         key: MarkTypes.bold,
         icon: 'bold',
         name: '加粗',
+        shortcutKey: `${CONTROL_KEY}+B`,
         execute: editor => MarkEditor.toggleMark(editor, MarkTypes.bold),
         active: editor => MarkEditor.isMarkActive(editor, MarkTypes.bold)
     },
@@ -5276,6 +5355,7 @@ const MarkOptions = [
         key: MarkTypes.italic,
         icon: 'italic',
         name: '斜体',
+        shortcutKey: `${CONTROL_KEY}+I`,
         execute: editor => MarkEditor.toggleMark(editor, MarkTypes.italic),
         active: editor => MarkEditor.isMarkActive(editor, MarkTypes.italic)
     },
@@ -5290,6 +5370,7 @@ const MarkOptions = [
         key: MarkTypes.underline,
         icon: 'underline',
         name: '下划线',
+        shortcutKey: `${CONTROL_KEY}+U`,
         execute: editor => MarkEditor.toggleMark(editor, MarkTypes.underline),
         active: editor => MarkEditor.isMarkActive(editor, MarkTypes.underline)
     },
@@ -5297,6 +5378,7 @@ const MarkOptions = [
         key: MarkTypes.codeLine,
         icon: 'code',
         name: '行内代码',
+        shortcutKey: `${CONTROL_KEY}+E`,
         execute: editor => MarkEditor.toggleMark(editor, MarkTypes.codeLine),
         active: editor => MarkEditor.isMarkActive(editor, MarkTypes.codeLine)
     }
@@ -6264,6 +6346,9 @@ class TheCodeComponent extends TheBaseElementComponent {
             if (this.options.mode !== this.element.language) {
                 this.useMode();
             }
+            if (!this.readonly && this.isCollapsed) {
+                this.initializeCodemirrorFocus();
+            }
         }
     }
     ngOnInit() {
@@ -9761,8 +9846,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                 args: ['cellInner', { static: true }]
             }] } });
 
+const normalizeTable = (table) => {
+    const normalizedNodes = [];
+    const rowHeight = table.children.length;
+    const columnWidth = table.children[0].children.length;
+    table.children.forEach((row, rowIndex) => {
+        row.children.forEach((cell, columnIndex) => {
+            // case 1
+            if (cell.colspan || cell.rowspan) {
+                const rowspan = cell.rowspan || 1;
+                const colspan = cell.colspan || 1;
+                if (rowspan > rowHeight - rowIndex) {
+                    cell.rowspan = rowHeight - rowIndex;
+                }
+                if (colspan > columnWidth - columnIndex) {
+                    cell.colspan = columnWidth - columnIndex;
+                }
+                return;
+            }
+            // case 2
+            if (cell.hidden && !normalizedNodes.includes(cell)) {
+                const origin = getOriginCell(table, rowIndex, columnIndex);
+                if (!origin) {
+                    delete table.children[rowIndex].children[columnIndex].hidden;
+                }
+            }
+        });
+    });
+    return 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)) {
@@ -9833,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 {
@@ -9868,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));
@@ -9890,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
@@ -9938,67 +10058,45 @@ const withTable = (editor) => {
             return;
         }
         const { selection } = editor;
-        const element = TablePosition.create(opts, editor, selection.anchor.path);
-        const tableComponent = ELEMENT_TO_COMPONENT.get(element.table);
+        const tablePosition = TablePosition.create(opts, editor, selection.anchor.path);
+        const tableComponent = ELEMENT_TO_COMPONENT.get(tablePosition.table);
         const cells = tableComponent.tableStore.selectedCells;
-        const tableContent = {};
-        let contents;
-        let cellNode;
-        let fragment;
-        if (cells.length > 0) {
-            const selectNodes = getSelectCellNode(editor, cells);
-            const selectedColumnsIndex = tableComponent.tableStore.selectedColumnsIndex || [];
-            const selectedRowsIndex = tableComponent.tableStore.selectedRowsIndex || [];
+        let tableFragment = null;
+        if (tableComponent.tableStore.selectedRowsIndex.length > 0) {
+            const rows = tablePosition.table.children.slice(tableComponent.tableStore.selectedRowsIndex[0], tableComponent.tableStore.selectedRowsIndex[tableComponent.tableStore.selectedRowsIndex.length - 1] + 1);
+            tableFragment = Object.assign(Object.assign({}, tablePosition.table), { children: rows });
+        }
+        else if (cells.length > 0) {
+            const tempRows = {};
             for (const cell of cells) {
                 const { row, col } = cell;
-                const cellPath = [...element.tableEntry[1], row, col];
-                cellNode = Node.get(editor, cellPath);
-                const cellRange = Editor.range(editor, cellPath);
-                const domRange = AngularEditor.toDOMRange(editor, cellRange);
-                if (!contents) {
-                    contents = domRange.cloneContents();
+                const cellPath = [...tablePosition.tableEntry[1], row, col];
+                const cellNode = Node.get(editor, cellPath);
+                if (!tempRows[row]) {
+                    tempRows[row] = [];
                 }
-                else {
-                    contents.append(domRange.cloneContents());
-                }
-                if ((selectedColumnsIndex.length === 1 && cellNode.colspan > 1) ||
-                    (selectedRowsIndex.length === 1 && cellNode.rowspan > 1)) {
-                    cellNode = Object.assign(Object.assign({}, cellNode), { colspan: selectedColumnsIndex.length === 1 ? null : cellNode.colspan, rowspan: selectedRowsIndex.length === 1 ? null : cellNode.rowspan });
-                }
-                if (cellNode.hidden) {
-                    const origin = calcOriginSpan(element.table, row, col);
-                    const selectedOrigin = origin && selectNodes.filter(item => item.node.key === origin.key);
-                    if (!selectedOrigin || !selectedOrigin.length) {
-                        cellNode = Object.assign(Object.assign({}, cellNode), { hidden: null });
-                    }
-                }
-                if (!tableContent[row]) {
-                    tableContent[row] = [];
-                }
-                tableContent[row].push(cellNode);
+                tempRows[row].push(cellNode);
             }
-            const tableFragment = [
+            const rows = Object.values(tempRows).map((item) => {
+                return {
+                    type: ElementKinds.tableRow,
+                    children: item
+                };
+            });
+            tableFragment =
                 {
                     type: ElementKinds.table,
-                    children: Object.values(tableContent).map((item) => {
-                        return {
-                            type: ElementKinds.tableRow,
-                            children: item
-                        };
-                    })
-                }
-            ];
-            fragment = tableFragment;
-            const stringObj = JSON.stringify(fragment);
+                    children: rows
+                };
+        }
+        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);
-            const div = document.createElement('div');
-            div.appendChild(contents);
-            div.setAttribute('hidden', 'true');
-            document.body.appendChild(div);
-            unit.setData('text/html', div.innerHTML);
-            unit.setData('text/plain', getPlainText$1(div));
-            document.body.removeChild(div);
+            unit.setData('text/plain', plainText);
             return;
         }
         setFragmentData(unit);
@@ -10023,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]);
@@ -10081,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) => {
@@ -10128,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;
 };
 
@@ -10162,6 +10289,12 @@ const withDeserializeHMTL = (editor) => {
                 insertData(data);
                 return;
             }
+            // 识出纯图片并且粘贴板中存在文件则不进行处理, hook 直接右键复制图片的场景，流转到上传图片流程
+            // 后续需要做识别html图片后自动上传处理
+            if (fragment.length === 1 && fragment[0].type === ElementKinds.image && data.files.length > 0) {
+                insertData(data);
+                return;
+            }
             // 过滤 text 节点的 color/background-color 属性
             fragment.forEach((node) => deleteColorAndBackgroundColorOfText(node));
             Transforms.insertFragment(editor, fragment);
@@ -10377,12 +10510,14 @@ const PaintFormatOptions = [
         key: ToolbarActionTypes.undo,
         icon: 'undo',
         name: '撤销',
+        shortcutKey: `${CONTROL_KEY}+Z`,
         execute: (editor) => editor.undo()
     },
     {
         key: ToolbarActionTypes.redo,
         icon: 'redo',
         name: '重做',
+        shortcutKey: `${CONTROL_KEY}+Shift+Z`,
         execute: (editor) => editor.redo()
     },
     {
@@ -10493,7 +10628,8 @@ TheToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             <a
                 thyIconNavLink
                 [thyIconNavLinkIcon]="item.icon"
-                [thyTooltip]="item.name"
+                [thyTooltip]="tooltip"
+                [thyTooltipTemplateContext]="{ name: item.name, shortcutKey: item.shortcutKey }"
                 thyTooltipPlacement="top"
                 [thyIconNavLinkActive]="active"
                 (mousedown)="execute($event)"
@@ -10505,6 +10641,7 @@ TheToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 <span class="quick-toolbar-name">{{ item?.name }}</span>
             </ng-container>
         </ng-template>
+        <ng-template #tooltip let-data> {{ data.name }} {{ data.shortcutKey }} </ng-template>
         <ng-container #toolbarContainer></ng-container>
     `, isInline: true, components: [{ type: i2.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { 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: i7.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheToolbarItemComponent, decorators: [{
@@ -10516,7 +10653,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
             <a
                 thyIconNavLink
                 [thyIconNavLinkIcon]="item.icon"
-                [thyTooltip]="item.name"
+                [thyTooltip]="tooltip"
+                [thyTooltipTemplateContext]="{ name: item.name, shortcutKey: item.shortcutKey }"
                 thyTooltipPlacement="top"
                 [thyIconNavLinkActive]="active"
                 (mousedown)="execute($event)"
@@ -10528,6 +10666,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                 <span class="quick-toolbar-name">{{ item?.name }}</span>
             </ng-container>
         </ng-template>
+        <ng-template #tooltip let-data> {{ data.name }} {{ data.shortcutKey }} </ng-template>
         <ng-container #toolbarContainer></ng-container>
     `,
                     host: {
@@ -10691,6 +10830,22 @@ const withQuickInsert = (editor) => {
     return editor;
 };
 
+const withSoftBreak = (options = { rules: [{ hotkey: 'shift+enter' }] }) => (editor) => {
+    const { onKeydown } = editor;
+    editor.onKeydown = (event) => {
+        const { rules } = options;
+        const entry = getBlockAbove(editor);
+        rules.forEach(({ hotkey, query }) => {
+            if (isHotkey(hotkey, event) && isNodeType(entry, query)) {
+                event.preventDefault();
+                editor.insertText('\n');
+            }
+        });
+        onKeydown(event);
+    };
+    return editor;
+};
+
 const internalPlugins = [
     withTheHistory,
     withAutoInsertData(),
@@ -10708,6 +10863,17 @@ const internalPlugins = [
     withCode,
     withHeading,
     withMark(),
+    withSoftBreak({
+        rules: [
+            { hotkey: 'shift+enter' },
+            {
+                hotkey: 'enter',
+                query: {
+                    allow: [ElementKinds.blockquote]
+                }
+            }
+        ]
+    }),
     withBlockquote,
     withNodeID({ idKey: ELEMENT_UNIQUE_ID, idCreator }),
     withAutoFormat({ rules: autoFormatRules }),
@@ -10716,9 +10882,9 @@ const internalPlugins = [
     withMoveSelection,
     withInsertParagraphNodes(),
     withGetFragment(),
+    withImage,
     withDeserializeHMTL,
     withDeserializeMd(),
-    withImage,
     withQuickInsert
 ];
 const internalToolbarItems = [
@@ -10822,8 +10988,8 @@ const autoFocus = (editor, isFocus) => {
     setTimeout(() => {
         if (editor && editor.children.length > 0 && isFocus) {
             HistoryEditor.withoutMerging(editor, () => {
-                AngularEditor.focus(editor);
                 Transforms.select(editor, Editor.start(editor, [0]));
+                AngularEditor.focus(editor);
             });
         }
     });
@@ -11092,11 +11258,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
             }] } });
 
 class TheInlineToolbarComponent {
-    constructor(elementRef, scrollDispatcher, cdr, ngZone) {
+    constructor(elementRef, scrollDispatcher, cdr, ngZone, contextService) {
         this.elementRef = elementRef;
         this.scrollDispatcher = scrollDispatcher;
         this.cdr = cdr;
         this.ngZone = ngZone;
+        this.contextService = contextService;
         this.destroy$ = new Subject();
     }
     ngOnInit() {
@@ -11156,7 +11323,8 @@ class TheInlineToolbarComponent {
                 boundary = range.startContainer.getBoundingClientRect();
             }
         }
-        const editableRect = document.querySelector('.the-editor-typo').getBoundingClientRect();
+        const editableElement = this.contextService.getEditableElement();
+        const editableRect = editableElement.getBoundingClientRect();
         const toolbarHeight = toolbarElement.offsetHeight;
         const toolbarWidth = toolbarElement.offsetWidth;
         const halfOffsetWidth = toolbarWidth / 2;
@@ -11184,7 +11352,7 @@ class TheInlineToolbarComponent {
         this.destroy$.complete();
     }
 }
-TheInlineToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheInlineToolbarComponent, deps: [{ token: i0.ElementRef }, { token: i2$1.ScrollDispatcher }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+TheInlineToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheInlineToolbarComponent, deps: [{ token: i0.ElementRef }, { token: i2$1.ScrollDispatcher }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Component });
 TheInlineToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheInlineToolbarComponent, selector: "the-inline-toolbar", inputs: { editor: "editor", toolbarItems: "toolbarItems" }, host: { properties: { "class.hide": "toolbarItems.length === 0" } }, viewQueries: [{ propertyName: "inlineToolbar", first: true, predicate: ["inlineToolbar"], descendants: true }], ngImport: i0, template: `<the-toolbar
         #inlineToolbar
         class="the-inline-toolbar"
@@ -11208,7 +11376,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                     },
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i2$1.ScrollDispatcher }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { editor: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i2$1.ScrollDispatcher }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: TheContextService }]; }, propDecorators: { editor: [{
                 type: Input
             }], toolbarItems: [{
                 type: Input
@@ -11232,13 +11400,14 @@ class TheQuickInsertComponent {
         event.stopPropagation();
     }
     checkStatus() {
-        var _a;
         const { editor } = this;
         if (isCleanEmptyParagraph(editor)) {
-            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.isHide = false;
-            this.updatePosition(rootNode.offsetLeft, rootNode.offsetTop);
+            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;
@@ -11287,9 +11456,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
             }] } });
 
 class ThePlaceholderComponent {
-    constructor(renderer, elementRef) {
+    constructor(renderer, elementRef, contextService) {
         this.renderer = renderer;
         this.elementRef = elementRef;
+        this.contextService = contextService;
         this.isHide = true;
     }
     handleCompositionStart() {
@@ -11304,19 +11474,24 @@ 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 (!(editor === null || editor === void 0 ? void 0 : editor.selection) && isEmptyContent(editor.children)) {
-            // normal top is 28, but margin-top: -41px is set when maxHeight is set, so top is 69
-            const firstTop = ((_a = this.options) === null || _a === void 0 ? void 0 : _a.maxHeight) ? 69 : 28;
-            this.updatePosition(30, firstTop);
+        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 (isCleanEmptyParagraph(editor)) {
-            const block = Node.ancestor(editor, [(_b = editor === null || editor === void 0 ? void 0 : editor.selection) === null || _b === void 0 ? void 0 : _b.anchor.path[0]]);
-            const rootNode = AngularEditor.toDOMNode(editor, block);
+        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;
@@ -11332,7 +11507,7 @@ class ThePlaceholderComponent {
         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 }], target: i0.ɵɵFactoryTarget.Component });
+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,
@@ -11344,7 +11519,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                         '[class.hide]': 'isHide'
                     }
                 }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { editor: [{
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: TheContextService }]; }, propDecorators: { editor: [{
                 type: Input
             }], options: [{
                 type: Input
@@ -11519,6 +11694,12 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
         this.onSlaCompositionEnd = (event) => { };
         this.onSlaDragStart = (event) => { };
         this.onSlaDragOver = (event) => { };
+        this.onDrop = (event) => {
+            event.stopPropagation();
+            this.theOnDOMEvent.emit({
+                nativeEvent: event
+            });
+        };
     }
     get theGlobalToolbarInstance() {
         return this.theGlobalToolbar ? this.theGlobalToolbar : this.globalToolbarInstance;
@@ -11536,15 +11717,18 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
         this.onErrorHandler();
     }
     ngOnChanges(changes) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e;
         const options = changes.theOptions;
         if (options) {
             this.initializeOptions();
         }
+        if (options && ((_a = options.currentValue) === null || _a === void 0 ? void 0 : _a.readonly) !== ((_b = options.previousValue) === null || _b === void 0 ? void 0 : _b.readonly)) {
+            this.applyAutoFocus();
+        }
         if (changes['theDecorate']) {
             this.generateDecorate();
         }
-        if (((_a = this.editor) === null || _a === void 0 ? void 0 : _a.selection) && (((_b = options === null || options === void 0 ? void 0 : options.currentValue) === null || _b === void 0 ? void 0 : _b.readonly) || ((_c = options === null || options === void 0 ? void 0 : options.currentValue) === null || _c === void 0 ? void 0 : _c.disabled))) {
+        if (((_c = this.editor) === null || _c === void 0 ? void 0 : _c.selection) && (((_d = options === null || options === void 0 ? void 0 : options.currentValue) === null || _d === void 0 ? void 0 : _d.readonly) || ((_e = options === null || options === void 0 ? void 0 : options.currentValue) === null || _e === void 0 ? void 0 : _e.disabled))) {
             Transforms.deselect(this.editor);
         }
     }
@@ -11561,7 +11745,9 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
         this.theContextService.initialize({ nativeElement: this.elementRef.nativeElement, viewContainerRef: this.viewContainerRef });
         this.toolbarCalculate();
         setTimeout(() => {
+            var _a;
             this.theEditorCreated.emit(this.editor);
+            (_a = this.placeholderInstance) === null || _a === void 0 ? void 0 : _a.checkStatus();
             this.applyAutoFocus();
         });
     }
@@ -11577,9 +11763,9 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
         }
     }
     applyAutoFocus() {
-        var _a, _b, _c, _d;
-        if (((_a = this.theOptions) === null || _a === void 0 ? void 0 : _a.autoFocus) && !((_b = this.theOptions) === null || _b === void 0 ? void 0 : _b.readonly) && !((_c = this.theOptions) === null || _c === void 0 ? void 0 : _c.disabled)) {
-            autoFocus(this.editor, (_d = this.theOptions) === null || _d === void 0 ? void 0 : _d.autoFocus);
+        var _a, _b, _c;
+        if (!((_a = this.theOptions) === null || _a === void 0 ? void 0 : _a.disabled) && !((_b = this.theOptions) === null || _b === void 0 ? void 0 : _b.readonly)) {
+            autoFocus(this.editor, (_c = this.theOptions) === null || _c === void 0 ? void 0 : _c.autoFocus);
         }
     }
     toolbarCalculate() {
@@ -11611,14 +11797,14 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
         this.onTouchedCallback = fn;
     }
     valueChange(value) {
-        var _a, _b, _c, _d, _e;
+        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();
-        this.placeholderInstance.checkStatus();
+        (_c = this.placeholderInstance) === null || _c === void 0 ? void 0 : _c.checkStatus();
         // auto scroll view
-        const scrollContainer = (_c = this.theOptions) === null || _c === void 0 ? void 0 : _c.scrollContainer;
-        const maxHeight = (_d = this.theOptions) === null || _d === void 0 ? void 0 : _d.maxHeight;
-        if (!((_e = this.theOptions) === null || _e === void 0 ? void 0 : _e.readonly) && (scrollContainer || maxHeight)) {
+        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 container = maxHeight ? DEFAULT_SCROLL_CONTAINER : scrollContainer;
             this.autoScrollView(this.editor, container);
         }
@@ -11743,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        (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", "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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheEditorComponent, decorators: [{
             type: Component,
             args: [{
@@ -12074,5 +12260,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, BLOCK_INSERT_ORIGIN, BlockquoteEditor, CLIPBOARD_FORMAT_KEY, CODEMIRROR_PADDING_TOP, CODE_MODES, COMPONENTS, CONTAINER_BLOCKS, CodeEditor, CodeMode, ColorEditor, DEFAULT_LANGUAGE, DEFAULT_SCROLL_CONTAINER, DefaultElementOptions, DefaultGlobalToolbarDefinition, DefaultInlineToolbarDefinition, DefaultQuickToolbarDefinition, DropdownMode, ELEMENT_UNIQUE_ID, ElementKinds, ErrorCodes, HEADING_TYPES, HeadingEditor, HrEditor, 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, TheCodeMode, 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, 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, TheCodeMode, 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 };
 //# sourceMappingURL=worktile-theia.js.map