@worktile/theia 2.4.0 → 2.4.3

package/fesm2015/worktile-theia.js

@@ -8,14 +8,14 @@ import * as i1 from 'slate-angular';
 import { BaseTextComponent, BaseElementComponent, AngularEditor, NODE_TO_PARENT, NODE_TO_INDEX, IS_SAFARI, hotkeys, getPlainText as getPlainText$1, hasBlockCard, isCardLeft, FAKE_RIGHT_BLOCK_CARD_OFFSET, ELEMENT_TO_COMPONENT, EDITOR_TO_ELEMENT, isComponentType, withAngular, SlateModule } from 'slate-angular';
 import { mixinUnsubscribe, MixinBase } from 'ngx-tethys/core';
 import isHotkey, { isKeyHotkey } from 'is-hotkey';
-import { Element as Element$1, Editor, Range, Node, Span, Path, Text, Point, Transforms, Operation, createEditor } from 'slate';
+import { Transforms, Text, Range, Editor, Element as Element$1, Node, Span, Path, Point, Operation, createEditor } from 'slate';
 import { HistoryEditor, withHistory } from 'slate-history';
-import { __rest, __awaiter } from 'tslib';
-import * as _lodash from 'lodash';
 import marked from 'marked';
 import { TheiaConverter } from '@atinc/selene';
 import * as i1$3 from 'ngx-tethys/popover';
 import { ThyPopover } from 'ngx-tethys/popover';
+import { __rest, __awaiter } from 'tslib';
+import * as _lodash from 'lodash';
 import * as i2 from '@angular/cdk/overlay';
 import { Overlay, OverlayModule } from '@angular/cdk/overlay';
 import * as i1$1 from 'ngx-tethys/alert';
@@ -54,7 +54,7 @@ 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 * as i1$7 from 'ngx-tethys/list';
 import { ThyListModule } from 'ngx-tethys/list';
 import { ThyAutocompleteModule } from 'ngx-tethys/autocomplete';
 import { ThyAvatarModule } from 'ngx-tethys/avatar';
@@ -522,6 +522,61 @@ function idCreator(length = 5) {
     return key;
 }
 
+const UNDOING = new WeakMap();
+const REDOING = new WeakMap();
+const withTheHistory = (editor) => {
+    const { undo, redo } = editor;
+    editor.undo = () => {
+        UNDOING.set(editor, true);
+        undo();
+        UNDOING.set(editor, false);
+    };
+    editor.redo = () => {
+        REDOING.set(editor, true);
+        redo();
+        REDOING.set(editor, false);
+    };
+    return editor;
+};
+const TheHistoryEditor = {
+    isUndoing(editor) {
+        return UNDOING.get(editor);
+    },
+    isRedoing(editor) {
+        return REDOING.get(editor);
+    }
+};
+
+const setMarks = (editor, marks, at) => {
+    Transforms.setNodes(editor, marks, {
+        at,
+        match: Text.isText,
+        split: true
+    });
+};
+
+const clearMarks = (editor) => {
+    const { selection } = editor;
+    if (!selection) {
+        return;
+    }
+    if (Range.isCollapsed(selection)) {
+        const marks = Editor.marks(editor);
+        for (const key in marks) {
+            Editor.removeMark(editor, key);
+        }
+    }
+    else {
+        const unsetMarks = {};
+        MarkProps.forEach(key => {
+            unsetMarks[key] = null;
+        });
+        setMarks(editor, unsetMarks);
+    }
+};
+
+const insertElement = (editor, element) => editor.insertElement(element);
+
 const isAncestor = (node) => Element$1.isElement(node) || Editor.isEditor(node);
 
 const getLastChild$1 = (node, level) => {
@@ -1321,36 +1376,6 @@ var index$1 = /*#__PURE__*/Object.freeze({
     someNode: someNode
 });
 
-const setMarks = (editor, marks, at) => {
-    Transforms.setNodes(editor, marks, {
-        at,
-        match: Text.isText,
-        split: true
-    });
-};
-
-const clearMarks = (editor) => {
-    const { selection } = editor;
-    if (!selection) {
-        return;
-    }
-    if (Range.isCollapsed(selection)) {
-        const marks = Editor.marks(editor);
-        for (const key in marks) {
-            Editor.removeMark(editor, key);
-        }
-    }
-    else {
-        const unsetMarks = {};
-        MarkProps.forEach(key => {
-            unsetMarks[key] = null;
-        });
-        setMarks(editor, unsetMarks);
-    }
-};
-
-const insertElement = (editor, element) => editor.insertElement(element);
-
 const insertElementNext = (editor, node) => {
     if (Range.isExpanded(editor.selection)) {
         Editor.deleteFragment(editor);
@@ -1564,6 +1589,40 @@ function handleContinualInsertBreak(editor, lowestBlock, type) {
     return false;
 }
 
+const insertElementNode = (editor, node) => {
+    if (Range.isExpanded(editor.selection)) {
+        Editor.deleteFragment(editor);
+    }
+    const isBlockCardCursor$1 = isBlockCardCursor(editor);
+    const containerBlocks = getContainerBlocks(editor);
+    const isContainer = isNodeTypeIn(editor, containerBlocks, { at: editor.selection });
+    const [anchorBlock, anchorBlockPath] = anchorBlockEntry(editor);
+    const isEmpty = Editor.isEmpty(editor, anchorBlock);
+    if (isContainer && !isBlockCardCursor$1) {
+        const [, containerPath] = Editor.above(editor, {
+            match: n => Editor.isBlock(editor, n) && containerBlocks.includes(n.type),
+            at: editor.selection
+        });
+        Editor.withoutNormalizing(editor, () => {
+            const containerPathFirstPath = anchorBlockPath.slice(0, containerPath.length + 1);
+            Transforms.insertNodes(editor, node, { at: Path.next(containerPathFirstPath), select: true });
+            if (isEmpty) {
+                Transforms.removeNodes(editor, { at: anchorBlockPath });
+            }
+        });
+        return;
+    }
+    const nextPath = Path.next([anchorBlockPath[0]]);
+    Transforms.insertNodes(editor, node, { at: nextPath });
+    if (isEmpty && anchorBlockPath.length === 1) {
+        Transforms.delete(editor, { at: anchorBlockPath });
+        Transforms.select(editor, Editor.start(editor, anchorBlockPath));
+    }
+    else {
+        Transforms.select(editor, Editor.start(editor, nextPath));
+    }
+};
+
 var index = /*#__PURE__*/Object.freeze({
     __proto__: null,
     setMarks: setMarks,
@@ -1583,442 +1642,23 @@ var index = /*#__PURE__*/Object.freeze({
     setEndSelection: setEndSelection,
     closeConversionHint: closeConversionHint,
     handleContinualDeleteBackward: handleContinualDeleteBackward,
-    handleContinualInsertBreak: handleContinualInsertBreak
+    handleContinualInsertBreak: handleContinualInsertBreak,
+    insertElementNode: insertElementNode
 });
 
-const isNodeTypeList = (n) => {
-    return [ElementKinds.bulletedList, ElementKinds.numberedList].includes(n.type);
-};
-
-const ListEditor = {
-    isList(editor, element, type) {
-        return Editor.isBlock(editor, element) && element.type === type;
-    },
-    toggleList(editor, type, startIndex) {
-        if (!editor.selection) {
-            return;
-        }
-        if (!startIndex) {
-            startIndex = 1;
-        }
-        const types = [ElementKinds.bulletedList, ElementKinds.numberedList];
-        Editor.withoutNormalizing(editor, () => {
-            const [...listItems] = Editor.nodes(editor, {
-                match: node => Element$1.isElement(node) && node.type === ElementKinds.listItem,
-                mode: 'lowest'
-            });
-            const firstListItemPath = listItems.length && listItems[0][1];
-            const activeListPath = listItems.length && Path.parent(firstListItemPath);
-            const activeListNode = listItems.length && Node.get(editor, activeListPath);
-            // 同级且类型相同：unwrap
-            const isLowestActive = listItems.length &&
-                listItems.every(([, path]) => activeListNode.type === type && (Path.isSibling(firstListItemPath, path) || Path.equals(firstListItemPath, path)));
-            if (isLowestActive) {
-                const upListItem = Path.parent(activeListPath);
-                Transforms.unwrapNodes(editor, {
-                    at: editor.selection,
-                    match: node => node === activeListNode,
-                    split: true,
-                    mode: 'lowest'
-                });
-                if (upListItem && Node.get(editor, upListItem).type === ElementKinds.listItem) {
-                    Transforms.moveNodes(editor, {
-                        at: editor.selection,
-                        to: Path.next(upListItem),
-                        match: node => Element$1.isElement(node) && node.type === ElementKinds.listItem
-                    });
-                }
-                else {
-                    Transforms.unwrapNodes(editor, {
-                        match: node => Element$1.isElement(node) && node.type === ElementKinds.listItem
-                    });
-                }
-                return;
-            }
-            // 跨级、同级且类型不同
-            if (activeListNode && types.includes(activeListNode.type)) {
-                Transforms.setNodes(editor, { type }, { match: node => Element$1.isElement(node) && node.type !== type && types.includes(node.type) });
-                return;
-            }
-            // wrap
-            this.buildListItem(editor);
-            // Todo: types
-            Transforms.wrapNodes(editor, { type, children: [], start: startIndex }, {
-                at: editor.selection,
-                match: node => Element$1.isElement(node) && node.type === ElementKinds.listItem
-            });
-        });
-    },
-    unwrapList(editor) {
-        Editor.withoutNormalizing(editor, () => {
-            unwrapNodesByType(editor, [ElementKinds.bulletedList, ElementKinds.numberedList], { split: true, mode: 'all' });
-            unwrapNodesByType(editor, [ElementKinds.listItem], { split: true, mode: 'all' });
-        });
-    },
-    wrapList(editor, type) {
-        Editor.withoutNormalizing(editor, () => {
-            const listItem = {
-                type: ElementKinds.listItem,
-                children: []
-            };
-            const list = {
-                type,
-                children: []
-            };
-            Transforms.wrapNodes(editor, list, { split: true });
-            Transforms.wrapNodes(editor, listItem, { split: true });
-        });
-    },
-    isActive(editor, type) {
-        const [match] = getNodesByType(editor, type);
-        return !!match;
-    },
-    getActiveList(editor) {
-        const [match] = getNodesByType(editor, LIST_BLOCK_TYPES);
-        return match;
-    },
-    buildListItem(editor) {
-        const nodes = Editor.nodes(editor, {
-            match: node => Editor.isBlock(editor, node),
-            mode: 'lowest'
-        });
-        for (const [node, path] of nodes) {
-            if (!Editor.isVoid(editor, node) && Element$1.isElement(node) && node.type !== ElementKinds.paragraph) {
-                Transforms.setNodes(editor, { type: ElementKinds.paragraph, checked: undefined }, // todo remove checked
-                { at: path });
-            }
-            else if (Element$1.isElement(node) && node.type === ElementKinds.paragraph) {
-                let { textIndent } = node;
-                if (textIndent) {
-                    Transforms.setNodes(editor, { textIndent: undefined, indent: undefined }, // remove indent
-                    { at: path });
-                }
-            }
-            if (Node.parent(editor, path).type !== ElementKinds.listItem) {
-                Transforms.wrapNodes(editor, { type: ElementKinds.listItem, children: [] }, {
-                    at: path,
-                    split: true
-                });
-            }
-        }
-    },
-    buildInsertDataChildren(node) {
-        const { children } = node;
-        const listItem = children[0];
-        if (isNodeTypeList(node) && Element$1.isElement(listItem) && listItem.children[0].type === ElementKinds.paragraph) {
-            return node;
+class TheConversionHintComponent {
+    constructor() {
+        this.duration = 10000;
+        this.pauseOnHover = true;
+    }
+    mouseenter() {
+        if (this.pauseOnHover) {
+            this.clearCloseTimer();
         }
-        return this.buildInsertDataChildren(listItem);
     }
-};
-
-const TodoItemEditor = {
-    isActive(editor) {
-        const [match] = getNodesByType(editor, ElementKinds.checkItem);
-        return !!match;
-    },
-    insertTodoItem(editor) {
-        if (!editor.selection) {
-            return;
-        }
-        const isActive = this.isActive(editor);
-        const isNumberedList = ListEditor.isActive(editor, ElementKinds.numberedList);
-        const isBulletedList = ListEditor.isActive(editor, ElementKinds.bulletedList);
-        if (isActive) {
-            Transforms.setNodes(editor, {
-                type: ElementKinds.paragraph
-            });
-        }
-        else {
-            if (isNumberedList || isBulletedList) {
-                ListEditor.unwrapList(editor);
-            }
-            Transforms.setNodes(editor, {
-                type: ElementKinds.checkItem
-            });
-        }
-    }
-};
-
-const BlockquoteEditor = {
-    toggleBlockquote(editor) {
-        if (!isParagraph(editor)) {
-            Transforms.insertNodes(editor, {
-                type: ElementKinds.paragraph,
-                mode: 'text',
-                children: [
-                    {
-                        text: ''
-                    }
-                ]
-            });
-        }
-        const isActive = isBlockActive(editor, ElementKinds.blockquote);
-        if (!isActive) {
-            Transforms.wrapNodes(editor, { type: ElementKinds.blockquote, children: [] }, {
-                mode: 'lowest'
-            });
-        }
-        else {
-            Transforms.unwrapNodes(editor, { match: n => Element$1.isElement(n) && n.type === ElementKinds.blockquote });
-        }
-    }
-};
-
-const InlineCodeEditor = {
-    toggleInlineCode(editor, text) {
-        const isActive = InlineCodeEditor.isInlineCodeActive(editor);
-        if (isActive) {
-            InlineCodeEditor.unwrapInlineCode(editor);
-            return;
-        }
-        if (Range.isCollapsed(editor.selection)) {
-            InlineCodeEditor.wrapInlineCode(editor, text);
-        }
-        else {
-            const fragment = Node.fragment(editor, editor.selection)[0];
-            const selectNode = Node.get(fragment, []);
-            const selectText = Node.string(selectNode);
-            InlineCodeEditor.wrapInlineCode(editor, selectText);
-        }
-    },
-    wrapInlineCode(editor, text = '') {
-        if (InlineCodeEditor.isInlineCodeActive(editor)) {
-            InlineCodeEditor.unwrapInlineCode(editor);
-        }
-        const { selection } = editor;
-        const isCollapsed = selection && Range.isCollapsed(selection);
-        const inlineCode = {
-            type: ElementKinds.inlineCode,
-            children: isCollapsed ? [{ text: text ? text : ZERO_WIDTH_CHAR }] : []
-        };
-        if (isCollapsed) {
-            Transforms.insertNodes(editor, inlineCode);
-        }
-        else {
-            Transforms.wrapNodes(editor, inlineCode, { split: true });
-        }
-    },
-    unwrapInlineCode(editor) {
-        Transforms.unwrapNodes(editor, { match: n => Element$1.isElement(n) && n.type === ElementKinds.inlineCode });
-    },
-    isInlineCodeActive(editor, path) {
-        var _a;
-        const [inlineCode] = Editor.nodes(editor, {
-            at: path ? path : (_a = editor.selection) === null || _a === void 0 ? void 0 : _a.anchor.path,
-            match: n => Element$1.isElement(n) && n.type === ElementKinds.inlineCode
-        });
-        return !!inlineCode;
-    }
-};
-
-const HeadingEditor = {
-    setHeading(editor, heading) {
-        Editor.withoutNormalizing(editor, () => {
-            const types = [ElementKinds.bulletedList, ElementKinds.numberedList, ElementKinds.listItem];
-            Transforms.unwrapNodes(editor, {
-                at: editor.selection,
-                match: n => Element$1.isElement(n) && types.includes(n.type),
-                mode: 'all',
-                split: true
-            });
-            Transforms.setNodes(editor, { type: heading });
-            const entry = anchorBlockEntry(editor);
-            const unMarks = {
-                [MarkTypes.fontSize]: null
-            };
-            if (entry) {
-                setMarks(editor, unMarks, entry[1]);
-                return;
-            }
-            setMarks(editor, unMarks, editor.selection);
-        });
-    },
-    isHeadingActive(editor, heading) {
-        const [match] = Editor.nodes(editor, {
-            match: n => Element$1.isElement(n) && n.type === heading,
-            universal: true
-        });
-        return !!match;
-    }
-};
-
-const autoFormatRules = [
-    {
-        type: ElementKinds.heading_1,
-        markup: '#',
-        format: (editor) => {
-            HeadingEditor.setHeading(editor, ElementKinds.heading_1);
-        }
-    },
-    {
-        type: ElementKinds.heading_2,
-        markup: '##',
-        format: (editor) => {
-            HeadingEditor.setHeading(editor, ElementKinds.heading_2);
-        }
-    },
-    {
-        type: ElementKinds.heading_3,
-        markup: '###',
-        format: (editor) => {
-            HeadingEditor.setHeading(editor, ElementKinds.heading_3);
-        }
-    },
-    {
-        type: ElementKinds.heading_4,
-        markup: '####',
-        format: (editor) => {
-            HeadingEditor.setHeading(editor, ElementKinds.heading_4);
-        }
-    },
-    {
-        type: ElementKinds.heading_5,
-        markup: '#####',
-        format: (editor) => {
-            HeadingEditor.setHeading(editor, ElementKinds.heading_5);
-        }
-    },
-    {
-        type: ElementKinds.heading_6,
-        markup: '######',
-        format: (editor) => {
-            HeadingEditor.setHeading(editor, ElementKinds.heading_6);
-        }
-    },
-    {
-        type: ElementKinds.blockquote,
-        markup: ['>'],
-        format: (editor) => {
-            BlockquoteEditor.toggleBlockquote(editor);
-        }
-    },
-    {
-        type: MarkTypes.bold,
-        between: ['**', '**'],
-        mode: 'inline',
-        insertTrigger: true
-    },
-    {
-        type: MarkTypes.bold,
-        between: ['__', '__'],
-        mode: 'inline',
-        insertTrigger: true
-    },
-    {
-        type: MarkTypes.italic,
-        between: ['*', '*'],
-        mode: 'inline',
-        insertTrigger: true
-    },
-    {
-        type: MarkTypes.italic,
-        between: ['_', '_'],
-        mode: 'inline',
-        insertTrigger: true
-    },
-    {
-        type: ElementKinds.inlineCode,
-        between: ['`', '`'],
-        mode: 'inline',
-        format: (editor, text) => {
-            InlineCodeEditor.toggleInlineCode(editor, text);
-            Transforms.select(editor, Editor.after(editor, editor.selection));
-        }
-    },
-    {
-        type: MarkTypes.strike,
-        between: ['~~', '~~'],
-        mode: 'inline',
-        insertTrigger: true
-    },
-    {
-        type: ElementKinds.code,
-        markup: '```',
-        insertTrigger: true
-    },
-    {
-        type: ElementKinds.listItem,
-        markup: [],
-        match: (editor) => {
-            return isParagraph(editor) ? ['*', '-', '+'] : [];
-        },
-        format: (editor) => {
-            ListEditor.toggleList(editor, ElementKinds.bulletedList);
-        }
-    },
-    {
-        type: ElementKinds.listItem,
-        markup: [],
-        match: (editor, textFromBlockStart) => {
-            return isParagraph(editor) && /^-?\d+(\.|\))$/.test(textFromBlockStart) ? [textFromBlockStart] : [];
-        },
-        format: (editor, markup) => {
-            let startIndex = 1;
-            if (markup) {
-                startIndex = markup[0].split('.')[0];
-                if (startIndex === 0) {
-                    startIndex = 1;
-                }
-            }
-            ListEditor.toggleList(editor, ElementKinds.numberedList, startIndex);
-        }
-    },
-    {
-        type: ElementKinds.checkItem,
-        markup: [],
-        match: (editor) => {
-            return isParagraph(editor) ? ['[]'] : [];
-        },
-        format: (editor) => {
-            TodoItemEditor.insertTodoItem(editor);
-        }
-    },
-    {
-        type: ElementKinds.hr,
-        markup: '---',
-        insertTrigger: true
-    }
-];
-
-const UNDOING = new WeakMap();
-const REDOING = new WeakMap();
-const withTheHistory = (editor) => {
-    const { undo, redo } = editor;
-    editor.undo = () => {
-        UNDOING.set(editor, true);
-        undo();
-        UNDOING.set(editor, false);
-    };
-    editor.redo = () => {
-        REDOING.set(editor, true);
-        redo();
-        REDOING.set(editor, false);
-    };
-    return editor;
-};
-const TheHistoryEditor = {
-    isUndoing(editor) {
-        return UNDOING.get(editor);
-    },
-    isRedoing(editor) {
-        return REDOING.get(editor);
-    }
-};
-
-class TheConversionHintComponent {
-    constructor() {
-        this.duration = 10000;
-        this.pauseOnHover = true;
-    }
-    mouseenter() {
-        if (this.pauseOnHover) {
-            this.clearCloseTimer();
-        }
-    }
-    mouseleave() {
-        if (this.pauseOnHover) {
-            this.creatCloseTimer();
+    mouseleave() {
+        if (this.pauseOnHover) {
+            this.creatCloseTimer();
         }
     }
     ngOnInit() {
@@ -3053,6 +2693,10 @@ const hasStableListItem = (listItemNode) => {
     return listItemNode.children.length === 1 && type === ElementKinds.paragraph;
 };
 
+const isNodeTypeList = (n) => {
+    return [ElementKinds.bulletedList, ElementKinds.numberedList].includes(n.type);
+};
+
 /**
  * list 中 是否是单个listItem，且listItem没有子列表
  */
@@ -3898,432 +3542,829 @@ const withList = ({ validLiChildrenTypes } = {}) => (editor) => {
                 return;
             }
         }
-        insertData(data);
+        insertData(data);
+    };
+    editor.onKeydown = (event) => {
+        const isContinue = !onKeyDownList(event, editor);
+        if (isContinue) {
+            onKeydown(event);
+        }
+    };
+    editor.normalizeNode = getListNormalizer(editor, { validLiChildrenTypes: validLiChildrenTypes });
+    editor.renderElement = (element) => {
+        if (element.type === ElementKinds.numberedList) {
+            return TheNumberedListComponent;
+        }
+        if (element.type === ElementKinds.bulletedList) {
+            return TheBulletedListComponent;
+        }
+        if (element.type === ElementKinds.listItem) {
+            return TheListItemComponent;
+        }
+        return renderElement(element);
+    };
+    return editor;
+};
+
+class TheTodoItemComponent extends TheBaseElementComponent {
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+        this.elementRef = elementRef;
+        this.cdr = cdr;
+        this.checkItemClass = true;
+    }
+    get level() {
+        var _a;
+        return (_a = this.element) === null || _a === void 0 ? void 0 : _a.indent;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+    }
+    onCheck(checked) {
+        if (this.readonly) {
+            return false;
+        }
+        setNode(this.editor, { checked }, this.element);
+    }
+}
+TheTodoItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheTodoItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TheTodoItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTodoItemComponent, selector: "div[theTodoItem]", host: { properties: { "class.the-check-item": "this.checkItemClass", "attr.the-level": "this.level" } }, usesInheritance: true, ngImport: i0, template: `
+        <span contenteditable="false" class="todo-item-status">
+            <input #checkbox type="checkbox" [checked]="element.checked" (click)="onCheck(checkbox.checked)" />
+        </span>
+        <span><slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children></span>
+    `, isInline: true, components: [{ type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheTodoItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'div[theTodoItem]',
+                    template: `
+        <span contenteditable="false" class="todo-item-status">
+            <input #checkbox type="checkbox" [checked]="element.checked" (click)="onCheck(checkbox.checked)" />
+        </span>
+        <span><slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children></span>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { checkItemClass: [{
+                type: HostBinding,
+                args: ['class.the-check-item']
+            }], level: [{
+                type: HostBinding,
+                args: ['attr.the-level']
+            }] } });
+
+const withTodoItem = (editor) => {
+    const { insertBreak, deleteBackward, renderElement } = editor;
+    editor.insertBreak = () => {
+        const { selection } = editor;
+        if (selection && Range.isCollapsed(selection)) {
+            const [match] = Editor.nodes(editor, {
+                match: n => Element$1.isElement(n) && n.type === ElementKinds.checkItem
+            });
+            if (match) {
+                const [, path] = match;
+                const block = anchorBlock(editor);
+                if (block && Editor.isStart(editor, selection.anchor, path) && Editor.isEmpty(editor, block)) {
+                    Transforms.setNodes(editor, {
+                        type: ElementKinds.default,
+                        checked: undefined
+                    }, {
+                        match: n => Element$1.isElement(n) && n.type === ElementKinds.checkItem
+                    });
+                    return;
+                }
+            }
+        }
+        insertBreak();
+        const anchorBlock$1 = anchorBlock(editor);
+        if (anchorBlock$1 && anchorBlock$1.type === ElementKinds.checkItem) {
+            Transforms.setNodes(editor, { checked: false });
+        }
+    };
+    editor.deleteBackward = unit => {
+        const { selection } = editor;
+        if (selection && Range.isCollapsed(selection)) {
+            const [match] = Editor.nodes(editor, {
+                match: n => Element$1.isElement(n) && n.type === ElementKinds.checkItem
+            });
+            if (match) {
+                const [, path] = match;
+                if (Editor.isStart(editor, selection.anchor, path)) {
+                    Transforms.setNodes(editor, { type: ElementKinds.default, checked: undefined }, {
+                        match: n => Element$1.isElement(n) && n.type === ElementKinds.checkItem
+                    });
+                    return;
+                }
+            }
+        }
+        deleteBackward(unit);
+    };
+    editor.renderElement = (element) => {
+        if (element.type === ElementKinds.checkItem) {
+            return TheTodoItemComponent;
+        }
+        return renderElement(element);
+    };
+    return editor;
+};
+
+class TheHrComponent extends TheBaseElementComponent {
+    constructor(elementRef, cdr) {
+        super(elementRef, cdr);
+        this.elementRef = elementRef;
+        this.cdr = cdr;
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            const blockCardElement = this.nativeElement.closest('slate-block-card');
+            if (blockCardElement) {
+                blockCardElement.classList.add(`slate-block-card-${this.element.type}`);
+            }
+        });
+    }
+}
+TheHrComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheHrComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TheHrComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheHrComponent, selector: "the-hr, [theHr]", usesInheritance: true, ngImport: i0, template: `
+        <div class="the-hr" contenteditable="false" [ngClass]="{ active: selection }">
+            <hr class="the-hr" />
+            <slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>
+        </div>
+    `, isInline: true, components: [{ type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }], directives: [{ type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheHrComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'the-hr, [theHr]',
+                    template: `
+        <div class="the-hr" contenteditable="false" [ngClass]="{ active: selection }">
+            <hr class="the-hr" />
+            <slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>
+        </div>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
+
+const withHr = (editor) => {
+    const { isVoid, isBlockCard, renderElement } = editor;
+    editor.isVoid = (element) => {
+        return element.type === ElementKinds.hr || isVoid(element);
+    };
+    editor.isBlockCard = (element) => {
+        if (element.type === ElementKinds.hr) {
+            return true;
+        }
+        return isBlockCard(element);
+    };
+    editor.renderElement = (element) => {
+        if (element.type === ElementKinds.hr) {
+            return TheHrComponent;
+        }
+        return renderElement(element);
+    };
+    return editor;
+};
+
+const withAlign = (editor) => {
+    const { deleteBackward } = editor;
+    editor.deleteBackward = unit => {
+        const { anchor } = editor.selection;
+        const node = anchorBlock(editor);
+        const isVoid = Editor.isVoid(editor, node);
+        const alignTypes = [Alignment.center, Alignment.right];
+        const startLine = Editor.start(editor, anchor.path);
+        const startLineRange = { anchor, focus: startLine };
+        const beforeText = Editor.string(editor, startLineRange);
+        if (!isVoid && node && node.align && alignTypes.includes(node.align) && beforeText === '') {
+            const align = alignTypes.indexOf(node.align) ? Alignment.center : undefined;
+            return Transforms.setNodes(editor, { align });
+        }
+        deleteBackward(unit);
+    };
+    return editor;
+};
+
+const withHeading = (editor) => {
+    const { insertBreak } = editor;
+    editor.insertBreak = () => {
+        const { selection } = editor;
+        const anchorBlock = getAnchorBlockEntry(editor);
+        if (anchorBlock && Range.isCollapsed(selection) && anchorBlock[0].type.startsWith('heading')) {
+            if (Editor.isStart(editor, selection.anchor, anchorBlock[1])) {
+                insertBreak();
+                Transforms.setNodes(editor, { type: ElementKinds.paragraph }, {
+                    at: selection
+                });
+                return;
+            }
+            if (Editor.isEnd(editor, selection.focus, anchorBlock[1])) {
+                insertBreak();
+                Transforms.setNodes(editor, { type: ElementKinds.paragraph });
+                return;
+            }
+        }
+        insertBreak();
+    };
+    return editor;
+};
+
+const withMark = () => (editor) => {
+    const e = editor;
+    e.removeMark = (key, shouldChange = true) => {
+        const { selection } = e;
+        if (selection) {
+            if (Range.isExpanded(selection)) {
+                Transforms.unsetNodes(e, key, {
+                    match: Text.isText,
+                    split: true
+                });
+            }
+            else {
+                const marks = Object.assign({}, (Editor.marks(e) || {}));
+                delete marks[key];
+                editor.marks = marks;
+                const text = Editor.string(e, selection.anchor.path);
+                if (text !== '') {
+                    Editor.setNormalizing(editor, false);
+                    e.insertText('');
+                    editor.marks = marks;
+                    Editor.setNormalizing(editor, true);
+                }
+                else {
+                    Transforms.unsetNodes(e, key, { at: selection.anchor.path });
+                }
+                if (shouldChange) {
+                    editor.onChange();
+                }
+            }
+        }
     };
-    editor.onKeydown = (event) => {
-        const isContinue = !onKeyDownList(event, editor);
-        if (isContinue) {
-            onKeydown(event);
+    e.addMark = (key, value) => {
+        const { selection } = editor;
+        if (selection) {
+            if (Range.isExpanded(selection)) {
+                Transforms.setNodes(e, { [key]: value }, { match: Text.isText, split: true });
+            }
+            else {
+                const marks = Object.assign(Object.assign({}, (Editor.marks(e) || {})), { [key]: value });
+                editor.marks = marks;
+                const text = Editor.string(e, selection.anchor.path);
+                if (text !== '') {
+                    Editor.setNormalizing(editor, false);
+                    e.insertText('');
+                    editor.marks = marks;
+                    Editor.setNormalizing(editor, true);
+                }
+                else {
+                    Transforms.setNodes(e, { [key]: value }, { at: selection.anchor.path });
+                }
+            }
         }
     };
-    editor.normalizeNode = getListNormalizer(editor, { validLiChildrenTypes: validLiChildrenTypes });
-    editor.renderElement = (element) => {
-        if (element.type === ElementKinds.numberedList) {
-            return TheNumberedListComponent;
+    return e;
+};
+
+const withNodeID = ({ idKey = 'id', idCreator = () => Date.now(), filterText = true, filter = () => true } = {}) => (e) => {
+    const editor = e;
+    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) : isDescendant(_node);
+            };
+            // fix can not find path by orign node
+            let node = operation.node;
+            if (!Object.isExtensible(node)) {
+                node = _.cloneDeep(node);
+            }
+            // it will not overwrite ids once it's set as it's read-only
+            mergeDeepToNodes({
+                node,
+                source: idPropsCreator,
+                query: {
+                    filter: newFilter,
+                }
+            });
+            return apply(Object.assign(Object.assign({}, operation), { node }));
         }
-        if (element.type === ElementKinds.bulletedList) {
-            return TheBulletedListComponent;
+        if (operation.type === 'split_node' && (!filterText || operation.properties.type)) {
+            let id = operation.properties[idKey];
+            if (editor.removedIDs.has(id)) {
+                editor.removedIDs.delete(id);
+            }
+            else {
+                id = idCreator();
+            }
+            return apply(Object.assign(Object.assign({}, operation), { properties: Object.assign(Object.assign({}, operation.properties), { [idKey]: id }) }));
         }
-        if (element.type === ElementKinds.listItem) {
-            return TheListItemComponent;
+        if (operation.type === 'merge_node' && (!filterText || operation.properties.type)) {
+            editor.removedIDs.add(operation.properties[idKey]);
         }
-        return renderElement(element);
+        return apply(operation);
+    };
+    editor.getFragment = () => {
+        const fragment = _.cloneDeep(getFragment());
+        return deleteElementKey(fragment, idKey);
     };
     return editor;
 };
 
-class TheTodoItemComponent extends TheBaseElementComponent {
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
-        this.elementRef = elementRef;
-        this.cdr = cdr;
-        this.checkItemClass = true;
+const autoFormatBlock = (editor, type, at, { preFormat, format }, markups) => {
+    Transforms.delete(editor, { at });
+    if (preFormat) {
+        preFormat(editor);
     }
-    get level() {
-        var _a;
-        return (_a = this.element) === null || _a === void 0 ? void 0 : _a.indent;
+    if (!format) {
+        Transforms.setNodes(editor, { type }, { match: n => Editor.isBlock(editor, n) });
     }
-    ngOnInit() {
-        super.ngOnInit();
+    else {
+        format(editor, markups);
     }
-    onCheck(checked) {
-        if (this.readonly) {
+};
+
+const autoFormatInline = (editor, { type, between, markup, ignoreTrim, format }) => {
+    const selection = editor.selection;
+    const startMarkup = between ? between[0] : markup;
+    const endMarkup = between ? between[1] : '';
+    let endMarkupPointBefore = selection.anchor;
+    if (endMarkup) {
+        endMarkupPointBefore = getPointBefore(editor, selection, {
+            matchString: endMarkup
+        });
+        if (!endMarkupPointBefore) {
             return false;
         }
-        setNode(this.editor, { checked }, this.element);
     }
-}
-TheTodoItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheTodoItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TheTodoItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheTodoItemComponent, selector: "div[theTodoItem]", host: { properties: { "class.the-check-item": "this.checkItemClass", "attr.the-level": "this.level" } }, usesInheritance: true, ngImport: i0, template: `
-        <span contenteditable="false" class="todo-item-status">
-            <input #checkbox type="checkbox" [checked]="element.checked" (click)="onCheck(checkbox.checked)" />
-        </span>
-        <span><slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children></span>
-    `, isInline: true, components: [{ type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheTodoItemComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'div[theTodoItem]',
-                    template: `
-        <span contenteditable="false" class="todo-item-status">
-            <input #checkbox type="checkbox" [checked]="element.checked" (click)="onCheck(checkbox.checked)" />
-        </span>
-        <span><slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children></span>
-    `
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { checkItemClass: [{
-                type: HostBinding,
-                args: ['class.the-check-item']
-            }], level: [{
-                type: HostBinding,
-                args: ['attr.the-level']
-            }] } });
-
-const withTodoItem = (editor) => {
-    const { insertBreak, deleteBackward, renderElement } = editor;
-    editor.insertBreak = () => {
-        const { selection } = editor;
-        if (selection && Range.isCollapsed(selection)) {
-            const [match] = Editor.nodes(editor, {
-                match: n => Element$1.isElement(n) && n.type === ElementKinds.checkItem
-            });
-            if (match) {
-                const [, path] = match;
-                const block = anchorBlock(editor);
-                if (block && Editor.isStart(editor, selection.anchor, path) && Editor.isEmpty(editor, block)) {
-                    Transforms.setNodes(editor, {
-                        type: ElementKinds.default,
-                        checked: undefined
-                    }, {
-                        match: n => Element$1.isElement(n) && n.type === ElementKinds.checkItem
-                    });
-                    return;
-                }
-            }
-        }
-        insertBreak();
-        const anchorBlock$1 = anchorBlock(editor);
-        if (anchorBlock$1 && anchorBlock$1.type === ElementKinds.checkItem) {
-            Transforms.setNodes(editor, { checked: false });
-        }
-    };
-    editor.deleteBackward = unit => {
-        const { selection } = editor;
-        if (selection && Range.isCollapsed(selection)) {
-            const [match] = Editor.nodes(editor, {
-                match: n => Element$1.isElement(n) && n.type === ElementKinds.checkItem
-            });
-            if (match) {
-                const [, path] = match;
-                if (Editor.isStart(editor, selection.anchor, path)) {
-                    Transforms.setNodes(editor, { type: ElementKinds.default, checked: undefined }, {
-                        match: n => Element$1.isElement(n) && n.type === ElementKinds.checkItem
-                    });
-                    return;
-                }
-            }
-        }
-        deleteBackward(unit);
+    const startMarkupPointAfter = getPointBefore(editor, endMarkupPointBefore, {
+        matchString: startMarkup,
+        skipInvalid: true,
+        afterMatch: true
+    });
+    if (!startMarkupPointAfter) {
+        return false;
+    }
+    // found
+    const markupRange = {
+        anchor: startMarkupPointAfter,
+        focus: endMarkupPointBefore
     };
-    editor.renderElement = (element) => {
-        if (element.type === ElementKinds.checkItem) {
-            return TheTodoItemComponent;
+    if (!ignoreTrim) {
+        const markupText = getText(editor, markupRange);
+        if (markupText.trim() !== markupText) {
+            return false;
         }
-        return renderElement(element);
-    };
-    return editor;
-};
-
-class TheHrComponent extends TheBaseElementComponent {
-    constructor(elementRef, cdr) {
-        super(elementRef, cdr);
-        this.elementRef = elementRef;
-        this.cdr = cdr;
     }
-    ngAfterViewInit() {
-        setTimeout(() => {
-            const blockCardElement = this.nativeElement.closest('slate-block-card');
-            if (blockCardElement) {
-                blockCardElement.classList.add(`slate-block-card-${this.element.type}`);
+    // delete end markup
+    if (endMarkup) {
+        endMarkupPointBefore = getPointBefore(editor, selection, {
+            matchString: endMarkup
+        });
+        Transforms.delete(editor, {
+            at: {
+                anchor: endMarkupPointBefore,
+                focus: selection.anchor
+            }
+        });
+    }
+    const startMarkupPointBefore = getPointBefore(editor, selection, {
+        matchString: startMarkup,
+        skipInvalid: true
+    });
+    if (format) {
+        const markupText = getText(editor, markupRange);
+        format(editor, markupText);
+        // delete start to end selection
+        Transforms.delete(editor, {
+            at: {
+                anchor: startMarkupPointBefore,
+                focus: selection.anchor
+            }
+        });
+    }
+    else {
+        // add mark to the text between the markups
+        Transforms.select(editor, markupRange);
+        editor.addMark(type, true);
+        Transforms.collapse(editor, { edge: 'end' });
+        editor.removeMark(type, false);
+        // delete start markup
+        Transforms.delete(editor, {
+            at: {
+                anchor: startMarkupPointBefore,
+                focus: startMarkupPointAfter
             }
         });
     }
-}
-TheHrComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheHrComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TheHrComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheHrComponent, selector: "the-hr, [theHr]", usesInheritance: true, ngImport: i0, template: `
-        <div class="the-hr" contenteditable="false" [ngClass]="{ active: selection }">
-            <hr class="the-hr" />
-            <slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>
-        </div>
-    `, isInline: true, components: [{ type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }], directives: [{ type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheHrComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'the-hr, [theHr]',
-                    template: `
-        <div class="the-hr" contenteditable="false" [ngClass]="{ active: selection }">
-            <hr class="the-hr" />
-            <slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>
-        </div>
-    `
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; } });
-
-const withHr = (editor) => {
-    const { isVoid, isBlockCard, renderElement } = editor;
-    editor.isVoid = (element) => {
-        return element.type === ElementKinds.hr || isVoid(element);
-    };
-    editor.isBlockCard = (element) => {
-        if (element.type === ElementKinds.hr) {
-            return true;
-        }
-        return isBlockCard(element);
-    };
-    editor.renderElement = (element) => {
-        if (element.type === ElementKinds.hr) {
-            return TheHrComponent;
-        }
-        return renderElement(element);
-    };
-    return editor;
+    return true;
 };
 
-const withAlign = (editor) => {
-    const { deleteBackward } = editor;
-    editor.deleteBackward = unit => {
-        const { anchor } = editor.selection;
-        const node = anchorBlock(editor);
-        const isVoid = Editor.isVoid(editor, node);
-        const alignTypes = [Alignment.center, Alignment.right];
-        const startLine = Editor.start(editor, anchor.path);
-        const startLineRange = { anchor, focus: startLine };
-        const beforeText = Editor.string(editor, startLineRange);
-        if (!isVoid && node && node.align && alignTypes.includes(node.align) && beforeText === '') {
-            const align = alignTypes.indexOf(node.align) ? Alignment.center : undefined;
-            return Transforms.setNodes(editor, { align });
+const ListEditor = {
+    isList(editor, element, type) {
+        return Editor.isBlock(editor, element) && element.type === type;
+    },
+    toggleList(editor, type, startIndex) {
+        if (!editor.selection) {
+            return;
         }
-        deleteBackward(unit);
-    };
-    return editor;
-};
-
-const withHeading = (editor) => {
-    const { insertBreak } = editor;
-    editor.insertBreak = () => {
-        const { selection } = editor;
-        const anchorBlock = getAnchorBlockEntry(editor);
-        if (anchorBlock && Range.isCollapsed(selection) && anchorBlock[0].type.startsWith('heading')) {
-            if (Editor.isStart(editor, selection.anchor, anchorBlock[1])) {
-                insertBreak();
-                Transforms.setNodes(editor, { type: ElementKinds.paragraph }, {
-                    at: selection
+        if (!startIndex) {
+            startIndex = 1;
+        }
+        const types = [ElementKinds.bulletedList, ElementKinds.numberedList];
+        Editor.withoutNormalizing(editor, () => {
+            const [...listItems] = Editor.nodes(editor, {
+                match: node => Element$1.isElement(node) && node.type === ElementKinds.listItem,
+                mode: 'lowest'
+            });
+            const firstListItemPath = listItems.length && listItems[0][1];
+            const activeListPath = listItems.length && Path.parent(firstListItemPath);
+            const activeListNode = listItems.length && Node.get(editor, activeListPath);
+            // 同级且类型相同：unwrap
+            const isLowestActive = listItems.length &&
+                listItems.every(([, path]) => activeListNode.type === type && (Path.isSibling(firstListItemPath, path) || Path.equals(firstListItemPath, path)));
+            if (isLowestActive) {
+                const upListItem = Path.parent(activeListPath);
+                Transforms.unwrapNodes(editor, {
+                    at: editor.selection,
+                    match: node => node === activeListNode,
+                    split: true,
+                    mode: 'lowest'
                 });
+                if (upListItem && Node.get(editor, upListItem).type === ElementKinds.listItem) {
+                    Transforms.moveNodes(editor, {
+                        at: editor.selection,
+                        to: Path.next(upListItem),
+                        match: node => Element$1.isElement(node) && node.type === ElementKinds.listItem
+                    });
+                }
+                else {
+                    Transforms.unwrapNodes(editor, {
+                        match: node => Element$1.isElement(node) && node.type === ElementKinds.listItem
+                    });
+                }
                 return;
             }
-            if (Editor.isEnd(editor, selection.focus, anchorBlock[1])) {
-                insertBreak();
-                Transforms.setNodes(editor, { type: ElementKinds.paragraph });
+            // 跨级、同级且类型不同
+            if (activeListNode && types.includes(activeListNode.type)) {
+                Transforms.setNodes(editor, { type }, { match: node => Element$1.isElement(node) && node.type !== type && types.includes(node.type) });
                 return;
             }
-        }
-        insertBreak();
-    };
-    return editor;
-};
-
-const withMark = () => (editor) => {
-    const e = editor;
-    e.removeMark = (key, shouldChange = true) => {
-        const { selection } = e;
-        if (selection) {
-            if (Range.isExpanded(selection)) {
-                Transforms.unsetNodes(e, key, {
-                    match: Text.isText,
-                    split: true
-                });
+            // wrap
+            this.buildListItem(editor);
+            // Todo: types
+            Transforms.wrapNodes(editor, { type, children: [], start: startIndex }, {
+                at: editor.selection,
+                match: node => Element$1.isElement(node) && node.type === ElementKinds.listItem
+            });
+        });
+    },
+    unwrapList(editor) {
+        Editor.withoutNormalizing(editor, () => {
+            unwrapNodesByType(editor, [ElementKinds.bulletedList, ElementKinds.numberedList], { split: true, mode: 'all' });
+            unwrapNodesByType(editor, [ElementKinds.listItem], { split: true, mode: 'all' });
+        });
+    },
+    wrapList(editor, type) {
+        Editor.withoutNormalizing(editor, () => {
+            const listItem = {
+                type: ElementKinds.listItem,
+                children: []
+            };
+            const list = {
+                type,
+                children: []
+            };
+            Transforms.wrapNodes(editor, list, { split: true });
+            Transforms.wrapNodes(editor, listItem, { split: true });
+        });
+    },
+    isActive(editor, type) {
+        const [match] = getNodesByType(editor, type);
+        return !!match;
+    },
+    getActiveList(editor) {
+        const [match] = getNodesByType(editor, LIST_BLOCK_TYPES);
+        return match;
+    },
+    buildListItem(editor) {
+        const nodes = Editor.nodes(editor, {
+            match: node => Editor.isBlock(editor, node),
+            mode: 'lowest'
+        });
+        for (const [node, path] of nodes) {
+            if (!Editor.isVoid(editor, node) && Element$1.isElement(node) && node.type !== ElementKinds.paragraph) {
+                Transforms.setNodes(editor, { type: ElementKinds.paragraph, checked: undefined }, // todo remove checked
+                { at: path });
             }
-            else {
-                const marks = Object.assign({}, (Editor.marks(e) || {}));
-                delete marks[key];
-                editor.marks = marks;
-                const text = Editor.string(e, selection.anchor.path);
-                if (text !== '') {
-                    Editor.setNormalizing(editor, false);
-                    e.insertText('');
-                    editor.marks = marks;
-                    Editor.setNormalizing(editor, true);
-                }
-                else {
-                    Transforms.unsetNodes(e, key, { at: selection.anchor.path });
-                }
-                if (shouldChange) {
-                    editor.onChange();
+            else if (Element$1.isElement(node) && node.type === ElementKinds.paragraph) {
+                let { textIndent } = node;
+                if (textIndent) {
+                    Transforms.setNodes(editor, { textIndent: undefined, indent: undefined }, // remove indent
+                    { at: path });
                 }
             }
-        }
-    };
-    e.addMark = (key, value) => {
-        const { selection } = editor;
-        if (selection) {
-            if (Range.isExpanded(selection)) {
-                Transforms.setNodes(e, { [key]: value }, { match: Text.isText, split: true });
+            if (Node.parent(editor, path).type !== ElementKinds.listItem) {
+                Transforms.wrapNodes(editor, { type: ElementKinds.listItem, children: [] }, {
+                    at: path,
+                    split: true
+                });
             }
-            else {
-                const marks = Object.assign(Object.assign({}, (Editor.marks(e) || {})), { [key]: value });
-                editor.marks = marks;
-                const text = Editor.string(e, selection.anchor.path);
-                if (text !== '') {
-                    Editor.setNormalizing(editor, false);
-                    e.insertText('');
-                    editor.marks = marks;
-                    Editor.setNormalizing(editor, true);
-                }
-                else {
-                    Transforms.setNodes(e, { [key]: value }, { at: selection.anchor.path });
-                }
+        }
+    },
+    buildInsertDataChildren(node) {
+        const { children } = node;
+        const listItem = children[0];
+        if (isNodeTypeList(node) && Element$1.isElement(listItem) && listItem.children[0].type === ElementKinds.paragraph) {
+            return node;
+        }
+        return this.buildInsertDataChildren(listItem);
+    }
+};
+
+const TodoItemEditor = {
+    isActive(editor) {
+        const [match] = getNodesByType(editor, ElementKinds.checkItem);
+        return !!match;
+    },
+    insertTodoItem(editor) {
+        if (!editor.selection) {
+            return;
+        }
+        const isActive = this.isActive(editor);
+        const isNumberedList = ListEditor.isActive(editor, ElementKinds.numberedList);
+        const isBulletedList = ListEditor.isActive(editor, ElementKinds.bulletedList);
+        if (isActive) {
+            Transforms.setNodes(editor, {
+                type: ElementKinds.paragraph
+            });
+        }
+        else {
+            if (isNumberedList || isBulletedList) {
+                ListEditor.unwrapList(editor);
             }
+            Transforms.setNodes(editor, {
+                type: ElementKinds.checkItem
+            });
         }
-    };
-    return e;
+    }
 };
 
-const withNodeID = ({ idKey = 'id', idCreator = () => Date.now(), filterText = true, filter = () => true } = {}) => (e) => {
-    const editor = e;
-    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) : isDescendant(_node);
-            };
-            // fix can not find path by orign node
-            let node = operation.node;
-            if (!Object.isExtensible(node)) {
-                node = _.cloneDeep(node);
-            }
-            // it will not overwrite ids once it's set as it's read-only
-            mergeDeepToNodes({
-                node,
-                source: idPropsCreator,
-                query: {
-                    filter: newFilter,
-                }
+const BlockquoteEditor = {
+    toggleBlockquote(editor) {
+        if (!isParagraph(editor)) {
+            Transforms.insertNodes(editor, {
+                type: ElementKinds.paragraph,
+                mode: 'text',
+                children: [
+                    {
+                        text: ''
+                    }
+                ]
             });
-            return apply(Object.assign(Object.assign({}, operation), { node }));
         }
-        if (operation.type === 'split_node' && (!filterText || operation.properties.type)) {
-            let id = operation.properties[idKey];
-            if (editor.removedIDs.has(id)) {
-                editor.removedIDs.delete(id);
-            }
-            else {
-                id = idCreator();
-            }
-            return apply(Object.assign(Object.assign({}, operation), { properties: Object.assign(Object.assign({}, operation.properties), { [idKey]: id }) }));
+        const isActive = isBlockActive(editor, ElementKinds.blockquote);
+        if (!isActive) {
+            Transforms.wrapNodes(editor, { type: ElementKinds.blockquote, children: [] }, {
+                mode: 'lowest'
+            });
         }
-        if (operation.type === 'merge_node' && (!filterText || operation.properties.type)) {
-            editor.removedIDs.add(operation.properties[idKey]);
+        else {
+            Transforms.unwrapNodes(editor, { match: n => Element$1.isElement(n) && n.type === ElementKinds.blockquote });
         }
-        return apply(operation);
-    };
-    editor.getFragment = () => {
-        const fragment = _.cloneDeep(getFragment());
-        return deleteElementKey(fragment, idKey);
-    };
-    return editor;
+    }
 };
 
-const autoFormatBlock = (editor, type, at, { preFormat, format }, markups) => {
-    Transforms.delete(editor, { at });
-    if (preFormat) {
-        preFormat(editor);
-    }
-    if (!format) {
-        Transforms.setNodes(editor, { type }, { match: n => Editor.isBlock(editor, n) });
-    }
-    else {
-        format(editor, markups);
+const InlineCodeEditor = {
+    toggleInlineCode(editor, text) {
+        const isActive = InlineCodeEditor.isInlineCodeActive(editor);
+        if (isActive) {
+            InlineCodeEditor.unwrapInlineCode(editor);
+            return;
+        }
+        if (Range.isCollapsed(editor.selection)) {
+            InlineCodeEditor.wrapInlineCode(editor, text);
+        }
+        else {
+            const fragment = Node.fragment(editor, editor.selection)[0];
+            const selectNode = Node.get(fragment, []);
+            const selectText = Node.string(selectNode);
+            InlineCodeEditor.wrapInlineCode(editor, selectText);
+        }
+    },
+    wrapInlineCode(editor, text = '') {
+        if (InlineCodeEditor.isInlineCodeActive(editor)) {
+            InlineCodeEditor.unwrapInlineCode(editor);
+        }
+        const { selection } = editor;
+        const isCollapsed = selection && Range.isCollapsed(selection);
+        const inlineCode = {
+            type: ElementKinds.inlineCode,
+            children: isCollapsed ? [{ text: text ? text : ZERO_WIDTH_CHAR }] : []
+        };
+        if (isCollapsed) {
+            Transforms.insertNodes(editor, inlineCode);
+        }
+        else {
+            Transforms.wrapNodes(editor, inlineCode, { split: true });
+        }
+    },
+    unwrapInlineCode(editor) {
+        Transforms.unwrapNodes(editor, { match: n => Element$1.isElement(n) && n.type === ElementKinds.inlineCode });
+    },
+    isInlineCodeActive(editor, path) {
+        var _a;
+        const [inlineCode] = Editor.nodes(editor, {
+            at: path ? path : (_a = editor.selection) === null || _a === void 0 ? void 0 : _a.anchor.path,
+            match: n => Element$1.isElement(n) && n.type === ElementKinds.inlineCode
+        });
+        return !!inlineCode;
     }
 };
 
-const autoFormatInline = (editor, { type, between, markup, ignoreTrim, format }) => {
-    const selection = editor.selection;
-    const startMarkup = between ? between[0] : markup;
-    const endMarkup = between ? between[1] : '';
-    let endMarkupPointBefore = selection.anchor;
-    if (endMarkup) {
-        endMarkupPointBefore = getPointBefore(editor, selection, {
-            matchString: endMarkup
+const HeadingEditor = {
+    setHeading(editor, heading) {
+        Editor.withoutNormalizing(editor, () => {
+            const types = [ElementKinds.bulletedList, ElementKinds.numberedList, ElementKinds.listItem];
+            Transforms.unwrapNodes(editor, {
+                at: editor.selection,
+                match: n => Element$1.isElement(n) && types.includes(n.type),
+                mode: 'all',
+                split: true
+            });
+            Transforms.setNodes(editor, { type: heading });
+            const entry = anchorBlockEntry(editor);
+            const unMarks = {
+                [MarkTypes.fontSize]: null
+            };
+            if (entry) {
+                setMarks(editor, unMarks, entry[1]);
+                return;
+            }
+            setMarks(editor, unMarks, editor.selection);
         });
-        if (!endMarkupPointBefore) {
-            return false;
-        }
-    }
-    const startMarkupPointAfter = getPointBefore(editor, endMarkupPointBefore, {
-        matchString: startMarkup,
-        skipInvalid: true,
-        afterMatch: true
-    });
-    if (!startMarkupPointAfter) {
-        return false;
+    },
+    isHeadingActive(editor, heading) {
+        const [match] = Editor.nodes(editor, {
+            match: n => Element$1.isElement(n) && n.type === heading,
+            universal: true
+        });
+        return !!match;
     }
-    // found
-    const markupRange = {
-        anchor: startMarkupPointAfter,
-        focus: endMarkupPointBefore
-    };
-    if (!ignoreTrim) {
-        const markupText = getText(editor, markupRange);
-        if (markupText.trim() !== markupText) {
-            return false;
+};
+
+const defaultAutoFormatRules = [
+    {
+        type: ElementKinds.heading_1,
+        markup: '#',
+        format: (editor) => {
+            HeadingEditor.setHeading(editor, ElementKinds.heading_1);
+        }
+    },
+    {
+        type: ElementKinds.heading_2,
+        markup: '##',
+        format: (editor) => {
+            HeadingEditor.setHeading(editor, ElementKinds.heading_2);
+        }
+    },
+    {
+        type: ElementKinds.heading_3,
+        markup: '###',
+        format: (editor) => {
+            HeadingEditor.setHeading(editor, ElementKinds.heading_3);
+        }
+    },
+    {
+        type: ElementKinds.heading_4,
+        markup: '####',
+        format: (editor) => {
+            HeadingEditor.setHeading(editor, ElementKinds.heading_4);
+        }
+    },
+    {
+        type: ElementKinds.heading_5,
+        markup: '#####',
+        format: (editor) => {
+            HeadingEditor.setHeading(editor, ElementKinds.heading_5);
+        }
+    },
+    {
+        type: ElementKinds.heading_6,
+        markup: '######',
+        format: (editor) => {
+            HeadingEditor.setHeading(editor, ElementKinds.heading_6);
+        }
+    },
+    {
+        type: ElementKinds.blockquote,
+        markup: ['>'],
+        format: (editor) => {
+            BlockquoteEditor.toggleBlockquote(editor);
+        }
+    },
+    {
+        type: MarkTypes.bold,
+        between: ['**', '**'],
+        mode: 'inline',
+        insertTrigger: true
+    },
+    {
+        type: MarkTypes.bold,
+        between: ['__', '__'],
+        mode: 'inline',
+        insertTrigger: true
+    },
+    {
+        type: MarkTypes.italic,
+        between: ['*', '*'],
+        mode: 'inline',
+        insertTrigger: true
+    },
+    {
+        type: MarkTypes.italic,
+        between: ['_', '_'],
+        mode: 'inline',
+        insertTrigger: true
+    },
+    {
+        type: ElementKinds.inlineCode,
+        between: ['`', '`'],
+        mode: 'inline',
+        format: (editor, text) => {
+            InlineCodeEditor.toggleInlineCode(editor, text);
+            Transforms.select(editor, Editor.after(editor, editor.selection));
         }
-    }
-    // delete end markup
-    if (endMarkup) {
-        endMarkupPointBefore = getPointBefore(editor, selection, {
-            matchString: endMarkup
-        });
-        Transforms.delete(editor, {
-            at: {
-                anchor: endMarkupPointBefore,
-                focus: selection.anchor
-            }
-        });
-    }
-    const startMarkupPointBefore = getPointBefore(editor, selection, {
-        matchString: startMarkup,
-        skipInvalid: true
-    });
-    if (format) {
-        const markupText = getText(editor, markupRange);
-        format(editor, markupText);
-        // delete start to end selection
-        Transforms.delete(editor, {
-            at: {
-                anchor: startMarkupPointBefore,
-                focus: selection.anchor
-            }
-        });
-    }
-    else {
-        // add mark to the text between the markups
-        Transforms.select(editor, markupRange);
-        editor.addMark(type, true);
-        Transforms.collapse(editor, { edge: 'end' });
-        editor.removeMark(type, false);
-        // delete start markup
-        Transforms.delete(editor, {
-            at: {
-                anchor: startMarkupPointBefore,
-                focus: startMarkupPointAfter
+    },
+    {
+        type: MarkTypes.strike,
+        between: ['~~', '~~'],
+        mode: 'inline',
+        insertTrigger: true
+    },
+    {
+        type: ElementKinds.code,
+        markup: '```',
+        insertTrigger: true
+    },
+    {
+        type: ElementKinds.listItem,
+        markup: [],
+        match: (editor) => {
+            return isParagraph(editor) ? ['*', '-', '+'] : [];
+        },
+        format: (editor) => {
+            ListEditor.toggleList(editor, ElementKinds.bulletedList);
+        }
+    },
+    {
+        type: ElementKinds.listItem,
+        key: ElementKinds.numberedList,
+        markup: [],
+        match: (editor, textFromBlockStart) => {
+            return isParagraph(editor) && /^-?\d+(\.|\))$/.test(textFromBlockStart) ? [textFromBlockStart] : [];
+        },
+        format: (editor, markup) => {
+            let startIndex = 1;
+            if (markup) {
+                startIndex = markup[0].split('.')[0];
+                if (startIndex === 0) {
+                    startIndex = 1;
+                }
             }
-        });
+            ListEditor.toggleList(editor, ElementKinds.numberedList, startIndex);
+        }
+    },
+    {
+        type: ElementKinds.checkItem,
+        markup: [],
+        match: (editor) => {
+            return isParagraph(editor) ? ['[]'] : [];
+        },
+        format: (editor) => {
+            TodoItemEditor.insertTodoItem(editor);
+        }
+    },
+    {
+        type: ElementKinds.hr,
+        markup: '---',
+        insertTrigger: true
     }
-    return true;
-};
+];
 
-const withAutoFormat = ({ rules }) => (editor) => {
+const withAutoFormat = () => (editor) => {
     const { insertText } = editor;
     editor.insertText = text => {
-        var _a;
+        var _a, _b;
+        let autoFormatRules = defaultAutoFormatRules;
+        if ((_a = editor.extraAutoFormatRules) === null || _a === void 0 ? void 0 : _a.length) {
+            const extraRules = mergAutoFormateRules(editor.extraAutoFormatRules);
+            autoFormatRules = Object.values(extraRules);
+        }
         if (!isCollapsed(editor.selection)) {
             return insertText(text);
         }
-        for (let _b of rules) {
-            const { query } = _b, rule = __rest(_b, ["query"]);
+        for (let _c of autoFormatRules) {
+            const { query } = _c, rule = __rest(_c, ["query"]);
             const { trigger = ' ', mode = 'block', type, markup, preFormat, format, match, between, ignoreTrim, insertTrigger, allowSameTypeAbove = false, triggerAtBlockStart = true } = rule;
             if (query && !query(editor, rule))
                 continue;
@@ -4358,7 +4399,7 @@ const withAutoFormat = ({ rules }) => (editor) => {
                     });
                     if (!markupRange)
                         continue;
-                    const blockAbovePath = (_a = getBlockAbove(editor)) === null || _a === void 0 ? void 0 : _a[1];
+                    const blockAbovePath = (_b = getBlockAbove(editor)) === null || _b === void 0 ? void 0 : _b[1];
                     if (!blockAbovePath)
                         continue;
                     // If the markup is not at the start, insert break before autoformatting.
@@ -4395,6 +4436,17 @@ const withAutoFormat = ({ rules }) => (editor) => {
     };
     return editor;
 };
+const mergAutoFormateRules = (extraAutoFormatRules) => {
+    const combinationData = [...defaultAutoFormatRules, ...extraAutoFormatRules];
+    const dataInfo = {};
+    combinationData.forEach(item => {
+        if (!dataInfo[item.type + item.key]) {
+            dataInfo[item.type + item.key] = Object.assign({}, item);
+        }
+        dataInfo[item.type + item.key] = Object.assign(Object.assign({}, dataInfo[item.type + item.key]), item);
+    });
+    return dataInfo;
+};
 
 const withTransforms = () => (editor) => {
     const e = editor;
@@ -9213,8 +9265,9 @@ class TheTableComponent extends TheBaseElementComponent {
         setNode(this.editor, { columns }, this.element);
     }
     onRowMouseDown(event, index) {
+        if (this.readonly)
+            return;
         event.stopPropagation();
-        event.preventDefault();
         if (!this.isInTable) {
             const path = TheEditor.findPath(this.editor, this.element);
             Transforms.select(this.editor, path);
@@ -11250,26 +11303,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
             }] } });
 
 class TheQuickToolbarComponent extends mixinUnsubscribe(MixinBase) {
-    constructor(popoverRef, elementRef) {
+    constructor(elementRef, cdr) {
         super();
-        this.popoverRef = popoverRef;
         this.elementRef = elementRef;
+        this.cdr = cdr;
         this.ToolbarItemMode = ToolbarItemMode;
         this.ToolbarActionTypes = ToolbarActionTypes;
     }
     handleMouseDown(event) {
         if (!this.elementRef.nativeElement.contains(event.target)) {
-            QuickInsertEditor.closeQuickToolbar(this.editor);
+            QuickInsertEditor.closeQuickInsertToolbar(this.editor);
         }
         else {
             event.preventDefault();
         }
     }
     handleEnter() {
-        QuickInsertEditor.closeQuickToolbar(this.editor);
+        QuickInsertEditor.closeQuickInsertToolbar(this.editor);
     }
     handleEsc() {
-        QuickInsertEditor.closeQuickToolbar(this.editor);
+        QuickInsertEditor.closeQuickInsertToolbar(this.editor);
     }
     ngOnInit() {
         this.editorElement = AngularEditor.toDOMNode(this.editor, this.editor);
@@ -11294,15 +11347,15 @@ class TheQuickToolbarComponent extends mixinUnsubscribe(MixinBase) {
         super.ngOnDestroy();
     }
 }
-TheQuickToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", 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.15", type: TheQuickToolbarComponent, selector: "the-quick-toolbar", inputs: { editor: "editor", quickToolbarItems: "quickToolbarItems" }, host: { listeners: { "document: mousedown": "handleMouseDown($event)", "document: keydown.enter": "handleEnter()", "document: keydown.escape": "handleEsc()" } }, 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$2.ThyListOptionComponent, selector: "thy-list-option,[thy-list-option]", inputs: ["id", "thyValue", "thyDisabled"] }, { type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: ["editor", "item", "itemMode"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+TheQuickToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheQuickToolbarComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TheQuickToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheQuickToolbarComponent, selector: "the-quick-toolbar", inputs: { editor: "editor", quickToolbarItems: "quickToolbarItems" }, host: { listeners: { "document: mousedown": "handleMouseDown($event)", "document: keydown.enter": "handleEnter()", "document: keydown.escape": "handleEsc()" } }, 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: i1$7.ThySelectionListComponent, selector: "thy-selection-list,[thy-selection-list]", inputs: ["thyMultiple", "thyBindKeyEventContainer", "thyScrollContainer", "thyBeforeKeydown", "thyUniqueKey", "thyCompareWith", "thyLayout", "thyAutoActiveFirstItem", "thySize", "thySpaceKeyEnabled"], outputs: ["thySelectionChange"] }, { type: i5$2.ThyListOptionComponent, selector: "thy-list-option,[thy-list-option]", inputs: ["id", "thyValue", "thyDisabled"] }, { type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: ["editor", "item", "itemMode"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", 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: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { editor: [{
                 type: Input
             }], quickToolbarItems: [{
                 type: Input
@@ -11317,16 +11370,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
                 args: ['document: keydown.escape']
             }] } });
 
-const OperationTypes = ['insert_text', 'remove_node', 'merge_node'];
 const QuickInsertEditor = {
-    openQuickToolbar(editor, toolbarItems, origin) {
+    openQuickInsertToolbar(editor, quickToolbarItems, origin) {
+        if (QuickInsertEditor.isOpenedToolbar(editor)) {
+            return;
+        }
+        if (!origin) {
+            const rootNode = AngularEditor.toDOMNode(editor, Node.ancestor(editor, [editor.selection.anchor.path[0]]));
+            origin = rootNode.querySelector('[data-slate-leaf="true"]');
+        }
         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
+                quickToolbarItems
             },
             origin,
             viewContainerRef: viewContainerRef,
@@ -11339,52 +11398,34 @@ const QuickInsertEditor = {
             scrollStrategy: overlay.scrollStrategies.reposition(),
             manualClosure: true
         });
+        quickToolbarRef.componentInstance.cdr.markForCheck();
         THE_EDITOR_QUICK_TOOLBAR_REF.set(editor, quickToolbarRef);
     },
-    closeQuickToolbar(editor) {
+    closeQuickInsertToolbar(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;
+    isOpenedToolbar(editor) {
+        const quickToolbarRef = THE_EDITOR_QUICK_TOOLBAR_REF.get(editor);
+        return !!quickToolbarRef;
     }
 };
 
 const withQuickInsert = (editor) => {
     const { onKeydown, deleteBackward, onChange } = editor;
+    let presseingQuickInsertHotkey = false;
     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;
-            const leafElement = rootNode.querySelector('[data-slate-leaf="true"]');
-            const origin = leafElement || rootNode;
-            QuickInsertEditor.openQuickToolbar(editor, quickToolbars, origin);
+            presseingQuickInsertHotkey = true;
         }
         onKeydown(event);
     };
     editor.deleteBackward = unit => {
-        if (!QuickInsertEditor.isOpenToolbar(editor, ['remove_text'])) {
-            QuickInsertEditor.closeQuickToolbar(editor);
+        if (QuickInsertEditor.isOpenedToolbar(editor)) {
+            QuickInsertEditor.closeQuickInsertToolbar(editor);
         }
         deleteBackward(unit);
     };
@@ -11392,11 +11433,17 @@ const withQuickInsert = (editor) => {
         var _a;
         onChange();
         if (editor.selection) {
+            const block = Node.get(editor, [editor.selection.anchor.path[0]]);
+            // quick insert plus
             const editorComponent = editor.injector.get(TheEditorComponent);
             (_a = editorComponent.quickInsertInstance) === null || _a === void 0 ? void 0 : _a.checkStatus();
-            const block = Node.ancestor(editor, [editor.selection.anchor.path[0]]);
-            if (!isCleanEmptyParagraph(editor) && Node.string(block) !== QUICK_TOOLBAR_HOTKEY) {
-                QuickInsertEditor.closeQuickToolbar(editor);
+            if (presseingQuickInsertHotkey && Node.string(block) === QUICK_TOOLBAR_HOTKEY) {
+                QuickInsertEditor.openQuickInsertToolbar(editor, editorComponent.quickToolbarItems);
+                presseingQuickInsertHotkey = false;
+                return;
+            }
+            if (QuickInsertEditor.isOpenedToolbar(editor) && !isCleanEmptyParagraph(editor) && Node.string(block) !== QUICK_TOOLBAR_HOTKEY) {
+                QuickInsertEditor.closeQuickInsertToolbar(editor);
             }
         }
     };
@@ -11691,6 +11738,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
                 args: ['class.disabled']
             }] } });
 
+const onKeydownTextIndent = (editor, event, kinds, textIndentDisabled) => {
+    const { selection } = editor;
+    const isExpanded = Range.isExpanded(selection);
+    const nodes = Array.from(Editor.nodes(editor, {
+        mode: 'highest',
+        match: node => Element$1.isElement(node) && kinds.includes(node.type)
+    }));
+    const [startBlock] = nodes;
+    if (!startBlock) {
+        return false;
+    }
+    const [block, path] = startBlock;
+    const isStart = Editor.isStart(editor, selection.anchor, path);
+    if (isKeyHotkey('Tab', event)) {
+        event.preventDefault();
+        if (startBlock && (isExpanded || isStart)) {
+            if (!editor.isVoid(block)) {
+                let { textIndent, type } = block;
+                // do not apply first-line indentation for lists
+                if (!textIndent && !textIndentDisabled.includes(type)) {
+                    IndentEditor.setTextIndent(editor, kinds, 2);
+                    return true;
+                }
+                else {
+                    IndentEditor.setIndent(editor);
+                    return true;
+                }
+            }
+        }
+        else {
+            editor.insertText(TAB_SPACE);
+            return true;
+        }
+    }
+    if (isKeyHotkey('shift+Tab', event)) {
+        if (startBlock && (isExpanded || isStart)) {
+            if (!editor.isVoid(block)) {
+                return IndentEditor.cancelTextIntent(editor, event, block, kinds);
+            }
+        }
+    }
+    if (selection && Range.isCollapsed(selection) && hotkeys.isDeleteBackward(event)) {
+        if (startBlock && isStart) {
+            return IndentEditor.cancelTextIntent(editor, event, block, kinds);
+        }
+    }
+    return false;
+};
+
+const withIndent = (kinds) => (editor) => {
+    const { onKeydown } = editor;
+    editor.onKeydown = (event) => {
+        var _a, _b, _c, _d;
+        let indentTypes = kinds;
+        let disableIndentTypes = [ElementKinds.bulletedList, ElementKinds.numberedList, ElementKinds.checkItem];
+        if ((_b = (_a = editor.extraIndentOptions) === null || _a === void 0 ? void 0 : _a.indentTypes) === null || _b === void 0 ? void 0 : _b.length) {
+            indentTypes = mergIndentTypes(kinds, editor.extraIndentOptions.indentTypes);
+        }
+        if ((_d = (_c = editor.extraIndentOptions) === null || _c === void 0 ? void 0 : _c.disabledIndentTypes) === null || _d === void 0 ? void 0 : _d.length) {
+            disableIndentTypes = mergIndentTypes(disableIndentTypes, editor.extraIndentOptions.disabledIndentTypes);
+        }
+        const isContinue = !onKeydownTextIndent(editor, event, indentTypes, disableIndentTypes);
+        if (isContinue) {
+            onKeydown(event);
+        }
+    };
+    return editor;
+};
+const mergIndentTypes = (defaultTypes, indentTypes) => {
+    return Array.from(new Set([...defaultTypes, ...indentTypes]));
+};
+
 const MaxIndent = 11;
 const includesIndentTypes = [
     ElementKinds.checkItem,
@@ -11699,11 +11818,15 @@ const includesIndentTypes = [
     ElementKinds.paragraph,
     ...HEADING_TYPES
 ];
+const getIndentTypes = editor => {
+    let indentTypes = editor.extraIndentOptions ? editor.extraIndentOptions.indentTypes : [];
+    return mergIndentTypes(includesIndentTypes, indentTypes);
+};
 const IndentEditor = {
     setIndent(editor) {
         const nodes = Array.from(Editor.nodes(editor, {
             mode: 'highest',
-            match: n => Element$1.isElement(n) && includesIndentTypes.includes(n.type)
+            match: n => Element$1.isElement(n) && getIndentTypes(editor).includes(n.type)
         }));
         const [startBlock] = nodes;
         if (startBlock) {
@@ -11713,7 +11836,7 @@ const IndentEditor = {
             if (indent <= MaxIndent) {
                 Transforms.setNodes(editor, { indent }, {
                     mode: 'highest',
-                    match: n => Element$1.isElement(n) && includesIndentTypes.includes(n.type)
+                    match: n => Element$1.isElement(n) && getIndentTypes(editor).includes(n.type)
                 });
             }
         }
@@ -11721,7 +11844,7 @@ const IndentEditor = {
     cancelIndent(editor) {
         const nodes = Array.from(Editor.nodes(editor, {
             mode: 'highest',
-            match: n => Element$1.isElement(n) && includesIndentTypes.includes(n.type)
+            match: n => Element$1.isElement(n) && getIndentTypes(editor).includes(n.type)
         }));
         const [startBlock] = nodes;
         if (startBlock) {
@@ -11729,7 +11852,7 @@ const IndentEditor = {
             indent = indent === 1 ? null : (indent -= 1);
             Transforms.setNodes(editor, { indent }, {
                 mode: 'highest',
-                match: n => Element$1.isElement(n) && includesIndentTypes.includes(n.type)
+                match: n => Element$1.isElement(n) && getIndentTypes(editor).includes(n.type)
             });
         }
     },
@@ -11761,15 +11884,8 @@ const IndentEditor = {
     },
     isDisabled(editor) {
         if (editor.selection) {
-            const allowGroup = [
-                ElementKinds.paragraph,
-                ElementKinds.numberedList,
-                ElementKinds.bulletedList,
-                ElementKinds.checkItem,
-                ...HEADING_TYPES
-            ];
             const anchorBlock$1 = anchorBlock(editor);
-            return anchorBlock$1 && !allowGroup.includes(anchorBlock$1 === null || anchorBlock$1 === void 0 ? void 0 : anchorBlock$1.type);
+            return anchorBlock$1 && !getIndentTypes(editor).includes(anchorBlock$1 === null || anchorBlock$1 === void 0 ? void 0 : anchorBlock$1.type);
         }
         return false;
     }
@@ -11799,67 +11915,6 @@ const IndentOptions = [
     }
 ];
 
-const onKeydownTextIndent = (editor, event, kinds) => {
-    const { selection } = editor;
-    const isExpanded = Range.isExpanded(selection);
-    const nodes = Array.from(Editor.nodes(editor, {
-        mode: 'highest',
-        match: node => Element$1.isElement(node) && kinds.includes(node.type)
-    }));
-    const [startBlock] = nodes;
-    if (!startBlock) {
-        return false;
-    }
-    const [block, path] = startBlock;
-    const isStart = Editor.isStart(editor, selection.anchor, path);
-    const textIndentDisable = [ElementKinds.bulletedList, ElementKinds.numberedList, ElementKinds.checkItem];
-    if (isKeyHotkey('Tab', event)) {
-        event.preventDefault();
-        if (startBlock && (isExpanded || isStart)) {
-            if (!editor.isVoid(block)) {
-                let { textIndent, type } = block;
-                // do not apply first-line indentation for lists
-                if (!textIndent && !textIndentDisable.includes(type)) {
-                    IndentEditor.setTextIndent(editor, kinds, 2);
-                    return true;
-                }
-                else {
-                    IndentEditor.setIndent(editor);
-                    return true;
-                }
-            }
-        }
-        else {
-            editor.insertText(TAB_SPACE);
-            return true;
-        }
-    }
-    if (isKeyHotkey('shift+Tab', event)) {
-        if (startBlock && (isExpanded || isStart)) {
-            if (!editor.isVoid(block)) {
-                return IndentEditor.cancelTextIntent(editor, event, block, kinds);
-            }
-        }
-    }
-    if (selection && Range.isCollapsed(selection) && hotkeys.isDeleteBackward(event)) {
-        if (startBlock && isStart) {
-            return IndentEditor.cancelTextIntent(editor, event, block, kinds);
-        }
-    }
-    return false;
-};
-
-const withIndent = (kinds) => (editor) => {
-    const { onKeydown } = editor;
-    editor.onKeydown = (event) => {
-        const isContinue = !onKeydownTextIndent(editor, event, kinds);
-        if (isContinue) {
-            onKeydown(event);
-        }
-    };
-    return editor;
-};
-
 const internalPlugins = [
     withTheHistory,
     withAutoInsertData(),
@@ -11890,7 +11945,7 @@ const internalPlugins = [
     }),
     withBlockquote,
     withNodeID({ idKey: ELEMENT_UNIQUE_ID, idCreator }),
-    withAutoFormat({ rules: autoFormatRules }),
+    withAutoFormat(),
     withTransforms(),
     withTrailingNode({ type: ElementKinds.paragraph, level: 0 }),
     withMoveSelection,
@@ -12482,7 +12537,11 @@ class TheQuickInsertComponent {
     handleClick(event) {
         event.stopPropagation();
         event.preventDefault();
-        QuickInsertEditor.openQuickToolbar(this.editor, this.quickToolbarItems, this.iconElement.nativeElement);
+        if (QuickInsertEditor.isOpenedToolbar(this.editor)) {
+            QuickInsertEditor.closeQuickInsertToolbar(this.editor);
+            return;
+        }
+        QuickInsertEditor.openQuickInsertToolbar(this.editor, this.quickToolbarItems, this.iconElement.nativeElement);
     }
 }
 TheQuickInsertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheQuickInsertComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
@@ -12755,11 +12814,13 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
         super.ngOnDestroy();
     }
     initialize() {
-        var _a, _b;
+        var _a, _b, _c, _d;
         this.editor = withTheEditor(this.thePlugins, withHistory(withAngular(createEditor(), CLIPBOARD_FORMAT_KEY)));
         this.generateDecorate();
         this.editor.disabled = (_a = this.theOptions) === null || _a === void 0 ? void 0 : _a.disabled;
         this.editor.extraElementOptions = (_b = this.theOptions) === null || _b === void 0 ? void 0 : _b.extraElementOptions;
+        this.editor.extraAutoFormatRules = (_c = this.theOptions) === null || _c === void 0 ? void 0 : _c.extraAutoFormatRules;
+        this.editor.extraIndentOptions = (_d = this.theOptions) === null || _d === void 0 ? void 0 : _d.extraIndentOptions;
         setEditorUUID(this.editor, idCreator());
         this.theContextService.initialize({
             theOptions: this.theOptions,