@worktile/theia 17.2.3 → 17.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. package/components/column-resize/column-resize.directive.d.ts +5 -3
  2. package/components/column-resize/column-resize.scss +0 -7
  3. package/components/column-resize/overlay-handle.component.d.ts +4 -6
  4. package/components/column-resize/resizing.store.d.ts +0 -8
  5. package/components/inline-toolbar/inline-toolbar.component.d.ts +1 -1
  6. package/constants/node-types.d.ts +0 -1
  7. package/core/utils/plugin-menu.d.ts +8 -0
  8. package/esm2022/components/column-resize/column-resize.directive.mjs +28 -9
  9. package/esm2022/components/column-resize/overlay-handle.component.mjs +12 -16
  10. package/esm2022/components/column-resize/resizing.store.mjs +3 -66
  11. package/esm2022/components/inline-toolbar/inline-toolbar.component.mjs +13 -22
  12. package/esm2022/components/plugin-menu/plugin-menu.component.mjs +20 -5
  13. package/esm2022/constants/default.mjs +2 -2
  14. package/esm2022/constants/node-types.mjs +1 -2
  15. package/esm2022/core/utils/plugin-menu.mjs +31 -1
  16. package/esm2022/interfaces/plugins/plugin-menu.mjs +2 -2
  17. package/esm2022/interfaces/plugins/plugins.mjs +1 -1
  18. package/esm2022/plugins/common/block-card.plugin.mjs +12 -2
  19. package/esm2022/plugins/image/image.component.mjs +2 -2
  20. package/esm2022/plugins/image/image.plugin.mjs +2 -2
  21. package/esm2022/plugins/inline-code/inline-code.plugin.mjs +3 -2
  22. package/esm2022/plugins/link/link.plugin.mjs +4 -3
  23. package/esm2022/plugins/quick-insert/quick-insert.editor.mjs +4 -2
  24. package/esm2022/plugins/quick-insert/quick-insert.plugin.mjs +3 -1
  25. package/esm2022/plugins/table/components/insert-mark/insert-mark.component.mjs +41 -17
  26. package/esm2022/plugins/table/components/row/row.component.mjs +2 -2
  27. package/esm2022/plugins/table/components/table.component.mjs +17 -25
  28. package/esm2022/plugins/table/components/td/td.component.mjs +47 -125
  29. package/esm2022/plugins/table/table.types.mjs +1 -1
  30. package/esm2022/plugins/table/utils/table-viewport.mjs +41 -0
  31. package/esm2022/queries/anchor-block-entry.mjs +3 -3
  32. package/esm2022/queries/anchor-block.mjs +3 -3
  33. package/esm2022/queries/get-block-card-cursor.mjs +6 -2
  34. package/esm2022/queries/is-block-card-cursor.mjs +7 -2
  35. package/esm2022/utils/index.mjs +2 -2
  36. package/esm2022/utils/scrolling.mjs +43 -0
  37. package/fesm2022/worktile-theia.mjs +283 -296
  38. package/fesm2022/worktile-theia.mjs.map +1 -1
  39. package/interfaces/editor.d.ts +3 -3
  40. package/interfaces/plugins/plugins.d.ts +2 -1
  41. package/package.json +1 -1
  42. package/plugins/table/components/insert-mark/insert-mark.component.d.ts +12 -4
  43. package/plugins/table/components/table.component.d.ts +1 -2
  44. package/plugins/table/components/table.component.scss +4 -18
  45. package/plugins/table/components/td/td.component.d.ts +9 -10
  46. package/plugins/table/table.types.d.ts +2 -2
  47. package/plugins/table/utils/table-viewport.d.ts +8 -0
  48. package/queries/anchor-block-entry.d.ts +2 -2
  49. package/queries/anchor-block.d.ts +2 -2
  50. package/queries/get-block-card-cursor.d.ts +2 -2
  51. package/queries/is-block-card-cursor.d.ts +2 -2
  52. package/styles/editor.scss +7 -0
  53. package/utils/index.d.ts +1 -1
  54. package/utils/{scroll-into-view.d.ts → scrolling.d.ts} +1 -0
  55. package/esm2022/utils/scroll-into-view.mjs +0 -38
@@ -25,7 +25,8 @@ import { debounceTime, takeUntil, startWith, distinctUntilChanged, skip, map as
25
25
  import * as i2$1 from '@angular/forms';
26
26
  import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
27
27
  import { ScrollToService } from 'ngx-tethys/core';
28
- import { ThyEmpty } from 'ngx-tethys/empty';
28
+ import * as i3 from 'ngx-tethys/empty';
29
+ import { ThyEmptyModule } from 'ngx-tethys/empty';
29
30
  import { ThyInputSearch, ThyInputDirective } from 'ngx-tethys/input';
30
31
  import { isKeyHotkey } from 'is-hotkey';
31
32
  import isUrl from 'is-url';
@@ -34,8 +35,8 @@ import { marked } from 'marked';
34
35
  import { ThyColorPickerDirective } from 'ngx-tethys/color-picker';
35
36
  import { ThyInputNumber } from 'ngx-tethys/input-number';
36
37
  import { ThyEnterDirective, ThyStopPropagationDirective, ThyAutofocusDirective } from 'ngx-tethys/shared';
37
- import { coerceCssPixelValue } from '@angular/cdk/coercion';
38
38
  import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
39
+ import { coerceCssPixelValue } from '@angular/cdk/coercion';
39
40
  import * as i1$2 from 'ngx-tethys/image';
40
41
  import { ThyImageService, ThyImageDirective, ThyImageGroup } from 'ngx-tethys/image';
41
42
  import * as i6 from 'ng-codemirror';
@@ -51,7 +52,7 @@ import { PortalInjector, ComponentPortal } from '@angular/cdk/portal';
51
52
  import * as i1$3 from '@angular/platform-browser';
52
53
  import * as i2$3 from '@angular/common/http';
53
54
 
54
- const PICTURE_ACCEPTED_UPLOAD_MIME = ['image/png', 'image/jpeg', 'image/gif', 'image/bmp'];
55
+ const PICTURE_ACCEPTED_UPLOAD_MIME = ['image/png', 'image/jpeg', 'image/gif', 'image/bmp', 'image/svg+xml'];
55
56
  const PICTURE_ACCEPTED_UPLOAD_SIZE = 50;
56
57
  const A_TAG_REL_ATTR = 'noopener noreferrer nofollow external ugc';
57
58
  const LINK_DEFAULT_TEXT = '链接';
@@ -183,7 +184,6 @@ const MarkProps = [
183
184
  MarkTypes.underline,
184
185
  MarkTypes.fontSize
185
186
  ];
186
- const THE_INLINE_TOOLBAR_TYPES = [ElementKinds.default, ElementKinds.listItem, ElementKinds.checkItem];
187
187
  const STANDARD_HEADING_TYPES = [
188
188
  ElementKinds.heading_1,
189
189
  ElementKinds.heading_2,
@@ -674,17 +674,25 @@ const createPluginFactory = (defaultPlugin) => (override, overrideByKey = {}) =>
674
674
  return cloneDeep(defaultPlugin);
675
675
  };
676
676
 
677
- const getBlockCardCenterCursor = (editor) => {
677
+ const getBlockCardCenterCursor = (editor, at) => {
678
+ if (at) {
679
+ const point = Editor.point(editor, at);
680
+ return Editor.start(editor, point.path);
681
+ }
678
682
  return Editor.start(editor, editor.selection.anchor.path);
679
683
  };
680
684
 
681
- const isBlockCardCursor = (editor) => {
685
+ const isBlockCardCursor = (editor, at) => {
686
+ if (at) {
687
+ const point = at && Editor.point(editor, at);
688
+ return point.offset < 0;
689
+ }
682
690
  return editor.selection.anchor.offset < 0;
683
691
  };
684
692
 
685
693
  const anchorBlockEntry = (editor, at) => {
686
- if (!at && isBlockCardCursor(editor)) {
687
- at = getBlockCardCenterCursor(editor);
694
+ if (isBlockCardCursor(editor, at)) {
695
+ at = getBlockCardCenterCursor(editor, at);
688
696
  }
689
697
  return Editor.above(editor, {
690
698
  match: n => Element.isElement(n) && Editor.isBlock(editor, n),
@@ -692,8 +700,8 @@ const anchorBlockEntry = (editor, at) => {
692
700
  });
693
701
  };
694
702
 
695
- const anchorBlock = (editor) => {
696
- const entry = anchorBlockEntry(editor, editor.selection.anchor);
703
+ const anchorBlock = (editor, at) => {
704
+ const entry = anchorBlockEntry(editor, at);
697
705
  return entry ? entry[0] : null;
698
706
  };
699
707
 
@@ -1841,7 +1849,7 @@ const ThePluginMenu = {
1841
1849
  }
1842
1850
  },
1843
1851
  isMenuItem(value) {
1844
- if (value.key) {
1852
+ if (value?.key) {
1845
1853
  return true;
1846
1854
  }
1847
1855
  else {
@@ -2250,6 +2258,11 @@ const scrollIntoView = (editor, scrollContainer) => {
2250
2258
  }
2251
2259
  previousHeight = currentHeight;
2252
2260
  };
2261
+ const getEditorScrollContainer = (editor, scrollContainerSelector) => {
2262
+ const selector = scrollContainerSelector || editor.options.scrollContainer || DEFAULT_SCROLL_CONTAINER;
2263
+ const editable = AngularEditor.toDOMNode(editor, editor);
2264
+ return editable.closest(selector);
2265
+ };
2253
2266
 
2254
2267
  const topLeftPosition = {
2255
2268
  originX: 'start',
@@ -2616,6 +2629,34 @@ const buildPluginMenuItemMap = (editor) => {
2616
2629
  });
2617
2630
  return map;
2618
2631
  };
2632
+ /**
2633
+ * 构建当前位置允许插入的元素菜单
2634
+ * @param editor 编辑器对象
2635
+ * @param menus 插入菜单
2636
+ * @returns 返回允许插入的元素菜单
2637
+ */
2638
+ const buildQuickInsertMenus = (editor, menus) => {
2639
+ const [_, path] = getBlockAbove(editor);
2640
+ const [parentNode] = getParent(editor, path);
2641
+ const isContainerNode = isContainer(editor, parentNode);
2642
+ const menuItemsMap = buildPluginMenuItemMap(editor);
2643
+ const pluginMenu = buildPluginMenu(menuItemsMap, menus);
2644
+ const quickMenuConfig = [];
2645
+ pluginMenu.forEach((item) => {
2646
+ const allowParentTypes = getPluginOptions(editor, item.key)?.allowParentTypes;
2647
+ const isInlineElement = getPluginOptions(editor, item.key)?.isInline || false;
2648
+ const isAllowParent = isContainerNode && allowParentTypes ? allowParentTypes.includes(parentNode?.type) : true;
2649
+ const hasChildren = item?.children && item?.children?.length > 0;
2650
+ if (!item?.type) {
2651
+ quickMenuConfig.push(item);
2652
+ }
2653
+ else if (isInlineElement || isAllowParent || hasChildren) {
2654
+ const menu = menus.find(menu => menu === item.key);
2655
+ quickMenuConfig.push(menu);
2656
+ }
2657
+ });
2658
+ return quickMenuConfig;
2659
+ };
2619
2660
 
2620
2661
  const withTheia = (editor, plugins = []) => {
2621
2662
  let e = editor;
@@ -6571,10 +6612,11 @@ const QuickInsertEditor = {
6571
6612
  const overlay = editor.injector.get(Overlay);
6572
6613
  const viewContainerRef = editor.injector.get(ViewContainerRef);
6573
6614
  const thyPopover = editor.injector.get(ThyPopover);
6615
+ const pluginMenus = buildQuickInsertMenus(editor, editor?.options?.menu);
6574
6616
  const pluginMenuRef = thyPopover.open(ThePluginMenuComponent, {
6575
6617
  initialState: {
6576
6618
  editor,
6577
- thePluginMenu: editor?.options?.menu
6619
+ thePluginMenu: pluginMenus
6578
6620
  },
6579
6621
  origin,
6580
6622
  viewContainerRef: viewContainerRef,
@@ -6967,6 +7009,20 @@ class ThePluginMenuComponent {
6967
7009
  if (this.keyWords && this.groupMenu.length > 0) {
6968
7010
  this.groupMenu.unshift(this.searchGroup);
6969
7011
  }
7012
+ if (!this.keyWords) {
7013
+ const menus = [...this.groupMenu];
7014
+ this.groupMenu = menus.filter((item, index) => {
7015
+ const isGroupMenu = ThePluginMenu.isMenuGroup(item);
7016
+ const nextMenu = menus[index + 1];
7017
+ const isLastMenu = index === menus.length - 1;
7018
+ if ((nextMenu && isGroupMenu && ThePluginMenu.isMenuGroup(nextMenu)) ||
7019
+ (isLastMenu && isGroupMenu) ||
7020
+ (item?.children && item?.children?.length <= 0)) {
7021
+ return false;
7022
+ }
7023
+ return true;
7024
+ });
7025
+ }
6970
7026
  this.cdr.markForCheck();
6971
7027
  }
6972
7028
  handleItemSelection(menuItem) {
@@ -7021,7 +7077,7 @@ class ThePluginMenuComponent {
7021
7077
  return item?.key ?? index;
7022
7078
  }
7023
7079
  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 }); }
7024
- 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"] }] }); }
7080
+ 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"] }] }); }
7025
7081
  }
7026
7082
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ThePluginMenuComponent, decorators: [{
7027
7083
  type: Component,
@@ -7029,9 +7085,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
7029
7085
  NgIf,
7030
7086
  NgFor,
7031
7087
  FormsModule,
7088
+ ThyEmptyModule,
7032
7089
  TheTableSelect,
7033
7090
  ThyIcon,
7034
- ThyEmpty,
7035
7091
  ThyAction,
7036
7092
  ThyDivider,
7037
7093
  ThyInputSearch,
@@ -7046,7 +7102,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
7046
7102
  TheListboxOptionDirective,
7047
7103
  ThePreventDefaultDirective,
7048
7104
  ThyDropdownMenuItemDirective
7049
- ], 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" }]
7105
+ ], 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" }]
7050
7106
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1.ThyPopoverRef }], propDecorators: { dropdownTriggers: [{
7051
7107
  type: ViewChildren,
7052
7108
  args: ['dropdownTriggers', { read: ThyDropdownDirective }]
@@ -7285,42 +7341,35 @@ class TheInlineToolbar {
7285
7341
  }
7286
7342
  updateInlineToolbar() {
7287
7343
  const inlineToolbar = this.elementRef.nativeElement.firstElementChild;
7288
- if (!this.editor.selection) {
7289
- inlineToolbar.removeAttribute('style');
7344
+ if (!inlineToolbar) {
7290
7345
  return;
7291
7346
  }
7292
- const anchorBlock$1 = anchorBlock(this.editor);
7293
- if (!inlineToolbar || !anchorBlock$1) {
7294
- return;
7295
- }
7296
- const { editor } = this;
7297
- const { selection } = editor;
7347
+ const { selection } = this.editor;
7298
7348
  if (!selection ||
7299
- !AngularEditor.isFocused(editor) ||
7300
- Range.isCollapsed(selection) ||
7301
- Editor.string(editor, selection) === '') {
7349
+ (selection &&
7350
+ (!AngularEditor.isFocused(this.editor) ||
7351
+ Range.isCollapsed(selection) ||
7352
+ Editor.string(this.editor, selection) === ''))) {
7302
7353
  inlineToolbar.removeAttribute('style');
7303
7354
  return;
7304
7355
  }
7305
- if (!THE_INLINE_TOOLBAR_TYPES.includes(anchorBlock$1.type)) {
7306
- return;
7307
- }
7308
7356
  const native = window.getSelection();
7309
7357
  if (native.type !== 'None') {
7310
7358
  const range = native.getRangeAt(0);
7311
7359
  this.updatePosition(inlineToolbar, range);
7312
7360
  this.inlineToolbar?.selectionChange(this.editor);
7361
+ this.cdr.markForCheck();
7313
7362
  }
7314
- this.cdr.detectChanges();
7315
7363
  }
7316
7364
  updatePosition(toolbarElement, range) {
7317
7365
  let boundary = range.getBoundingClientRect();
7318
- if (!boundary || (boundary.height === 0 && boundary.width === 0 && range.startContainer === range.endContainer)) {
7319
- if (range.startContainer.nodeType === 1 && range.startContainer.querySelector('img')) {
7320
- boundary = range.startContainer.querySelector('img').getBoundingClientRect();
7366
+ const startContainer = range.startContainer;
7367
+ if (!boundary || (boundary.height === 0 && boundary.width === 0 && startContainer === range.endContainer)) {
7368
+ if (startContainer.nodeType === 1 && startContainer.querySelector('img')) {
7369
+ boundary = startContainer.querySelector('img').getBoundingClientRect();
7321
7370
  }
7322
7371
  else {
7323
- boundary = range.startContainer.getBoundingClientRect();
7372
+ boundary = startContainer.getBoundingClientRect();
7324
7373
  }
7325
7374
  }
7326
7375
  const editableElement = this.contextService.getEditableElement();
@@ -7680,7 +7729,7 @@ class ResizeRef {
7680
7729
  }
7681
7730
 
7682
7731
  class TheColumnResizeOverlayHandle {
7683
- constructor(elementRef, viewContainerRef, cdr, ngZone, resizeRef, eventDispatcher, document, resizeNotifier) {
7732
+ constructor(elementRef, viewContainerRef, cdr, ngZone, resizeRef, eventDispatcher, document, resizeNotifier, destroyRef) {
7684
7733
  this.elementRef = elementRef;
7685
7734
  this.viewContainerRef = viewContainerRef;
7686
7735
  this.cdr = cdr;
@@ -7689,7 +7738,7 @@ class TheColumnResizeOverlayHandle {
7689
7738
  this.eventDispatcher = eventDispatcher;
7690
7739
  this.document = document;
7691
7740
  this.resizeNotifier = resizeNotifier;
7692
- this.destroyed = new ReplaySubject();
7741
+ this.destroyRef = destroyRef;
7693
7742
  }
7694
7743
  ngAfterViewInit() {
7695
7744
  this._listenForMouseEvents();
@@ -7703,15 +7752,14 @@ class TheColumnResizeOverlayHandle {
7703
7752
  }
7704
7753
  _listenForMouseEvents() {
7705
7754
  this.ngZone.runOutsideAngular(() => {
7706
- const takeUntilDestroyed = takeUntil(this.destroyed);
7707
7755
  fromEvent(this.elementRef.nativeElement, 'mouseenter')
7708
- .pipe(takeUntilDestroyed, mapTo(this.resizeRef.origin.nativeElement))
7756
+ .pipe(mapTo(this.resizeRef.origin.nativeElement), takeUntilDestroyed(this.destroyRef))
7709
7757
  .subscribe(cell => {
7710
7758
  this.eventDispatcher.tableCellHovered.next({ cell, position: this.resizeRef.position });
7711
7759
  this.resizeRef.updateSizeAndOffset();
7712
7760
  });
7713
7761
  fromEvent(this.elementRef.nativeElement, 'mousedown')
7714
- .pipe(takeUntilDestroyed)
7762
+ .pipe(takeUntilDestroyed(this.destroyRef))
7715
7763
  .subscribe(mousedownEvent => {
7716
7764
  mousedownEvent.preventDefault();
7717
7765
  this._dragStarted(mousedownEvent);
@@ -7735,10 +7783,10 @@ class TheColumnResizeOverlayHandle {
7735
7783
  let size = isXAxis ? initialWidthSize : initialHeightSize;
7736
7784
  this.updateResizeActive(true);
7737
7785
  this._notifyResizeStarted();
7738
- mouseup.pipe(takeUntil(escape), takeUntil(this.destroyed)).subscribe(({ clientX, clientY }) => {
7786
+ mouseup.pipe(takeUntil(escape), takeUntilDestroyed(this.destroyRef)).subscribe(({ clientX, clientY }) => {
7739
7787
  this._notifyResizeEnded(size, isXAxis ? clientX !== startX : clientY !== startY);
7740
7788
  });
7741
- escape.pipe(takeUntil(mouseup), takeUntil(this.destroyed)).subscribe(() => {
7789
+ escape.pipe(takeUntil(mouseup), takeUntilDestroyed(this.destroyRef)).subscribe(() => {
7742
7790
  this._notifyResizeEnded(size);
7743
7791
  });
7744
7792
  mousemove
@@ -7750,7 +7798,7 @@ class TheColumnResizeOverlayHandle {
7750
7798
  }), startWith({
7751
7799
  clientX: startX,
7752
7800
  clientY: startY
7753
- }), distinctUntilChanged(), pairwise(), takeUntil(mouseup), takeUntil(escape), takeUntil(this.destroyed))
7801
+ }), distinctUntilChanged(), pairwise(), takeUntil(mouseup), takeUntil(escape), takeUntilDestroyed(this.destroyRef))
7754
7802
  .subscribe(([prev, curr]) => {
7755
7803
  let deltaSize = isXAxis ? curr.clientX - prev.clientX : curr.clientY - prev.clientY;
7756
7804
  this.resizeNotifier.triggerResize.next({
@@ -7799,11 +7847,7 @@ class TheColumnResizeOverlayHandle {
7799
7847
  this.resizeNotifier.resizeStarted.next(sizeMessage);
7800
7848
  });
7801
7849
  }
7802
- ngOnDestroy() {
7803
- this.destroyed.next();
7804
- this.destroyed.complete();
7805
- }
7806
- 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 }); }
7850
+ 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 }); }
7807
7851
  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 }); }
7808
7852
  }
7809
7853
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheColumnResizeOverlayHandle, decorators: [{
@@ -7817,12 +7861,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
7817
7861
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: ResizeRef }, { type: TableCellEventDispatcher }, { type: undefined, decorators: [{
7818
7862
  type: Inject,
7819
7863
  args: [DOCUMENT]
7820
- }] }, { type: ColumnResizeNotifierSource }] });
7864
+ }] }, { type: ColumnResizeNotifierSource }, { type: i0.DestroyRef }] });
7821
7865
 
7822
7866
  class ColumnResizingStore {
7823
7867
  constructor() {
7824
7868
  this.resizeCols = [];
7825
- this.resizeRows = [];
7826
7869
  }
7827
7870
  storeResizingCol(colElement) {
7828
7871
  if (this.resizeCols.some(cache => cache.colElement === colElement)) {
@@ -7830,27 +7873,14 @@ class ColumnResizingStore {
7830
7873
  }
7831
7874
  this.resizeCols.push({ colElement, baseWidth: getElementWidth(colElement) });
7832
7875
  }
7833
- storeResizingRow(rowElement) {
7834
- if (this.resizeRows.some(cache => cache.rowElement === rowElement)) {
7835
- return;
7836
- }
7837
- this.resizeRows.push({ rowElement, baseHeight: getElementHeight(rowElement) });
7838
- }
7839
7876
  storeTableWidth(cols) {
7840
7877
  if (!this.tableCols) {
7841
7878
  this.tableCols = { cols, baseWidth: getColsTotalWidth(cols) };
7842
7879
  }
7843
7880
  }
7844
- storeTableHeight(rows) {
7845
- if (!this.tableRows) {
7846
- this.tableRows = { rows, baseHeight: getRowsTotalHeight(rows) };
7847
- }
7848
- }
7849
7881
  cleanResizing() {
7850
7882
  this.tableCols = null;
7851
- this.tableRows = null;
7852
7883
  this.resizeCols = [];
7853
- this.resizeRows = [];
7854
7884
  this.direction = null;
7855
7885
  }
7856
7886
  restoreLeftCols(deltaX) {
@@ -7872,44 +7902,6 @@ class ColumnResizingStore {
7872
7902
  }
7873
7903
  return deltaX;
7874
7904
  }
7875
- restoreTopRows(deltaY) {
7876
- let index = this.resizeRows.length - 1;
7877
- while (index >= 0 && deltaY > 0) {
7878
- const currentHeight = this.resizeRows[index].rowElement.getBoundingClientRect().height;
7879
- if (this.resizeRows[index].baseHeight > currentHeight) {
7880
- if (this.resizeRows[index].baseHeight > currentHeight + deltaY) {
7881
- this.resizeRows[index].rowElement.style.height = coerceCssPixelValue(currentHeight + deltaY);
7882
- deltaY = 0;
7883
- }
7884
- else {
7885
- deltaY -= this.resizeRows[index].baseHeight - currentHeight;
7886
- this.resizeRows[index].rowElement.style.height = coerceCssPixelValue(this.resizeRows[index].baseHeight);
7887
- this.popRow();
7888
- }
7889
- }
7890
- index--;
7891
- }
7892
- return deltaY;
7893
- }
7894
- restoreBottomRows(deltaY) {
7895
- let index = this.resizeRows.length - 1;
7896
- while (index >= 0 && deltaY < 0) {
7897
- const currentHeight = coercePixelsFromCssValue(this.resizeRows[index].rowElement.style.height);
7898
- if (this.resizeRows[index].baseHeight > currentHeight) {
7899
- if (this.resizeRows[index].baseHeight > currentHeight + Math.abs(deltaY)) {
7900
- this.resizeRows[index].rowElement.style.height = coerceCssPixelValue(currentHeight + Math.abs(deltaY));
7901
- deltaY = 0;
7902
- }
7903
- else {
7904
- deltaY += this.resizeRows[index].baseHeight - currentHeight;
7905
- this.resizeRows[index].rowElement.style.height = coerceCssPixelValue(this.resizeRows[index].baseHeight);
7906
- this.popRow();
7907
- }
7908
- }
7909
- index--;
7910
- }
7911
- return deltaY;
7912
- }
7913
7905
  restoreRightCols(deltaX) {
7914
7906
  let index = this.resizeCols.length - 1;
7915
7907
  while (index >= 0 && deltaX < 0) {
@@ -7934,11 +7926,6 @@ class ColumnResizingStore {
7934
7926
  return getColsTotalWidth(this.tableCols.cols) - this.tableCols.baseWidth - Math.abs(deltaX);
7935
7927
  }
7936
7928
  }
7937
- getAddTableHeight(deltaY) {
7938
- if (this.tableRows) {
7939
- return getRowsTotalHeight(this.tableRows.rows) - this.tableRows.baseHeight - Math.abs(deltaY);
7940
- }
7941
- }
7942
7929
  isRestoring(deltaValue, isXAxis = true) {
7943
7930
  return !this.isResizing(deltaValue, isXAxis);
7944
7931
  }
@@ -7949,9 +7936,6 @@ class ColumnResizingStore {
7949
7936
  if (this.resizeCols.length > 0) {
7950
7937
  return;
7951
7938
  }
7952
- if (this.resizeRows.length > 0) {
7953
- return;
7954
- }
7955
7939
  this.direction = this.getDirection(deltaValue, isXAxis);
7956
7940
  }
7957
7941
  getDirection(deltaValue, isXAxis = true) {
@@ -7960,9 +7944,6 @@ class ColumnResizingStore {
7960
7944
  popCol() {
7961
7945
  this.resizeCols.pop();
7962
7946
  }
7963
- popRow() {
7964
- this.resizeRows.pop();
7965
- }
7966
7947
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ColumnResizingStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
7967
7948
  static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ColumnResizingStore }); }
7968
7949
  }
@@ -7991,6 +7972,25 @@ class TheColumnResizeDirective {
7991
7972
  this._listenStartDrag();
7992
7973
  this._listenEndDrag();
7993
7974
  }
7975
+ getResizeRowIndex(position, cell) {
7976
+ const rowElements = this.theTableComponent.nativeElement.querySelector('tbody').children;
7977
+ const editor = this.theTableComponent?.editor;
7978
+ if (cell && rowElements && editor) {
7979
+ const node = AngularEditor.toSlateNode(editor, cell);
7980
+ const path = AngularEditor.findPath(editor, node);
7981
+ const [row] = path.slice(-2);
7982
+ let rowIndex;
7983
+ switch (position) {
7984
+ case Position.top:
7985
+ rowIndex = row - 1;
7986
+ break;
7987
+ case Position.bottom:
7988
+ rowIndex = row;
7989
+ break;
7990
+ }
7991
+ return rowIndex;
7992
+ }
7993
+ }
7994
7994
  _listenForCellEdgeHoverEvents() {
7995
7995
  this.ngZone.runOutsideAngular(() => {
7996
7996
  const element = this.elementRef.nativeElement;
@@ -8010,6 +8010,7 @@ class TheColumnResizeDirective {
8010
8010
  const positionOffsets = [topOffset, rightOffset, bottomOffset, leftOffset];
8011
8011
  const minIndex = positionOffsets.indexOf(Math.min(...positionOffsets));
8012
8012
  this.position = positions[minIndex];
8013
+ this.targetCell = cell;
8013
8014
  return { cell, position: this.position };
8014
8015
  }
8015
8016
  return null;
@@ -8028,9 +8029,6 @@ class TheColumnResizeDirective {
8028
8029
  if (this.position === Position.left || this.position === Position.right) {
8029
8030
  this.theTableComponent.initializeColumns();
8030
8031
  }
8031
- else {
8032
- this.theTableComponent.initializeRows();
8033
- }
8034
8032
  });
8035
8033
  }
8036
8034
  _listenEndDrag() {
@@ -8047,7 +8045,8 @@ class TheColumnResizeDirective {
8047
8045
  this.theTableComponent.transformColumnsWidth();
8048
8046
  }
8049
8047
  else {
8050
- this.theTableComponent.transformRowHeight();
8048
+ const rowIndex = this.getResizeRowIndex(this.position, this.targetCell);
8049
+ this.theTableComponent.transformRowHeight(rowIndex);
8051
8050
  }
8052
8051
  });
8053
8052
  }
@@ -9273,8 +9272,18 @@ const withBlockCard = (editor) => {
9273
9272
  const centerX = rectEditable.x + rectEditable.width / 2;
9274
9273
  const blockCardEntry = AngularEditor.toSlateCardEntry(editor, relativeBlockCardElement.firstElementChild);
9275
9274
  if (blockCardEntry && editor.isBlockCard(blockCardEntry[0])) {
9275
+ const parentBlockCardEntry = Editor.above(editor, {
9276
+ at: blockCardEntry[1],
9277
+ mode: 'highest',
9278
+ match: node => editor.isBlockCard(node)
9279
+ });
9276
9280
  event.preventDefault();
9277
- AngularEditor.moveBlockCard(editor, blockCardEntry[0], { direction: event.x < centerX ? 'left' : 'right' });
9281
+ if (parentBlockCardEntry) {
9282
+ AngularEditor.moveBlockCard(editor, parentBlockCardEntry[0], { direction: event.x < centerX ? 'left' : 'right' });
9283
+ }
9284
+ else {
9285
+ AngularEditor.moveBlockCard(editor, blockCardEntry[0], { direction: event.x < centerX ? 'left' : 'right' });
9286
+ }
9278
9287
  }
9279
9288
  }
9280
9289
  return;
@@ -9997,7 +10006,7 @@ class TheImage extends TheBaseElement {
9997
10006
  const currentWidth = this.imageEntry?.width || this.naturalWidth;
9998
10007
  return this.imageEntry?.layout && currentWidth > this.layoutDefaultWidth && !this.imageEntry?.reSized
9999
10008
  ? this.layoutDefaultWidth
10000
- : this.imageEntry.width;
10009
+ : currentWidth;
10001
10010
  }
10002
10011
  constructor(elementRef, cdr, imageGroup, imageUploaderService, theContextService, thyPopover, overlay, destroyRef) {
10003
10012
  super(elementRef, cdr);
@@ -10504,7 +10513,7 @@ const createImagePlugin = createPluginFactory({
10504
10513
  ],
10505
10514
  options: {
10506
10515
  allowParentTypes: [ElementKinds.listItem, ElementKinds.tableCell, ElementKinds.blockquote],
10507
- imageTypes: ['image/png', 'image/jpeg', 'image/gif', 'image/bmp']
10516
+ imageTypes: ['image/png', 'image/jpeg', 'image/gif', 'image/bmp', 'image/svg+xml']
10508
10517
  }
10509
10518
  });
10510
10519
 
@@ -10614,6 +10623,22 @@ const createIndentPlugin = createPluginFactory({
10614
10623
  }
10615
10624
  });
10616
10625
 
10626
+ /**
10627
+ * Remove nodes with empty text.
10628
+ */
10629
+ const withRemoveEmptyNodes = (options) => (editor) => {
10630
+ const types = castArray(options.type);
10631
+ const { normalizeNode } = editor;
10632
+ editor.normalizeNode = ([node, path]) => {
10633
+ if (node.type && types.includes(node.type) && Node.string(node) === '') {
10634
+ Transforms.removeNodes(editor, { at: path });
10635
+ return;
10636
+ }
10637
+ normalizeNode([node, path]);
10638
+ };
10639
+ return editor;
10640
+ };
10641
+
10617
10642
  class TheInlineCode extends TheBaseElement {
10618
10643
  constructor() {
10619
10644
  super(...arguments);
@@ -10638,22 +10663,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
10638
10663
  }]
10639
10664
  }] });
10640
10665
 
10641
- /**
10642
- * Remove nodes with empty text.
10643
- */
10644
- const withRemoveEmptyNodes = (options) => (editor) => {
10645
- const types = castArray(options.type);
10646
- const { normalizeNode } = editor;
10647
- editor.normalizeNode = ([node, path]) => {
10648
- if (node.type && types.includes(node.type) && Node.string(node) === '') {
10649
- Transforms.removeNodes(editor, { at: path });
10650
- return;
10651
- }
10652
- normalizeNode([node, path]);
10653
- };
10654
- return editor;
10655
- };
10656
-
10657
10666
  const withInlineCode = (editor) => {
10658
10667
  const { isInline, renderElement, insertText } = editor;
10659
10668
  editor.isInline = (element) => {
@@ -10708,6 +10717,7 @@ const createInlineCodePlugin = createPluginFactory({
10708
10717
  }
10709
10718
  ],
10710
10719
  options: {
10720
+ isInline: true,
10711
10721
  disabledOperateTypes: [ElementKinds.image, ...DISABLED_OPERATE_TYPES]
10712
10722
  }
10713
10723
  });
@@ -11054,6 +11064,7 @@ const createLinkPlugin = createPluginFactory({
11054
11064
  }
11055
11065
  ],
11056
11066
  options: {
11067
+ isInline: true,
11057
11068
  disabledOperateTypes: [ElementKinds.image, ...DISABLED_OPERATE_TYPES]
11058
11069
  }
11059
11070
  });
@@ -12486,6 +12497,7 @@ const createQuickInsertPlugin = createPluginFactory({
12486
12497
  withOverrides: withQuickInsert,
12487
12498
  options: {
12488
12499
  hotkey: '/',
12500
+ allowHotkeyInTypes: [ElementKinds.tableCell, ElementKinds.blockquote],
12489
12501
  disabledPlus: true
12490
12502
  }
12491
12503
  });
@@ -12563,7 +12575,7 @@ class TheTableRow extends TheBaseElement {
12563
12575
  this.updateNumberedColumnPosition();
12564
12576
  }
12565
12577
  setHeight() {
12566
- if (this.element.height) {
12578
+ if (this.element?.height) {
12567
12579
  this.height = this.element.height + 'px';
12568
12580
  }
12569
12581
  }
@@ -13965,13 +13977,53 @@ const moveSelectionFromCell = (editor, e) => {
13965
13977
  });
13966
13978
  };
13967
13979
 
13980
+ const getTableViewportRect = (editor, table) => {
13981
+ const tableComponent = ELEMENT_TO_COMPONENT.get(table);
13982
+ const tableWrapper = tableComponent.tableWrapper.nativeElement;
13983
+ const tableWrapperCSSStyle = getComputedStyle(tableWrapper);
13984
+ const tableWrapperRect = tableWrapper.getBoundingClientRect();
13985
+ const tableWrapperPaddingBottom = coercePixelsFromCssValue(tableWrapperCSSStyle.paddingBottom || '0px');
13986
+ const firstRow = AngularEditor.toDOMNode(editor, table.children[0]);
13987
+ const firstRowRect = firstRow.getBoundingClientRect();
13988
+ const controlHeight = 11;
13989
+ const adjustedTableRect = {
13990
+ left: tableWrapperRect.left,
13991
+ right: tableWrapperRect.right,
13992
+ bottom: tableWrapperRect.bottom - tableWrapperPaddingBottom,
13993
+ top: firstRowRect.top - controlHeight
13994
+ };
13995
+ const editorScrollContainer = getEditorScrollContainer(editor);
13996
+ const editorScrollContainerCSSStyle = getComputedStyle(editorScrollContainer);
13997
+ const editorScrollContainerRect = editorScrollContainer.getBoundingClientRect();
13998
+ // handle toolbar effect
13999
+ const paddingTop = coercePixelsFromCssValue(editorScrollContainerCSSStyle.paddingTop || '0px');
14000
+ const adjustedEditorScrollContainerRect = {
14001
+ left: editorScrollContainerRect.left,
14002
+ right: editorScrollContainerRect.right,
14003
+ bottom: editorScrollContainerRect.bottom,
14004
+ top: editorScrollContainerRect.top + paddingTop
14005
+ };
14006
+ const left = Math.max(adjustedEditorScrollContainerRect.left, adjustedTableRect.left);
14007
+ const right = Math.min(adjustedEditorScrollContainerRect.right, adjustedTableRect.right);
14008
+ const bottom = Math.min(adjustedEditorScrollContainerRect.bottom, adjustedTableRect.bottom);
14009
+ const top = Math.max(adjustedEditorScrollContainerRect.top, adjustedTableRect.top);
14010
+ return {
14011
+ left,
14012
+ right,
14013
+ top,
14014
+ bottom
14015
+ };
14016
+ };
14017
+
13968
14018
  class TheInsertMark {
13969
14019
  get editor() {
13970
14020
  return this.tableStore && this.tableStore.editor;
13971
14021
  }
13972
- constructor(cdr, renderer2) {
14022
+ constructor(cdr, renderer2, elementRef) {
13973
14023
  this.cdr = cdr;
13974
14024
  this.renderer2 = renderer2;
14025
+ this.elementRef = elementRef;
14026
+ this.insertLineStyle = {};
13975
14027
  this.destroy$ = new Subject();
13976
14028
  this.tooltipContent = '';
13977
14029
  this.disabled = false;
@@ -14008,7 +14060,7 @@ class TheInsertMark {
14008
14060
  return;
14009
14061
  }
14010
14062
  this.dotWrapperHovered = true;
14011
- this.insertLength = this.getLength();
14063
+ this.insertLineStyle = this.getInsertLineStyle();
14012
14064
  this.parentElement && this.renderer2.addClass(this.parentElement, TOP_CELL_CLASS);
14013
14065
  this.cdr.detectChanges();
14014
14066
  }
@@ -14021,35 +14073,54 @@ class TheInsertMark {
14021
14073
  this.parentElement && this.renderer2.removeClass(this.parentElement, TOP_CELL_CLASS);
14022
14074
  this.cdr.detectChanges();
14023
14075
  }
14024
- getLength() {
14076
+ getInsertLineStyle() {
14025
14077
  const { selection } = this.editor;
14026
14078
  if (selection && Range.isCollapsed(selection)) {
14027
14079
  const { table } = createTablePosition(this.editor, selection.anchor.path);
14028
14080
  if (!table) {
14029
14081
  return;
14030
14082
  }
14031
- const tableComponent = ELEMENT_TO_COMPONENT.get(table);
14032
- const tableWrapper = tableComponent.tableWrapper.nativeElement;
14033
- const tableElement = tableComponent.theTableElement.nativeElement;
14034
- let result = 0;
14083
+ let width = 0;
14084
+ let height = 0;
14085
+ let left = 0;
14086
+ let top = 0;
14087
+ const insertMarkSize = 19;
14088
+ const insertMarkBoundingClientRect = this.insertWrapper.nativeElement.getBoundingClientRect();
14089
+ const tableViewportRect = getTableViewportRect(this.editor, table);
14035
14090
  if (this.type === 'row') {
14036
- result = tableWrapper.offsetWidth;
14091
+ width = tableViewportRect.right - insertMarkBoundingClientRect.right;
14092
+ height = 1;
14093
+ left = insertMarkBoundingClientRect.left + insertMarkSize;
14094
+ top = insertMarkBoundingClientRect.top + insertMarkSize / 2;
14037
14095
  }
14038
14096
  else {
14039
- result = tableElement.offsetHeight - 1;
14097
+ width = 1;
14098
+ height = tableViewportRect.bottom - insertMarkBoundingClientRect.bottom;
14099
+ left = insertMarkBoundingClientRect.left + insertMarkSize / 2;
14100
+ top = insertMarkBoundingClientRect.top + insertMarkSize;
14101
+ if (this.isLastColumn()) {
14102
+ left = insertMarkBoundingClientRect.right;
14103
+ }
14040
14104
  }
14041
- return result + 'px';
14105
+ return { height: `${height}px`, width: `${width}px`, left: `${left}px`, top: `${top}px` };
14106
+ }
14107
+ }
14108
+ isLastColumn() {
14109
+ const tablePosition = createTablePosition(this.editor);
14110
+ if (!tablePosition?.table) {
14111
+ return false;
14042
14112
  }
14113
+ return this.type === 'column' && this.at === tablePosition.getWidth();
14043
14114
  }
14044
- 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 }); }
14045
- 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"] }] }); }
14115
+ 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 }); }
14116
+ 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"] }] }); }
14046
14117
  }
14047
14118
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheInsertMark, decorators: [{
14048
14119
  type: Component,
14049
14120
  args: [{ selector: 'the-table-insert-mark', host: {
14050
14121
  class: 'the-table-insert-mark'
14051
- }, 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" }]
14052
- }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }], propDecorators: { type: [{
14122
+ }, 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" }]
14123
+ }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { type: [{
14053
14124
  type: Input
14054
14125
  }], at: [{
14055
14126
  type: Input
@@ -14057,6 +14128,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
14057
14128
  type: Input
14058
14129
  }], parentElement: [{
14059
14130
  type: Input
14131
+ }], insertWrapper: [{
14132
+ type: ViewChild,
14133
+ args: ['insertWrapper']
14060
14134
  }] } });
14061
14135
 
14062
14136
  class TheTable extends TheBaseElement {
@@ -14225,7 +14299,6 @@ class TheTable extends TheBaseElement {
14225
14299
  this.subscribeCellPositionChange();
14226
14300
  this.listenOnSelectedCells();
14227
14301
  this.listenKeydownEvent();
14228
- this.listenKeyupEvent();
14229
14302
  this.listenSelectstartEvent();
14230
14303
  this.listenTableContextMenuEvent();
14231
14304
  this.listenTableWrapperScroll();
@@ -14366,9 +14439,11 @@ class TheTable extends TheBaseElement {
14366
14439
  const hasColumns = this.element?.columns && this.colgroup?.nativeElement;
14367
14440
  let cellsWidth = [];
14368
14441
  let gridColumns = '';
14442
+ let colControlGridColumns = '';
14369
14443
  if (hasColumns) {
14370
14444
  cellsWidth = getColumnsWidth(this.colgroup.nativeElement);
14371
14445
  gridColumns = getGridColumns(headerRow, cellsWidth);
14446
+ colControlGridColumns = getGridColumns(colControl, this.element?.columns.map(item => item.width));
14372
14447
  }
14373
14448
  else {
14374
14449
  if (this.readonly) {
@@ -14380,17 +14455,17 @@ class TheTable extends TheBaseElement {
14380
14455
  const percent = +(100 / columnCount).toFixed(4);
14381
14456
  cellsWidth = new Array(columnCount).fill(percent);
14382
14457
  gridColumns = getGridColumns(headerRow, cellsWidth, '%');
14458
+ colControlGridColumns = getGridColumns(colControl, getColumnsWidth(colControl));
14383
14459
  }
14384
14460
  }
14385
14461
  const tablePadding = 44;
14386
14462
  // 序号列存在时, 表格宽度加序号列宽度
14387
14463
  // 只读模式下, 表格宽度不变
14388
14464
  const tableWidth = !this.readonly && this.element?.options?.numberedColumn ? this.tableWrapperWidth - tablePadding : this.tableWrapperWidth;
14389
- const stickyRows = this.isInTable ? [colControl, headerRow] : [headerRow];
14390
- stickyRows.map(item => {
14391
- this.renderer.setStyle(item, 'width', tableWidth + 'px');
14392
- this.renderer.setStyle(item, 'grid-template-columns', gridColumns);
14393
- });
14465
+ this.renderer.setStyle(headerRow, 'width', tableWidth + 'px');
14466
+ this.renderer.setStyle(headerRow, 'grid-template-columns', gridColumns);
14467
+ this.renderer.setStyle(colControl, 'width', tableWidth + 'px');
14468
+ this.renderer.setStyle(colControl, 'grid-template-columns', colControlGridColumns);
14394
14469
  }
14395
14470
  }
14396
14471
  getStickRowElements() {
@@ -14563,7 +14638,7 @@ class TheTable extends TheBaseElement {
14563
14638
  const tr = this.element.children[0];
14564
14639
  const columns = tr.children.map(cell => {
14565
14640
  return {
14566
- width: Number((this.tableWrapperWidth / tr.children.length - tr.children.length).toFixed(2))
14641
+ width: this.tableWrapperWidth / tr.children.length
14567
14642
  };
14568
14643
  });
14569
14644
  setNode(this.editor, { columns }, this.element);
@@ -14573,18 +14648,20 @@ class TheTable extends TheBaseElement {
14573
14648
  this.element.children.map((row, index$1) => {
14574
14649
  if (!row.height) {
14575
14650
  const element = TheEditor.toDOMNode(this.editor, row);
14576
- let height = getElementHeight(element);
14651
+ const height = getElementHeight(element);
14577
14652
  setNode(this.editor, { height }, row);
14578
14653
  }
14579
14654
  });
14580
14655
  }
14581
- transformRowHeight() {
14656
+ transformRowHeight(rowIndex) {
14582
14657
  const rowElements = this.nativeElement.querySelector('tbody').children;
14583
14658
  if (rowElements) {
14584
- [...rowElements].map((row, index$1) => {
14585
- let height = getElementHeight(row);
14586
- setNode(this.editor, { height }, this.element.children[index$1]);
14587
- });
14659
+ const elements = [...rowElements];
14660
+ const operateRow = elements[rowIndex];
14661
+ if (operateRow) {
14662
+ const height = getElementHeight(operateRow);
14663
+ setNode(this.editor, { height }, this.element.children[rowIndex]);
14664
+ }
14588
14665
  }
14589
14666
  }
14590
14667
  transformColumnsWidth() {
@@ -14747,17 +14824,6 @@ class TheTable extends TheBaseElement {
14747
14824
  });
14748
14825
  });
14749
14826
  }
14750
- listenKeyupEvent() {
14751
- this.ngZone.runOutsideAngular(() => {
14752
- fromEvent(document, 'keyup')
14753
- .pipe(takeUntil(this.destroy$), filter((e) => !!e))
14754
- .subscribe(e => {
14755
- if (e.key === 'Shift') {
14756
- this.tableStore.selectCellEnd();
14757
- }
14758
- });
14759
- });
14760
- }
14761
14827
  listenSelectstartEvent() {
14762
14828
  this.ngZone.runOutsideAngular(() => {
14763
14829
  fromEvent(document, 'selectstart')
@@ -14967,13 +15033,6 @@ class TheTd extends TheBaseElement {
14967
15033
  get tableElement() {
14968
15034
  return this.tableComponent?.theTableElement?.nativeElement;
14969
15035
  }
14970
- get scrollableElementTop() {
14971
- const containerElement = this.elementRef.nativeElement.closest(this.editor.options?.scrollContainer || DEFAULT_SCROLL_CONTAINER);
14972
- if (containerElement) {
14973
- return containerElement.getBoundingClientRect().top;
14974
- }
14975
- return -window.scrollY;
14976
- }
14977
15036
  get scrollableElementBottom() {
14978
15037
  const containerElement = this.elementRef.nativeElement.closest(this.editor.options?.scrollContainer || DEFAULT_SCROLL_CONTAINER);
14979
15038
  if (containerElement) {
@@ -15189,7 +15248,7 @@ class TheTd extends TheBaseElement {
15189
15248
  return null;
15190
15249
  }
15191
15250
  return value;
15192
- }))
15251
+ }), debounceTime(100))
15193
15252
  .subscribe(hoveredCellInfo => {
15194
15253
  if (hoveredCellInfo && hoveredCellInfo.position) {
15195
15254
  this.hoveredDirection = hoveredCellInfo.position;
@@ -15276,46 +15335,18 @@ class TheTd extends TheBaseElement {
15276
15335
  this.updateOverlayHandleSizeAndOffset();
15277
15336
  }
15278
15337
  updateOverlayHandleSizeAndOffset() {
15279
- this.overlayRef?.removePanelClass(['the-column-resize-handle-panel', ...this.rowResizeClass]);
15280
- this.isXAxisHover ? this.updateOverlayHandleColumnSize() : this.updateOverlayHandleRowSize();
15281
- this.overlayRef?.updatePositionStrategy(this.createPositionStrategy());
15338
+ this.overlayRef?.removePanelClass(this.rowResizeClass);
15339
+ const overlayHandleRect = this.getOverlayHandleRect();
15340
+ this.overlayRef?.updatePositionStrategy(this.createPositionStrategy(overlayHandleRect));
15282
15341
  this.resizeRef.setDirection(this.isXAxisHover ? 'X' : 'Y');
15283
15342
  this.resizeRef.setPosition(this.hoveredDirection);
15284
- }
15285
- updateOverlayHandleColumnSize() {
15286
- let height = 0;
15287
- const tableElementRect = this.tableElement.getBoundingClientRect();
15288
- const tableElementTop = tableElementRect.top;
15289
- const tableElementBottom = tableElementRect.bottom;
15290
- if (this.getIsStickyTopRow()) {
15291
- height = tableElementBottom - this.scrollableElementTop - TABLE_INSERT_MASK - TABLE_PADDING + TABLE_BORDER;
15292
- }
15293
- else if (tableElementTop < this.scrollableElementTop) {
15294
- height = this.tableElement.offsetHeight - (this.scrollableElementTop - tableElementTop);
15295
- const editor = this.elementRef.nativeElement.closest('the-editor');
15296
- const toolbar = editor.querySelector('.the-global-toolbar');
15297
- // 处理 toolbar 存在的时候减去内嵌工具栏高度
15298
- if (toolbar) {
15299
- height = height - toolbar.offsetHeight;
15300
- this.overlayRef.hostElement.style.marginTop = `${toolbar.offsetHeight}px`;
15301
- }
15302
- }
15303
- else if (tableElementBottom > this.scrollableElementBottom) {
15304
- height = this.tableElement.offsetHeight - (tableElementBottom - this.scrollableElementBottom);
15343
+ if (this.isXAxisHover) {
15344
+ this.overlayRef.updateSize({ height: overlayHandleRect.height, width: overlayHandleRect.width, maxHeight: 'inherit' });
15305
15345
  }
15306
15346
  else {
15307
- height = this.tableElement.offsetHeight;
15347
+ this.overlayRef.addPanelClass(this.rowResizeClass);
15348
+ this.overlayRef.updateSize({ height: overlayHandleRect.height, width: overlayHandleRect.width });
15308
15349
  }
15309
- this.overlayRef.updateSize({ height, width: OVERLAY_INIT_SIZE, maxHeight: 'inherit' });
15310
- }
15311
- getIsStickyTopRow() {
15312
- const newTableElement = this.tableComponent.nativeElement;
15313
- return newTableElement.className.includes(TableWithStickyRowClass);
15314
- }
15315
- updateOverlayHandleRowSize() {
15316
- const width = this.tableComponent.tableWrapper.nativeElement.offsetWidth;
15317
- this.overlayRef.addPanelClass(this.rowResizeClass);
15318
- this.overlayRef.updateSize({ width: width - 2, height: OVERLAY_INIT_SIZE });
15319
15350
  }
15320
15351
  applySize(deltaSize, previousSize) {
15321
15352
  // update col width and table width
@@ -15336,8 +15367,7 @@ class TheTd extends TheBaseElement {
15336
15367
  // over both cells and extending it down the table as needed.
15337
15368
  const overlayOption = this.isXAxisHover
15338
15369
  ? {
15339
- width: OVERLAY_INIT_SIZE + 'px',
15340
- panelClass: 'the-column-resize-handle-panel'
15370
+ width: OVERLAY_INIT_SIZE + 'px'
15341
15371
  }
15342
15372
  : {
15343
15373
  height: OVERLAY_INIT_SIZE + 'px',
@@ -15351,12 +15381,10 @@ class TheTd extends TheBaseElement {
15351
15381
  ...overlayOption
15352
15382
  });
15353
15383
  }
15354
- createPositionStrategy() {
15355
- let offsetY = this.calculateOverlayHandleOffsetY();
15356
- let offsetX = this.calculateOverlayHandleOffsetX();
15384
+ createPositionStrategy(overlayHandleRect) {
15357
15385
  const position = this.isXAxisHover
15358
- ? { ...POSITION_MAP[this.hoveredDirection], offsetY }
15359
- : { ...POSITION_MAP[this.hoveredDirection], offsetX };
15386
+ ? { ...POSITION_MAP[this.hoveredDirection], offsetY: overlayHandleRect?.top || 0 }
15387
+ : { ...POSITION_MAP[this.hoveredDirection], offsetX: overlayHandleRect?.left || 0 };
15360
15388
  return this.overlay
15361
15389
  .position()
15362
15390
  .flexibleConnectedTo(this.elementRef.nativeElement)
@@ -15365,27 +15393,27 @@ class TheTd extends TheBaseElement {
15365
15393
  .withPush(false)
15366
15394
  .withPositions([position]);
15367
15395
  }
15368
- calculateOverlayHandleOffsetY() {
15369
- const tableElementTop = this.tableElement.getBoundingClientRect().top;
15370
- if (this.getIsStickyTopRow()) {
15371
- /* 设置固定标题行后,第一个表格元素实际是第二行,第二行和第一行偏移的位置差一个 mask 和与顶部 padding 的位置,所以需要补齐 */
15372
- return (this.scrollableElementTop -
15373
- this.elementRef.nativeElement.getBoundingClientRect().top +
15374
- TABLE_INSERT_MASK +
15375
- TABLE_PADDING -
15376
- TABLE_BORDER);
15377
- }
15378
- if (tableElementTop < this.scrollableElementTop) {
15379
- return this.scrollableElementTop - this.elementRef.nativeElement.getBoundingClientRect().top;
15396
+ getOverlayHandleRect() {
15397
+ const tableViewportRect = getTableViewportRect(this.editor, this.tableComponent.element);
15398
+ const cellRect = this.elementRef.nativeElement.getBoundingClientRect();
15399
+ const top = tableViewportRect.top - cellRect.top;
15400
+ const left = tableViewportRect.left - cellRect.left;
15401
+ let width = 0;
15402
+ let height = 0;
15403
+ if (this.isXAxisHover) {
15404
+ width = OVERLAY_INIT_SIZE;
15405
+ height = tableViewportRect.bottom - tableViewportRect.top;
15380
15406
  }
15381
15407
  else {
15382
- return tableElementTop - this.elementRef.nativeElement.getBoundingClientRect().top;
15408
+ width = tableViewportRect.right - tableViewportRect.left;
15409
+ height = OVERLAY_INIT_SIZE;
15383
15410
  }
15384
- }
15385
- calculateOverlayHandleOffsetX() {
15386
- const cellElementLeft = this.elementRef.nativeElement.getBoundingClientRect().left;
15387
- const tableElementLeft = this.tableElement.getBoundingClientRect().left;
15388
- return tableElementLeft - cellElementLeft + this.scrollableElementLeft;
15411
+ return {
15412
+ top,
15413
+ left,
15414
+ width,
15415
+ height
15416
+ };
15389
15417
  }
15390
15418
  applyColumnSize(deltaX) {
15391
15419
  const cols = [...this.tableElement.querySelector('colgroup').children];
@@ -15483,7 +15511,6 @@ class TheTd extends TheBaseElement {
15483
15511
  }
15484
15512
  applyRowSize(deltaY) {
15485
15513
  const rows = [...this.tableElement.querySelector('tbody').children];
15486
- this.resizingStore.storeTableHeight(rows);
15487
15514
  this.resizingStore.initDirection(deltaY, this.isXAxisHover);
15488
15515
  let rowIndex = this.elementRef.nativeElement.parentElement.rowIndex - 1; // subtract thead's tr
15489
15516
  if (this.hoveredDirection === Position.top) {
@@ -15492,69 +15519,29 @@ class TheTd extends TheBaseElement {
15492
15519
  const rowSpan = this.elementRef.nativeElement.rowSpan;
15493
15520
  const bottomRowIndex = rowIndex + (rowSpan - 1) + 1;
15494
15521
  if (deltaY > 0) {
15495
- this.applyBottomRows(rows, deltaY, bottomRowIndex);
15496
- if (this.resizingStore.isRestoring(deltaY, this.isXAxisHover)) {
15497
- deltaY = this.resizingStore.restoreTopRows(deltaY);
15498
- }
15499
- if (deltaY > 0) {
15500
- let initHeight = getElementHeight(rows[rowIndex]);
15501
- rows[rowIndex].style.height = coerceCssPixelValue(initHeight + deltaY);
15502
- }
15522
+ this.applyTargetRow(rows, deltaY, bottomRowIndex);
15523
+ const rowHeight = getElementHeight(rows[rowIndex]);
15524
+ rows[rowIndex].style.height = coerceCssPixelValue(rowHeight + deltaY);
15503
15525
  }
15504
15526
  else {
15505
- let addDeltaY = this.resizingStore.getAddTableHeight(deltaY);
15506
- const _delta = this.applyTopRows(rows, deltaY, rowIndex);
15507
- if (_delta === deltaY) {
15508
- // can not resize
15509
- return;
15510
- }
15511
- deltaY = deltaY - _delta;
15512
- if (this.resizingStore.isRestoring(deltaY, this.isXAxisHover)) {
15513
- if (addDeltaY < 0) {
15514
- deltaY = this.resizingStore.restoreBottomRows(deltaY);
15515
- }
15516
- }
15517
- }
15518
- }
15519
- applyTopRows(rows, deltaY, rowIndex) {
15520
- while (deltaY < 0 && rows[rowIndex]) {
15521
- const rowOffsetHeight = getElementHeight(rows[rowIndex]);
15522
- if (rowOffsetHeight > this.tableOptions.minHeightPx) {
15523
- if (this.resizingStore.isResizing(deltaY, this.isXAxisHover)) {
15524
- this.resizingStore.storeResizingRow(rows[rowIndex]);
15525
- }
15526
- if (rowOffsetHeight > this.tableOptions.minHeightPx + Math.abs(deltaY)) {
15527
- rows[rowIndex].style.height = coerceCssPixelValue(rowOffsetHeight - Math.abs(deltaY));
15528
- deltaY = 0;
15529
- }
15530
- else {
15531
- deltaY += rowOffsetHeight - this.tableOptions.minHeightPx;
15532
- rows[rowIndex].style.height = coerceCssPixelValue(this.tableOptions.minHeightPx);
15533
- }
15534
- }
15535
- rowIndex--;
15527
+ this.applyTargetRow(rows, deltaY, rowIndex);
15536
15528
  }
15537
- return deltaY;
15538
15529
  }
15539
- applyBottomRows(rows, deltaY, rowIndex) {
15540
- while (rows[rowIndex] && deltaY > 0) {
15530
+ applyTargetRow(rows, deltaY, rowIndex) {
15531
+ if (deltaY < 0 && rows[rowIndex]) {
15532
+ const minHeightPx = this.tableOptions.minHeightPx;
15541
15533
  const rowOffsetHeight = getElementHeight(rows[rowIndex]);
15542
- if (rowOffsetHeight > this.tableOptions.minHeightPx) {
15543
- if (this.resizingStore.isResizing(deltaY, this.isXAxisHover)) {
15544
- this.resizingStore.storeResizingRow(rows[rowIndex]);
15545
- }
15546
- if (rowOffsetHeight > deltaY + this.tableOptions.minHeightPx) {
15547
- rows[rowIndex].style.height = coerceCssPixelValue(rowOffsetHeight - deltaY);
15548
- deltaY = 0;
15534
+ if (rowOffsetHeight > minHeightPx) {
15535
+ let currentHeight;
15536
+ if (rowOffsetHeight > minHeightPx + Math.abs(deltaY)) {
15537
+ currentHeight = rowOffsetHeight - Math.abs(deltaY);
15549
15538
  }
15550
15539
  else {
15551
- deltaY -= rowOffsetHeight - this.tableOptions.minHeightPx;
15552
- rows[rowIndex].style.height = coerceCssPixelValue(this.tableOptions.minHeightPx);
15540
+ currentHeight = minHeightPx;
15553
15541
  }
15542
+ rows[rowIndex].style.height = coerceCssPixelValue(currentHeight);
15554
15543
  }
15555
- rowIndex++;
15556
15544
  }
15557
- return deltaY;
15558
15545
  }
15559
15546
  //#region
15560
15547
  ngOnDestroy() {
@@ -17354,5 +17341,5 @@ const withTestPlugin = (plugins, initValue) => {
17354
17341
  * Generated bundle index. Do not edit.
17355
17342
  */
17356
17343
 
17357
- 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 };
17344
+ 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 };
17358
17345
  //# sourceMappingURL=worktile-theia.mjs.map