@worktile/theia 1.2.12 → 1.2.16

package/bundles/worktile-theia.umd.js

@@ -376,7 +376,6 @@
     var ZERO_WIDTH_CHAR = '\u200B';
     var CLIPBOARD_FORMAT_KEY = 'x-theia-fragment';
     var DEFAULT_SCROLL_CONTAINER = '.the-editable-container';
-    var BLOCK_INSERT_ORIGIN = 'block-insert';
     var ELEMENT_UNIQUE_ID = 'key';
     exports.TheMode = void 0;
     (function (TheMode) {
@@ -829,7 +828,11 @@
     };
 
     var isEmptyParagraph = function (editor, at) {
-        var _a = __read(getAnchorBlockEntry(editor, at), 1), block = _a[0];
+        var entry = getAnchorBlockEntry(editor, at);
+        if (!entry) {
+            return false;
+        }
+        var _a = __read(entry, 1), block = _a[0];
         return slate.Editor.isEmpty(editor, block) && block.type === exports.ElementKinds.paragraph;
     };
 
@@ -1421,6 +1424,9 @@
         if (fragment) {
             var decoded = decodeURIComponent(window.atob(fragment));
             var nodes = JSON.parse(decoded);
+            if (!Array.isArray(nodes)) {
+                nodes = [nodes];
+            }
             // delete key to avoid duplicate keys
             if (deleteKey) {
                 deleteElementKey(nodes, deleteKey);
@@ -2375,6 +2381,9 @@
         return "the-toolbar-" + uuid;
     };
 
+    var IS_MAC = typeof window != 'undefined' && /Mac|iPod|iPhone|iPad/.test(window.navigator.platform);
+    var CONTROL_KEY = IS_MAC ? '⌘' : 'Ctrl';
+
     var withDeserializeMd = function (options) { return function (editor) {
         var insertData = editor.insertData, onKeydown = editor.onKeydown;
         editor.onKeydown = function (event) {
@@ -2415,8 +2424,13 @@
                                         });
                                         return;
                                     }
+                                    else {
+                                        closeConversionHint(editor);
+                                    }
+                                }
+                                catch (error) {
+                                    closeConversionHint(editor);
                                 }
-                                catch (error) { }
                             }
                         },
                         origin: origin,
@@ -2652,10 +2666,18 @@
         };
         TheContextService.prototype.getOptions = function () {
             if (!this.options.width) {
-                this.options.width = this.options.nativeElement.querySelector('.slate-editable-container').firstElementChild.offsetWidth;
+                var firstElementChild = this.getFirstElementChild();
+                this.options.width = firstElementChild.offsetWidth;
             }
             return this.options;
         };
+        TheContextService.prototype.getEditableElement = function () {
+            return this.options.nativeElement.querySelector('.the-editor-typo');
+        };
+        TheContextService.prototype.getFirstElementChild = function () {
+            var editableElement = this.getEditableElement();
+            return editableElement === null || editableElement === void 0 ? void 0 : editableElement.firstElementChild;
+        };
         TheContextService.prototype.setUploadFileList = function (file) {
             this.fileList.push(file);
         };
@@ -4709,20 +4731,66 @@
             // block card cursor
             if (anchorNode && i1.hasBlockCard(domSelection)) {
                 var isCardLeftCursor = i1.isCardLeft(anchorNode);
-                // ↓ + left-block-card 或者 → + right-block-card
-                if ((isMoveDown && isCardLeftCursor) || (isMoveForward && !isCardLeftCursor)) {
-                    nativeEvent.preventDefault();
+                if (isMoveUp) {
                     var _a = __read(i1.AngularEditor.toSlateCardEntry(editor, anchorNode), 2), path = _a[1];
+                    var previousPath = slate.Path.hasPrevious(path) && slate.Path.previous(path);
+                    var previousNode = previousPath && getNode(editor, previousPath);
+                    if (previousNode && editor.isBlockCard(previousNode)) {
+                        i1.AngularEditor.moveBlockCard(editor, previousNode, { direction: isCardLeftCursor ? 'left' : 'right' });
+                    }
+                    else {
+                        var before = slate.Editor.before(editor, path);
+                        if (before) {
+                            slate.Transforms.select(editor, before);
+                        }
+                    }
+                    nativeEvent.preventDefault();
+                    return;
+                }
+                if (isMoveDown) {
+                    var _b = __read(i1.AngularEditor.toSlateCardEntry(editor, anchorNode), 2), path = _b[1];
+                    var nextPath = slate.Path.next(path);
+                    var nextNode = getNode(editor, nextPath);
+                    if (nextNode && editor.isBlockCard(nextNode)) {
+                        i1.AngularEditor.moveBlockCard(editor, nextNode, { direction: isCardLeftCursor ? 'left' : 'right' });
+                    }
+                    else {
+                        var after = slate.Editor.after(editor, path);
+                        if (after) {
+                            slate.Transforms.select(editor, slate.Editor.after(editor, path));
+                        }
+                    }
+                    nativeEvent.preventDefault();
+                    return;
+                }
+                // → + right-block-card
+                if ((isMoveForward && !isCardLeftCursor)) {
+                    nativeEvent.preventDefault();
+                    var _c = __read(i1.AngularEditor.toSlateCardEntry(editor, anchorNode), 2), path = _c[1];
+                    var nextPath = slate.Path.next(path);
+                    var nextNode = getNode(editor, nextPath);
+                    if (nextNode && editor.isBlockCard(nextNode)) {
+                        event.preventDefault();
+                        i1.AngularEditor.moveBlockCard(editor, nextNode, { direction: 'left' });
+                        return;
+                    }
                     var after = slate.Editor.after(editor, path);
                     if (after) {
                         slate.Transforms.select(editor, slate.Editor.after(editor, path));
                     }
                     return;
                 }
-                // ↑ + right-block-card 或者 ← + left-block-card
-                if ((isMoveUp && !isCardLeftCursor) || (isMoveBackward && isCardLeftCursor)) {
+                // ← + left-block-card
+                if (isMoveBackward && isCardLeftCursor) {
                     nativeEvent.preventDefault();
-                    var _b = __read(i1.AngularEditor.toSlateCardEntry(editor, anchorNode), 2), path = _b[1];
+                    var _d = __read(i1.AngularEditor.toSlateCardEntry(editor, anchorNode), 2), path = _d[1];
+                    var previousPath = slate.Path.hasPrevious(path) && slate.Path.previous(path);
+                    var previousNode = previousPath && getNode(editor, previousPath);
+                    if (previousNode && editor.isBlockCard(previousNode)) {
+                        event.preventDefault();
+                        i1.AngularEditor.moveBlockCard(editor, previousNode, { direction: 'right' });
+                        return;
+                    }
                     var before = slate.Editor.before(editor, path);
                     if (before) {
                         slate.Transforms.select(editor, before);
@@ -4732,14 +4800,14 @@
                 // move to card center
                 if ((isCardLeftCursor && isMoveForward) || (!isCardLeftCursor && isMoveBackward)) {
                     nativeEvent.preventDefault();
-                    var _c = __read(i1.AngularEditor.toSlateCardEntry(editor, anchorNode), 2), path = _c[1];
+                    var _e = __read(i1.AngularEditor.toSlateCardEntry(editor, anchorNode), 2), path = _e[1];
                     slate.Transforms.select(editor, isCardLeftCursor ? slate.Editor.start(editor, path) : slate.Editor.end(editor, path));
                     return;
                 }
             }
             // block card center
             if (isCollapsed && (isMoveUp || isMoveDown) && anchorEntry) {
-                var _d = __read(anchorEntry, 2), block = _d[0], path = _d[1];
+                var _f = __read(anchorEntry, 2), block = _f[0], path = _f[1];
                 if (editor.isBlockCard(block)) {
                     event.preventDefault();
                     slate.Transforms.select(editor, isMoveUp ? slate.Editor.before(editor, path) : slate.Editor.after(editor, path));
@@ -4747,7 +4815,7 @@
                 }
             }
             if (isCollapsed && (isMoveBackward || isMoveForward) && anchorEntry) {
-                var _e = __read(anchorEntry, 1), block = _e[0];
+                var _g = __read(anchorEntry, 1), block = _g[0];
                 if (editor.isBlockCard(block)) {
                     event.preventDefault();
                     i1.AngularEditor.moveBlockCard(editor, block, { direction: isMoveBackward ? 'left' : 'right' });
@@ -5133,11 +5201,14 @@
                     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;
         };
@@ -5289,7 +5360,7 @@
             return rowspans.some(function (rowspan) { return isInside(rowspan, rowIndx, targetIndex); });
         });
     }
-    function calcOriginSpan(table, targetRowIndex, targetColumnIndex) {
+    function getOriginCell(table, targetRowIndex, targetColumnIndex) {
         var _loop_1 = function (rowIndex) {
             var row = table.children[rowIndex];
             var originCell = row.children
@@ -5812,6 +5883,13 @@
         isActiveHeader: function (editor) {
             var _a = __read(slate.Editor.nodes(editor, { match: function (n) { return n.type === exports.ElementKinds.tableRow; } }), 1), tableRowEntry = _a[0];
             return tableRowEntry && tableRowEntry[0] && tableRowEntry[0].header;
+        },
+        selectOriginCell: function (editor, table, rowIndex, columnIndex, isStart) {
+            var origin = getOriginCell(table, rowIndex, columnIndex);
+            if (origin) {
+                var path = i1.AngularEditor.findPath(editor, origin);
+                slate.Transforms.select(editor, isStart ? slate.Editor.start(editor, path) : slate.Editor.end(editor, path));
+            }
         }
     };
 
@@ -5847,6 +5925,7 @@
             key: exports.MarkTypes.bold,
             icon: 'bold',
             name: '加粗',
+            shortcutKey: CONTROL_KEY + "+B",
             execute: function (editor) { return MarkEditor.toggleMark(editor, exports.MarkTypes.bold); },
             active: function (editor) { return MarkEditor.isMarkActive(editor, exports.MarkTypes.bold); }
         },
@@ -5854,6 +5933,7 @@
             key: exports.MarkTypes.italic,
             icon: 'italic',
             name: '斜体',
+            shortcutKey: CONTROL_KEY + "+I",
             execute: function (editor) { return MarkEditor.toggleMark(editor, exports.MarkTypes.italic); },
             active: function (editor) { return MarkEditor.isMarkActive(editor, exports.MarkTypes.italic); }
         },
@@ -5868,6 +5948,7 @@
             key: exports.MarkTypes.underline,
             icon: 'underline',
             name: '下划线',
+            shortcutKey: CONTROL_KEY + "+U",
             execute: function (editor) { return MarkEditor.toggleMark(editor, exports.MarkTypes.underline); },
             active: function (editor) { return MarkEditor.isMarkActive(editor, exports.MarkTypes.underline); }
         },
@@ -5875,6 +5956,7 @@
             key: exports.MarkTypes.codeLine,
             icon: 'code',
             name: '行内代码',
+            shortcutKey: CONTROL_KEY + "+E",
             execute: function (editor) { return MarkEditor.toggleMark(editor, exports.MarkTypes.codeLine); },
             active: function (editor) { return MarkEditor.isMarkActive(editor, exports.MarkTypes.codeLine); }
         }
@@ -6840,6 +6922,9 @@
                 if (this.options.mode !== this.element.language) {
                     this.useMode();
                 }
+                if (!this.readonly && this.isCollapsed) {
+                    this.initializeCodemirrorFocus();
+                }
             }
         };
         TheCodeComponent.prototype.ngOnInit = function () {
@@ -10599,8 +10684,38 @@
                     args: ['cellInner', { static: true }]
                 }] } });
 
+    var normalizeTable = function (table) {
+        var normalizedNodes = [];
+        var rowHeight = table.children.length;
+        var columnWidth = table.children[0].children.length;
+        table.children.forEach(function (row, rowIndex) {
+            row.children.forEach(function (cell, columnIndex) {
+                // case 1
+                if (cell.colspan || cell.rowspan) {
+                    var rowspan = cell.rowspan || 1;
+                    var 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)) {
+                    var origin = getOriginCell(table, rowIndex, columnIndex);
+                    if (!origin) {
+                        delete table.children[rowIndex].children[columnIndex].hidden;
+                    }
+                }
+            });
+        });
+        return table;
+    };
+
     var withTable = function (editor) {
-        var deleteBackward = editor.deleteBackward, deleteForward = editor.deleteForward, onKeydown = editor.onKeydown, setFragmentData = editor.setFragmentData, insertData = editor.insertData, normalizeNode = editor.normalizeNode, isBlockCard = editor.isBlockCard, renderElement = editor.renderElement, deleteCutData = editor.deleteCutData, isContainer = editor.isContainer;
+        var deleteBackward = editor.deleteBackward, deleteForward = editor.deleteForward, onKeydown = editor.onKeydown, setFragmentData = editor.setFragmentData, insertData = editor.insertData, normalizeNode = editor.normalizeNode, isBlockCard = editor.isBlockCard, renderElement = editor.renderElement, deleteCutData = editor.deleteCutData, isContainer = editor.isContainer, onChange = editor.onChange;
         editor.deleteBackward = function (unit) {
             var opts = new TableOptions$1();
             if (!isSelectionInTable(opts, editor)) {
@@ -10671,13 +10786,11 @@
                         var aboveCell = aboveRow && aboveRow.children[startPosition.getColumnIndex()];
                         if (aboveCell) {
                             if (aboveCell.hidden) {
-                                var originSpan = calcOriginSpan(endPosition.table, startPosition.getRowIndex() - 1, startPosition.getColumnIndex());
-                                if (originSpan) {
-                                    at = slate.Editor.start(editor, TheEditor.findPath(editor, originSpan));
-                                }
+                                TableEditor.selectOriginCell(editor, startPosition.table, startPosition.getRowIndex() - 1, startPosition.getColumnIndex(), false);
+                                return;
                             }
                             else {
-                                at = slate.Editor.start(editor, TheEditor.findPath(editor, aboveCell));
+                                at = slate.Editor.end(editor, TheEditor.findPath(editor, aboveCell));
                             }
                         }
                         else {
@@ -10706,10 +10819,8 @@
                         var belowCell = belowRow && belowRow.children[startPosition.getColumnIndex()];
                         if (belowCell) {
                             if (belowCell.hidden) {
-                                var originSpan = calcOriginSpan(endPosition.table, belowRowIndex, startPosition.getColumnIndex());
-                                if (originSpan) {
-                                    at = slate.Editor.start(editor, TheEditor.findPath(editor, originSpan));
-                                }
+                                TableEditor.selectOriginCell(editor, startPosition.table, startPosition.getRowIndex() + 1, startPosition.getColumnIndex(), true);
+                                return;
                             }
                             else {
                                 at = slate.Editor.start(editor, TheEditor.findPath(editor, belowCell));
@@ -10728,18 +10839,27 @@
                     var beforePoint = slate.Editor.before(editor, editor.selection);
                     var beforePosition = beforePoint && TablePosition.create(opts, editor, beforePoint.path);
                     if (beforePosition && beforePosition.cell && beforePosition.cell.hidden) {
+                        event.preventDefault();
                         var at = slate.Editor.end(editor, TheEditor.findPath(editor, beforePosition.findPrevious()));
                         slate.Transforms.select(editor, at);
-                        event.preventDefault();
                     }
                 }
                 if (isMoveForward) {
                     var afterPoint = slate.Editor.after(editor, editor.selection);
                     var afterPosition = afterPoint && TablePosition.create(opts, editor, afterPoint.path);
                     if (afterPosition.cell && afterPosition.cell.hidden) {
-                        var at = slate.Editor.start(editor, TheEditor.findPath(editor, afterPosition.findNext()));
-                        slate.Transforms.select(editor, at);
                         event.preventDefault();
+                        var nextCell = afterPosition.findNext();
+                        if (nextCell) {
+                            var at = slate.Editor.start(editor, TheEditor.findPath(editor, afterPosition.findNext()));
+                            slate.Transforms.select(editor, at);
+                            event.preventDefault();
+                        }
+                        else {
+                            i1.AngularEditor.moveBlockCard(editor, startPosition.tableEntry[0], { direction: 'right' });
+                            event.preventDefault();
+                        }
+                        return;
                     }
                 }
                 // Prevent deleting cells in the table
@@ -10777,49 +10897,26 @@
                 return;
             }
             var selection = editor.selection;
-            var element = TablePosition.create(opts, editor, selection.anchor.path);
-            var tableComponent = i1.ELEMENT_TO_COMPONENT.get(element.table);
+            var tablePosition = TablePosition.create(opts, editor, selection.anchor.path);
+            var tableComponent = i1.ELEMENT_TO_COMPONENT.get(tablePosition.table);
             var cells = tableComponent.tableStore.selectedCells;
-            var tableContent = {};
-            var contents;
-            var cellNode;
-            var fragment;
-            if (cells.length > 0) {
-                var selectNodes = getSelectCellNode(editor, cells);
-                var selectedColumnsIndex = tableComponent.tableStore.selectedColumnsIndex || [];
-                var selectedRowsIndex = tableComponent.tableStore.selectedRowsIndex || [];
-                var _loop_1 = function (cell) {
-                    var row = cell.row, col = cell.col;
-                    var cellPath = __spreadArray(__spreadArray([], __read(element.tableEntry[1])), [row, col]);
-                    cellNode = slate.Node.get(editor, cellPath);
-                    var cellRange = slate.Editor.range(editor, cellPath);
-                    var domRange = i1.AngularEditor.toDOMRange(editor, cellRange);
-                    if (!contents) {
-                        contents = domRange.cloneContents();
-                    }
-                    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) {
-                        var origin_1 = calcOriginSpan(element.table, row, col);
-                        var selectedOrigin = origin_1 && selectNodes.filter(function (item) { return item.node.key === origin_1.key; });
-                        if (!selectedOrigin || !selectedOrigin.length) {
-                            cellNode = Object.assign(Object.assign({}, cellNode), { hidden: null });
-                        }
-                    }
-                    if (!tableContent[row]) {
-                        tableContent[row] = [];
-                    }
-                    tableContent[row].push(cellNode);
-                };
+            var tableFragment = null;
+            if (tableComponent.tableStore.selectedRowsIndex.length > 0) {
+                var 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) {
+                var tempRows = {};
                 try {
                     for (var cells_1 = __values(cells), cells_1_1 = cells_1.next(); !cells_1_1.done; cells_1_1 = cells_1.next()) {
                         var cell = cells_1_1.value;
-                        _loop_1(cell);
+                        var row = cell.row, col = cell.col;
+                        var cellPath = __spreadArray(__spreadArray([], __read(tablePosition.tableEntry[1])), [row, col]);
+                        var cellNode = slate.Node.get(editor, cellPath);
+                        if (!tempRows[row]) {
+                            tempRows[row] = [];
+                        }
+                        tempRows[row].push(cellNode);
                     }
                 }
                 catch (e_1_1) { e_1 = { error: e_1_1 }; }
@@ -10829,28 +10926,26 @@
                     }
                     finally { if (e_1) throw e_1.error; }
                 }
-                var tableFragment = [
+                var rows = Object.values(tempRows).map(function (item) {
+                    return {
+                        type: exports.ElementKinds.tableRow,
+                        children: item
+                    };
+                });
+                tableFragment =
                     {
                         type: exports.ElementKinds.table,
-                        children: Object.values(tableContent).map(function (item) {
-                            return {
-                                type: exports.ElementKinds.tableRow,
-                                children: item
-                            };
-                        })
-                    }
-                ];
-                fragment = tableFragment;
-                var stringObj = JSON.stringify(fragment);
+                        children: rows
+                    };
+            }
+            if (tableFragment) {
+                tableFragment = normalizeTable(_.cloneDeep(tableFragment));
+                var plainText = slate.Node.string(tableFragment);
+                tableFragment = [tableFragment];
+                var stringObj = JSON.stringify(tableFragment);
                 var encoded = window.btoa(encodeURIComponent(stringObj));
                 unit.setData("application/" + CLIPBOARD_FORMAT_KEY, encoded);
-                var 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', i1.getPlainText(div));
-                document.body.removeChild(div);
+                unit.setData('text/plain', plainText);
                 return;
             }
             setFragmentData(unit);
@@ -10875,7 +10970,7 @@
                         for (var j = selectColIndex_1; j <= lastColIndex_1; j++) {
                             var row = tablePosition_1.table.children[i];
                             if (row && row.children[j]) {
-                                var originCell = calcOriginSpan(tablePosition_1.table, i, j);
+                                var originCell = getOriginCell(tablePosition_1.table, i, j);
                                 if (originCell && (originCell.colspan || originCell.rowspan)) {
                                     var path = TheEditor.findPath(editor, originCell).slice(-2);
                                     resetTableCell(editor, tablePosition_1.table, originCell, path[0], path[1]);
@@ -10933,6 +11028,21 @@
                     slate.Transforms.setNodes(editor, { columns: columns }, { at: entry[1] });
                 }
             }
+            // adjust selection when selection is in hidden cell
+            if (slate.Element.isElement(entry[0]) && entry[0].type === exports.ElementKinds.tableCell && entry[0].hidden) {
+                if (editor.selection && slate.Range.isCollapsed(editor.selection) && slate.Path.isAncestor(entry[1], editor.selection.anchor.path)) {
+                    setTimeout(function () {
+                        var opts = new TableOptions$1();
+                        var tablePosition = TablePosition.create(opts, editor, editor.selection.anchor.path);
+                        var origin = getOriginCell(tablePosition.table, tablePosition.getRowIndex(), tablePosition.getColumnIndex());
+                        if (origin) {
+                            var path = i1.AngularEditor.findPath(editor, origin);
+                            slate.Transforms.select(editor, slate.Editor.end(editor, path));
+                        }
+                    }, 0);
+                    return;
+                }
+            }
             normalizeNode(entry);
         };
         editor.isBlockCard = function (element) {
@@ -10980,6 +11090,20 @@
         editor.isContainer = function (element) {
             return element.type === exports.ElementKinds.tableCell ? true : isContainer(element);
         };
+        editor.onChange = function () {
+            onChange();
+            // adujst selection when selection is in hidden cell
+            // just hook set_selection
+            var isCollapsed = editor.selection && slate.Range.isCollapsed(editor.selection);
+            var isSelectionOperation = editor.operations.every(function (op) { return slate.Operation.isSelectionOperation(op); });
+            if (isCollapsed && isSelectionOperation) {
+                var opts = new TableOptions$1();
+                var 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;
     };
 
@@ -11018,6 +11142,12 @@
                     insertData(data);
                     return;
                 }
+                // 识出纯图片并且粘贴板中存在文件则不进行处理, hook 直接右键复制图片的场景，流转到上传图片流程
+                // 后续需要做识别html图片后自动上传处理
+                if (fragment.length === 1 && fragment[0].type === exports.ElementKinds.image && data.files.length > 0) {
+                    insertData(data);
+                    return;
+                }
                 // 过滤 text 节点的 color/background-color 属性
                 fragment.forEach(function (node) { return deleteColorAndBackgroundColorOfText(node); });
                 slate.Transforms.insertFragment(editor, fragment);
@@ -11252,12 +11382,14 @@
             key: exports.ToolbarActionTypes.undo,
             icon: 'undo',
             name: '撤销',
+            shortcutKey: CONTROL_KEY + "+Z",
             execute: function (editor) { return editor.undo(); }
         },
         {
             key: exports.ToolbarActionTypes.redo,
             icon: 'redo',
             name: '重做',
+            shortcutKey: CONTROL_KEY + "+Shift+Z",
             execute: function (editor) { return editor.redo(); }
         },
         {
@@ -11378,12 +11510,12 @@
         return TheToolbarItemComponent;
     }(TheToolbarBaseItemComponent));
     TheToolbarItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheToolbarItemComponent, deps: [{ token: i0__namespace.NgZone }, { token: i0__namespace.ComponentFactoryResolver }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: { item: "item", editor: "editor", itemMode: "itemMode" }, host: { classAttribute: "the-toolbar-item" }, viewQueries: [{ propertyName: "toolbarContainer", first: true, predicate: ["toolbarContainer"], descendants: true, read: i0.ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "\n        <ng-container *ngIf=\"itemMode === ToolbarItemMode.horizontal; else selectionItem\">\n            <a\n                thyIconNavLink\n                [thyIconNavLinkIcon]=\"item.icon\"\n                [thyTooltip]=\"item.name\"\n                thyTooltipPlacement=\"top\"\n                [thyIconNavLinkActive]=\"active\"\n                (mousedown)=\"execute($event)\"\n            ></a>\n        </ng-container>\n        <ng-template #selectionItem>\n            <ng-container *ngIf=\"!item?.quickItemComponent\">\n                <thy-icon [thyIconName]=\"item?.icon\" [thyIconRotate]=\"0\" class=\"quick-toolbar-icon\"></thy-icon>\n                <span class=\"quick-toolbar-name\">{{ item?.name }}</span>\n            </ng-container>\n        </ng-template>\n        <ng-container #toolbarContainer></ng-container>\n    ", isInline: true, components: [{ type: i2__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+    TheToolbarItemComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: { item: "item", editor: "editor", itemMode: "itemMode" }, host: { classAttribute: "the-toolbar-item" }, viewQueries: [{ propertyName: "toolbarContainer", first: true, predicate: ["toolbarContainer"], descendants: true, read: i0.ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0__namespace, template: "\n        <ng-container *ngIf=\"itemMode === ToolbarItemMode.horizontal; else selectionItem\">\n            <a\n                thyIconNavLink\n                [thyIconNavLinkIcon]=\"item.icon\"\n                [thyTooltip]=\"tooltip\"\n                [thyTooltipTemplateContext]=\"{ name: item.name, shortcutKey: item.shortcutKey }\"\n                thyTooltipPlacement=\"top\"\n                [thyIconNavLinkActive]=\"active\"\n                (mousedown)=\"execute($event)\"\n            ></a>\n        </ng-container>\n        <ng-template #selectionItem>\n            <ng-container *ngIf=\"!item?.quickItemComponent\">\n                <thy-icon [thyIconName]=\"item?.icon\" [thyIconRotate]=\"0\" class=\"quick-toolbar-icon\"></thy-icon>\n                <span class=\"quick-toolbar-name\">{{ item?.name }}</span>\n            </ng-container>\n        </ng-template>\n        <ng-template #tooltip let-data> {{ data.name }} {{ data.shortcutKey }} </ng-template>\n        <ng-container #toolbarContainer></ng-container>\n    ", isInline: true, components: [{ type: i2__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i6__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheToolbarItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
                         selector: 'the-toolbar-item',
-                        template: "\n        <ng-container *ngIf=\"itemMode === ToolbarItemMode.horizontal; else selectionItem\">\n            <a\n                thyIconNavLink\n                [thyIconNavLinkIcon]=\"item.icon\"\n                [thyTooltip]=\"item.name\"\n                thyTooltipPlacement=\"top\"\n                [thyIconNavLinkActive]=\"active\"\n                (mousedown)=\"execute($event)\"\n            ></a>\n        </ng-container>\n        <ng-template #selectionItem>\n            <ng-container *ngIf=\"!item?.quickItemComponent\">\n                <thy-icon [thyIconName]=\"item?.icon\" [thyIconRotate]=\"0\" class=\"quick-toolbar-icon\"></thy-icon>\n                <span class=\"quick-toolbar-name\">{{ item?.name }}</span>\n            </ng-container>\n        </ng-template>\n        <ng-container #toolbarContainer></ng-container>\n    ",
+                        template: "\n        <ng-container *ngIf=\"itemMode === ToolbarItemMode.horizontal; else selectionItem\">\n            <a\n                thyIconNavLink\n                [thyIconNavLinkIcon]=\"item.icon\"\n                [thyTooltip]=\"tooltip\"\n                [thyTooltipTemplateContext]=\"{ name: item.name, shortcutKey: item.shortcutKey }\"\n                thyTooltipPlacement=\"top\"\n                [thyIconNavLinkActive]=\"active\"\n                (mousedown)=\"execute($event)\"\n            ></a>\n        </ng-container>\n        <ng-template #selectionItem>\n            <ng-container *ngIf=\"!item?.quickItemComponent\">\n                <thy-icon [thyIconName]=\"item?.icon\" [thyIconRotate]=\"0\" class=\"quick-toolbar-icon\"></thy-icon>\n                <span class=\"quick-toolbar-name\">{{ item?.name }}</span>\n            </ng-container>\n        </ng-template>\n        <ng-template #tooltip let-data> {{ data.name }} {{ data.shortcutKey }} </ng-template>\n        <ng-container #toolbarContainer></ng-container>\n    ",
                         host: {
                             class: 'the-toolbar-item'
                         }
@@ -11549,6 +11681,26 @@
         return editor;
     };
 
+    var withSoftBreak = function (options) {
+        if (options === void 0) { options = { rules: [{ hotkey: 'shift+enter' }] }; }
+        return function (editor) {
+            var onKeydown = editor.onKeydown;
+            editor.onKeydown = function (event) {
+                var rules = options.rules;
+                var entry = getBlockAbove(editor);
+                rules.forEach(function (_a) {
+                    var hotkey = _a.hotkey, query = _a.query;
+                    if (isHotkey__default["default"](hotkey, event) && isNodeType(entry, query)) {
+                        event.preventDefault();
+                        editor.insertText('\n');
+                    }
+                });
+                onKeydown(event);
+            };
+            return editor;
+        };
+    };
+
     var internalPlugins = [
         withTheHistory,
         withAutoInsertData(),
@@ -11566,6 +11718,17 @@
         withCode,
         withHeading,
         withMark(),
+        withSoftBreak({
+            rules: [
+                { hotkey: 'shift+enter' },
+                {
+                    hotkey: 'enter',
+                    query: {
+                        allow: [exports.ElementKinds.blockquote]
+                    }
+                }
+            ]
+        }),
         withBlockquote,
         withNodeID({ idKey: ELEMENT_UNIQUE_ID, idCreator: idCreator }),
         withAutoFormat({ rules: autoFormatRules }),
@@ -11574,9 +11737,9 @@
         withMoveSelection,
         withInsertParagraphNodes(),
         withGetFragment(),
+        withImage,
         withDeserializeHMTL,
         withDeserializeMd(),
-        withImage,
         withQuickInsert
     ];
     var internalToolbarItems = __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(AlignOptions)), __read(MarkOptions)), __read(ColorOptions)), __read(HeadingOptions)), __read(TodoItemOptions)), __read(ListOptions)), __read(ImageOptions)), __read(HrOptions)), __read(BlockquoteOptions)), __read(CodeOptions)), __read(LinkOptions)), __read(TableOptions)), __read(VerticalAlignOptions)), __read(PaintFormatOptions));
@@ -11673,8 +11836,8 @@
         setTimeout(function () {
             if (editor && editor.children.length > 0 && isFocus) {
                 slateHistory.HistoryEditor.withoutMerging(editor, function () {
-                    i1.AngularEditor.focus(editor);
                     slate.Transforms.select(editor, slate.Editor.start(editor, [0]));
+                    i1.AngularEditor.focus(editor);
                 });
             }
         });
@@ -12004,11 +12167,12 @@
                 }] } });
 
     var TheInlineToolbarComponent = /** @class */ (function () {
-        function TheInlineToolbarComponent(elementRef, scrollDispatcher, cdr, ngZone) {
+        function TheInlineToolbarComponent(elementRef, scrollDispatcher, cdr, ngZone, contextService) {
             this.elementRef = elementRef;
             this.scrollDispatcher = scrollDispatcher;
             this.cdr = cdr;
             this.ngZone = ngZone;
+            this.contextService = contextService;
             this.destroy$ = new rxjs.Subject();
         }
         TheInlineToolbarComponent.prototype.ngOnInit = function () {
@@ -12070,7 +12234,8 @@
                     boundary = range.startContainer.getBoundingClientRect();
                 }
             }
-            var editableRect = document.querySelector('.the-editor-typo').getBoundingClientRect();
+            var editableElement = this.contextService.getEditableElement();
+            var editableRect = editableElement.getBoundingClientRect();
             var toolbarHeight = toolbarElement.offsetHeight;
             var toolbarWidth = toolbarElement.offsetWidth;
             var halfOffsetWidth = toolbarWidth / 2;
@@ -12109,7 +12274,7 @@
         };
         return TheInlineToolbarComponent;
     }());
-    TheInlineToolbarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheInlineToolbarComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i2__namespace$1.ScrollDispatcher }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.NgZone }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheInlineToolbarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheInlineToolbarComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i2__namespace$1.ScrollDispatcher }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.NgZone }, { token: TheContextService }], target: i0__namespace.ɵɵFactoryTarget.Component });
     TheInlineToolbarComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "<the-toolbar\n        #inlineToolbar\n        class=\"the-inline-toolbar\"\n        [editor]=\"editor\"\n        [toolbarItems]=\"toolbarItems\"\n        [isMore]=\"false\"\n    ></the-toolbar> ", isInline: true, components: [{ type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheInlineToolbarComponent, decorators: [{
                 type: i0.Component,
@@ -12121,7 +12286,7 @@
                         },
                         changeDetection: i0.ChangeDetectionStrategy.OnPush
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i2__namespace$1.ScrollDispatcher }, { type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.NgZone }]; }, propDecorators: { editor: [{
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i2__namespace$1.ScrollDispatcher }, { type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.NgZone }, { type: TheContextService }]; }, propDecorators: { editor: [{
                     type: i0.Input
                 }], toolbarItems: [{
                     type: i0.Input
@@ -12145,13 +12310,15 @@
             event.stopPropagation();
         };
         TheQuickInsertComponent.prototype.checkStatus = function () {
-            var _a;
+            var _this = this;
             var editor = this.editor;
             if (isCleanEmptyParagraph(editor)) {
-                var block = slate.Node.ancestor(editor, [(_a = editor === null || editor === void 0 ? void 0 : editor.selection) === null || _a === void 0 ? void 0 : _a.anchor.path[0]]);
-                var rootNode = i1.AngularEditor.toDOMNode(editor, block);
-                this.isHide = false;
-                this.updatePosition(rootNode.offsetLeft, rootNode.offsetTop);
+                setTimeout(function () {
+                    var _a;
+                    var block = slate.Node.ancestor(editor, [(_a = editor === null || editor === void 0 ? void 0 : editor.selection) === null || _a === void 0 ? void 0 : _a.anchor.path[0]]);
+                    var rootNode = i1.AngularEditor.toDOMNode(editor, block);
+                    _this.updatePosition(rootNode.offsetLeft, rootNode.offsetTop);
+                });
                 return;
             }
             this.isHide = true;
@@ -12201,9 +12368,10 @@
                 }] } });
 
     var ThePlaceholderComponent = /** @class */ (function () {
-        function ThePlaceholderComponent(renderer, elementRef) {
+        function ThePlaceholderComponent(renderer, elementRef, contextService) {
             this.renderer = renderer;
             this.elementRef = elementRef;
+            this.contextService = contextService;
             this.isHide = true;
         }
         ThePlaceholderComponent.prototype.handleCompositionStart = function () {
@@ -12219,20 +12387,25 @@
         };
         ThePlaceholderComponent.prototype.checkStatus = function () {
             var _this = this;
-            var _a, _b;
+            var _a, _b, _c;
             var editor = this.editor;
+            var isEmptyShow = typeof ((_a = this.options) === null || _a === void 0 ? void 0 : _a.isEmptyShowPlaceholder) === 'undefined' ? true : this.options.isEmptyShowPlaceholder;
+            var isMustShow = (_b = this.options) === null || _b === void 0 ? void 0 : _b.isMustShowPlaceholder;
+            var isReadonly = (_c = this.options) === null || _c === void 0 ? void 0 : _c.readonly;
             // empty content and no selection processing
-            if (!(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
-                var firstTop = ((_a = this.options) === null || _a === void 0 ? void 0 : _a.maxHeight) ? 69 : 28;
-                this.updatePosition(30, firstTop);
+            if (!isReadonly && isEmptyShow && isEmptyContent(editor.children)) {
+                var firstElementChild = this.contextService.getFirstElementChild();
+                var offsetTop = firstElementChild.offsetTop;
+                var offsetLeft = firstElementChild.offsetLeft;
+                this.updatePosition(offsetLeft, offsetTop);
                 return;
             }
-            if (isCleanEmptyParagraph(editor)) {
-                var block = slate.Node.ancestor(editor, [(_b = editor === null || editor === void 0 ? void 0 : editor.selection) === null || _b === void 0 ? void 0 : _b.anchor.path[0]]);
-                var rootNode_1 = i1.AngularEditor.toDOMNode(editor, block);
+            if (isMustShow && isCleanEmptyParagraph(editor)) {
                 setTimeout(function () {
-                    _this.updatePosition(rootNode_1.offsetLeft, rootNode_1.offsetTop);
+                    var _a;
+                    var block = slate.Node.ancestor(editor, [(_a = editor === null || editor === void 0 ? void 0 : editor.selection) === null || _a === void 0 ? void 0 : _a.anchor.path[0]]);
+                    var rootNode = i1.AngularEditor.toDOMNode(editor, block);
+                    _this.updatePosition(rootNode.offsetLeft, rootNode.offsetTop);
                 });
                 return;
             }
@@ -12248,7 +12421,7 @@
         };
         return ThePlaceholderComponent;
     }());
-    ThePlaceholderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: ThePlaceholderComponent, deps: [{ token: i0__namespace.Renderer2 }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ThePlaceholderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: ThePlaceholderComponent, deps: [{ token: i0__namespace.Renderer2 }, { token: i0__namespace.ElementRef }, { token: TheContextService }], target: i0__namespace.ɵɵFactoryTarget.Component });
     ThePlaceholderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: ThePlaceholderComponent, selector: "div[thePlaceholder]", inputs: { editor: "editor", options: "options" }, host: { listeners: { "document:compositionstart": "handleCompositionStart()", "document:compositionend": "handleCompositionEnd($event)" }, properties: { "class.hide": "isHide" }, classAttribute: "the-placeholder" }, ngImport: i0__namespace, template: "{{ options?.placeholder }}", isInline: true });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: ThePlaceholderComponent, decorators: [{
                 type: i0.Component,
@@ -12260,7 +12433,7 @@
                             '[class.hide]': 'isHide'
                         }
                     }]
-            }], ctorParameters: function () { return [{ type: i0__namespace.Renderer2 }, { type: i0__namespace.ElementRef }]; }, propDecorators: { editor: [{
+            }], ctorParameters: function () { return [{ type: i0__namespace.Renderer2 }, { type: i0__namespace.ElementRef }, { type: TheContextService }]; }, propDecorators: { editor: [{
                     type: i0.Input
                 }], options: [{
                     type: i0.Input
@@ -12438,6 +12611,12 @@
             _this.onSlaCompositionEnd = function (event) { };
             _this.onSlaDragStart = function (event) { };
             _this.onSlaDragOver = function (event) { };
+            _this.onDrop = function (event) {
+                event.stopPropagation();
+                _this.theOnDOMEvent.emit({
+                    nativeEvent: event
+                });
+            };
             return _this;
         }
         Object.defineProperty(TheEditorComponent.prototype, "theGlobalToolbarInstance", {
@@ -12468,15 +12647,18 @@
             this.onErrorHandler();
         };
         TheEditorComponent.prototype.ngOnChanges = function (changes) {
-            var _a, _b, _c;
+            var _a, _b, _c, _d, _e;
             var 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))) {
                 slate.Transforms.deselect(this.editor);
             }
         };
@@ -12494,7 +12676,9 @@
             this.theContextService.initialize({ nativeElement: this.elementRef.nativeElement, viewContainerRef: this.viewContainerRef });
             this.toolbarCalculate();
             setTimeout(function () {
+                var _a;
                 _this.theEditorCreated.emit(_this.editor);
+                (_a = _this.placeholderInstance) === null || _a === void 0 ? void 0 : _a.checkStatus();
                 _this.applyAutoFocus();
             });
         };
@@ -12510,9 +12694,9 @@
             }
         };
         TheEditorComponent.prototype.applyAutoFocus = function () {
-            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);
             }
         };
         TheEditorComponent.prototype.toolbarCalculate = function () {
@@ -12544,14 +12728,14 @@
             this.onTouchedCallback = fn;
         };
         TheEditorComponent.prototype.valueChange = function (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
-            var scrollContainer = (_c = this.theOptions) === null || _c === void 0 ? void 0 : _c.scrollContainer;
-            var 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)) {
+            var scrollContainer = (_d = this.theOptions) === null || _d === void 0 ? void 0 : _d.scrollContainer;
+            var maxHeight = (_e = this.theOptions) === null || _e === void 0 ? void 0 : _e.maxHeight;
+            if (!((_f = this.theOptions) === null || _f === void 0 ? void 0 : _f.readonly) && (scrollContainer || maxHeight)) {
                 var container = maxHeight ? DEFAULT_SCROLL_CONTAINER : scrollContainer;
                 this.autoScrollView(this.editor, container);
             }
@@ -12627,18 +12811,18 @@
             }
         };
         TheEditorComponent.prototype.handleSelectAll = function () {
-            var _f;
+            var _g;
             var node;
             if (!this.editor.selection) {
                 setEndSelection(this.editor);
             }
-            var _g = __read(slate.Range.edges(this.editor.selection), 2), start = _g[0], end = _g[1];
+            var _h = __read(slate.Range.edges(this.editor.selection), 2), start = _h[0], end = _h[1];
             var selectionRange = slate.Editor.range(this.editor, start, end);
             var containerBlocks = getContainerBlocks(this.editor);
             for (var i = 0; i < containerBlocks.length; i++) {
-                _f = __read(getNodesByType(this.editor, containerBlocks[i]), 1), node = _f[0];
+                _g = __read(getNodesByType(this.editor, containerBlocks[i]), 1), node = _g[0];
                 if (node) {
-                    var _h = __read(node, 2), path = _h[1];
+                    var _j = __read(node, 2), path = _j[1];
                     var isStartParent = slate.Path.equals(path, start.path.slice(0, path.length));
                     var isEndParent = slate.Path.equals(path, end.path.slice(0, path.length));
                     if (isStartParent && isEndParent) {
@@ -12681,7 +12865,7 @@
                 useExisting: i0.forwardRef(function () { return TheEditorComponent; }),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "templateInstance", first: true, predicate: ["templateInstance"], descendants: true, static: true }, { propertyName: "globalToolbarInstance", first: true, predicate: ["globalToolbar"], descendants: true }, { propertyName: "quickInsertInstance", first: true, predicate: ["quickInsert"], descendants: true, static: true }, { propertyName: "placeholderInstance", first: true, predicate: ["placeholder"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<the-toolbar\n    *ngIf=\"!theOptions?.readonly && !theGlobalToolbar\"\n    [ngClass]=\"{\n        'the-toolbar-disabled': theOptions?.disabled\n    }\"\n    #globalToolbar\n    [editor]=\"editor\"\n    [toolbarItems]=\"toolbarEntity.global\"\n    [containerClass]=\"globalToolbarClass\"\n    [align]=\"theOptions?.toolbar?.align\"\n></the-toolbar>\n\n<div\n    class=\"the-editable-container\"\n    [ngClass]=\"{\n        'the-editor-disabled': theOptions?.disabled,\n        'max-height': maxHeight\n    }\"\n    [ngStyle]=\"{ 'max-height': maxHeight }\"\n>\n    <slate-editable\n        class=\"the-editor-typo\"\n        [editor]=\"editor\"\n        [ngModel]=\"editorValue\"\n        (ngModelChange)=\"valueChange($event)\"\n        [decorate]=\"decorate\"\n        [renderElement]=\"renderElement\"\n        [renderText]=\"renderText\"\n        [renderLeaf]=\"renderLeaf\"\n        [readonly]=\"theOptions?.readonly || theOptions?.disabled\"\n        [keydown]=\"onKeyDown\"\n        [click]=\"onClick\"\n        [paste]=\"onSlaPaste\"\n        [beforeInput]=\"onSlaBeforeInput\"\n        [blur]=\"onSlaBlur\"\n        [focus]=\"onSlaFocus\"\n        [copy]=\"onSlaCopy\"\n        [cut]=\"onSlaCut\"\n        [isStrictDecorate]=\"false\"\n        [compositionStart]=\"onSlaCompositionStart\"\n        [compositionEnd]=\"onSlaCompositionEnd\"\n        [dragStart]=\"onSlaDragStart\"\n        [dragOver]=\"onSlaDragOver\"\n        (mousedown)=\"mousedown($event)\"\n    ></slate-editable>\n    <the-inline-toolbar *ngIf=\"!theOptions?.readonly\" [editor]=\"editor\" [toolbarItems]=\"toolbarEntity.inline\"></the-inline-toolbar>\n    <div #quickInsert theQuickInsert [editor]=\"editor\" [quickToolbarItems]=\"quickToolbarItems\"></div>\n    <div #placeholder thePlaceholder [editor]=\"editor\" [options]=\"theOptions\"></div>\n    <the-template #templateInstance></the-template>\n</div>\n", components: [{ type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }, { type: i1__namespace.SlateEditableComponent, selector: "slate-editable", inputs: ["editor", "renderElement", "renderLeaf", "renderText", "decorate", "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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+        ], viewQueries: [{ propertyName: "templateInstance", first: true, predicate: ["templateInstance"], descendants: true, static: true }, { propertyName: "globalToolbarInstance", first: true, predicate: ["globalToolbar"], descendants: true }, { propertyName: "quickInsertInstance", first: true, predicate: ["quickInsert"], descendants: true, static: true }, { propertyName: "placeholderInstance", first: true, predicate: ["placeholder"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace, template: "<the-toolbar\n    *ngIf=\"!theOptions?.readonly && !theGlobalToolbar\"\n    [ngClass]=\"{\n        'the-toolbar-disabled': theOptions?.disabled\n    }\"\n    #globalToolbar\n    [editor]=\"editor\"\n    [toolbarItems]=\"toolbarEntity.global\"\n    [containerClass]=\"globalToolbarClass\"\n    [align]=\"theOptions?.toolbar?.align\"\n></the-toolbar>\n\n<div\n    class=\"the-editable-container\"\n    [ngClass]=\"{\n        'the-editor-disabled': theOptions?.disabled,\n        'max-height': maxHeight\n    }\"\n    [ngStyle]=\"{ 'max-height': maxHeight }\"\n>\n    <slate-editable\n        class=\"the-editor-typo\"\n        [editor]=\"editor\"\n        [ngModel]=\"editorValue\"\n        (ngModelChange)=\"valueChange($event)\"\n        [decorate]=\"decorate\"\n        [renderElement]=\"renderElement\"\n        [renderText]=\"renderText\"\n        [renderLeaf]=\"renderLeaf\"\n        [readonly]=\"theOptions?.readonly || theOptions?.disabled\"\n        [keydown]=\"onKeyDown\"\n        [click]=\"onClick\"\n        [paste]=\"onSlaPaste\"\n        [beforeInput]=\"onSlaBeforeInput\"\n        [blur]=\"onSlaBlur\"\n        [focus]=\"onSlaFocus\"\n        [copy]=\"onSlaCopy\"\n        [cut]=\"onSlaCut\"\n        [isStrictDecorate]=\"false\"\n        [compositionStart]=\"onSlaCompositionStart\"\n        [compositionEnd]=\"onSlaCompositionEnd\"\n        [dragStart]=\"onSlaDragStart\"\n        [dragOver]=\"onSlaDragOver\"\n        [drop]=\"onDrop\"\n        (mousedown)=\"mousedown($event)\"\n    ></slate-editable>\n    <the-inline-toolbar *ngIf=\"!theOptions?.readonly\" [editor]=\"editor\" [toolbarItems]=\"toolbarEntity.inline\"></the-inline-toolbar>\n    <div #quickInsert theQuickInsert [editor]=\"editor\" [quickToolbarItems]=\"quickToolbarItems\"></div>\n    <div #placeholder thePlaceholder [editor]=\"editor\" [options]=\"theOptions\"></div>\n    <the-template #templateInstance></the-template>\n</div>\n", components: [{ type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }, { type: i1__namespace.SlateEditableComponent, selector: "slate-editable", inputs: ["editor", "renderElement", "renderLeaf", "renderText", "decorate", "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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4__namespace$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4__namespace$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0__namespace, type: TheEditorComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -13036,13 +13220,13 @@
     exports.A_TAG_REL_ATTR = A_TAG_REL_ATTR;
     exports.AlignEditor = AlignEditor;
     exports.BLOCK_DELETEBACKWARD_TYPES = BLOCK_DELETEBACKWARD_TYPES;
-    exports.BLOCK_INSERT_ORIGIN = BLOCK_INSERT_ORIGIN;
     exports.BlockquoteEditor = BlockquoteEditor;
     exports.CLIPBOARD_FORMAT_KEY = CLIPBOARD_FORMAT_KEY;
     exports.CODEMIRROR_PADDING_TOP = CODEMIRROR_PADDING_TOP;
     exports.CODE_MODES = CODE_MODES;
     exports.COMPONENTS = COMPONENTS;
     exports.CONTAINER_BLOCKS = CONTAINER_BLOCKS;
+    exports.CONTROL_KEY = CONTROL_KEY;
     exports.CodeEditor = CodeEditor;
     exports.CodeMode = CodeMode;
     exports.ColorEditor = ColorEditor;
@@ -13056,6 +13240,7 @@
     exports.HEADING_TYPES = HEADING_TYPES;
     exports.HeadingEditor = HeadingEditor;
     exports.HrEditor = HrEditor;
+    exports.IS_MAC = IS_MAC;
     exports.ImageEditor = ImageEditor;
     exports.LINK_DEFAULT_TEXT = LINK_DEFAULT_TEXT;
     exports.LIST_BLOCK_TYPES = LIST_BLOCK_TYPES;