@worktile/theia 17.2.2 → 17.3.0

package/fesm2022/worktile-theia.mjs

@@ -2,13 +2,13 @@ import { NgIf, NgFor, NgStyle, NgTemplateOutlet, NgClass, DOCUMENT } from '@angu
 import * as i0 from '@angular/core';
 import { InjectionToken, Component, Directive, Input, HostBinding, ViewChild, HostListener, ViewContainerRef, Inject, TemplateRef, ChangeDetectionStrategy, Optional, SkipSelf, ContentChildren, forwardRef, EventEmitter, Output, Pipe, Injectable, ElementRef, ChangeDetectorRef, ViewChildren, NgModule } from '@angular/core';
 import { ThyDivider } from 'ngx-tethys/divider';
-import { Editor, Element, Span, Range, Path, Node, Point, Text, Transforms, Operation, createEditor } from 'slate';
 import { ThyAction, ThyActions } from 'ngx-tethys/action';
 import { ThyDropdownMenuItemDirective, ThyDropdownMenuDivider, ThyDropdownMenuItemNameDirective, ThyDropdownMenuItemIconDirective, ThyDropdownMenuItemActiveDirective, ThyDropdownDirective, ThyDropdownMenuComponent, ThyDropdownMenuGroup, ThyDropdownMenuItemExtendIconDirective } from 'ngx-tethys/dropdown';
 import * as i2$2 from 'ngx-tethys/icon';
 import { ThyIcon, ThyIconRegistry } from 'ngx-tethys/icon';
 import { cloneDeep, map, assign, defaults, groupBy, uniq, isEqual } from 'lodash';
 export { assign, cloneDeep, debounce, defaults, groupBy, isEqual, map, uniq } from 'lodash';
+import { Editor, Element, Span, Range, Path, Node, Point, Text, Transforms, Operation, createEditor } from 'slate';
 import * as i4 from 'slate-angular';
 import { NODE_TO_PARENT, NODE_TO_INDEX, AngularEditor, hotkeys, IS_SAFARI, BaseElementComponent, ELEMENT_TO_COMPONENT, BaseTextComponent, SlateLeaves, SlateModule, hasBlockCard, isCardLeft, FAKE_RIGHT_BLOCK_CARD_OFFSET, SlateChildrenOutlet, SlateChildren, getPlainText as getPlainText$1, EDITOR_TO_ELEMENT, defaultScrollSelectionIntoView, withAngular } from 'slate-angular';
 import { HistoryEditor, withHistory } from 'slate-history';
@@ -25,7 +25,8 @@ import { debounceTime, takeUntil, startWith, distinctUntilChanged, skip, map as
 import * as i2$1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { ScrollToService } from 'ngx-tethys/core';
-import { ThyEmpty } from 'ngx-tethys/empty';
+import * as i3 from 'ngx-tethys/empty';
+import { ThyEmptyModule } from 'ngx-tethys/empty';
 import { ThyInputSearch, ThyInputDirective } from 'ngx-tethys/input';
 import { isKeyHotkey } from 'is-hotkey';
 import isUrl from 'is-url';
@@ -34,8 +35,8 @@ import { marked } from 'marked';
 import { ThyColorPickerDirective } from 'ngx-tethys/color-picker';
 import { ThyInputNumber } from 'ngx-tethys/input-number';
 import { ThyEnterDirective, ThyStopPropagationDirective, ThyAutofocusDirective } from 'ngx-tethys/shared';
-import { coerceCssPixelValue } from '@angular/cdk/coercion';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { coerceCssPixelValue } from '@angular/cdk/coercion';
 import * as i1$2 from 'ngx-tethys/image';
 import { ThyImageService, ThyImageDirective, ThyImageGroup } from 'ngx-tethys/image';
 import * as i6 from 'ng-codemirror';
@@ -51,7 +52,7 @@ import { PortalInjector, ComponentPortal } from '@angular/cdk/portal';
 import * as i1$3 from '@angular/platform-browser';
 import * as i2$3 from '@angular/common/http';
 
-const PICTURE_ACCEPTED_UPLOAD_MIME = ['image/png', 'image/jpeg', 'image/gif', 'image/bmp'];
+const PICTURE_ACCEPTED_UPLOAD_MIME = ['image/png', 'image/jpeg', 'image/gif', 'image/bmp', 'image/svg+xml'];
 const PICTURE_ACCEPTED_UPLOAD_SIZE = 50;
 const A_TAG_REL_ATTR = 'noopener noreferrer nofollow external ugc';
 const LINK_DEFAULT_TEXT = '链接';
@@ -183,7 +184,6 @@ const MarkProps = [
     MarkTypes.underline,
     MarkTypes.fontSize
 ];
-const THE_INLINE_TOOLBAR_TYPES = [ElementKinds.default, ElementKinds.listItem, ElementKinds.checkItem];
 const STANDARD_HEADING_TYPES = [
     ElementKinds.heading_1,
     ElementKinds.heading_2,
@@ -674,17 +674,25 @@ const createPluginFactory = (defaultPlugin) => (override, overrideByKey = {}) =>
     return cloneDeep(defaultPlugin);
 };
 
-const getBlockCardCenterCursor = (editor) => {
+const getBlockCardCenterCursor = (editor, at) => {
+    if (at) {
+        const point = Editor.point(editor, at);
+        return Editor.start(editor, point.path);
+    }
     return Editor.start(editor, editor.selection.anchor.path);
 };
 
-const isBlockCardCursor = (editor) => {
+const isBlockCardCursor = (editor, at) => {
+    if (at) {
+        const point = at && Editor.point(editor, at);
+        return point.offset < 0;
+    }
     return editor.selection.anchor.offset < 0;
 };
 
 const anchorBlockEntry = (editor, at) => {
-    if (!at && isBlockCardCursor(editor)) {
-        at = getBlockCardCenterCursor(editor);
+    if (isBlockCardCursor(editor, at)) {
+        at = getBlockCardCenterCursor(editor, at);
     }
     return Editor.above(editor, {
         match: n => Element.isElement(n) && Editor.isBlock(editor, n),
@@ -692,8 +700,8 @@ const anchorBlockEntry = (editor, at) => {
     });
 };
 
-const anchorBlock = (editor) => {
-    const entry = anchorBlockEntry(editor, editor.selection.anchor);
+const anchorBlock = (editor, at) => {
+    const entry = anchorBlockEntry(editor, at);
     return entry ? entry[0] : null;
 };
 
@@ -1841,7 +1849,7 @@ const ThePluginMenu = {
         }
     },
     isMenuItem(value) {
-        if (value.key) {
+        if (value?.key) {
             return true;
         }
         else {
@@ -2250,6 +2258,11 @@ const scrollIntoView = (editor, scrollContainer) => {
     }
     previousHeight = currentHeight;
 };
+const getEditorScrollContainer = (editor, scrollContainerSelector) => {
+    const selector = scrollContainerSelector || editor.options.scrollContainer || DEFAULT_SCROLL_CONTAINER;
+    const editable = AngularEditor.toDOMNode(editor, editor);
+    return editable.closest(selector);
+};
 
 const topLeftPosition = {
     originX: 'start',
@@ -2616,6 +2629,37 @@ const buildPluginMenuItemMap = (editor) => {
     });
     return map;
 };
+/**
+ * 构建当前位置允许插入的元素菜单
+ * @param editor 编辑器对象
+ * @param menus 插入菜单
+ * @returns 返回允许插入的元素菜单
+ */
+const buildQuickInsertMenus = (editor, menus) => {
+    const [_, path] = getBlockAbove(editor);
+    const [parentNode] = getParent(editor, path);
+    const isContainerNode = isContainer(editor, parentNode);
+    const menuItemsMap = buildPluginMenuItemMap(editor);
+    const pluginMenu = buildPluginMenu(menuItemsMap, menus);
+    const quickMenuConfig = [];
+    pluginMenu.forEach((item) => {
+        const allowParentTypes = getPluginOptions(editor, item.key)?.allowParentTypes || [];
+        const isInlineElement = getPluginOptions(editor, item.key)?.isInline || false;
+        const isAllowParent = isContainerNode ? allowParentTypes.includes(parentNode?.type) : true;
+        if (!item?.type) {
+            quickMenuConfig.push(item);
+        }
+        else if (isInlineElement || isAllowParent) {
+            const menu = menus.find(menu => menu === item.key);
+            quickMenuConfig.push(menu);
+        }
+    });
+    const lastMenu = quickMenuConfig[quickMenuConfig.length - 1];
+    if (ThePluginMenu.isMenuGroup(lastMenu)) {
+        quickMenuConfig.pop();
+    }
+    return quickMenuConfig;
+};
 
 const withTheia = (editor, plugins = []) => {
     let e = editor;
@@ -2887,10 +2931,6 @@ class TheToolbarComponent {
         });
         this.resizeObserver.observe(editableElement);
     }
-    isTableActive() {
-        const [table] = Editor.nodes(this.editor, { match: n => Element.isElement(n) && n.type === ElementKinds.table });
-        return !!table;
-    }
     selectionChange(editor) {
         if (this.isMore) {
             this.renderToolbarView();
@@ -4589,7 +4629,7 @@ const getColumnsWidth = (cellRow) => {
  */
 const calcPrintColumnWidth = (element) => {
     const opts = new TableOptions();
-    const columns = element?.columns;
+    const columns = element?.columns ?? [];
     const numberedColumnWidth = element?.options?.numberedColumn ? TABLE_NUMBER_COLUMN : 0;
     // 按照 DPI 96 的 A4 纸宽度是 794, 打印时左右 80px 的边距，所以这里取 794 - 80 * 2 = 634
     // 如果存在序号列，还需要在 634 基础上减去序号列的宽度，剩下的才是内容区域的宽度
@@ -5349,7 +5389,7 @@ const TableEditor = {
     },
     clearCellsContent(editor, cells) {
         if (!cells) {
-            cells = editor.selections ? TableEditor.getSelectedCells(editor) || [] : [];
+            cells = editor.selection ? TableEditor.getSelectedCells(editor) || [] : [];
         }
         if (cells.length > 0) {
             const tablePosition = createTablePosition(editor);
@@ -5888,13 +5928,12 @@ const ImageEditor = {
     insertImages(editor, imageFiles) {
         const contextService = editor.injector.get(TheContextService);
         const imageNodes = [];
-        const text = { text: '' };
         for (const image of imageFiles) {
             const verify = ImageEditor.verifyImage(editor, image);
             if (verify) {
                 const url = URL.createObjectURL(image);
                 contextService.addUploadingFiles({ url, file: image });
-                imageNodes.push({ type: ElementKinds.image, url, children: [text] });
+                imageNodes.push({ type: ElementKinds.image, url, children: [{ text: '' }] });
             }
         }
         if (imageNodes.length > 0) {
@@ -6576,10 +6615,11 @@ const QuickInsertEditor = {
         const overlay = editor.injector.get(Overlay);
         const viewContainerRef = editor.injector.get(ViewContainerRef);
         const thyPopover = editor.injector.get(ThyPopover);
+        const pluginMenus = buildQuickInsertMenus(editor, editor?.options?.menu);
         const pluginMenuRef = thyPopover.open(ThePluginMenuComponent, {
             initialState: {
                 editor,
-                thePluginMenu: editor?.options?.menu
+                thePluginMenu: pluginMenus
             },
             origin,
             viewContainerRef: viewContainerRef,
@@ -6669,7 +6709,6 @@ class TheVerticalToolbarItem extends TheBaseToolbarDropdown {
         this.thyPopover = thyPopover;
         this.viewContainerRef = viewContainerRef;
     }
-    ngOnInit() { }
     menusActive(editor) {
         return this.menus.find(i => {
             if (this.editor?.selection && i?.active) {
@@ -6710,13 +6749,12 @@ class TheVerticalToolbarItem extends TheBaseToolbarDropdown {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheVerticalToolbarItem, deps: [{ token: i0.ElementRef }, { token: i1.ThyPopover }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TheVerticalToolbarItem, isStandalone: true, selector: "the-toolbar-vertical-align-item", 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  href=\"javascript:;\"\n  class=\"icon-mode link-with-down\"\n  thyAction\n  [thyActionIcon]=\"activeMenuItem?.icon\"\n  [thyActionActive]=\"isOpened\"\n  [thyTooltip]=\"toolbarItem?.name\"\n  thyTooltipPlacement=\"top\"\n  (mousedown)=\"execute($event)\"\n>\n  <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #VerticalAlignItems>\n  <div class=\"thy-dropdown-menu\">\n    <ng-container *ngFor=\"let menu of toolbarItem?.includes\">\n      <a\n        href=\"javascript:;\"\n        thyDropdownMenuItem\n        [thyDropdownMenuItemActive]=\"menu.key === activeMenuItem?.key\"\n        (mousedown)=\"itemMousedown($event, menu)\"\n      >\n        <thy-icon *ngIf=\"menu.icon\" thyDropdownMenuItemIcon [thyIconName]=\"menu?.icon\"></thy-icon>\n        <span thyDropdownMenuItemName>{{ menu.name }}</span>\n      </a>\n    </ng-container>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: ThyDropdownMenuItemActiveDirective, selector: "[thyDropdownMenuItemActive]", inputs: ["thyDropdownMenuItemActive"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TheVerticalToolbarItem, isStandalone: true, selector: "the-toolbar-vertical-align-item", host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, 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  href=\"javascript:;\"\n  class=\"icon-mode link-with-down\"\n  thyAction\n  [thyActionIcon]=\"activeMenuItem?.icon\"\n  [thyActionActive]=\"isOpened\"\n  [thyTooltip]=\"toolbarItem?.name\"\n  thyTooltipPlacement=\"top\"\n  (mousedown)=\"execute($event)\"\n>\n  <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #VerticalAlignItems>\n  <div class=\"thy-dropdown-menu\">\n    <ng-container *ngFor=\"let menu of toolbarItem?.includes\">\n      <a\n        href=\"javascript:;\"\n        thyDropdownMenuItem\n        [thyDropdownMenuItemActive]=\"menu.key === activeMenuItem?.key\"\n        (mousedown)=\"itemMousedown($event, menu)\"\n      >\n        <thy-icon *ngIf=\"menu.icon\" thyDropdownMenuItemIcon [thyIconName]=\"menu?.icon\"></thy-icon>\n        <span thyDropdownMenuItemName>{{ menu.name }}</span>\n      </a>\n    </ng-container>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: ThyDropdownMenuItemActiveDirective, selector: "[thyDropdownMenuItemActive]", inputs: ["thyDropdownMenuItemActive"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheVerticalToolbarItem, decorators: [{
             type: Component,
             args: [{ selector: 'the-toolbar-vertical-align-item', host: {
-                        class: 'the-toolbar-dropdown-container verticalAlign',
-                        '[class.hide]': '!active'
+                        class: 'the-toolbar-dropdown-container verticalAlign'
                     }, standalone: true, imports: [
                         NgFor,
                         NgIf,
@@ -7028,7 +7066,7 @@ class ThePluginMenuComponent {
         return item?.key ?? index;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ThePluginMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: ThePluginMenuComponent, isStandalone: true, selector: "the-plugin-menu", inputs: { editor: "editor", theDisplaySearch: "theDisplaySearch", thePluginMenu: "thePluginMenu", sceneKey: "sceneKey", subPanelClass: "subPanelClass", autoActiveFirstItem: "autoActiveFirstItem" }, host: { properties: { "class": "this.containerClassName" } }, viewQueries: [{ propertyName: "dropdownTriggers", predicate: ["dropdownTriggers"], descendants: true, read: ThyDropdownDirective }], ngImport: i0, template: "<div *ngIf=\"theDisplaySearch\" class=\"menu-search px-5 pt-5 pb-2\">\n  <thy-input-search [(ngModel)]=\"keyWords\" placeholder=\"\u641C\u7D22\" thyIconPosition=\"after\" (ngModelChange)=\"updateKeywords(keyWords)\">\n  </thy-input-search>\n</div>\n\n<div\n  *ngIf=\"groupMenu.length > 0; else thyEmpty\"\n  theListBox\n  [keyboardContainer]=\"keyboardContainer\"\n  [autoActiveFirstItem]=\"listBoxAutoActiveFirstItem\"\n  (theListboxChange)=\"theListboxChange($event)\"\n  class=\"thy-dropdown-menu the-plugin-menu-scroll-container pb-2 pt-0\"\n>\n  <div *ngIf=\"iconMenu?.length > 0\" theListboxGroup [horizontalColumn]=\"6\" class=\"icon-menu d-flex pl-5 py-1\">\n    <ng-container *ngFor=\"let item of iconMenu; trackBy: trackByFn\">\n      <a\n        *ngIf=\"item.type === ThePluginMenuItemType.icon\"\n        href=\"javascript:;\"\n        class=\"mt-2\"\n        thyAction\n        theListboxOption\n        [theOptionValue]=\"item\"\n        [thyActionIcon]=\"item.icon\"\n        [thyTooltip]=\"item?.name\"\n        [thyDisabled]=\"item.disabled\"\n        [theOptionDisabled]=\"item.disabled\"\n        thePreventDefault\n        (click)=\"handleItemSelection(item)\"\n      ></a>\n    </ng-container>\n  </div>\n\n  <thy-divider *ngIf=\"this.iconMenu?.length\" class=\"my-2\"></thy-divider>\n  <div theListboxGroup>\n    <ng-container *ngFor=\"let item of groupMenu; trackBy: trackByFn\">\n      <ng-container *ngIf=\"item.isMenuItem && !(item.children?.length > 0) && item.key !== 'table'\">\n        <div\n          thyDropdownMenuItem\n          theListboxOption\n          [theOptionValue]=\"item\"\n          class=\"py-0\"\n          thePreventDefault\n          [thyDisabled]=\"item.disabled\"\n          [theOptionDisabled]=\"item.disabled\"\n          (click)=\"handleItemSelection(item)\"\n        >\n          <div *ngIf=\"item.menuIcon\" class=\"menu-icon mr-2\">\n            <thy-icon [thyIconName]=\"item.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n          </div>\n          <div class=\"menu-content d-flex align-items-center\">\n            <div class=\"menu-item-title w-100\">\n              {{ item.name }}\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"item.isMenuItem && item.children?.length > 0\" #hasExpanded>\n        <div\n          #dropdownTriggers\n          [thyDropdown]=\"expand\"\n          thyTrigger=\"hover\"\n          thyDropdownMenuItem\n          [thyDisabled]=\"item.disabled\"\n          theListboxOption\n          [theOptionValue]=\"item\"\n          [theOptionDisabled]=\"item.disabled\"\n          [thyPopoverOptions]=\"expandPopoverOptions\"\n          class=\"py-0\"\n          thePreventDefault\n          [thyPanelClass]=\"subPanelClass\"\n          (click)=\"handleItemSelection(item)\"\n        >\n          <div *ngIf=\"item.menuIcon\" class=\"menu-icon mr-2\">\n            <thy-icon [thyIconName]=\"item.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n          </div>\n          <div class=\"menu-content d-flex align-items-center\">\n            <div class=\"menu-item-title w-100\">\n              {{ item.name }}\n            </div>\n          </div>\n          <div *ngIf=\"item.children?.length > 0\">\n            <thy-icon class=\"text-muted\" thyIconName=\"angle-right\"></thy-icon>\n          </div>\n          <thy-dropdown-menu #expand>\n            <div class=\"the-plugin-menu-container expand-menu\" theListboxGroup>\n              <ng-container *ngFor=\"let child of item.children\">\n                <div\n                  *ngIf=\"child.type === ThePluginMenuItemType.group\"\n                  thyDropdownMenuItem\n                  theListboxOption\n                  class=\"py-0\"\n                  thePreventDefault\n                  [theOptionDisabled]=\"item.disabled\"\n                  [thyDisabled]=\"child.disabled\"\n                  (click)=\"handleItemSelection(child)\"\n                  [theOptionValue]=\"child\"\n                >\n                  <div *ngIf=\"child.menuIcon\" class=\"menu-icon mr-2\">\n                    <thy-icon [thyIconName]=\"child.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n                  </div>\n                  <div class=\"menu-content d-flex align-items-center\">\n                    <div class=\"menu-item-title w-100\">\n                      {{ child.name }}\n                    </div>\n                  </div>\n                </div>\n                <thy-divider *ngIf=\"child === 'divider'\" class=\"my-2\"></thy-divider>\n              </ng-container>\n            </div>\n          </thy-dropdown-menu>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"item.isMenuItem && item.key === 'table'\">\n        <div\n          #dropdownTriggers\n          [thyPopover]=\"tableSelect\"\n          thyPlacement=\"rightTop\"\n          thyTrigger=\"hover\"\n          thyDropdownMenuItem\n          theListboxOption\n          [thyConfig]=\"tableSelectPopoverConfig\"\n          [theOptionValue]=\"item\"\n          [theOptionDisabled]=\"item.disabled\"\n          [thyDisabled]=\"item.disabled\"\n          class=\"py-0\"\n          thePreventDefault\n          (click)=\"handleItemSelection(item)\"\n        >\n          <div class=\"menu-icon mr-2\">\n            <thy-icon [thyIconName]=\"item.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n          </div>\n          <div class=\"menu-content d-flex align-items-center\">\n            <div class=\"menu-item-title w-100\">\n              {{ item.name }}\n            </div>\n          </div>\n          <div>\n            <thy-icon class=\"text-muted\" thyIconName=\"angle-right\"></thy-icon>\n          </div>\n\n          <ng-template #tableSelect>\n            <table-select\n              class=\"plugin-menu-table the-table-selector-panel\"\n              [editor]=\"editor\"\n              [beforeInsert]=\"removeKeywords\"\n            ></table-select>\n          </ng-template>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"!item.isMenuItem\" #menuGroup>\n        <thy-dropdown-menu-group class=\"font-size-sm\" [thyTitle]=\"item.groupName\"></thy-dropdown-menu-group>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #thyEmpty>\n  <div class=\"empty d-flex align-items-center justify-content-center\">\n    <thy-empty [thyMessage]=\"thyMessage\"></thy-empty>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TheTableSelect, selector: "table-select", inputs: ["optionsParam", "editor", "beforeInsert"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyEmpty, selector: "thy-empty", inputs: ["thyMessage", "thyTranslationKey", "thyTranslationValues", "thyEntityName", "thyEntityNameTranslateKey", "thyIconName", "thySize", "thyMarginTop", "thyTopAuto", "thyContainer", "thyImageUrl", "thyImageLoading", "thyImageFetchPriority", "thyDescription"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "component", type: ThyInputSearch, selector: "thy-input-search", inputs: ["name", "placeholder", "thyTheme", "thySearchFocus", "thyIconPosition", "thySize"], outputs: ["clear", "thyClear"] }, { kind: "component", type: ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth", "thyImmediateRender"] }, { kind: "component", type: ThyDropdownMenuGroup, selector: "thy-dropdown-menu-group", inputs: ["thyTitle"] }, { kind: "pipe", type: PluginMenuPipe, name: "getMenuIcon" }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "directive", type: ThyPopoverDirective, selector: "[thyPopover]", inputs: ["thyPopover", "thyTrigger", "thyPlacement", "thyOffset", "thyConfig", "thyShowDelay", "thyHideDelay", "thyAutoAdaptive", "thyDisabled"] }, { kind: "directive", type: TheListboxDirective, selector: "[theListBox]", inputs: ["keyboardContainer", "autoActiveFirstItem"], outputs: ["theListboxChange"], exportAs: ["theListBox"] }, { kind: "directive", type: ThyDropdownDirective, selector: "[thyDropdown]", inputs: ["thyDropdownMenu", "thyDropdown", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyActiveClass", "thyPopoverOptions", "thyPlacement", "thyMenuInsideClosable", "thyPanelClass"], outputs: ["thyActiveChange"] }, { kind: "directive", type: TheListboxGroupDirective, selector: "[theListboxGroup]", inputs: ["horizontalColumn"], exportAs: ["theListboxGroup"] }, { kind: "directive", type: TheListboxOptionDirective, selector: "[theListboxOption]", inputs: ["theOptionValue", "theOptionDisabled"], exportAs: ["theListboxOption"] }, { kind: "directive", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", exportAs: ["thePreventDefault"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: ThePluginMenuComponent, isStandalone: true, selector: "the-plugin-menu", inputs: { editor: "editor", theDisplaySearch: "theDisplaySearch", thePluginMenu: "thePluginMenu", sceneKey: "sceneKey", subPanelClass: "subPanelClass", autoActiveFirstItem: "autoActiveFirstItem" }, host: { properties: { "class": "this.containerClassName" } }, viewQueries: [{ propertyName: "dropdownTriggers", predicate: ["dropdownTriggers"], descendants: true, read: ThyDropdownDirective }], ngImport: i0, template: "<div *ngIf=\"theDisplaySearch\" class=\"menu-search px-5 pt-5 pb-2\">\n  <thy-input-search [(ngModel)]=\"keyWords\" placeholder=\"\u641C\u7D22\" thyIconPosition=\"after\" (ngModelChange)=\"updateKeywords(keyWords)\">\n  </thy-input-search>\n</div>\n\n<div\n  *ngIf=\"groupMenu.length > 0; else empty\"\n  theListBox\n  [keyboardContainer]=\"keyboardContainer\"\n  [autoActiveFirstItem]=\"listBoxAutoActiveFirstItem\"\n  (theListboxChange)=\"theListboxChange($event)\"\n  class=\"thy-dropdown-menu the-plugin-menu-scroll-container pb-2 pt-0\"\n>\n  <ng-container *ngIf=\"iconMenu?.length > 0\">\n    <div theListboxGroup [horizontalColumn]=\"6\" class=\"icon-menu d-flex pl-5 py-1\">\n      <ng-container *ngFor=\"let item of iconMenu; trackBy: trackByFn\">\n        <a\n          *ngIf=\"item.type === ThePluginMenuItemType.icon\"\n          href=\"javascript:;\"\n          class=\"mt-2\"\n          thyAction\n          theListboxOption\n          [theOptionValue]=\"item\"\n          [thyActionIcon]=\"item.icon\"\n          [thyTooltip]=\"item?.name\"\n          [thyDisabled]=\"item.disabled\"\n          [theOptionDisabled]=\"item.disabled\"\n          thePreventDefault\n          (click)=\"handleItemSelection(item)\"\n        ></a>\n      </ng-container>\n    </div>\n    <thy-divider class=\"my-2\"></thy-divider>\n  </ng-container>\n\n  <div theListboxGroup>\n    <ng-container *ngFor=\"let item of groupMenu; trackBy: trackByFn\">\n      <ng-container *ngIf=\"item.isMenuItem && !(item.children?.length > 0) && item.key !== 'table'\">\n        <div\n          thyDropdownMenuItem\n          theListboxOption\n          [theOptionValue]=\"item\"\n          class=\"py-0\"\n          thePreventDefault\n          [thyDisabled]=\"item.disabled\"\n          [theOptionDisabled]=\"item.disabled\"\n          (click)=\"handleItemSelection(item)\"\n        >\n          <div *ngIf=\"item.menuIcon\" class=\"menu-icon mr-2\">\n            <thy-icon [thyIconName]=\"item.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n          </div>\n          <div class=\"menu-content d-flex align-items-center\">\n            <div class=\"menu-item-title w-100\">\n              {{ item.name }}\n            </div>\n          </div>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"item.isMenuItem && item.children?.length > 0\" #hasExpanded>\n        <div\n          #dropdownTriggers\n          [thyDropdown]=\"expand\"\n          thyTrigger=\"hover\"\n          thyDropdownMenuItem\n          [thyDisabled]=\"item.disabled\"\n          theListboxOption\n          [theOptionValue]=\"item\"\n          [theOptionDisabled]=\"item.disabled\"\n          [thyPopoverOptions]=\"expandPopoverOptions\"\n          class=\"py-0\"\n          thePreventDefault\n          [thyPanelClass]=\"subPanelClass\"\n          (click)=\"handleItemSelection(item)\"\n        >\n          <div *ngIf=\"item.menuIcon\" class=\"menu-icon mr-2\">\n            <thy-icon [thyIconName]=\"item.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n          </div>\n          <div class=\"menu-content d-flex align-items-center\">\n            <div class=\"menu-item-title w-100\">\n              {{ item.name }}\n            </div>\n          </div>\n          <div *ngIf=\"item.children?.length > 0\">\n            <thy-icon class=\"text-muted\" thyIconName=\"angle-right\"></thy-icon>\n          </div>\n          <thy-dropdown-menu #expand>\n            <div class=\"the-plugin-menu-container expand-menu\" theListboxGroup>\n              <ng-container *ngFor=\"let child of item.children\">\n                <div\n                  *ngIf=\"child.type === ThePluginMenuItemType.group\"\n                  thyDropdownMenuItem\n                  theListboxOption\n                  class=\"py-0\"\n                  thePreventDefault\n                  [theOptionDisabled]=\"item.disabled\"\n                  [thyDisabled]=\"child.disabled\"\n                  (click)=\"handleItemSelection(child)\"\n                  [theOptionValue]=\"child\"\n                >\n                  <div *ngIf=\"child.menuIcon\" class=\"menu-icon mr-2\">\n                    <thy-icon [thyIconName]=\"child.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n                  </div>\n                  <div class=\"menu-content d-flex align-items-center\">\n                    <div class=\"menu-item-title w-100\">\n                      {{ child.name }}\n                    </div>\n                  </div>\n                </div>\n                <thy-divider *ngIf=\"child === 'divider'\" class=\"my-2\"></thy-divider>\n              </ng-container>\n            </div>\n          </thy-dropdown-menu>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"item.isMenuItem && item.key === 'table'\">\n        <div\n          #dropdownTriggers\n          [thyPopover]=\"tableSelect\"\n          thyPlacement=\"rightTop\"\n          thyTrigger=\"hover\"\n          thyDropdownMenuItem\n          theListboxOption\n          [thyConfig]=\"tableSelectPopoverConfig\"\n          [theOptionValue]=\"item\"\n          [theOptionDisabled]=\"item.disabled\"\n          [thyDisabled]=\"item.disabled\"\n          class=\"py-0\"\n          thePreventDefault\n          (click)=\"handleItemSelection(item)\"\n        >\n          <div class=\"menu-icon mr-2\">\n            <thy-icon [thyIconName]=\"item.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n          </div>\n          <div class=\"menu-content d-flex align-items-center\">\n            <div class=\"menu-item-title w-100\">\n              {{ item.name }}\n            </div>\n          </div>\n          <div>\n            <thy-icon class=\"text-muted\" thyIconName=\"angle-right\"></thy-icon>\n          </div>\n\n          <ng-template #tableSelect>\n            <table-select\n              class=\"plugin-menu-table the-table-selector-panel\"\n              [editor]=\"editor\"\n              [beforeInsert]=\"removeKeywords\"\n            ></table-select>\n          </ng-template>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"!item.isMenuItem\" #menuGroup>\n        <thy-dropdown-menu-group class=\"font-size-sm\" [thyTitle]=\"item.groupName\"></thy-dropdown-menu-group>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #empty>\n  <div class=\"empty d-flex align-items-center justify-content-center\">\n    <thy-empty [thyMessage]=\"thyMessage\"></thy-empty>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ThyEmptyModule }, { kind: "component", type: i3.ThyEmpty, selector: "thy-empty", inputs: ["thyMessage", "thyTranslationKey", "thyTranslationValues", "thyEntityName", "thyEntityNameTranslateKey", "thyIconName", "thySize", "thyMarginTop", "thyTopAuto", "thyContainer", "thyImageUrl", "thyImageLoading", "thyImageFetchPriority", "thyDescription"] }, { kind: "component", type: TheTableSelect, selector: "table-select", inputs: ["optionsParam", "editor", "beforeInsert"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "component", type: ThyInputSearch, selector: "thy-input-search", inputs: ["name", "placeholder", "thyTheme", "thySearchFocus", "thyIconPosition", "thySize"], outputs: ["clear", "thyClear"] }, { kind: "component", type: ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth", "thyImmediateRender"] }, { kind: "component", type: ThyDropdownMenuGroup, selector: "thy-dropdown-menu-group", inputs: ["thyTitle"] }, { kind: "pipe", type: PluginMenuPipe, name: "getMenuIcon" }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "directive", type: ThyPopoverDirective, selector: "[thyPopover]", inputs: ["thyPopover", "thyTrigger", "thyPlacement", "thyOffset", "thyConfig", "thyShowDelay", "thyHideDelay", "thyAutoAdaptive", "thyDisabled"] }, { kind: "directive", type: TheListboxDirective, selector: "[theListBox]", inputs: ["keyboardContainer", "autoActiveFirstItem"], outputs: ["theListboxChange"], exportAs: ["theListBox"] }, { kind: "directive", type: ThyDropdownDirective, selector: "[thyDropdown]", inputs: ["thyDropdownMenu", "thyDropdown", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyActiveClass", "thyPopoverOptions", "thyPlacement", "thyMenuInsideClosable", "thyPanelClass"], outputs: ["thyActiveChange"] }, { kind: "directive", type: TheListboxGroupDirective, selector: "[theListboxGroup]", inputs: ["horizontalColumn"], exportAs: ["theListboxGroup"] }, { kind: "directive", type: TheListboxOptionDirective, selector: "[theListboxOption]", inputs: ["theOptionValue", "theOptionDisabled"], exportAs: ["theListboxOption"] }, { kind: "directive", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", exportAs: ["thePreventDefault"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ThePluginMenuComponent, decorators: [{
             type: Component,
@@ -7036,9 +7074,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                         NgIf,
                         NgFor,
                         FormsModule,
+                        ThyEmptyModule,
                         TheTableSelect,
                         ThyIcon,
-                        ThyEmpty,
                         ThyAction,
                         ThyDivider,
                         ThyInputSearch,
@@ -7053,7 +7091,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                         TheListboxOptionDirective,
                         ThePreventDefaultDirective,
                         ThyDropdownMenuItemDirective
-                    ], template: "<div *ngIf=\"theDisplaySearch\" class=\"menu-search px-5 pt-5 pb-2\">\n  <thy-input-search [(ngModel)]=\"keyWords\" placeholder=\"\u641C\u7D22\" thyIconPosition=\"after\" (ngModelChange)=\"updateKeywords(keyWords)\">\n  </thy-input-search>\n</div>\n\n<div\n  *ngIf=\"groupMenu.length > 0; else thyEmpty\"\n  theListBox\n  [keyboardContainer]=\"keyboardContainer\"\n  [autoActiveFirstItem]=\"listBoxAutoActiveFirstItem\"\n  (theListboxChange)=\"theListboxChange($event)\"\n  class=\"thy-dropdown-menu the-plugin-menu-scroll-container pb-2 pt-0\"\n>\n  <div *ngIf=\"iconMenu?.length > 0\" theListboxGroup [horizontalColumn]=\"6\" class=\"icon-menu d-flex pl-5 py-1\">\n    <ng-container *ngFor=\"let item of iconMenu; trackBy: trackByFn\">\n      <a\n        *ngIf=\"item.type === ThePluginMenuItemType.icon\"\n        href=\"javascript:;\"\n        class=\"mt-2\"\n        thyAction\n        theListboxOption\n        [theOptionValue]=\"item\"\n        [thyActionIcon]=\"item.icon\"\n        [thyTooltip]=\"item?.name\"\n        [thyDisabled]=\"item.disabled\"\n        [theOptionDisabled]=\"item.disabled\"\n        thePreventDefault\n        (click)=\"handleItemSelection(item)\"\n      ></a>\n    </ng-container>\n  </div>\n\n  <thy-divider *ngIf=\"this.iconMenu?.length\" class=\"my-2\"></thy-divider>\n  <div theListboxGroup>\n    <ng-container *ngFor=\"let item of groupMenu; trackBy: trackByFn\">\n      <ng-container *ngIf=\"item.isMenuItem && !(item.children?.length > 0) && item.key !== 'table'\">\n        <div\n          thyDropdownMenuItem\n          theListboxOption\n          [theOptionValue]=\"item\"\n          class=\"py-0\"\n          thePreventDefault\n          [thyDisabled]=\"item.disabled\"\n          [theOptionDisabled]=\"item.disabled\"\n          (click)=\"handleItemSelection(item)\"\n        >\n          <div *ngIf=\"item.menuIcon\" class=\"menu-icon mr-2\">\n            <thy-icon [thyIconName]=\"item.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n          </div>\n          <div class=\"menu-content d-flex align-items-center\">\n            <div class=\"menu-item-title w-100\">\n              {{ item.name }}\n            </div>\n          </div>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"item.isMenuItem && item.children?.length > 0\" #hasExpanded>\n        <div\n          #dropdownTriggers\n          [thyDropdown]=\"expand\"\n          thyTrigger=\"hover\"\n          thyDropdownMenuItem\n          [thyDisabled]=\"item.disabled\"\n          theListboxOption\n          [theOptionValue]=\"item\"\n          [theOptionDisabled]=\"item.disabled\"\n          [thyPopoverOptions]=\"expandPopoverOptions\"\n          class=\"py-0\"\n          thePreventDefault\n          [thyPanelClass]=\"subPanelClass\"\n          (click)=\"handleItemSelection(item)\"\n        >\n          <div *ngIf=\"item.menuIcon\" class=\"menu-icon mr-2\">\n            <thy-icon [thyIconName]=\"item.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n          </div>\n          <div class=\"menu-content d-flex align-items-center\">\n            <div class=\"menu-item-title w-100\">\n              {{ item.name }}\n            </div>\n          </div>\n          <div *ngIf=\"item.children?.length > 0\">\n            <thy-icon class=\"text-muted\" thyIconName=\"angle-right\"></thy-icon>\n          </div>\n          <thy-dropdown-menu #expand>\n            <div class=\"the-plugin-menu-container expand-menu\" theListboxGroup>\n              <ng-container *ngFor=\"let child of item.children\">\n                <div\n                  *ngIf=\"child.type === ThePluginMenuItemType.group\"\n                  thyDropdownMenuItem\n                  theListboxOption\n                  class=\"py-0\"\n                  thePreventDefault\n                  [theOptionDisabled]=\"item.disabled\"\n                  [thyDisabled]=\"child.disabled\"\n                  (click)=\"handleItemSelection(child)\"\n                  [theOptionValue]=\"child\"\n                >\n                  <div *ngIf=\"child.menuIcon\" class=\"menu-icon mr-2\">\n                    <thy-icon [thyIconName]=\"child.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n                  </div>\n                  <div class=\"menu-content d-flex align-items-center\">\n                    <div class=\"menu-item-title w-100\">\n                      {{ child.name }}\n                    </div>\n                  </div>\n                </div>\n                <thy-divider *ngIf=\"child === 'divider'\" class=\"my-2\"></thy-divider>\n              </ng-container>\n            </div>\n          </thy-dropdown-menu>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"item.isMenuItem && item.key === 'table'\">\n        <div\n          #dropdownTriggers\n          [thyPopover]=\"tableSelect\"\n          thyPlacement=\"rightTop\"\n          thyTrigger=\"hover\"\n          thyDropdownMenuItem\n          theListboxOption\n          [thyConfig]=\"tableSelectPopoverConfig\"\n          [theOptionValue]=\"item\"\n          [theOptionDisabled]=\"item.disabled\"\n          [thyDisabled]=\"item.disabled\"\n          class=\"py-0\"\n          thePreventDefault\n          (click)=\"handleItemSelection(item)\"\n        >\n          <div class=\"menu-icon mr-2\">\n            <thy-icon [thyIconName]=\"item.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n          </div>\n          <div class=\"menu-content d-flex align-items-center\">\n            <div class=\"menu-item-title w-100\">\n              {{ item.name }}\n            </div>\n          </div>\n          <div>\n            <thy-icon class=\"text-muted\" thyIconName=\"angle-right\"></thy-icon>\n          </div>\n\n          <ng-template #tableSelect>\n            <table-select\n              class=\"plugin-menu-table the-table-selector-panel\"\n              [editor]=\"editor\"\n              [beforeInsert]=\"removeKeywords\"\n            ></table-select>\n          </ng-template>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"!item.isMenuItem\" #menuGroup>\n        <thy-dropdown-menu-group class=\"font-size-sm\" [thyTitle]=\"item.groupName\"></thy-dropdown-menu-group>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #thyEmpty>\n  <div class=\"empty d-flex align-items-center justify-content-center\">\n    <thy-empty [thyMessage]=\"thyMessage\"></thy-empty>\n  </div>\n</ng-template>\n" }]
+                    ], template: "<div *ngIf=\"theDisplaySearch\" class=\"menu-search px-5 pt-5 pb-2\">\n  <thy-input-search [(ngModel)]=\"keyWords\" placeholder=\"\u641C\u7D22\" thyIconPosition=\"after\" (ngModelChange)=\"updateKeywords(keyWords)\">\n  </thy-input-search>\n</div>\n\n<div\n  *ngIf=\"groupMenu.length > 0; else empty\"\n  theListBox\n  [keyboardContainer]=\"keyboardContainer\"\n  [autoActiveFirstItem]=\"listBoxAutoActiveFirstItem\"\n  (theListboxChange)=\"theListboxChange($event)\"\n  class=\"thy-dropdown-menu the-plugin-menu-scroll-container pb-2 pt-0\"\n>\n  <ng-container *ngIf=\"iconMenu?.length > 0\">\n    <div theListboxGroup [horizontalColumn]=\"6\" class=\"icon-menu d-flex pl-5 py-1\">\n      <ng-container *ngFor=\"let item of iconMenu; trackBy: trackByFn\">\n        <a\n          *ngIf=\"item.type === ThePluginMenuItemType.icon\"\n          href=\"javascript:;\"\n          class=\"mt-2\"\n          thyAction\n          theListboxOption\n          [theOptionValue]=\"item\"\n          [thyActionIcon]=\"item.icon\"\n          [thyTooltip]=\"item?.name\"\n          [thyDisabled]=\"item.disabled\"\n          [theOptionDisabled]=\"item.disabled\"\n          thePreventDefault\n          (click)=\"handleItemSelection(item)\"\n        ></a>\n      </ng-container>\n    </div>\n    <thy-divider class=\"my-2\"></thy-divider>\n  </ng-container>\n\n  <div theListboxGroup>\n    <ng-container *ngFor=\"let item of groupMenu; trackBy: trackByFn\">\n      <ng-container *ngIf=\"item.isMenuItem && !(item.children?.length > 0) && item.key !== 'table'\">\n        <div\n          thyDropdownMenuItem\n          theListboxOption\n          [theOptionValue]=\"item\"\n          class=\"py-0\"\n          thePreventDefault\n          [thyDisabled]=\"item.disabled\"\n          [theOptionDisabled]=\"item.disabled\"\n          (click)=\"handleItemSelection(item)\"\n        >\n          <div *ngIf=\"item.menuIcon\" class=\"menu-icon mr-2\">\n            <thy-icon [thyIconName]=\"item.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n          </div>\n          <div class=\"menu-content d-flex align-items-center\">\n            <div class=\"menu-item-title w-100\">\n              {{ item.name }}\n            </div>\n          </div>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"item.isMenuItem && item.children?.length > 0\" #hasExpanded>\n        <div\n          #dropdownTriggers\n          [thyDropdown]=\"expand\"\n          thyTrigger=\"hover\"\n          thyDropdownMenuItem\n          [thyDisabled]=\"item.disabled\"\n          theListboxOption\n          [theOptionValue]=\"item\"\n          [theOptionDisabled]=\"item.disabled\"\n          [thyPopoverOptions]=\"expandPopoverOptions\"\n          class=\"py-0\"\n          thePreventDefault\n          [thyPanelClass]=\"subPanelClass\"\n          (click)=\"handleItemSelection(item)\"\n        >\n          <div *ngIf=\"item.menuIcon\" class=\"menu-icon mr-2\">\n            <thy-icon [thyIconName]=\"item.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n          </div>\n          <div class=\"menu-content d-flex align-items-center\">\n            <div class=\"menu-item-title w-100\">\n              {{ item.name }}\n            </div>\n          </div>\n          <div *ngIf=\"item.children?.length > 0\">\n            <thy-icon class=\"text-muted\" thyIconName=\"angle-right\"></thy-icon>\n          </div>\n          <thy-dropdown-menu #expand>\n            <div class=\"the-plugin-menu-container expand-menu\" theListboxGroup>\n              <ng-container *ngFor=\"let child of item.children\">\n                <div\n                  *ngIf=\"child.type === ThePluginMenuItemType.group\"\n                  thyDropdownMenuItem\n                  theListboxOption\n                  class=\"py-0\"\n                  thePreventDefault\n                  [theOptionDisabled]=\"item.disabled\"\n                  [thyDisabled]=\"child.disabled\"\n                  (click)=\"handleItemSelection(child)\"\n                  [theOptionValue]=\"child\"\n                >\n                  <div *ngIf=\"child.menuIcon\" class=\"menu-icon mr-2\">\n                    <thy-icon [thyIconName]=\"child.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n                  </div>\n                  <div class=\"menu-content d-flex align-items-center\">\n                    <div class=\"menu-item-title w-100\">\n                      {{ child.name }}\n                    </div>\n                  </div>\n                </div>\n                <thy-divider *ngIf=\"child === 'divider'\" class=\"my-2\"></thy-divider>\n              </ng-container>\n            </div>\n          </thy-dropdown-menu>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"item.isMenuItem && item.key === 'table'\">\n        <div\n          #dropdownTriggers\n          [thyPopover]=\"tableSelect\"\n          thyPlacement=\"rightTop\"\n          thyTrigger=\"hover\"\n          thyDropdownMenuItem\n          theListboxOption\n          [thyConfig]=\"tableSelectPopoverConfig\"\n          [theOptionValue]=\"item\"\n          [theOptionDisabled]=\"item.disabled\"\n          [thyDisabled]=\"item.disabled\"\n          class=\"py-0\"\n          thePreventDefault\n          (click)=\"handleItemSelection(item)\"\n        >\n          <div class=\"menu-icon mr-2\">\n            <thy-icon [thyIconName]=\"item.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n          </div>\n          <div class=\"menu-content d-flex align-items-center\">\n            <div class=\"menu-item-title w-100\">\n              {{ item.name }}\n            </div>\n          </div>\n          <div>\n            <thy-icon class=\"text-muted\" thyIconName=\"angle-right\"></thy-icon>\n          </div>\n\n          <ng-template #tableSelect>\n            <table-select\n              class=\"plugin-menu-table the-table-selector-panel\"\n              [editor]=\"editor\"\n              [beforeInsert]=\"removeKeywords\"\n            ></table-select>\n          </ng-template>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"!item.isMenuItem\" #menuGroup>\n        <thy-dropdown-menu-group class=\"font-size-sm\" [thyTitle]=\"item.groupName\"></thy-dropdown-menu-group>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #empty>\n  <div class=\"empty d-flex align-items-center justify-content-center\">\n    <thy-empty [thyMessage]=\"thyMessage\"></thy-empty>\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1.ThyPopoverRef }], propDecorators: { dropdownTriggers: [{
                 type: ViewChildren,
                 args: ['dropdownTriggers', { read: ThyDropdownDirective }]
@@ -7292,42 +7330,35 @@ class TheInlineToolbar {
     }
     updateInlineToolbar() {
         const inlineToolbar = this.elementRef.nativeElement.firstElementChild;
-        if (!this.editor.selection) {
-            inlineToolbar.removeAttribute('style');
+        if (!inlineToolbar) {
             return;
         }
-        const anchorBlock$1 = anchorBlock(this.editor);
-        if (!inlineToolbar || !anchorBlock$1) {
-            return;
-        }
-        const { editor } = this;
-        const { selection } = editor;
+        const { selection } = this.editor;
         if (!selection ||
-            !AngularEditor.isFocused(editor) ||
-            Range.isCollapsed(selection) ||
-            Editor.string(editor, selection) === '') {
+            (selection &&
+                (!AngularEditor.isFocused(this.editor) ||
+                    Range.isCollapsed(selection) ||
+                    Editor.string(this.editor, selection) === ''))) {
             inlineToolbar.removeAttribute('style');
             return;
         }
-        if (!THE_INLINE_TOOLBAR_TYPES.includes(anchorBlock$1.type)) {
-            return;
-        }
         const native = window.getSelection();
         if (native.type !== 'None') {
             const range = native.getRangeAt(0);
             this.updatePosition(inlineToolbar, range);
             this.inlineToolbar?.selectionChange(this.editor);
+            this.cdr.markForCheck();
         }
-        this.cdr.detectChanges();
     }
     updatePosition(toolbarElement, range) {
         let boundary = range.getBoundingClientRect();
-        if (!boundary || (boundary.height === 0 && boundary.width === 0 && range.startContainer === range.endContainer)) {
-            if (range.startContainer.nodeType === 1 && range.startContainer.querySelector('img')) {
-                boundary = range.startContainer.querySelector('img').getBoundingClientRect();
+        const startContainer = range.startContainer;
+        if (!boundary || (boundary.height === 0 && boundary.width === 0 && startContainer === range.endContainer)) {
+            if (startContainer.nodeType === 1 && startContainer.querySelector('img')) {
+                boundary = startContainer.querySelector('img').getBoundingClientRect();
             }
             else {
-                boundary = range.startContainer.getBoundingClientRect();
+                boundary = startContainer.getBoundingClientRect();
             }
         }
         const editableElement = this.contextService.getEditableElement();
@@ -7687,7 +7718,7 @@ class ResizeRef {
 }
 
 class TheColumnResizeOverlayHandle {
-    constructor(elementRef, viewContainerRef, cdr, ngZone, resizeRef, eventDispatcher, document, resizeNotifier) {
+    constructor(elementRef, viewContainerRef, cdr, ngZone, resizeRef, eventDispatcher, document, resizeNotifier, destroyRef) {
         this.elementRef = elementRef;
         this.viewContainerRef = viewContainerRef;
         this.cdr = cdr;
@@ -7696,7 +7727,7 @@ class TheColumnResizeOverlayHandle {
         this.eventDispatcher = eventDispatcher;
         this.document = document;
         this.resizeNotifier = resizeNotifier;
-        this.destroyed = new ReplaySubject();
+        this.destroyRef = destroyRef;
     }
     ngAfterViewInit() {
         this._listenForMouseEvents();
@@ -7710,15 +7741,14 @@ class TheColumnResizeOverlayHandle {
     }
     _listenForMouseEvents() {
         this.ngZone.runOutsideAngular(() => {
-            const takeUntilDestroyed = takeUntil(this.destroyed);
             fromEvent(this.elementRef.nativeElement, 'mouseenter')
-                .pipe(takeUntilDestroyed, mapTo(this.resizeRef.origin.nativeElement))
+                .pipe(mapTo(this.resizeRef.origin.nativeElement), takeUntilDestroyed(this.destroyRef))
                 .subscribe(cell => {
                 this.eventDispatcher.tableCellHovered.next({ cell, position: this.resizeRef.position });
                 this.resizeRef.updateSizeAndOffset();
             });
             fromEvent(this.elementRef.nativeElement, 'mousedown')
-                .pipe(takeUntilDestroyed)
+                .pipe(takeUntilDestroyed(this.destroyRef))
                 .subscribe(mousedownEvent => {
                 mousedownEvent.preventDefault();
                 this._dragStarted(mousedownEvent);
@@ -7742,10 +7772,10 @@ class TheColumnResizeOverlayHandle {
         let size = isXAxis ? initialWidthSize : initialHeightSize;
         this.updateResizeActive(true);
         this._notifyResizeStarted();
-        mouseup.pipe(takeUntil(escape), takeUntil(this.destroyed)).subscribe(({ clientX, clientY }) => {
+        mouseup.pipe(takeUntil(escape), takeUntilDestroyed(this.destroyRef)).subscribe(({ clientX, clientY }) => {
             this._notifyResizeEnded(size, isXAxis ? clientX !== startX : clientY !== startY);
         });
-        escape.pipe(takeUntil(mouseup), takeUntil(this.destroyed)).subscribe(() => {
+        escape.pipe(takeUntil(mouseup), takeUntilDestroyed(this.destroyRef)).subscribe(() => {
             this._notifyResizeEnded(size);
         });
         mousemove
@@ -7757,7 +7787,7 @@ class TheColumnResizeOverlayHandle {
         }), startWith({
             clientX: startX,
             clientY: startY
-        }), distinctUntilChanged(), pairwise(), takeUntil(mouseup), takeUntil(escape), takeUntil(this.destroyed))
+        }), distinctUntilChanged(), pairwise(), takeUntil(mouseup), takeUntil(escape), takeUntilDestroyed(this.destroyRef))
             .subscribe(([prev, curr]) => {
             let deltaSize = isXAxis ? curr.clientX - prev.clientX : curr.clientY - prev.clientY;
             this.resizeNotifier.triggerResize.next({
@@ -7806,11 +7836,7 @@ class TheColumnResizeOverlayHandle {
             this.resizeNotifier.resizeStarted.next(sizeMessage);
         });
     }
-    ngOnDestroy() {
-        this.destroyed.next();
-        this.destroyed.complete();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheColumnResizeOverlayHandle, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: ResizeRef }, { token: TableCellEventDispatcher }, { token: DOCUMENT }, { token: ColumnResizeNotifierSource }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheColumnResizeOverlayHandle, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: ResizeRef }, { token: TableCellEventDispatcher }, { token: DOCUMENT }, { token: ColumnResizeNotifierSource }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TheColumnResizeOverlayHandle, isStandalone: true, selector: "ng-component", host: { classAttribute: "the-table-resize-overlay-thumb" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheColumnResizeOverlayHandle, decorators: [{
@@ -7824,12 +7850,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: ResizeRef }, { type: TableCellEventDispatcher }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }, { type: ColumnResizeNotifierSource }] });
+                }] }, { type: ColumnResizeNotifierSource }, { type: i0.DestroyRef }] });
 
 class ColumnResizingStore {
     constructor() {
         this.resizeCols = [];
-        this.resizeRows = [];
     }
     storeResizingCol(colElement) {
         if (this.resizeCols.some(cache => cache.colElement === colElement)) {
@@ -7837,27 +7862,14 @@ class ColumnResizingStore {
         }
         this.resizeCols.push({ colElement, baseWidth: getElementWidth(colElement) });
     }
-    storeResizingRow(rowElement) {
-        if (this.resizeRows.some(cache => cache.rowElement === rowElement)) {
-            return;
-        }
-        this.resizeRows.push({ rowElement, baseHeight: getElementHeight(rowElement) });
-    }
     storeTableWidth(cols) {
         if (!this.tableCols) {
             this.tableCols = { cols, baseWidth: getColsTotalWidth(cols) };
         }
     }
-    storeTableHeight(rows) {
-        if (!this.tableRows) {
-            this.tableRows = { rows, baseHeight: getRowsTotalHeight(rows) };
-        }
-    }
     cleanResizing() {
         this.tableCols = null;
-        this.tableRows = null;
         this.resizeCols = [];
-        this.resizeRows = [];
         this.direction = null;
     }
     restoreLeftCols(deltaX) {
@@ -7879,44 +7891,6 @@ class ColumnResizingStore {
         }
         return deltaX;
     }
-    restoreTopRows(deltaY) {
-        let index = this.resizeRows.length - 1;
-        while (index >= 0 && deltaY > 0) {
-            const currentHeight = this.resizeRows[index].rowElement.getBoundingClientRect().height;
-            if (this.resizeRows[index].baseHeight > currentHeight) {
-                if (this.resizeRows[index].baseHeight > currentHeight + deltaY) {
-                    this.resizeRows[index].rowElement.style.height = coerceCssPixelValue(currentHeight + deltaY);
-                    deltaY = 0;
-                }
-                else {
-                    deltaY -= this.resizeRows[index].baseHeight - currentHeight;
-                    this.resizeRows[index].rowElement.style.height = coerceCssPixelValue(this.resizeRows[index].baseHeight);
-                    this.popRow();
-                }
-            }
-            index--;
-        }
-        return deltaY;
-    }
-    restoreBottomRows(deltaY) {
-        let index = this.resizeRows.length - 1;
-        while (index >= 0 && deltaY < 0) {
-            const currentHeight = coercePixelsFromCssValue(this.resizeRows[index].rowElement.style.height);
-            if (this.resizeRows[index].baseHeight > currentHeight) {
-                if (this.resizeRows[index].baseHeight > currentHeight + Math.abs(deltaY)) {
-                    this.resizeRows[index].rowElement.style.height = coerceCssPixelValue(currentHeight + Math.abs(deltaY));
-                    deltaY = 0;
-                }
-                else {
-                    deltaY += this.resizeRows[index].baseHeight - currentHeight;
-                    this.resizeRows[index].rowElement.style.height = coerceCssPixelValue(this.resizeRows[index].baseHeight);
-                    this.popRow();
-                }
-            }
-            index--;
-        }
-        return deltaY;
-    }
     restoreRightCols(deltaX) {
         let index = this.resizeCols.length - 1;
         while (index >= 0 && deltaX < 0) {
@@ -7941,11 +7915,6 @@ class ColumnResizingStore {
             return getColsTotalWidth(this.tableCols.cols) - this.tableCols.baseWidth - Math.abs(deltaX);
         }
     }
-    getAddTableHeight(deltaY) {
-        if (this.tableRows) {
-            return getRowsTotalHeight(this.tableRows.rows) - this.tableRows.baseHeight - Math.abs(deltaY);
-        }
-    }
     isRestoring(deltaValue, isXAxis = true) {
         return !this.isResizing(deltaValue, isXAxis);
     }
@@ -7956,9 +7925,6 @@ class ColumnResizingStore {
         if (this.resizeCols.length > 0) {
             return;
         }
-        if (this.resizeRows.length > 0) {
-            return;
-        }
         this.direction = this.getDirection(deltaValue, isXAxis);
     }
     getDirection(deltaValue, isXAxis = true) {
@@ -7967,9 +7933,6 @@ class ColumnResizingStore {
     popCol() {
         this.resizeCols.pop();
     }
-    popRow() {
-        this.resizeRows.pop();
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ColumnResizingStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ColumnResizingStore }); }
 }
@@ -7998,6 +7961,25 @@ class TheColumnResizeDirective {
         this._listenStartDrag();
         this._listenEndDrag();
     }
+    getResizeRowIndex(position, cell) {
+        const rowElements = this.theTableComponent.nativeElement.querySelector('tbody').children;
+        const editor = this.theTableComponent?.editor;
+        if (cell && rowElements && editor) {
+            const node = AngularEditor.toSlateNode(editor, cell);
+            const path = AngularEditor.findPath(editor, node);
+            const [row] = path.slice(-2);
+            let rowIndex;
+            switch (position) {
+                case Position.top:
+                    rowIndex = row - 1;
+                    break;
+                case Position.bottom:
+                    rowIndex = row;
+                    break;
+            }
+            return rowIndex;
+        }
+    }
     _listenForCellEdgeHoverEvents() {
         this.ngZone.runOutsideAngular(() => {
             const element = this.elementRef.nativeElement;
@@ -8017,6 +7999,7 @@ class TheColumnResizeDirective {
                     const positionOffsets = [topOffset, rightOffset, bottomOffset, leftOffset];
                     const minIndex = positionOffsets.indexOf(Math.min(...positionOffsets));
                     this.position = positions[minIndex];
+                    this.targetCell = cell;
                     return { cell, position: this.position };
                 }
                 return null;
@@ -8035,9 +8018,6 @@ class TheColumnResizeDirective {
             if (this.position === Position.left || this.position === Position.right) {
                 this.theTableComponent.initializeColumns();
             }
-            else {
-                this.theTableComponent.initializeRows();
-            }
         });
     }
     _listenEndDrag() {
@@ -8054,7 +8034,8 @@ class TheColumnResizeDirective {
                 this.theTableComponent.transformColumnsWidth();
             }
             else {
-                this.theTableComponent.transformRowHeight();
+                const rowIndex = this.getResizeRowIndex(this.position, this.targetCell);
+                this.theTableComponent.transformRowHeight(rowIndex);
             }
         });
     }
@@ -9280,8 +9261,18 @@ const withBlockCard = (editor) => {
                 const centerX = rectEditable.x + rectEditable.width / 2;
                 const blockCardEntry = AngularEditor.toSlateCardEntry(editor, relativeBlockCardElement.firstElementChild);
                 if (blockCardEntry && editor.isBlockCard(blockCardEntry[0])) {
+                    const parentBlockCardEntry = Editor.above(editor, {
+                        at: blockCardEntry[1],
+                        mode: 'highest',
+                        match: node => editor.isBlockCard(node)
+                    });
                     event.preventDefault();
-                    AngularEditor.moveBlockCard(editor, blockCardEntry[0], { direction: event.x < centerX ? 'left' : 'right' });
+                    if (parentBlockCardEntry) {
+                        AngularEditor.moveBlockCard(editor, parentBlockCardEntry[0], { direction: event.x < centerX ? 'left' : 'right' });
+                    }
+                    else {
+                        AngularEditor.moveBlockCard(editor, blockCardEntry[0], { direction: event.x < centerX ? 'left' : 'right' });
+                    }
                 }
             }
             return;
@@ -10004,7 +9995,7 @@ class TheImage extends TheBaseElement {
         const currentWidth = this.imageEntry?.width || this.naturalWidth;
         return this.imageEntry?.layout && currentWidth > this.layoutDefaultWidth && !this.imageEntry?.reSized
             ? this.layoutDefaultWidth
-            : this.imageEntry.width;
+            : currentWidth;
     }
     constructor(elementRef, cdr, imageGroup, imageUploaderService, theContextService, thyPopover, overlay, destroyRef) {
         super(elementRef, cdr);
@@ -10511,7 +10502,7 @@ const createImagePlugin = createPluginFactory({
     ],
     options: {
         allowParentTypes: [ElementKinds.listItem, ElementKinds.tableCell, ElementKinds.blockquote],
-        imageTypes: ['image/png', 'image/jpeg', 'image/gif', 'image/bmp']
+        imageTypes: ['image/png', 'image/jpeg', 'image/gif', 'image/bmp', 'image/svg+xml']
     }
 });
 
@@ -10621,6 +10612,22 @@ const createIndentPlugin = createPluginFactory({
     }
 });
 
+/**
+ * Remove nodes with empty text.
+ */
+const withRemoveEmptyNodes = (options) => (editor) => {
+    const types = castArray(options.type);
+    const { normalizeNode } = editor;
+    editor.normalizeNode = ([node, path]) => {
+        if (node.type && types.includes(node.type) && Node.string(node) === '') {
+            Transforms.removeNodes(editor, { at: path });
+            return;
+        }
+        normalizeNode([node, path]);
+    };
+    return editor;
+};
+
 class TheInlineCode extends TheBaseElement {
     constructor() {
         super(...arguments);
@@ -10645,22 +10652,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                 }]
         }] });
 
-/**
- * Remove nodes with empty text.
- */
-const withRemoveEmptyNodes = (options) => (editor) => {
-    const types = castArray(options.type);
-    const { normalizeNode } = editor;
-    editor.normalizeNode = ([node, path]) => {
-        if (node.type && types.includes(node.type) && Node.string(node) === '') {
-            Transforms.removeNodes(editor, { at: path });
-            return;
-        }
-        normalizeNode([node, path]);
-    };
-    return editor;
-};
-
 const withInlineCode = (editor) => {
     const { isInline, renderElement, insertText } = editor;
     editor.isInline = (element) => {
@@ -10715,6 +10706,7 @@ const createInlineCodePlugin = createPluginFactory({
         }
     ],
     options: {
+        isInline: true,
         disabledOperateTypes: [ElementKinds.image, ...DISABLED_OPERATE_TYPES]
     }
 });
@@ -11061,6 +11053,7 @@ const createLinkPlugin = createPluginFactory({
         }
     ],
     options: {
+        isInline: true,
         disabledOperateTypes: [ElementKinds.image, ...DISABLED_OPERATE_TYPES]
     }
 });
@@ -12570,7 +12563,7 @@ class TheTableRow extends TheBaseElement {
         this.updateNumberedColumnPosition();
     }
     setHeight() {
-        if (this.element.height) {
+        if (this.element?.height) {
             this.height = this.element.height + 'px';
         }
     }
@@ -13972,13 +13965,53 @@ const moveSelectionFromCell = (editor, e) => {
     });
 };
 
+const getTableViewportRect = (editor, table) => {
+    const tableComponent = ELEMENT_TO_COMPONENT.get(table);
+    const tableWrapper = tableComponent.tableWrapper.nativeElement;
+    const tableWrapperCSSStyle = getComputedStyle(tableWrapper);
+    const tableWrapperRect = tableWrapper.getBoundingClientRect();
+    const tableWrapperPaddingBottom = coercePixelsFromCssValue(tableWrapperCSSStyle.paddingBottom || '0px');
+    const firstRow = AngularEditor.toDOMNode(editor, table.children[0]);
+    const firstRowRect = firstRow.getBoundingClientRect();
+    const controlHeight = 11;
+    const adjustedTableRect = {
+        left: tableWrapperRect.left,
+        right: tableWrapperRect.right,
+        bottom: tableWrapperRect.bottom - tableWrapperPaddingBottom,
+        top: firstRowRect.top - controlHeight
+    };
+    const editorScrollContainer = getEditorScrollContainer(editor);
+    const editorScrollContainerCSSStyle = getComputedStyle(editorScrollContainer);
+    const editorScrollContainerRect = editorScrollContainer.getBoundingClientRect();
+    // handle toolbar effect
+    const paddingTop = coercePixelsFromCssValue(editorScrollContainerCSSStyle.paddingTop || '0px');
+    const adjustedEditorScrollContainerRect = {
+        left: editorScrollContainerRect.left,
+        right: editorScrollContainerRect.right,
+        bottom: editorScrollContainerRect.bottom,
+        top: editorScrollContainerRect.top + paddingTop
+    };
+    const left = Math.max(adjustedEditorScrollContainerRect.left, adjustedTableRect.left);
+    const right = Math.min(adjustedEditorScrollContainerRect.right, adjustedTableRect.right);
+    const bottom = Math.min(adjustedEditorScrollContainerRect.bottom, adjustedTableRect.bottom);
+    const top = Math.max(adjustedEditorScrollContainerRect.top, adjustedTableRect.top);
+    return {
+        left,
+        right,
+        top,
+        bottom
+    };
+};
+
 class TheInsertMark {
     get editor() {
         return this.tableStore && this.tableStore.editor;
     }
-    constructor(cdr, renderer2) {
+    constructor(cdr, renderer2, elementRef) {
         this.cdr = cdr;
         this.renderer2 = renderer2;
+        this.elementRef = elementRef;
+        this.insertLineStyle = {};
         this.destroy$ = new Subject();
         this.tooltipContent = '';
         this.disabled = false;
@@ -14015,7 +14048,7 @@ class TheInsertMark {
             return;
         }
         this.dotWrapperHovered = true;
-        this.insertLength = this.getLength();
+        this.insertLineStyle = this.getInsertLineStyle();
         this.parentElement && this.renderer2.addClass(this.parentElement, TOP_CELL_CLASS);
         this.cdr.detectChanges();
     }
@@ -14028,35 +14061,54 @@ class TheInsertMark {
         this.parentElement && this.renderer2.removeClass(this.parentElement, TOP_CELL_CLASS);
         this.cdr.detectChanges();
     }
-    getLength() {
+    getInsertLineStyle() {
         const { selection } = this.editor;
         if (selection && Range.isCollapsed(selection)) {
             const { table } = createTablePosition(this.editor, selection.anchor.path);
             if (!table) {
                 return;
             }
-            const tableComponent = ELEMENT_TO_COMPONENT.get(table);
-            const tableWrapper = tableComponent.tableWrapper.nativeElement;
-            const tableElement = tableComponent.theTableElement.nativeElement;
-            let result = 0;
+            let width = 0;
+            let height = 0;
+            let left = 0;
+            let top = 0;
+            const insertMarkSize = 19;
+            const insertMarkBoundingClientRect = this.insertWrapper.nativeElement.getBoundingClientRect();
+            const tableViewportRect = getTableViewportRect(this.editor, table);
             if (this.type === 'row') {
-                result = tableWrapper.offsetWidth;
+                width = tableViewportRect.right - insertMarkBoundingClientRect.right;
+                height = 1;
+                left = insertMarkBoundingClientRect.left + insertMarkSize;
+                top = insertMarkBoundingClientRect.top + insertMarkSize / 2;
             }
             else {
-                result = tableElement.offsetHeight - 1;
+                width = 1;
+                height = tableViewportRect.bottom - insertMarkBoundingClientRect.bottom;
+                left = insertMarkBoundingClientRect.left + insertMarkSize / 2;
+                top = insertMarkBoundingClientRect.top + insertMarkSize;
+                if (this.isLastColumn()) {
+                    left = insertMarkBoundingClientRect.right;
+                }
             }
-            return result + 'px';
+            return { height: `${height}px`, width: `${width}px`, left: `${left}px`, top: `${top}px` };
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheInsertMark, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TheInsertMark, isStandalone: true, selector: "the-table-insert-mark", inputs: { type: "type", at: "at", tableStore: "tableStore", parentElement: "parentElement" }, host: { classAttribute: "the-table-insert-mark" }, ngImport: i0, template: "<div\n  [thyTooltip]=\"!disabled && tooltipContent\"\n  class=\"the-table-controls-insert-wrapper\"\n  [ngClass]=\"{ disabled: disabled }\"\n  contenteditable=\"false\"\n  (pointerdown)=\"preventDefault($event)\"\n  (pointerup)=\"insert($event)\"\n  (click)=\"preventDefault($event)\"\n  (mouseup)=\"preventDefault($event)\"\n  (mouseenter)=\"onMouseEnter($event)\"\n  (mouseleave)=\"onMouseLeave($event)\"\n>\n  <div\n    class=\"the-table-controls-insert-line\"\n    *ngIf=\"dotWrapperHovered\"\n    [attr.data-dot-type]=\"type\"\n    [ngStyle]=\"{ height: type === 'column' && insertLength, width: type === 'row' && insertLength }\"\n  ></div>\n</div>\n", dependencies: [{ kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    isLastColumn() {
+        const tablePosition = createTablePosition(this.editor);
+        if (!tablePosition?.table) {
+            return false;
+        }
+        return this.type === 'column' && this.at === tablePosition.getWidth();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheInsertMark, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TheInsertMark, isStandalone: true, selector: "the-table-insert-mark", inputs: { type: "type", at: "at", tableStore: "tableStore", parentElement: "parentElement" }, host: { classAttribute: "the-table-insert-mark" }, viewQueries: [{ propertyName: "insertWrapper", first: true, predicate: ["insertWrapper"], descendants: true }], ngImport: i0, template: "<div\n  #insertWrapper\n  [thyTooltip]=\"!disabled && tooltipContent\"\n  class=\"the-table-controls-insert-wrapper\"\n  [ngClass]=\"{ disabled: disabled }\"\n  contenteditable=\"false\"\n  (pointerdown)=\"preventDefault($event)\"\n  (pointerup)=\"insert($event)\"\n  (click)=\"preventDefault($event)\"\n  (mouseup)=\"preventDefault($event)\"\n  (mouseenter)=\"onMouseEnter($event)\"\n  (mouseleave)=\"onMouseLeave($event)\"\n>\n  <div\n    class=\"the-table-controls-insert-line\"\n    *ngIf=\"dotWrapperHovered\"\n    [ngStyle]=\"insertLineStyle\"\n  ></div>\n</div>\n", dependencies: [{ kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheInsertMark, decorators: [{
             type: Component,
             args: [{ selector: 'the-table-insert-mark', host: {
                         class: 'the-table-insert-mark'
-                    }, standalone: true, imports: [ThyTooltipDirective, NgClass, NgIf, NgStyle], template: "<div\n  [thyTooltip]=\"!disabled && tooltipContent\"\n  class=\"the-table-controls-insert-wrapper\"\n  [ngClass]=\"{ disabled: disabled }\"\n  contenteditable=\"false\"\n  (pointerdown)=\"preventDefault($event)\"\n  (pointerup)=\"insert($event)\"\n  (click)=\"preventDefault($event)\"\n  (mouseup)=\"preventDefault($event)\"\n  (mouseenter)=\"onMouseEnter($event)\"\n  (mouseleave)=\"onMouseLeave($event)\"\n>\n  <div\n    class=\"the-table-controls-insert-line\"\n    *ngIf=\"dotWrapperHovered\"\n    [attr.data-dot-type]=\"type\"\n    [ngStyle]=\"{ height: type === 'column' && insertLength, width: type === 'row' && insertLength }\"\n  ></div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }], propDecorators: { type: [{
+                    }, standalone: true, imports: [ThyTooltipDirective, NgClass, NgIf, NgStyle], template: "<div\n  #insertWrapper\n  [thyTooltip]=\"!disabled && tooltipContent\"\n  class=\"the-table-controls-insert-wrapper\"\n  [ngClass]=\"{ disabled: disabled }\"\n  contenteditable=\"false\"\n  (pointerdown)=\"preventDefault($event)\"\n  (pointerup)=\"insert($event)\"\n  (click)=\"preventDefault($event)\"\n  (mouseup)=\"preventDefault($event)\"\n  (mouseenter)=\"onMouseEnter($event)\"\n  (mouseleave)=\"onMouseLeave($event)\"\n>\n  <div\n    class=\"the-table-controls-insert-line\"\n    *ngIf=\"dotWrapperHovered\"\n    [ngStyle]=\"insertLineStyle\"\n  ></div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { type: [{
                 type: Input
             }], at: [{
                 type: Input
@@ -14064,6 +14116,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                 type: Input
             }], parentElement: [{
                 type: Input
+            }], insertWrapper: [{
+                type: ViewChild,
+                args: ['insertWrapper']
             }] } });
 
 class TheTable extends TheBaseElement {
@@ -14219,8 +14274,9 @@ class TheTable extends TheBaseElement {
             }
         });
         setTimeout(() => {
+            const isPrintMode = this.config.mode === TheMode.print;
             this.getWrapperWidthAndLeft();
-            if (this.config.mode === TheMode.print) {
+            if (isPrintMode) {
                 this.columns = calcPrintColumnWidth(this.element);
             }
             this.isFreezeRow = this.freezeRowPipe.transform(this.element, this.tablePluginOptions);
@@ -14231,11 +14287,13 @@ class TheTable extends TheBaseElement {
             this.subscribeCellPositionChange();
             this.listenOnSelectedCells();
             this.listenKeydownEvent();
-            this.listenKeyupEvent();
             this.listenSelectstartEvent();
             this.listenTableContextMenuEvent();
             this.listenTableWrapperScroll();
             this.subscribeScrollContainerScroll(this.tableWrapperLeft);
+            if (isPrintMode) {
+                this.cdr.markForCheck();
+            }
             this.ngZone.runOutsideAngular(() => {
                 merge(this.contextService.containerResized$, this.contextService.windowResized$)
                     .pipe(takeUntil(this.destroy$))
@@ -14369,9 +14427,11 @@ class TheTable extends TheBaseElement {
             const hasColumns = this.element?.columns && this.colgroup?.nativeElement;
             let cellsWidth = [];
             let gridColumns = '';
+            let colControlGridColumns = '';
             if (hasColumns) {
                 cellsWidth = getColumnsWidth(this.colgroup.nativeElement);
                 gridColumns = getGridColumns(headerRow, cellsWidth);
+                colControlGridColumns = getGridColumns(colControl, this.element?.columns.map(item => item.width));
             }
             else {
                 if (this.readonly) {
@@ -14383,17 +14443,17 @@ class TheTable extends TheBaseElement {
                     const percent = +(100 / columnCount).toFixed(4);
                     cellsWidth = new Array(columnCount).fill(percent);
                     gridColumns = getGridColumns(headerRow, cellsWidth, '%');
+                    colControlGridColumns = getGridColumns(colControl, getColumnsWidth(colControl));
                 }
             }
             const tablePadding = 44;
             // 序号列存在时, 表格宽度加序号列宽度
             // 只读模式下, 表格宽度不变
             const tableWidth = !this.readonly && this.element?.options?.numberedColumn ? this.tableWrapperWidth - tablePadding : this.tableWrapperWidth;
-            const stickyRows = this.isInTable ? [colControl, headerRow] : [headerRow];
-            stickyRows.map(item => {
-                this.renderer.setStyle(item, 'width', tableWidth + 'px');
-                this.renderer.setStyle(item, 'grid-template-columns', gridColumns);
-            });
+            this.renderer.setStyle(headerRow, 'width', tableWidth + 'px');
+            this.renderer.setStyle(headerRow, 'grid-template-columns', gridColumns);
+            this.renderer.setStyle(colControl, 'width', tableWidth + 'px');
+            this.renderer.setStyle(colControl, 'grid-template-columns', colControlGridColumns);
         }
     }
     getStickRowElements() {
@@ -14566,7 +14626,7 @@ class TheTable extends TheBaseElement {
             const tr = this.element.children[0];
             const columns = tr.children.map(cell => {
                 return {
-                    width: Number((this.tableWrapperWidth / tr.children.length - tr.children.length).toFixed(2))
+                    width: this.tableWrapperWidth / tr.children.length
                 };
             });
             setNode(this.editor, { columns }, this.element);
@@ -14576,18 +14636,20 @@ class TheTable extends TheBaseElement {
         this.element.children.map((row, index$1) => {
             if (!row.height) {
                 const element = TheEditor.toDOMNode(this.editor, row);
-                let height = getElementHeight(element);
+                const height = getElementHeight(element);
                 setNode(this.editor, { height }, row);
             }
         });
     }
-    transformRowHeight() {
+    transformRowHeight(rowIndex) {
         const rowElements = this.nativeElement.querySelector('tbody').children;
         if (rowElements) {
-            [...rowElements].map((row, index$1) => {
-                let height = getElementHeight(row);
-                setNode(this.editor, { height }, this.element.children[index$1]);
-            });
+            const elements = [...rowElements];
+            const operateRow = elements[rowIndex];
+            if (operateRow) {
+                const height = getElementHeight(operateRow);
+                setNode(this.editor, { height }, this.element.children[rowIndex]);
+            }
         }
     }
     transformColumnsWidth() {
@@ -14750,17 +14812,6 @@ class TheTable extends TheBaseElement {
             });
         });
     }
-    listenKeyupEvent() {
-        this.ngZone.runOutsideAngular(() => {
-            fromEvent(document, 'keyup')
-                .pipe(takeUntil(this.destroy$), filter((e) => !!e))
-                .subscribe(e => {
-                if (e.key === 'Shift') {
-                    this.tableStore.selectCellEnd();
-                }
-            });
-        });
-    }
     listenSelectstartEvent() {
         this.ngZone.runOutsideAngular(() => {
             fromEvent(document, 'selectstart')
@@ -14970,13 +15021,6 @@ class TheTd extends TheBaseElement {
     get tableElement() {
         return this.tableComponent?.theTableElement?.nativeElement;
     }
-    get scrollableElementTop() {
-        const containerElement = this.elementRef.nativeElement.closest(this.editor.options?.scrollContainer || DEFAULT_SCROLL_CONTAINER);
-        if (containerElement) {
-            return containerElement.getBoundingClientRect().top;
-        }
-        return -window.scrollY;
-    }
     get scrollableElementBottom() {
         const containerElement = this.elementRef.nativeElement.closest(this.editor.options?.scrollContainer || DEFAULT_SCROLL_CONTAINER);
         if (containerElement) {
@@ -15192,7 +15236,7 @@ class TheTd extends TheBaseElement {
                 return null;
             }
             return value;
-        }))
+        }), debounceTime(100))
             .subscribe(hoveredCellInfo => {
             if (hoveredCellInfo && hoveredCellInfo.position) {
                 this.hoveredDirection = hoveredCellInfo.position;
@@ -15279,46 +15323,18 @@ class TheTd extends TheBaseElement {
         this.updateOverlayHandleSizeAndOffset();
     }
     updateOverlayHandleSizeAndOffset() {
-        this.overlayRef?.removePanelClass(['the-column-resize-handle-panel', ...this.rowResizeClass]);
-        this.isXAxisHover ? this.updateOverlayHandleColumnSize() : this.updateOverlayHandleRowSize();
-        this.overlayRef?.updatePositionStrategy(this.createPositionStrategy());
+        this.overlayRef?.removePanelClass(this.rowResizeClass);
+        const overlayHandleRect = this.getOverlayHandleRect();
+        this.overlayRef?.updatePositionStrategy(this.createPositionStrategy(overlayHandleRect));
         this.resizeRef.setDirection(this.isXAxisHover ? 'X' : 'Y');
         this.resizeRef.setPosition(this.hoveredDirection);
-    }
-    updateOverlayHandleColumnSize() {
-        let height = 0;
-        const tableElementRect = this.tableElement.getBoundingClientRect();
-        const tableElementTop = tableElementRect.top;
-        const tableElementBottom = tableElementRect.bottom;
-        if (this.getIsStickyTopRow()) {
-            height = tableElementBottom - this.scrollableElementTop - TABLE_INSERT_MASK - TABLE_PADDING + TABLE_BORDER;
-        }
-        else if (tableElementTop < this.scrollableElementTop) {
-            height = this.tableElement.offsetHeight - (this.scrollableElementTop - tableElementTop);
-            const editor = this.elementRef.nativeElement.closest('the-editor');
-            const toolbar = editor.querySelector('.the-global-toolbar');
-            // 处理 toolbar 存在的时候减去内嵌工具栏高度
-            if (toolbar) {
-                height = height - toolbar.offsetHeight;
-                this.overlayRef.hostElement.style.marginTop = `${toolbar.offsetHeight}px`;
-            }
-        }
-        else if (tableElementBottom > this.scrollableElementBottom) {
-            height = this.tableElement.offsetHeight - (tableElementBottom - this.scrollableElementBottom);
+        if (this.isXAxisHover) {
+            this.overlayRef.updateSize({ height: overlayHandleRect.height, width: overlayHandleRect.width, maxHeight: 'inherit' });
         }
         else {
-            height = this.tableElement.offsetHeight;
+            this.overlayRef.addPanelClass(this.rowResizeClass);
+            this.overlayRef.updateSize({ height: overlayHandleRect.height, width: overlayHandleRect.width });
         }
-        this.overlayRef.updateSize({ height, width: OVERLAY_INIT_SIZE, maxHeight: 'inherit' });
-    }
-    getIsStickyTopRow() {
-        const newTableElement = this.tableComponent.nativeElement;
-        return newTableElement.className.includes(TableWithStickyRowClass);
-    }
-    updateOverlayHandleRowSize() {
-        const width = this.tableComponent.tableWrapper.nativeElement.offsetWidth;
-        this.overlayRef.addPanelClass(this.rowResizeClass);
-        this.overlayRef.updateSize({ width: width - 2, height: OVERLAY_INIT_SIZE });
     }
     applySize(deltaSize, previousSize) {
         // update col width and table width
@@ -15339,8 +15355,7 @@ class TheTd extends TheBaseElement {
         // over both cells and extending it down the table as needed.
         const overlayOption = this.isXAxisHover
             ? {
-                width: OVERLAY_INIT_SIZE + 'px',
-                panelClass: 'the-column-resize-handle-panel'
+                width: OVERLAY_INIT_SIZE + 'px'
             }
             : {
                 height: OVERLAY_INIT_SIZE + 'px',
@@ -15354,12 +15369,10 @@ class TheTd extends TheBaseElement {
             ...overlayOption
         });
     }
-    createPositionStrategy() {
-        let offsetY = this.calculateOverlayHandleOffsetY();
-        let offsetX = this.calculateOverlayHandleOffsetX();
+    createPositionStrategy(overlayHandleRect) {
         const position = this.isXAxisHover
-            ? { ...POSITION_MAP[this.hoveredDirection], offsetY }
-            : { ...POSITION_MAP[this.hoveredDirection], offsetX };
+            ? { ...POSITION_MAP[this.hoveredDirection], offsetY: overlayHandleRect?.top || 0 }
+            : { ...POSITION_MAP[this.hoveredDirection], offsetX: overlayHandleRect?.left || 0 };
         return this.overlay
             .position()
             .flexibleConnectedTo(this.elementRef.nativeElement)
@@ -15368,27 +15381,27 @@ class TheTd extends TheBaseElement {
             .withPush(false)
             .withPositions([position]);
     }
-    calculateOverlayHandleOffsetY() {
-        const tableElementTop = this.tableElement.getBoundingClientRect().top;
-        if (this.getIsStickyTopRow()) {
-            /* 设置固定标题行后，第一个表格元素实际是第二行，第二行和第一行偏移的位置差一个 mask 和与顶部 padding 的位置，所以需要补齐 */
-            return (this.scrollableElementTop -
-                this.elementRef.nativeElement.getBoundingClientRect().top +
-                TABLE_INSERT_MASK +
-                TABLE_PADDING -
-                TABLE_BORDER);
-        }
-        if (tableElementTop < this.scrollableElementTop) {
-            return this.scrollableElementTop - this.elementRef.nativeElement.getBoundingClientRect().top;
+    getOverlayHandleRect() {
+        const tableViewportRect = getTableViewportRect(this.editor, this.tableComponent.element);
+        const cellRect = this.elementRef.nativeElement.getBoundingClientRect();
+        const top = tableViewportRect.top - cellRect.top;
+        const left = tableViewportRect.left - cellRect.left;
+        let width = 0;
+        let height = 0;
+        if (this.isXAxisHover) {
+            width = OVERLAY_INIT_SIZE;
+            height = tableViewportRect.bottom - tableViewportRect.top;
         }
         else {
-            return tableElementTop - this.elementRef.nativeElement.getBoundingClientRect().top;
+            width = tableViewportRect.right - tableViewportRect.left;
+            height = OVERLAY_INIT_SIZE;
         }
-    }
-    calculateOverlayHandleOffsetX() {
-        const cellElementLeft = this.elementRef.nativeElement.getBoundingClientRect().left;
-        const tableElementLeft = this.tableElement.getBoundingClientRect().left;
-        return tableElementLeft - cellElementLeft + this.scrollableElementLeft;
+        return {
+            top,
+            left,
+            width,
+            height
+        };
     }
     applyColumnSize(deltaX) {
         const cols = [...this.tableElement.querySelector('colgroup').children];
@@ -15486,7 +15499,6 @@ class TheTd extends TheBaseElement {
     }
     applyRowSize(deltaY) {
         const rows = [...this.tableElement.querySelector('tbody').children];
-        this.resizingStore.storeTableHeight(rows);
         this.resizingStore.initDirection(deltaY, this.isXAxisHover);
         let rowIndex = this.elementRef.nativeElement.parentElement.rowIndex - 1; // subtract thead's tr
         if (this.hoveredDirection === Position.top) {
@@ -15495,69 +15507,29 @@ class TheTd extends TheBaseElement {
         const rowSpan = this.elementRef.nativeElement.rowSpan;
         const bottomRowIndex = rowIndex + (rowSpan - 1) + 1;
         if (deltaY > 0) {
-            this.applyBottomRows(rows, deltaY, bottomRowIndex);
-            if (this.resizingStore.isRestoring(deltaY, this.isXAxisHover)) {
-                deltaY = this.resizingStore.restoreTopRows(deltaY);
-            }
-            if (deltaY > 0) {
-                let initHeight = getElementHeight(rows[rowIndex]);
-                rows[rowIndex].style.height = coerceCssPixelValue(initHeight + deltaY);
-            }
+            this.applyTargetRow(rows, deltaY, bottomRowIndex);
+            const rowHeight = getElementHeight(rows[rowIndex]);
+            rows[rowIndex].style.height = coerceCssPixelValue(rowHeight + deltaY);
         }
         else {
-            let addDeltaY = this.resizingStore.getAddTableHeight(deltaY);
-            const _delta = this.applyTopRows(rows, deltaY, rowIndex);
-            if (_delta === deltaY) {
-                // can not resize
-                return;
-            }
-            deltaY = deltaY - _delta;
-            if (this.resizingStore.isRestoring(deltaY, this.isXAxisHover)) {
-                if (addDeltaY < 0) {
-                    deltaY = this.resizingStore.restoreBottomRows(deltaY);
-                }
-            }
+            this.applyTargetRow(rows, deltaY, rowIndex);
         }
     }
-    applyTopRows(rows, deltaY, rowIndex) {
-        while (deltaY < 0 && rows[rowIndex]) {
+    applyTargetRow(rows, deltaY, rowIndex) {
+        if (deltaY < 0 && rows[rowIndex]) {
+            const minHeightPx = this.tableOptions.minHeightPx;
             const rowOffsetHeight = getElementHeight(rows[rowIndex]);
-            if (rowOffsetHeight > this.tableOptions.minHeightPx) {
-                if (this.resizingStore.isResizing(deltaY, this.isXAxisHover)) {
-                    this.resizingStore.storeResizingRow(rows[rowIndex]);
-                }
-                if (rowOffsetHeight > this.tableOptions.minHeightPx + Math.abs(deltaY)) {
-                    rows[rowIndex].style.height = coerceCssPixelValue(rowOffsetHeight - Math.abs(deltaY));
-                    deltaY = 0;
-                }
-                else {
-                    deltaY += rowOffsetHeight - this.tableOptions.minHeightPx;
-                    rows[rowIndex].style.height = coerceCssPixelValue(this.tableOptions.minHeightPx);
-                }
-            }
-            rowIndex--;
-        }
-        return deltaY;
-    }
-    applyBottomRows(rows, deltaY, rowIndex) {
-        while (rows[rowIndex] && deltaY > 0) {
-            const rowOffsetHeight = getElementHeight(rows[rowIndex]);
-            if (rowOffsetHeight > this.tableOptions.minHeightPx) {
-                if (this.resizingStore.isResizing(deltaY, this.isXAxisHover)) {
-                    this.resizingStore.storeResizingRow(rows[rowIndex]);
-                }
-                if (rowOffsetHeight > deltaY + this.tableOptions.minHeightPx) {
-                    rows[rowIndex].style.height = coerceCssPixelValue(rowOffsetHeight - deltaY);
-                    deltaY = 0;
+            if (rowOffsetHeight > minHeightPx) {
+                let currentHeight;
+                if (rowOffsetHeight > minHeightPx + Math.abs(deltaY)) {
+                    currentHeight = rowOffsetHeight - Math.abs(deltaY);
                 }
                 else {
-                    deltaY -= rowOffsetHeight - this.tableOptions.minHeightPx;
-                    rows[rowIndex].style.height = coerceCssPixelValue(this.tableOptions.minHeightPx);
+                    currentHeight = minHeightPx;
                 }
+                rows[rowIndex].style.height = coerceCssPixelValue(currentHeight);
             }
-            rowIndex++;
         }
-        return deltaY;
     }
     //#region
     ngOnDestroy() {
@@ -16678,7 +16650,7 @@ class TheEditorComponent {
                 return;
             }
             if (isKeyHotkey('mod+a', event) && !event.defaultPrevented) {
-                this.handleSelectAll();
+                this.handleSelectAll(event);
             }
         };
         this.onClick = (event) => {
@@ -16958,8 +16930,8 @@ class TheEditorComponent {
     mousedown(event) {
         this.editor.mousedown(event);
     }
-    handleSelectAll() {
-        let node;
+    handleSelectAll(event) {
+        let node = null;
         if (!this.editor.selection) {
             setEndSelection(this.editor);
         }
@@ -16983,7 +16955,15 @@ class TheEditorComponent {
             }
         }
         if (!node) {
-            Transforms.select(this.editor, []);
+            let range = Editor.range(this.editor, []);
+            // If the first element is of block-card type,
+            // clicking delete does not trigger the underlying beforeinput event,
+            // resulting in ineffective deletion #WIK-15396.
+            if (this.editor.isBlockCard(this.editor.children[0])) {
+                const [anchor, focus] = Range.edges(range, { reverse: true });
+                range = { anchor, focus };
+            }
+            Transforms.select(this.editor, range);
         }
         event.preventDefault();
         return;
@@ -17349,5 +17329,5 @@ const withTestPlugin = (plugins, initValue) => {
  * Generated bundle index. Do not edit.
  */
 
-export { ALIGN_BLOCK_TYPES, A_TAG_REL_ATTR, AlignEditor, Alignment, BLOCK_DELETE_BACKWARD_TYPES, BasicTest, BlockquoteEditor, CLIPBOARD_FORMAT_KEY, CODEMIRROR_PADDING_TOP, CODE_MODES, CONTAINER_BLOCKS, CONTROL_KEY, CodeEditor, ColorEditor, ColumnResizeNotifierSource, ColumnResizingStore, DEFAULT_LANGUAGE, DEFAULT_SCROLL_CONTAINER, DISABLED_OPERATE_TYPES, DataTransferFaker, DefaultElementOptions, DefaultGlobalToolbarDefinition, DefaultInlineToolbarDefinition, DefaultPluginMenu, DropdownMode, ELEMENT_UNIQUE_ID, EditorPresetConfigFactoryMock, ElementKinds, ErrorCodes, FontSizeTypes, FontSizes, HEADING_TYPES, HeadingEditor, HoveredCellInfo, HrEditor, IS_MAC, ImageEditor, IndentEditor, Indents, InlineCodeEditor, LINK_DEFAULT_TEXT, LIST_BLOCK_TYPES, LayoutTypes, LinkEditor, ListEditor, MarkEditor, MarkProps, MarkTypes, MentionEditor, PICTURE_ACCEPTED_UPLOAD_MIME, PICTURE_ACCEPTED_UPLOAD_SIZE, PluginKeys, PluginMenuIcons, PluginMenuSvgs, Position, QuickInsertEditor, ResizeRef, SLA_TABLE_CELL_SELECTOR, SLA_TABLE_SELECTOR, STANDARD_HEADING_TYPES, ScrollDirection, SpecialBackgroundColor, TAB_SPACE, THE_EDITOR_BG_COLOR, THE_EDITOR_COLOR, THE_EDITOR_CONVERSION_HINT_REF, THE_EDITOR_ORIGIN_ANCHOR, THE_EDITOR_POPOVER_REF, THE_EDITOR_PREVIOUS_SELECTION, THE_EDITOR_UUID, THE_INLINE_TOOLBAR_TYPES, THE_LISTBOX_PARENT_GROUP_TOKEN, THE_LISTBOX_PARENT_OPTION_TOKEN, THE_LISTBOX_TOKEN, THE_MODE_PROVIDER, THE_MODE_TOKEN, THE_PLUGIN_MENU_REF, THE_PRESET_CONFIG_TOKEN, THE_UPLOAD_SERVICE_TOKEN, TableCellEventDispatcher, TableEditor, TableHeaderBackgroundColor, TablePosition, TheBaseElement, TheBaseSuggestion, TheBaseToolbarDropdown, TheBaseToolbarItem, TheColumnResizeDirective, TheColumnResizeOverlayHandle, TheContextMenu, TheContextService, TheConversionHint, TheDataMode, TheDefaultElement, TheEditor, TheEditorComponent, TheEditorModule, TheImage, TheInlineToolbar, TheListboxDirective, TheListboxGroupDirective, TheListboxOptionDirective, TheMode, TheModeConfig, ThePluginMenu, ThePluginMenuComponent, ThePluginMenuItemType, ThePreventDefaultDirective, index$1 as TheQueries, TheTableSelect, TheTemplate, TheText, TheToolbarComponent, TheToolbarDropdown, TheToolbarGroup, TheToolbarGroupToken, TheToolbarItem, TheToolbarService, index as TheTransforms, TodoItemEditor, ToolbarActionTypes, ToolbarAlignment, ToolbarItemType, ToolbarMoreGroup, VOID_BLOCK_TYPES, VerticalAlignEditor, VerticalAlignment, ZERO_WIDTH_CHAR, autoFocus, base64toBlob, bottomLeftPosition, buildPluginMenu, buildPluginMenuItemMap, calcPrintColumnWidth, calcSpanForColumn, calcSpanForRow, calculateHeaderRowHeight, calculateRowControls, coercePixelsFromCssValue, combinePlugins, copyNode, copyNodeForSafari, createCell, createEmptyContent, createEmptyParagraph, createMentionPlugin, createPluginFactory, createRow, createTable, createTablePosition, createTest1Plugin, createTestPlugin, createToolbar, createVerticalAlignPlugin, customPluginMock, customPluginMockKey, dataDeserialize, dataSerializing, deleteElementKey, errorImageUrlMock, extractFragment, filterTextFormat, fixBlockWithoutParagraph, fixBlockWithoutText, flattenDeepPlugins, getCellPositionsFromRange, getColsTotalWidth, getColumnsWidth, getDirtyElements, getEditorUUID, getElementClassByPrefix, getElementHeight, getElementWidth, getEndBlock, getGridColumns, getMode, getNextCell, getOriginCell, getPlugin, getPluginOptions, getPlugins, getRowsTotalHeight, getSelectCellNode, getSelectedCellPositions, getStartBlock, getTableByCell, getTableByRow, getToolbarClass, hasHeaderRow, headingOptions, htmlToTheia, idCreator, inValidTypes, initializeDefaultMenuIcons, insertDataByInvalidType, internalPlugins, isCleanEmptyParagraph, isColorIndicator, isColorInput, isColorPanel, isDirectionKeydown, isInside, isMobileMode, isPrintMode, isPureEmptyParagraph, isRangeInTable, isRectangularInTableCells, isSelectedAllCell, isSelectionInTable, isVirtualKey, matchOptions, mergeArray, mergeDeepPlugins, mergeElementOptions, mergeOptions, nestedStructureByKey, normalizeValue, originOptions, plainToTheia, pluginKey, pluginKey1, pluginsByKey, reSelection, recursionNodes, refocus, scrollIntoView, setEditorUUID, theTethysIconRegistryFaker, topLeftPosition, uniqueCellPosition, updatePopoverPosition, useElementStyle, withMention, withTestPlugin, withTheia };
+export { ALIGN_BLOCK_TYPES, A_TAG_REL_ATTR, AlignEditor, Alignment, BLOCK_DELETE_BACKWARD_TYPES, BasicTest, BlockquoteEditor, CLIPBOARD_FORMAT_KEY, CODEMIRROR_PADDING_TOP, CODE_MODES, CONTAINER_BLOCKS, CONTROL_KEY, CodeEditor, ColorEditor, ColumnResizeNotifierSource, ColumnResizingStore, DEFAULT_LANGUAGE, DEFAULT_SCROLL_CONTAINER, DISABLED_OPERATE_TYPES, DataTransferFaker, DefaultElementOptions, DefaultGlobalToolbarDefinition, DefaultInlineToolbarDefinition, DefaultPluginMenu, DropdownMode, ELEMENT_UNIQUE_ID, EditorPresetConfigFactoryMock, ElementKinds, ErrorCodes, FontSizeTypes, FontSizes, HEADING_TYPES, HeadingEditor, HoveredCellInfo, HrEditor, IS_MAC, ImageEditor, IndentEditor, Indents, InlineCodeEditor, LINK_DEFAULT_TEXT, LIST_BLOCK_TYPES, LayoutTypes, LinkEditor, ListEditor, MarkEditor, MarkProps, MarkTypes, MentionEditor, PICTURE_ACCEPTED_UPLOAD_MIME, PICTURE_ACCEPTED_UPLOAD_SIZE, PluginKeys, PluginMenuIcons, PluginMenuSvgs, Position, QuickInsertEditor, ResizeRef, SLA_TABLE_CELL_SELECTOR, SLA_TABLE_SELECTOR, STANDARD_HEADING_TYPES, ScrollDirection, SpecialBackgroundColor, TAB_SPACE, THE_EDITOR_BG_COLOR, THE_EDITOR_COLOR, THE_EDITOR_CONVERSION_HINT_REF, THE_EDITOR_ORIGIN_ANCHOR, THE_EDITOR_POPOVER_REF, THE_EDITOR_PREVIOUS_SELECTION, THE_EDITOR_UUID, THE_LISTBOX_PARENT_GROUP_TOKEN, THE_LISTBOX_PARENT_OPTION_TOKEN, THE_LISTBOX_TOKEN, THE_MODE_PROVIDER, THE_MODE_TOKEN, THE_PLUGIN_MENU_REF, THE_PRESET_CONFIG_TOKEN, THE_UPLOAD_SERVICE_TOKEN, TableCellEventDispatcher, TableEditor, TableHeaderBackgroundColor, TablePosition, TheBaseElement, TheBaseSuggestion, TheBaseToolbarDropdown, TheBaseToolbarItem, TheColumnResizeDirective, TheColumnResizeOverlayHandle, TheContextMenu, TheContextService, TheConversionHint, TheDataMode, TheDefaultElement, TheEditor, TheEditorComponent, TheEditorModule, TheImage, TheInlineToolbar, TheListboxDirective, TheListboxGroupDirective, TheListboxOptionDirective, TheMode, TheModeConfig, ThePluginMenu, ThePluginMenuComponent, ThePluginMenuItemType, ThePreventDefaultDirective, index$1 as TheQueries, TheTableSelect, TheTemplate, TheText, TheToolbarComponent, TheToolbarDropdown, TheToolbarGroup, TheToolbarGroupToken, TheToolbarItem, TheToolbarService, index as TheTransforms, TodoItemEditor, ToolbarActionTypes, ToolbarAlignment, ToolbarItemType, ToolbarMoreGroup, VOID_BLOCK_TYPES, VerticalAlignEditor, VerticalAlignment, ZERO_WIDTH_CHAR, autoFocus, base64toBlob, bottomLeftPosition, buildPluginMenu, buildPluginMenuItemMap, buildQuickInsertMenus, calcPrintColumnWidth, calcSpanForColumn, calcSpanForRow, calculateHeaderRowHeight, calculateRowControls, coercePixelsFromCssValue, combinePlugins, copyNode, copyNodeForSafari, createCell, createEmptyContent, createEmptyParagraph, createMentionPlugin, createPluginFactory, createRow, createTable, createTablePosition, createTest1Plugin, createTestPlugin, createToolbar, createVerticalAlignPlugin, customPluginMock, customPluginMockKey, dataDeserialize, dataSerializing, deleteElementKey, errorImageUrlMock, extractFragment, filterTextFormat, fixBlockWithoutParagraph, fixBlockWithoutText, flattenDeepPlugins, getCellPositionsFromRange, getColsTotalWidth, getColumnsWidth, getDirtyElements, getEditorScrollContainer, getEditorUUID, getElementClassByPrefix, getElementHeight, getElementWidth, getEndBlock, getGridColumns, getMode, getNextCell, getOriginCell, getPlugin, getPluginOptions, getPlugins, getRowsTotalHeight, getSelectCellNode, getSelectedCellPositions, getStartBlock, getTableByCell, getTableByRow, getToolbarClass, hasHeaderRow, headingOptions, htmlToTheia, idCreator, inValidTypes, initializeDefaultMenuIcons, insertDataByInvalidType, internalPlugins, isCleanEmptyParagraph, isColorIndicator, isColorInput, isColorPanel, isDirectionKeydown, isInside, isMobileMode, isPrintMode, isPureEmptyParagraph, isRangeInTable, isRectangularInTableCells, isSelectedAllCell, isSelectionInTable, isVirtualKey, matchOptions, mergeArray, mergeDeepPlugins, mergeElementOptions, mergeOptions, nestedStructureByKey, normalizeValue, originOptions, plainToTheia, pluginKey, pluginKey1, pluginsByKey, reSelection, recursionNodes, refocus, scrollIntoView, setEditorUUID, theTethysIconRegistryFaker, topLeftPosition, uniqueCellPosition, updatePopoverPosition, useElementStyle, withMention, withTestPlugin, withTheia };
 //# sourceMappingURL=worktile-theia.mjs.map