@worktile/theia 2.1.11 → 2.2.0

package/fesm2015/worktile-theia.js

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Component, ChangeDetectionStrategy, Input, HostListener, ViewContainerRef, ChangeDetectorRef, Injectable, Inject, ViewChild, Pipe, HostBinding, Directive, ElementRef, TemplateRef, EventEmitter, forwardRef, Output, NgModule } from '@angular/core';
+import { InjectionToken, Component, ChangeDetectionStrategy, HostBinding, Input, HostListener, ViewContainerRef, ChangeDetectorRef, Injectable, Inject, ViewChild, Directive, ElementRef, TemplateRef, Pipe, EventEmitter, forwardRef, Output, NgModule } from '@angular/core';
 import * as i6 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i4$2 from '@angular/forms';
@@ -100,6 +100,7 @@ var ElementKinds;
     ElementKinds["link"] = "link";
     ElementKinds["default"] = "paragraph";
     ElementKinds["inlineCode"] = "inline-code";
+    ElementKinds["indent"] = "indent";
 })(ElementKinds || (ElementKinds = {}));
 var Alignment;
 (function (Alignment) {
@@ -141,6 +142,11 @@ const FontSizeTypes = [
     FontSizes.fontSize40,
     FontSizes.fontSize48
 ];
+var Indents;
+(function (Indents) {
+    Indents["indentRight"] = "indent-right";
+    Indents["indentLeft"] = "indent-left";
+})(Indents || (Indents = {}));
 var MarkTypes;
 (function (MarkTypes) {
     MarkTypes["bold"] = "bold";
@@ -196,74 +202,6 @@ const LIST_BLOCK_TYPES = [ElementKinds.numberedList, ElementKinds.bulletedList];
 const VOID_BLOCK_TYPES = [ElementKinds.image, ElementKinds.hr];
 const BLOCK_DELETEBACKWARD_TYPES = [ElementKinds.tableCell];
 
-const TheToolbarGroupToken = new InjectionToken('the-toolbar-group-token');
-const QUICK_TOOLBAR_HOTKEY = '/';
-var DropdownMode;
-(function (DropdownMode) {
-    DropdownMode["icon"] = "icon-mode";
-    DropdownMode["text"] = "text-mode";
-})(DropdownMode || (DropdownMode = {}));
-var ToolbarItemMode;
-(function (ToolbarItemMode) {
-    ToolbarItemMode[ToolbarItemMode["horizontal"] = 0] = "horizontal";
-    ToolbarItemMode[ToolbarItemMode["vertical"] = 1] = "vertical";
-})(ToolbarItemMode || (ToolbarItemMode = {}));
-const DefaultGlobalToolbarDefinition = [
-    ElementKinds.headingList,
-    ToolbarActionTypes.split,
-    MarkTypes.bold,
-    MarkTypes.italic,
-    MarkTypes.underline,
-    MarkTypes.strike,
-    ElementKinds.inlineCode,
-    MarkTypes.color,
-    MarkTypes.backgroundColor,
-    ToolbarActionTypes.split,
-    ToolbarActionTypes.alignType,
-    ToolbarActionTypes.verticalAlign,
-    ToolbarActionTypes.split,
-    ElementKinds.numberedList,
-    ElementKinds.bulletedList,
-    ToolbarActionTypes.split,
-    ElementKinds.link,
-    ElementKinds.image,
-    ElementKinds.table,
-    ElementKinds.blockquote,
-    ElementKinds.code
-];
-const DefaultInlineToolbarDefinition = [
-    ToolbarActionTypes.clean,
-    ToolbarActionTypes.split,
-    MarkTypes.bold,
-    MarkTypes.italic,
-    MarkTypes.underline,
-    MarkTypes.strike,
-    ElementKinds.inlineCode,
-    MarkTypes.color,
-    MarkTypes.backgroundColor,
-    ToolbarActionTypes.split,
-    ToolbarActionTypes.alignType,
-    ToolbarActionTypes.split,
-    ElementKinds.link
-];
-const DefaultQuickToolbarDefinition = [
-    ...STANDARD_HEADING_TYPES,
-    ToolbarActionTypes.split,
-    ElementKinds.numberedList,
-    ElementKinds.bulletedList,
-    ToolbarActionTypes.split,
-    ElementKinds.link,
-    ElementKinds.image,
-    ElementKinds.table,
-    ElementKinds.blockquote,
-    ElementKinds.hr,
-    ElementKinds.code
-];
-const ToolbarMoreGroup = {
-    key: 'more',
-    icon: 'more'
-};
-
 var ErrorCodes;
 (function (ErrorCodes) {
     ErrorCodes[ErrorCodes["UNKNOW_ERROR"] = 1000] = "UNKNOW_ERROR";
@@ -353,6 +291,74 @@ const THE_CODE_MODE_PROVIDER = {
 };
 const CODEMIRROR_PADDING_TOP = 10;
 
+const TheToolbarGroupToken = new InjectionToken('the-toolbar-group-token');
+const QUICK_TOOLBAR_HOTKEY = '/';
+var DropdownMode;
+(function (DropdownMode) {
+    DropdownMode["icon"] = "icon-mode";
+    DropdownMode["text"] = "text-mode";
+})(DropdownMode || (DropdownMode = {}));
+var ToolbarItemMode;
+(function (ToolbarItemMode) {
+    ToolbarItemMode[ToolbarItemMode["horizontal"] = 0] = "horizontal";
+    ToolbarItemMode[ToolbarItemMode["vertical"] = 1] = "vertical";
+})(ToolbarItemMode || (ToolbarItemMode = {}));
+const DefaultGlobalToolbarDefinition = [
+    ElementKinds.headingList,
+    ToolbarActionTypes.split,
+    MarkTypes.bold,
+    MarkTypes.italic,
+    MarkTypes.underline,
+    MarkTypes.strike,
+    ElementKinds.inlineCode,
+    MarkTypes.color,
+    MarkTypes.backgroundColor,
+    ToolbarActionTypes.split,
+    ToolbarActionTypes.alignType,
+    ToolbarActionTypes.verticalAlign,
+    ToolbarActionTypes.split,
+    ElementKinds.numberedList,
+    ElementKinds.bulletedList,
+    ToolbarActionTypes.split,
+    ElementKinds.link,
+    ElementKinds.image,
+    ElementKinds.table,
+    ElementKinds.blockquote,
+    ElementKinds.code
+];
+const DefaultInlineToolbarDefinition = [
+    ToolbarActionTypes.clean,
+    ToolbarActionTypes.split,
+    MarkTypes.bold,
+    MarkTypes.italic,
+    MarkTypes.underline,
+    MarkTypes.strike,
+    ElementKinds.inlineCode,
+    MarkTypes.color,
+    MarkTypes.backgroundColor,
+    ToolbarActionTypes.split,
+    ToolbarActionTypes.alignType,
+    ToolbarActionTypes.split,
+    ElementKinds.link
+];
+const DefaultQuickToolbarDefinition = [
+    ...STANDARD_HEADING_TYPES,
+    ToolbarActionTypes.split,
+    ElementKinds.numberedList,
+    ElementKinds.bulletedList,
+    ToolbarActionTypes.split,
+    ElementKinds.link,
+    ElementKinds.image,
+    ElementKinds.table,
+    ElementKinds.blockquote,
+    ElementKinds.hr,
+    ElementKinds.code
+];
+const ToolbarMoreGroup = {
+    key: 'more',
+    icon: 'more'
+};
+
 class TheTextComponent extends BaseTextComponent {
     constructor(elementRef, renderer2, cdr) {
         super(elementRef, cdr);
@@ -374,10 +380,7 @@ class TheTextComponent extends BaseTextComponent {
             }
         }
         const fontSize = this.text[MarkTypes.fontSize];
-        if (fontSize) {
-            const attr = `the-${MarkTypes.fontSize}`;
-            this.renderer2.setAttribute(this.elementRef.nativeElement, attr, fontSize);
-        }
+        this.renderer2.setAttribute(this.elementRef.nativeElement, `the-${MarkTypes.fontSize}`, fontSize ? fontSize : null);
         if (this.text[MarkTypes.color]) {
             this.renderer2.setStyle(this.elementRef.nativeElement, 'color', this.text[MarkTypes.color]);
         }
@@ -428,9 +431,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
         }] });
 
 class TheDefaultElementComponent extends TheBaseElementComponent {
+    get indent() {
+        var _a;
+        return (_a = this.element) === null || _a === void 0 ? void 0 : _a.indent;
+    }
 }
 TheDefaultElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheDefaultElementComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TheDefaultElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheDefaultElementComponent, selector: "[theDefaultElement]", usesInheritance: true, ngImport: i0, template: '<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>', isInline: true, components: [{ type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TheDefaultElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheDefaultElementComponent, selector: "[theDefaultElement]", host: { properties: { "attr.the-indent": "this.indent" } }, usesInheritance: true, ngImport: i0, template: '<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>', isInline: true, components: [{ type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheDefaultElementComponent, decorators: [{
             type: Component,
             args: [{
@@ -438,7 +445,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
                     template: '<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>',
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }] });
+        }], propDecorators: { indent: [{
+                type: HostBinding,
+                args: ['attr.the-indent']
+            }] } });
 
 const TheEditor = Object.assign({}, AngularEditor);
 var TheDataMode;
@@ -1671,6 +1681,13 @@ const ListEditor = {
                 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 }, // remove textIndent
+                    { at: path });
+                }
+            }
             if (Node.parent(editor, path).type !== ElementKinds.listItem) {
                 Transforms.wrapNodes(editor, { type: ElementKinds.listItem, children: [] }, {
                     at: path,
@@ -2671,86 +2688,6 @@ const withImage = (editor) => {
     return editor;
 };
 
-const onKeydownIndent = (editor, event, kinds) => {
-    const { selection } = editor;
-    if (event.key === 'Tab') {
-        event.preventDefault();
-        const isExpanded = Range.isExpanded(selection);
-        const nodes = Array.from(Editor.nodes(editor, {
-            mode: 'highest',
-            match: indentNodeMatch(kinds)
-        }));
-        const startBlock = nodes[0];
-        if (startBlock && (isExpanded || Editor.isStart(editor, selection.anchor, [startBlock[1][0]]))) {
-            if (!editor.isVoid(startBlock[0])) {
-                if (event.shiftKey) {
-                    return cancelTextIntent(editor, startBlock[0], kinds);
-                }
-                let { textIndent } = startBlock[0];
-                textIndent = textIndent ? textIndent : 0;
-                textIndent += 2;
-                if (textIndent < 50) {
-                    Transforms.setNodes(editor, { textIndent }, {
-                        mode: 'highest',
-                        match: indentNodeMatch(kinds)
-                    });
-                    return true;
-                }
-            }
-        }
-        else {
-            editor.insertText(TAB_SPACE);
-            return true;
-        }
-    }
-    if (selection && Range.isCollapsed(selection) && event.key === 'Backspace') {
-        const nodes = Array.from(Editor.nodes(editor, {
-            mode: 'highest',
-            match: indentNodeMatch(kinds)
-        }));
-        const startBlock = nodes[0];
-        if (startBlock && Editor.isStart(editor, selection.anchor, [startBlock[1][0]])) {
-            return cancelTextIntent(editor, startBlock[0], kinds);
-        }
-    }
-    return false;
-};
-const indentNodeMatch = (kinds) => node => Element$1.isElement(node) && kinds.includes(node.type);
-function cancelTextIntent(editor, anchorBlock, kinds) {
-    let { textIndent } = anchorBlock;
-    if (textIndent > 2) {
-        // prevent deleteBackward function
-        event.preventDefault();
-        textIndent -= 2;
-        Transforms.setNodes(editor, { textIndent }, {
-            mode: 'highest',
-            match: indentNodeMatch(kinds)
-        });
-        return true;
-    }
-    if (textIndent === 2) {
-        // prevent deleteBackward function
-        event.preventDefault();
-        Transforms.setNodes(editor, { textIndent: null }, {
-            mode: 'highest',
-            match: node => Element$1.isElement(node) && kinds.includes(node.type)
-        });
-        return true;
-    }
-    return false;
-}
-
-const withIndent = (kinds) => (editor) => {
-    const { onKeydown } = editor;
-    editor.onKeydown = (event) => {
-        const isContinue = !onKeydownIndent(editor, event, kinds);
-        if (isContinue) {
-            onKeydown(event);
-        }
-    };
-    return editor;
-};
-
 const isList = (n) => {
     return [...LIST_BLOCK_TYPES].includes(n.type);
 };
@@ -3310,57 +3247,18 @@ function onKeyDownList(e, editor) {
     }
 }
 
-class ElementStylePipe {
-    transform(element, align) {
-        const style = {};
-        if (element.align || align) {
-            style.textAlign = element.align || align || Alignment.left;
-        }
-        if (element.textIndent) {
-            style.textIndent = element.textIndent + 'em';
-        }
-        return style;
-    }
-}
-ElementStylePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementStylePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-ElementStylePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementStylePipe, name: "elementStyle" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementStylePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'elementStyle'
-                }]
-        }] });
-class ElementClassPipe {
-    transform(element) {
-        let classStr = '';
-        const prefix = 'indent';
-        if (element.textIndent) {
-            classStr += `${prefix}-${element.textIndent}`;
-        }
-        return classStr;
-    }
-}
-ElementClassPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-ElementClassPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementClassPipe, name: "elementClass" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementClassPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'elementClass'
-                }]
-        }] });
-
 class TheNumberedListComponent extends TheBaseElementComponent {
-    constructor(elementRef, cdr, elementClassPipe) {
+    constructor(elementRef, cdr) {
         super(elementRef, cdr);
         this.elementRef = elementRef;
         this.cdr = cdr;
-        this.elementClassPipe = elementClassPipe;
     }
     get start() {
         return this.element.start;
     }
-    get class() {
-        return this.elementClassPipe.transform(this.element);
+    get level() {
+        var _a;
+        return (_a = this.element) === null || _a === void 0 ? void 0 : _a.indent;
     }
     ngOnInit() {
         super.ngOnInit();
@@ -3369,32 +3267,31 @@ class TheNumberedListComponent extends TheBaseElementComponent {
         super.ngOnDestroy();
     }
 }
-TheNumberedListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheNumberedListComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: ElementClassPipe }], target: i0.ɵɵFactoryTarget.Component });
-TheNumberedListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheNumberedListComponent, selector: "ol[theOl]", host: { properties: { "attr.start": "this.start", "class": "this.class" } }, providers: [ElementClassPipe], usesInheritance: true, ngImport: i0, template: `<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>`, isInline: true, components: [{ type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
+TheNumberedListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheNumberedListComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TheNumberedListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheNumberedListComponent, selector: "ol[theOl]", host: { properties: { "attr.start": "this.start", "attr.the-level": "this.level" } }, usesInheritance: true, ngImport: i0, template: `<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>`, 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: TheNumberedListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ol[theOl]',
-                    template: `<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>`,
-                    providers: [ElementClassPipe]
+                    template: `<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>`
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: ElementClassPipe }]; }, propDecorators: { start: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { start: [{
                 type: HostBinding,
                 args: ['attr.start']
-            }], class: [{
+            }], level: [{
                 type: HostBinding,
-                args: ['class']
+                args: ['attr.the-level']
             }] } });
 
 class TheBulletedListComponent extends TheBaseElementComponent {
-    constructor(elementRef, cdr, elementClassPipe) {
+    constructor(elementRef, cdr) {
         super(elementRef, cdr);
         this.elementRef = elementRef;
         this.cdr = cdr;
-        this.elementClassPipe = elementClassPipe;
     }
-    get class() {
-        return this.elementClassPipe.transform(this.element);
+    get level() {
+        var _a;
+        return (_a = this.element) === null || _a === void 0 ? void 0 : _a.indent;
     }
     ngOnInit() {
         super.ngOnInit();
@@ -3403,18 +3300,17 @@ class TheBulletedListComponent extends TheBaseElementComponent {
         super.ngOnDestroy();
     }
 }
-TheBulletedListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheBulletedListComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: ElementClassPipe }], target: i0.ɵɵFactoryTarget.Component });
-TheBulletedListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheBulletedListComponent, selector: "ul[theUl]", host: { properties: { "class": "this.class" } }, providers: [ElementClassPipe], usesInheritance: true, ngImport: i0, template: `<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>`, isInline: true, components: [{ type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
+TheBulletedListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheBulletedListComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TheBulletedListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheBulletedListComponent, selector: "ul[theUl]", host: { properties: { "attr.the-level": "this.level" } }, usesInheritance: true, ngImport: i0, template: `<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>`, 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: TheBulletedListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ul[theUl]',
-                    template: `<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>`,
-                    providers: [ElementClassPipe]
+                    template: `<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>`
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: ElementClassPipe }]; }, propDecorators: { class: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { level: [{
                 type: HostBinding,
-                args: ['class']
+                args: ['attr.the-level']
             }] } });
 
 class TheListItemComponent extends TheBaseElementComponent {
@@ -3730,52 +3626,6 @@ const withList = ({ validLiChildrenTypes } = {}) => (editor) => {
     return editor;
 };
 
-/** Converts CSS pixel values to numbers, eg "123px" to 123. Returns NaN for non pixel values. */
-function coercePixelsFromCssValue(cssValue) {
-    const match = cssValue.match(/(\d+)px/);
-    if (match) {
-        return Number(match[1]);
-    }
-}
-function getElementWidth(element) {
-    // Optimization: Check style.width first as we probably set it already before reading
-    // offsetWidth which triggers layout.
-    return coercePixelsFromCssValue(element.style.width) || element.offsetWidth;
-}
-function getElementHeight(element) {
-    return Math.round(element.getBoundingClientRect().height);
-}
-function getColsTotalWidth(cols) {
-    return cols.reduce((total, col) => {
-        return total + getElementWidth(col);
-    }, 0);
-}
-function getRowsTotalHeight(rows) {
-    return rows.reduce((total, row) => {
-        return total + getElementHeight(row);
-    }, 0);
-}
-function useElementStyle(el, element) {
-    if (element.align) {
-        el.style.textAlign = element.align || Alignment.left;
-    }
-    if (element.textIndent) {
-        el.style.textIndent = element.textIndent + 'em';
-    }
-    if (element.verticalAlign) {
-        el.style.verticalAlign = element.verticalAlign;
-    }
-}
-function getElementClassByPrefix(el, prefix) {
-    let matchClass = null;
-    el.classList.forEach((value, key) => {
-        if (value.includes(prefix)) {
-            matchClass = value;
-        }
-    });
-    return matchClass;
-}
-
 class TheTodoItemComponent extends TheBaseElementComponent {
     constructor(elementRef, cdr) {
         super(elementRef, cdr);
@@ -3783,15 +3633,12 @@ class TheTodoItemComponent extends TheBaseElementComponent {
         this.cdr = cdr;
         this.checkItemClass = true;
     }
-    onContextChange() {
-        super.onContextChange();
-        if (this.initialized) {
-            this.useIndentClass(this.elementRef.nativeElement, this.element);
-        }
+    get level() {
+        var _a;
+        return (_a = this.element) === null || _a === void 0 ? void 0 : _a.indent;
     }
     ngOnInit() {
         super.ngOnInit();
-        this.useIndentClass(this.elementRef.nativeElement, this.element);
     }
     onCheck(checked) {
         if (this.readonly) {
@@ -3799,26 +3646,9 @@ class TheTodoItemComponent extends TheBaseElementComponent {
         }
         setNode(this.editor, { checked }, this.element);
     }
-    useIndentClass(el, element) {
-        const prefix = 'indent';
-        if (element.textIndent) {
-            const oldClass = getElementClassByPrefix(el, prefix);
-            if (oldClass) {
-                el.classList.remove(oldClass);
-            }
-            const newClassName = `${prefix}-${element.textIndent}`;
-            el.classList.add(newClassName);
-        }
-        else {
-            const oldClass = getElementClassByPrefix(el, prefix);
-            if (oldClass) {
-                el.classList.remove(oldClass);
-            }
-        }
-    }
 }
 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" } }, usesInheritance: true, ngImport: i0, template: `
+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>
@@ -3838,6 +3668,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
         }], 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) => {
@@ -4450,7 +4283,7 @@ const withBlockCard = (editor) => {
                 return;
             }
             // → + right-block-card
-            if ((isMoveForward && !isCardLeftCursor)) {
+            if (isMoveForward && !isCardLeftCursor) {
                 nativeEvent.preventDefault();
                 const [, path] = AngularEditor.toSlateCardEntry(editor, anchorNode);
                 const nextPath = Path.next(path);
@@ -8010,11 +7843,57 @@ class TableStore {
         }
     }
 }
-TableStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TableStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-TableStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TableStore });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TableStore, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return []; } });
+TableStore.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TableStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+TableStore.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TableStore });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TableStore, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
+
+/** Converts CSS pixel values to numbers, eg "123px" to 123. Returns NaN for non pixel values. */
+function coercePixelsFromCssValue(cssValue) {
+    const match = cssValue.match(/(\d+)px/);
+    if (match) {
+        return Number(match[1]);
+    }
+}
+function getElementWidth(element) {
+    // Optimization: Check style.width first as we probably set it already before reading
+    // offsetWidth which triggers layout.
+    return coercePixelsFromCssValue(element.style.width) || element.offsetWidth;
+}
+function getElementHeight(element) {
+    return Math.round(element.getBoundingClientRect().height);
+}
+function getColsTotalWidth(cols) {
+    return cols.reduce((total, col) => {
+        return total + getElementWidth(col);
+    }, 0);
+}
+function getRowsTotalHeight(rows) {
+    return rows.reduce((total, row) => {
+        return total + getElementHeight(row);
+    }, 0);
+}
+function useElementStyle(el, element) {
+    if (element.align) {
+        el.style.textAlign = element.align || Alignment.left;
+    }
+    if (element.textIndent) {
+        el.style.textIndent = element.textIndent + 'em';
+    }
+    if (element.verticalAlign) {
+        el.style.verticalAlign = element.verticalAlign;
+    }
+}
+function getElementClassByPrefix(el, prefix) {
+    let matchClass = null;
+    el.classList.forEach((value, key) => {
+        if (value.includes(prefix)) {
+            matchClass = value;
+        }
+    });
+    return matchClass;
+}
 
 function splitCell(editor) {
     const opts = new TableOptions$1();
@@ -10682,7 +10561,7 @@ class TheVerticalToolbarItemComponent extends TheToolbarBaseItemComponent {
     execute(event) {
         var _a, _b;
         super.execute(event);
-        if (!((_a = this.item) === null || _a === void 0 ? void 0 : _a.execute) || ((_b = this.editor) === null || _b === void 0 ? void 0 : _b.disabled)) {
+        if (((_a = this.editor) === null || _a === void 0 ? void 0 : _a.readOnly) || ((_b = this.editor) === null || _b === void 0 ? void 0 : _b.disabled)) {
             return;
         }
         this.openPopover();
@@ -10715,7 +10594,7 @@ class TheVerticalToolbarItemComponent extends TheToolbarBaseItemComponent {
     }
 }
 TheVerticalToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheVerticalToolbarItemComponent, deps: [{ token: i0.ElementRef }, { token: i1$6.ThyPopover }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-TheVerticalToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheVerticalToolbarItemComponent, selector: "the-toolbar-vertical-align-item", inputs: { item: "item", menus: "menus", editor: "editor", toolbarItem: "toolbarItem" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class.hide": "!active" }, classAttribute: "the-toolbar-dropdown-container verticalAlign" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["VerticalAlignItems"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<a\n    thyIconNavLink\n    class=\"icon-mode link-with-down\"\n    [thyTooltip]=\"toolbarItem?.name\"\n    [thyIconNavLinkActive]=\"isOpened\"\n    thyTooltipPlacement=\"top\"\n    (mousedown)=\"execute($event)\"\n>\n    <thy-icon [thyIconName]=\"activeMenu?.icon\"></thy-icon>\n    <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #VerticalAlignItems>\n    <thy-action-menu class=\"dropdown\">\n        <ng-container *ngFor=\"let menu of toolbarItem?.includes\">\n            <a\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyActionMenuItemActive]=\"menu.key === activeMenu?.key\"\n                [ngStyle]=\"menu?.styles\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n            >\n                <span *ngIf=\"menu.icon\" thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu?.icon\"></thy-icon>\n                </span>\n                <span thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n", components: [{ type: i3.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5$2.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }], directives: [{ type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$2.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5$2.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
+TheVerticalToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheVerticalToolbarItemComponent, selector: "the-toolbar-vertical-align-item", inputs: { item: "item", menus: "menus", editor: "editor", toolbarItem: "toolbarItem" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class.hide": "!active" }, classAttribute: "the-toolbar-dropdown-container verticalAlign" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["VerticalAlignItems"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<a\n    thyIconNavLink\n    class=\"icon-mode link-with-down\"\n    [thyTooltip]=\"toolbarItem?.name\"\n    [thyIconNavLinkActive]=\"isOpened\"\n    thyTooltipPlacement=\"top\"\n    (mousedown)=\"execute($event)\"\n>\n    <thy-icon [thyIconName]=\"activeMenu?.icon\"></thy-icon>\n    <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #VerticalAlignItems>\n    <thy-action-menu class=\"dropdown\">\n        <ng-container *ngFor=\"let menu of toolbarItem?.includes\">\n            <a\n                thyActionMenuItem\n                href=\"javascript:;\"\n                [thyActionMenuItemActive]=\"menu.key === activeMenu?.key\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n            >\n                <span *ngIf=\"menu.icon\" thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu?.icon\"></thy-icon>\n                </span>\n                <span thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n", components: [{ type: i3.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5$2.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }], directives: [{ type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$2.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5$2.ThyActionMenuItemActiveDirective, selector: "[thyActionMenuItemActive]", inputs: ["thyActionMenuItemActive"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheVerticalToolbarItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -11007,14 +10886,17 @@ class TheQuickToolbarComponent extends mixinUnsubscribe(MixinBase) {
     }
     handleMouseDown(event) {
         if (!this.elementRef.nativeElement.contains(event.target)) {
-            this.popoverRef.close();
+            QuickInsertEditor.closeQuickToolbar(this.editor);
         }
         else {
             event.preventDefault();
         }
     }
     handleEnter() {
-        this.popoverRef.close();
+        QuickInsertEditor.closeQuickToolbar(this.editor);
+    }
+    handleEsc() {
+        QuickInsertEditor.closeQuickToolbar(this.editor);
     }
     ngOnInit() {
         this.editorElement = AngularEditor.toDOMNode(this.editor, this.editor);
@@ -11031,7 +10913,7 @@ class TheQuickToolbarComponent extends mixinUnsubscribe(MixinBase) {
     }
     removeHotKey() {
         const node = Node.get(this.editor, this.editor.selection.anchor.path);
-        if (node && Text.equals({ text: QUICK_TOOLBAR_HOTKEY }, node)) {
+        if (node && QUICK_TOOLBAR_HOTKEY === node.text) {
             Editor.deleteBackward(this.editor);
         }
     }
@@ -11040,7 +10922,7 @@ class TheQuickToolbarComponent extends mixinUnsubscribe(MixinBase) {
     }
 }
 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()" } }, 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$2.ThySelectionListComponent, selector: "thy-selection-list,[thy-selection-list]", inputs: ["thyMultiple", "thyBindKeyEventContainer", "thyScrollContainer", "thyBeforeKeydown", "thyUniqueKey", "thyCompareWith", "thyLayout", "thyAutoActiveFirstItem", "thySize", "thySpaceKeyEnabled"], outputs: ["thySelectionChange"] }, { type: i5$3.ThyListOptionComponent, selector: "thy-list-option,[thy-list-option]", inputs: ["id", "thyValue", "thyDisabled"] }, { type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: ["item", "editor", "itemMode"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+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$2.ThySelectionListComponent, selector: "thy-selection-list,[thy-selection-list]", inputs: ["thyMultiple", "thyBindKeyEventContainer", "thyScrollContainer", "thyBeforeKeydown", "thyUniqueKey", "thyCompareWith", "thyLayout", "thyAutoActiveFirstItem", "thySize", "thySpaceKeyEnabled"], outputs: ["thySelectionChange"] }, { type: i5$3.ThyListOptionComponent, selector: "thy-list-option,[thy-list-option]", inputs: ["id", "thyValue", "thyDisabled"] }, { type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: ["item", "editor", "itemMode"] }, { type: NavSplitLineComponent, selector: "nav-split-line", inputs: ["mode"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheQuickToolbarComponent, decorators: [{
             type: Component,
             args: [{
@@ -11057,6 +10939,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
             }], handleEnter: [{
                 type: HostListener,
                 args: ['document: keydown.enter']
+            }], handleEsc: [{
+                type: HostListener,
+                args: ['document: keydown.escape']
             }] } });
 
 const OperationTypes = ['insert_text', 'remove_node', 'merge_node'];
@@ -11170,7 +11055,7 @@ const FontSizeEditor = {
             return;
         }
         // unset fontSize
-        if (isDefaultFontSize && Number(defaultFontSize) === fontSizeMark) {
+        if (isDefaultFontSize) {
             FontSizeEditor.unsetFontSize(editor, size);
             return;
         }
@@ -11269,7 +11154,7 @@ class TheInlineCodeComponent extends TheBaseElementComponent {
         super(...arguments);
         // Put this at the start and end of an inline component to work around this Chromium bug:
         // https://bugs.chromium.org/p/chromium/issues/detail?id=1249405
-        this.inlineChromiumBugfix = '$' + String.fromCodePoint(160);
+        this.inlineChromiumBugfix = String.fromCodePoint(160);
     }
 }
 TheInlineCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheInlineCodeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
@@ -11327,6 +11212,290 @@ const withInlineCode = (editor) => {
     return editor;
 };
 
+class TheIndentToolbarComponent extends TheToolbarBaseItemComponent {
+    constructor(elementRef, thyPopover, viewContainerRef, overlay) {
+        super();
+        this.elementRef = elementRef;
+        this.thyPopover = thyPopover;
+        this.viewContainerRef = viewContainerRef;
+        this.overlay = overlay;
+        this.mode = DropdownMode.text;
+        this.dropdownMode = DropdownMode;
+        this.disabled = false;
+    }
+    get isOpen() {
+        return this.dropdownPopoverRef && this.dropdownPopoverRef.getOverlayRef() && this.dropdownPopoverRef.getOverlayRef().hasAttached();
+    }
+    toggleDropdown(event) {
+        var _a;
+        super.execute(event);
+        if (((_a = this.editor) === null || _a === void 0 ? void 0 : _a.disabled) || this.disabled) {
+            return;
+        }
+        this.openDropdownPopover();
+    }
+    handleDocumentMouseDown(event) {
+        if (!this.elementRef.nativeElement.contains(event.target)) {
+            this.closeDropdownPopover();
+        }
+    }
+    get disabledState() {
+        return this.disabled;
+    }
+    ngOnInit() {
+        var _a;
+        if (!this.activeMenu) {
+            this.activeMenu = this.menus[0];
+        }
+        if (this.toolbarItem) {
+            this.elementRef.nativeElement.classList.add(`${(_a = this.toolbarItem) === null || _a === void 0 ? void 0 : _a.key}`);
+        }
+    }
+    statusChange(editor) {
+        var _a, _b;
+        this.disabled = ((_a = this.toolbarItem) === null || _a === void 0 ? void 0 : _a.disable) ? (_b = this.toolbarItem) === null || _b === void 0 ? void 0 : _b.disable(editor) : false;
+    }
+    itemMousedown(event, item) {
+        super.execute(event);
+        this.closeDropdownPopover();
+        if (item === null || item === void 0 ? void 0 : item.execute) {
+            item === null || item === void 0 ? void 0 : item.execute(this.editor);
+        }
+    }
+    openDropdownPopover() {
+        var _a;
+        this.dropdownPopoverRef = this.thyPopover.open(this.dropdownTemplate, {
+            origin: this.elementRef,
+            panelClass: ['the-toolbar-dropdown-popover', (_a = this.toolbarItem) === null || _a === void 0 ? void 0 : _a.key],
+            placement: 'bottomLeft',
+            insideClosable: false,
+            backdropClosable: true,
+            hasBackdrop: false,
+            offset: 10,
+            viewContainerRef: this.viewContainerRef,
+            scrollStrategy: this.overlay.scrollStrategies.reposition()
+        });
+    }
+    closeDropdownPopover() {
+        var _a;
+        if (this.dropdownPopoverRef) {
+            (_a = this.dropdownPopoverRef) === null || _a === void 0 ? void 0 : _a.close();
+        }
+    }
+}
+TheIndentToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheIndentToolbarComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.ThyPopover }, { token: i0.ViewContainerRef }, { token: i2.Overlay }], target: i0.ɵɵFactoryTarget.Component });
+TheIndentToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheIndentToolbarComponent, selector: "the-indent-toolbar-item", inputs: { toolbarItem: "toolbarItem", menus: "menus", mode: "mode", item: "item" }, host: { listeners: { "mousedown": "toggleDropdown($event)", "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class.disabled": "this.disabledState" }, classAttribute: "the-toolbar-dropdown-container" }, viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<a thyIconNavLink class=\"icon-mode link-with-down\" [thyTooltip]=\"activeMenu?.name\" thyTooltipPlacement=\"top\">\n    <thy-icon [thyIconName]=\"activeMenu?.icon\"></thy-icon>\n    <thy-icon class=\"caret-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #dropdownTemplate>\n    <thy-action-menu class=\"dropdown-menu\">\n        <ng-container *ngFor=\"let menu of menus\">\n            <a thyActionMenuItem href=\"javascript:;\" (mousedown)=\"itemMousedown($event, menu)\">\n                <span thyActionMenuItemIcon>\n                    <thy-icon [thyIconName]=\"menu.icon\"></thy-icon>\n                </span>\n                <span thyActionMenuItemName>{{ menu.name }}</span>\n            </a>\n        </ng-container>\n    </thy-action-menu>\n</ng-template>\n", components: [{ type: i3.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5$2.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }], directives: [{ type: i5$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$2.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: TheIndentToolbarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'the-indent-toolbar-item',
+                    templateUrl: './toolbar-item.component.html',
+                    host: {
+                        class: 'the-toolbar-dropdown-container'
+                    }
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$3.ThyPopover }, { type: i0.ViewContainerRef }, { type: i2.Overlay }]; }, propDecorators: { toolbarItem: [{
+                type: Input
+            }], menus: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], item: [{
+                type: Input
+            }], dropdownTemplate: [{
+                type: ViewChild,
+                args: ['dropdownTemplate', { static: true }]
+            }], toggleDropdown: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }], handleDocumentMouseDown: [{
+                type: HostListener,
+                args: ['document: mousedown', ['$event']]
+            }], disabledState: [{
+                type: HostBinding,
+                args: ['class.disabled']
+            }] } });
+
+const MaxIndent = 13;
+const includesIndentTypes = [
+    ElementKinds.checkItem,
+    ElementKinds.numberedList,
+    ElementKinds.bulletedList,
+    ElementKinds.paragraph,
+    ...HEADING_TYPES
+];
+const IndentEditor = {
+    setIndent(editor) {
+        const nodes = Array.from(Editor.nodes(editor, {
+            mode: 'highest',
+            match: n => Element$1.isElement(n) && includesIndentTypes.includes(n.type)
+        }));
+        const [startBlock] = nodes;
+        if (startBlock) {
+            let [{ indent }] = startBlock;
+            indent = indent ? indent : 0;
+            indent += 1;
+            if (indent <= MaxIndent) {
+                Transforms.setNodes(editor, { indent }, {
+                    mode: 'highest',
+                    match: n => Element$1.isElement(n) && includesIndentTypes.includes(n.type)
+                });
+            }
+        }
+    },
+    cancelIndent(editor) {
+        const nodes = Array.from(Editor.nodes(editor, {
+            mode: 'highest',
+            match: n => Element$1.isElement(n) && includesIndentTypes.includes(n.type)
+        }));
+        const [startBlock] = nodes;
+        if (startBlock) {
+            let [{ indent }] = startBlock;
+            indent = indent === 1 ? null : (indent -= 1);
+            Transforms.setNodes(editor, { indent }, {
+                mode: 'highest',
+                match: n => Element$1.isElement(n) && includesIndentTypes.includes(n.type)
+            });
+        }
+    },
+    setTextIndent(editor, kinds, textIndent) {
+        Transforms.setNodes(editor, { textIndent }, {
+            mode: 'highest',
+            match: node => Element$1.isElement(node) && kinds.includes(node.type)
+        });
+    },
+    cancelTextIntent(editor, event, anchorBlock, kinds) {
+        let { textIndent, indent } = anchorBlock;
+        if (indent) {
+            event.preventDefault();
+            IndentEditor.cancelIndent(editor);
+            return true;
+        }
+        if (!indent && textIndent > 2) {
+            event.preventDefault();
+            textIndent -= 2;
+            IndentEditor.setTextIndent(editor, kinds, textIndent);
+            return true;
+        }
+        if (!indent && textIndent === 2) {
+            event.preventDefault();
+            IndentEditor.setTextIndent(editor, kinds, null);
+            return true;
+        }
+        return false;
+    },
+    isDisabled(editor) {
+        if (editor.selection) {
+            const disableGroup = HEADING_TYPES;
+            const anchorBlock$1 = anchorBlock(editor);
+            return anchorBlock$1 && disableGroup.includes(anchorBlock$1 === null || anchorBlock$1 === void 0 ? void 0 : anchorBlock$1.type);
+        }
+        return false;
+    }
+};
+
+const IndentOptions = [
+    {
+        key: ElementKinds.indent,
+        includes: [Indents.indentRight, Indents.indentLeft],
+        iconComponent: TheIndentToolbarComponent,
+        disable: editor => IndentEditor.isDisabled(editor)
+    },
+    {
+        key: Indents.indentRight,
+        name: '增加缩进',
+        icon: 'indent',
+        execute: editor => IndentEditor.setIndent(editor)
+    },
+    {
+        key: Indents.indentLeft,
+        name: '减少缩进',
+        icon: 'outdent',
+        type: ToolbarItemType.toolDropdown,
+        execute: editor => IndentEditor.cancelIndent(editor)
+    }
+];
+
+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 currentPath = [path[0]];
+    const isStart = Editor.isStart(editor, selection.anchor, currentPath);
+    const textIndentDisable = [ElementKinds.bulletedList, ElementKinds.numberedList, ElementKinds.checkItem];
+    if (isHotkey('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 (isHotkey('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 HOTKEYS = {
+            'mod+]': Indents.indentRight,
+            'mod+[': Indents.indentLeft
+        };
+        for (const hotkey in HOTKEYS) {
+            if (isHotkey(hotkey, event)) {
+                event.preventDefault();
+                const mark = HOTKEYS[hotkey];
+                switch (mark) {
+                    case Indents.indentRight:
+                        IndentEditor.setIndent(editor);
+                        break;
+                    case Indents.indentLeft:
+                        IndentEditor.cancelIndent(editor);
+                        break;
+                }
+            }
+        }
+        const isContinue = !onKeydownTextIndent(editor, event, kinds);
+        if (isContinue) {
+            onKeydown(event);
+        }
+    };
+    return editor;
+};
+
 const internalPlugins = [
     withTheHistory,
     withAutoInsertData(),
@@ -11385,7 +11554,8 @@ const internalToolbarItems = [
     ...TableOptions,
     ...VerticalAlignOptions,
     ...PaintFormatOptions,
-    ...InlineCodeOptions
+    ...InlineCodeOptions,
+    ...IndentOptions
 ];
 const toolbarCompose = (toolbarItems = []) => {
     return [...internalToolbarItems, ...toolbarItems];
@@ -11962,6 +12132,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
                 args: ['mousedown', ['$event']]
             }] } });
 
+class ElementStylePipe {
+    transform(element, align) {
+        const style = {};
+        if (element.align || align) {
+            style.textAlign = element.align || align || Alignment.left;
+        }
+        if (element.textIndent) {
+            style.textIndent = element.textIndent + 'em';
+        }
+        return style;
+    }
+}
+ElementStylePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementStylePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+ElementStylePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementStylePipe, name: "elementStyle" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementStylePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'elementStyle'
+                }]
+        }] });
+class ElementClassPipe {
+    transform(element) {
+        let classStr = '';
+        const prefix = 'indent';
+        if (element.textIndent) {
+            classStr += `${prefix}-${element.textIndent}`;
+        }
+        return classStr;
+    }
+}
+ElementClassPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+ElementClassPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementClassPipe, name: "elementClass" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0, type: ElementClassPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'elementClass'
+                }]
+        }] });
+
 class TheTemplateComponent {
     constructor() {
         this.renderElement = (element) => {
@@ -12597,7 +12806,8 @@ const COMPONENTS = [
     TheTableSelectComponent,
     TheTableToolbarItemComponent,
     TheConversionHintComponent,
-    TheVerticalToolbarItemComponent
+    TheVerticalToolbarItemComponent,
+    TheIndentToolbarComponent
 ];
 const PLUGIN_COMPONENTS = [
     TheImageComponent,
@@ -12640,7 +12850,8 @@ TheEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version
         TheTableSelectComponent,
         TheTableToolbarItemComponent,
         TheConversionHintComponent,
-        TheVerticalToolbarItemComponent, TheImageComponent,
+        TheVerticalToolbarItemComponent,
+        TheIndentToolbarComponent, TheImageComponent,
         TheTemplateComponent,
         TheHrComponent,
         TheBlockquoteComponent,
@@ -12706,5 +12917,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ALIGN_BLOCK_TYPES, A_TAG_REL_ATTR, AlignEditor, Alignment, BLOCK_DELETEBACKWARD_TYPES, BlockquoteEditor, CLIPBOARD_FORMAT_KEY, CODEMIRROR_PADDING_TOP, CODE_MODES, COMPONENTS, CONTAINER_BLOCKS, CONTROL_KEY, CodeEditor, CodeMode, ColorEditor, DEFAULT_LANGUAGE, DEFAULT_SCROLL_CONTAINER, DefaultElementOptions, DefaultGlobalToolbarDefinition, DefaultInlineToolbarDefinition, DefaultQuickToolbarDefinition, DropdownMode, ELEMENT_UNIQUE_ID, ElementKinds, ErrorCodes, FontSizeTypes, FontSizes, HEADING_TYPES, HeadingEditor, HrEditor, IS_MAC, ImageEditor, LINK_DEFAULT_TEXT, LIST_BLOCK_TYPES, LinkEditor, ListEditor, MarkEditor, MarkProps, MarkTypes, PICTURE_ACCEPTED_UPLOAD_MIME, PICTURE_ACCEPTED_UPLOAD_SIZE, PLUGIN_COMPONENTS, QUICK_TOOLBAR_HOTKEY, QuickInsertEditor, STANDARD_HEADING_TYPES, TAB_SPACE, THE_CODE_MODE_PROVIDER, THE_CODE_MODE_TOKEN, THE_EDITOR_CONVERSION_HINT_REF, THE_EDITOR_QUICK_TOOLBAR_REF, THE_EDITOR_UUID, THE_INLINE_TOOLBAR_TYPES, THE_UPLOAD_SERVICE_TOKEN, TableEditor, TheBaseElementComponent, TheCodeConfig, TheContextService, TheDataMode, TheDefaultElementComponent, TheEditor, TheEditorComponent, TheEditorModule, TheImageComponent, TheMode, index$1 as TheQueries, TheToolbarBaseItemComponent, TheToolbarComponent, TheToolbarDropdownComponent, TheToolbarGroupComponent, TheToolbarGroupToken, TheToolbarItemComponent, TheToolbarService, index as TheTransforms, TodoItemEditor, ToolbarActionTypes, ToolbarAlignment, ToolbarItemMode, ToolbarItemType, ToolbarMoreGroup, VOID_BLOCK_TYPES, VerticalAlignEditor, VerticalAlignment, ZERO_WIDTH_CHAR, createEmptyParagraph, dataDeserialize, dataSerializing, getToolbarClass, htmlToTheia, inValidTypes, isCleanEmptyParagraph, plainToTheia, toolbarCompose, withTheEditor };
+export { ALIGN_BLOCK_TYPES, A_TAG_REL_ATTR, AlignEditor, Alignment, BLOCK_DELETEBACKWARD_TYPES, BlockquoteEditor, CLIPBOARD_FORMAT_KEY, CODEMIRROR_PADDING_TOP, CODE_MODES, COMPONENTS, CONTAINER_BLOCKS, CONTROL_KEY, CodeEditor, CodeMode, ColorEditor, DEFAULT_LANGUAGE, DEFAULT_SCROLL_CONTAINER, DefaultElementOptions, DefaultGlobalToolbarDefinition, DefaultInlineToolbarDefinition, DefaultQuickToolbarDefinition, DropdownMode, ELEMENT_UNIQUE_ID, ElementKinds, ErrorCodes, FontSizeTypes, FontSizes, HEADING_TYPES, HeadingEditor, HrEditor, IS_MAC, ImageEditor, Indents, LINK_DEFAULT_TEXT, LIST_BLOCK_TYPES, LinkEditor, ListEditor, MarkEditor, MarkProps, MarkTypes, PICTURE_ACCEPTED_UPLOAD_MIME, PICTURE_ACCEPTED_UPLOAD_SIZE, PLUGIN_COMPONENTS, QUICK_TOOLBAR_HOTKEY, QuickInsertEditor, STANDARD_HEADING_TYPES, TAB_SPACE, THE_CODE_MODE_PROVIDER, THE_CODE_MODE_TOKEN, THE_EDITOR_CONVERSION_HINT_REF, THE_EDITOR_QUICK_TOOLBAR_REF, THE_EDITOR_UUID, THE_INLINE_TOOLBAR_TYPES, THE_UPLOAD_SERVICE_TOKEN, TableEditor, TheBaseElementComponent, TheCodeConfig, TheContextService, TheDataMode, TheDefaultElementComponent, TheEditor, TheEditorComponent, TheEditorModule, TheImageComponent, TheMode, index$1 as TheQueries, TheToolbarBaseItemComponent, TheToolbarComponent, TheToolbarDropdownComponent, TheToolbarGroupComponent, TheToolbarGroupToken, TheToolbarItemComponent, TheToolbarService, index as TheTransforms, TodoItemEditor, ToolbarActionTypes, ToolbarAlignment, ToolbarItemMode, ToolbarItemType, ToolbarMoreGroup, VOID_BLOCK_TYPES, VerticalAlignEditor, VerticalAlignment, ZERO_WIDTH_CHAR, createEmptyParagraph, dataDeserialize, dataSerializing, getToolbarClass, htmlToTheia, inValidTypes, isCleanEmptyParagraph, plainToTheia, toolbarCompose, withTheEditor };
 //# sourceMappingURL=worktile-theia.js.map