@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.
- package/components/column-resize/column-resize.directive.d.ts +5 -3
- package/components/column-resize/column-resize.scss +0 -7
- package/components/column-resize/overlay-handle.component.d.ts +4 -6
- package/components/column-resize/resizing.store.d.ts +0 -8
- package/components/inline-toolbar/inline-toolbar.component.d.ts +1 -1
- package/constants/node-types.d.ts +0 -1
- package/core/utils/plugin-menu.d.ts +8 -0
- package/esm2022/components/column-resize/column-resize.directive.mjs +28 -9
- package/esm2022/components/column-resize/overlay-handle.component.mjs +12 -16
- package/esm2022/components/column-resize/resizing.store.mjs +3 -66
- package/esm2022/components/inline-toolbar/inline-toolbar.component.mjs +13 -22
- package/esm2022/components/plugin-menu/plugin-menu.component.mjs +20 -5
- package/esm2022/constants/default.mjs +2 -2
- package/esm2022/constants/node-types.mjs +1 -2
- package/esm2022/core/utils/plugin-menu.mjs +31 -1
- package/esm2022/interfaces/plugins/plugin-menu.mjs +2 -2
- package/esm2022/interfaces/plugins/plugins.mjs +1 -1
- package/esm2022/plugins/common/block-card.plugin.mjs +12 -2
- package/esm2022/plugins/image/image.component.mjs +2 -2
- package/esm2022/plugins/image/image.plugin.mjs +2 -2
- package/esm2022/plugins/inline-code/inline-code.plugin.mjs +3 -2
- package/esm2022/plugins/link/link.plugin.mjs +4 -3
- package/esm2022/plugins/quick-insert/quick-insert.editor.mjs +4 -2
- package/esm2022/plugins/quick-insert/quick-insert.plugin.mjs +3 -1
- package/esm2022/plugins/table/components/insert-mark/insert-mark.component.mjs +41 -17
- package/esm2022/plugins/table/components/row/row.component.mjs +2 -2
- package/esm2022/plugins/table/components/table.component.mjs +17 -25
- package/esm2022/plugins/table/components/td/td.component.mjs +47 -125
- package/esm2022/plugins/table/table.types.mjs +1 -1
- package/esm2022/plugins/table/utils/table-viewport.mjs +41 -0
- package/esm2022/queries/anchor-block-entry.mjs +3 -3
- package/esm2022/queries/anchor-block.mjs +3 -3
- package/esm2022/queries/get-block-card-cursor.mjs +6 -2
- package/esm2022/queries/is-block-card-cursor.mjs +7 -2
- package/esm2022/utils/index.mjs +2 -2
- package/esm2022/utils/scrolling.mjs +43 -0
- package/fesm2022/worktile-theia.mjs +283 -296
- package/fesm2022/worktile-theia.mjs.map +1 -1
- package/interfaces/editor.d.ts +3 -3
- package/interfaces/plugins/plugins.d.ts +2 -1
- package/package.json +1 -1
- package/plugins/table/components/insert-mark/insert-mark.component.d.ts +12 -4
- package/plugins/table/components/table.component.d.ts +1 -2
- package/plugins/table/components/table.component.scss +4 -18
- package/plugins/table/components/td/td.component.d.ts +9 -10
- package/plugins/table/table.types.d.ts +2 -2
- package/plugins/table/utils/table-viewport.d.ts +8 -0
- package/queries/anchor-block-entry.d.ts +2 -2
- package/queries/anchor-block.d.ts +2 -2
- package/queries/get-block-card-cursor.d.ts +2 -2
- package/queries/is-block-card-cursor.d.ts +2 -2
- package/styles/editor.scss +7 -0
- package/utils/index.d.ts +1 -1
- package/utils/{scroll-into-view.d.ts → scrolling.d.ts} +1 -0
- 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
|
|
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 (
|
|
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,
|
|
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
|
|
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:
|
|
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
|
|
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 (!
|
|
7289
|
-
inlineToolbar.removeAttribute('style');
|
|
7344
|
+
if (!inlineToolbar) {
|
|
7290
7345
|
return;
|
|
7291
7346
|
}
|
|
7292
|
-
const
|
|
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
|
-
|
|
7300
|
-
|
|
7301
|
-
|
|
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
|
-
|
|
7319
|
-
|
|
7320
|
-
|
|
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 =
|
|
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.
|
|
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(
|
|
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),
|
|
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),
|
|
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),
|
|
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
|
-
|
|
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.
|
|
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
|
-
|
|
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
|
-
:
|
|
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
|
|
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.
|
|
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
|
-
|
|
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
|
-
|
|
14032
|
-
|
|
14033
|
-
|
|
14034
|
-
let
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
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 [
|
|
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 [
|
|
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
|
-
|
|
14390
|
-
|
|
14391
|
-
|
|
14392
|
-
|
|
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:
|
|
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
|
-
|
|
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]
|
|
14585
|
-
|
|
14586
|
-
|
|
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(
|
|
15280
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
15369
|
-
const
|
|
15370
|
-
|
|
15371
|
-
|
|
15372
|
-
|
|
15373
|
-
|
|
15374
|
-
|
|
15375
|
-
|
|
15376
|
-
|
|
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
|
-
|
|
15408
|
+
width = tableViewportRect.right - tableViewportRect.left;
|
|
15409
|
+
height = OVERLAY_INIT_SIZE;
|
|
15383
15410
|
}
|
|
15384
|
-
|
|
15385
|
-
|
|
15386
|
-
|
|
15387
|
-
|
|
15388
|
-
|
|
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.
|
|
15496
|
-
|
|
15497
|
-
|
|
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
|
-
|
|
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
|
-
|
|
15540
|
-
|
|
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 >
|
|
15543
|
-
|
|
15544
|
-
|
|
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
|
-
|
|
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,
|
|
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
|