@worktile/theia 1.2.6 → 1.2.10

package/fesm2015/worktile-theia.js

@@ -5,7 +5,7 @@ import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i4$2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import * as i1 from 'slate-angular';
-import { BaseTextComponent, BaseElementComponent, NODE_TO_PARENT, NODE_TO_INDEX, AngularEditor, IS_SAFARI, hotkeys, getPlainText as getPlainText$1, hasBlockCard, isCardLeft, ELEMENT_TO_COMPONENT, withAngular, SlateModule } 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';
@@ -32,31 +32,32 @@ import * as i5 from 'ngx-tethys/input';
 import { ThyInputModule } from 'ngx-tethys/input';
 import * as i2 from 'ngx-tethys/nav';
 import { ThyNavModule } from 'ngx-tethys/nav';
-import * as i5$1 from 'ngx-tethys/tooltip';
+import * as i7 from 'ngx-tethys/tooltip';
 import { ThyTooltipModule } from 'ngx-tethys/tooltip';
-import * as i5$3 from 'ng-codemirror';
+import * as i5$2 from 'ng-codemirror';
 import { CodeMirrorComponent, CodemirrorModule } from 'ng-codemirror';
 import * as i1$4 from 'ngx-tethys/notify';
 import { ThyNotifyModule } from 'ngx-tethys/notify';
-import * as i5$2 from 'ngx-tethys/action-menu';
+import * as i5$1 from 'ngx-tethys/action-menu';
 import { ThyActionMenuModule } from 'ngx-tethys/action-menu';
 import isUrl from 'is-url';
 import * as i1$5 from 'ngx-tethys/button';
 import { ThyButtonModule } from 'ngx-tethys/button';
 import * as i2$2 from 'ngx-tethys/form';
 import { ThyFormModule } from 'ngx-tethys/form';
-import * as i5$4 from 'ngx-tethys/shared';
+import * as i5$3 from 'ngx-tethys/shared';
 import { ThySharedModule } from 'ngx-tethys/shared';
 import * as i1$6 from 'ngx-tethys';
 import { coerceCssPixelValue } from '@angular/cdk/coercion';
 import { PortalInjector, ComponentPortal } from '@angular/cdk/portal';
+import * as i2$3 from 'ngx-tethys/list';
+import { ThyListModule } from 'ngx-tethys/list';
 import { ThyAutocompleteModule } from 'ngx-tethys/autocomplete';
 import { ThyAvatarModule } from 'ngx-tethys/avatar';
-import { ThyListModule } from 'ngx-tethys/list';
 import { ThySelectModule } from 'ngx-tethys/select';
 
 const PICTURE_ACCEPTED_UPLOAD_MIME = ['image/png', 'image/jpeg', 'image/gif', 'image/bmp'];
-const PICTURE_ACCEPTED_UPLOAD_SIZE = 10;
+const PICTURE_ACCEPTED_UPLOAD_SIZE = 20;
 const A_TAG_REL_ATTR = 'noopener noreferrer nofollow external ugc';
 const LINK_DEFAULT_TEXT = '链接';
 const TAB_SPACE = '    ';
@@ -121,7 +122,6 @@ var MarkTypes;
 var ToolbarActionTypes;
 (function (ToolbarActionTypes) {
     ToolbarActionTypes["split"] = "split";
-    ToolbarActionTypes["save"] = "save";
     ToolbarActionTypes["undo"] = "undo";
     ToolbarActionTypes["redo"] = "redo";
     ToolbarActionTypes["paintformat"] = "paintformat";
@@ -163,12 +163,17 @@ const VOID_BLOCK_TYPES = [ElementKinds.image, ElementKinds.hr];
 const BLOCK_DELETEBACKWARD_TYPES = [ElementKinds.tableCell];
 
 const TheToolbarGroupToken = new InjectionToken('the-toolbar-group-token');
-const BLOCK_TOOLBAR_HOTKEY = '/';
+const QUICK_TOOLBAR_HOTKEY = '/';
 var DropdownMode;
 (function (DropdownMode) {
     DropdownMode["icon"] = "icon-mode";
     DropdownMode["text"] = "text-mode";
 })(DropdownMode || (DropdownMode = {}));
+var ToolbarItemMode;
+(function (ToolbarItemMode) {
+    ToolbarItemMode[ToolbarItemMode["horizontal"] = 0] = "horizontal";
+    ToolbarItemMode[ToolbarItemMode["vertical"] = 1] = "vertical";
+})(ToolbarItemMode || (ToolbarItemMode = {}));
 const DefaultGlobalToolbarDefinition = [
     ElementKinds.headingList,
     ToolbarActionTypes.split,
@@ -185,15 +190,43 @@ const DefaultGlobalToolbarDefinition = [
     ToolbarActionTypes.split,
     ElementKinds.numberedList,
     ElementKinds.bulletedList,
+    ElementKinds.checkItem,
+    ToolbarActionTypes.split,
+    ElementKinds.link,
+    ElementKinds.image,
+    ElementKinds.table,
+    ElementKinds.blockquote,
+    ElementKinds.code
+];
+const DefaultInlineToolbarDefinition = [
+    ToolbarActionTypes.clean,
+    ToolbarActionTypes.split,
+    MarkTypes.bold,
+    MarkTypes.italic,
+    MarkTypes.underline,
+    MarkTypes.strike,
+    MarkTypes.codeLine,
+    MarkTypes.color,
+    MarkTypes.backgroundColor,
+    ToolbarActionTypes.split,
+    ToolbarActionTypes.alignType,
+    ToolbarActionTypes.split,
+    ElementKinds.link
+];
+const DefaultQuickToolbarDefinition = [
+    ...STANDARD_HEADING_TYPES,
+    ToolbarActionTypes.split,
+    ElementKinds.numberedList,
+    ElementKinds.bulletedList,
+    ElementKinds.checkItem,
     ToolbarActionTypes.split,
     ElementKinds.link,
     ElementKinds.image,
     ElementKinds.table,
     ElementKinds.blockquote,
+    ElementKinds.hr,
     ElementKinds.code
 ];
-const DefaultInlineToolbarDefinition = [];
-const DefaultBlockToolbarDefinition = [ElementKinds.image];
 const ToolbarMoreGroup = {
     key: 'more',
     icon: 'more'
@@ -273,17 +306,17 @@ const CODE_MODES = [
         value: 'htmlmixed'
     }
 ];
-const EditorMode = {
+const CodeMode = {
     default: 'default',
     print: 'print'
 };
-class TheEditorConfig {
+class TheCodeMode {
 }
-const THE_EDITOR_CONFIG_TOKEN = new InjectionToken('the-editor-config');
-const THE_EDITOR_CONFIG_PROVIDER = {
-    provide: THE_EDITOR_CONFIG_TOKEN,
+const THE_CODE_MODE_TOKEN = new InjectionToken('the-code-mode');
+const THE_CODE_MODE_PROVIDER = {
+    provide: THE_CODE_MODE_TOKEN,
     useValue: {
-        mode: EditorMode.default
+        mode: CodeMode.default
     }
 };
 const CODEMIRROR_PADDING_TOP = 10;
@@ -370,6 +403,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                 }]
         }] });
 
+const TheEditor = Object.assign({}, AngularEditor);
+var TheDataMode;
+(function (TheDataMode) {
+    TheDataMode["json"] = "json";
+    TheDataMode["html"] = "html";
+})(TheDataMode || (TheDataMode = {}));
+
+var ToolbarItemType;
+(function (ToolbarItemType) {
+    ToolbarItemType["default"] = "default";
+    ToolbarItemType["toolDropdown"] = "tool-dropdown";
+})(ToolbarItemType || (ToolbarItemType = {}));
+var ToolbarAlignment;
+(function (ToolbarAlignment) {
+    ToolbarAlignment["left"] = "start";
+    ToolbarAlignment["center"] = "center";
+    ToolbarAlignment["right"] = "end";
+})(ToolbarAlignment || (ToolbarAlignment = {}));
+
+const THE_UPLOAD_SERVICE_TOKEN = new InjectionToken('THE_UPLOAD_SERVICE_TOKEN');
+
+const inValidTypes = [
+    ElementKinds.table,
+    ElementKinds.tableCell,
+    ElementKinds.blockquote,
+    ElementKinds.hr,
+    ElementKinds.code
+];
+const DefaultElementOptions = [
+    {
+        type: ElementKinds.bulletedList,
+        inValidChildrenTypes: [...inValidTypes, ...HEADING_TYPES]
+    },
+    {
+        type: ElementKinds.numberedList,
+        inValidChildrenTypes: [...inValidTypes, ...HEADING_TYPES]
+    },
+    {
+        type: ElementKinds.listItem,
+        inValidChildrenTypes: [...inValidTypes, ...HEADING_TYPES]
+    },
+    {
+        type: ElementKinds.blockquote,
+        inValidChildrenTypes: inValidTypes
+    },
+    {
+        type: ElementKinds.table,
+        inValidChildrenTypes: [ElementKinds.table]
+    },
+    {
+        type: ElementKinds.tableCell,
+        inValidChildrenTypes: [ElementKinds.table, ElementKinds.tableCell]
+    }
+];
+
+function idCreator(length = 5) {
+    // remove numeral
+    const $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz'; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
+    const maxPosition = $chars.length;
+    let key = '';
+    for (let i = 0; i < length; i++) {
+        key += $chars.charAt(Math.floor(Math.random() * maxPosition));
+    }
+    return key;
+}
+
 const isAncestor = (node) => Element$1.isElement(node) || Editor.isEditor(node);
 
 const getLastChild$1 = (node, level) => {
@@ -937,7 +1036,7 @@ const getEndBlock = (editor, fragment) => {
     }
     return fragment;
 };
-const extractFragment = (data, deleteKey) => {
+const extractFragment = (data, deleteKey = ELEMENT_UNIQUE_ID) => {
     const fragment = data.getData(`application/${CLIPBOARD_FORMAT_KEY}`);
     if (fragment) {
         const decoded = decodeURIComponent(window.atob(fragment));
@@ -1078,69 +1177,70 @@ const isContainer = (editor, value) => Element$1.isElement(value) && editor.isCo
 const getContainerBlocks = (editor) => {
     const containerNode = Editor.above(editor, {
         match: (node) => {
-            return Element$1.isElement(node) && TheEditor.isContainer(editor, node) && !CONTAINER_BLOCKS.includes(node.type);
+            return Element$1.isElement(node) && isContainer(editor, node) && !CONTAINER_BLOCKS.includes(node.type);
         }
     });
     return !containerNode ? CONTAINER_BLOCKS : [...CONTAINER_BLOCKS, containerNode[0].type];
 };
 
-const TheQueries = {
-    getLastNode,
-    getAnchorBlockEntry,
-    getAboveByType,
-    getNodes,
-    getNodesByType,
-    getBlockAbove,
-    getPreviousPath,
-    getNode,
-    getParent,
-    getLastChild,
-    getLastChildPath,
-    getNextSiblingNodes,
-    getAbove,
-    getChildren,
-    getPointBefore,
-    getSelectionNodesByType,
-    getText,
-    getPointFromLocation,
-    getRangeFromBlockStart,
-    getRangeBefore,
-    getBlockCardCenterCursor,
-    getBlockCardAbove,
-    getPlainText,
-    getSelectionMarks,
-    getContainerBlocks,
-    isAncestor,
-    isCollapsed,
-    isEmptyParagraph,
-    isParagraph,
-    isBlockActive,
-    isIncludeTypes,
-    isAncestorEmpty,
-    isBlockAboveEmpty,
-    isNodeTypeIn,
-    isFirstChild,
-    isPointAtRoot,
-    isRangeAtRoot,
-    isBlockTextEmptyAfterSelection,
-    isStart,
-    isRangeAcrossBlocks,
-    isDescendant,
-    isNodeType,
-    isAcrossBlocks,
-    isBlockCardCursor,
-    isEmptyContent,
-    isEmptyParagraphByPath,
-    isContainer,
-    anchorBlock,
-    anchorBlockEntry,
-    anchorInlineEntry,
-    anchorInline,
-    findPath,
-    findNode,
-    findDescendant,
-    someNode
-};
+var index$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    getLastNode: getLastNode,
+    getAnchorBlockEntry: getAnchorBlockEntry,
+    getAboveByType: getAboveByType,
+    getNodes: getNodes,
+    getNodesByType: getNodesByType,
+    getBlockAbove: getBlockAbove,
+    getPreviousPath: getPreviousPath,
+    getNode: getNode,
+    getParent: getParent,
+    getLastChild: getLastChild,
+    getLastChildPath: getLastChildPath,
+    getNextSiblingNodes: getNextSiblingNodes,
+    getAbove: getAbove,
+    getChildren: getChildren,
+    getPointBefore: getPointBefore,
+    getSelectionNodesByType: getSelectionNodesByType,
+    getText: getText,
+    getPointFromLocation: getPointFromLocation,
+    getRangeFromBlockStart: getRangeFromBlockStart,
+    getRangeBefore: getRangeBefore,
+    getBlockCardCenterCursor: getBlockCardCenterCursor,
+    getBlockCardAbove: getBlockCardAbove,
+    getPlainText: getPlainText,
+    getSelectionMarks: getSelectionMarks,
+    getContainerBlocks: getContainerBlocks,
+    isAncestor: isAncestor,
+    isCollapsed: isCollapsed,
+    isEmptyParagraph: isEmptyParagraph,
+    isParagraph: isParagraph,
+    isBlockActive: isBlockActive,
+    isIncludeTypes: isIncludeTypes,
+    isAncestorEmpty: isAncestorEmpty,
+    isBlockAboveEmpty: isBlockAboveEmpty,
+    isNodeTypeIn: isNodeTypeIn,
+    isFirstChild: isFirstChild,
+    isPointAtRoot: isPointAtRoot,
+    isRangeAtRoot: isRangeAtRoot,
+    isBlockTextEmptyAfterSelection: isBlockTextEmptyAfterSelection,
+    isStart: isStart,
+    isRangeAcrossBlocks: isRangeAcrossBlocks,
+    isDescendant: isDescendant,
+    isNodeType: isNodeType,
+    isAcrossBlocks: isAcrossBlocks,
+    isBlockCardCursor: isBlockCardCursor,
+    isEmptyContent: isEmptyContent,
+    isEmptyParagraphByPath: isEmptyParagraphByPath,
+    isContainer: isContainer,
+    anchorBlock: anchorBlock,
+    anchorBlockEntry: anchorBlockEntry,
+    anchorInlineEntry: anchorInlineEntry,
+    anchorInline: anchorInline,
+    findPath: findPath,
+    findNode: findNode,
+    findDescendant: findDescendant,
+    someNode: someNode
+});
 
 const setMarks = (editor, marks, at) => {
     Transforms.setNodes(editor, marks, {
@@ -1176,8 +1276,8 @@ const insertElementNext = (editor, node) => {
     if (Range.isExpanded(editor.selection)) {
         Editor.deleteFragment(editor);
     }
-    const anchorBlockPath = TheQueries.anchorBlockEntry(editor)[1];
-    const isEmpty = TheQueries.isEmptyParagraph(editor);
+    const anchorBlockPath = anchorBlockEntry(editor)[1];
+    const isEmpty = isEmptyParagraph(editor);
     const nextPath = Path.next([anchorBlockPath[0]]);
     Transforms.insertNodes(editor, node, { at: nextPath });
     if (isEmpty && anchorBlockPath.length === 1) {
@@ -1190,7 +1290,7 @@ const insertElementNext = (editor, node) => {
 };
 
 const setNode = (editor, props, origin) => {
-    Transforms.setNodes(editor, props, { at: TheQueries.findPath(editor, origin) });
+    Transforms.setNodes(editor, props, { at: findPath(editor, origin) });
 };
 
 /**
@@ -1208,7 +1308,7 @@ const onKeyDownResetBlockType = ({ rules }) => (event, editor) => {
     if (editor.selection && isCollapsed(editor.selection)) {
         rules.forEach(({ types, defaultType, hotkey, predicate, onReset }) => {
             if (!event || (hotkey && isHotkey(hotkey, event))) {
-                if (predicate(editor) && TheQueries.isNodeTypeIn(editor, types)) {
+                if (predicate(editor) && isNodeTypeIn(editor, types)) {
                     if (event !== null) {
                         event.preventDefault();
                     }
@@ -1233,7 +1333,7 @@ const moveChildren = (editor, { at, to, match, start = 0 }) => {
         return moved;
     for (let i = parentNode.children.length - 1; i >= start; i--) {
         const childPath = [...parentPath, i];
-        const childNode = TheQueries.getNode(editor, childPath);
+        const childNode = getNode(editor, childPath);
         if (!match || (childNode && match([childNode, childPath]))) {
             Transforms.moveNodes(editor, { at: childPath, to });
             moved++;
@@ -1242,17 +1342,6 @@ const moveChildren = (editor, { at, to, match, start = 0 }) => {
     return moved;
 };
 
-function idCreator(length = 5) {
-    // remove numeral
-    const $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz'; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
-    const maxPosition = $chars.length;
-    let key = '';
-    for (let i = 0; i < length; i++) {
-        key += $chars.charAt(Math.floor(Math.random() * maxPosition));
-    }
-    return key;
-}
-
 const createEmptyParagraph = () => {
     return {
         type: ElementKinds.paragraph,
@@ -1274,7 +1363,7 @@ const insertParagraph = (editor, at) => {
  */
 const applyDeepToNodes = ({ node, source, apply, query }) => {
     const entry = [node, []];
-    if (TheQueries.isNodeType(entry, query)) {
+    if (isNodeType(entry, query)) {
         if (source instanceof Function) {
             apply(node, source());
         }
@@ -1282,7 +1371,7 @@ const applyDeepToNodes = ({ node, source, apply, query }) => {
             apply(node, source);
         }
     }
-    if (!TheQueries.isAncestor(node)) {
+    if (!isAncestor(node)) {
         return;
     }
     node.children.forEach((child) => {
@@ -1309,7 +1398,7 @@ const unWrap = (editor, kind) => {
 
 const splitNode = (editor, indivisibleTypes) => {
     const { selection } = editor;
-    const indivisibleType = indivisibleTypes && indivisibleTypes.find(item => TheQueries.getAboveByType(editor, item, { mode: 'highest' }));
+    const indivisibleType = indivisibleTypes && indivisibleTypes.find(item => getAboveByType(editor, item, { mode: 'highest' }));
     let splitPath;
     if (!indivisibleType) {
         Transforms.splitNodes(editor, {
@@ -1324,7 +1413,7 @@ const splitNode = (editor, indivisibleTypes) => {
             mode: 'highest',
             match: (data) => {
                 if (data.type && !indivisibleTypes.includes(data.type)) {
-                    const [node] = TheQueries.getNodesByType(editor, data.type, { at: selection });
+                    const [node] = getNodesByType(editor, data.type, { at: selection });
                     const parentNode = Editor.parent(editor, node[1]);
                     if (indivisibleTypes.includes(parentNode[0].type)) {
                         splitPath = node[1];
@@ -1338,7 +1427,7 @@ const splitNode = (editor, indivisibleTypes) => {
 };
 
 const deleteElement = (editor, element) => {
-    const at = TheQueries.findPath(editor, element);
+    const at = findPath(editor, element);
     Transforms.insertNodes(editor, createEmptyParagraph(), { at });
     AngularEditor.focus(editor);
     Transforms.select(editor, at);
@@ -1356,11 +1445,11 @@ const insertTheElements = (editor, nodes) => {
     if (Range.isExpanded(editor.selection)) {
         Editor.deleteFragment(editor);
     }
-    const isEmptyParagraph = TheQueries.isEmptyParagraph(editor, editor.selection.anchor);
+    const isEmptyParagraph$1 = isEmptyParagraph(editor, editor.selection.anchor);
     const parentPath = Path.parent(editor.selection.anchor.path);
     Editor.withoutNormalizing(editor, () => {
         Transforms.insertNodes(editor, nodes);
-        if (parentPath.length && isEmptyParagraph) {
+        if (parentPath.length && isEmptyParagraph$1) {
             Transforms.delete(editor, { at: parentPath });
             const lastPath = parentPath.pop();
             Transforms.select(editor, Editor.end(editor, [...parentPath, lastPath + nodes.length - 1]));
@@ -1374,6 +1463,7 @@ const insertTheElements = (editor, nodes) => {
 
 const THE_EDITOR_UUID = new WeakMap();
 const THE_EDITOR_CONVERSION_HINT_REF = new WeakMap();
+const THE_EDITOR_QUICK_TOOLBAR_REF = new WeakMap();
 
 const closeConversionHint = (editor) => {
     const hintRef = THE_EDITOR_CONVERSION_HINT_REF.get(editor);
@@ -1382,74 +1472,64 @@ const closeConversionHint = (editor) => {
     }
 };
 
-const TheTransforms = {
-    setMarks,
-    clearMarks,
-    insertElement,
-    insertElementNext,
-    insertParagraph,
-    setNode,
-    unwrapNodesByType,
-    onKeyDownResetBlockType,
-    moveChildren,
-    applyDeepToNodes,
-    mergeDeepToNodes,
-    unWrap,
-    splitNode,
-    deleteElement,
-    setEndSelection,
-    insertTheElements,
-    closeConversionHint
-};
-
-const TheEditor = Object.assign(Object.assign(Object.assign({}, AngularEditor), TheQueries), TheTransforms);
-var TheDataMode;
-(function (TheDataMode) {
-    TheDataMode["json"] = "json";
-    TheDataMode["html"] = "html";
-})(TheDataMode || (TheDataMode = {}));
-
-var ToolbarItemType;
-(function (ToolbarItemType) {
-    ToolbarItemType["default"] = "default";
-    ToolbarItemType["toolDropdown"] = "tool-dropdown";
-})(ToolbarItemType || (ToolbarItemType = {}));
-var ToolbarAlignment;
-(function (ToolbarAlignment) {
-    ToolbarAlignment["left"] = "start";
-    ToolbarAlignment["center"] = "center";
-    ToolbarAlignment["right"] = "end";
-})(ToolbarAlignment || (ToolbarAlignment = {}));
-
-const THE_UPLOAD_SERVICE_TOKEN = new InjectionToken('THE_UPLOAD_SERVICE_TOKEN');
+function handleContinualDeleteBackward(editor, aboveResult, type) {
+    const highestBlock = aboveResult[0];
+    const lowestBlock = anchorBlock(editor);
+    const wrapBlockType = highestBlock.type;
+    if (lowestBlock && Editor.isStart(editor, editor.selection.anchor, aboveResult[1])) {
+        if (wrapBlockType === type) {
+            if (highestBlock.children[0] === lowestBlock) {
+                unWrap(editor, wrapBlockType);
+                return true;
+            }
+        }
+    }
+    return false;
+}
 
-const inValidTypes = [ElementKinds.table, ElementKinds.tableCell, ElementKinds.blockquote, ElementKinds.hr, ElementKinds.code];
-const DefaultElementOptions = [
-    {
-        type: ElementKinds.bulletedList,
-        inValidChildrenTypes: [...inValidTypes, ...HEADING_TYPES]
-    },
-    {
-        type: ElementKinds.numberedList,
-        inValidChildrenTypes: [...inValidTypes, ...HEADING_TYPES]
-    },
-    {
-        type: ElementKinds.listItem,
-        inValidChildrenTypes: [...inValidTypes, ...HEADING_TYPES]
-    },
-    {
-        type: ElementKinds.blockquote,
-        inValidChildrenTypes: inValidTypes
-    },
-    {
-        type: ElementKinds.table,
-        inValidChildrenTypes: [ElementKinds.table]
-    },
-    {
-        type: ElementKinds.tableCell,
-        inValidChildrenTypes: [ElementKinds.table, ElementKinds.tableCell]
+function handleContinualInsertBreak(editor, lowestBlock, type) {
+    const isEmpty = Editor.isEmpty(editor, lowestBlock);
+    const isEnd = Editor.isEnd(editor, editor.selection.anchor, editor.selection.focus.path);
+    const aboveResult = Editor.above(editor, {
+        match: n => Editor.isBlock(editor, n) && n.type === type
+    });
+    if (isEnd) {
+        editor.marks = {};
+    }
+    if (aboveResult && aboveResult[0] && isEnd && isEmpty) {
+        const wrapBlock = aboveResult[0];
+        if (wrapBlock.type === type) {
+            if (wrapBlock.children[wrapBlock.children.length - 1] === lowestBlock) {
+                unWrap(editor, wrapBlock.type);
+                return true;
+            }
+        }
     }
-];
+    return false;
+}
+
+var index = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    setMarks: setMarks,
+    clearMarks: clearMarks,
+    insertElement: insertElement,
+    insertElementNext: insertElementNext,
+    insertParagraph: insertParagraph,
+    setNode: setNode,
+    unwrapNodesByType: unwrapNodesByType,
+    onKeyDownResetBlockType: onKeyDownResetBlockType,
+    moveChildren: moveChildren,
+    applyDeepToNodes: applyDeepToNodes,
+    mergeDeepToNodes: mergeDeepToNodes,
+    unWrap: unWrap,
+    splitNode: splitNode,
+    deleteElement: deleteElement,
+    setEndSelection: setEndSelection,
+    insertTheElements: insertTheElements,
+    closeConversionHint: closeConversionHint,
+    handleContinualDeleteBackward: handleContinualDeleteBackward,
+    handleContinualInsertBreak: handleContinualInsertBreak
+});
 
 const isNodeTypeList = (n) => {
     return [ElementKinds.bulletedList, ElementKinds.numberedList].includes(n.type);
@@ -1516,8 +1596,8 @@ const ListEditor = {
     },
     unwrapList(editor) {
         Editor.withoutNormalizing(editor, () => {
-            TheTransforms.unwrapNodesByType(editor, [ElementKinds.bulletedList, ElementKinds.numberedList], { split: true, mode: 'all' });
-            TheTransforms.unwrapNodesByType(editor, [ElementKinds.listItem], { split: true, mode: 'all' });
+            unwrapNodesByType(editor, [ElementKinds.bulletedList, ElementKinds.numberedList], { split: true, mode: 'all' });
+            unwrapNodesByType(editor, [ElementKinds.listItem], { split: true, mode: 'all' });
         });
     },
     wrapList(editor, type) {
@@ -1535,11 +1615,11 @@ const ListEditor = {
         });
     },
     isActive(editor, type) {
-        const [match] = TheQueries.getNodesByType(editor, type);
+        const [match] = getNodesByType(editor, type);
         return !!match;
     },
     getActiveList(editor) {
-        const [match] = TheQueries.getNodesByType(editor, LIST_BLOCK_TYPES);
+        const [match] = getNodesByType(editor, LIST_BLOCK_TYPES);
         return match;
     },
     buildListItem(editor) {
@@ -1572,7 +1652,7 @@ const ListEditor = {
 
 const TodoItemEditor = {
     isActive(editor) {
-        const [match] = TheQueries.getNodesByType(editor, ElementKinds.checkItem);
+        const [match] = getNodesByType(editor, ElementKinds.checkItem);
         return !!match;
     },
     insertTodoItem(editor) {
@@ -1600,7 +1680,7 @@ const TodoItemEditor = {
 
 const BlockquoteEditor = {
     toggleBlockquote(editor) {
-        if (!TheQueries.isParagraph(editor)) {
+        if (!isParagraph(editor)) {
             Transforms.insertNodes(editor, {
                 type: ElementKinds.paragraph,
                 mode: 'text',
@@ -1611,7 +1691,7 @@ const BlockquoteEditor = {
                 ]
             });
         }
-        const isActive = TheQueries.isBlockActive(editor, ElementKinds.blockquote);
+        const isActive = isBlockActive(editor, ElementKinds.blockquote);
         if (!isActive) {
             Transforms.wrapNodes(editor, { type: ElementKinds.blockquote, children: [] }, {
                 mode: 'lowest'
@@ -1700,7 +1780,7 @@ const autoFormatRules = [
         type: ElementKinds.listItem,
         markup: [],
         match: (editor) => {
-            return TheQueries.isParagraph(editor) ? ['*', '-', '+'] : [];
+            return isParagraph(editor) ? ['*', '-', '+'] : [];
         },
         format: (editor) => {
             ListEditor.toggleList(editor, ElementKinds.bulletedList);
@@ -1710,7 +1790,7 @@ const autoFormatRules = [
         type: ElementKinds.listItem,
         markup: [],
         match: (editor, textFromBlockStart) => {
-            return TheQueries.isParagraph(editor) && /^-?\d+(\.|\))$/.test(textFromBlockStart) ? [textFromBlockStart] : [];
+            return isParagraph(editor) && /^-?\d+(\.|\))$/.test(textFromBlockStart) ? [textFromBlockStart] : [];
         },
         format: (editor, markup) => {
             let startIndex = 1;
@@ -1727,7 +1807,7 @@ const autoFormatRules = [
         type: ElementKinds.checkItem,
         markup: [],
         match: (editor) => {
-            return TheQueries.isParagraph(editor) ? ['[]'] : [];
+            return isParagraph(editor) ? ['[]'] : [];
         },
         format: (editor) => {
             TodoItemEditor.insertTodoItem(editor);
@@ -1789,7 +1869,7 @@ class TheConversionHintComponent {
     creatCloseTimer() {
         this.closeTimer = setInterval(() => {
             clearInterval(this.closeTimer);
-            TheTransforms.closeConversionHint(this.editor);
+            closeConversionHint(this.editor);
         }, this.duration);
     }
     clearCloseTimer() {
@@ -1879,7 +1959,7 @@ const getToolbarClass = (editor) => {
 const withDeserializeMd = (options) => (editor) => {
     const { insertData, onKeydown } = editor;
     editor.onKeydown = (event) => {
-        TheTransforms.closeConversionHint(editor);
+        closeConversionHint(editor);
         onKeydown(event);
     };
     editor.insertData = (data) => {
@@ -1889,7 +1969,7 @@ const withDeserializeMd = (options) => (editor) => {
         const plainFragment = data.getData('text/plain');
         const slateFragment = data.getData(`application/${CLIPBOARD_FORMAT_KEY}`);
         const oldRange = editor.selection;
-        TheTransforms.closeConversionHint(editor);
+        closeConversionHint(editor);
         if (plainFragment && isMarkdownStynx(plainFragment) && !slateFragment) {
             setTimeout(() => {
                 const overlay = editor.injector.get(Overlay);
@@ -1907,11 +1987,11 @@ const withDeserializeMd = (options) => (editor) => {
                                 const htmlDom = new DOMParser().parseFromString(html, 'text/html');
                                 const fragment = TheiaConverter.convertToTheia(Array.from(htmlDom.body.children));
                                 if (!isUnformatted(fragment)) {
-                                    TheTransforms.closeConversionHint(editor);
+                                    closeConversionHint(editor);
                                     editor.undo();
                                     setTimeout(() => {
                                         Transforms.select(editor, oldRange);
-                                        TheTransforms.insertTheElements(editor, fragment);
+                                        insertTheElements(editor, fragment);
                                         AngularEditor.focus(editor);
                                     });
                                     return;
@@ -1989,13 +2069,13 @@ const withAutoInsertData = (validChildren) => (editor) => {
             allElementOptions = Object.values(extraInfo);
         }
         const indivisibleTypes = allElementOptions.filter(item => item.isIndivisible).map(item => item.type);
-        const fragment = extractFragment(data, ELEMENT_UNIQUE_ID);
+        const fragment = extractFragment(data);
         if (fragment) {
-            if (TheQueries.isAcrossBlocks(editor, fragment) || Editor.isVoid(editor, fragment[0])) {
+            if (isAcrossBlocks(editor, fragment) || Editor.isVoid(editor, fragment[0])) {
                 const { selection } = editor;
                 const [start] = Editor.edges(editor, selection);
                 // query whether there is a node to be verified
-                const tryVerifyNode = allElementOptions.find(item => TheQueries.getAboveByType(editor, item.type, { at: start, mode: 'lowest' }));
+                const tryVerifyNode = allElementOptions.find(item => getAboveByType(editor, item.type, { at: start, mode: 'lowest' }));
                 if (tryVerifyNode) {
                     // is exist invalid element type in fragment
                     const invalidIndex = fragment.findIndex(item => tryVerifyNode.inValidChildrenTypes.includes(item.type));
@@ -2009,7 +2089,7 @@ const withAutoInsertData = (validChildren) => (editor) => {
                                 });
                             }
                             // split node
-                            const path = TheTransforms.splitNode(editor, indivisibleTypes);
+                            const path = splitNode(editor, indivisibleTypes);
                             Transforms.insertNodes(editor, invalidFragmentData, {
                                 at: Path.next(path)
                             });
@@ -2018,10 +2098,10 @@ const withAutoInsertData = (validChildren) => (editor) => {
                     }
                 }
                 Editor.withoutNormalizing(editor, () => {
-                    const isEmptyParagraph = TheQueries.isEmptyParagraph(editor, editor.selection.anchor);
+                    const isEmptyParagraph$1 = isEmptyParagraph(editor, editor.selection.anchor);
                     const emptyPath = Path.parent(editor.selection.anchor.path);
                     Transforms.insertNodes(editor, fragment);
-                    if (isEmptyParagraph) {
+                    if (isEmptyParagraph$1) {
                         Transforms.delete(editor, { at: emptyPath });
                         const lastPath = emptyPath.pop();
                         Transforms.select(editor, [...emptyPath, lastPath + fragment.length - 1]);
@@ -2062,16 +2142,16 @@ const withRemoveEmpty = (editor) => {
     const { deleteBackward, deleteForward } = editor;
     editor.deleteBackward = unit => {
         const { selection } = editor;
-        const anchorBlock = TheQueries.anchorBlock(editor);
-        if (!anchorBlock) {
+        const anchorBlock$1 = anchorBlock(editor);
+        if (!anchorBlock$1) {
             deleteBackward(unit);
             return;
         }
         // delete empty paragraphs or empty headings, the default operation is to delete before the void node
         const parentPath = Path.parent(editor.selection.anchor.path);
-        const isEmptyHeading = HEADING_TYPES.includes(anchorBlock.type) && Editor.isEmpty(editor, anchorBlock);
-        const isEmptyParagraph = TheQueries.isEmptyParagraph(editor, editor.selection.anchor);
-        if ((isEmptyParagraph || isEmptyHeading) &&
+        const isEmptyHeading = HEADING_TYPES.includes(anchorBlock$1.type) && Editor.isEmpty(editor, anchorBlock$1);
+        const isEmptyParagraph$1 = isEmptyParagraph(editor, editor.selection.anchor);
+        if ((isEmptyParagraph$1 || isEmptyHeading) &&
             parentPath[parentPath.length - 1] > 0 &&
             Editor.isVoid(editor, Node.get(editor, Path.previous(parentPath)))) {
             Transforms.delete(editor, { at: editor.selection.anchor.path.slice(0, editor.selection.anchor.path.length - 1) });
@@ -2092,10 +2172,10 @@ const withRemoveEmpty = (editor) => {
         deleteBackward(unit);
     };
     editor.deleteForward = unit => {
-        const anchorBlockEntry = TheQueries.anchorBlockEntry(editor);
-        if (anchorBlockEntry &&
-            TheQueries.isAncestorEmpty(editor, anchorBlockEntry[0]) &&
-            TheQueries.getNode(editor, Path.next(anchorBlockEntry[1]))) {
+        const anchorBlockEntry$1 = anchorBlockEntry(editor);
+        if (anchorBlockEntry$1 &&
+            isAncestorEmpty(editor, anchorBlockEntry$1[0]) &&
+            getNode(editor, Path.next(anchorBlockEntry$1[1]))) {
             const pathRef = Editor.pathRef(editor, Path.parent(editor.selection.anchor.path));
             HistoryEditor.withoutMerging(editor, () => {
                 Transforms.move(editor);
@@ -2113,7 +2193,7 @@ const withResetType = (editor) => {
     editor.onKeydown = (event) => {
         const { selection } = editor;
         if (IS_SAFARI && selection && Range.isCollapsed(selection) && hotkeys.isDeleteBackward(event)) {
-            const blockEntry = TheQueries.getAboveByType(editor, BLOCK_DELETEBACKWARD_TYPES);
+            const blockEntry = getAboveByType(editor, BLOCK_DELETEBACKWARD_TYPES);
             if (blockEntry && blockEntry[0]) {
                 const isStart = Editor.isStart(editor, selection.anchor, blockEntry[1]);
                 if (isStart) {
@@ -2136,6 +2216,7 @@ const withResetType = (editor) => {
 class TheContextService {
     constructor(ngZone) {
         this.ngZone = ngZone;
+        this.fileList = [];
         this.paintFormatStatus = {
             isActive: false,
             marks: {}
@@ -2151,10 +2232,16 @@ class TheContextService {
     }
     getOptions() {
         if (!this.options.width) {
-            this.options.width = this.options.nativeElement.querySelector('.slate-editable-container').offsetWidth - 30;
+            this.options.width = this.options.nativeElement.querySelector('.slate-editable-container').firstElementChild.offsetWidth;
         }
         return this.options;
     }
+    setUploadFileList(file) {
+        this.fileList.push(file);
+    }
+    removeUploadImage(file) {
+        this.fileList.splice(this.fileList.findIndex(item => item.file === file), 1);
+    }
 }
 TheContextService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheContextService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
 TheContextService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheContextService });
@@ -2177,7 +2264,6 @@ class TheImageComponent extends TheBaseElementComponent {
         this.beforeContextChange = (value) => {
             if (value.element !== this.element && value.element.thumbUrl) {
                 this.imageEntry = {
-                    file: undefined,
                     name: value.element.name,
                     width: value.element.width,
                     height: value.element.height,
@@ -2189,8 +2275,10 @@ class TheImageComponent extends TheBaseElementComponent {
         };
     }
     ngOnInit() {
-        if (this.element.file instanceof File) {
-            this.uploadImage(this.element.file);
+        var _a;
+        this.file = (_a = this.theContextService.fileList.find(item => item.url === this.element.url)) === null || _a === void 0 ? void 0 : _a.file;
+        if (this.file && this.file instanceof File) {
+            this.uploadImage(this.file);
         }
         super.ngOnInit();
     }
@@ -2203,7 +2291,7 @@ class TheImageComponent extends TheBaseElementComponent {
         this.mouseUpSubscription = this.theContextService.onMouseUp$.subscribe(e => this.endDrag(e));
         this.uploadingSubscription = this.imageUploaderService
             .getUploadingItems$()
-            .pipe(map(fileUploadingItem => this.element.file && fileUploadingItem.find(item => item.file === this.element.file)))
+            .pipe(map(fileUploadingItem => this.file && fileUploadingItem.find(item => item.file === this.file)))
             .subscribe(uploadingItem => {
             if (!uploadingItem || !uploadingItem.result) {
                 return;
@@ -2234,10 +2322,9 @@ class TheImageComponent extends TheBaseElementComponent {
                 height: this.imageEntry.height,
                 thumbUrl,
                 originUrl,
-                align: this.imageEntry.align || Alignment.center,
-                file: undefined
+                align: this.imageEntry.align || Alignment.center
             };
-            HistoryEditor.withoutSaving(this.editor, () => Transforms.setNodes(this.editor, Object.assign({ type: ElementKinds.image, voids: true }, imageInfo), { at: path }));
+            HistoryEditor.withoutSaving(this.editor, () => Transforms.setNodes(this.editor, Object.assign({ type: ElementKinds.image, url: null }, imageInfo), { at: path }));
         });
     }
     resolveImageSize(imageFile, maxSize) {
@@ -2318,7 +2405,7 @@ class TheImageComponent extends TheBaseElementComponent {
         if (this.dragable) {
             this.dragable = false;
             this.mouseMoveSubscription.unsubscribe();
-            Transforms.setNodes(this.editor, Object.assign({ type: ElementKinds.image, voids: true }, this.imageEntry), { at: this.selection });
+            Transforms.setNodes(this.editor, Object.assign({ type: ElementKinds.image }, this.imageEntry), { at: this.selection });
         }
     }
     cancelUpload(event) {
@@ -2332,7 +2419,7 @@ class TheImageComponent extends TheBaseElementComponent {
     }
 }
 TheImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheImageComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.DomSanitizer }, { token: THE_UPLOAD_SERVICE_TOKEN }, { token: i0.ChangeDetectorRef }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Component });
-TheImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheImageComponent, selector: "the-image, [theImage]", viewQueries: [{ propertyName: "imageContent", first: true, predicate: ["imageContent"], descendants: true }, { propertyName: "img", first: true, predicate: ["img"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n<div class=\"image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align || 'center'\">\n    <div\n        #imageContent\n        *ngIf=\"imageEntry.thumbUrl\"\n        class=\"image-content\"\n        [class.pointer]=\"!selection\"\n        [ngStyle]=\"{ width: imageEntry.width + 'px', height: imageEntry.height + 'px' }\"\n    >\n        <img #img class=\"main-image\" [src]=\"imageEntry.thumbUrl\" [alt]=\"imageEntry.name\" />\n        <div *ngIf=\"selection\" class=\"image-profile\" [class.outline]=\"selection\">\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n        </div>\n        <div *ngIf=\"uploading\" class=\"uploading\">\n            <div class=\"uploading-percentage\">\n                <thy-progress thyType=\"primary\" [thyValue]=\"percentage\" thySize=\"sm\"></thy-progress>\n                <thy-icon (click)=\"cancelUpload($event)\" thyIconName=\"close-circle-bold-fill\" thyIconLegging=\"true\"></thy-icon>\n            </div>\n        </div>\n        <div *ngIf=\"!uploading\" class=\"layer\" (mousedown)=\"preview($event)\" [class.readonly]=\"readonly\"></div>\n    </div>\n</div>\n", components: [{ type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i4.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thyTips", "thyValue", "thySize", "thyMax"] }, { type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+TheImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheImageComponent, selector: "the-image, [theImage]", viewQueries: [{ propertyName: "imageContent", first: true, predicate: ["imageContent"], descendants: true }, { propertyName: "img", first: true, predicate: ["img"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n<div class=\"image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align || 'center'\">\n    <div\n        #imageContent\n        *ngIf=\"imageEntry.thumbUrl\"\n        class=\"image-content\"\n        [class.pointer]=\"!selection\"\n        [ngStyle]=\"{ width: imageEntry.width + 'px', height: imageEntry.height + 'px' }\"\n    >\n        <img #img class=\"main-image\" [src]=\"imageEntry.thumbUrl\" [alt]=\"imageEntry.name\" />\n        <div *ngIf=\"selection\" class=\"image-profile\" [class.outline]=\"selection\">\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n            <span *ngIf=\"isCollapsed\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n        </div>\n        <div *ngIf=\"uploading\" class=\"uploading\">\n            <div class=\"uploading-percentage\">\n                <thy-progress thyType=\"primary\" [thyValue]=\"percentage\" thySize=\"sm\"></thy-progress>\n                <thy-icon (click)=\"cancelUpload($event)\" thyIconName=\"close-circle-bold-fill\" thyIconLegging=\"true\"></thy-icon>\n            </div>\n        </div>\n        <div *ngIf=\"!uploading\" class=\"layer\" (mousedown)=\"preview($event)\" [class.readonly]=\"readonly\"></div>\n    </div>\n    <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading\" contenteditable=\"false\">\n        <thy-icon thyIconName=\"image\"></thy-icon>\n    </div>\n</div>\n", components: [{ type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i4.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thyTips", "thyValue", "thySize", "thyMax"] }, { type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheImageComponent, decorators: [{
             type: Component,
             args: [{
@@ -2361,19 +2448,24 @@ const ImageEditor = {
         inputFile.click();
     },
     insertImages(editor, imageFiles) {
+        const contextService = editor.injector.get(TheContextService);
         const imageNodes = [];
         const text = { text: '' };
         for (const image of imageFiles) {
             const verify = ImageEditor.verifyImage(editor, image);
             if (verify) {
                 const url = URL.createObjectURL(image);
-                imageNodes.push({ type: ElementKinds.image, url, file: image, children: [text] });
+                contextService.setUploadFileList({
+                    url,
+                    file: image
+                });
+                imageNodes.push({ type: ElementKinds.image, url, children: [text] });
             }
         }
         if (imageNodes.length > 0) {
             const at = editor.selection;
             Transforms.insertNodes(editor, imageNodes, { at });
-            if (TheQueries.isCollapsed(editor.selection) && TheQueries.isEmptyParagraph(editor)) {
+            if (isCollapsed(editor.selection) && isEmptyParagraph(editor)) {
                 Transforms.removeNodes(editor, { at });
                 Transforms.select(editor, at);
             }
@@ -2396,7 +2488,7 @@ const ImageEditor = {
     },
     isImageActive(editor) {
         const [match] = Editor.nodes(editor, {
-            match: n => Element$1.isElement(n) && n.type === 'image',
+            match: n => Element$1.isElement(n) && n.type === ElementKinds.image,
             universal: true
         });
         return !!match;
@@ -2409,7 +2501,6 @@ const withImage = (editor) => {
         return element.type === ElementKinds.image || isVoid(element);
     };
     editor.insertData = (data) => {
-        // TODO:: 底层有点问题,粘贴多张图片时只能识别一张
         if (data.files.length) {
             const imageFiles = [];
             for (const file of data.files) {
@@ -2523,7 +2614,7 @@ const isList = (n) => {
 };
 
 const isInList = (editor, at = editor.selection) => {
-    return TheQueries.isNodeTypeIn(editor, [ElementKinds.numberedList, ElementKinds.bulletedList], { at });
+    return isNodeTypeIn(editor, [ElementKinds.numberedList, ElementKinds.bulletedList], { at });
 };
 
 /**
@@ -2538,13 +2629,19 @@ const getListTypes = () => {
     return [ElementKinds.bulletedList, ElementKinds.numberedList];
 };
 
+/**
+ * 获取 List 中 ListItems，过滤掉空列表嵌套
+ * @param node
+ * @param initialValue
+ * @returns
+ */
 const getStartListItem = (node, initialValue) => {
     if (!initialValue) {
         initialValue = [];
     }
     if (node) {
         return node.reduce((result, current) => {
-            if (current.type == ElementKinds.listItem && current.children[0].type === ElementKinds.default) {
+            if ((current.type === ElementKinds.listItem && !getListTypes().includes(current.children[0].type))) {
                 result.push(current);
             }
             else {
@@ -2592,18 +2689,18 @@ const isSingleListItem = (list) => {
  * 如果at（默认= selection）位于ul> li> p中，则返回li和ul节点条目。
  */
 const getListItemEntry = (editor, { at = editor.selection } = {}) => {
-    if (at && TheQueries.isNodeTypeIn(editor, ElementKinds.listItem, { at })) {
-        const selectionParent = TheQueries.getParent(editor, at);
+    if (at && isNodeTypeIn(editor, ElementKinds.listItem, { at })) {
+        const selectionParent = getParent(editor, at);
         if (!selectionParent)
             return;
         const [, paragraphPath] = selectionParent;
-        const listItem = TheQueries.getAboveByType(editor, ElementKinds.listItem, { at }) || TheQueries.getParent(editor, paragraphPath);
+        const listItem = getAboveByType(editor, ElementKinds.listItem, { at }) || getParent(editor, paragraphPath);
         if (!listItem)
             return;
         const [listItemNode, listItemPath] = listItem;
         if (listItemNode.type !== ElementKinds.listItem)
             return;
-        const list = TheQueries.getParent(editor, listItemPath);
+        const list = getParent(editor, listItemPath);
         if (!list || !isList(list[0]))
             return;
         return {
@@ -2617,9 +2714,9 @@ const getListItemEntry = (editor, { at = editor.selection } = {}) => {
  * Is the selection focus at the start of its parent block.
  */
 const isSelectionAtListItemStart = (editor) => {
-    const listItemEntry = TheQueries.getAboveByType(editor, [ElementKinds.listItem]);
+    const listItemEntry = getAboveByType(editor, [ElementKinds.listItem]);
     if (listItemEntry) {
-        return TheQueries.isStart(editor, editor.selection.focus, listItemEntry[1]);
+        return isStart(editor, editor.selection.focus, listItemEntry[1]);
     }
     return false;
 };
@@ -2628,7 +2725,7 @@ const insertListData = (editor, { fromList, toListItemEntry }) => {
     const { children } = fromList;
     const [toListItem, toListItemPath] = toListItemEntry;
     const nextListItemPath = Path.next(toListItemPath);
-    const toListItemIsEmptyParagraph = TheQueries.isEmptyParagraph(editor, editor.selection.anchor);
+    const toListItemIsEmptyParagraph = isEmptyParagraph(editor, editor.selection.anchor);
     const hasSubList = hasListInListItem(toListItem);
     let selectPath = [...toListItemPath];
     const liIndex = selectPath.pop();
@@ -2699,7 +2796,7 @@ const insertListData = (editor, { fromList, toListItemEntry }) => {
 const moveListItemUp = (editor, { list, listItem }, options) => {
     const [listNode, listPath] = list;
     const [, listItemPath] = listItem;
-    const listParentEntry = TheQueries.getParent(editor, listPath);
+    const listParentEntry = getParent(editor, listPath);
     if (!listParentEntry)
         return;
     const [listParentNode, listParentPath] = listParentEntry;
@@ -2748,8 +2845,8 @@ const moveListItemUp = (editor, { list, listItem }, options) => {
                 type: ElementKinds.listItem,
                 children: []
             }, { at: nextPath });
-            const moveStartPath = TheQueries.findPath(editor, behindNode[0]);
-            const moveEndPath = TheQueries.findPath(editor, behindNode[behindNode.length - 1]);
+            const moveStartPath = findPath(editor, behindNode[0]);
+            const moveEndPath = findPath(editor, behindNode[behindNode.length - 1]);
             const moveRange = Editor.range(editor, moveStartPath, moveEndPath);
             Transforms.moveNodes(editor, {
                 at: moveRange,
@@ -2771,8 +2868,8 @@ const moveListItemUp = (editor, { list, listItem }, options) => {
  * Insert list item if selection in li>p.
  */
 const insertListItem = (editor) => {
-    if (editor.selection && !TheQueries.isRangeAtRoot(editor.selection)) {
-        const paragraphEntry = TheQueries.getAboveByType(editor, ElementKinds.paragraph);
+    if (editor.selection && !isRangeAtRoot(editor.selection)) {
+        const paragraphEntry = getAboveByType(editor, ElementKinds.paragraph);
         if (!paragraphEntry) {
             return;
         }
@@ -2784,7 +2881,7 @@ const insertListItem = (editor) => {
         if (!Range.isCollapsed(editor.selection)) {
             Transforms.delete(editor);
         }
-        const isEnd = TheQueries.isBlockTextEmptyAfterSelection(editor);
+        const isEnd = isBlockTextEmptyAfterSelection(editor);
         const nextNodePath = Path.next(paragraphPath);
         const nextListItemPath = Path.next(listItemPath);
         const nextEnd = Editor.end(editor, listItemPath);
@@ -2819,7 +2916,7 @@ const insertListItem = (editor) => {
         /**
          * If there is a list in the list item, move it to the next list item
          */
-        if (TheQueries.getNode(editor, nextNodePath)) {
+        if (getNode(editor, nextNodePath)) {
             Transforms.moveNodes(editor, {
                 at: Editor.range(editor, nextNodePath, nextEnd),
                 to: nextListItemPath.concat(1),
@@ -2835,8 +2932,8 @@ const insertListItem = (editor) => {
 
 const unwrapList = (editor) => {
     Editor.withoutNormalizing(editor, () => {
-        TheTransforms.unwrapNodesByType(editor, ElementKinds.listItem);
-        TheTransforms.unwrapNodesByType(editor, [ElementKinds.bulletedList, ElementKinds.numberedList], { split: true });
+        unwrapNodesByType(editor, ElementKinds.listItem);
+        unwrapNodesByType(editor, [ElementKinds.bulletedList, ElementKinds.numberedList], { split: true });
     });
 };
 
@@ -2865,7 +2962,7 @@ const moveListItemSublistItemsToListItemSublist = (editor, { fromListItem, toLis
     const toListItemSublist = getListItemSublist(toListItem, options);
     let to;
     if (!toListItemSublist) {
-        const fromList = TheQueries.getParent(editor, fromListItemPath);
+        const fromList = getParent(editor, fromListItemPath);
         if (!fromList)
             return 0;
         const [fromListNode] = fromList;
@@ -2879,7 +2976,7 @@ const moveListItemSublistItemsToListItemSublist = (editor, { fromListItem, toLis
         to = toListItemSublistPath.concat([0]);
     }
     else {
-        to = Path.next(TheQueries.getLastChildPath(toListItemSublist));
+        to = Path.next(getLastChildPath(toListItemSublist));
     }
     const moved = moveChildren(editor, {
         at: Path.previous(fromListItemSublistPath),
@@ -2916,9 +3013,9 @@ const normalizeNo = (editor, nodeEntry) => {
          * 如果为同类型list，则把nextList children移动到当前list的尾部, 并删除nextList
          */
         const nextPath = Path.next(listPath);
-        const nextNode = TheQueries.getNode(editor, nextPath);
+        const nextNode = getNode(editor, nextPath);
         if (nextNode && Element$1.isElement(nextNode) && Element$1.isElement(listNode) && nextNode.type === listNode.type) {
-            TheTransforms.moveChildren(editor, {
+            moveChildren(editor, {
                 at: [nextNode, nextPath],
                 to: listPath.concat(listNode.children.length)
             });
@@ -2930,11 +3027,11 @@ const normalizeNo = (editor, nodeEntry) => {
              * 获取prevList判断是否为同类型list
              * 如果为同类型list，则把当前list children移动到prevList的尾部, 并删除当前List
              */
-            const currentListNode = TheQueries.getNode(editor, listPath);
+            const currentListNode = getNode(editor, listPath);
             const prevPath = Path.previous(listPath);
-            const prevNode = TheQueries.getNode(editor, prevPath);
+            const prevNode = getNode(editor, prevPath);
             if (prevNode && Element$1.isElement(prevNode) && Element$1.isElement(currentListNode) && prevNode.type === currentListNode.type) {
-                TheTransforms.moveChildren(editor, {
+                moveChildren(editor, {
                     at: [currentListNode, listPath],
                     to: prevPath.concat(prevNode.children.length)
                 });
@@ -2981,7 +3078,7 @@ const getListNormalizer = (editor, { validLiChildrenTypes }) => {
  * 将 fromListItem 子列表的列表项移到 toList
  */
 const moveListItemSublistItemsToList = (editor, { fromListItem, toList, location }) => {
-    const fromListItemSublist = TheQueries.findDescendant(editor, {
+    const fromListItemSublist = findDescendant(editor, {
         at: fromListItem[1],
         match: {
             type: getListTypes()
@@ -2990,7 +3087,7 @@ const moveListItemSublistItemsToList = (editor, { fromListItem, toList, location
     if (!fromListItemSublist)
         return 0;
     const [, fromListItemSublistPath] = fromListItemSublist;
-    const lastChildPath = TheQueries.getLastChildPath(toList);
+    const lastChildPath = getLastChildPath(toList);
     let moved;
     Editor.withoutNormalizing(editor, () => {
         moved = moveChildren(editor, {
@@ -3060,7 +3157,7 @@ function onKeyDownList(e, editor) {
         }
         // move down with tab
         const tab = !e.shiftKey;
-        if (tab && !TheQueries.isFirstChild(listItemPath)) {
+        if (tab && !isFirstChild(listItemPath)) {
             moveListItemDown(editor, { list, listItem });
             return true;
         }
@@ -3198,6 +3295,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
 
+/**
+ * Is the selection in same li
+ */
+const isSelectionInSameListItem = (editor) => {
+    const { selection } = editor;
+    if (!selection) {
+        return false;
+    }
+    const [start, end] = Range.edges(selection);
+    const startListItemEntry = getAboveByType(editor, ElementKinds.listItem, { at: start.path });
+    const endListItemEntry = getAboveByType(editor, ElementKinds.listItem, { at: end.path });
+    return startListItemEntry && endListItemEntry && Path.equals(startListItemEntry[1], endListItemEntry[1]);
+};
+
 const withList = ({ validLiChildrenTypes } = {}) => (editor) => {
     const { insertBreak, deleteBackward, onKeydown, insertData, setFragmentData, renderElement } = editor;
     const resetBlockTypesListRule = {
@@ -3206,7 +3317,7 @@ const withList = ({ validLiChildrenTypes } = {}) => (editor) => {
         onReset: (_editor) => unwrapList(_editor)
     };
     editor.insertBreak = () => {
-        const node = TheQueries.anchorBlock(editor);
+        const node = anchorBlock(editor);
         if (!node) {
             insertBreak();
             return;
@@ -3247,14 +3358,14 @@ const withList = ({ validLiChildrenTypes } = {}) => (editor) => {
                 }
             }
             // 如果选择的listItem为空则将其向上移动
-            if (isStart && TheQueries.isBlockAboveEmpty(editor)) {
+            if (isStart && isBlockAboveEmpty(editor)) {
                 moved = moveListItemUp(editor, { list, listItem });
                 if (moved)
                     return;
             }
-            const didReset = TheTransforms.onKeyDownResetBlockType({
+            const didReset = onKeyDownResetBlockType({
                 rules: [
-                    Object.assign(Object.assign({}, resetBlockTypesListRule), { predicate: () => !moved && isStart && TheQueries.isBlockAboveEmpty(editor) })
+                    Object.assign(Object.assign({}, resetBlockTypesListRule), { predicate: () => !moved && isStart && isBlockAboveEmpty(editor) })
                 ]
             })(null, editor);
             if (didReset) {
@@ -3280,15 +3391,14 @@ const withList = ({ validLiChildrenTypes } = {}) => (editor) => {
             const fragmentElement = fragmentData[0];
             if (getListTypes().includes(fragmentElement.type)) {
                 const startNodes = getStartListItem([fragmentElement.children[0]]);
-                // 复制列表中的图片时startNodes长度为零
-                if (startNodes.length === 0) {
-                    setFragmentData(unit);
-                    return;
-                }
                 const children = startNodes.concat(fragmentElement.children.slice(1));
-                const fragmentNodes = [
+                let fragmentNodes = [
                     Object.assign(Object.assign({}, fragmentElement), { children })
                 ];
+                if (isSelectionInSameListItem(editor)) {
+                    // 仅仅复制列表中的内容
+                    fragmentNodes = children[0].children;
+                }
                 const fragment = fragmentNodes.concat(fragmentData.slice(1));
                 const domRange = AngularEditor.toDOMRange(editor, selection);
                 const contents = domRange.cloneContents();
@@ -3313,17 +3423,17 @@ const withList = ({ validLiChildrenTypes } = {}) => (editor) => {
             const { list, listItem } = res;
             const [, listPath] = list;
             const [listItemNode, listItemPath] = listItem;
-            const previousListItemPath = TheQueries.getPreviousPath(listItemPath);
+            const previousListItemPath = getPreviousPath(listItemPath);
             if (previousListItemPath) {
                 const beforePoint = Editor.before(editor, listItemPath);
                 const parentPath = Path.parent(beforePoint.path);
                 const parentNode = Node.get(editor, parentPath);
                 if (Editor.isVoid(editor, parentNode)) {
                     Editor.withoutNormalizing(editor, () => {
-                        TheTransforms.unwrapNodesByType(editor, [ElementKinds.bulletedList, ElementKinds.numberedList], {
+                        unwrapNodesByType(editor, [ElementKinds.bulletedList, ElementKinds.numberedList], {
                             split: true
                         });
-                        TheTransforms.unwrapNodesByType(editor, ElementKinds.listItem);
+                        unwrapNodesByType(editor, ElementKinds.listItem);
                     });
                     return;
                 }
@@ -3347,7 +3457,7 @@ const withList = ({ validLiChildrenTypes } = {}) => (editor) => {
                     const beforePoint = Editor.before(editor, listItemPath);
                     const startPoint = Editor.start(editor, listItemPath);
                     const endPoint = Editor.end(editor, listItemPath);
-                    const isInFirstChild = !isListNested(editor, listPath) && TheQueries.isFirstChild(listItemPath);
+                    const isInFirstChild = !isListNested(editor, listPath) && isFirstChild(listItemPath);
                     const to = isInFirstChild ? listPath : Path.next(Path.parent(beforePoint.path));
                     // TODO: types
                     Transforms.moveNodes(editor, {
@@ -3363,7 +3473,7 @@ const withList = ({ validLiChildrenTypes } = {}) => (editor) => {
                 return;
             }
             // deprecated
-            if (!isListNested(editor, listPath) && TheQueries.isFirstChild(listItemPath)) {
+            if (!isListNested(editor, listPath) && isFirstChild(listItemPath)) {
                 unwrapList(editor);
                 return;
             }
@@ -3372,7 +3482,7 @@ const withList = ({ validLiChildrenTypes } = {}) => (editor) => {
     };
     editor.insertData = (data) => {
         const text = data.getData('text/plain');
-        const fragment = extractFragment(data, ELEMENT_UNIQUE_ID);
+        const fragment = extractFragment(data);
         const aboveEntry = Editor.above(editor, {
             match: n => Editor.isBlock(editor, n) && n.type === ElementKinds.listItem
         });
@@ -3478,7 +3588,7 @@ class TheTodoItemComponent extends TheBaseElementComponent {
         if (this.readonly) {
             return false;
         }
-        TheTransforms.setNode(this.editor, { checked }, this.element);
+        setNode(this.editor, { checked }, this.element);
     }
     useIndentClass(el, element) {
         const prefix = 'indent';
@@ -3531,7 +3641,7 @@ const withTodoItem = (editor) => {
             });
             if (match) {
                 const [, path] = match;
-                const block = TheQueries.anchorBlock(editor);
+                const block = anchorBlock(editor);
                 if (block && Editor.isStart(editor, selection.anchor, path) && Editor.isEmpty(editor, block)) {
                     Transforms.setNodes(editor, {
                         type: ElementKinds.default,
@@ -3544,8 +3654,8 @@ const withTodoItem = (editor) => {
             }
         }
         insertBreak();
-        const anchorBlock = TheQueries.anchorBlock(editor);
-        if (anchorBlock && anchorBlock.type === ElementKinds.checkItem) {
+        const anchorBlock$1 = anchorBlock(editor);
+        if (anchorBlock$1 && anchorBlock$1.type === ElementKinds.checkItem) {
             Transforms.setNodes(editor, { checked: false });
         }
     };
@@ -3635,7 +3745,7 @@ const withAlign = (editor) => {
     const { deleteBackward } = editor;
     editor.deleteBackward = unit => {
         const { anchor } = editor.selection;
-        const node = TheQueries.anchorBlock(editor);
+        const node = anchorBlock(editor);
         const isVoid = Editor.isVoid(editor, node);
         const alignTypes = [Alignment.center, Alignment.right];
         const startLine = Editor.start(editor, anchor.path);
@@ -3654,7 +3764,7 @@ const withHeading = (editor) => {
     const { insertBreak } = editor;
     editor.insertBreak = () => {
         const { selection } = editor;
-        const anchorBlock = TheQueries.getAnchorBlockEntry(editor);
+        const anchorBlock = getAnchorBlockEntry(editor);
         if (anchorBlock && Range.isCollapsed(selection) && anchorBlock[0].type.startsWith('heading')) {
             if (Editor.isStart(editor, selection.anchor, anchorBlock[1])) {
                 insertBreak();
@@ -3726,14 +3836,14 @@ const withMark = () => (editor) => {
 
 const withNodeID = ({ idKey = 'id', idCreator = () => Date.now(), filterText = true, filter = () => true } = {}) => (e) => {
     const editor = e;
-    const { apply } = editor;
+    const { apply, getFragment } = editor;
     const idPropsCreator = () => ({ [idKey]: idCreator() });
     editor.removedIDs = new Set();
     editor.apply = (operation) => {
         if (operation.type === 'insert_node') {
             const newFilter = (entry) => {
                 const [_node] = entry;
-                return filter(entry) && filterText ? Element$1.isElement(_node) : TheQueries.isDescendant(_node);
+                return filter(entry) && filterText ? Element$1.isElement(_node) : isDescendant(_node);
             };
             // fix can not find path by orign node
             let node = operation.node;
@@ -3741,7 +3851,7 @@ const withNodeID = ({ idKey = 'id', idCreator = () => Date.now(), filterText = t
                 node = _.cloneDeep(node);
             }
             // it will not overwrite ids once it's set as it's read-only
-            TheTransforms.mergeDeepToNodes({
+            mergeDeepToNodes({
                 node,
                 source: idPropsCreator,
                 query: {
@@ -3765,6 +3875,10 @@ const withNodeID = ({ idKey = 'id', idCreator = () => Date.now(), filterText = t
         }
         return apply(operation);
     };
+    editor.getFragment = () => {
+        const fragment = _.cloneDeep(getFragment());
+        return deleteElementKey(fragment, idKey);
+    };
     return editor;
 };
 
@@ -3787,14 +3901,14 @@ const autoFormatInline = (editor, { type, between, markup, ignoreTrim }) => {
     const endMarkup = between ? between[1] : '';
     let endMarkupPointBefore = selection.anchor;
     if (endMarkup) {
-        endMarkupPointBefore = TheQueries.getPointBefore(editor, selection, {
+        endMarkupPointBefore = getPointBefore(editor, selection, {
             matchString: endMarkup
         });
         if (!endMarkupPointBefore) {
             return false;
         }
     }
-    const startMarkupPointAfter = TheQueries.getPointBefore(editor, endMarkupPointBefore, {
+    const startMarkupPointAfter = getPointBefore(editor, endMarkupPointBefore, {
         matchString: startMarkup,
         skipInvalid: true,
         afterMatch: true
@@ -3808,14 +3922,14 @@ const autoFormatInline = (editor, { type, between, markup, ignoreTrim }) => {
         focus: endMarkupPointBefore
     };
     if (!ignoreTrim) {
-        const markupText = TheQueries.getText(editor, markupRange);
+        const markupText = getText(editor, markupRange);
         if (markupText.trim() !== markupText) {
             return false;
         }
     }
     // delete end markup
     if (endMarkup) {
-        endMarkupPointBefore = TheQueries.getPointBefore(editor, selection, {
+        endMarkupPointBefore = getPointBefore(editor, selection, {
             matchString: endMarkup
         });
         Transforms.delete(editor, {
@@ -3831,7 +3945,7 @@ const autoFormatInline = (editor, { type, between, markup, ignoreTrim }) => {
     Transforms.collapse(editor, { edge: 'end' });
     editor.removeMark(type, false);
     // delete start markup
-    const startMarkupPointBefore = TheQueries.getPointBefore(editor, selection, {
+    const startMarkupPointBefore = getPointBefore(editor, selection, {
         matchString: startMarkup,
         skipInvalid: true
     });
@@ -3848,7 +3962,7 @@ const withAutoFormat = ({ rules }) => (editor) => {
     const { insertText } = editor;
     editor.insertText = text => {
         var _a;
-        if (!TheQueries.isCollapsed(editor.selection)) {
+        if (!isCollapsed(editor.selection)) {
             return insertText(text);
         }
         for (let _b of rules) {
@@ -3865,15 +3979,15 @@ const withAutoFormat = ({ rules }) => (editor) => {
                 let markups = castArray(markup);
                 let markupRange;
                 if (triggerAtBlockStart) {
-                    markupRange = TheQueries.getRangeFromBlockStart(editor);
+                    markupRange = getRangeFromBlockStart(editor);
                     // Don't autoformat if there is void nodes.
-                    const hasVoidNode = TheQueries.someNode(editor, {
+                    const hasVoidNode = someNode(editor, {
                         at: markupRange,
                         match: n => Editor.isVoid(editor, n)
                     });
                     if (hasVoidNode)
                         continue;
-                    const textFromBlockStart = TheQueries.getText(editor, markupRange);
+                    const textFromBlockStart = getText(editor, markupRange);
                     if (match) {
                         markups = match(editor, textFromBlockStart);
                     }
@@ -3881,13 +3995,13 @@ const withAutoFormat = ({ rules }) => (editor) => {
                         continue;
                 }
                 else {
-                    markupRange = TheQueries.getRangeBefore(editor, editor.selection, {
+                    markupRange = getRangeBefore(editor, editor.selection, {
                         matchString: markup,
                         skipInvalid: true
                     });
                     if (!markupRange)
                         continue;
-                    const blockAbovePath = (_a = TheQueries.getBlockAbove(editor)) === null || _a === void 0 ? void 0 : _a[1];
+                    const blockAbovePath = (_a = getBlockAbove(editor)) === null || _a === void 0 ? void 0 : _a[1];
                     if (!blockAbovePath)
                         continue;
                     // If the markup is not at the start, insert break before autoformatting.
@@ -3897,7 +4011,7 @@ const withAutoFormat = ({ rules }) => (editor) => {
                 }
                 if (!allowSameTypeAbove) {
                     // Don't autoformat if already in a block of the same type.
-                    const isBelowSameBlockType = TheQueries.someNode(editor, { match: { type } });
+                    const isBelowSameBlockType = someNode(editor, { match: { type } });
                     if (isBelowSameBlockType)
                         continue;
                 }
@@ -3941,9 +4055,9 @@ const withTrailingNode = (_a = {}) => {
         const { normalizeNode } = editor;
         editor.normalizeNode = ([currentNode, currentPath]) => {
             if (!currentPath.length) {
-                const entry = TheQueries.getLastNode(editor, level);
+                const entry = getLastNode(editor, level);
                 const [lastNode, lastPath] = entry;
-                if (Element$1.isElement(lastNode) && lastNode.type !== type && TheQueries.isNodeType(entry, query)) {
+                if (Element$1.isElement(lastNode) && lastNode.type !== type && isNodeType(entry, query)) {
                     editor.insertNodes({
                         type,
                         children: [{ text: '' }]
@@ -3965,7 +4079,7 @@ const withBlockCard = (editor) => {
             const isLeftCursor = isCardLeft(anchorNode);
             const cardEntry = AngularEditor.toSlateCardEntry(editor, anchorNode);
             const cursorRootPath = cardEntry[1];
-            TheTransforms.insertParagraph(editor, isLeftCursor ? cursorRootPath : Path.next(cursorRootPath));
+            insertParagraph(editor, isLeftCursor ? cursorRootPath : Path.next(cursorRootPath));
             if (!isLeftCursor) {
                 Transforms.select(editor, Path.next(cursorRootPath));
             }
@@ -3985,7 +4099,7 @@ const withBlockCard = (editor) => {
                 if (!previousPath) {
                     return;
                 }
-                if (previousPath && TheQueries.isEmptyParagraphByPath(editor, previousPath)) {
+                if (previousPath && isEmptyParagraphByPath(editor, previousPath)) {
                     Transforms.removeNodes(editor, {
                         at: previousPath
                     });
@@ -3997,18 +4111,22 @@ const withBlockCard = (editor) => {
                 return;
             }
             else {
-                TheTransforms.insertParagraph(editor, cursorRootPath);
+                insertParagraph(editor, cursorRootPath);
                 Transforms.select(editor, cursorRootPath);
                 Transforms.removeNodes(editor, { at: Path.next(cursorRootPath) });
                 return;
             }
         }
-        const blockCard = TheQueries.getBlockCardAbove(editor);
+        const blockCard = getBlockCardAbove(editor);
         const beforePoint = Editor.before(editor, editor.selection.anchor);
-        const beforeBlockCard = TheQueries.getBlockCardAbove(editor, { at: beforePoint });
+        const beforeBlockCard = getBlockCardAbove(editor, { at: beforePoint });
         if (!blockCard && beforeBlockCard) {
-            if (TheQueries.isBlockAboveEmpty(editor)) {
+            if (isBlockAboveEmpty(editor)) {
                 const [node, path] = Editor.parent(editor, editor.selection.anchor.path);
+                HistoryEditor.withoutMerging(editor, () => {
+                    const rightCursor = { path: beforeBlockCard[1], offset: FAKE_RIGHT_BLOCK_CARD_OFFSET };
+                    Transforms.select(editor, { anchor: rightCursor, focus: rightCursor });
+                });
                 Transforms.delete(editor, { at: path });
                 return;
             }
@@ -4027,7 +4145,7 @@ const withBlockCard = (editor) => {
             const cardEntry = AngularEditor.toSlateCardEntry(editor, anchorNode);
             const cursorRootPath = cardEntry[1];
             if (isLeftCursor) {
-                TheTransforms.insertParagraph(editor, cursorRootPath);
+                insertParagraph(editor, cursorRootPath);
                 Transforms.select(editor, cursorRootPath);
                 Transforms.removeNodes(editor, { at: Path.next(cursorRootPath) });
                 return;
@@ -4040,11 +4158,11 @@ const withBlockCard = (editor) => {
                 return;
             }
         }
-        const blockCard = TheQueries.getBlockCardAbove(editor);
+        const blockCard = getBlockCardAbove(editor);
         const afterPoint = Editor.after(editor, editor.selection.anchor);
-        const afterBlockCard = TheQueries.getBlockCardAbove(editor, { at: afterPoint });
+        const afterBlockCard = getBlockCardAbove(editor, { at: afterPoint });
         if (!blockCard && afterBlockCard) {
-            if (TheQueries.isBlockAboveEmpty(editor)) {
+            if (isBlockAboveEmpty(editor)) {
                 HistoryEditor.withoutMerging(editor, () => {
                     const leftCursor = { path: afterBlockCard[1], offset: -1 };
                     Transforms.select(editor, { anchor: leftCursor, focus: leftCursor });
@@ -4066,7 +4184,7 @@ const withBlockCard = (editor) => {
         const isMoveUp = hotkeys.isMoveUp(nativeEvent);
         const isMoveDown = hotkeys.isMoveDown(nativeEvent);
         const isCollapsed = selection && Range.isCollapsed(selection);
-        const anchorEntry = TheQueries.anchorBlockEntry(editor);
+        const anchorEntry = anchorBlockEntry(editor);
         // block card cursor
         if (anchorNode && hasBlockCard(domSelection)) {
             const isCardLeftCursor = isCardLeft(anchorNode);
@@ -4207,7 +4325,7 @@ const withMoveSelection = (editor) => {
         // fix deleteBackward on the start of inline block
         // deleteBackward logic bug
         if (inlineBlockEntry && !Editor.isVoid(editor, inlineBlockEntry[0]) && selection.anchor.offset === 0) {
-            const beforePoint = TheQueries.getPointBefore(editor, selection.focus);
+            const beforePoint = getPointBefore(editor, selection.focus);
             Transforms.select(editor, beforePoint);
         }
         deleteBackward(unit);
@@ -4219,11 +4337,11 @@ const withGetFragment = (elementKinds = []) => (editor) => {
     const { getFragment } = editor;
     editor.getFragment = () => {
         const { selection } = editor;
-        const containerBlocks = [...elementKinds, ...TheQueries.getContainerBlocks(editor)];
+        const containerBlocks = [...elementKinds, ...getContainerBlocks(editor)];
         if (selection && selection.anchor.path[0] === selection.focus.path[0]) {
-            const fragmentData = Node.fragment(editor, selection);
-            const nodes = TheQueries.getSelectionNodesByType(editor, fragmentData, containerBlocks);
-            return nodes && Element$1.isElement(nodes) ? nodes.children : getFragment();
+            const fragmentData = getFragment();
+            const nodes = getSelectionNodesByType(editor, fragmentData, containerBlocks);
+            return nodes && Element$1.isElement(nodes) ? nodes.children : fragmentData;
         }
         return getFragment();
     };
@@ -4780,7 +4898,7 @@ function insertTable(opts, editor, columns = 3, rows = 3, getCellContent) {
     }
     // Create the table node
     const table = createTable(opts, columns, rows, getCellContent);
-    TheEditor.insertElement(editor, table);
+    insertElement(editor, table);
 }
 
 /**
@@ -5096,7 +5214,7 @@ const TableEditor = {
             MarkProps.forEach(key => {
                 unsetMarks[key] = null;
             });
-            TheEditor.setMarks(editor, unsetMarks, cellRange);
+            setMarks(editor, unsetMarks, cellRange);
         });
     },
     handleSelectedCells(editor, handle) {
@@ -5123,7 +5241,11 @@ const TableEditor = {
 
 const MarkEditor = {
     isMarkActive(editor, format) {
-        const node = Node.get(editor, editor.selection.anchor.path);
+        var _a, _b;
+        if (!(editor === null || editor === void 0 ? void 0 : editor.selection)) {
+            return;
+        }
+        const node = Node.get(editor, (_b = (_a = editor === null || editor === void 0 ? void 0 : editor.selection) === null || _a === void 0 ? void 0 : _a.anchor) === null || _b === void 0 ? void 0 : _b.path);
         if (!Text.isText(node)) {
             return false;
         }
@@ -5211,7 +5333,7 @@ const ImageOptions = [
 
 const HrEditor = {
     insertHr(editor) {
-        TheTransforms.insertElement(editor, { type: ElementKinds.hr, children: [{ text: '' }] });
+        insertElement(editor, { type: ElementKinds.hr, children: [{ text: '' }] });
     }
 };
 
@@ -5220,7 +5342,7 @@ const HrOptions = [
         key: ElementKinds.hr,
         icon: 'horizontal-line',
         name: '分割线',
-        active: editor => TheQueries.isBlockActive(editor, ElementKinds.hr),
+        active: editor => isBlockActive(editor, ElementKinds.hr),
         execute: editor => HrEditor.insertHr(editor)
     }
 ];
@@ -5259,7 +5381,7 @@ const HeadingOptions = [
         name: '正文',
         styles: { height: '40px' },
         execute: editor => Transforms.setNodes(editor, { type: ElementKinds.paragraph }),
-        active: editor => TheQueries.isParagraph(editor)
+        active: editor => isParagraph(editor)
     },
     {
         key: ElementKinds.heading_1,
@@ -5300,18 +5422,21 @@ const BlockquoteOptions = [
         key: ElementKinds.blockquote,
         icon: 'blockquote',
         name: '引用',
-        active: editor => TheQueries.isBlockActive(editor, ElementKinds.blockquote),
+        active: editor => isBlockActive(editor, ElementKinds.blockquote),
         execute: editor => BlockquoteEditor.toggleBlockquote(editor)
     }
 ];
 
 const AlignEditor = {
     isActive(editor, alignment) {
+        if (!(editor === null || editor === void 0 ? void 0 : editor.selection)) {
+            return;
+        }
         const tableCellAlign = TableEditor.isAlignActive(editor, alignment);
         if (tableCellAlign !== null) {
             return tableCellAlign;
         }
-        const blockElement = TheQueries.anchorBlock(editor);
+        const blockElement = anchorBlock(editor);
         if (blockElement) {
             const { align } = blockElement;
             if (!align && alignment === Alignment.left) {
@@ -5401,39 +5526,21 @@ const withBlockquote = (editor) => {
         if (!aboveResult) {
             return deleteBackward(unit);
         }
-        const highestBlock = aboveResult[0];
-        const lowestBlock = TheQueries.anchorBlock(editor);
-        const wrapBlockType = highestBlock.type;
-        if (lowestBlock && Editor.isStart(editor, editor.selection.anchor, aboveResult[1])) {
-            if (wrapBlockType === ElementKinds.blockquote) {
-                if (highestBlock.children[0] === lowestBlock) {
-                    return TheTransforms.unWrap(editor, wrapBlockType);
-                }
-            }
+        const hasHandled = handleContinualDeleteBackward(editor, aboveResult, ElementKinds.blockquote);
+        if (hasHandled) {
+            return;
         }
-        deleteBackward(unit);
+        return deleteBackward(unit);
     };
     editor.insertBreak = () => {
-        const lowestBlock = TheQueries.anchorBlock(editor);
+        const lowestBlock = anchorBlock(editor);
         if (!lowestBlock) {
             insertBreak();
             return;
         }
-        const isEmpty = Editor.isEmpty(editor, lowestBlock);
-        const isEnd = Editor.isEnd(editor, editor.selection.anchor, editor.selection.focus.path);
-        const aboveResult = Editor.above(editor, {
-            match: n => Editor.isBlock(editor, n) && n.type === ElementKinds.blockquote
-        });
-        if (isEnd) {
-            editor.marks = {};
-        }
-        if (aboveResult && aboveResult[0] && isEnd && isEmpty) {
-            const wrapBlock = aboveResult[0];
-            if (wrapBlock.type === ElementKinds.blockquote) {
-                if (wrapBlock.children[wrapBlock.children.length - 1] === lowestBlock) {
-                    return TheTransforms.unWrap(editor, wrapBlock.type);
-                }
-            }
+        const hasHandled = handleContinualInsertBreak(editor, lowestBlock, ElementKinds.blockquote);
+        if (hasHandled) {
+            return;
         }
         const voidEntry = Editor.above(editor, {
             match: n => Editor.isBlock(editor, n) && Editor.isVoid(editor, n)
@@ -5442,7 +5549,7 @@ const withBlockquote = (editor) => {
             Transforms.insertNodes(editor, createEmptyParagraph());
             return;
         }
-        insertBreak();
+        return insertBreak();
     };
     editor.isContainer = (element) => {
         return element.type === ElementKinds.blockquote ? true : isContainer(element);
@@ -5558,6 +5665,7 @@ class TheColorSelectComponent {
         }
     }
     _selectColor(event, color) {
+        event.preventDefault();
         event.stopPropagation();
         if (this.option.specialColor && color === this.option.specialColor) {
             color = '';
@@ -5588,7 +5696,7 @@ class TheColorSelectComponent {
     }
 }
 TheColorSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheColorSelectComponent, deps: [{ token: i1$3.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-TheColorSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheColorSelectComponent, selector: "the-color-select", inputs: { selectedColor: "selectedColor", selectAction: "selectAction", showCustom: "showCustom", colors: "colors", option: "option" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)", "keydown": "handleKeydown($event)" } }, ngImport: i0, template: "<div class=\"color-container\">\n    <div class=\"colors\">\n        <div *ngFor=\"let row of selectColors; let rowIndex = index\">\n            <span\n                class=\"color-item\"\n                *ngFor=\"let _color of row.rowValue; let i = index\"\n                [ngClass]=\"_color.classMaps\"\n                (mousedown)=\"_selectColor($event, _color.value)\"\n            >\n                <span [ngStyle]=\"{ background: _color.value }\">\n                    <thy-icon\n                        thyIconName=\"check\"\n                        [ngStyle]=\"{ color: row.tickColor }\"\n                    ></thy-icon>\n                </span>\n            </span>\n        </div>\n    </div>\n    <div\n        *ngIf=\"option.showCustom\"\n        class=\"select-color\"\n    >\n        <span\n            class=\"color\"\n            [ngStyle]=\"{ background: selectedColor }\"\n        ></span>\n        #\n        <input\n            thyInput\n            maxlength=\"6\"\n            (keydown.enter)=\"customInputColorEnter($event)\"\n            onkeyup=\"value=value.replace(/[^0-9A-Fa-f]/g,'')\"\n            class=\"value\"\n            [(ngModel)]=\"customColor\"\n            (ngModelChange)=\"colorChange(false)\"\n        />\n    </div>\n</div>\n", components: [{ type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { type: i4$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TheColorSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheColorSelectComponent, selector: "the-color-select", inputs: { selectedColor: "selectedColor", selectAction: "selectAction", showCustom: "showCustom", colors: "colors", option: "option" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)", "keydown": "handleKeydown($event)" } }, ngImport: i0, template: "<div class=\"color-container\">\n    <div class=\"colors\">\n        <div *ngFor=\"let row of selectColors; let rowIndex = index\">\n            <span\n                class=\"color-item\"\n                *ngFor=\"let _color of row.rowValue; let i = index\"\n                [ngClass]=\"_color.classMaps\"\n                (mousedown)=\"_selectColor($event, _color.value)\"\n            >\n                <span [ngStyle]=\"{ background: _color.value }\">\n                    <thy-icon thyIconName=\"check\" [ngStyle]=\"{ color: row.tickColor }\"></thy-icon>\n                </span>\n            </span>\n        </div>\n    </div>\n    <div *ngIf=\"option.showCustom\" class=\"select-color\">\n        <span class=\"color\" [ngStyle]=\"{ background: selectedColor }\"></span>\n        #\n        <input\n            thyInput\n            maxlength=\"6\"\n            (keydown.enter)=\"customInputColorEnter($event)\"\n            onkeyup=\"value=value.replace(/[^0-9A-Fa-f]/g,'')\"\n            class=\"value\"\n            [(ngModel)]=\"customColor\"\n            (ngModelChange)=\"colorChange(false)\"\n        />\n    </div>\n</div>\n", components: [{ type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { type: i4$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheColorSelectComponent, decorators: [{
             type: Component,
             args: [{
@@ -5665,6 +5773,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
 const ColorEditor = {
     getActiveColor(editor, type) {
         var _a;
+        if (!(editor === null || editor === void 0 ? void 0 : editor.selection)) {
+            return;
+        }
         const node = Node.get(editor, (_a = editor.selection) === null || _a === void 0 ? void 0 : _a.anchor.path);
         if (!Text.isText(node)) {
             return undefined;
@@ -5701,10 +5812,11 @@ const ColorEditor = {
 
 class TheToolbarBaseItemComponent {
     execute(event) {
+        var _a;
         event.preventDefault();
         event.stopPropagation();
-        if (!this.itemMousedownHandle && !this.editor.selection) {
-            const lastNode = TheQueries.getLastNode(this.editor, 1);
+        if (!this.itemMousedownHandle && !((_a = this.editor) === null || _a === void 0 ? void 0 : _a.selection)) {
+            const lastNode = getLastNode(this.editor, 1);
             const end = Editor.end(this.editor, lastNode[1]);
             Transforms.select(this.editor, end);
             AngularEditor.focus(this.editor);
@@ -5798,7 +5910,7 @@ TheColorToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
                 thyIconName="caret-down"
             ></thy-icon>
         </a>
-    `, 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheColorToolbarItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -5856,7 +5968,7 @@ const ColorOptions = [
 const withRemoveVoid = (editor) => {
     const { deleteBackward, deleteForward, onKeydown } = editor;
     const deleteBlockVoid = (e) => {
-        const aboveEntry = TheQueries.getAbove(e);
+        const aboveEntry = getAbove(e);
         const canDelete = aboveEntry && Editor.isBlock(e, aboveEntry[0]) && Editor.isVoid(e, aboveEntry[0]);
         if (canDelete) {
             Transforms.insertNodes(e, createEmptyParagraph(), { at: Path.next(aboveEntry[1]) });
@@ -5872,7 +5984,7 @@ const withRemoveVoid = (editor) => {
         deleteBackward(unit);
     };
     editor.onKeydown = event => {
-        const aboveEntry = TheQueries.getAbove(editor);
+        const aboveEntry = getAbove(editor);
         if (aboveEntry && Editor.isVoid(editor, aboveEntry[0]) && Editor.isInline(editor, aboveEntry[0])) {
             if (hotkeys.isDeleteBackward(event) || hotkeys.isDeleteForward(event)) {
                 event.preventDefault();
@@ -5954,7 +6066,7 @@ const CodeEditor = {
                 language: DEFAULT_LANGUAGE.value,
                 children: [{ text: '' }]
             };
-            TheTransforms.insertElement(editor, codeElement);
+            insertElement(editor, codeElement);
         }
     }
 };
@@ -5964,7 +6076,7 @@ const CodeOptions = [
         key: ElementKinds.code,
         icon: 'code-syntax',
         name: '代码块',
-        active: editor => TheQueries.isBlockActive(editor, ElementKinds.code),
+        active: editor => isBlockActive(editor, ElementKinds.code),
         execute: editor => CodeEditor.insertCode(editor)
     }
 ];
@@ -6074,7 +6186,7 @@ class TheToolbarDropdownComponent extends TheToolbarBaseItemComponent {
     }
 }
 TheToolbarDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheToolbarDropdownComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.ThyPopover }, { token: i0.ViewContainerRef }, { token: i2$1.Overlay }], target: i0.ɵɵFactoryTarget.Component });
-TheToolbarDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: { toolbarItem: "toolbarItem", menus: "menus", mode: "mode", item: "item", itemMousedownHandle: "itemMousedownHandle" }, host: { listeners: { "mousedown": "toggleDropdown($event)", "document: mousedown": "handleDocumentMouseDown($event)" }, classAttribute: "the-toolbar-dropdown-container" }, viewQueries: [{ propertyName: "iconModeTemplate", first: true, predicate: ["iconModeTemplate"], descendants: true, static: true }, { propertyName: "textModeTemplate", first: true, predicate: ["textModeTemplate"], descendants: true, static: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n\n<ng-template #iconModeTemplate>\n    <a thyIconNavLink class=\"icon-mode link-with-down\" [thyTooltip]=\"activeMenu?.name\" thyTooltipPlacement=\"top\">\n        <thy-icon [thyIconName]=\"activeMenu?.icon\"></thy-icon>\n        <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n</ng-template>\n\n<ng-template #textModeTemplate>\n    <a thyIconNavLink class=\"text-mode\" [thyTooltip]=\"activeMenu?.name\" thyTooltipPlacement=\"top\">\n        <span class=\"show-text\">{{ activeMenu?.name }}</span>\n        <thy-icon class=\"text-caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n</ng-template>\n\n<ng-template #dropdownTemplate>\n    <thy-action-menu class=\"dropdown\">\n        <ng-container *ngFor=\"let menu of menus\">\n            <a\n                *ngIf=\"menu.key !== 'split'\"\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyActionMenuItemActive]=\"menu.key === activeMenu.key\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n                [ngStyle]=\"menu?.styles\"\n            >\n                <span *ngIf=\"menu.icon && mode === dropdownMode.icon\" thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu.icon\"></thy-icon>\n                </span>\n                <span *ngIf=\"menu.name\" thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n            <thy-action-menu-divider *ngIf=\"menu.key === 'split'\"></thy-action-menu-divider>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n", components: [{ type: i2.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5$2.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i5$2.ThyActionMenuDividerComponent, selector: "thy-action-menu-divider", inputs: ["thyTitle", "thyType"] }], directives: [{ type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$2.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5$2.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
+TheToolbarDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: { toolbarItem: "toolbarItem", menus: "menus", mode: "mode", item: "item", itemMousedownHandle: "itemMousedownHandle" }, host: { listeners: { "mousedown": "toggleDropdown($event)", "document: mousedown": "handleDocumentMouseDown($event)" }, classAttribute: "the-toolbar-dropdown-container" }, viewQueries: [{ propertyName: "iconModeTemplate", first: true, predicate: ["iconModeTemplate"], descendants: true, static: true }, { propertyName: "textModeTemplate", first: true, predicate: ["textModeTemplate"], descendants: true, static: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"template\"></ng-template>\n\n<ng-template #iconModeTemplate>\n    <a thyIconNavLink class=\"icon-mode link-with-down\" [thyTooltip]=\"activeMenu?.name\" thyTooltipPlacement=\"top\">\n        <thy-icon [thyIconName]=\"activeMenu?.icon\"></thy-icon>\n        <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n</ng-template>\n\n<ng-template #textModeTemplate>\n    <a thyIconNavLink class=\"text-mode\" [thyTooltip]=\"activeMenu?.name\" thyTooltipPlacement=\"top\">\n        <span class=\"show-text\">{{ activeMenu?.name }}</span>\n        <thy-icon class=\"text-caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n</ng-template>\n\n<ng-template #dropdownTemplate>\n    <thy-action-menu class=\"dropdown\">\n        <ng-container *ngFor=\"let menu of menus\">\n            <a\n                *ngIf=\"menu.key !== 'split'\"\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyActionMenuItemActive]=\"menu.key === activeMenu.key\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n                [ngStyle]=\"menu?.styles\"\n            >\n                <span *ngIf=\"menu.icon && mode === dropdownMode.icon\" thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu.icon\"></thy-icon>\n                </span>\n                <span *ngIf=\"menu.name\" thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n            <thy-action-menu-divider *ngIf=\"menu.key === 'split'\"></thy-action-menu-divider>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n", components: [{ type: i2.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5$1.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i5$1.ThyActionMenuDividerComponent, selector: "thy-action-menu-divider", inputs: ["thyTitle", "thyType"] }], directives: [{ type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5$1.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5$1.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5$1.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheToolbarDropdownComponent, decorators: [{
             type: Component,
             args: [{
@@ -6112,15 +6224,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
             }] } });
 
 class TheCodeComponent extends TheBaseElementComponent {
-    constructor(elementRef, cdr, thyNotifyService, ngZone) {
+    constructor(elementRef, cdr, thyNotifyService, ngZone, mode) {
         super(elementRef, cdr);
         this.elementRef = elementRef;
         this.cdr = cdr;
         this.thyNotifyService = thyNotifyService;
         this.ngZone = ngZone;
+        this.mode = mode;
         this.startRenderCodemirror = false;
         this.dropdownMode = DropdownMode;
-        this.maxHeight = 350 - CODEMIRROR_PADDING_TOP * 2;
+        this.maxHeight = this.mode === CodeMode.default ? 350 - CODEMIRROR_PADDING_TOP * 2 : 0;
         this.codeMirrorFocused = false;
         this.menus = CODE_MODES.map(item => {
             return { key: item.value, name: item.showName };
@@ -6131,7 +6244,7 @@ class TheCodeComponent extends TheBaseElementComponent {
             readOnly: false,
             autofocus: false,
             lineWiseCopyCut: true,
-            lineWrapping: false,
+            lineWrapping: this.mode === CodeMode.default ? false : true,
             cursorBlinkRate: 500
         };
         this.actives = this.menus[0];
@@ -6200,7 +6313,7 @@ class TheCodeComponent extends TheBaseElementComponent {
     }
     onDelete(event) {
         event.preventDefault();
-        TheTransforms.deleteElement(this.editor, this.element);
+        deleteElement(this.editor, this.element);
     }
     onCopy(event) {
         event.preventDefault();
@@ -6229,8 +6342,8 @@ class TheCodeComponent extends TheBaseElementComponent {
         this.options = Object.assign(Object.assign({}, this.options), { readOnly: this.readonly, cursorBlinkRate: this.readonly ? -1 : 500 });
     }
 }
-TheCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheCodeComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$4.ThyNotifyService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-TheCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheCodeComponent, selector: "div[theCode]", viewQueries: [{ propertyName: "codemirror", first: true, predicate: ["codemirror"], descendants: true, read: CodeMirrorComponent }], usesInheritance: true, ngImport: i0, template: "<div contenteditable=\"false\" class=\"the-block-operation\" *ngIf=\"codeMirrorFocused && !options.readOnly\">\n    <thy-icon-nav>\n        <the-toolbar-dropdown [menus]=\"menus\" [item]=\"actives\" [itemMousedownHandle]=\"onChangeLangulage\"></the-toolbar-dropdown>\n        <a\n            href=\"javascript:;\"\n            thyIconNavLink\n            thyIconNavLinkIcon=\"copy\"\n            thyTooltip=\"\u590D\u5236\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"onCopy($event)\"\n        ></a>\n        <a\n            href=\"javascript:;\"\n            thyIconNavLink\n            thyIconNavLinkIcon=\"trash\"\n            thyTooltip=\"\u5220\u9664\"\n            class=\"remove-link\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"onDelete($event)\"\n        ></a>\n    </thy-icon-nav>\n</div>\n\n<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n<ng-codemirror\n    *ngIf=\"startRenderCodemirror\"\n    #codemirror\n    contenteditable=\"false\"\n    class=\"ng-codemirror-wrapper\"\n    [ngStyle]=\"{ maxHeight: maxHeight > 0 ? maxHeight + 'px' : 'auto' }\"\n    [options]=\"options\"\n    [ngModel]=\"code\"\n    [delayRefreshTime]=\"300\"\n    (ngModelChange)=\"codeChange($event)\"\n    (focusChange)=\"focusChange($event)\"\n    [autoMaxHeight]=\"maxHeight\"\n></ng-codemirror>\n", components: [{ type: i2.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: ["toolbarItem", "menus", "mode", "item", "itemMousedownHandle"] }, { type: i2.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i5$3.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["autoMaxHeight", "delayRefreshTime", "options"], outputs: ["focusChange"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TheCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheCodeComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$4.ThyNotifyService }, { token: i0.NgZone }, { token: THE_CODE_MODE_TOKEN }], target: i0.ɵɵFactoryTarget.Component });
+TheCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheCodeComponent, selector: "div[theCode]", viewQueries: [{ propertyName: "codemirror", first: true, predicate: ["codemirror"], descendants: true, read: CodeMirrorComponent }], usesInheritance: true, ngImport: i0, template: "<div contenteditable=\"false\" class=\"the-block-operation\" *ngIf=\"codeMirrorFocused && !options.readOnly\">\n    <thy-icon-nav>\n        <the-toolbar-dropdown [menus]=\"menus\" [item]=\"actives\" [itemMousedownHandle]=\"onChangeLangulage\"></the-toolbar-dropdown>\n        <a\n            href=\"javascript:;\"\n            thyIconNavLink\n            thyIconNavLinkIcon=\"copy\"\n            thyTooltip=\"\u590D\u5236\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"onCopy($event)\"\n        ></a>\n        <a\n            href=\"javascript:;\"\n            thyIconNavLink\n            thyIconNavLinkIcon=\"trash\"\n            thyTooltip=\"\u5220\u9664\"\n            class=\"remove-link\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"onDelete($event)\"\n        ></a>\n    </thy-icon-nav>\n</div>\n\n<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n<ng-codemirror\n    *ngIf=\"startRenderCodemirror\"\n    #codemirror\n    contenteditable=\"false\"\n    class=\"ng-codemirror-wrapper\"\n    [ngStyle]=\"{ maxHeight: maxHeight > 0 ? maxHeight + 'px' : 'auto' }\"\n    [options]=\"options\"\n    [ngModel]=\"code\"\n    [delayRefreshTime]=\"300\"\n    (ngModelChange)=\"codeChange($event)\"\n    (focusChange)=\"focusChange($event)\"\n    [autoMaxHeight]=\"maxHeight\"\n></ng-codemirror>\n", components: [{ type: i2.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: ["toolbarItem", "menus", "mode", "item", "itemMousedownHandle"] }, { type: i2.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { type: i5$2.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["autoMaxHeight", "delayRefreshTime", "options"], outputs: ["focusChange"] }], 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"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheCodeComponent, decorators: [{
             type: Component,
             args: [{
@@ -6238,7 +6351,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                     templateUrl: './code.component.html',
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$4.ThyNotifyService }, { type: i0.NgZone }]; }, propDecorators: { codemirror: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$4.ThyNotifyService }, { type: i0.NgZone }, { type: CodeMode, decorators: [{
+                    type: Inject,
+                    args: [THE_CODE_MODE_TOKEN]
+                }] }]; }, propDecorators: { codemirror: [{
                 type: ViewChild,
                 args: ['codemirror', { read: CodeMirrorComponent, static: false }]
             }] } });
@@ -6432,7 +6548,7 @@ class TheLinkEditComponent {
     applyLink(form) {
         const link = this.link.trim();
         if (this.linkRegExp(link)) {
-            const linkPath = TheEditor.findPath(this.editor, this.node);
+            const linkPath = findPath(this.editor, this.node);
             if (this.originLink !== link) {
                 Transforms.setNodes(this.editor, { url: link }, { at: linkPath });
             }
@@ -6451,7 +6567,7 @@ class TheLinkEditComponent {
     }
 }
 TheLinkEditComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheLinkEditComponent, deps: [{ token: i1$3.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-TheLinkEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheLinkEditComponent, selector: "the-link-edit", inputs: { tag: "tag", node: "node", link: "link", text: "text", originSelection: "originSelection" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class": "this.className" } }, ngImport: i0, template: "<form\n    thyForm\n    #linkForm=\"thyForm\"\n    [thyFormValidatorConfig]=\"validatorConfig\"\n    name=\"linkForm\"\n>\n    <thy-form-group thyLabelText=\"\u6587\u672C\">\n        <input\n            thyInput\n            placeholder=\"\u8BF7\u8F93\u5165\u6587\u672C\"\n            required\n            name=\"text\"\n            [(ngModel)]=\"text\"\n            thyAutofocus\n            type=\"text\"\n        />\n    </thy-form-group>\n    <thy-form-group thyLabelText=\"\u94FE\u63A5\">\n        <input\n            name=\"link\"\n            thyInput\n            placeholder=\"\u8BF7\u8F93\u5165\u94FE\u63A5\"\n            required\n            type=\"text\"\n            #linkControl=\"ngModel\"\n            [(ngModel)]=\"link\"\n        />\n    </thy-form-group>\n    <thy-form-group-footer>\n        <div class=\"btn-pair\">\n            <button\n                thyButton=\"link-secondary\"\n                thySize=\"sm\"\n                (click)=\"closePopover()\"\n            >\u53D6\u6D88</button>\n            <button\n                thyButton=\"primary-square\"\n                thySize=\"sm\"\n                (thyFormSubmit)=\"applyLink(linkForm)\"\n            >\u5E94\u7528</button>\n        </div>\n    </thy-form-group-footer>\n</form>\n", components: [{ type: i2$2.ThyFormGroupComponent, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { type: i2$2.ThyFormGroupFooterComponent, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { type: i1$5.ThyButtonComponent, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thySquare", "thyBlock"] }], directives: [{ type: i4$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$2.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { type: i5$4.ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutoSelect", "thyAutofocus"] }, { type: i4$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { type: i4$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$2.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }] });
+TheLinkEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheLinkEditComponent, selector: "the-link-edit", inputs: { tag: "tag", node: "node", link: "link", text: "text", originSelection: "originSelection" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class": "this.className" } }, ngImport: i0, template: "<form\n    thyForm\n    #linkForm=\"thyForm\"\n    [thyFormValidatorConfig]=\"validatorConfig\"\n    name=\"linkForm\"\n>\n    <thy-form-group thyLabelText=\"\u6587\u672C\">\n        <input\n            thyInput\n            placeholder=\"\u8BF7\u8F93\u5165\u6587\u672C\"\n            required\n            name=\"text\"\n            [(ngModel)]=\"text\"\n            thyAutofocus\n            type=\"text\"\n        />\n    </thy-form-group>\n    <thy-form-group thyLabelText=\"\u94FE\u63A5\">\n        <input\n            name=\"link\"\n            thyInput\n            placeholder=\"\u8BF7\u8F93\u5165\u94FE\u63A5\"\n            required\n            type=\"text\"\n            #linkControl=\"ngModel\"\n            [(ngModel)]=\"link\"\n        />\n    </thy-form-group>\n    <thy-form-group-footer>\n        <div class=\"btn-pair\">\n            <button\n                thyButton=\"link-secondary\"\n                thySize=\"sm\"\n                (click)=\"closePopover()\"\n            >\u53D6\u6D88</button>\n            <button\n                thyButton=\"primary-square\"\n                thySize=\"sm\"\n                (thyFormSubmit)=\"applyLink(linkForm)\"\n            >\u5E94\u7528</button>\n        </div>\n    </thy-form-group-footer>\n</form>\n", components: [{ type: i2$2.ThyFormGroupComponent, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { type: i2$2.ThyFormGroupFooterComponent, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { type: i1$5.ThyButtonComponent, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thySquare", "thyBlock"] }], directives: [{ type: i4$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i4$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2$2.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { type: i5$3.ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutoSelect", "thyAutofocus"] }, { type: i4$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { type: i4$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$2.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheLinkEditComponent, decorators: [{
             type: Component,
             args: [{
@@ -6654,6 +6770,7 @@ const withLink = (editor) => {
     editor.insertText = text => {
         if (text && isUrl(text)) {
             LinkEditor.wrapLink(editor, text, text);
+            Transforms.move(editor, { distance: 1, unit: "offset" });
         }
         else {
             insertText(text);
@@ -6661,8 +6778,10 @@ const withLink = (editor) => {
     };
     editor.insertData = data => {
         const text = data.getData('text/plain');
-        if (text && isUrl(text)) {
+        const fragment = data.getData(`application/${CLIPBOARD_FORMAT_KEY}`);
+        if (text && isUrl(text) && !fragment) {
             LinkEditor.wrapLink(editor, text, text);
+            Transforms.move(editor, { distance: 1, unit: "offset" });
         }
         else {
             insertData(data);
@@ -6745,9 +6864,9 @@ class TheTableToolbarItemComponent extends TheToolbarBaseItemComponent {
             return;
         }
         const type = this.item.key;
-        this.toggleTableSelect(event, type);
+        this.toggleTableSelect(event);
     }
-    toggleTableSelect(event, type, optionsParam) {
+    toggleTableSelect(event, optionsParam) {
         if (this.isOpenTableSelect) {
             this.tableSelectRef.close();
             return;
@@ -6782,7 +6901,7 @@ TheTableToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
             <thy-icon [thyIconName]="item.icon"></thy-icon>
             <thy-icon class="link-down-icon font-size-sm text-desc table-down-icon" thyIconName="caret-down"> </thy-icon>
         </a>
-    `, 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: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+    `, 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: 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: TheTableToolbarItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -6954,7 +7073,7 @@ function mergeCell(editor, selectedCells) {
         selectCellNodes.forEach((cell, index) => {
             const { row, node } = cell;
             if (node) {
-                const cellPath = TheEditor.findPath(editor, node);
+                const cellPath = findPath(editor, node);
                 if (index === 0) {
                     leftTopCellPath = cellPath;
                 }
@@ -7472,7 +7591,7 @@ function resetTableCell(editor, table, cell, cellRow, cellCol) {
         table.children.map((row, rowIndex) => {
             row.children.map((col, colIndex) => {
                 if (rowIndex >= cellRow && rowIndex <= rowSpanIndex && colIndex >= cellCol && colIndex <= colSpanIndex) {
-                    const path = TheEditor.findPath(editor, col);
+                    const path = findPath(editor, col);
                     Transforms.setNodes(editor, { colspan: null, rowspan: null, hidden: null }, { at: path });
                 }
             });
@@ -7493,6 +7612,40 @@ function setCellMenuInvisibility(editor, menuList, selectedCells, isActiveSelect
     });
 }
 
+class NavSplitLineComponent {
+    constructor() {
+        this.mode = ToolbarItemMode.vertical;
+        this.theNavSplitLine = true;
+    }
+    get horizontal() {
+        return this.mode === ToolbarItemMode.horizontal;
+    }
+    get vertical() {
+        return this.mode === ToolbarItemMode.vertical;
+    }
+    ngOnInit() { }
+}
+NavSplitLineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: NavSplitLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NavSplitLineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: NavSplitLineComponent, selector: "nav-split-line", inputs: { mode: "mode" }, host: { properties: { "class.the-nav-split-line": "this.theNavSplitLine", "class.horizontal": "this.horizontal", "class.vertical": "this.vertical" } }, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: NavSplitLineComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nav-split-line',
+                    template: ''
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { mode: [{
+                type: Input
+            }], theNavSplitLine: [{
+                type: HostBinding,
+                args: ['class.the-nav-split-line']
+            }], horizontal: [{
+                type: HostBinding,
+                args: ['class.horizontal']
+            }], vertical: [{
+                type: HostBinding,
+                args: ['class.vertical']
+            }] } });
+
 class TheTableToolbarComponent {
     constructor(ngZone, colorSelectService, popoverRef) {
         this.ngZone = ngZone;
@@ -7603,7 +7756,7 @@ class TheTableToolbarComponent {
     }
 }
 TheTableToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheTableToolbarComponent, deps: [{ token: i0.NgZone }, { token: TheColorSelectService }, { token: i1$3.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-TheTableToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheTableToolbarComponent, selector: "the-table-toolbar", inputs: { tableStore: "tableStore", isActiveSelect: "isActiveSelect" }, ngImport: i0, template: "<thy-icon-nav>\n    <ng-container *ngFor=\"let item of cellMenuList\">\n        <a href=\"javascript:;\" thyIconNavLink *ngIf=\"!item.invisibility\" [thyTooltip]=\"item.name\"\n            (mousedown)=\"item.actionHandle()\">\n            <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n        </a>\n    </ng-container>\n    <span class=\"nav-split-line\" *ngIf=\"!isActiveSelect && isShowSplitLine\"></span>\n    <a href=\"javascript:;\" thyIconNavLink thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\" (mousedown)=\"openSelectColor($event)\">\n        <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n    </a>\n    <span class=\"nav-split-line\" *ngIf=\"deleteIcon\"></span>\n    <a *ngIf=\"deleteIcon\" href=\"javascript:;\" thyIconNavLink [thyTooltip]=\"iconName\" class=\"danger\"\n        [thyIconNavLinkIcon]=\"deleteIcon\" (mousedown)=\"onDelete($event)\" (mouseenter)=\"onEnterDelete($event)\"\n        (mouseleave)=\"onLeaveDelete($event)\"></a>\n</thy-icon-nav>", components: [{ type: i2.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+TheTableToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheTableToolbarComponent, selector: "the-table-toolbar", inputs: { tableStore: "tableStore", isActiveSelect: "isActiveSelect" }, ngImport: i0, template: "<thy-icon-nav>\n    <ng-container *ngFor=\"let item of cellMenuList\">\n        <a href=\"javascript:;\" thyIconNavLink *ngIf=\"!item.invisibility\" [thyTooltip]=\"item.name\" (mousedown)=\"item.actionHandle()\">\n            <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n        </a>\n    </ng-container>\n    <nav-split-line *ngIf=\"!isActiveSelect && isShowSplitLine\"></nav-split-line>\n    <a href=\"javascript:;\" thyIconNavLink thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\" (mousedown)=\"openSelectColor($event)\">\n        <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n    </a>\n    <nav-split-line *ngIf=\"deleteIcon\"></nav-split-line>\n    <a\n        *ngIf=\"deleteIcon\"\n        href=\"javascript:;\"\n        thyIconNavLink\n        [thyTooltip]=\"iconName\"\n        class=\"danger\"\n        [thyIconNavLinkIcon]=\"deleteIcon\"\n        (mousedown)=\"onDelete($event)\"\n        (mouseenter)=\"onEnterDelete($event)\"\n        (mouseleave)=\"onLeaveDelete($event)\"\n    ></a>\n</thy-icon-nav>\n", components: [{ type: i2.ThyIconNavComponent, selector: "thy-icon-nav", inputs: ["thyType"] }, { type: i2.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: TheTableToolbarComponent, decorators: [{
             type: Component,
             args: [{
@@ -7666,7 +7819,7 @@ class TheContextMenuComponent {
     ngOnInit() { }
 }
 TheContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheContextMenuComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-TheContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheContextMenuComponent, selector: "the-contextmenu", inputs: { menuEntities: "menuEntities", actionHandle: "actionHandle", activeHandle: "activeHandle", deactiveHandle: "deactiveHandle" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)" }, properties: { "class.the-overlay-menu-wrap": "this.wrap" } }, ngImport: i0, template: "<thy-action-menu>\n    <ng-container *ngFor=\"let menuItem of menuEntities\">\n        <a\n            thyActionMenuItem\n            href=\"javascript:;\"\n            *ngIf=\"!menuItem.invisibility\"\n            (mousedown)=\"itemMousedown($event, menuItem)\"\n            (mouseenter)=\"itemMouseenter($event, menuItem)\"\n            (mouseleave)=\"itemMouseleave($event, menuItem)\"\n        >\n            <span thyActionMenuItemIcon>\n                <thy-icon\n                    *ngIf=\"menuItem.backgroundColor; else elseIcon\"\n                    [thyIconName]=\"menuItem.icon\"\n                    thyIconType=\"twotone\"\n                    [thyTwotoneColor]=\"menuItem.backgroundColor\"\n                ></thy-icon>\n                <ng-template #elseIcon>\n                    <thy-icon [thyIconName]=\"menuItem.icon\"></thy-icon>\n                </ng-template>\n            </span>\n            <span thyActionMenuItemName>{{ menuItem.name }}</span>\n            <span *ngIf=\"menuItem.extendIcon\" thyActionMenuItemExtendIcon>\n                <thy-icon thyIconName=\"{{ menuItem.extendIcon }}\"></thy-icon>\n            </span>\n        </a>\n        <thy-action-menu-divider *ngIf=\"menuItem.divider\"></thy-action-menu-divider>\n    </ng-container>\n</thy-action-menu>\n", components: [{ type: i5$2.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5$2.ThyActionMenuDividerComponent, selector: "thy-action-menu-divider", inputs: ["thyTitle", "thyType"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$2.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }, { type: i5$2.ThyActionMenuItemExtendIconDirective, selector: "[thyActionMenuItemExtendIcon]" }] });
+TheContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheContextMenuComponent, selector: "the-contextmenu", inputs: { menuEntities: "menuEntities", actionHandle: "actionHandle", activeHandle: "activeHandle", deactiveHandle: "deactiveHandle" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)" }, properties: { "class.the-overlay-menu-wrap": "this.wrap" } }, ngImport: i0, template: "<thy-action-menu>\n    <ng-container *ngFor=\"let menuItem of menuEntities\">\n        <a\n            thyActionMenuItem\n            href=\"javascript:;\"\n            *ngIf=\"!menuItem.invisibility\"\n            (mousedown)=\"itemMousedown($event, menuItem)\"\n            (mouseenter)=\"itemMouseenter($event, menuItem)\"\n            (mouseleave)=\"itemMouseleave($event, menuItem)\"\n        >\n            <span thyActionMenuItemIcon>\n                <thy-icon\n                    *ngIf=\"menuItem.backgroundColor; else elseIcon\"\n                    [thyIconName]=\"menuItem.icon\"\n                    thyIconType=\"twotone\"\n                    [thyTwotoneColor]=\"menuItem.backgroundColor\"\n                ></thy-icon>\n                <ng-template #elseIcon>\n                    <thy-icon [thyIconName]=\"menuItem.icon\"></thy-icon>\n                </ng-template>\n            </span>\n            <span thyActionMenuItemName>{{ menuItem.name }}</span>\n            <span *ngIf=\"menuItem.extendIcon\" thyActionMenuItemExtendIcon>\n                <thy-icon thyIconName=\"{{ menuItem.extendIcon }}\"></thy-icon>\n            </span>\n        </a>\n        <thy-action-menu-divider *ngIf=\"menuItem.divider\"></thy-action-menu-divider>\n    </ng-container>\n</thy-action-menu>\n", components: [{ type: i5$1.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }, { type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5$1.ThyActionMenuDividerComponent, selector: "thy-action-menu-divider", inputs: ["thyTitle", "thyType"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5$1.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5$1.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }, { type: i5$1.ThyActionMenuItemExtendIconDirective, selector: "[thyActionMenuItemExtendIcon]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheContextMenuComponent, decorators: [{
             type: Component,
             args: [{
@@ -8038,7 +8191,7 @@ class TheInsertMarkComponent {
     ngOnDestroy() { }
 }
 TheInsertMarkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheInsertMarkComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TheInsertMarkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheInsertMarkComponent, selector: "the-table-insert-mark", inputs: { type: "type", at: "at", tableStore: "tableStore" }, ngImport: i0, template: "<div\n    [thyTooltip]=\"!disabled && tooltipContent\"\n    class=\"the-table-controls-insert-wrapper\"\n    [ngClass]=\"{ disabled: disabled }\"\n    contenteditable=\"false\"\n    (mousedown)=\"onMouseDown($event)\"\n    (mouseenter)=\"onMouseEnter($event)\"\n    (mouseleave)=\"onMouseLeave($event)\"\n>\n    <div\n        class=\"the-table-controls-insert-line\"\n        *ngIf=\"dotWrapperHovered\"\n        [attr.data-dot-type]=\"type\"\n        [ngStyle]=\"{ height: type === 'column' && insertLength, width: type === 'row' && insertLength }\"\n    ></div>\n</div>\n", directives: [{ type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+TheInsertMarkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheInsertMarkComponent, selector: "the-table-insert-mark", inputs: { type: "type", at: "at", tableStore: "tableStore" }, ngImport: i0, template: "<div\n    [thyTooltip]=\"!disabled && tooltipContent\"\n    class=\"the-table-controls-insert-wrapper\"\n    [ngClass]=\"{ disabled: disabled }\"\n    contenteditable=\"false\"\n    (mousedown)=\"onMouseDown($event)\"\n    (mouseenter)=\"onMouseEnter($event)\"\n    (mouseleave)=\"onMouseLeave($event)\"\n>\n    <div\n        class=\"the-table-controls-insert-line\"\n        *ngIf=\"dotWrapperHovered\"\n        [attr.data-dot-type]=\"type\"\n        [ngStyle]=\"{ height: type === 'column' && insertLength, width: type === 'row' && insertLength }\"\n    ></div>\n</div>\n", directives: [{ type: i7.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheInsertMarkComponent, decorators: [{
             type: Component,
             args: [{
@@ -8252,9 +8405,12 @@ class TheTableComponent extends TheBaseElementComponent {
     useRowControls() {
         if (this.selection) {
             this.rowControls = this.calculateRowControls();
-            this.cdr.detectChanges();
+            this.cdr.markForCheck();
         }
     }
+    detectChanges() {
+        this.cdr.detectChanges();
+    }
     calculateMinRowSpanCellForRows() {
         const table = this.element;
         const cells = table.children.map((row, index) => {
@@ -8408,23 +8564,23 @@ class TheTableComponent extends TheBaseElementComponent {
             const columns = tr.children.map(cell => {
                 return { width: Math.round(tableWidth / tr.children.length) - tr.children.length };
             });
-            TheEditor.setNode(this.editor, { columns }, this.element);
+            setNode(this.editor, { columns }, this.element);
         }
     }
     initializeRows() {
         this.element.children.map(row => {
             if (!row.height) {
                 const element = TheEditor.toDOMNode(this.editor, row);
-                TheEditor.setNode(this.editor, { height: getElementHeight(element) }, row);
+                setNode(this.editor, { height: getElementHeight(element) }, row);
             }
         });
     }
     transformRowHeight() {
         const rowElements = this.nativeElement.querySelector('tbody').children;
         if (rowElements) {
-            [...rowElements].map((row, index) => {
+            [...rowElements].map((row, index$1) => {
                 const height = getElementHeight(row);
-                TheEditor.setNode(this.editor, { height }, this.element.children[index]);
+                setNode(this.editor, { height }, this.element.children[index$1]);
             });
         }
     }
@@ -8433,7 +8589,7 @@ class TheTableComponent extends TheBaseElementComponent {
         const columns = cols.map(col => {
             return { width: getElementWidth(col) };
         });
-        TheEditor.setNode(this.editor, { columns }, this.element);
+        setNode(this.editor, { columns }, this.element);
     }
     onRowMouseDown(event, index) {
         event.stopPropagation();
@@ -8516,7 +8672,7 @@ TheTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             provide: TheTableToken,
             useExisting: TheTableComponent
         }
-    ], viewQueries: [{ propertyName: "tableWrapper", first: true, predicate: ["tableWrapper"], descendants: true, read: ElementRef, static: true }, { propertyName: "theTableElement", first: true, predicate: ["theTable"], descendants: true, read: ElementRef, static: true }, { propertyName: "tbodyElement", first: true, predicate: ["tbody"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"the-table-container\"\n    theColumnResize\n    [ngClass]=\"{\n        'the-table-with-controls': isInTable,\n        'the-table-selection-hide': tableStore.isCellSelecting || tableStore.isRightClicking\n    }\"\n>\n    <div class=\"the-table-row-controls-wrapper\" *ngIf=\"!readonly\">\n        <div>\n            <div\n                class=\"the-table-corner-controls\"\n                [ngClass]=\"{ active: isSelectedAllCell, dangerous: tableStore.isSelectedTable && tableStore.dangerousCells.length > 0 }\"\n            >\n                <button type=\"button\" class=\"the-table-corner-button\" (mousedown)=\"onSelectTable($event)\"></button>\n                <div class=\"the-table-corner-controls-insert-row-marker\">\n                    <the-table-insert-mark type=\"row\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n                </div>\n                <div class=\"the-table-corner-controls-insert-column-marker\">\n                    <the-table-insert-mark type=\"column\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n                </div>\n            </div>\n            <div class=\"the-table-row-controls\">\n                <div class=\"the-table-row-controls-inner\">\n                    <div\n                        class=\"the-table-row-controls-button-wrap\"\n                        *ngFor=\"let control of rowControls; let i = index; trackBy: trackByFnRowCotrols\"\n                        [ngClass]=\"{\n                            active: tableStore.selectedRowsIndex.includes(control.rowIndex),\n                            dangerous: tableStore.dangerousRowsIndex.includes(control.rowIndex) && tableStore.dangerousCells.length > 0\n                        }\"\n                    >\n                        <button\n                            (mousedown)=\"onRowMouseDown($event, control.rowIndex)\"\n                            type=\"button\"\n                            [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n                            class=\"the-table-row-controls-button the-table-controls-button\"\n                        ></button>\n                        <the-table-insert-mark type=\"row\" [at]=\"control.rowIndex + 1\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"the-table-wrapper\" #tableWrapper>\n        <table class=\"the-table\" #theTable [ngClass]=\"{ 'the-table-with-controls': isInTable }\">\n            <colgroup *ngIf=\"columns\">\n                <col *ngFor=\"let col of columns\" [ngStyle]=\"{ width: col.width + 'px' }\" />\n            </colgroup>\n            <thead>\n                <tr class=\"the-table-col-controls-wrapper\">\n                    <th\n                        class=\"the-table-col-controls\"\n                        (mousedown)=\"onColMouseDown($event, i)\"\n                        *ngFor=\"let control of colControls; let i = index; trackBy: trackByFnColCotrols\"\n                    >\n                        <the-table-insert-mark\n                            *ngIf=\"isInTable\"\n                            type=\"column\"\n                            [at]=\"i + 1\"\n                            [tableStore]=\"tableStore\"\n                        ></the-table-insert-mark>\n                        <div\n                            class=\"the-table-col-controls-inner\"\n                            [ngClass]=\"{\n                                active: tableStore.selectedColumnsIndex.includes(i),\n                                dangerous: tableStore.dangerousColumnsIndex.includes(i) && tableStore.dangerousCells.length > 0\n                            }\"\n                        ></div>\n                    </th>\n                </tr>\n            </thead>\n            <tbody #tbody>\n                <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"> </slate-children>\n            </tbody>\n        </table>\n    </div>\n</div>\n", components: [{ type: TheInsertMarkComponent, selector: "the-table-insert-mark", inputs: ["type", "at", "tableStore"] }, { type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }], directives: [{ type: TheColumnResizeDirective, selector: "div[theColumnResize]" }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    ], viewQueries: [{ propertyName: "tableWrapper", first: true, predicate: ["tableWrapper"], descendants: true, read: ElementRef, static: true }, { propertyName: "theTableElement", first: true, predicate: ["theTable"], descendants: true, read: ElementRef, static: true }, { propertyName: "tbodyElement", first: true, predicate: ["tbody"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"the-table-container\"\n    theColumnResize\n    [ngClass]=\"{\n        'the-table-with-controls': isInTable,\n        'the-table-selection-hide': tableStore.isCellSelecting || tableStore.isRightClicking\n    }\"\n>\n    <div class=\"the-table-row-controls-wrapper\" *ngIf=\"!readonly && isInTable\">\n        <div>\n            <div\n                class=\"the-table-corner-controls\"\n                [ngClass]=\"{ active: isSelectedAllCell, dangerous: tableStore.isSelectedTable && tableStore.dangerousCells.length > 0 }\"\n            >\n                <button type=\"button\" class=\"the-table-corner-button\" (mousedown)=\"onSelectTable($event)\"></button>\n                <div class=\"the-table-corner-controls-insert-row-marker\">\n                    <the-table-insert-mark type=\"row\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n                </div>\n                <div class=\"the-table-corner-controls-insert-column-marker\">\n                    <the-table-insert-mark type=\"column\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n                </div>\n            </div>\n            <div class=\"the-table-row-controls\">\n                <div class=\"the-table-row-controls-inner\">\n                    <div\n                        class=\"the-table-row-controls-button-wrap\"\n                        *ngFor=\"let control of rowControls; let i = index; trackBy: trackByFnRowCotrols\"\n                        [ngClass]=\"{\n                            active: tableStore.selectedRowsIndex.includes(control.rowIndex),\n                            dangerous: tableStore.dangerousRowsIndex.includes(control.rowIndex) && tableStore.dangerousCells.length > 0\n                        }\"\n                    >\n                        <button\n                            (mousedown)=\"onRowMouseDown($event, control.rowIndex)\"\n                            type=\"button\"\n                            [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n                            class=\"the-table-row-controls-button the-table-controls-button\"\n                        ></button>\n                        <the-table-insert-mark type=\"row\" [at]=\"control.rowIndex + 1\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"the-table-wrapper\" #tableWrapper>\n        <table class=\"the-table\" #theTable [ngClass]=\"{ 'the-table-with-controls': isInTable }\">\n            <colgroup *ngIf=\"columns\">\n                <col *ngFor=\"let col of columns\" [ngStyle]=\"{ width: col.width + 'px' }\" />\n            </colgroup>\n            <thead>\n                <tr class=\"the-table-col-controls-wrapper\">\n                    <th\n                        class=\"the-table-col-controls\"\n                        (mousedown)=\"onColMouseDown($event, i)\"\n                        *ngFor=\"let control of colControls; let i = index; trackBy: trackByFnColCotrols\"\n                    >\n                        <the-table-insert-mark\n                            *ngIf=\"isInTable\"\n                            type=\"column\"\n                            [at]=\"i + 1\"\n                            [tableStore]=\"tableStore\"\n                        ></the-table-insert-mark>\n                        <div\n                            class=\"the-table-col-controls-inner\"\n                            [ngClass]=\"{\n                                active: tableStore.selectedColumnsIndex.includes(i),\n                                dangerous: tableStore.dangerousColumnsIndex.includes(i) && tableStore.dangerousCells.length > 0\n                            }\"\n                        ></div>\n                    </th>\n                </tr>\n            </thead>\n            <tbody #tbody>\n                <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"> </slate-children>\n            </tbody>\n        </table>\n    </div>\n</div>\n", components: [{ type: TheInsertMarkComponent, selector: "the-table-insert-mark", inputs: ["type", "at", "tableStore"] }, { type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }], directives: [{ type: TheColumnResizeDirective, selector: "div[theColumnResize]" }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheTableComponent, decorators: [{
             type: Component,
             args: [{
@@ -8575,9 +8731,9 @@ function clearTableNode(opts, editor, isTopToBot) {
 function calculateAnchorPositionInCell(editor) {
     let isFirstLine = false;
     let isLastLine = false;
-    const anchorBlock = TheEditor.anchorBlock(editor);
-    const anchorBlockPath = TheEditor.findPath(editor, anchorBlock);
-    const anchorBlockDom = TheEditor.toDOMNode(editor, anchorBlock);
+    const anchorBlock$1 = anchorBlock(editor);
+    const anchorBlockPath = findPath(editor, anchorBlock$1);
+    const anchorBlockDom = AngularEditor.toDOMNode(editor, anchorBlock$1);
     const valueRangeRect = anchorBlockDom.getBoundingClientRect();
     const anchorBlockHeight = window.getComputedStyle(anchorBlockDom).lineHeight;
     const nativeSelection = window.getSelection();
@@ -8600,11 +8756,13 @@ class TheTableRowComponent extends TheBaseElementComponent {
         super.onContextChange();
         if (this.initialized) {
             this.useBackground();
+            this.useHeight();
         }
     }
     ngOnInit() {
         super.ngOnInit();
         this.useBackground();
+        this.useHeight();
     }
     useBackground() {
         if (this.element.header && !this.backgroundColor) {
@@ -9349,6 +9507,7 @@ class TheTdComponent extends TheBaseElementComponent {
             this.applyRowSize(deltaSize);
         }
         this.tableComponent.useRowControls();
+        this.tableComponent.detectChanges();
         this.updateOverlayHandleSizeAndOffset();
     }
     _createOverlayForHandle() {
@@ -9620,8 +9779,8 @@ const withTable = (editor) => {
         if (startBlockPath.length <= startPosition.cellEntry[1].length + 1 &&
             startBlockPath.pop() === 0 &&
             selection.anchor.offset === 0 &&
-            TheEditor.isStart(editor, selection.anchor, startBlockPath) &&
-            !Editor.isVoid(editor, TheEditor.anchorBlock(editor))) {
+            isStart(editor, selection.anchor, startBlockPath) &&
+            !Editor.isVoid(editor, anchorBlock(editor))) {
             return;
         }
         deleteBackward(unit);
@@ -9661,11 +9820,11 @@ const withTable = (editor) => {
                 const { isFirstLine, isLastLine } = calculateAnchorPositionInCell(editor);
                 startPath.pop();
                 endPath.pop();
-                if ((TheEditor.anchorBlockEntry(editor)[1].toString() !== startPath.toString() || !isFirstLine) && isMoveUp) {
+                if ((anchorBlockEntry(editor)[1].toString() !== startPath.toString() || !isFirstLine) && isMoveUp) {
                     onKeydown(event);
                     return;
                 }
-                if ((TheEditor.anchorBlockEntry(editor)[1].toString() !== endPath.toString() || !isLastLine) && isMoveDown) {
+                if ((anchorBlockEntry(editor)[1].toString() !== endPath.toString() || !isLastLine) && isMoveDown) {
                     onKeydown(event);
                     return;
                 }
@@ -9847,7 +10006,7 @@ const withTable = (editor) => {
         setFragmentData(unit);
     };
     editor.insertData = data => {
-        const fragment = extractFragment(data, ELEMENT_UNIQUE_ID);
+        const fragment = extractFragment(data);
         if (fragment) {
             const opts = new TableOptions$1();
             const { selection } = editor;
@@ -9979,7 +10138,7 @@ const withInsertParagraphNodes = (types = []) => (editor) => {
     editor.normalizeNode = ([currentNode, currentPath]) => {
         if (Text.isText(currentNode) && currentPath.length) {
             const [node] = Editor.parent(editor, currentPath);
-            const containerBlocks = [...types, ...TheQueries.getContainerBlocks(editor)];
+            const containerBlocks = [...types, ...getContainerBlocks(editor)];
             if (Element$1.isElement(node) && containerBlocks.includes(node.type)) {
                 const paragraph = createEmptyParagraph();
                 paragraph.children[0].text = currentNode.text;
@@ -10000,7 +10159,12 @@ const withDeserializeHMTL = (editor) => {
         if (html && !slateFragment) {
             const htmlDom = new DOMParser().parseFromString(html, 'text/html');
             const fragment = TheiaConverter.convertToTheia(Array.from(htmlDom.body.children));
-            TheTransforms.insertTheElements(editor, fragment);
+            // 无法识别HTML内容时后退一下：识别纯文本
+            if (fragment.length === 1 && Editor.isEmpty(editor, fragment[0]) && fragment[0].type === ElementKinds.paragraph) {
+                insertData(data);
+                return;
+            }
+            insertTheElements(editor, fragment);
             return;
         }
         insertData(data);
@@ -10035,6 +10199,11 @@ class TheVerticalToolbarItemComponent extends TheToolbarBaseItemComponent {
     get isOpened() {
         return this.dropdownPopoverRef && this.dropdownPopoverRef.getOverlayRef() && this.dropdownPopoverRef.getOverlayRef().hasAttached();
     }
+    handleDocumentMouseDown(event) {
+        if (!this.elementRef.nativeElement.contains(event.target)) {
+            this.close();
+        }
+    }
     ngOnInit() { }
     statusChange(editor) {
         var _a, _b;
@@ -10074,7 +10243,7 @@ class TheVerticalToolbarItemComponent extends TheToolbarBaseItemComponent {
             offset: 10,
             viewContainerRef: this.viewContainerRef,
             insideClosable: false,
-            backdropClosable: true,
+            backdropClosable: false,
             hasBackdrop: false
         });
     }
@@ -10085,7 +10254,7 @@ class TheVerticalToolbarItemComponent extends TheToolbarBaseItemComponent {
     }
 }
 TheVerticalToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheVerticalToolbarItemComponent, deps: [{ token: i0.ElementRef }, { token: i1$6.ThyPopover }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-TheVerticalToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheVerticalToolbarItemComponent, selector: "the-toolbar-vertical-align-item", inputs: { item: "item", menus: "menus", editor: "editor", toolbarItem: "toolbarItem" }, host: { properties: { "class.hide": "!active" }, classAttribute: "the-toolbar-dropdown-container verticalAlign" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["VerticalAlignItems"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<a\n    thyIconNavLink\n    class=\"icon-mode link-with-down\"\n    [thyTooltip]=\"toolbarItem?.name\"\n    [thyIconNavLinkActive]=\"isOpened\"\n    thyTooltipPlacement=\"top\"\n    (mousedown)=\"execute($event)\"\n>\n    <thy-icon [thyIconName]=\"activeMenu?.icon\"></thy-icon>\n    <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #VerticalAlignItems>\n    <thy-action-menu class=\"dropdown\">\n        <ng-container *ngFor=\"let menu of toolbarItem?.includes\">\n            <a thyActionMenuItem href=\"javascript:;\" (mousedown)=\"itemMousedown($event, menu)\" [ngStyle]=\"menu?.styles\">\n                <span *ngIf=\"menu.icon\" thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu?.icon\"></thy-icon>\n                </span>\n                <span thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n", components: [{ type: i2.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5$2.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }], directives: [{ type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$2.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
+TheVerticalToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheVerticalToolbarItemComponent, selector: "the-toolbar-vertical-align-item", inputs: { item: "item", menus: "menus", editor: "editor", toolbarItem: "toolbarItem" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class.hide": "!active" }, classAttribute: "the-toolbar-dropdown-container verticalAlign" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["VerticalAlignItems"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<a\n    thyIconNavLink\n    class=\"icon-mode link-with-down\"\n    [thyTooltip]=\"toolbarItem?.name\"\n    [thyIconNavLinkActive]=\"isOpened\"\n    thyTooltipPlacement=\"top\"\n    (mousedown)=\"execute($event)\"\n>\n    <thy-icon [thyIconName]=\"activeMenu?.icon\"></thy-icon>\n    <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #VerticalAlignItems>\n    <thy-action-menu class=\"dropdown\">\n        <ng-container *ngFor=\"let menu of toolbarItem?.includes\">\n            <a\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyActionMenuItemActive]=\"menu.key === activeMenu?.key\"\n                [ngStyle]=\"menu?.styles\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n            >\n                <span *ngIf=\"menu.icon\" thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu?.icon\"></thy-icon>\n                </span>\n                <span thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n", components: [{ type: i2.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5$1.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }], directives: [{ type: i7.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$1.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5$1.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5$1.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheVerticalToolbarItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -10107,6 +10276,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
             }], template: [{
                 type: ViewChild,
                 args: ['VerticalAlignItems', { read: TemplateRef, static: true }]
+            }], handleDocumentMouseDown: [{
+                type: HostListener,
+                args: ['document: mousedown', ['$event']]
             }] } });
 
 const VerticalAlignOptions = [
@@ -10142,25 +10314,401 @@ const VerticalAlignOptions = [
     }
 ];
 
-const internalPlugins = [
-    withTheHistory,
-    withAutoInsertData(),
-    withRemoveEmpty,
-    withRemoveVoid,
-    withResetType,
-    withImage,
-    withIndent([ElementKinds.checkItem, ElementKinds.numberedList, ElementKinds.bulletedList, ElementKinds.paragraph, ...HEADING_TYPES]),
-    withList({ validLiChildrenTypes: [ElementKinds.image] }),
-    withLink,
-    withTable,
-    withTodoItem,
-    withHr,
-    withAlign,
-    withCode,
-    withHeading,
-    withMark(),
-    withBlockquote,
-    withNodeID({ idKey: ELEMENT_UNIQUE_ID, idCreator }),
+const PaintFormatEditor = {
+    formatBrush(editor) {
+        const contextService = editor.injector.get(TheContextService);
+        const obj = {};
+        for (const key of MarkProps) {
+            const k = contextService.paintFormatStatus.marks[key];
+            obj[key] = k || null;
+        }
+        const block = anchorBlock(editor);
+        if (block && Range.isCollapsed(editor.selection)) {
+            // TODO:: 在撤销时有bug, 临时使用withoutSaving处理
+            HistoryEditor.withoutSaving(editor, () => {
+                const path = TheEditor.findPath(editor, block);
+                setMarks(editor, obj, path);
+            });
+        }
+        else {
+            setMarks(editor, obj);
+        }
+        PaintFormatEditor.cancelFormatBrushStatus(editor);
+    },
+    isActive(editor) {
+        const contextService = editor.injector.get(TheContextService);
+        const res = contextService.paintFormatStatus.isActive;
+        return res;
+    },
+    enableFormatBrush(editor) {
+        const contextService = editor.injector.get(TheContextService);
+        if (contextService.paintFormatStatus.isActive) {
+            return PaintFormatEditor.cancelFormatBrushStatus(editor);
+        }
+        contextService.paintFormatStatus = {
+            isActive: true,
+            marks: getSelectionMarks(editor)
+        };
+        const element = EDITOR_TO_ELEMENT.get(editor);
+        element.classList.add('pointer-paint');
+        contextService.onMouseUp$
+            .pipe(skip(1), filter(event => element.contains(event.target)), take(1))
+            .subscribe((event) => {
+            if (contextService.paintFormatStatus.isActive) {
+                PaintFormatEditor.formatBrush(editor);
+            }
+        });
+        editor.onChange();
+    },
+    cancelFormatBrushStatus(editor) {
+        const contextService = editor.injector.get(TheContextService);
+        contextService.paintFormatStatus = {
+            isActive: false,
+            marks: {}
+        };
+        const element = EDITOR_TO_ELEMENT.get(editor);
+        element.classList.remove('pointer-paint');
+        editor.onChange();
+    }
+};
+
+const PaintFormatOptions = [
+    {
+        key: ToolbarActionTypes.undo,
+        icon: 'undo',
+        name: '撤销',
+        execute: (editor) => editor.undo()
+    },
+    {
+        key: ToolbarActionTypes.redo,
+        icon: 'redo',
+        name: '重做',
+        execute: (editor) => editor.redo()
+    },
+    {
+        key: ToolbarActionTypes.paintformat,
+        icon: 'paintformat',
+        name: '格式刷',
+        execute: PaintFormatEditor.enableFormatBrush,
+        active: PaintFormatEditor.isActive
+    },
+    {
+        key: ToolbarActionTypes.clean,
+        icon: 'clean',
+        name: '清除格式',
+        execute: (editor) => {
+            const { selection } = editor;
+            if (!selection) {
+                return;
+            }
+            if (TableEditor.clearMark(editor)) {
+                return;
+            }
+            if (Range.isCollapsed(selection)) {
+                const marks = Editor.marks(editor);
+                for (const key of Object.keys(marks)) {
+                    Editor.removeMark(editor, key);
+                }
+            }
+            else {
+                const unsetMarks = {};
+                MarkProps.forEach(key => {
+                    unsetMarks[key] = null;
+                });
+                setMarks(editor, unsetMarks);
+            }
+        }
+    }
+];
+
+/**
+ * whether the current node is a clean paragraph
+ * @param editor
+ * @param text
+ * @returns boolean
+ */
+const isCleanEmptyParagraph = (editor) => {
+    const isCollapsedCursor = TheEditor.isFocused(editor) && editor.selection && Range.isCollapsed(editor.selection);
+    if (!isCollapsedCursor) {
+        return false;
+    }
+    const block = Node.ancestor(editor, [editor.selection.anchor.path[0]]);
+    const textIndent = 'textIndent';
+    const align = 'align';
+    const hasTextIndent = block[textIndent];
+    const hasAlign = block[align];
+    if (Node.string(block) === '' &&
+        Element$1.isElement(block) &&
+        block.type === ElementKinds.paragraph &&
+        block.children.length === 1 &&
+        Text.isText(block.children[0]) &&
+        !Editor.isVoid(editor, block) &&
+        !hasTextIndent &&
+        !hasAlign) {
+        return true;
+    }
+    return false;
+};
+
+class TheToolbarItemComponent extends TheToolbarBaseItemComponent {
+    constructor(ngZone, cfr) {
+        super();
+        this.ngZone = ngZone;
+        this.cfr = cfr;
+        this.itemMode = ToolbarItemMode.horizontal;
+        this.ToolbarItemMode = ToolbarItemMode;
+        this.active = false;
+    }
+    ngOnInit() {
+        var _a, _b;
+        if (((_a = this.item) === null || _a === void 0 ? void 0 : _a.quickItemComponent) && isComponentType((_b = this.item) === null || _b === void 0 ? void 0 : _b.quickItemComponent)) {
+            this.renderToolbarItem();
+        }
+    }
+    statusChange(editor) {
+        var _a, _b;
+        this.active = ((_a = this.item) === null || _a === void 0 ? void 0 : _a.active) ? (_b = this.item) === null || _b === void 0 ? void 0 : _b.active(editor) : false;
+    }
+    execute(event) {
+        var _a, _b, _c;
+        super.execute(event);
+        if (!((_a = this.item) === null || _a === void 0 ? void 0 : _a.execute) || ((_b = this.editor) === null || _b === void 0 ? void 0 : _b.disabled)) {
+            return;
+        }
+        (_c = this.item) === null || _c === void 0 ? void 0 : _c.execute(this.editor);
+    }
+    renderToolbarItem() {
+        this.ngZone.run(() => {
+            const toolbarItemFactory = this.cfr.resolveComponentFactory(this.item.quickItemComponent);
+            const tollbarItemRef = this.toolbarContainer.createComponent(toolbarItemFactory);
+            tollbarItemRef.instance.editor = this.editor;
+            tollbarItemRef.instance.item = this.item;
+            tollbarItemRef.instance.itemMode = ToolbarItemMode.vertical;
+        });
+    }
+}
+TheToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheToolbarItemComponent, deps: [{ token: i0.NgZone }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component });
+TheToolbarItemComponent.ɵcmp = i0.ɵɵ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: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: `
+        <ng-container *ngIf="itemMode === ToolbarItemMode.horizontal; else selectionItem">
+            <a
+                thyIconNavLink
+                [thyIconNavLinkIcon]="item.icon"
+                [thyTooltip]="item.name"
+                thyTooltipPlacement="top"
+                [thyIconNavLinkActive]="active"
+                (mousedown)="execute($event)"
+            ></a>
+        </ng-container>
+        <ng-template #selectionItem>
+            <ng-container *ngIf="!item?.quickItemComponent">
+                <thy-icon [thyIconName]="item?.icon" [thyIconRotate]="0" class="quick-toolbar-icon"></thy-icon>
+                <span class="quick-toolbar-name">{{ item?.name }}</span>
+            </ng-container>
+        </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: [{
+            type: Component,
+            args: [{
+                    selector: 'the-toolbar-item',
+                    template: `
+        <ng-container *ngIf="itemMode === ToolbarItemMode.horizontal; else selectionItem">
+            <a
+                thyIconNavLink
+                [thyIconNavLinkIcon]="item.icon"
+                [thyTooltip]="item.name"
+                thyTooltipPlacement="top"
+                [thyIconNavLinkActive]="active"
+                (mousedown)="execute($event)"
+            ></a>
+        </ng-container>
+        <ng-template #selectionItem>
+            <ng-container *ngIf="!item?.quickItemComponent">
+                <thy-icon [thyIconName]="item?.icon" [thyIconRotate]="0" class="quick-toolbar-icon"></thy-icon>
+                <span class="quick-toolbar-name">{{ item?.name }}</span>
+            </ng-container>
+        </ng-template>
+        <ng-container #toolbarContainer></ng-container>
+    `,
+                    host: {
+                        class: 'the-toolbar-item'
+                    }
+                }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ComponentFactoryResolver }]; }, propDecorators: { item: [{
+                type: Input
+            }], editor: [{
+                type: Input
+            }], itemMode: [{
+                type: Input
+            }], toolbarContainer: [{
+                type: ViewChild,
+                args: ['toolbarContainer', { read: ViewContainerRef, static: true }]
+            }] } });
+
+class TheQuickToolbarComponent extends mixinUnsubscribe(MixinBase) {
+    constructor(popoverRef, elementRef) {
+        super();
+        this.popoverRef = popoverRef;
+        this.elementRef = elementRef;
+        this.ToolbarItemMode = ToolbarItemMode;
+        this.ToolbarActionTypes = ToolbarActionTypes;
+    }
+    handleMouseDown(event) {
+        if (!this.elementRef.nativeElement.contains(event.target)) {
+            this.popoverRef.close();
+        }
+        else {
+            event.preventDefault();
+        }
+    }
+    handleEnter() {
+        this.popoverRef.close();
+    }
+    ngOnInit() {
+        this.editorElement = AngularEditor.toDOMNode(this.editor, this.editor);
+    }
+    stopPropagation(event) {
+        event.preventDefault();
+    }
+    selectionChange(event) {
+        this.removeHotKey();
+        const toolbarItem = this.quickToolbarItems.find(item => item.key === event.value);
+        if (toolbarItem === null || toolbarItem === void 0 ? void 0 : toolbarItem.execute) {
+            toolbarItem.execute(this.editor);
+        }
+    }
+    removeHotKey() {
+        const node = Node.get(this.editor, this.editor.selection.anchor.path);
+        if (node && Text.equals({ text: QUICK_TOOLBAR_HOTKEY }, node)) {
+            Editor.deleteBackward(this.editor);
+        }
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}
+TheQuickToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheQuickToolbarComponent, deps: [{ token: i1$3.ThyPopoverRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+TheQuickToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheQuickToolbarComponent, selector: "the-quick-toolbar", inputs: { editor: "editor", quickToolbarItems: "quickToolbarItems" }, host: { listeners: { "document: mousedown": "handleMouseDown($event)", "document: keydown.enter": "handleEnter()" } }, usesInheritance: true, ngImport: i0, template: "<thy-selection-list\n    class=\"the-quick-toolbar\"\n    [thyBindKeyEventContainer]=\"editorElement\"\n    (thySelectionChange)=\"selectionChange($event)\"\n    [thyMultiple]=\"false\"\n>\n    <ng-container *ngFor=\"let item of quickToolbarItems\">\n        <ng-container *ngIf=\"item.key !== ToolbarActionTypes.split; else splitLine\">\n            <thy-list-option [thyValue]=\"item?.key\" (mousedown)=\"stopPropagation($event)\">\n                <the-toolbar-item [editor]=\"editor\" [item]=\"item\" [itemMode]=\"ToolbarItemMode.vertical\"></the-toolbar-item>\n            </thy-list-option>\n        </ng-container>\n    </ng-container>\n</thy-selection-list>\n\n<ng-template #splitLine>\n    <nav-split-line [mode]=\"ToolbarItemMode.horizontal\"></nav-split-line>\n</ng-template>\n", components: [{ type: i2$3.ThySelectionListComponent, selector: "thy-selection-list,[thy-selection-list]", inputs: ["thyMultiple", "thyBindKeyEventContainer", "thyScrollContainer", "thyBeforeKeydown", "thyUniqueKey", "thyCompareWith", "thyLayout", "thyAutoActiveFirstItem", "thySize", "thySpaceKeyEnabled"], outputs: ["thySelectionChange"] }, { type: i5$3.ThyListOptionComponent, selector: "thy-list-option,[thy-list-option]", inputs: ["id", "thyValue", "thyDisabled"] }, { type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: ["item", "editor", "itemMode"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheQuickToolbarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'the-quick-toolbar',
+                    templateUrl: 'quick-toolbar.component.html'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$3.ThyPopoverRef }, { type: i0.ElementRef }]; }, propDecorators: { editor: [{
+                type: Input
+            }], quickToolbarItems: [{
+                type: Input
+            }], handleMouseDown: [{
+                type: HostListener,
+                args: ['document: mousedown', ['$event']]
+            }], handleEnter: [{
+                type: HostListener,
+                args: ['document: keydown.enter']
+            }] } });
+
+const OperationTypes = ['insert_text', 'remove_node', 'merge_node'];
+const QuickInsertEditor = {
+    openQuickToolbar(editor, toolbarItems, origin) {
+        const overlay = editor.injector.get(Overlay);
+        const viewContainerRef = editor.injector.get(ViewContainerRef);
+        const thyPopover = editor.injector.get(ThyPopover);
+        const quickToolbarRef = thyPopover.open(TheQuickToolbarComponent, {
+            initialState: {
+                editor,
+                quickToolbarItems: toolbarItems
+            },
+            origin,
+            viewContainerRef: viewContainerRef,
+            backdropClosable: true,
+            placement: 'bottomLeft',
+            offset: 4,
+            hasBackdrop: false,
+            insideClosable: true,
+            panelClass: 'the-quick-toolbar-container',
+            scrollStrategy: overlay.scrollStrategies.reposition(),
+            manualClosure: true
+        });
+        THE_EDITOR_QUICK_TOOLBAR_REF.set(editor, quickToolbarRef);
+    },
+    closeQuickToolbar(editor) {
+        const quickToolbarRef = THE_EDITOR_QUICK_TOOLBAR_REF.get(editor);
+        if (quickToolbarRef) {
+            quickToolbarRef.close();
+            THE_EDITOR_QUICK_TOOLBAR_REF.set(editor, null);
+        }
+    },
+    isOpenToolbar(editor, opTypes = OperationTypes) {
+        const isCollapsedCursor = TheEditor.isFocused(editor) && editor.selection && Range.isCollapsed(editor.selection);
+        if (!isCollapsedCursor) {
+            return false;
+        }
+        const block = Node.ancestor(editor, [editor.selection.anchor.path[0]]);
+        const { undos } = editor.history;
+        const lastBatch = undos[undos.length - 1];
+        const lastOp = lastBatch && lastBatch[lastBatch.length - 1];
+        if (lastOp &&
+            block.children.length === 1 &&
+            block.type === ElementKinds.paragraph &&
+            Node.string(block) === QUICK_TOOLBAR_HOTKEY &&
+            opTypes.includes(lastOp.type) &&
+            (lastOp.text === QUICK_TOOLBAR_HOTKEY || lastOp.text === undefined)) {
+            return true;
+        }
+        return false;
+    }
+};
+
+const withQuickInsert = (editor) => {
+    const { onKeydown, deleteBackward, onChange } = editor;
+    editor.onKeydown = (event) => {
+        if (event.key === QUICK_TOOLBAR_HOTKEY && isCleanEmptyParagraph(editor)) {
+            const rootNode = AngularEditor.toDOMNode(editor, Node.ancestor(editor, [editor.selection.anchor.path[0]]));
+            const theEditorComponent = editor.injector.get(TheEditorComponent);
+            const quickToolbars = theEditorComponent.quickToolbarItems;
+            QuickInsertEditor.openQuickToolbar(editor, quickToolbars, rootNode);
+        }
+        onKeydown(event);
+    };
+    editor.deleteBackward = unit => {
+        if (!QuickInsertEditor.isOpenToolbar(editor, ['remove_text'])) {
+            QuickInsertEditor.closeQuickToolbar(editor);
+        }
+        deleteBackward(unit);
+    };
+    editor.onChange = () => {
+        onChange();
+        if (editor.selection) {
+            const editorComponent = editor.injector.get(TheEditorComponent);
+            editorComponent.quickInsertInstance.checkStatus();
+            const block = Node.ancestor(editor, [editor.selection.anchor.path[0]]);
+            if (!isCleanEmptyParagraph(editor) && Node.string(block) !== QUICK_TOOLBAR_HOTKEY) {
+                QuickInsertEditor.closeQuickToolbar(editor);
+            }
+        }
+    };
+    return editor;
+};
+
+const internalPlugins = [
+    withTheHistory,
+    withAutoInsertData(),
+    withRemoveEmpty,
+    withRemoveVoid,
+    withBlockCard,
+    withResetType,
+    withIndent([ElementKinds.checkItem, ElementKinds.numberedList, ElementKinds.bulletedList, ElementKinds.paragraph, ...HEADING_TYPES]),
+    withList({ validLiChildrenTypes: [ElementKinds.image] }),
+    withLink,
+    withTable,
+    withTodoItem,
+    withHr,
+    withAlign,
+    withCode,
+    withHeading,
+    withMark(),
+    withBlockquote,
+    withNodeID({ idKey: ELEMENT_UNIQUE_ID, idCreator }),
     withAutoFormat({ rules: autoFormatRules }),
     withTransforms(),
     withTrailingNode({ type: ElementKinds.paragraph, level: 0 }),
@@ -10169,7 +10717,8 @@ const internalPlugins = [
     withGetFragment(),
     withDeserializeHMTL,
     withDeserializeMd(),
-    withBlockCard // should in the front of list、resettype、todo、deserialize-html
+    withImage,
+    withQuickInsert
 ];
 const internalToolbarItems = [
     ...AlignOptions,
@@ -10184,7 +10733,8 @@ const internalToolbarItems = [
     ...CodeOptions,
     ...LinkOptions,
     ...TableOptions,
-    ...VerticalAlignOptions
+    ...VerticalAlignOptions,
+    ...PaintFormatOptions
 ];
 const toolbarCompose = (toolbarItems = []) => {
     return [...internalToolbarItems, ...toolbarItems];
@@ -10193,7 +10743,7 @@ const withTheEditor = (plugins, editor) => {
     const e = editor;
     e.renderElement = (element) => null;
     e.renderLeaf = (text) => null;
-    e.insertElement = (element) => TheTransforms.insertElementNext(e, element);
+    e.insertElement = (element) => insertElementNext(e, element);
     e.isContainer = (value) => false;
     e.extraElementOptions = [];
     e.disabled = false;
@@ -10223,11 +10773,11 @@ const shortcuts = (editor, event) => {
 };
 
 class TheToolbarService {
-    initialize(toolbarItems, global = DefaultGlobalToolbarDefinition, inline = DefaultInlineToolbarDefinition, block = DefaultBlockToolbarDefinition) {
+    initialize(toolbarItems, global = DefaultGlobalToolbarDefinition, inline = DefaultInlineToolbarDefinition, quick = DefaultQuickToolbarDefinition) {
         const toolbarDefinition = {
             global,
-            block,
-            inline
+            inline,
+            quick
         };
         const toolbarOperations = new Map();
         toolbarItems.forEach(i => toolbarOperations.set(i.key, i));
@@ -10269,7 +10819,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
 
 const autoFocus = (editor, isFocus) => {
     setTimeout(() => {
-        if (editor && isFocus) {
+        if (editor && editor.children.length > 0 && isFocus) {
             HistoryEditor.withoutMerging(editor, () => {
                 AngularEditor.focus(editor);
                 Transforms.select(editor, Editor.start(editor, [0]));
@@ -10306,73 +10856,6 @@ const autoScrollViewHandle = (editor, scrollContainer) => {
     previousHeight = currentHeight;
 };
 
-class TheToolbarItemComponent extends TheToolbarBaseItemComponent {
-    constructor() {
-        super();
-        this.active = false;
-    }
-    statusChange(editor) {
-        var _a, _b;
-        this.active = ((_a = this.item) === null || _a === void 0 ? void 0 : _a.active) ? (_b = this.item) === null || _b === void 0 ? void 0 : _b.active(editor) : false;
-    }
-    execute(event) {
-        var _a, _b, _c;
-        super.execute(event);
-        if (!((_a = this.item) === null || _a === void 0 ? void 0 : _a.execute) || ((_b = this.editor) === null || _b === void 0 ? void 0 : _b.disabled)) {
-            return;
-        }
-        (_c = this.item) === null || _c === void 0 ? void 0 : _c.execute(this.editor);
-    }
-}
-TheToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheToolbarItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TheToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: { item: "item", editor: "editor" }, host: { classAttribute: "the-toolbar-item" }, usesInheritance: true, ngImport: i0, template: `
-        <a
-            thyIconNavLink
-            [thyIconNavLinkIcon]="item.icon"
-            [thyTooltip]="item.name"
-            thyTooltipPlacement="top"
-            [thyIconNavLinkActive]="active"
-            (mousedown)="execute($event)"
-        ></a>
-    `, isInline: true, components: [{ type: i2.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }], directives: [{ type: i5$1.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: [{
-            type: Component,
-            args: [{
-                    selector: 'the-toolbar-item',
-                    template: `
-        <a
-            thyIconNavLink
-            [thyIconNavLinkIcon]="item.icon"
-            [thyTooltip]="item.name"
-            thyTooltipPlacement="top"
-            [thyIconNavLinkActive]="active"
-            (mousedown)="execute($event)"
-        ></a>
-    `,
-                    host: {
-                        class: 'the-toolbar-item'
-                    }
-                }]
-        }], ctorParameters: function () { return []; }, propDecorators: { item: [{
-                type: Input
-            }], editor: [{
-                type: Input
-            }] } });
-
-class NavSplitLineComponent {
-    constructor() { }
-    ngOnInit() { }
-}
-NavSplitLineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: NavSplitLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NavSplitLineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: NavSplitLineComponent, selector: "nav-split-line", ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: NavSplitLineComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'nav-split-line',
-                    template: ''
-                }]
-        }], ctorParameters: function () { return []; } });
-
 class TheToolbarComponent {
     constructor(cfr, elementRef, ngZone, toolbarGroupComponent) {
         this.cfr = cfr;
@@ -10425,14 +10908,12 @@ class TheToolbarComponent {
         this.resizeObserver.observe(editableElement);
     }
     statusChange(editor) {
-        if (editor === null || editor === void 0 ? void 0 : editor.selection) {
-            const toolbarItems = [...this.toolbarItems, this.moreGroupMenu];
-            for (const item of toolbarItems) {
-                if (item.key !== ToolbarActionTypes.split) {
-                    const itemComponent = this.components.get(item.key);
-                    if (itemComponent) {
-                        itemComponent.instance.statusChange(editor);
-                    }
+        const toolbarItems = [...this.toolbarItems, this.moreGroupMenu];
+        for (const item of toolbarItems) {
+            if (item.key !== ToolbarActionTypes.split) {
+                const itemComponent = this.components.get(item.key);
+                if (itemComponent) {
+                    itemComponent.instance.statusChange(editor);
                 }
             }
         }
@@ -10607,52 +11088,223 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                 args: ['toolbarContainer', { read: ViewContainerRef, static: true }]
             }] } });
 
+class TheInlineToolbarComponent {
+    constructor(elementRef, scrollDispatcher, cdr, ngZone) {
+        this.elementRef = elementRef;
+        this.scrollDispatcher = scrollDispatcher;
+        this.cdr = cdr;
+        this.ngZone = ngZone;
+        this.destroy$ = new Subject();
+    }
+    ngOnInit() {
+        this.scrollDispatcher
+            .scrolled()
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            this.updateInlineToolbar();
+            this.cdr.detectChanges();
+        });
+        this.ngZone.runOutsideAngular(() => {
+            merge(fromEvent(document, 'mouseup').pipe(filter((e) => e.button !== 2)), fromEvent(document, 'keyup').pipe(filter((e) => !e.shiftKey)))
+                .pipe(debounceTime(200), takeUntil(this.destroy$))
+                .subscribe(() => {
+                var _a;
+                this.updateInlineToolbar();
+                (_a = this.inlineToolbar) === null || _a === void 0 ? void 0 : _a.statusChange(this.editor);
+                this.cdr.detectChanges();
+            });
+        });
+    }
+    updateInlineToolbar() {
+        const inlineToolbar = this.elementRef.nativeElement.firstElementChild;
+        if (!this.editor.selection) {
+            inlineToolbar.removeAttribute('style');
+            return;
+        }
+        const anchorBlock$1 = anchorBlock(this.editor);
+        if (!inlineToolbar || !anchorBlock$1) {
+            return;
+        }
+        const { editor } = this;
+        const { selection } = editor;
+        if (!selection || !AngularEditor.isFocused(editor) || Range.isCollapsed(selection) || Editor.string(editor, selection) === '') {
+            inlineToolbar.removeAttribute('style');
+            return;
+        }
+        if (!THE_INLINE_TOOLBAR_TYPES.includes(anchorBlock$1.type)) {
+            return;
+        }
+        const native = window.getSelection();
+        if (native.type !== 'None') {
+            const range = native.getRangeAt(0);
+            this.updatePosition(inlineToolbar, range);
+        }
+    }
+    updatePosition(toolbarElement, range) {
+        let boundary = range.getBoundingClientRect();
+        if (!boundary || (boundary.height === 0 && boundary.width === 0 && range.startContainer === range.endContainer)) {
+            if (range.startContainer.nodeType === 1 && range.startContainer.querySelector('img')) {
+                boundary = range.startContainer.querySelector('img').getBoundingClientRect();
+            }
+            else {
+                boundary = range.startContainer.getBoundingClientRect();
+            }
+        }
+        const toolbarHeight = toolbarElement.offsetHeight;
+        const toolbarWidth = toolbarElement.offsetWidth;
+        const halfOffsetWidth = toolbarWidth / 2;
+        const defaultLeft = -halfOffsetWidth;
+        const positions = {};
+        positions.top = boundary.top - toolbarHeight;
+        positions.left = boundary.left + boundary.width / 2 + defaultLeft;
+        positions.right = 'initial';
+        ['top', 'left', 'right'].forEach(key => {
+            toolbarElement.style[key] = positions[key] + (isNaN(positions[key]) ? '' : 'px');
+        });
+        toolbarElement.style.opacity = '1';
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        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.ɵ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"
+        [editor]="editor"
+        [toolbarItems]="toolbarItems"
+        [isMore]="false"
+    ></the-toolbar> `, isInline: true, components: [{ type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "isMore", "afterTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheInlineToolbarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'the-inline-toolbar',
+                    template: `<the-toolbar
+        #inlineToolbar
+        class="the-inline-toolbar"
+        [editor]="editor"
+        [toolbarItems]="toolbarItems"
+        [isMore]="false"
+    ></the-toolbar> `,
+                    host: {
+                        '[class.hide]': 'toolbarItems.length === 0'
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i2$1.ScrollDispatcher }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { editor: [{
+                type: Input
+            }], toolbarItems: [{
+                type: Input
+            }], inlineToolbar: [{
+                type: ViewChild,
+                args: ['inlineToolbar']
+            }] } });
+
+class TheQuickInsertComponent {
+    constructor(renderer, elementRef, cdr) {
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+        this.cdr = cdr;
+        this.isHide = true;
+        this.defaultIconName = 'plus-circle-thin';
+        this.iconNameFill = 'plus-circle-thin-fill';
+        this.displayIconName = this.defaultIconName;
+    }
+    handleMousedownNativeElement(event) {
+        event.preventDefault();
+        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);
+            return;
+        }
+        this.isHide = true;
+    }
+    updatePosition(left, top) {
+        this.isHide = false;
+        this.renderer.setStyle(this.elementRef.nativeElement, 'top', `${top}px`);
+        this.renderer.setStyle(this.elementRef.nativeElement, 'left', `${left}px`);
+    }
+    mouseEnter(event) {
+        this.displayIconName = this.iconNameFill;
+        this.cdr.markForCheck();
+    }
+    mouseLeave(event) {
+        this.displayIconName = this.defaultIconName;
+        this.cdr.markForCheck();
+    }
+    handleClick(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        QuickInsertEditor.openQuickToolbar(this.editor, this.quickToolbarItems, this.iconElement.nativeElement);
+    }
+}
+TheQuickInsertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheQuickInsertComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TheQuickInsertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: { editor: "editor", quickToolbarItems: "quickToolbarItems" }, host: { listeners: { "mousedown": "handleMousedownNativeElement($event)" }, properties: { "class.hide": "isHide" }, classAttribute: "the-quick-insert" }, viewQueries: [{ propertyName: "iconElement", first: true, predicate: ["iconElement"], descendants: true, read: ElementRef }], ngImport: i0, template: "<thy-icon\n    #iconElement\n    [thyIconName]=\"displayIconName\"\n    class=\"quick-insert-icon text-desc font-size-xlg\"\n    (mouseenter)=\"mouseEnter($event)\"\n    (mouseleave)=\"mouseLeave($event)\"\n    (mousedown)=\"handleClick($event)\"\n></thy-icon>\n", components: [{ type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheQuickInsertComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[theQuickInsert]',
+                    templateUrl: './quick-insert.component.html',
+                    host: {
+                        class: 'the-quick-insert',
+                        '[class.hide]': 'isHide'
+                    }
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { editor: [{
+                type: Input
+            }], quickToolbarItems: [{
+                type: Input
+            }], iconElement: [{
+                type: ViewChild,
+                args: ['iconElement', { read: ElementRef, static: false }]
+            }], handleMousedownNativeElement: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }] } });
+
 class ThePlaceholderComponent {
     constructor(renderer, elementRef) {
         this.renderer = renderer;
         this.elementRef = elementRef;
         this.isHide = true;
     }
-    get selection() {
-        return this.editor.selection;
-    }
     handleCompositionStart() {
-        this.hide();
+        var _a;
+        if ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.selection) {
+            this.hide();
+        }
     }
     handleCompositionEnd(event) {
         if (!event.data) {
             this.checkStatus();
         }
     }
-    checkStatus(value) {
+    checkStatus() {
+        var _a, _b, _c;
         const { editor } = this;
-        const children = value ? value : editor.children;
         // empty content and no selection processing
-        if (this.autoFocus && !this.selection && TheQueries.isEmptyContent(children)) {
-            this.updatePosition(30, 51);
-            this.isHide = false;
+        if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.autoFocus) && !(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 = ((_b = this.options) === null || _b === void 0 ? void 0 : _b.maxHeight) ? 69 : 28;
+            this.updatePosition(30, firstTop);
             return;
         }
-        if (AngularEditor.isFocused(editor) && this.selection && Range.isCollapsed(this.selection)) {
-            const block = Node.ancestor(editor, [this.selection.anchor.path[0]]);
-            const textIndent = 'textIndent';
-            const align = 'align';
-            const hasTextIndent = block[textIndent];
-            const hasAlign = block[align];
-            if (Node.string(block) === '' &&
-                Element$1.isElement(block) &&
-                block.type === ElementKinds.paragraph &&
-                block.children.length === 1 &&
-                Text.isText(block.children[0]) &&
-                !Editor.isVoid(editor, block) &&
-                !hasTextIndent &&
-                !hasAlign) {
-                const rootNode = AngularEditor.toDOMNode(this.editor, block);
-                this.updatePosition(rootNode.offsetLeft, rootNode.offsetTop);
-                return;
-            }
+        if (isCleanEmptyParagraph(editor)) {
+            const block = Node.ancestor(editor, [(_c = editor === null || editor === void 0 ? void 0 : editor.selection) === null || _c === void 0 ? void 0 : _c.anchor.path[0]]);
+            const rootNode = AngularEditor.toDOMNode(editor, block);
+            this.isHide = false;
+            this.updatePosition(rootNode.offsetLeft, rootNode.offsetTop);
+            return;
         }
-        this.hide();
+        this.isHide = true;
     }
     updatePosition(left, top) {
         this.isHide = false;
@@ -10664,12 +11316,12 @@ class ThePlaceholderComponent {
     }
 }
 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: ThePlaceholderComponent, selector: "div[thePlaceholder]", inputs: { editor: "editor", autoFocus: "autoFocus", placeholder: "placeholder" }, host: { listeners: { "document:compositionstart": "handleCompositionStart()", "document:compositionend": "handleCompositionEnd($event)" }, properties: { "class.hide": "isHide" }, classAttribute: "the-placeholder" }, ngImport: i0, template: `{{ placeholder }}`, isInline: true });
+ThePlaceholderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: ThePlaceholderComponent, selector: "div[thePlaceholder]", inputs: { editor: "editor", options: "options" }, host: { listeners: { "document:compositionstart": "handleCompositionStart()", "document:compositionend": "handleCompositionEnd($event)" }, properties: { "class.hide": "isHide" }, classAttribute: "the-placeholder" }, ngImport: i0, template: `{{ options?.placeholder }}`, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: ThePlaceholderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'div[thePlaceholder]',
-                    template: `{{ placeholder }}`,
+                    template: `{{ options?.placeholder }}`,
                     host: {
                         class: 'the-placeholder',
                         '[class.hide]': 'isHide'
@@ -10677,9 +11329,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { editor: [{
                 type: Input
-            }], autoFocus: [{
-                type: Input
-            }], placeholder: [{
+            }], options: [{
                 type: Input
             }], handleCompositionStart: [{
                 type: HostListener,
@@ -10762,7 +11412,6 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
         this.theOnDOMEvent = new EventEmitter();
         this.theEditorCreated = new EventEmitter();
         this._plugins = [];
-        this.globalToolbarItems = [];
         this.autoScrollView = _.debounce(function (editor, scrollContainer) {
             return autoScrollViewHandle(editor, scrollContainer);
         }, 80);
@@ -10853,9 +11502,6 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
         this.onSlaCompositionEnd = (event) => { };
         this.onSlaDragStart = (event) => { };
         this.onSlaDragOver = (event) => { };
-        this.trackBy = (element) => {
-            return element.key;
-        };
     }
     get theGlobalToolbarInstance() {
         return this.theGlobalToolbar ? this.theGlobalToolbar : this.globalToolbarInstance;
@@ -10864,6 +11510,10 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
         var _a, _b;
         return ((_a = this.theOptions) === null || _a === void 0 ? void 0 : _a.maxHeight) ? `${(_b = this.theOptions) === null || _b === void 0 ? void 0 : _b.maxHeight}px` : null;
     }
+    get quickToolbarItems() {
+        var _a;
+        return (_a = this.toolbarEntity) === null || _a === void 0 ? void 0 : _a.quick;
+    }
     ngOnInit() {
         this.initialize();
         this.onErrorHandler();
@@ -10919,8 +11569,8 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
         var _a;
         const toolbar = (_a = this === null || this === void 0 ? void 0 : this.theOptions) === null || _a === void 0 ? void 0 : _a.toolbar;
         const toolbarItems = toolbarCompose(toolbar === null || toolbar === void 0 ? void 0 : toolbar.toolbarItems);
-        const toolbarOption = this.toolbarService.initialize(toolbarItems, toolbar === null || toolbar === void 0 ? void 0 : toolbar.global, toolbar === null || toolbar === void 0 ? void 0 : toolbar.block, toolbar === null || toolbar === void 0 ? void 0 : toolbar.inline);
-        this.globalToolbarItems = toolbarOption.toolbarEntity.global;
+        const toolbarOption = this.toolbarService.initialize(toolbarItems, toolbar === null || toolbar === void 0 ? void 0 : toolbar.global, toolbar === null || toolbar === void 0 ? void 0 : toolbar.inline, toolbar === null || toolbar === void 0 ? void 0 : toolbar.quick);
+        this.toolbarEntity = toolbarOption.toolbarEntity;
         if (this.theGlobalToolbar) {
             this.theGlobalToolbarInstance.editor = this.editor;
             this.theGlobalToolbarInstance.toolbarItems = toolbarOption.toolbarEntity.global;
@@ -10930,11 +11580,10 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
         }
     }
     writeValue(value) {
-        var _a, _b;
+        var _a;
         const data = dataDeserialize((_a = this.theOptions) === null || _a === void 0 ? void 0 : _a.mode, value);
         // data-deserialize
         this.editorValue = data;
-        (_b = this.placeholderInstance) === null || _b === void 0 ? void 0 : _b.checkStatus(data);
     }
     registerOnChange(fn) {
         this.onChangeCallback = fn;
@@ -10943,13 +11592,14 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
         this.onTouchedCallback = fn;
     }
     valueChange(value) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d;
         (_a = this.theGlobalToolbarInstance) === null || _a === void 0 ? void 0 : _a.statusChange(this.editor);
-        (_b = this.placeholderInstance) === null || _b === void 0 ? void 0 : _b.checkStatus();
+        this.quickInsertInstance.checkStatus();
+        this.placeholderInstance.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 = (_b = this.theOptions) === null || _b === void 0 ? void 0 : _b.scrollContainer;
+        const maxHeight = (_c = this.theOptions) === null || _c === void 0 ? void 0 : _c.maxHeight;
+        if (!((_d = this.theOptions) === null || _d === void 0 ? void 0 : _d.readonly) && (scrollContainer || maxHeight)) {
             const container = maxHeight ? DEFAULT_SCROLL_CONTAINER : scrollContainer;
             this.autoScrollView(this.editor, container);
         }
@@ -11012,7 +11662,7 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
                 const blockCardEntry = AngularEditor.toSlateCardEntry(this.editor, relativeBlockCardElement.firstElementChild);
                 if (blockCardEntry && blockCardEntry[1]) {
                     const rootNodePath = blockCardEntry[1].slice(0, 1);
-                    const rootNode = TheQueries.getNode(this.editor, rootNodePath);
+                    const rootNode = getNode(this.editor, rootNodePath);
                     if (this.editor.isBlockCard(rootNode)) {
                         event.preventDefault();
                         AngularEditor.moveBlockCard(this.editor, rootNode, { direction: event.x < centerX ? 'left' : 'right' });
@@ -11024,13 +11674,13 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
     handleSelectAll() {
         let node;
         if (!this.editor.selection) {
-            TheTransforms.setEndSelection(this.editor);
+            setEndSelection(this.editor);
         }
         const [start, end] = Range.edges(this.editor.selection);
         const selectionRange = Editor.range(this.editor, start, end);
-        const containerBlocks = TheQueries.getContainerBlocks(this.editor);
+        const containerBlocks = getContainerBlocks(this.editor);
         for (let i = 0; i < containerBlocks.length; i++) {
-            [node] = TheQueries.getNodesByType(this.editor, containerBlocks[i]);
+            [node] = getNodesByType(this.editor, containerBlocks[i]);
             if (node) {
                 const [, path] = node;
                 const isStartParent = Path.equals(path, start.path.slice(0, path.length));
@@ -11074,7 +11724,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: "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]=\"globalToolbarItems\"\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    }\"\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        [trackBy]=\"trackBy\"\n        (mousedown)=\"mousedown($event)\"\n    ></slate-editable>\n    <div\n        *ngIf=\"theOptions?.placeholder\"\n        #placeholder\n        thePlaceholder\n        [editor]=\"editor\"\n        [autoFocus]=\"theOptions?.placeholder?.autoFocus\"\n        [placeholder]=\"theOptions?.placeholder\"\n    ></div>\n    <the-template #templateInstance></the-template>\n</div>\n", components: [{ type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "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: ThePlaceholderComponent, selector: "div[thePlaceholder]", inputs: ["editor", "autoFocus", "placeholder"] }, { 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 }, { 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    [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", "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: [{
@@ -11117,6 +11767,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
             }], globalToolbarInstance: [{
                 type: ViewChild,
                 args: ['globalToolbar']
+            }], quickInsertInstance: [{
+                type: ViewChild,
+                args: ['quickInsert']
             }], placeholderInstance: [{
                 type: ViewChild,
                 args: ['placeholder']
@@ -11235,7 +11888,7 @@ class TheToolbarGroupComponent {
     }
 }
 TheToolbarGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheToolbarGroupComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.ThyPopover }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-TheToolbarGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheToolbarGroupComponent, selector: "the-toolbar-group", inputs: { menus: "menus", item: "item" }, host: { listeners: { "mousedown": "mousedownHandler($event)", "click": "clickHandle($event)" }, classAttribute: "the-toolbar-group" }, viewQueries: [{ propertyName: "groupTemplate", first: true, predicate: ["groupTemplate"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<a thyIconNavLink [thyIconNavLinkIcon]=\"item.icon\" [thyTooltip]=\"item?.name\" thyTooltipPlacement=\"top\" [thyIconNavLinkActive]=\"active\"></a>\n\n<ng-template #groupTemplate>\n    <the-toolbar class=\"group\" [editor]=\"editor\" [toolbarItems]=\"menus\" [isMore]=\"false\"></the-toolbar>\n</ng-template>\n", components: [{ type: i2.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "isMore", "afterTemplate"] }], directives: [{ type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+TheToolbarGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.7", type: TheToolbarGroupComponent, selector: "the-toolbar-group", inputs: { menus: "menus", item: "item" }, host: { listeners: { "mousedown": "mousedownHandler($event)", "click": "clickHandle($event)" }, classAttribute: "the-toolbar-group" }, viewQueries: [{ propertyName: "groupTemplate", first: true, predicate: ["groupTemplate"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<a thyIconNavLink [thyIconNavLinkIcon]=\"item.icon\" [thyTooltip]=\"item?.name\" thyTooltipPlacement=\"top\" [thyIconNavLinkActive]=\"active\"></a>\n\n<ng-template #groupTemplate>\n    <the-toolbar class=\"group\" [editor]=\"editor\" [toolbarItems]=\"menus\" [isMore]=\"false\"></the-toolbar>\n</ng-template>\n", components: [{ type: i2.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "isMore", "afterTemplate"] }], directives: [{ 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: TheToolbarGroupComponent, decorators: [{
             type: Component,
             args: [{
@@ -11282,10 +11935,12 @@ const COMPONENTS = [
     TheToolbarDropdownComponent,
     TheToolbarGroupComponent,
     TheToolbarItemComponent,
+    TheInlineToolbarComponent,
     NavSplitLineComponent,
     TheTextComponent,
     TheDefaultElementComponent,
-    ThePlaceholderComponent,
+    TheQuickInsertComponent,
+    TheQuickToolbarComponent,
     TheColorSelectComponent,
     TheColorToolbarItemComponent,
     TheContextMenuComponent,
@@ -11312,7 +11967,8 @@ const PLUGIN_COMPONENTS = [
     TheTableToolbarComponent,
     TheTableComponent,
     TheTableRowComponent,
-    TheTdComponent
+    TheTdComponent,
+    ThePlaceholderComponent
 ];
 const PIPES = [ElementStylePipe, ElementClassPipe];
 class TheEditorModule {
@@ -11322,10 +11978,12 @@ TheEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         TheToolbarDropdownComponent,
         TheToolbarGroupComponent,
         TheToolbarItemComponent,
+        TheInlineToolbarComponent,
         NavSplitLineComponent,
         TheTextComponent,
         TheDefaultElementComponent,
-        ThePlaceholderComponent,
+        TheQuickInsertComponent,
+        TheQuickToolbarComponent,
         TheColorSelectComponent,
         TheColorToolbarItemComponent,
         TheContextMenuComponent,
@@ -11349,7 +12007,8 @@ TheEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         TheTableToolbarComponent,
         TheTableComponent,
         TheTableRowComponent,
-        TheTdComponent], imports: [CommonModule, SlateModule, FormsModule, ThyIconModule,
+        TheTdComponent,
+        ThePlaceholderComponent], imports: [CommonModule, SlateModule, FormsModule, ThyIconModule,
         ThyAvatarModule,
         ThyNavModule,
         ThyFormModule,
@@ -11368,7 +12027,8 @@ TheEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
         {
             provide: TheToolbarGroupToken,
             useValue: TheToolbarGroupComponent
-        }
+        },
+        THE_CODE_MODE_PROVIDER
     ], imports: [[CommonModule, SlateModule, FormsModule, ...TETHYS, CodemirrorModule, TheColumnSizeModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImport: i0, type: TheEditorModule, decorators: [{
             type: NgModule,
@@ -11381,7 +12041,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.7", ngImpor
                         {
                             provide: TheToolbarGroupToken,
                             useValue: TheToolbarGroupComponent
-                        }
+                        },
+                        THE_CODE_MODE_PROVIDER
                     ]
                 }]
         }] });
@@ -11394,5 +12055,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, BLOCK_TOOLBAR_HOTKEY, BlockquoteEditor, CLIPBOARD_FORMAT_KEY, CODEMIRROR_PADDING_TOP, CODE_MODES, COMPONENTS, CONTAINER_BLOCKS, CodeEditor, ColorEditor, DEFAULT_LANGUAGE, DEFAULT_SCROLL_CONTAINER, DefaultBlockToolbarDefinition, DefaultElementOptions, DefaultGlobalToolbarDefinition, DefaultInlineToolbarDefinition, DropdownMode, ELEMENT_UNIQUE_ID, EditorMode, 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, STANDARD_HEADING_TYPES, TAB_SPACE, THE_EDITOR_CONFIG_PROVIDER, THE_EDITOR_CONFIG_TOKEN, THE_EDITOR_CONVERSION_HINT_REF, THE_EDITOR_UUID, THE_INLINE_TOOLBAR_TYPES, THE_UPLOAD_SERVICE_TOKEN, TableEditor, TheBaseElementComponent, TheContextService, TheDataMode, TheDefaultElementComponent, TheEditor, TheEditorComponent, TheEditorConfig, TheEditorModule, TheImageComponent, TheMode, TheQueries, TheToolbarComponent, TheToolbarDropdownComponent, TheToolbarGroupComponent, TheToolbarGroupToken, TheToolbarItemComponent, TheToolbarService, TheTransforms, TodoItemEditor, ToolbarActionTypes, ToolbarAlignment, 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, 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 };
 //# sourceMappingURL=worktile-theia.js.map