@worktile/theia 2.1.14 → 2.2.0

package/bundles/worktile-theia.umd.js

@@ -410,6 +410,7 @@
         ElementKinds["link"] = "link";
         ElementKinds["default"] = "paragraph";
         ElementKinds["inlineCode"] = "inline-code";
+        ElementKinds["indent"] = "indent";
     })(exports.ElementKinds || (exports.ElementKinds = {}));
     exports.Alignment = void 0;
     (function (Alignment) {
@@ -451,6 +452,11 @@
         exports.FontSizes.fontSize40,
         exports.FontSizes.fontSize48
     ];
+    exports.Indents = void 0;
+    (function (Indents) {
+        Indents["indentRight"] = "indent-right";
+        Indents["indentLeft"] = "indent-left";
+    })(exports.Indents || (exports.Indents = {}));
     exports.MarkTypes = void 0;
     (function (MarkTypes) {
         MarkTypes["bold"] = "bold";
@@ -750,10 +756,18 @@
         function TheDefaultElementComponent() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
+        Object.defineProperty(TheDefaultElementComponent.prototype, "indent", {
+            get: function () {
+                var _a;
+                return (_a = this.element) === null || _a === void 0 ? void 0 : _a.indent;
+            },
+            enumerable: false,
+            configurable: true
+        });
         return TheDefaultElementComponent;
     }(TheBaseElementComponent));
     TheDefaultElementComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheDefaultElementComponent, deps: null, target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheDefaultElementComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheDefaultElementComponent, selector: "[theDefaultElement]", usesInheritance: true, ngImport: i0__namespace, template: '<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>', isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    TheDefaultElementComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.15", type: TheDefaultElementComponent, selector: "[theDefaultElement]", host: { properties: { "attr.the-indent": "this.indent" } }, usesInheritance: true, ngImport: i0__namespace, template: '<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>', isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheDefaultElementComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -761,7 +775,10 @@
                         template: '<slate-children [children]="children" [context]="childrenContext" [viewContext]="viewContext"></slate-children>',
                         changeDetection: i0.ChangeDetectionStrategy.OnPush
                     }]
-            }] });
+            }], propDecorators: { indent: [{
+                    type: i0.HostBinding,
+                    args: ['attr.the-indent']
+                }] } });
 
     var TheEditor = Object.assign({}, i1.AngularEditor);
     exports.TheDataMode = void 0;
@@ -3138,86 +3155,6 @@
         return editor;
     };
 
-    var onKeydownIndent = function (editor, event, kinds) {
-        var selection = editor.selection;
-        if (event.key === 'Tab') {
-            event.preventDefault();
-            var isExpanded = slate.Range.isExpanded(selection);
-            var nodes = Array.from(slate.Editor.nodes(editor, {
-                mode: 'highest',
-                match: indentNodeMatch(kinds)
-            }));
-            var startBlock = nodes[0];
-            if (startBlock && (isExpanded || slate.Editor.isStart(editor, selection.anchor, [startBlock[1][0]]))) {
-                if (!editor.isVoid(startBlock[0])) {
-                    if (event.shiftKey) {
-                        return cancelTextIntent(editor, startBlock[0], kinds);
-                    }
-                    var textIndent = startBlock[0].textIndent;
-                    textIndent = textIndent ? textIndent : 0;
-                    textIndent += 2;
-                    if (textIndent < 50) {
-                        slate.Transforms.setNodes(editor, { textIndent: textIndent }, {
-                            mode: 'highest',
-                            match: indentNodeMatch(kinds)
-                        });
-                        return true;
-                    }
-                }
-            }
-            else {
-                editor.insertText(TAB_SPACE);
-                return true;
-            }
-        }
-        if (selection && slate.Range.isCollapsed(selection) && event.key === 'Backspace') {
-            var nodes = Array.from(slate.Editor.nodes(editor, {
-                mode: 'highest',
-                match: indentNodeMatch(kinds)
-            }));
-            var startBlock = nodes[0];
-            if (startBlock && slate.Editor.isStart(editor, selection.anchor, [startBlock[1][0]])) {
-                return cancelTextIntent(editor, startBlock[0], kinds);
-            }
-        }
-        return false;
-    };
-    var indentNodeMatch = function (kinds) { return function (node) { return slate.Element.isElement(node) && kinds.includes(node.type); }; };
-    function cancelTextIntent(editor, anchorBlock, kinds) {
-        var textIndent = anchorBlock.textIndent;
-        if (textIndent > 2) {
-            // prevent deleteBackward function
-            event.preventDefault();
-            textIndent -= 2;
-            slate.Transforms.setNodes(editor, { textIndent: textIndent }, {
-                mode: 'highest',
-                match: indentNodeMatch(kinds)
-            });
-            return true;
-        }
-        if (textIndent === 2) {
-            // prevent deleteBackward function
-            event.preventDefault();
-            slate.Transforms.setNodes(editor, { textIndent: null }, {
-                mode: 'highest',
-                match: function (node) { return slate.Element.isElement(node) && kinds.includes(node.type); }
-            });
-            return true;
-        }
-        return false;
-    }
-
-    var withIndent = function (kinds) { return function (editor) {
-        var onKeydown = editor.onKeydown;
-        editor.onKeydown = function (event) {
-            var isContinue = !onKeydownIndent(editor, event, kinds);
-            if (isContinue) {
-                onKeydown(event);
-            }
-        };
-        return editor;
-    }; };
-
     var isList = function (n) {
         return __spreadArray([], __read(LIST_BLOCK_TYPES)).includes(n.type);
     };
@@ -3787,58 +3724,12 @@
         }
     }
 
-    var ElementStylePipe = /** @class */ (function () {
-        function ElementStylePipe() {
-        }
-        ElementStylePipe.prototype.transform = function (element, align) {
-            var style = {};
-            if (element.align || align) {
-                style.textAlign = element.align || align || exports.Alignment.left;
-            }
-            if (element.textIndent) {
-                style.textIndent = element.textIndent + 'em';
-            }
-            return style;
-        };
-        return ElementStylePipe;
-    }());
-    ElementStylePipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementStylePipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
-    ElementStylePipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementStylePipe, name: "elementStyle" });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementStylePipe, decorators: [{
-                type: i0.Pipe,
-                args: [{
-                        name: 'elementStyle'
-                    }]
-            }] });
-    var ElementClassPipe = /** @class */ (function () {
-        function ElementClassPipe() {
-        }
-        ElementClassPipe.prototype.transform = function (element) {
-            var classStr = '';
-            var prefix = 'indent';
-            if (element.textIndent) {
-                classStr += prefix + "-" + element.textIndent;
-            }
-            return classStr;
-        };
-        return ElementClassPipe;
-    }());
-    ElementClassPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementClassPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
-    ElementClassPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementClassPipe, name: "elementClass" });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementClassPipe, decorators: [{
-                type: i0.Pipe,
-                args: [{
-                        name: 'elementClass'
-                    }]
-            }] });
-
     var TheNumberedListComponent = /** @class */ (function (_super) {
         __extends(TheNumberedListComponent, _super);
-        function TheNumberedListComponent(elementRef, cdr, elementClassPipe) {
+        function TheNumberedListComponent(elementRef, cdr) {
             var _this = _super.call(this, elementRef, cdr) || this;
             _this.elementRef = elementRef;
             _this.cdr = cdr;
-            _this.elementClassPipe = elementClassPipe;
             return _this;
         }
         Object.defineProperty(TheNumberedListComponent.prototype, "start", {
@@ -3848,9 +3739,10 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(TheNumberedListComponent.prototype, "class", {
+        Object.defineProperty(TheNumberedListComponent.prototype, "level", {
             get: function () {
-                return this.elementClassPipe.transform(this.element);
+                var _a;
+                return (_a = this.element) === null || _a === void 0 ? void 0 : _a.indent;
             },
             enumerable: false,
             configurable: true
@@ -3863,35 +3755,34 @@
         };
         return TheNumberedListComponent;
     }(TheBaseElementComponent));
-    TheNumberedListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheNumberedListComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: ElementClassPipe }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheNumberedListComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>", isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
+    TheNumberedListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheNumberedListComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheNumberedListComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>", isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheNumberedListComponent, decorators: [{
                 type: i0.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__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: ElementClassPipe }]; }, propDecorators: { start: [{
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { start: [{
                     type: i0.HostBinding,
                     args: ['attr.start']
-                }], class: [{
+                }], level: [{
                     type: i0.HostBinding,
-                    args: ['class']
+                    args: ['attr.the-level']
                 }] } });
 
     var TheBulletedListComponent = /** @class */ (function (_super) {
         __extends(TheBulletedListComponent, _super);
-        function TheBulletedListComponent(elementRef, cdr, elementClassPipe) {
+        function TheBulletedListComponent(elementRef, cdr) {
             var _this = _super.call(this, elementRef, cdr) || this;
             _this.elementRef = elementRef;
             _this.cdr = cdr;
-            _this.elementClassPipe = elementClassPipe;
             return _this;
         }
-        Object.defineProperty(TheBulletedListComponent.prototype, "class", {
+        Object.defineProperty(TheBulletedListComponent.prototype, "level", {
             get: function () {
-                return this.elementClassPipe.transform(this.element);
+                var _a;
+                return (_a = this.element) === null || _a === void 0 ? void 0 : _a.indent;
             },
             enumerable: false,
             configurable: true
@@ -3904,18 +3795,17 @@
         };
         return TheBulletedListComponent;
     }(TheBaseElementComponent));
-    TheBulletedListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheBulletedListComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }, { token: ElementClassPipe }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheBulletedListComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>", isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
+    TheBulletedListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheBulletedListComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheBulletedListComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>", isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheBulletedListComponent, decorators: [{
                 type: i0.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__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }, { type: ElementClassPipe }]; }, propDecorators: { class: [{
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { level: [{
                     type: i0.HostBinding,
-                    args: ['class']
+                    args: ['attr.the-level']
                 }] } });
 
     var TheListItemComponent = /** @class */ (function (_super) {
@@ -4248,52 +4138,6 @@
         };
     };
 
-    /** Converts CSS pixel values to numbers, eg "123px" to 123. Returns NaN for non pixel values. */
-    function coercePixelsFromCssValue(cssValue) {
-        var 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(function (total, col) {
-            return total + getElementWidth(col);
-        }, 0);
-    }
-    function getRowsTotalHeight(rows) {
-        return rows.reduce(function (total, row) {
-            return total + getElementHeight(row);
-        }, 0);
-    }
-    function useElementStyle(el, element) {
-        if (element.align) {
-            el.style.textAlign = element.align || exports.Alignment.left;
-        }
-        if (element.textIndent) {
-            el.style.textIndent = element.textIndent + 'em';
-        }
-        if (element.verticalAlign) {
-            el.style.verticalAlign = element.verticalAlign;
-        }
-    }
-    function getElementClassByPrefix(el, prefix) {
-        var matchClass = null;
-        el.classList.forEach(function (value, key) {
-            if (value.includes(prefix)) {
-                matchClass = value;
-            }
-        });
-        return matchClass;
-    }
-
     var TheTodoItemComponent = /** @class */ (function (_super) {
         __extends(TheTodoItemComponent, _super);
         function TheTodoItemComponent(elementRef, cdr) {
@@ -4303,15 +4147,16 @@
             _this.checkItemClass = true;
             return _this;
         }
-        TheTodoItemComponent.prototype.onContextChange = function () {
-            _super.prototype.onContextChange.call(this);
-            if (this.initialized) {
-                this.useIndentClass(this.elementRef.nativeElement, this.element);
-            }
-        };
+        Object.defineProperty(TheTodoItemComponent.prototype, "level", {
+            get: function () {
+                var _a;
+                return (_a = this.element) === null || _a === void 0 ? void 0 : _a.indent;
+            },
+            enumerable: false,
+            configurable: true
+        });
         TheTodoItemComponent.prototype.ngOnInit = function () {
             _super.prototype.ngOnInit.call(this);
-            this.useIndentClass(this.elementRef.nativeElement, this.element);
         };
         TheTodoItemComponent.prototype.onCheck = function (checked) {
             if (this.readonly) {
@@ -4319,27 +4164,10 @@
             }
             setNode(this.editor, { checked: checked }, this.element);
         };
-        TheTodoItemComponent.prototype.useIndentClass = function (el, element) {
-            var prefix = 'indent';
-            if (element.textIndent) {
-                var oldClass = getElementClassByPrefix(el, prefix);
-                if (oldClass) {
-                    el.classList.remove(oldClass);
-                }
-                var newClassName = prefix + "-" + element.textIndent;
-                el.classList.add(newClassName);
-            }
-            else {
-                var oldClass = getElementClassByPrefix(el, prefix);
-                if (oldClass) {
-                    el.classList.remove(oldClass);
-                }
-            }
-        };
         return TheTodoItemComponent;
     }(TheBaseElementComponent));
     TheTodoItemComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTodoItemComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TheTodoItemComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "\n        <span contenteditable=\"false\" class=\"todo-item-status\">\n            <input #checkbox type=\"checkbox\" [checked]=\"element.checked\" (click)=\"onCheck(checkbox.checked)\" />\n        </span>\n        <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n    ", isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
+    TheTodoItemComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "\n        <span contenteditable=\"false\" class=\"todo-item-status\">\n            <input #checkbox type=\"checkbox\" [checked]=\"element.checked\" (click)=\"onCheck(checkbox.checked)\" />\n        </span>\n        <slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n    ", isInline: true, components: [{ type: i1__namespace.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheTodoItemComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -4349,6 +4177,9 @@
             }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { checkItemClass: [{
                     type: i0.HostBinding,
                     args: ['class.the-check-item']
+                }], level: [{
+                    type: i0.HostBinding,
+                    args: ['attr.the-level']
                 }] } });
 
     var withTodoItem = function (editor) {
@@ -4987,7 +4818,7 @@
                     return;
                 }
                 // → + right-block-card
-                if ((isMoveForward && !isCardLeftCursor)) {
+                if (isMoveForward && !isCardLeftCursor) {
                     nativeEvent.preventDefault();
                     var _c = __read(i1.AngularEditor.toSlateCardEntry(editor, anchorNode), 2), path = _c[1];
                     var nextPath = slate.Path.next(path);
@@ -8706,6 +8537,52 @@
                 type: i0.Injectable
             }], ctorParameters: function () { return []; } });
 
+    /** Converts CSS pixel values to numbers, eg "123px" to 123. Returns NaN for non pixel values. */
+    function coercePixelsFromCssValue(cssValue) {
+        var 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(function (total, col) {
+            return total + getElementWidth(col);
+        }, 0);
+    }
+    function getRowsTotalHeight(rows) {
+        return rows.reduce(function (total, row) {
+            return total + getElementHeight(row);
+        }, 0);
+    }
+    function useElementStyle(el, element) {
+        if (element.align) {
+            el.style.textAlign = element.align || exports.Alignment.left;
+        }
+        if (element.textIndent) {
+            el.style.textIndent = element.textIndent + 'em';
+        }
+        if (element.verticalAlign) {
+            el.style.verticalAlign = element.verticalAlign;
+        }
+    }
+    function getElementClassByPrefix(el, prefix) {
+        var matchClass = null;
+        el.classList.forEach(function (value, key) {
+            if (value.includes(prefix)) {
+                matchClass = value;
+            }
+        });
+        return matchClass;
+    }
+
     function splitCell(editor) {
         var opts = new TableOptions$1();
         var anchor = editor.selection.anchor;
@@ -12149,7 +12026,7 @@
             var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             // 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);
             return _this;
         }
         return TheInlineCodeComponent;
@@ -12205,6 +12082,300 @@
         return editor;
     };
 
+    var TheIndentToolbarComponent = /** @class */ (function (_super) {
+        __extends(TheIndentToolbarComponent, _super);
+        function TheIndentToolbarComponent(elementRef, thyPopover, viewContainerRef, overlay) {
+            var _this = _super.call(this) || this;
+            _this.elementRef = elementRef;
+            _this.thyPopover = thyPopover;
+            _this.viewContainerRef = viewContainerRef;
+            _this.overlay = overlay;
+            _this.mode = exports.DropdownMode.text;
+            _this.dropdownMode = exports.DropdownMode;
+            _this.disabled = false;
+            return _this;
+        }
+        Object.defineProperty(TheIndentToolbarComponent.prototype, "isOpen", {
+            get: function () {
+                return this.dropdownPopoverRef && this.dropdownPopoverRef.getOverlayRef() && this.dropdownPopoverRef.getOverlayRef().hasAttached();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TheIndentToolbarComponent.prototype.toggleDropdown = function (event) {
+            var _a;
+            _super.prototype.execute.call(this, event);
+            if (((_a = this.editor) === null || _a === void 0 ? void 0 : _a.disabled) || this.disabled) {
+                return;
+            }
+            this.openDropdownPopover();
+        };
+        TheIndentToolbarComponent.prototype.handleDocumentMouseDown = function (event) {
+            if (!this.elementRef.nativeElement.contains(event.target)) {
+                this.closeDropdownPopover();
+            }
+        };
+        Object.defineProperty(TheIndentToolbarComponent.prototype, "disabledState", {
+            get: function () {
+                return this.disabled;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        TheIndentToolbarComponent.prototype.ngOnInit = function () {
+            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));
+            }
+        };
+        TheIndentToolbarComponent.prototype.statusChange = function (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;
+        };
+        TheIndentToolbarComponent.prototype.itemMousedown = function (event, item) {
+            _super.prototype.execute.call(this, event);
+            this.closeDropdownPopover();
+            if (item === null || item === void 0 ? void 0 : item.execute) {
+                item === null || item === void 0 ? void 0 : item.execute(this.editor);
+            }
+        };
+        TheIndentToolbarComponent.prototype.openDropdownPopover = function () {
+            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()
+            });
+        };
+        TheIndentToolbarComponent.prototype.closeDropdownPopover = function () {
+            var _a;
+            if (this.dropdownPopoverRef) {
+                (_a = this.dropdownPopoverRef) === null || _a === void 0 ? void 0 : _a.close();
+            }
+        };
+        return TheIndentToolbarComponent;
+    }(TheToolbarBaseItemComponent));
+    TheIndentToolbarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheIndentToolbarComponent, deps: [{ token: i0__namespace.ElementRef }, { token: i1__namespace$3.ThyPopover }, { token: i0__namespace.ViewContainerRef }, { token: i2__namespace.Overlay }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TheIndentToolbarComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.ThyIconNavLinkComponent, selector: "[thyIconNavLink]", inputs: ["thyIconNavLinkIcon", "thyIconNavLinkActive"] }, { type: i4__namespace$1.ThyIconComponent, selector: "thy-icon", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { type: i5__namespace$2.ThyActionMenuComponent, selector: "thy-action-menu", inputs: ["thyTheme", "thyWidth"] }], directives: [{ type: i5__namespace$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { type: i6__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace$2.ThyActionMenuItemDirective, selector: "[thyActionMenuItem]", inputs: ["thyDisabled", "thyType"] }, { type: i5__namespace$2.ThyActionMenuItemIconDirective, selector: "[thyActionMenuItemIcon]" }, { type: i5__namespace$2.ThyActionMenuItemNameDirective, selector: "[thyActionMenuItemName]" }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: TheIndentToolbarComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'the-indent-toolbar-item',
+                        templateUrl: './toolbar-item.component.html',
+                        host: {
+                            class: 'the-toolbar-dropdown-container'
+                        }
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i1__namespace$3.ThyPopover }, { type: i0__namespace.ViewContainerRef }, { type: i2__namespace.Overlay }]; }, propDecorators: { toolbarItem: [{
+                    type: i0.Input
+                }], menus: [{
+                    type: i0.Input
+                }], mode: [{
+                    type: i0.Input
+                }], item: [{
+                    type: i0.Input
+                }], dropdownTemplate: [{
+                    type: i0.ViewChild,
+                    args: ['dropdownTemplate', { static: true }]
+                }], toggleDropdown: [{
+                    type: i0.HostListener,
+                    args: ['mousedown', ['$event']]
+                }], handleDocumentMouseDown: [{
+                    type: i0.HostListener,
+                    args: ['document: mousedown', ['$event']]
+                }], disabledState: [{
+                    type: i0.HostBinding,
+                    args: ['class.disabled']
+                }] } });
+
+    var MaxIndent = 13;
+    var includesIndentTypes = __spreadArray([
+        exports.ElementKinds.checkItem,
+        exports.ElementKinds.numberedList,
+        exports.ElementKinds.bulletedList,
+        exports.ElementKinds.paragraph
+    ], __read(HEADING_TYPES));
+    var IndentEditor = {
+        setIndent: function (editor) {
+            var nodes = Array.from(slate.Editor.nodes(editor, {
+                mode: 'highest',
+                match: function (n) { return slate.Element.isElement(n) && includesIndentTypes.includes(n.type); }
+            }));
+            var _a = __read(nodes, 1), startBlock = _a[0];
+            if (startBlock) {
+                var _b = __read(startBlock, 1), indent = _b[0].indent;
+                indent = indent ? indent : 0;
+                indent += 1;
+                if (indent <= MaxIndent) {
+                    slate.Transforms.setNodes(editor, { indent: indent }, {
+                        mode: 'highest',
+                        match: function (n) { return slate.Element.isElement(n) && includesIndentTypes.includes(n.type); }
+                    });
+                }
+            }
+        },
+        cancelIndent: function (editor) {
+            var nodes = Array.from(slate.Editor.nodes(editor, {
+                mode: 'highest',
+                match: function (n) { return slate.Element.isElement(n) && includesIndentTypes.includes(n.type); }
+            }));
+            var _a = __read(nodes, 1), startBlock = _a[0];
+            if (startBlock) {
+                var _b = __read(startBlock, 1), indent = _b[0].indent;
+                indent = indent === 1 ? null : (indent -= 1);
+                slate.Transforms.setNodes(editor, { indent: indent }, {
+                    mode: 'highest',
+                    match: function (n) { return slate.Element.isElement(n) && includesIndentTypes.includes(n.type); }
+                });
+            }
+        },
+        setTextIndent: function (editor, kinds, textIndent) {
+            slate.Transforms.setNodes(editor, { textIndent: textIndent }, {
+                mode: 'highest',
+                match: function (node) { return slate.Element.isElement(node) && kinds.includes(node.type); }
+            });
+        },
+        cancelTextIntent: function (editor, event, anchorBlock, kinds) {
+            var textIndent = anchorBlock.textIndent, indent = anchorBlock.indent;
+            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: function (editor) {
+            if (editor.selection) {
+                var disableGroup = HEADING_TYPES;
+                var anchorBlock$1 = anchorBlock(editor);
+                return anchorBlock$1 && disableGroup.includes(anchorBlock$1 === null || anchorBlock$1 === void 0 ? void 0 : anchorBlock$1.type);
+            }
+            return false;
+        }
+    };
+
+    var IndentOptions = [
+        {
+            key: exports.ElementKinds.indent,
+            includes: [exports.Indents.indentRight, exports.Indents.indentLeft],
+            iconComponent: TheIndentToolbarComponent,
+            disable: function (editor) { return IndentEditor.isDisabled(editor); }
+        },
+        {
+            key: exports.Indents.indentRight,
+            name: '增加缩进',
+            icon: 'indent',
+            execute: function (editor) { return IndentEditor.setIndent(editor); }
+        },
+        {
+            key: exports.Indents.indentLeft,
+            name: '减少缩进',
+            icon: 'outdent',
+            type: exports.ToolbarItemType.toolDropdown,
+            execute: function (editor) { return IndentEditor.cancelIndent(editor); }
+        }
+    ];
+
+    var onKeydownTextIndent = function (editor, event, kinds) {
+        var selection = editor.selection;
+        var isExpanded = slate.Range.isExpanded(selection);
+        var nodes = Array.from(slate.Editor.nodes(editor, {
+            mode: 'highest',
+            match: function (node) { return slate.Element.isElement(node) && kinds.includes(node.type); }
+        }));
+        var _a = __read(nodes, 1), startBlock = _a[0];
+        if (!startBlock) {
+            return false;
+        }
+        var _b = __read(startBlock, 2), block = _b[0], path = _b[1];
+        var currentPath = [path[0]];
+        var isStart = slate.Editor.isStart(editor, selection.anchor, currentPath);
+        var textIndentDisable = [exports.ElementKinds.bulletedList, exports.ElementKinds.numberedList, exports.ElementKinds.checkItem];
+        if (isHotkey__default["default"]('Tab', event)) {
+            event.preventDefault();
+            if (startBlock && (isExpanded || isStart)) {
+                if (!editor.isVoid(block)) {
+                    var textIndent = block.textIndent, type = block.type;
+                    // 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__default["default"]('shift+Tab', event)) {
+            if (startBlock && (isExpanded || isStart)) {
+                if (!editor.isVoid(block)) {
+                    return IndentEditor.cancelTextIntent(editor, event, block, kinds);
+                }
+            }
+        }
+        if (selection && slate.Range.isCollapsed(selection) && i1.hotkeys.isDeleteBackward(event)) {
+            if (startBlock && isStart) {
+                return IndentEditor.cancelTextIntent(editor, event, block, kinds);
+            }
+        }
+        return false;
+    };
+
+    var withIndent = function (kinds) { return function (editor) {
+        var onKeydown = editor.onKeydown;
+        editor.onKeydown = function (event) {
+            var HOTKEYS = {
+                'mod+]': exports.Indents.indentRight,
+                'mod+[': exports.Indents.indentLeft
+            };
+            for (var hotkey in HOTKEYS) {
+                if (isHotkey__default["default"](hotkey, event)) {
+                    event.preventDefault();
+                    var mark = HOTKEYS[hotkey];
+                    switch (mark) {
+                        case exports.Indents.indentRight:
+                            IndentEditor.setIndent(editor);
+                            break;
+                        case exports.Indents.indentLeft:
+                            IndentEditor.cancelIndent(editor);
+                            break;
+                    }
+                }
+            }
+            var isContinue = !onKeydownTextIndent(editor, event, kinds);
+            if (isContinue) {
+                onKeydown(event);
+            }
+        };
+        return editor;
+    }; };
+
     var internalPlugins = [
         withTheHistory,
         withAutoInsertData(),
@@ -12247,7 +12418,7 @@
         withQuickInsert,
         withInlineCode
     ];
-    var internalToolbarItems = __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(AlignOptions)), __read(MarkOptions)), __read(ColorOptions)), __read(HeadingOptions)), __read(FontSizeOptions)), __read(TodoItemOptions)), __read(ListOptions)), __read(ImageOptions)), __read(HrOptions)), __read(BlockquoteOptions)), __read(CodeOptions)), __read(LinkOptions)), __read(TableOptions)), __read(VerticalAlignOptions)), __read(PaintFormatOptions)), __read(InlineCodeOptions));
+    var internalToolbarItems = __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], __read(AlignOptions)), __read(MarkOptions)), __read(ColorOptions)), __read(HeadingOptions)), __read(FontSizeOptions)), __read(TodoItemOptions)), __read(ListOptions)), __read(ImageOptions)), __read(HrOptions)), __read(BlockquoteOptions)), __read(CodeOptions)), __read(LinkOptions)), __read(TableOptions)), __read(VerticalAlignOptions)), __read(PaintFormatOptions)), __read(InlineCodeOptions)), __read(IndentOptions));
     var toolbarCompose = function (toolbarItems) {
         if (toolbarItems === void 0) { toolbarItems = []; }
         return __spreadArray(__spreadArray([], __read(internalToolbarItems)), __read(toolbarItems));
@@ -12894,6 +13065,51 @@
                     args: ['mousedown', ['$event']]
                 }] } });
 
+    var ElementStylePipe = /** @class */ (function () {
+        function ElementStylePipe() {
+        }
+        ElementStylePipe.prototype.transform = function (element, align) {
+            var style = {};
+            if (element.align || align) {
+                style.textAlign = element.align || align || exports.Alignment.left;
+            }
+            if (element.textIndent) {
+                style.textIndent = element.textIndent + 'em';
+            }
+            return style;
+        };
+        return ElementStylePipe;
+    }());
+    ElementStylePipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementStylePipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    ElementStylePipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementStylePipe, name: "elementStyle" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementStylePipe, decorators: [{
+                type: i0.Pipe,
+                args: [{
+                        name: 'elementStyle'
+                    }]
+            }] });
+    var ElementClassPipe = /** @class */ (function () {
+        function ElementClassPipe() {
+        }
+        ElementClassPipe.prototype.transform = function (element) {
+            var classStr = '';
+            var prefix = 'indent';
+            if (element.textIndent) {
+                classStr += prefix + "-" + element.textIndent;
+            }
+            return classStr;
+        };
+        return ElementClassPipe;
+    }());
+    ElementClassPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementClassPipe, deps: [], target: i0__namespace.ɵɵFactoryTarget.Pipe });
+    ElementClassPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementClassPipe, name: "elementClass" });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.15", ngImport: i0__namespace, type: ElementClassPipe, decorators: [{
+                type: i0.Pipe,
+                args: [{
+                        name: 'elementClass'
+                    }]
+            }] });
+
     var TheTemplateComponent = /** @class */ (function () {
         function TheTemplateComponent() {
             var _this = this;
@@ -13568,7 +13784,8 @@
         TheTableSelectComponent,
         TheTableToolbarItemComponent,
         TheConversionHintComponent,
-        TheVerticalToolbarItemComponent
+        TheVerticalToolbarItemComponent,
+        TheIndentToolbarComponent
     ];
     var PLUGIN_COMPONENTS = [
         TheImageComponent,
@@ -13614,7 +13831,8 @@
             TheTableSelectComponent,
             TheTableToolbarItemComponent,
             TheConversionHintComponent,
-            TheVerticalToolbarItemComponent, TheImageComponent,
+            TheVerticalToolbarItemComponent,
+            TheIndentToolbarComponent, TheImageComponent,
             TheTemplateComponent,
             TheHrComponent,
             TheBlockquoteComponent,