@worktile/theia 17.3.1 → 17.4.0

package/fesm2022/worktile-theia.mjs

@@ -10,7 +10,7 @@ import { cloneDeep, map, assign, defaults, groupBy, uniq, isEqual } from 'lodash
 export { assign, cloneDeep, debounce, defaults, groupBy, isEqual, map, uniq } from 'lodash';
 import { Editor, Element, Span, Range, Path, Node, Point, Text, Transforms, Operation, createEditor } from 'slate';
 import * as i4 from 'slate-angular';
-import { NODE_TO_PARENT, NODE_TO_INDEX, AngularEditor, hotkeys, IS_SAFARI, BaseElementComponent, ELEMENT_TO_COMPONENT, BaseTextComponent, SlateLeaves, SlateModule, hasBlockCard, isCardLeft, FAKE_RIGHT_BLOCK_CARD_OFFSET, SlateChildrenOutlet, SlateChildren, getPlainText as getPlainText$1, EDITOR_TO_ELEMENT, defaultScrollSelectionIntoView, withAngular } from 'slate-angular';
+import { NODE_TO_PARENT, NODE_TO_INDEX, getClipboardData, AngularEditor, hotkeys, getPlainText as getPlainText$1, createClipboardData, setClipboardData, BaseElementComponent, IS_SAFARI, ELEMENT_TO_COMPONENT, BaseTextComponent, SlateModule, hasBlockCard, isCardLeft, FAKE_RIGHT_BLOCK_CARD_OFFSET, SlateChildrenOutlet, EDITOR_TO_ELEMENT, defaultScrollSelectionIntoView, getDataTransferClipboard, withAngular } from 'slate-angular';
 import { HistoryEditor, withHistory } from 'slate-history';
 import { TheiaConverter } from '@atinc/selene';
 import { isObject, isArray, isString, isUndefined } from 'ngx-tethys/util';
@@ -46,6 +46,7 @@ import { ThySwitch } from 'ngx-tethys/switch';
 import * as i1$1 from 'ngx-tethys/notify';
 import { ThyProgress } from 'ngx-tethys/progress';
 import { ThyUploadStatus } from 'ngx-tethys/upload';
+import getUrls from 'get-urls';
 import { ThyButton } from 'ngx-tethys/button';
 import { ThyFormDirective, ThyFormGroup, ThyFormSubmitDirective, ThyFormGroupFooter } from 'ngx-tethys/form';
 import { PortalInjector, ComponentPortal } from '@angular/cdk/portal';
@@ -1288,19 +1289,18 @@ const getEndBlock = (editor, fragment) => {
     }
     return fragment;
 };
-const extractFragment = (data, deleteKey = ELEMENT_UNIQUE_ID) => {
-    const fragment = data.getData(`application/${CLIPBOARD_FORMAT_KEY}`);
-    if (fragment) {
-        const decoded = decodeURIComponent(window.atob(fragment));
-        let nodes = JSON.parse(decoded);
-        if (!Array.isArray(nodes)) {
-            nodes = [nodes];
+const extractFragment = async (data, deleteKey = ELEMENT_UNIQUE_ID) => {
+    const clipboardData = await getClipboardData(data);
+    let elements = clipboardData?.elements;
+    if (elements) {
+        if (!Array.isArray(elements)) {
+            elements = [elements];
         }
         // delete key to avoid duplicate keys
         if (deleteKey) {
-            deleteElementKey(nodes, deleteKey);
+            deleteElementKey(elements, deleteKey);
         }
-        return nodes;
+        return elements;
     }
     return null;
 };
@@ -1715,37 +1715,31 @@ const isDirectionKeydown = (event) => {
     return isMoveUp || isMoveDown || isMoveBackward || isMoveForward;
 };
 
-function copyNode(editor, element, thyNotifyService, codeMirrorEditor) {
-    let codePoint;
-    if (codeMirrorEditor) {
-        codePoint = codeMirrorEditor.getCursor();
-        const path = AngularEditor.findPath(editor, element);
-        AngularEditor.focus(editor);
-        Transforms.select(editor, path);
-    }
-    if (IS_SAFARI) {
-        copyNodeForSafari(editor, element);
-    }
-    const isSuccess = document.execCommand('copy');
-    if (thyNotifyService) {
-        isSuccess ? thyNotifyService.success('复制成功') : thyNotifyService.error('复制失败');
-    }
-    if (IS_SAFARI) {
-        window.getSelection().removeAllRanges();
-    }
-    if (codeMirrorEditor) {
-        codeMirrorEditor.setCursor(codePoint);
-        codeMirrorEditor.focus();
-        codeMirrorEditor.refresh();
-    }
-}
-function copyNodeForSafari(editor, element) {
-    const selection = window.getSelection();
-    const currentElement = AngularEditor.toDOMNode(editor, element);
-    const range = document.createRange();
-    selection.removeAllRanges();
-    range.selectNode(currentElement);
-    selection.addRange(range);
+const setClipboardDataByDom = async (e, fragment, data) => {
+    const nodes = Array.isArray(fragment) ? fragment : [fragment];
+    const htmlString = TheiaConverter.convertToHtml(nodes);
+    const domRange = AngularEditor.toDOMRange(e, e.selection);
+    const contents = domRange.cloneContents();
+    const div = document.createElement('div');
+    div.appendChild(contents);
+    div.setAttribute('hidden', 'true');
+    div.innerHTML = htmlString;
+    document.body.appendChild(div);
+    const attach = div.childNodes[0];
+    const plainText = getPlainText$1(div);
+    const clipboardData = createClipboardData(htmlString, nodes, plainText, []);
+    await setClipboardData(clipboardData, div, attach, data);
+    document.body.removeChild(div);
+};
+function copyNode(e, element, thyNotifyService) {
+    const fragment = cloneDeep(element);
+    return setClipboardDataByDom(e, fragment)
+        .then(() => {
+        thyNotifyService.success('复制成功');
+    })
+        .catch(() => {
+        thyNotifyService.error('复制失败');
+    });
 }
 
 function idCreator(length = 5) {
@@ -1797,6 +1791,25 @@ const THE_MODE_PROVIDER = {
 
 const THE_UPLOAD_SERVICE_TOKEN = new InjectionToken('THE_UPLOAD_SERVICE_TOKEN');
 
+const ThePluginMenu = {
+    isMenuGroup(value) {
+        if (value instanceof Object && !value.key) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    },
+    isMenuItem(value) {
+        if (value?.key) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+};
+
 var PluginKeys;
 (function (PluginKeys) {
     PluginKeys["list"] = "list";
@@ -1839,25 +1852,6 @@ var PluginKeys;
     PluginKeys["internalCommon"] = "internalCommon";
 })(PluginKeys || (PluginKeys = {}));
 
-const ThePluginMenu = {
-    isMenuGroup(value) {
-        if (value instanceof Object && !value.key) {
-            return true;
-        }
-        else {
-            return false;
-        }
-    },
-    isMenuItem(value) {
-        if (value?.key) {
-            return true;
-        }
-        else {
-            return false;
-        }
-    }
-};
-
 const THE_PRESET_CONFIG_TOKEN = new InjectionToken('the-preset');
 
 const inValidTypes = [
@@ -1918,10 +1912,10 @@ class TheBaseElement extends BaseElementComponent {
         const blockClass = this.editor.isInline(this.element) ? 'slate-inline-block' : 'slate-block';
         this.nativeElement.classList.add(`slate-element-${this.element.type}`, blockClass);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheBaseElement, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TheBaseElement, selector: "TheBaseElement", usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheBaseElement, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: TheBaseElement, selector: "TheBaseElement", usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheBaseElement, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheBaseElement, decorators: [{
             type: Component,
             args: [{
                     selector: 'TheBaseElement',
@@ -2435,10 +2429,10 @@ class TheBaseToolbarItem {
             this.active = false;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheBaseToolbarItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: TheBaseToolbarItem, inputs: { toolbarItem: "toolbarItem", editor: "editor", itemMousedownHandle: "itemMousedownHandle" }, host: { properties: { "class.the-toolbar-item": "this.class", "class.disabled": "this.disabledState", "class.active": "this.activeState" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheBaseToolbarItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: TheBaseToolbarItem, inputs: { toolbarItem: "toolbarItem", editor: "editor", itemMousedownHandle: "itemMousedownHandle" }, host: { properties: { "class.the-toolbar-item": "this.class", "class.disabled": "this.disabledState", "class.active": "this.activeState" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheBaseToolbarItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheBaseToolbarItem, decorators: [{
             type: Directive
         }], propDecorators: { toolbarItem: [{
                 type: Input
@@ -2476,10 +2470,10 @@ class TheBaseToolbarDropdown extends TheBaseToolbarItem {
             this.activeMenuItem = activeItem ? activeItem : this.defaultDropdownItem;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheBaseToolbarDropdown, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: TheBaseToolbarDropdown, inputs: { menus: "menus", mode: "mode", dropdownItemKey: "dropdownItemKey" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheBaseToolbarDropdown, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: TheBaseToolbarDropdown, inputs: { menus: "menus", mode: "mode", dropdownItemKey: "dropdownItemKey" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheBaseToolbarDropdown, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheBaseToolbarDropdown, decorators: [{
             type: Directive
         }], propDecorators: { menus: [{
                 type: Input
@@ -2777,10 +2771,10 @@ class TheToolbarDropdown extends TheBaseToolbarDropdown {
             this.dropdownPopoverRef?.close();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheToolbarDropdown, deps: [{ token: i0.ElementRef }, { token: i1.ThyPopover }, { token: i0.ViewContainerRef }, { token: i2.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TheToolbarDropdown, isStandalone: true, selector: "the-toolbar-dropdown", host: { properties: { "class": "this.className" } }, viewQueries: [{ propertyName: "iconModeTemplate", first: true, predicate: ["iconModeTemplate"], descendants: true, static: true }, { propertyName: "textModeTemplate", first: true, predicate: ["textModeTemplate"], descendants: true, static: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<a\n  *ngIf=\"mode === dropdownMode.icon\"\n  href=\"javascript:;\"\n  class=\"icon-mode\"\n  thyAction\n  [thyActionIcon]=\"activeIcon\"\n  [thyActionActive]=\"activeDropdown\"\n  (mousedown)=\"preventDefault($event)\"\n  (click)=\"toggleDropdown($event)\"\n>\n  <thy-icon *ngIf=\"!toolbarItem.isHideDropdownActionIcon\" class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n<a\n  *ngIf=\"mode !== dropdownMode.icon\"\n  href=\"javascript:;\"\n  class=\"text-mode\"\n  thyAction\n  (mousedown)=\"preventDefault($event)\"\n  (click)=\"toggleDropdown($event)\"\n>\n  <span class=\"show-text\">{{ activeMenuItem?.name }}</span>\n  <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #dropdownTemplate>\n  <div class=\"thy-dropdown-menu\">\n    <ng-container *ngFor=\"let menu of menus\">\n      <a\n        *ngIf=\"menu.key !== 'split'\"\n        class=\"d-flex justify-content-between text-secondary\"\n        href=\"javascript:;\"\n        thyDropdownMenuItem\n        [ngStyle]=\"menu?.styles\"\n        [thyDropdownMenuItemActive]=\"activeKeys.includes(menu.key)\"\n        (mousedown)=\"preventDefault($event)\"\n        (click)=\"itemMousedown($event, menu)\"\n      >\n        <div class=\"d-flex align-items-center\">\n          <thy-icon\n            class=\"text-secondary\"\n            *ngIf=\"menu?.icon && mode === dropdownMode.icon\"\n            thyDropdownMenuItemIcon\n            [thyIconName]=\"menu.icon\"\n          ></thy-icon>\n          <span class=\"text-body\" *ngIf=\"menu?.name\" thyDropdownMenuItemName>{{ menu.name }}</span>\n        </div>\n        <div class=\"menu-item-right font-size-sm text-muted\" *ngIf=\"menu?.shortcutKey\">{{ menu.shortcutKey }}</div>\n      </a>\n      <thy-dropdown-menu-divider *ngIf=\"menu.key === 'split'\"></thy-dropdown-menu-divider>\n    </ng-container>\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: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "component", type: ThyDropdownMenuDivider, selector: "thy-dropdown-menu-divider" }, { kind: "directive", type: ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: ThyDropdownMenuItemActiveDirective, selector: "[thyDropdownMenuItemActive]", inputs: ["thyDropdownMenuItemActive"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheToolbarDropdown, deps: [{ token: i0.ElementRef }, { token: i1.ThyPopover }, { token: i0.ViewContainerRef }, { token: i2.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: TheToolbarDropdown, isStandalone: true, selector: "the-toolbar-dropdown", host: { properties: { "class": "this.className" } }, viewQueries: [{ propertyName: "iconModeTemplate", first: true, predicate: ["iconModeTemplate"], descendants: true, static: true }, { propertyName: "textModeTemplate", first: true, predicate: ["textModeTemplate"], descendants: true, static: true }, { propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<a\n  *ngIf=\"mode === dropdownMode.icon\"\n  href=\"javascript:;\"\n  class=\"icon-mode\"\n  thyAction\n  [thyActionIcon]=\"activeIcon\"\n  [thyActionActive]=\"activeDropdown\"\n  (mousedown)=\"preventDefault($event)\"\n  (click)=\"toggleDropdown($event)\"\n>\n  <thy-icon *ngIf=\"!toolbarItem.isHideDropdownActionIcon\" class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n<a\n  *ngIf=\"mode !== dropdownMode.icon\"\n  href=\"javascript:;\"\n  class=\"text-mode\"\n  thyAction\n  (mousedown)=\"preventDefault($event)\"\n  (click)=\"toggleDropdown($event)\"\n>\n  <span class=\"show-text\">{{ activeMenuItem?.name }}</span>\n  <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #dropdownTemplate>\n  <div class=\"thy-dropdown-menu\">\n    <ng-container *ngFor=\"let menu of menus\">\n      <a\n        *ngIf=\"menu.key !== 'split'\"\n        class=\"d-flex justify-content-between text-secondary\"\n        href=\"javascript:;\"\n        thyDropdownMenuItem\n        [ngStyle]=\"menu?.styles\"\n        [thyDropdownMenuItemActive]=\"activeKeys.includes(menu.key)\"\n        (mousedown)=\"preventDefault($event)\"\n        (click)=\"itemMousedown($event, menu)\"\n      >\n        <div class=\"d-flex align-items-center\">\n          <thy-icon\n            class=\"text-secondary\"\n            *ngIf=\"menu?.icon && mode === dropdownMode.icon\"\n            thyDropdownMenuItemIcon\n            [thyIconName]=\"menu.icon\"\n          ></thy-icon>\n          <span class=\"text-body\" *ngIf=\"menu?.name\" thyDropdownMenuItemName>{{ menu.name }}</span>\n        </div>\n        <div class=\"menu-item-right font-size-sm text-muted\" *ngIf=\"menu?.shortcutKey\">{{ menu.shortcutKey }}</div>\n      </a>\n      <thy-dropdown-menu-divider *ngIf=\"menu.key === 'split'\"></thy-dropdown-menu-divider>\n    </ng-container>\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: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "component", type: ThyDropdownMenuDivider, selector: "thy-dropdown-menu-divider" }, { kind: "directive", type: ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: ThyDropdownMenuItemActiveDirective, selector: "[thyDropdownMenuItemActive]", inputs: ["thyDropdownMenuItemActive"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheToolbarDropdown, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheToolbarDropdown, decorators: [{
             type: Component,
             args: [{ selector: 'the-toolbar-dropdown', standalone: true, imports: [
                         NgIf,
@@ -2831,8 +2825,8 @@ class TheToolbarItem extends TheBaseToolbarItem {
         }
         this.toolbarItem?.execute(this.editor);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheToolbarItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TheToolbarItem, isStandalone: true, selector: "the-toolbar-item", host: { listeners: { "mousedown": "toggleDropdown($event)" }, properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheToolbarItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: TheToolbarItem, isStandalone: true, selector: "the-toolbar-item", host: { listeners: { "mousedown": "toggleDropdown($event)" }, properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0, template: `
         <a
             href="javascript:;"
             thyAction
@@ -2847,7 +2841,7 @@ class TheToolbarItem extends TheBaseToolbarItem {
         <ng-template #tooltip let-data> {{ data?.name }} {{ data?.shortcutKey }} </ng-template>
     `, isInline: true, dependencies: [{ kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheToolbarItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheToolbarItem, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-toolbar-item',
@@ -3099,10 +3093,10 @@ class TheToolbarComponent {
         }
         return TheToolbarItem;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheToolbarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: TheToolbarGroupToken }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TheToolbarComponent, isStandalone: true, selector: "the-toolbar", inputs: { editor: "editor", toolbarItems: "toolbarItems", align: "align", containerClass: "containerClass", isMore: "isMore", afterTemplate: "afterTemplate" }, host: { properties: { "style.justifyContent": "this.justifyContent" }, classAttribute: "the-toolbar-container d-flex align-items-center" }, viewQueries: [{ propertyName: "toolbarContainer", first: true, predicate: ["toolbarContainer"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container #toolbarContainer></ng-container>\n<ng-content></ng-content>\n<ng-template *ngIf=\"afterTemplate\" [ngTemplateOutlet]=\"afterTemplate\"></ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheToolbarComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: TheToolbarGroupToken }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: TheToolbarComponent, isStandalone: true, selector: "the-toolbar", inputs: { editor: "editor", toolbarItems: "toolbarItems", align: "align", containerClass: "containerClass", isMore: "isMore", afterTemplate: "afterTemplate" }, host: { properties: { "style.justifyContent": "this.justifyContent" }, classAttribute: "the-toolbar-container d-flex align-items-center" }, viewQueries: [{ propertyName: "toolbarContainer", first: true, predicate: ["toolbarContainer"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container #toolbarContainer></ng-container>\n<ng-content></ng-content>\n<ng-template *ngIf=\"afterTemplate\" [ngTemplateOutlet]=\"afterTemplate\"></ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-toolbar', host: {
                         class: 'the-toolbar-container d-flex align-items-center'
@@ -3219,10 +3213,10 @@ class TheToolbarGroup {
             this.groupPopoverRef.close();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheToolbarGroup, deps: [{ token: i0.ElementRef }, { token: i1.ThyPopover }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TheToolbarGroup, isStandalone: true, selector: "the-toolbar-group", inputs: { menus: "menus", item: "item" }, host: { listeners: { "mousedown": "mousedownHandler($event)", "document:mouseup": "documentMouseupHandle($event)", "click": "clickHandle($event)" }, properties: { "class": "this.className" } }, viewQueries: [{ propertyName: "groupTemplate", first: true, predicate: ["groupTemplate"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<a\n  href=\"javascript:;\"\n  thyAction\n  [thyActionIcon]=\"item.icon\"\n  [thyActionActive]=\"active\"\n  [thyTooltip]=\"item?.name\"\n  thyTooltipPlacement=\"top\"\n></a>\n\n<ng-template #groupTemplate>\n  <the-toolbar class=\"group\" [editor]=\"editor\" [toolbarItems]=\"menus\" [isMore]=\"false\"></the-toolbar>\n</ng-template>\n", dependencies: [{ kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheToolbarGroup, deps: [{ token: i0.ElementRef }, { token: i1.ThyPopover }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: TheToolbarGroup, isStandalone: true, selector: "the-toolbar-group", inputs: { menus: "menus", item: "item" }, host: { listeners: { "mousedown": "mousedownHandler($event)", "document:mouseup": "documentMouseupHandle($event)", "click": "clickHandle($event)" }, properties: { "class": "this.className" } }, viewQueries: [{ propertyName: "groupTemplate", first: true, predicate: ["groupTemplate"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<a\n  href=\"javascript:;\"\n  thyAction\n  [thyActionIcon]=\"item.icon\"\n  [thyActionActive]=\"active\"\n  [thyTooltip]=\"item?.name\"\n  thyTooltipPlacement=\"top\"\n></a>\n\n<ng-template #groupTemplate>\n  <the-toolbar class=\"group\" [editor]=\"editor\" [toolbarItems]=\"menus\" [isMore]=\"false\"></the-toolbar>\n</ng-template>\n", dependencies: [{ kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheToolbarGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheToolbarGroup, decorators: [{
             type: Component,
             args: [{ selector: 'the-toolbar-group', standalone: true, imports: [ThyAction, ThyTooltipDirective, TheToolbarComponent], template: "<a\n  href=\"javascript:;\"\n  thyAction\n  [thyActionIcon]=\"item.icon\"\n  [thyActionActive]=\"active\"\n  [thyTooltip]=\"item?.name\"\n  thyTooltipPlacement=\"top\"\n></a>\n\n<ng-template #groupTemplate>\n  <the-toolbar class=\"group\" [editor]=\"editor\" [toolbarItems]=\"menus\" [isMore]=\"false\"></the-toolbar>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.ThyPopover }, { type: i0.ViewContainerRef }], propDecorators: { className: [{
@@ -3250,10 +3244,10 @@ class TheDefaultElement extends TheBaseElement {
     get indent() {
         return this.element?.indent;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheDefaultElement, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TheDefaultElement, isStandalone: true, selector: "[theDefaultElement]", host: { properties: { "attr.the-indent": "this.indent" } }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheDefaultElement, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: TheDefaultElement, isStandalone: true, selector: "[theDefaultElement]", host: { properties: { "attr.the-indent": "this.indent" } }, usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheDefaultElement, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheDefaultElement, decorators: [{
             type: Component,
             args: [{
                     selector: '[theDefaultElement]',
@@ -3307,15 +3301,15 @@ class TheListboxOptionDirective {
     getActive() {
         return this._active;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheListboxOptionDirective, deps: [{ token: THE_LISTBOX_PARENT_OPTION_TOKEN, optional: true, skipSelf: true }, { token: THE_LISTBOX_PARENT_GROUP_TOKEN }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: TheListboxOptionDirective, isStandalone: true, selector: "[theListboxOption]", inputs: { theOptionValue: "theOptionValue", theOptionDisabled: "theOptionDisabled" }, host: { properties: { "class": "this.className" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheListboxOptionDirective, deps: [{ token: THE_LISTBOX_PARENT_OPTION_TOKEN, optional: true, skipSelf: true }, { token: THE_LISTBOX_PARENT_GROUP_TOKEN }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: TheListboxOptionDirective, isStandalone: true, selector: "[theListboxOption]", inputs: { theOptionValue: "theOptionValue", theOptionDisabled: "theOptionDisabled" }, host: { properties: { "class": "this.className" } }, providers: [
             {
                 provide: THE_LISTBOX_PARENT_OPTION_TOKEN,
                 useExisting: TheListboxOptionDirective
             }
         ], queries: [{ propertyName: "_options", predicate: i0.forwardRef(() => TheListboxOptionDirective), descendants: true }], exportAs: ["theListboxOption"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheListboxOptionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheListboxOptionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[theListboxOption]',
@@ -3391,15 +3385,15 @@ class TheListboxGroupDirective {
     getLast() {
         return this.options[this.options.length - 1];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheListboxGroupDirective, deps: [{ token: THE_LISTBOX_PARENT_OPTION_TOKEN, optional: true, skipSelf: true }, { token: THE_LISTBOX_TOKEN }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: TheListboxGroupDirective, isStandalone: true, selector: "[theListboxGroup]", inputs: { horizontalColumn: "horizontalColumn" }, host: { properties: { "class": "this.className" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheListboxGroupDirective, deps: [{ token: THE_LISTBOX_PARENT_OPTION_TOKEN, optional: true, skipSelf: true }, { token: THE_LISTBOX_TOKEN }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: TheListboxGroupDirective, isStandalone: true, selector: "[theListboxGroup]", inputs: { horizontalColumn: "horizontalColumn" }, host: { properties: { "class": "this.className" } }, providers: [
             {
                 provide: THE_LISTBOX_PARENT_GROUP_TOKEN,
                 useExisting: TheListboxGroupDirective
             }
         ], queries: [{ propertyName: "_options", predicate: TheListboxOptionDirective, descendants: true }], exportAs: ["theListboxGroup"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheListboxGroupDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheListboxGroupDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[theListboxGroup]',
@@ -3603,15 +3597,15 @@ class TheListboxDirective {
         this._optionChangesSubscription.unsubscribe();
         this._keyboardSubscription.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheListboxDirective, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: TheListboxDirective, isStandalone: true, selector: "[theListBox]", inputs: { keyboardContainer: "keyboardContainer", autoActiveFirstItem: "autoActiveFirstItem" }, outputs: { theListboxChange: "theListboxChange" }, host: { properties: { "class": "this.className" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheListboxDirective, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: TheListboxDirective, isStandalone: true, selector: "[theListBox]", inputs: { keyboardContainer: "keyboardContainer", autoActiveFirstItem: "autoActiveFirstItem" }, outputs: { theListboxChange: "theListboxChange" }, host: { properties: { "class": "this.className" } }, providers: [
             {
                 provide: THE_LISTBOX_TOKEN,
                 useExisting: TheListboxDirective
             }
         ], queries: [{ propertyName: "_groups", predicate: TheListboxGroupDirective, descendants: true }, { propertyName: "_options", predicate: TheListboxOptionDirective, descendants: true }], exportAs: ["theListBox"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheListboxDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheListboxDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[theListBox]',
@@ -3645,10 +3639,10 @@ class ThePreventDefaultDirective {
     mousedown(event) {
         event.preventDefault();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ThePreventDefaultDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: ThePreventDefaultDirective, isStandalone: true, selector: "[thePreventDefault]", host: { listeners: { "mousedown": "mousedown($event)" } }, exportAs: ["thePreventDefault"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ThePreventDefaultDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: ThePreventDefaultDirective, isStandalone: true, selector: "[thePreventDefault]", host: { listeners: { "mousedown": "mousedown($event)" } }, exportAs: ["thePreventDefault"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ThePreventDefaultDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ThePreventDefaultDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[thePreventDefault]',
@@ -3671,10 +3665,10 @@ class ElementStylePipe {
         }
         return style;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ElementStylePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: ElementStylePipe, isStandalone: true, name: "elementStyle" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ElementStylePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: ElementStylePipe, isStandalone: true, name: "elementStyle" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ElementStylePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ElementStylePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'elementStyle',
@@ -3690,10 +3684,10 @@ class ElementClassPipe {
         }
         return classStr;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ElementClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: ElementClassPipe, isStandalone: true, name: "elementClass" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ElementClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: ElementClassPipe, isStandalone: true, name: "elementClass" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ElementClassPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ElementClassPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'elementClass',
@@ -3707,10 +3701,10 @@ class PluginMenuPipe {
         }
         return icon;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: PluginMenuPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: PluginMenuPipe, isStandalone: true, name: "getMenuIcon" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: PluginMenuPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: PluginMenuPipe, isStandalone: true, name: "getMenuIcon" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: PluginMenuPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: PluginMenuPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'getMenuIcon',
@@ -5904,10 +5898,10 @@ class TheContextService {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheContextService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheContextService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheContextService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheContextService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheContextService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheContextService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i0.NgZone }] });
 
@@ -6585,10 +6579,10 @@ class TheBaseSuggestion {
     handleMousedown(event) {
         event.preventDefault();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheBaseSuggestion, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: TheBaseSuggestion, inputs: { editor: "editor", type: "type", keywords: "keywords" }, host: { listeners: { "mousedown": "handleMousedown($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheBaseSuggestion, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: TheBaseSuggestion, inputs: { editor: "editor", type: "type", keywords: "keywords" }, host: { listeners: { "mousedown": "handleMousedown($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheBaseSuggestion, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheBaseSuggestion, decorators: [{
             type: Directive
         }], propDecorators: { editor: [{
                 type: Input
@@ -6745,10 +6739,10 @@ class TheVerticalToolbarItem extends TheBaseToolbarDropdown {
             this.dropdownPopoverRef.close();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheVerticalToolbarItem, deps: [{ token: i0.ElementRef }, { token: i1.ThyPopover }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TheVerticalToolbarItem, isStandalone: true, selector: "the-toolbar-vertical-align-item", host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, classAttribute: "the-toolbar-dropdown-container verticalAlign" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["VerticalAlignItems"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<a\n  href=\"javascript:;\"\n  class=\"icon-mode link-with-down\"\n  thyAction\n  [thyActionIcon]=\"activeMenuItem?.icon\"\n  [thyActionActive]=\"isOpened\"\n  [thyTooltip]=\"toolbarItem?.name\"\n  thyTooltipPlacement=\"top\"\n  (mousedown)=\"execute($event)\"\n>\n  <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #VerticalAlignItems>\n  <div class=\"thy-dropdown-menu\">\n    <ng-container *ngFor=\"let menu of toolbarItem?.includes\">\n      <a\n        href=\"javascript:;\"\n        thyDropdownMenuItem\n        [thyDropdownMenuItemActive]=\"menu.key === activeMenuItem?.key\"\n        (mousedown)=\"itemMousedown($event, menu)\"\n      >\n        <thy-icon *ngIf=\"menu.icon\" thyDropdownMenuItemIcon [thyIconName]=\"menu?.icon\"></thy-icon>\n        <span thyDropdownMenuItemName>{{ menu.name }}</span>\n      </a>\n    </ng-container>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: ThyDropdownMenuItemActiveDirective, selector: "[thyDropdownMenuItemActive]", inputs: ["thyDropdownMenuItemActive"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheVerticalToolbarItem, deps: [{ token: i0.ElementRef }, { token: i1.ThyPopover }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: TheVerticalToolbarItem, isStandalone: true, selector: "the-toolbar-vertical-align-item", host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, classAttribute: "the-toolbar-dropdown-container verticalAlign" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["VerticalAlignItems"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<a\n  href=\"javascript:;\"\n  class=\"icon-mode link-with-down\"\n  thyAction\n  [thyActionIcon]=\"activeMenuItem?.icon\"\n  [thyActionActive]=\"isOpened\"\n  [thyTooltip]=\"toolbarItem?.name\"\n  thyTooltipPlacement=\"top\"\n  (mousedown)=\"execute($event)\"\n>\n  <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #VerticalAlignItems>\n  <div class=\"thy-dropdown-menu\">\n    <ng-container *ngFor=\"let menu of toolbarItem?.includes\">\n      <a\n        href=\"javascript:;\"\n        thyDropdownMenuItem\n        [thyDropdownMenuItemActive]=\"menu.key === activeMenuItem?.key\"\n        (mousedown)=\"itemMousedown($event, menu)\"\n      >\n        <thy-icon *ngIf=\"menu.icon\" thyDropdownMenuItemIcon [thyIconName]=\"menu?.icon\"></thy-icon>\n        <span thyDropdownMenuItemName>{{ menu.name }}</span>\n      </a>\n    </ng-container>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: ThyDropdownMenuItemActiveDirective, selector: "[thyDropdownMenuItemActive]", inputs: ["thyDropdownMenuItemActive"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheVerticalToolbarItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheVerticalToolbarItem, decorators: [{
             type: Component,
             args: [{ selector: 'the-toolbar-vertical-align-item', host: {
                         class: 'the-toolbar-dropdown-container verticalAlign'
@@ -6867,6 +6861,123 @@ const InlineCodeEditor = {
     }
 };
 
+class TheQuickInsert {
+    handleMousedownNativeElement(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    constructor(renderer, elementRef, cdr) {
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+        this.cdr = cdr;
+        this.className = 'the-quick-insert';
+        this.isVisible = false;
+        this.defaultIconName = 'plus-circle-thin';
+        this.iconNameFill = 'plus-circle-thin-fill';
+        this.displayIconName = this.defaultIconName;
+    }
+    ngOnInit() {
+        const { onChange } = this.editor;
+        this.editor.onChange = () => {
+            onChange();
+            if (this.editor && this.editor.options && !this.editor.options.readonly) {
+                // wait isOpenedMenu is updated
+                setTimeout(() => {
+                    this.updateIconDisplay();
+                }, 0);
+            }
+        };
+        this.updateIconDisplay();
+    }
+    ngOnChanges(changes) {
+        if (changes.isVisible && !changes.isVisible.firstChange) {
+            this.updateIconDisplay();
+        }
+    }
+    updateIconDisplay() {
+        const { editor } = this;
+        if (this.isVisible &&
+            !QuickInsertEditor.isOpenedMenu(editor) &&
+            isCleanEmptyParagraph(editor) &&
+            !this.hasExcludeAttribute() &&
+            !this.isRichMediaScope()) {
+            const block = Node.ancestor(editor, [editor?.selection?.anchor.path[0]]);
+            const rootNode = AngularEditor.toDOMNode(editor, block);
+            this.updatePosition(rootNode.offsetLeft, rootNode.offsetTop);
+            return;
+        }
+        this.addHiddenClass();
+    }
+    addHiddenClass() {
+        this.elementRef.nativeElement.classList.add('d-none');
+    }
+    removeHiddenClass() {
+        this.elementRef.nativeElement.classList.remove('d-none');
+    }
+    isRichMediaScope() {
+        const { editor } = this;
+        if (editor?.selection) {
+            const block = Node.ancestor(editor, [editor?.selection?.anchor.path[0]]);
+            const rootElement = AngularEditor.toDOMNode(editor, block);
+            const leafElement = rootElement.querySelector('[data-slate-leaf="true"]');
+            const rootElementRect = rootElement.getBoundingClientRect();
+            const leafElementRect = leafElement.getBoundingClientRect();
+            return leafElementRect?.x !== rootElementRect?.x;
+        }
+        return false;
+    }
+    hasExcludeAttribute() {
+        const marks = getSelectionMarks(this.editor);
+        const fontSizeMark = marks[MarkTypes.fontSize];
+        return fontSizeMark;
+    }
+    updatePosition(left, top) {
+        this.renderer.setStyle(this.elementRef.nativeElement, 'top', `${top}px`);
+        this.renderer.setStyle(this.elementRef.nativeElement, 'left', `${left}px`);
+        this.removeHiddenClass();
+    }
+    mouseEnter(event) {
+        this.displayIconName = this.iconNameFill;
+        this.cdr.markForCheck();
+    }
+    mouseLeave(event) {
+        this.displayIconName = this.defaultIconName;
+        this.cdr.markForCheck();
+    }
+    handleClick(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        // avoid popover is closed immediately
+        setTimeout(() => {
+            QuickInsertEditor.openMenu(this.editor)
+                .afterClosed()
+                .subscribe(() => {
+                this.updateIconDisplay();
+            });
+            this.updateIconDisplay();
+        }, 100);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheQuickInsert, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: TheQuickInsert, isStandalone: true, selector: "[theQuickInsert]", inputs: { editor: "editor", isVisible: "isVisible" }, host: { listeners: { "mousedown": "handleMousedownNativeElement($event)" }, properties: { "class": "this.className" } }, viewQueries: [{ propertyName: "iconElement", first: true, predicate: ["iconElement"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<thy-icon\n  #iconElement\n  [thyIconName]=\"displayIconName\"\n  class=\"quick-insert-icon text-desc font-size-xlg\"\n  (mouseenter)=\"mouseEnter($event)\"\n  (mouseleave)=\"mouseLeave($event)\"\n  (mousedown)=\"handleClick($event)\"\n></thy-icon>\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheQuickInsert, decorators: [{
+            type: Component,
+            args: [{ selector: '[theQuickInsert]', standalone: true, imports: [ThyIcon], template: "<thy-icon\n  #iconElement\n  [thyIconName]=\"displayIconName\"\n  class=\"quick-insert-icon text-desc font-size-xlg\"\n  (mouseenter)=\"mouseEnter($event)\"\n  (mouseleave)=\"mouseLeave($event)\"\n  (mousedown)=\"handleClick($event)\"\n></thy-icon>\n" }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class']
+            }], editor: [{
+                type: Input
+            }], isVisible: [{
+                type: Input
+            }], iconElement: [{
+                type: ViewChild,
+                args: ['iconElement', { read: ElementRef, static: false }]
+            }], handleMousedownNativeElement: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }] } });
+
 class TheTableSelect {
     constructor(popoverRef) {
         this.popoverRef = popoverRef;
@@ -6895,10 +7006,10 @@ class TheTableSelect {
             this.maxRowIndex = -1;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheTableSelect, deps: [{ token: i1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TheTableSelect, isStandalone: true, selector: "table-select", inputs: { optionsParam: "optionsParam", editor: "editor", beforeInsert: "beforeInsert" }, ngImport: i0, template: "<div class=\"table-selector-container\">\n  <div *ngFor=\"let item of tableData; let rowIndex = index\" class=\"selector-row\" (mousedown)=\"executeTable($event)\">\n    <span\n      *ngFor=\"let item of tableData; let colIndex = index\"\n      [ngClass]=\"{ 'active-cell': rowIndex <= maxRowIndex && colIndex <= maxColIndex, 'selector-cell': true }\"\n      (mouseenter)=\"onSelectCells(rowIndex, colIndex)\"\n    >\n    </span>\n  </div>\n  <span class=\"selector-text\">{{ maxRowIndex + 1 }} x {{ maxColIndex + 1 }}</span>\n</div>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheTableSelect, deps: [{ token: i1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: TheTableSelect, isStandalone: true, selector: "table-select", inputs: { optionsParam: "optionsParam", editor: "editor", beforeInsert: "beforeInsert" }, ngImport: i0, template: "<div class=\"table-selector-container\">\n  <div *ngFor=\"let item of tableData; let rowIndex = index\" class=\"selector-row\" (mousedown)=\"executeTable($event)\">\n    <span\n      *ngFor=\"let item of tableData; let colIndex = index\"\n      [ngClass]=\"{ 'active-cell': rowIndex <= maxRowIndex && colIndex <= maxColIndex, 'selector-cell': true }\"\n      (mouseenter)=\"onSelectCells(rowIndex, colIndex)\"\n    >\n    </span>\n  </div>\n  <span class=\"selector-text\">{{ maxRowIndex + 1 }} x {{ maxColIndex + 1 }}</span>\n</div>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheTableSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheTableSelect, decorators: [{
             type: Component,
             args: [{ selector: 'table-select', standalone: true, imports: [NgFor, NgClass], template: "<div class=\"table-selector-container\">\n  <div *ngFor=\"let item of tableData; let rowIndex = index\" class=\"selector-row\" (mousedown)=\"executeTable($event)\">\n    <span\n      *ngFor=\"let item of tableData; let colIndex = index\"\n      [ngClass]=\"{ 'active-cell': rowIndex <= maxRowIndex && colIndex <= maxColIndex, 'selector-cell': true }\"\n      (mouseenter)=\"onSelectCells(rowIndex, colIndex)\"\n    >\n    </span>\n  </div>\n  <span class=\"selector-text\">{{ maxRowIndex + 1 }} x {{ maxColIndex + 1 }}</span>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.ThyPopoverRef }], propDecorators: { optionsParam: [{
@@ -7076,10 +7187,10 @@ class ThePluginMenuComponent {
     trackByFn(index, item) {
         return item?.key ?? index;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ThePluginMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: ThePluginMenuComponent, isStandalone: true, selector: "the-plugin-menu", inputs: { editor: "editor", theDisplaySearch: "theDisplaySearch", thePluginMenu: "thePluginMenu", sceneKey: "sceneKey", subPanelClass: "subPanelClass", autoActiveFirstItem: "autoActiveFirstItem" }, host: { properties: { "class": "this.containerClassName" } }, viewQueries: [{ propertyName: "dropdownTriggers", predicate: ["dropdownTriggers"], descendants: true, read: ThyDropdownDirective }], ngImport: i0, template: "<div *ngIf=\"theDisplaySearch\" class=\"menu-search px-5 pt-5 pb-2\">\n  <thy-input-search [(ngModel)]=\"keyWords\" placeholder=\"\u641C\u7D22\" thyIconPosition=\"after\" (ngModelChange)=\"updateKeywords(keyWords)\">\n  </thy-input-search>\n</div>\n\n<div\n  *ngIf=\"groupMenu.length > 0; else 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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ThePluginMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: ThePluginMenuComponent, isStandalone: true, selector: "the-plugin-menu", inputs: { editor: "editor", theDisplaySearch: "theDisplaySearch", thePluginMenu: "thePluginMenu", sceneKey: "sceneKey", subPanelClass: "subPanelClass", autoActiveFirstItem: "autoActiveFirstItem" }, host: { properties: { "class": "this.containerClassName" } }, viewQueries: [{ propertyName: "dropdownTriggers", predicate: ["dropdownTriggers"], descendants: true, read: ThyDropdownDirective }], ngImport: i0, template: "<div *ngIf=\"theDisplaySearch\" class=\"menu-search px-5 pt-5 pb-2\">\n  <thy-input-search [(ngModel)]=\"keyWords\" placeholder=\"\u641C\u7D22\" thyIconPosition=\"after\" (ngModelChange)=\"updateKeywords(keyWords)\">\n  </thy-input-search>\n</div>\n\n<div\n  *ngIf=\"groupMenu.length > 0; else empty\"\n  theListBox\n  [keyboardContainer]=\"keyboardContainer\"\n  [autoActiveFirstItem]=\"listBoxAutoActiveFirstItem\"\n  (theListboxChange)=\"theListboxChange($event)\"\n  class=\"thy-dropdown-menu the-plugin-menu-scroll-container pb-2 pt-0\"\n>\n  <ng-container *ngIf=\"iconMenu?.length > 0\">\n    <div theListboxGroup [horizontalColumn]=\"6\" class=\"icon-menu d-flex pl-5 py-1\">\n      <ng-container *ngFor=\"let item of iconMenu; trackBy: trackByFn\">\n        <a\n          *ngIf=\"item.type === ThePluginMenuItemType.icon\"\n          href=\"javascript:;\"\n          class=\"mt-2\"\n          thyAction\n          theListboxOption\n          [theOptionValue]=\"item\"\n          [thyActionIcon]=\"item.icon\"\n          [thyTooltip]=\"item?.name\"\n          [thyDisabled]=\"item.disabled\"\n          [theOptionDisabled]=\"item.disabled\"\n          thePreventDefault\n          (click)=\"handleItemSelection(item)\"\n        ></a>\n      </ng-container>\n    </div>\n    <thy-divider class=\"my-2\"></thy-divider>\n  </ng-container>\n\n  <div theListboxGroup>\n    <ng-container *ngFor=\"let item of groupMenu; trackBy: trackByFn\">\n      <ng-container *ngIf=\"item.isMenuItem && !(item.children?.length > 0) && item.key !== 'table'\">\n        <div\n          thyDropdownMenuItem\n          theListboxOption\n          [theOptionValue]=\"item\"\n          class=\"py-0\"\n          thePreventDefault\n          [thyDisabled]=\"item.disabled\"\n          [theOptionDisabled]=\"item.disabled\"\n          (click)=\"handleItemSelection(item)\"\n        >\n          <div *ngIf=\"item.menuIcon\" class=\"menu-icon mr-2\">\n            <thy-icon [thyIconName]=\"item.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n          </div>\n          <div class=\"menu-content d-flex align-items-center\">\n            <div class=\"menu-item-title w-100\">\n              {{ item.name }}\n            </div>\n          </div>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"item.isMenuItem && item.children?.length > 0\" #hasExpanded>\n        <div\n          #dropdownTriggers\n          [thyDropdown]=\"expand\"\n          thyTrigger=\"hover\"\n          thyDropdownMenuItem\n          [thyDisabled]=\"item.disabled\"\n          theListboxOption\n          [theOptionValue]=\"item\"\n          [theOptionDisabled]=\"item.disabled\"\n          [thyPopoverOptions]=\"expandPopoverOptions\"\n          class=\"py-0\"\n          thePreventDefault\n          [thyPanelClass]=\"subPanelClass\"\n          (click)=\"handleItemSelection(item)\"\n        >\n          <div *ngIf=\"item.menuIcon\" class=\"menu-icon mr-2\">\n            <thy-icon [thyIconName]=\"item.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n          </div>\n          <div class=\"menu-content d-flex align-items-center\">\n            <div class=\"menu-item-title w-100\">\n              {{ item.name }}\n            </div>\n          </div>\n          <div *ngIf=\"item.children?.length > 0\">\n            <thy-icon class=\"text-muted\" thyIconName=\"angle-right\"></thy-icon>\n          </div>\n          <thy-dropdown-menu #expand>\n            <div class=\"the-plugin-menu-container expand-menu\" theListboxGroup>\n              <ng-container *ngFor=\"let child of item.children\">\n                <div\n                  *ngIf=\"child.type === ThePluginMenuItemType.group\"\n                  thyDropdownMenuItem\n                  theListboxOption\n                  class=\"py-0\"\n                  thePreventDefault\n                  [theOptionDisabled]=\"item.disabled\"\n                  [thyDisabled]=\"child.disabled\"\n                  (click)=\"handleItemSelection(child)\"\n                  [theOptionValue]=\"child\"\n                >\n                  <div *ngIf=\"child.menuIcon\" class=\"menu-icon mr-2\">\n                    <thy-icon [thyIconName]=\"child.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n                  </div>\n                  <div class=\"menu-content d-flex align-items-center\">\n                    <div class=\"menu-item-title w-100\">\n                      {{ child.name }}\n                    </div>\n                  </div>\n                </div>\n                <thy-divider *ngIf=\"child === 'divider'\" class=\"my-2\"></thy-divider>\n              </ng-container>\n            </div>\n          </thy-dropdown-menu>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"item.isMenuItem && item.key === 'table'\">\n        <div\n          #dropdownTriggers\n          [thyPopover]=\"tableSelect\"\n          thyPlacement=\"rightTop\"\n          thyTrigger=\"hover\"\n          thyDropdownMenuItem\n          theListboxOption\n          [thyConfig]=\"tableSelectPopoverConfig\"\n          [theOptionValue]=\"item\"\n          [theOptionDisabled]=\"item.disabled\"\n          [thyDisabled]=\"item.disabled\"\n          class=\"py-0\"\n          thePreventDefault\n          (click)=\"handleItemSelection(item)\"\n        >\n          <div class=\"menu-icon mr-2\">\n            <thy-icon [thyIconName]=\"item.menuIcon | getMenuIcon: sceneKey\"></thy-icon>\n          </div>\n          <div class=\"menu-content d-flex align-items-center\">\n            <div class=\"menu-item-title w-100\">\n              {{ item.name }}\n            </div>\n          </div>\n          <div>\n            <thy-icon class=\"text-muted\" thyIconName=\"angle-right\"></thy-icon>\n          </div>\n\n          <ng-template #tableSelect>\n            <table-select\n              class=\"plugin-menu-table the-table-selector-panel\"\n              [editor]=\"editor\"\n              [beforeInsert]=\"removeKeywords\"\n            ></table-select>\n          </ng-template>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"!item.isMenuItem\" #menuGroup>\n        <thy-dropdown-menu-group class=\"font-size-sm\" [thyTitle]=\"item.groupName\"></thy-dropdown-menu-group>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #empty>\n  <div class=\"empty d-flex align-items-center justify-content-center\">\n    <thy-empty [thyMessage]=\"thyMessage\"></thy-empty>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ThyEmptyModule }, { kind: "component", type: i3.ThyEmpty, selector: "thy-empty", inputs: ["thyMessage", "thyTranslationKey", "thyTranslationValues", "thyEntityName", "thyEntityNameTranslateKey", "thyIconName", "thySize", "thyMarginTop", "thyTopAuto", "thyContainer", "thyImageUrl", "thyImageLoading", "thyImageFetchPriority", "thyDescription"] }, { kind: "component", type: TheTableSelect, selector: "table-select", inputs: ["optionsParam", "editor", "beforeInsert"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "component", type: ThyInputSearch, selector: "thy-input-search", inputs: ["name", "placeholder", "thyTheme", "thySearchFocus", "thyIconPosition", "thySize"], outputs: ["clear", "thyClear"] }, { kind: "component", type: ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth", "thyImmediateRender"] }, { kind: "component", type: ThyDropdownMenuGroup, selector: "thy-dropdown-menu-group", inputs: ["thyTitle"] }, { kind: "pipe", type: PluginMenuPipe, name: "getMenuIcon" }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "directive", type: ThyPopoverDirective, selector: "[thyPopover]", inputs: ["thyPopover", "thyTrigger", "thyPlacement", "thyOffset", "thyConfig", "thyShowDelay", "thyHideDelay", "thyAutoAdaptive", "thyDisabled"] }, { kind: "directive", type: TheListboxDirective, selector: "[theListBox]", inputs: ["keyboardContainer", "autoActiveFirstItem"], outputs: ["theListboxChange"], exportAs: ["theListBox"] }, { kind: "directive", type: ThyDropdownDirective, selector: "[thyDropdown]", inputs: ["thyDropdownMenu", "thyDropdown", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyActiveClass", "thyPopoverOptions", "thyPlacement", "thyMenuInsideClosable", "thyPanelClass"], outputs: ["thyActiveChange"] }, { kind: "directive", type: TheListboxGroupDirective, selector: "[theListboxGroup]", inputs: ["horizontalColumn"], exportAs: ["theListboxGroup"] }, { kind: "directive", type: TheListboxOptionDirective, selector: "[theListboxOption]", inputs: ["theOptionValue", "theOptionDisabled"], exportAs: ["theListboxOption"] }, { kind: "directive", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", exportAs: ["thePreventDefault"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ThePluginMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ThePluginMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-plugin-menu', standalone: true, imports: [
                         NgIf,
@@ -7144,10 +7255,10 @@ class ColumnResizeNotifierSource {
         /** Triggers a resize action. */
         this.triggerResize = new Subject();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ColumnResizeNotifierSource, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ColumnResizeNotifierSource }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ColumnResizeNotifierSource, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ColumnResizeNotifierSource }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ColumnResizeNotifierSource, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ColumnResizeNotifierSource, decorators: [{
             type: Injectable
         }] });
 
@@ -7196,10 +7307,10 @@ class TableCellEventDispatcher {
             complete: () => observer.complete()
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TableCellEventDispatcher, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TableCellEventDispatcher }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TableCellEventDispatcher, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TableCellEventDispatcher }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TableCellEventDispatcher, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TableCellEventDispatcher, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i0.NgZone }] });
 
@@ -7230,10 +7341,10 @@ class TheTemplate {
             return null;
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheTemplate, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TheTemplate, isStandalone: true, selector: "the-template,[theTemplate]", viewQueries: [{ propertyName: "paragraphTemplate", first: true, predicate: ["paragraph"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headingOneTemplate", first: true, predicate: ["headingOne"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headingTwoTemplate", first: true, predicate: ["headingTwo"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headingThreeTemplate", first: true, predicate: ["headingThree"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headingFourTemplate", first: true, predicate: ["headingFour"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headingFiveTemplate", first: true, predicate: ["headingFive"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headingSixTemplate", first: true, predicate: ["headingSix"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #paragraph let-context=\"context\" let-viewContext=\"viewContext\">\n  <div theDefaultElement [context]=\"context\" [viewContext]=\"viewContext\" [ngStyle]=\"context.element | elementStyle\"></div>\n</ng-template>\n<ng-template #headingOne let-context=\"context\" let-viewContext=\"viewContext\">\n  <h1\n    theDefaultElement\n    [context]=\"context\"\n    [viewContext]=\"viewContext\"\n    [attr.id]=\"context.element.key\"\n    [ngStyle]=\"context.element | elementStyle\"\n  ></h1>\n</ng-template>\n<ng-template #headingTwo let-context=\"context\" let-viewContext=\"viewContext\">\n  <h2\n    theDefaultElement\n    [context]=\"context\"\n    [viewContext]=\"viewContext\"\n    [attr.id]=\"context.element.key\"\n    [ngStyle]=\"context.element | elementStyle\"\n  ></h2>\n</ng-template>\n<ng-template #headingThree let-context=\"context\" let-viewContext=\"viewContext\">\n  <h3\n    theDefaultElement\n    [context]=\"context\"\n    [viewContext]=\"viewContext\"\n    [attr.id]=\"context.element.key\"\n    [ngStyle]=\"context.element | elementStyle\"\n  ></h3>\n</ng-template>\n<ng-template #headingFour let-context=\"context\" let-viewContext=\"viewContext\">\n  <h4\n    theDefaultElement\n    [context]=\"context\"\n    [viewContext]=\"viewContext\"\n    [attr.id]=\"context.element.key\"\n    [ngStyle]=\"context.element | elementStyle\"\n  ></h4>\n</ng-template>\n<ng-template #headingFive let-context=\"context\" let-viewContext=\"viewContext\">\n  <h5\n    theDefaultElement\n    [context]=\"context\"\n    [viewContext]=\"viewContext\"\n    [attr.id]=\"context.element.key\"\n    [ngStyle]=\"context.element | elementStyle\"\n  ></h5>\n</ng-template>\n<ng-template #headingSix let-context=\"context\" let-viewContext=\"viewContext\">\n  <h6\n    theDefaultElement\n    [context]=\"context\"\n    [viewContext]=\"viewContext\"\n    [attr.id]=\"context.element.key\"\n    [ngStyle]=\"context.element | elementStyle\"\n  ></h6>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: ElementStylePipe, name: "elementStyle" }, { kind: "component", type: TheDefaultElement, selector: "[theDefaultElement]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheTemplate, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: TheTemplate, isStandalone: true, selector: "the-template,[theTemplate]", viewQueries: [{ propertyName: "paragraphTemplate", first: true, predicate: ["paragraph"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headingOneTemplate", first: true, predicate: ["headingOne"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headingTwoTemplate", first: true, predicate: ["headingTwo"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headingThreeTemplate", first: true, predicate: ["headingThree"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headingFourTemplate", first: true, predicate: ["headingFour"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headingFiveTemplate", first: true, predicate: ["headingFive"], descendants: true, read: TemplateRef, static: true }, { propertyName: "headingSixTemplate", first: true, predicate: ["headingSix"], descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<ng-template #paragraph let-context=\"context\" let-viewContext=\"viewContext\">\n  <div theDefaultElement [context]=\"context\" [viewContext]=\"viewContext\" [ngStyle]=\"context.element | elementStyle\"></div>\n</ng-template>\n<ng-template #headingOne let-context=\"context\" let-viewContext=\"viewContext\">\n  <h1\n    theDefaultElement\n    [context]=\"context\"\n    [viewContext]=\"viewContext\"\n    [attr.id]=\"context.element.key\"\n    [ngStyle]=\"context.element | elementStyle\"\n  ></h1>\n</ng-template>\n<ng-template #headingTwo let-context=\"context\" let-viewContext=\"viewContext\">\n  <h2\n    theDefaultElement\n    [context]=\"context\"\n    [viewContext]=\"viewContext\"\n    [attr.id]=\"context.element.key\"\n    [ngStyle]=\"context.element | elementStyle\"\n  ></h2>\n</ng-template>\n<ng-template #headingThree let-context=\"context\" let-viewContext=\"viewContext\">\n  <h3\n    theDefaultElement\n    [context]=\"context\"\n    [viewContext]=\"viewContext\"\n    [attr.id]=\"context.element.key\"\n    [ngStyle]=\"context.element | elementStyle\"\n  ></h3>\n</ng-template>\n<ng-template #headingFour let-context=\"context\" let-viewContext=\"viewContext\">\n  <h4\n    theDefaultElement\n    [context]=\"context\"\n    [viewContext]=\"viewContext\"\n    [attr.id]=\"context.element.key\"\n    [ngStyle]=\"context.element | elementStyle\"\n  ></h4>\n</ng-template>\n<ng-template #headingFive let-context=\"context\" let-viewContext=\"viewContext\">\n  <h5\n    theDefaultElement\n    [context]=\"context\"\n    [viewContext]=\"viewContext\"\n    [attr.id]=\"context.element.key\"\n    [ngStyle]=\"context.element | elementStyle\"\n  ></h5>\n</ng-template>\n<ng-template #headingSix let-context=\"context\" let-viewContext=\"viewContext\">\n  <h6\n    theDefaultElement\n    [context]=\"context\"\n    [viewContext]=\"viewContext\"\n    [attr.id]=\"context.element.key\"\n    [ngStyle]=\"context.element | elementStyle\"\n  ></h6>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: ElementStylePipe, name: "elementStyle" }, { kind: "component", type: TheDefaultElement, selector: "[theDefaultElement]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheTemplate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheTemplate, decorators: [{
             type: Component,
             args: [{ selector: 'the-template,[theTemplate]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgStyle, ElementStylePipe, TheDefaultElement], template: "<ng-template #paragraph let-context=\"context\" let-viewContext=\"viewContext\">\n  <div theDefaultElement [context]=\"context\" [viewContext]=\"viewContext\" [ngStyle]=\"context.element | elementStyle\"></div>\n</ng-template>\n<ng-template #headingOne let-context=\"context\" let-viewContext=\"viewContext\">\n  <h1\n    theDefaultElement\n    [context]=\"context\"\n    [viewContext]=\"viewContext\"\n    [attr.id]=\"context.element.key\"\n    [ngStyle]=\"context.element | elementStyle\"\n  ></h1>\n</ng-template>\n<ng-template #headingTwo let-context=\"context\" let-viewContext=\"viewContext\">\n  <h2\n    theDefaultElement\n    [context]=\"context\"\n    [viewContext]=\"viewContext\"\n    [attr.id]=\"context.element.key\"\n    [ngStyle]=\"context.element | elementStyle\"\n  ></h2>\n</ng-template>\n<ng-template #headingThree let-context=\"context\" let-viewContext=\"viewContext\">\n  <h3\n    theDefaultElement\n    [context]=\"context\"\n    [viewContext]=\"viewContext\"\n    [attr.id]=\"context.element.key\"\n    [ngStyle]=\"context.element | elementStyle\"\n  ></h3>\n</ng-template>\n<ng-template #headingFour let-context=\"context\" let-viewContext=\"viewContext\">\n  <h4\n    theDefaultElement\n    [context]=\"context\"\n    [viewContext]=\"viewContext\"\n    [attr.id]=\"context.element.key\"\n    [ngStyle]=\"context.element | elementStyle\"\n  ></h4>\n</ng-template>\n<ng-template #headingFive let-context=\"context\" let-viewContext=\"viewContext\">\n  <h5\n    theDefaultElement\n    [context]=\"context\"\n    [viewContext]=\"viewContext\"\n    [attr.id]=\"context.element.key\"\n    [ngStyle]=\"context.element | elementStyle\"\n  ></h5>\n</ng-template>\n<ng-template #headingSix let-context=\"context\" let-viewContext=\"viewContext\">\n  <h6\n    theDefaultElement\n    [context]=\"context\"\n    [viewContext]=\"viewContext\"\n    [attr.id]=\"context.element.key\"\n    [ngStyle]=\"context.element | elementStyle\"\n  ></h6>\n</ng-template>\n" }]
         }], propDecorators: { paragraphTemplate: [{
@@ -7267,6 +7378,10 @@ class TheText extends BaseTextComponent {
         this.excludes = ['color', 'font-size', 'background-color', 'text'];
         this.attributes = [];
     }
+    onContextChange() {
+        super.onContextChange();
+        this.applyTextMark();
+    }
     applyTextMark() {
         this.attributes.forEach(attr => {
             this.renderer2.removeAttribute(this.elementRef.nativeElement, attr);
@@ -7294,14 +7409,10 @@ class TheText extends BaseTextComponent {
             this.renderer2.removeStyle(this.elementRef.nativeElement, 'background-color');
         }
     }
-    onContextChange() {
-        super.onContextChange();
-        this.applyTextMark();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheText, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TheText, isStandalone: true, selector: "span[theText]", host: { attributes: { "data-slate-node": "text" } }, usesInheritance: true, ngImport: i0, template: ``, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheText, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: TheText, isStandalone: true, selector: "span[theText]", host: { attributes: { "data-slate-node": "text" } }, usesInheritance: true, ngImport: i0, template: ``, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheText, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheText, decorators: [{
             type: Component,
             args: [{
                     selector: 'span[theText]',
@@ -7309,8 +7420,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
                     host: {
                         'data-slate-node': 'text'
                     },
-                    standalone: true,
-                    imports: [SlateLeaves]
+                    standalone: true
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }] });
 
@@ -7400,8 +7510,8 @@ class TheInlineToolbar {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheInlineToolbar, deps: [{ token: i0.ElementRef }, { token: i2.ScrollDispatcher }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TheInlineToolbar, isStandalone: true, selector: "the-inline-toolbar", inputs: { editor: "editor", toolbarItems: "toolbarItems" }, host: { properties: { "class.hide": "toolbarItems.length === 0" } }, viewQueries: [{ propertyName: "inlineToolbar", first: true, predicate: ["inlineToolbar"], descendants: true }], ngImport: i0, template: `<the-toolbar
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheInlineToolbar, deps: [{ token: i0.ElementRef }, { token: i2.ScrollDispatcher }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: TheInlineToolbar, isStandalone: true, selector: "the-inline-toolbar", inputs: { editor: "editor", toolbarItems: "toolbarItems" }, host: { properties: { "class.hide": "toolbarItems.length === 0" } }, viewQueries: [{ propertyName: "inlineToolbar", first: true, predicate: ["inlineToolbar"], descendants: true }], ngImport: i0, template: `<the-toolbar
         #inlineToolbar
         class="the-inline-toolbar"
         [editor]="editor"
@@ -7409,7 +7519,7 @@ class TheInlineToolbar {
         [isMore]="false"
     ></the-toolbar> `, isInline: true, dependencies: [{ kind: "component", type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheInlineToolbar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheInlineToolbar, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-inline-toolbar',
@@ -7443,20 +7553,20 @@ const closeConversionHint = (editor) => {
     }
 };
 const withDeserializeMd = (editor) => {
-    const { insertData, onKeydown } = editor;
+    const { insertFragmentData, onKeydown } = editor;
     editor.onKeydown = (event) => {
         closeConversionHint(editor);
         onKeydown(event);
     };
-    editor.insertData = (data) => {
+    editor.insertFragmentData = async (data) => {
         const popover = editor.injector.get(ThyPopover);
         const viewContainerRef = editor.injector.get(ViewContainerRef);
         const cdr = editor.injector.get(ChangeDetectorRef);
-        const plainFragment = data.getData('text/plain');
-        const slateFragment = data.getData(`application/${CLIPBOARD_FORMAT_KEY}`);
         const oldRange = editor.selection;
+        const clipboardData = await getClipboardData(data);
+        const plainFragment = clipboardData?.text;
         closeConversionHint(editor);
-        if (plainFragment && isMarkdownSyntax(plainFragment) && !slateFragment) {
+        if (plainFragment && isMarkdownSyntax(plainFragment) && !clipboardData?.elements) {
             setTimeout(() => {
                 const overlay = editor.injector.get(Overlay);
                 const bodyElement = document.body;
@@ -7493,7 +7603,7 @@ const withDeserializeMd = (editor) => {
                                         Transforms.insertFragment(editor, fragment);
                                         AngularEditor.focus(editor);
                                     });
-                                    return;
+                                    return true;
                                 }
                                 else {
                                     closeConversionHint(editor);
@@ -7519,7 +7629,7 @@ const withDeserializeMd = (editor) => {
                 cdr.markForCheck();
             });
         }
-        insertData(data);
+        return insertFragmentData(data);
     };
     return editor;
 };
@@ -7595,10 +7705,10 @@ class TheConversionHint {
     clearCloseTimer() {
         clearInterval(this.closeTimer);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheConversionHint, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TheConversionHint, isStandalone: true, selector: "the-conversion-hint", inputs: { editor: "editor", conversion: "conversion" }, host: { listeners: { "mouseenter": "mouseenter()", "mouseleave": "mouseleave()" }, classAttribute: "the-conversion-hint" }, ngImport: i0, template: "<ng-container>\n  <thy-alert thyType=\"primary-weak\" thyIcon=\"info-circle-fill\" thyCloseable=\"true\" thyMessage=\"\u68C0\u6D4B\u5230\u7C98\u8D34\u5185\u5BB9\u7B26\u5408Markdown\u8BED\u6CD5\">\n    <ng-template #operation>\n      <a href=\"javascript:;\" thyAlertActionItem (click)=\"conversion()\"> \u7ACB\u5373\u8F6C\u6362 </a>\n    </ng-template>\n  </thy-alert>\n</ng-container>\n", dependencies: [{ kind: "component", type: ThyAlert, selector: "thy-alert", inputs: ["thyType", "thyTheme", "thyMessage", "thyIcon", "thyCloseable"] }, { kind: "directive", type: ThyAlertActionItemDirective, selector: "[thyAlertActionItem]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheConversionHint, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: TheConversionHint, isStandalone: true, selector: "the-conversion-hint", inputs: { editor: "editor", conversion: "conversion" }, host: { listeners: { "mouseenter": "mouseenter()", "mouseleave": "mouseleave()" }, classAttribute: "the-conversion-hint" }, ngImport: i0, template: "<ng-container>\n  <thy-alert thyType=\"primary-weak\" thyIcon=\"info-circle-fill\" thyCloseable=\"true\" thyMessage=\"\u68C0\u6D4B\u5230\u7C98\u8D34\u5185\u5BB9\u7B26\u5408Markdown\u8BED\u6CD5\">\n    <ng-template #operation>\n      <a href=\"javascript:;\" thyAlertActionItem (click)=\"conversion()\"> \u7ACB\u5373\u8F6C\u6362 </a>\n    </ng-template>\n  </thy-alert>\n</ng-container>\n", dependencies: [{ kind: "component", type: ThyAlert, selector: "thy-alert", inputs: ["thyType", "thyTheme", "thyMessage", "thyIcon", "thyCloseable"] }, { kind: "directive", type: ThyAlertActionItemDirective, selector: "[thyAlertActionItem]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheConversionHint, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheConversionHint, decorators: [{
             type: Component,
             args: [{ selector: 'the-conversion-hint', host: {
                         class: 'the-conversion-hint'
@@ -7662,10 +7772,10 @@ class TheContextMenu {
         item.backgroundColor = color;
         item.activeHandle(undefined, item);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheContextMenu, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TheContextMenu, isStandalone: true, selector: "the-contextmenu", inputs: { menuEntities: "menuEntities", actionHandle: "actionHandle", activeHandle: "activeHandle", deactivateHandle: "deactivateHandle" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)" }, properties: { "class.the-overlay-menu-wrap": "this.wrap" } }, ngImport: i0, template: "<div class=\"thy-dropdown-menu\">\n  <ng-container *ngFor=\"let menuItem of menuEntities\">\n    <ng-container *ngIf=\"menuItem.visibility && !menuItem?.isInputNumber && menuItem.key !== 'background-color'\">\n      <ng-template [ngTemplateOutlet]=\"defaultMenuTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"menuItem.visibility && menuItem.key === 'background-color'\">\n      <ng-template [ngTemplateOutlet]=\"backgroundColorTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"menuItem.visibility && menuItem?.isInputNumber\">\n      <ng-template [ngTemplateOutlet]=\"inputNumberMenuTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n    </ng-container>\n    <thy-dropdown-menu-divider *ngIf=\"menuItem.divider && menuItem.visibility\"></thy-dropdown-menu-divider>\n  </ng-container>\n</div>\n\n<ng-template #defaultMenuTemplate let-item>\n  <a\n    href=\"javascript:;\"\n    thyDropdownMenuItem\n    (mousedown)=\"itemMousedown($event, item)\"\n    (mouseenter)=\"itemMouseenter($event, item)\"\n    (mouseleave)=\"itemMouseleave($event, item)\"\n  >\n    <span thyDropdownMenuItemIcon>\n      <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n    </span>\n    <span thyDropdownMenuItemName>{{ item.name }}</span>\n    <span *ngIf=\"item.extendIcon\" thyDropdownMenuItemExtendIcon>\n      <thy-icon thyIconName=\"{{ item.extendIcon }}\"></thy-icon>\n    </span>\n  </a>\n</ng-template>\n\n<ng-template #backgroundColorTemplate let-item>\n  <a\n    href=\"javascript:;\"\n    thyDropdownMenuItem\n    thyColorPicker\n    thyTrigger=\"hover\"\n    thyPlacement=\"rightTop\"\n    [(ngModel)]=\"item.backgroundColor\"\n    (ngModelChange)=\"changeColor($event, item)\"\n    [thyHasBackdrop]=\"false\"\n  >\n    <span thyDropdownMenuItemIcon>\n      <thy-icon [thyIconName]=\"item.icon\" thyIconType=\"twotone\" [thyTwotoneColor]=\"item.backgroundColor\"></thy-icon>\n    </span>\n    <span thyDropdownMenuItemName>{{ item.name }}</span>\n    <span *ngIf=\"item.extendIcon\" thyDropdownMenuItemExtendIcon>\n      <thy-icon thyIconName=\"{{ item.extendIcon }}\"></thy-icon>\n    </span>\n  </a>\n</ng-template>\n\n<ng-template #inputNumberMenuTemplate let-item>\n  <a href=\"javascript:;\" class=\"the-input-number-menu\" thyDropdownMenuItem (click)=\"itemMousedown($event, item)\">\n    <span thyDropdownMenuItemIcon>\n      <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n    </span>\n    <span thyDropdownMenuItemName class=\"d-flex align-items-center\">\n      {{ item.name }}\n      <thy-input-number\n        #inputNumber\n        class=\"mx-2\"\n        thySize=\"sm\"\n        [(ngModel)]=\"item.count\"\n        [thyStep]=\"1\"\n        [thyMin]=\"1\"\n        (click)=\"inputNumberFocus($event)\"\n        (thyEnter)=\"itemEnterHandle($event, item)\"\n        thyStopPropagation\n      ></thy-input-number>\n      {{ item.nameSuffix }}\n    </span>\n  </a>\n</ng-template>\n", dependencies: [{ 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: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyInputNumber, selector: "thy-input-number", inputs: ["thyAutoFocus", "thyPlaceholder", "thyDisabled", "thyMax", "thyMin", "thyStep", "thyStepDelay", "thySize", "thyPrecision", "thySuffix"], outputs: ["thyBlur", "thyFocus"] }, { kind: "component", type: ThyDropdownMenuDivider, selector: "thy-dropdown-menu-divider" }, { kind: "directive", type: ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }, { kind: "directive", type: ThyColorPickerDirective, selector: "[thyColorPicker]", inputs: ["thyOffset", "thyHasBackdrop", "thyDefaultColor", "thyTransparentColorSelectable", "thyPresetColors", "thyPlacement", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyDisabled"], outputs: ["thyPanelOpen", "thyPanelClose"] }, { kind: "directive", type: ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: ThyDropdownMenuItemExtendIconDirective, selector: "[thyDropdownMenuItemExtendIcon]" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheContextMenu, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: TheContextMenu, isStandalone: true, selector: "the-contextmenu", inputs: { menuEntities: "menuEntities", actionHandle: "actionHandle", activeHandle: "activeHandle", deactivateHandle: "deactivateHandle" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)", "mousedown": "handleMouseDown($event)" }, properties: { "class.the-overlay-menu-wrap": "this.wrap" } }, ngImport: i0, template: "<div class=\"thy-dropdown-menu\">\n  <ng-container *ngFor=\"let menuItem of menuEntities\">\n    <ng-container *ngIf=\"menuItem.visibility && !menuItem?.isInputNumber && menuItem.key !== 'background-color'\">\n      <ng-template [ngTemplateOutlet]=\"defaultMenuTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"menuItem.visibility && menuItem.key === 'background-color'\">\n      <ng-template [ngTemplateOutlet]=\"backgroundColorTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n    </ng-container>\n    <ng-container *ngIf=\"menuItem.visibility && menuItem?.isInputNumber\">\n      <ng-template [ngTemplateOutlet]=\"inputNumberMenuTemplate\" [ngTemplateOutletContext]=\"{ $implicit: menuItem }\"></ng-template>\n    </ng-container>\n    <thy-dropdown-menu-divider *ngIf=\"menuItem.divider && menuItem.visibility\"></thy-dropdown-menu-divider>\n  </ng-container>\n</div>\n\n<ng-template #defaultMenuTemplate let-item>\n  <a\n    href=\"javascript:;\"\n    thyDropdownMenuItem\n    (mousedown)=\"itemMousedown($event, item)\"\n    (mouseenter)=\"itemMouseenter($event, item)\"\n    (mouseleave)=\"itemMouseleave($event, item)\"\n  >\n    <span thyDropdownMenuItemIcon>\n      <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n    </span>\n    <span thyDropdownMenuItemName>{{ item.name }}</span>\n    <span *ngIf=\"item.extendIcon\" thyDropdownMenuItemExtendIcon>\n      <thy-icon thyIconName=\"{{ item.extendIcon }}\"></thy-icon>\n    </span>\n  </a>\n</ng-template>\n\n<ng-template #backgroundColorTemplate let-item>\n  <a\n    href=\"javascript:;\"\n    thyDropdownMenuItem\n    thyColorPicker\n    thyTrigger=\"hover\"\n    thyPlacement=\"rightTop\"\n    [(ngModel)]=\"item.backgroundColor\"\n    (ngModelChange)=\"changeColor($event, item)\"\n    [thyHasBackdrop]=\"false\"\n  >\n    <span thyDropdownMenuItemIcon>\n      <thy-icon [thyIconName]=\"item.icon\" thyIconType=\"twotone\" [thyTwotoneColor]=\"item.backgroundColor\"></thy-icon>\n    </span>\n    <span thyDropdownMenuItemName>{{ item.name }}</span>\n    <span *ngIf=\"item.extendIcon\" thyDropdownMenuItemExtendIcon>\n      <thy-icon thyIconName=\"{{ item.extendIcon }}\"></thy-icon>\n    </span>\n  </a>\n</ng-template>\n\n<ng-template #inputNumberMenuTemplate let-item>\n  <a href=\"javascript:;\" class=\"the-input-number-menu\" thyDropdownMenuItem (click)=\"itemMousedown($event, item)\">\n    <span thyDropdownMenuItemIcon>\n      <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n    </span>\n    <span thyDropdownMenuItemName class=\"d-flex align-items-center\">\n      {{ item.name }}\n      <thy-input-number\n        #inputNumber\n        class=\"mx-2\"\n        thySize=\"sm\"\n        [(ngModel)]=\"item.count\"\n        [thyStep]=\"1\"\n        [thyMin]=\"1\"\n        (click)=\"inputNumberFocus($event)\"\n        (thyEnter)=\"itemEnterHandle($event, item)\"\n        thyStopPropagation\n      ></thy-input-number>\n      {{ item.nameSuffix }}\n    </span>\n  </a>\n</ng-template>\n", dependencies: [{ 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: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyInputNumber, selector: "thy-input-number", inputs: ["thyAutoFocus", "thyPlaceholder", "thyDisabled", "thyMax", "thyMin", "thyStep", "thyStepDelay", "thySize", "thyPrecision", "thySuffix"], outputs: ["thyBlur", "thyFocus"] }, { kind: "component", type: ThyDropdownMenuDivider, selector: "thy-dropdown-menu-divider" }, { kind: "directive", type: ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }, { kind: "directive", type: ThyColorPickerDirective, selector: "[thyColorPicker]", inputs: ["thyOffset", "thyHasBackdrop", "thyDefaultColor", "thyTransparentColorSelectable", "thyPresetColors", "thyPlacement", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyDisabled"], outputs: ["thyPanelOpen", "thyPanelClose"] }, { kind: "directive", type: ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: ThyDropdownMenuItemExtendIconDirective, selector: "[thyDropdownMenuItemExtendIcon]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheContextMenu, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheContextMenu, decorators: [{
             type: Component,
             args: [{ selector: 'the-contextmenu', standalone: true, imports: [
                         FormsModule,
@@ -7847,10 +7957,10 @@ class TheColumnResizeOverlayHandle {
             this.resizeNotifier.resizeStarted.next(sizeMessage);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheColumnResizeOverlayHandle, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: ResizeRef }, { token: TableCellEventDispatcher }, { token: DOCUMENT }, { token: ColumnResizeNotifierSource }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TheColumnResizeOverlayHandle, isStandalone: true, selector: "ng-component", host: { classAttribute: "the-table-resize-overlay-thumb" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheColumnResizeOverlayHandle, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: ResizeRef }, { token: TableCellEventDispatcher }, { token: DOCUMENT }, { token: ColumnResizeNotifierSource }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: TheColumnResizeOverlayHandle, isStandalone: true, selector: "ng-component", host: { classAttribute: "the-table-resize-overlay-thumb" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheColumnResizeOverlayHandle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheColumnResizeOverlayHandle, decorators: [{
             type: Component,
             args: [{
                     host: { class: 'the-table-resize-overlay-thumb' },
@@ -7944,10 +8054,10 @@ class ColumnResizingStore {
     popCol() {
         this.resizeCols.pop();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ColumnResizingStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ColumnResizingStore }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ColumnResizingStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ColumnResizingStore }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ColumnResizingStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ColumnResizingStore, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -8054,10 +8164,10 @@ class TheColumnResizeDirective {
         this.destroyed.next();
         this.destroyed.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheColumnResizeDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: TableCellEventDispatcher }, { token: ColumnResizeNotifierSource }, { token: THE_TABLE_COMPONENT_TOKEN }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: TheColumnResizeDirective, isStandalone: true, selector: "div[theColumnResize]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheColumnResizeDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: TableCellEventDispatcher }, { token: ColumnResizeNotifierSource }, { token: THE_TABLE_COMPONENT_TOKEN }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: TheColumnResizeDirective, isStandalone: true, selector: "div[theColumnResize]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheColumnResizeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheColumnResizeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'div[theColumnResize]',
@@ -8480,10 +8590,10 @@ class TheBlockquote extends TheBaseElement {
         this.elementRef = elementRef;
         this.cdr = cdr;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheBlockquote, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TheBlockquote, isStandalone: true, selector: "blockquote[theBlockquote]", usesInheritance: true, ngImport: i0, template: ``, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheBlockquote, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: TheBlockquote, isStandalone: true, selector: "blockquote[theBlockquote]", usesInheritance: true, ngImport: i0, template: ``, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheBlockquote, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheBlockquote, decorators: [{
             type: Component,
             args: [{
                     selector: 'blockquote[theBlockquote]',
@@ -8639,12 +8749,17 @@ class TheCode extends TheBaseElement {
             fromEvent(this.nativeElement, 'mousedown')
                 .pipe(takeUntil(this.destroy$))
                 .subscribe(event => {
-                event.stopPropagation();
-                event.preventDefault();
-                const isBlockOperation = this.isCollapsedAndNonReadonly &&
-                    this.nativeElement.querySelector('.the-code-block-operation')?.contains(event.target);
-                const isCodemirror = this.nativeElement.querySelector('.ng-codemirror')?.contains(event.target);
-                this.isHightLight = !isCodemirror && !isBlockOperation;
+                if (event.target.className.includes('thy-resizable-handle')) {
+                    this.isHightLight = true;
+                }
+                else {
+                    event.stopPropagation();
+                    event.preventDefault();
+                    const isBlockOperation = this.isCollapsedAndNonReadonly &&
+                        this.nativeElement.querySelector('.the-code-block-operation')?.contains(event.target);
+                    const isCodemirror = this.nativeElement.querySelector('.ng-codemirror')?.contains(event.target);
+                    this.isHightLight = !isCodemirror && !isBlockOperation;
+                }
             });
         });
     }
@@ -8723,7 +8838,7 @@ class TheCode extends TheBaseElement {
     }
     onCopy(event) {
         event.preventDefault();
-        copyNode(this.editor, this.element, this.thyNotifyService, this.codemirror.editor);
+        copyNode(this.editor, this.element, this.thyNotifyService);
     }
     focusChange(codeMirrorFocused) {
         if (codeMirrorFocused) {
@@ -8768,10 +8883,10 @@ class TheCode extends TheBaseElement {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheCode, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$1.ThyNotifyService }, { token: TheContextService }, { token: i0.NgZone }, { token: i1.ThyPopover }, { token: i2.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TheCode, isStandalone: true, selector: "div[theCode]", host: { classAttribute: "the-code-container" }, viewQueries: [{ propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true, read: TemplateRef, static: true }, { propertyName: "codemirror", first: true, predicate: ["codemirror"], descendants: true, read: CodeMirrorComponent }, { propertyName: "toolbarDropdown", first: true, predicate: TheToolbarDropdown, descendants: true, read: TheToolbarDropdown }], usesInheritance: true, ngImport: i0, template: "<!-- \u53EA\u8BFB\u6A21\u5F0F\u4E0BCodeMirror-sizer\u9AD8\u5EA6\u6BD4\u7F16\u8F91\u6A21\u5F0F\u4E0B\u591A2px\uFF0C\u8BBE\u7F6EthyMinHeight\u4E3A46px\u9632\u6B62\u62D6\u62FD\u5230\u6700\u5C0F\u9AD8\u5EA6\u65F6\u53EA\u8BFB\u6A21\u5F0F\u4E0B\u51FA\u73B0\u6EDA\u52A8\u6761  -->\n<div\n  thyResizable\n  [thyMinHeight]=\"46\"\n  [thyBounds]=\"resizeBounds\"\n  [style.height.px]=\"resizeHeight\"\n  (thyResize)=\"onResize($event)\"\n  (thyResizeEnd)=\"onEndResize()\"\n  class=\"resize-code-container\"\n  [ngClass]=\"{ focus: isCollapsedAndNonReadonly, readonly: options.readOnly, active: isHightLight && isCollapsedAndNonReadonly }\"\n>\n  <ng-codemirror\n    *ngIf=\"startRenderCodemirror\"\n    #codemirror\n    contenteditable=\"false\"\n    class=\"ng-codemirror-wrapper\"\n    [ngStyle]=\"{ maxHeight: maxHeight > 0 ? maxHeight + 'px' : 'auto' }\"\n    [options]=\"options\"\n    [ngModel]=\"code\"\n    [delayRefreshTime]=\"300\"\n    (ngModelChange)=\"codeChange($event)\"\n    (focusChange)=\"focusChange($event)\"\n    [autoMaxHeight]=\"maxHeight\"\n  >\n  </ng-codemirror>\n  <thy-resize-handle thyDirection=\"bottom\" class=\"code-resize-icon\" *ngIf=\"isCollapsedAndNonReadonly\"></thy-resize-handle>\n</div>\n\n<ng-template #toolbar>\n  <thy-actions thySize=\"xxs\" thePreventDefault>\n    <the-toolbar-dropdown\n      [menus]=\"menus\"\n      [toolbarItem]=\"activeLanguage\"\n      [dropdownItemKey]=\"activeLanguage?.key\"\n      [itemMousedownHandle]=\"onChangeLanguage\"\n    >\n    </the-toolbar-dropdown>\n    <span class=\"auto-wrap d-flex align-items-center px-2 text-secondary\">\n      <span>\u81EA\u52A8\u6362\u884C</span>\n      <thy-switch\n        class=\"auto-wrap-btn d-flex ml-1\"\n        [(ngModel)]=\"options.lineWrapping\"\n        (ngModelChange)=\"onChangeWrap($event)\"\n        thySize=\"sm\"\n      ></thy-switch>\n    </span>\n    <a href=\"javascript:;\" thyAction thyActionIcon=\"copy\" thyTooltip=\"\u590D\u5236\" thyTooltipPlacement=\"top\" (click)=\"onCopy($event)\"></a>\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    <a\n      href=\"javascript:;\"\n      thyAction\n      thyType=\"danger\"\n      thyActionIcon=\"trash\"\n      thyTooltip=\"\u5220\u9664\"\n      thyTooltipPlacement=\"top\"\n      (click)=\"onDelete($event)\"\n    ></a>\n  </thy-actions>\n</ng-template>\n", dependencies: [{ kind: "directive", type: ThyResizableDirective, selector: "[thyResizable]", inputs: ["thyBounds", "thyMaxHeight", "thyMaxWidth", "thyMinHeight", "thyMinWidth", "thyGridColumnCount", "thyMaxColumn", "thyMinColumn", "thyLockAspectRatio", "thyPreview", "thyDisabled"], outputs: ["thyResize", "thyResizeStart", "thyResizeEnd"] }, { 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"] }, { 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: SlateModule }, { kind: "ngmodule", type: CodemirrorModule }, { kind: "component", type: i6.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["autoMaxHeight", "options", "delayRefreshTime"], outputs: ["focusChange"] }, { kind: "component", type: ThySwitch, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled", "thyLoading"], outputs: ["thyChange"] }, { 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: ThyActions, selector: "thy-actions", inputs: ["thySize"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyResizeHandle, selector: "thy-resize-handle, [thy-resize-handle]", inputs: ["thyDirection", "thyLine"], outputs: ["thyMouseDown"], exportAs: ["thyResizeHandle"] }, { kind: "component", type: TheToolbarDropdown, selector: "the-toolbar-dropdown" }, { kind: "directive", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", exportAs: ["thePreventDefault"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheCode, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$1.ThyNotifyService }, { token: TheContextService }, { token: i0.NgZone }, { token: i1.ThyPopover }, { token: i2.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: TheCode, isStandalone: true, selector: "div[theCode]", host: { classAttribute: "the-code-container" }, viewQueries: [{ propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true, read: TemplateRef, static: true }, { propertyName: "codemirror", first: true, predicate: ["codemirror"], descendants: true, read: CodeMirrorComponent }, { propertyName: "toolbarDropdown", first: true, predicate: TheToolbarDropdown, descendants: true, read: TheToolbarDropdown }], usesInheritance: true, ngImport: i0, template: "<!-- \u53EA\u8BFB\u6A21\u5F0F\u4E0BCodeMirror-sizer\u9AD8\u5EA6\u6BD4\u7F16\u8F91\u6A21\u5F0F\u4E0B\u591A2px\uFF0C\u8BBE\u7F6EthyMinHeight\u4E3A46px\u9632\u6B62\u62D6\u62FD\u5230\u6700\u5C0F\u9AD8\u5EA6\u65F6\u53EA\u8BFB\u6A21\u5F0F\u4E0B\u51FA\u73B0\u6EDA\u52A8\u6761  -->\n<div\n  thyResizable\n  [thyMinHeight]=\"46\"\n  [thyBounds]=\"resizeBounds\"\n  [style.height.px]=\"resizeHeight\"\n  (thyResize)=\"onResize($event)\"\n  (thyResizeEnd)=\"onEndResize()\"\n  class=\"resize-code-container\"\n  [ngClass]=\"{ focus: isCollapsedAndNonReadonly, readonly: options.readOnly, active: isHightLight && isCollapsedAndNonReadonly }\"\n>\n  <ng-codemirror\n    *ngIf=\"startRenderCodemirror\"\n    #codemirror\n    contenteditable=\"false\"\n    class=\"ng-codemirror-wrapper\"\n    [ngStyle]=\"{ maxHeight: maxHeight > 0 ? maxHeight + 'px' : 'auto' }\"\n    [options]=\"options\"\n    [ngModel]=\"code\"\n    [delayRefreshTime]=\"300\"\n    (ngModelChange)=\"codeChange($event)\"\n    (focusChange)=\"focusChange($event)\"\n    [autoMaxHeight]=\"maxHeight\"\n  >\n  </ng-codemirror>\n  <thy-resize-handle thyDirection=\"bottom\" class=\"code-resize-icon\" *ngIf=\"isCollapsedAndNonReadonly\"></thy-resize-handle>\n</div>\n\n<ng-template #toolbar>\n  <thy-actions thySize=\"xxs\" thePreventDefault>\n    <the-toolbar-dropdown\n      [menus]=\"menus\"\n      [toolbarItem]=\"activeLanguage\"\n      [dropdownItemKey]=\"activeLanguage?.key\"\n      [itemMousedownHandle]=\"onChangeLanguage\"\n    >\n    </the-toolbar-dropdown>\n    <span class=\"auto-wrap d-flex align-items-center px-2 text-secondary\">\n      <span>\u81EA\u52A8\u6362\u884C</span>\n      <thy-switch\n        class=\"auto-wrap-btn d-flex ml-1\"\n        [(ngModel)]=\"options.lineWrapping\"\n        (ngModelChange)=\"onChangeWrap($event)\"\n        thySize=\"sm\"\n      ></thy-switch>\n    </span>\n    <a href=\"javascript:;\" thyAction thyActionIcon=\"copy\" thyTooltip=\"\u590D\u5236\" thyTooltipPlacement=\"top\" (click)=\"onCopy($event)\"></a>\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    <a\n      href=\"javascript:;\"\n      thyAction\n      thyType=\"danger\"\n      thyActionIcon=\"trash\"\n      thyTooltip=\"\u5220\u9664\"\n      thyTooltipPlacement=\"top\"\n      (click)=\"onDelete($event)\"\n    ></a>\n  </thy-actions>\n</ng-template>\n", dependencies: [{ kind: "directive", type: ThyResizableDirective, selector: "[thyResizable]", inputs: ["thyBounds", "thyMaxHeight", "thyMaxWidth", "thyMinHeight", "thyMinWidth", "thyGridColumnCount", "thyMaxColumn", "thyMinColumn", "thyLockAspectRatio", "thyPreview", "thyDisabled"], outputs: ["thyResize", "thyResizeStart", "thyResizeEnd"] }, { 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"] }, { 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: SlateModule }, { kind: "ngmodule", type: CodemirrorModule }, { kind: "component", type: i6.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["autoMaxHeight", "options", "delayRefreshTime"], outputs: ["focusChange"] }, { kind: "component", type: ThySwitch, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled", "thyLoading"], outputs: ["thyChange"] }, { 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: ThyActions, selector: "thy-actions", inputs: ["thySize"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyResizeHandle, selector: "thy-resize-handle, [thy-resize-handle]", inputs: ["thyDirection", "thyLine"], outputs: ["thyMouseDown"], exportAs: ["thyResizeHandle"] }, { kind: "component", type: TheToolbarDropdown, selector: "the-toolbar-dropdown" }, { kind: "directive", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", exportAs: ["thePreventDefault"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheCode, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheCode, decorators: [{
             type: Component,
             args: [{ selector: 'div[theCode]', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'the-code-container'
@@ -8822,15 +8937,15 @@ const withCode = (editor) => {
         }
         return renderElement(element);
     };
-    editor.setFragmentData = unit => {
-        setFragmentData(unit);
+    editor.setFragmentData = (data, originEvent) => {
         const { selection } = editor;
         const [start] = Editor.edges(editor, selection);
         if (isNodeTypeIn(editor, [ElementKinds.code], { at: start })) {
             const [codeNode] = getAboveByType(editor, ElementKinds.code);
-            unit.setData('text/plain', codeNode.content.trim());
-            return unit;
+            setClipboardDataByDom(editor, codeNode, data);
+            return;
         }
+        setFragmentData(data, originEvent);
     };
     return editor;
 };
@@ -8931,10 +9046,10 @@ class TheColorToolbarItem extends TheBaseToolbarItem {
             AngularEditor.focus(this.editor);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheColorToolbarItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TheColorToolbarItem, isStandalone: true, selector: "the-color-toolbar-item", host: { classAttribute: "the-color-toolbar-item" }, usesInheritance: true, ngImport: i0, template: "<thy-actions\n  class=\"d-flex p-0\"\n  thySize=\"zero\"\n  thyTooltipPlacement=\"top\"\n  [thyTooltip]=\"toolbarItem.name\"\n  [ngClass]=\"{ 'thy-default-picker-active': pickerActive }\"\n>\n  <a href=\"javascript:;\" class=\"color\" thyAction (mousedown)=\"selectColor($event)\">\n    <thy-icon\n      thyIconType=\"twotone\"\n      [thyIconName]=\"toolbarItem.icon\"\n      [thyTwotoneColor]=\"toolbarItem.key === 'color' ? lastTextColor : lastBackgroundColor\"\n      (mousedown)=\"selectColor($event)\"\n    ></thy-icon>\n  </a>\n  <a\n    class=\"pl-0 pr-0 caret-down\"\n    href=\"javascript:;\"\n    thyAction\n    thyColorPicker\n    thyPlacement=\"bottomLeft\"\n    [(ngModel)]=\"selectedColor\"\n    (thyPanelOpen)=\"pickerActive = true\"\n    (thyPanelOpen)=\"colorPanelOpen($event)\"\n    (thyPanelClose)=\"colorPanelClose()\"\n    (ngModelChange)=\"changeColor($event)\"\n    (mousedown)=\"preventDefault($event)\"\n  >\n    <thy-icon class=\"link-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n  </a>\n</thy-actions>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: ThyActions, selector: "thy-actions", inputs: ["thySize"] }, { kind: "directive", type: ThyColorPickerDirective, selector: "[thyColorPicker]", inputs: ["thyOffset", "thyHasBackdrop", "thyDefaultColor", "thyTransparentColorSelectable", "thyPresetColors", "thyPlacement", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyDisabled"], outputs: ["thyPanelOpen", "thyPanelClose"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheColorToolbarItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: TheColorToolbarItem, isStandalone: true, selector: "the-color-toolbar-item", host: { classAttribute: "the-color-toolbar-item" }, usesInheritance: true, ngImport: i0, template: "<thy-actions\n  class=\"d-flex p-0\"\n  thySize=\"zero\"\n  thyTooltipPlacement=\"top\"\n  [thyTooltip]=\"toolbarItem.name\"\n  [ngClass]=\"{ 'thy-default-picker-active': pickerActive }\"\n>\n  <a href=\"javascript:;\" class=\"color\" thyAction (mousedown)=\"selectColor($event)\">\n    <thy-icon\n      thyIconType=\"twotone\"\n      [thyIconName]=\"toolbarItem.icon\"\n      [thyTwotoneColor]=\"toolbarItem.key === 'color' ? lastTextColor : lastBackgroundColor\"\n      (mousedown)=\"selectColor($event)\"\n    ></thy-icon>\n  </a>\n  <a\n    class=\"pl-0 pr-0 caret-down\"\n    href=\"javascript:;\"\n    thyAction\n    thyColorPicker\n    thyPlacement=\"bottomLeft\"\n    [(ngModel)]=\"selectedColor\"\n    (thyPanelOpen)=\"pickerActive = true\"\n    (thyPanelOpen)=\"colorPanelOpen($event)\"\n    (thyPanelClose)=\"colorPanelClose()\"\n    (ngModelChange)=\"changeColor($event)\"\n    (mousedown)=\"preventDefault($event)\"\n  >\n    <thy-icon class=\"link-down-icon font-size-sm text-desc\" thyIconName=\"caret-down\"></thy-icon>\n  </a>\n</thy-actions>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: ThyActions, selector: "thy-actions", inputs: ["thySize"] }, { kind: "directive", type: ThyColorPickerDirective, selector: "[thyColorPicker]", inputs: ["thyOffset", "thyHasBackdrop", "thyDefaultColor", "thyTransparentColorSelectable", "thyPresetColors", "thyPlacement", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyDisabled"], outputs: ["thyPanelOpen", "thyPanelClose"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheColorToolbarItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheColorToolbarItem, decorators: [{
             type: Component,
             args: [{ selector: 'the-color-toolbar-item', host: {
                         class: 'the-color-toolbar-item'
@@ -8968,25 +9083,6 @@ const createColorPlugin = createPluginFactory({
     }
 });
 
-const withInsertDataByInvalidType = (editor) => {
-    const { insertData } = editor;
-    editor.insertData = (data) => {
-        const fragment = extractFragment(data);
-        if (fragment) {
-            const isContinue = insertDataByInvalidType(editor, fragment);
-            if (!isContinue) {
-                return;
-            }
-        }
-        insertData(data);
-    };
-    return editor;
-};
-const createInsertDataByInvalidTypePlugin = createPluginFactory({
-    key: PluginKeys.insertDataByInvalidType,
-    withOverrides: withInsertDataByInvalidType
-});
-
 const withBlockCard = (editor) => {
     const { insertBreak, deleteBackward, onKeydown, deleteForward, insertData, insertText, mousedown } = editor;
     editor.insertBreak = () => {
@@ -9400,6 +9496,25 @@ const createTheHistoryPlugin = createPluginFactory({
     withOverrides: withTheHistory
 });
 
+const withInsertDataByInvalidType = (editor) => {
+    const { insertFragmentData } = editor;
+    editor.insertFragmentData = async (data) => {
+        const fragment = await extractFragment(data);
+        if (fragment) {
+            const isContinue = insertDataByInvalidType(editor, fragment);
+            if (!isContinue) {
+                return true;
+            }
+        }
+        return insertFragmentData(data);
+    };
+    return editor;
+};
+const createInsertDataByInvalidTypePlugin = createPluginFactory({
+    key: PluginKeys.insertDataByInvalidType,
+    withOverrides: withInsertDataByInvalidType
+});
+
 const isInline = (editor, path) => {
     const [inlineNode] = Editor.nodes(editor, {
         at: path ? path : editor.selection?.anchor.path,
@@ -9643,23 +9758,24 @@ const createResetTypePlugin = createPluginFactory({
 });
 
 const withDeserializeHTML = (editor) => {
-    const { insertData } = editor;
-    editor.insertData = (data) => {
-        const html = data.getData(`text/html`);
-        const slateFragment = data.getData(`application/${CLIPBOARD_FORMAT_KEY}`);
-        if (html && !slateFragment) {
-            const htmlDom = new DOMParser().parseFromString(html, 'text/html');
+    const { insertFragmentData } = editor;
+    editor.insertFragmentData = async (data) => {
+        const clipboardData = await getClipboardData(data);
+        if (!clipboardData?.elements && clipboardData?.html) {
+            const htmlDom = new DOMParser().parseFromString(clipboardData?.html, 'text/html');
             const fragment = TheiaConverter.convertToTheia(Array.from(htmlDom.body.children));
+            // 识别粘贴的 HTML 只有纯链接, 跳至 link
+            if (fragment.length === 1 && fragment.every(block => isUrl(block?.children?.[0]?.['text']))) {
+                return insertFragmentData(data);
+            }
             // 无法识别HTML内容时后退一下：识别纯文本
             if (fragment.every(block => block.type === ElementKinds.paragraph && isLogicEmptyParagraphElement(editor, block))) {
-                insertData(data);
-                return;
+                return insertFragmentData(data);
             }
             // 识出纯图片并且粘贴板中存在文件则不进行处理, hook 直接右键复制图片的场景，流转到上传图片流程
             // 后续需要做识别html图片后自动上传处理
             if (fragment.length === 1 && fragment[0].type === ElementKinds.image && data.files.length > 0) {
-                insertData(data);
-                return;
+                return insertFragmentData(data);
             }
             // 过滤 text 节点的 color/background-color 属性
             fragment.forEach(node => filterTextFormat(node));
@@ -9678,12 +9794,12 @@ const withDeserializeHTML = (editor) => {
             });
             const isContinue = insertDataByInvalidType(editor, fragment);
             if (!isContinue) {
-                return;
+                return true;
             }
             Transforms.insertFragment(editor, fragment);
-            return;
+            return true;
         }
-        insertData(data);
+        return insertFragmentData(data);
     };
     return editor;
 };
@@ -9926,15 +10042,15 @@ class TheHr extends TheBaseElement {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheHr, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TheHr, isStandalone: true, selector: "the-hr, [theHr]", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheHr, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: TheHr, isStandalone: true, selector: "the-hr, [theHr]", usesInheritance: true, ngImport: i0, template: `
         <div class="the-hr" contenteditable="false" [ngClass]="{ active: isCollapsedAndNonReadonly }">
             <hr class="the-hr" />
             <slate-children-outlet></slate-children-outlet>
         </div>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SlateChildrenOutlet, selector: "slate-children-outlet" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheHr, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheHr, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-hr, [theHr]',
@@ -10400,17 +10516,16 @@ class TheImage extends TheBaseElement {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheImage, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$2.ThyImageGroup }, { token: THE_UPLOAD_SERVICE_TOKEN }, { token: TheContextService }, { token: i1.ThyPopover }, { token: i2.Overlay }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TheImage, isStandalone: true, selector: "the-image, [theImage]", providers: [ThyImageService], viewQueries: [{ propertyName: "imageContent", first: true, predicate: ["imageContent"], descendants: true }, { propertyName: "img", first: true, predicate: ["img"], descendants: true }, { propertyName: "layoutToolbar", first: true, predicate: ["layoutToolbar"], descendants: true, static: true }, { propertyName: "imageDirective", first: true, predicate: ThyImageDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"the-image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align\">\n  <div\n    #imageContent\n    *ngIf=\"imageEntry.thumbUrl; else imageLoading\"\n    class=\"image-content\"\n    contenteditable=\"false\"\n    [class.cursor-pointer]=\"!selection\"\n  >\n    <img\n      #img\n      thyImage\n      class=\"main-image\"\n      [class.image-collapsed]=\"selection && !uploading\"\n      [ngStyle]=\"{ 'width.px': imageBindingWidth }\"\n      [alt]=\"imageEntry.name\"\n      [thySrc]=\"imageEntry.thumbUrl\"\n      [thyPreviewSrc]=\"imageEntry.thumbUrl\"\n      [thyOriginSrc]=\"imageEntry.originUrl\"\n      [thyDisablePreview]=\"disablePreview\"\n      [thyImageMeta]=\"{ name: imageEntry.name, size: imageEntry.size }\"\n      (load)=\"imageLoaded($event)\"\n      (mousedown)=\"preventDefault($event)\"\n      (error)=\"imageError($event)\"\n      (click)=\"imageClick($event)\"\n    />\n    <div *ngIf=\"isCollapsedAndNonReadonly\" class=\"image-profile\" [class.outline]=\"selection\">\n      <ng-container *ngIf=\"!loadImageError\">\n        <span (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n        <span (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n        <span (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n        <span (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n      </ng-container>\n    </div>\n    <ng-template [ngTemplateOutlet]=\"imageUploading\"></ng-template>\n    <div *ngIf=\"!uploading\" class=\"layer\" [class.readonly]=\"readonly\"></div>\n  </div>\n</div>\n\n<ng-template #imageLoading>\n  <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading cursor-pointer\" contenteditable=\"false\">\n    <thy-icon thyIconName=\"image\"></thy-icon>\n  </div>\n  <ng-template [ngTemplateOutlet]=\"imageUploading\"></ng-template>\n</ng-template>\n\n<ng-template #layoutToolbar>\n  <thy-actions thySize=\"xxs\">\n    <ng-container *ngFor=\"let item of layoutOptions\">\n      <a\n        *ngIf=\"item.key !== 'split'\"\n        href=\"javascript:;\"\n        thyAction\n        [thyType]=\"item.key === 'remove' ? 'danger' : 'primary'\"\n        [thyActionIcon]=\"item.icon\"\n        [thyActionActive]=\"layoutActive(item.key)\"\n        [thyTooltip]=\"item.name\"\n        thyTooltipPlacement=\"top\"\n        (mousedown)=\"item?.handle($event, item.key)\"\n      ></a>\n      <thy-divider *ngIf=\"item.key === 'split'\" class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    </ng-container>\n  </thy-actions>\n</ng-template>\n\n<ng-template #imageUploading>\n  <div *ngIf=\"uploading\" class=\"uploading\">\n    <div class=\"uploading-percentage\">\n      <thy-progress thyType=\"primary\" [thyValue]=\"percentage\" thySize=\"sm\"></thy-progress>\n      <thy-icon (click)=\"cancelUpload($event)\" thyIconName=\"close-circle-bold-fill\" thyIconLegging=\"true\"> </thy-icon>\n    </div>\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: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: ThyImageDirective, selector: "img[thyImage]", inputs: ["thySrc", "thyPreviewSrc", "thyOriginSrc", "thyImageMeta", "thyDisablePreview", "thyResolveSize"], exportAs: ["thyImage"] }, { 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: ThyActions, selector: "thy-actions", inputs: ["thySize"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyProgress, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips", "thyShape", "thyGapDegree", "thyGapPosition", "thyStrokeWidth"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheImage, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$2.ThyImageGroup }, { token: THE_UPLOAD_SERVICE_TOKEN }, { token: TheContextService }, { token: i1.ThyPopover }, { token: i2.Overlay }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: TheImage, isStandalone: true, selector: "the-image, [theImage]", providers: [ThyImageService], viewQueries: [{ propertyName: "imageContent", first: true, predicate: ["imageContent"], descendants: true }, { propertyName: "img", first: true, predicate: ["img"], descendants: true }, { propertyName: "layoutToolbar", first: true, predicate: ["layoutToolbar"], descendants: true, static: true }, { propertyName: "imageDirective", first: true, predicate: ThyImageDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"the-image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align\">\n  <div\n    #imageContent\n    *ngIf=\"imageEntry.thumbUrl; else imageLoading\"\n    class=\"image-content\"\n    contenteditable=\"false\"\n    [class.cursor-pointer]=\"!selection\"\n  >\n    <img\n      #img\n      thyImage\n      class=\"main-image\"\n      [class.image-collapsed]=\"selection && !uploading\"\n      [ngStyle]=\"{ 'width.px': imageBindingWidth }\"\n      [alt]=\"imageEntry.name\"\n      [thySrc]=\"imageEntry.thumbUrl\"\n      [thyPreviewSrc]=\"imageEntry.thumbUrl\"\n      [thyOriginSrc]=\"imageEntry.originUrl\"\n      [thyDisablePreview]=\"disablePreview\"\n      [thyImageMeta]=\"{ name: imageEntry.name, size: imageEntry.size }\"\n      (load)=\"imageLoaded($event)\"\n      (mousedown)=\"preventDefault($event)\"\n      (error)=\"imageError($event)\"\n      (click)=\"imageClick($event)\"\n    />\n    <div *ngIf=\"isCollapsedAndNonReadonly\" class=\"image-profile\" [class.outline]=\"selection\">\n      <ng-container *ngIf=\"!loadImageError\">\n        <span (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n        <span (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n        <span (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n        <span (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n      </ng-container>\n    </div>\n    <ng-template [ngTemplateOutlet]=\"imageUploading\"></ng-template>\n    <div *ngIf=\"!uploading\" class=\"layer\" [class.readonly]=\"readonly\"></div>\n  </div>\n</div>\n\n<ng-template #imageLoading>\n  <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading cursor-pointer\" contenteditable=\"false\">\n    <thy-icon thyIconName=\"image\"></thy-icon>\n  </div>\n  <ng-template [ngTemplateOutlet]=\"imageUploading\"></ng-template>\n</ng-template>\n\n<ng-template #layoutToolbar>\n  <thy-actions thySize=\"xxs\">\n    <ng-container *ngFor=\"let item of layoutOptions\">\n      <a\n        *ngIf=\"item.key !== 'split'\"\n        href=\"javascript:;\"\n        thyAction\n        [thyType]=\"item.key === 'remove' ? 'danger' : 'primary'\"\n        [thyActionIcon]=\"item.icon\"\n        [thyActionActive]=\"layoutActive(item.key)\"\n        [thyTooltip]=\"item.name\"\n        thyTooltipPlacement=\"top\"\n        (mousedown)=\"item?.handle($event, item.key)\"\n      ></a>\n      <thy-divider *ngIf=\"item.key === 'split'\" class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    </ng-container>\n  </thy-actions>\n</ng-template>\n\n<ng-template #imageUploading>\n  <div *ngIf=\"uploading\" class=\"uploading\">\n    <div class=\"uploading-percentage\">\n      <thy-progress thyType=\"primary\" [thyValue]=\"percentage\" thySize=\"sm\"></thy-progress>\n      <thy-icon (click)=\"cancelUpload($event)\" thyIconName=\"close-circle-bold-fill\" thyIconLegging=\"true\"> </thy-icon>\n    </div>\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: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: ThyImageDirective, selector: "img[thyImage]", inputs: ["thySrc", "thyPreviewSrc", "thyOriginSrc", "thyImageMeta", "thyDisablePreview", "thyResolveSize"], exportAs: ["thyImage"] }, { 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: ThyActions, selector: "thy-actions", inputs: ["thySize"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyProgress, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips", "thyShape", "thyGapDegree", "thyGapPosition", "thyStrokeWidth"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheImage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheImage, decorators: [{
             type: Component,
             args: [{ selector: 'the-image, [theImage]', standalone: true, imports: [
                         NgIf,
                         NgFor,
                         NgStyle,
                         NgTemplateOutlet,
-                        SlateChildren,
                         ThyIcon,
                         ThyImageDirective,
                         ThyAction,
@@ -10441,8 +10556,9 @@ const withImage = (editor) => {
     editor.isVoid = (element) => {
         return element.type === ElementKinds.image || isVoid(element);
     };
-    editor.insertData = (data) => {
-        if (data.files.length) {
+    editor.insertData = async (data) => {
+        const clipboardData = await getClipboardData(data);
+        if (clipboardData?.files?.length) {
             const imageFiles = [];
             const imageTypes = getPluginOptions(editor, PluginKeys.image)?.imageTypes;
             for (const file of data.files) {
@@ -10646,12 +10762,12 @@ class TheInlineCode extends TheBaseElement {
         // https://bugs.chromium.org/p/chromium/issues/detail?id=1249405
         this.inlineChromiumBugfix = String.fromCodePoint(160);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheInlineCode, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TheInlineCode, isStandalone: true, selector: "span[theInlineCode]", usesInheritance: true, ngImport: i0, template: `<span contenteditable="false" class="the-break-char">{{ inlineChromiumBugfix }}</span>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheInlineCode, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: TheInlineCode, isStandalone: true, selector: "span[theInlineCode]", usesInheritance: true, ngImport: i0, template: `<span contenteditable="false" class="the-break-char">{{ inlineChromiumBugfix }}</span>
         <slate-children-outlet></slate-children-outlet>
         <span contenteditable="false" class="the-break-char">{{ inlineChromiumBugfix }}</span>`, isInline: true, dependencies: [{ kind: "component", type: SlateChildrenOutlet, selector: "slate-children-outlet" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheInlineCode, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheInlineCode, decorators: [{
             type: Component,
             args: [{
                     selector: 'span[theInlineCode]',
@@ -10777,10 +10893,10 @@ class TheLinkEdit {
             form.validator.setElementErrorMessage(`link`, '请输入正确的链接');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheLinkEdit, deps: [{ token: i1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TheLinkEdit, isStandalone: true, selector: "the-link-edit", inputs: { tag: "tag", node: "node", link: "link", text: "text", originSelection: "originSelection" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class": "this.className" } }, ngImport: i0, template: "<form thyForm #linkForm=\"thyForm\" [thyFormValidatorConfig]=\"validatorConfig\" name=\"linkForm\">\n  <thy-form-group thyLabelText=\"\u6587\u672C\">\n    <input thyInput placeholder=\"\u8BF7\u8F93\u5165\u6587\u672C\" required name=\"text\" [(ngModel)]=\"text\" thyAutofocus type=\"text\" />\n  </thy-form-group>\n  <thy-form-group thyLabelText=\"\u94FE\u63A5\">\n    <input name=\"link\" thyInput placeholder=\"\u8BF7\u8F93\u5165\u94FE\u63A5\" required type=\"text\" #linkControl=\"ngModel\" [(ngModel)]=\"link\" />\n  </thy-form-group>\n  <thy-form-group-footer>\n    <div class=\"btn-pair\">\n      <button thyButton=\"link-secondary\" thySize=\"sm\" (click)=\"closePopover()\">\u53D6\u6D88</button>\n      <button thyButton=\"primary-square\" thySize=\"sm\" (thyFormSubmit)=\"applyLink(linkForm)\">\u5E94\u7528</button>\n    </div>\n  </thy-form-group-footer>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { kind: "directive", type: ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutofocus", "thyAutoSelect"] }, { kind: "component", type: ThyFormGroup, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { kind: "directive", type: ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }, { kind: "component", type: ThyFormGroupFooter, selector: "thy-form-group-footer", inputs: ["thyAlign"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheLinkEdit, deps: [{ token: i1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: TheLinkEdit, isStandalone: true, selector: "the-link-edit", inputs: { tag: "tag", node: "node", link: "link", text: "text", originSelection: "originSelection" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class": "this.className" } }, ngImport: i0, template: "<form thyForm #linkForm=\"thyForm\" [thyFormValidatorConfig]=\"validatorConfig\" name=\"linkForm\">\n  <thy-form-group thyLabelText=\"\u6587\u672C\">\n    <input thyInput placeholder=\"\u8BF7\u8F93\u5165\u6587\u672C\" required name=\"text\" [(ngModel)]=\"text\" thyAutofocus type=\"text\" />\n  </thy-form-group>\n  <thy-form-group thyLabelText=\"\u94FE\u63A5\">\n    <input name=\"link\" thyInput placeholder=\"\u8BF7\u8F93\u5165\u94FE\u63A5\" required type=\"text\" #linkControl=\"ngModel\" [(ngModel)]=\"link\" />\n  </thy-form-group>\n  <thy-form-group-footer>\n    <div class=\"btn-pair\">\n      <button thyButton=\"link-secondary\" thySize=\"sm\" (click)=\"closePopover()\">\u53D6\u6D88</button>\n      <button thyButton=\"primary-square\" thySize=\"sm\" (thyFormSubmit)=\"applyLink(linkForm)\">\u5E94\u7528</button>\n    </div>\n  </thy-form-group-footer>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { kind: "directive", type: ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutofocus", "thyAutoSelect"] }, { kind: "component", type: ThyFormGroup, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { kind: "directive", type: ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }, { kind: "component", type: ThyFormGroupFooter, selector: "thy-form-group-footer", inputs: ["thyAlign"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheLinkEdit, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheLinkEdit, decorators: [{
             type: Component,
             args: [{ selector: 'the-link-edit', standalone: true, imports: [
                         FormsModule,
@@ -10826,10 +10942,10 @@ class TheLinkHover {
         this.deleteHandle();
         event.stopPropagation();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheLinkHover, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TheLinkHover, isStandalone: true, selector: "the-link-hover", inputs: { link: "link", dom: "dom", editHandle: "editHandle", deleteHandle: "deleteHandle" }, ngImport: i0, template: "<div class=\"link-hover-card px-1\">\n  <a readonly href=\"{{ link }}\" target=\"_blank\" rel=\"{{ aTagRelAttr }}\" class=\"hover-control-plaintext text-truncate mx-2\">\n    {{ link }}\n  </a>\n  <thy-divider class=\"mx-2\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n  <a href=\"javascript:;\" thyAction thyActionIcon=\"edit\" thePreventDefault (click)=\"editLink($event)\"></a>\n  <thy-divider class=\"mx-2\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n  <a href=\"javascript:;\" thyAction thyActionIcon=\"unlink-insert\" thePreventDefault (click)=\"removeLink($event)\"></a>\n</div>\n", dependencies: [{ kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "directive", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", exportAs: ["thePreventDefault"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheLinkHover, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: TheLinkHover, isStandalone: true, selector: "the-link-hover", inputs: { link: "link", dom: "dom", editHandle: "editHandle", deleteHandle: "deleteHandle" }, ngImport: i0, template: "<div class=\"link-hover-card px-1\">\n  <a readonly href=\"{{ link }}\" target=\"_blank\" rel=\"{{ aTagRelAttr }}\" class=\"hover-control-plaintext text-truncate mx-2\">\n    {{ link }}\n  </a>\n  <thy-divider class=\"mx-2\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n  <a href=\"javascript:;\" thyAction thyActionIcon=\"edit\" thePreventDefault (click)=\"editLink($event)\"></a>\n  <thy-divider class=\"mx-2\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n  <a href=\"javascript:;\" thyAction thyActionIcon=\"unlink-insert\" thePreventDefault (click)=\"removeLink($event)\"></a>\n</div>\n", dependencies: [{ kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "directive", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", exportAs: ["thePreventDefault"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheLinkHover, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheLinkHover, decorators: [{
             type: Component,
             args: [{ selector: 'the-link-hover', standalone: true, imports: [ThyDivider, ThyAction, ThePreventDefaultDirective], template: "<div class=\"link-hover-card px-1\">\n  <a readonly href=\"{{ link }}\" target=\"_blank\" rel=\"{{ aTagRelAttr }}\" class=\"hover-control-plaintext text-truncate mx-2\">\n    {{ link }}\n  </a>\n  <thy-divider class=\"mx-2\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n  <a href=\"javascript:;\" thyAction thyActionIcon=\"edit\" thePreventDefault (click)=\"editLink($event)\"></a>\n  <thy-divider class=\"mx-2\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n  <a href=\"javascript:;\" thyAction thyActionIcon=\"unlink-insert\" thePreventDefault (click)=\"removeLink($event)\"></a>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { link: [{
@@ -10958,10 +11074,10 @@ class TheBaseLink extends TheBaseElement {
         super.ngOnDestroy();
         this.close(LinkCloseTypes.destroy);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheBaseLink, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.ThyPopover }, { token: i2.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TheBaseLink, selector: "ng-component", host: { listeners: { "click": "mousedownHandle($event)" } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheBaseLink, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.ThyPopover }, { token: i2.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: TheBaseLink, selector: "ng-component", host: { listeners: { "click": "mousedownHandle($event)" } }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheBaseLink, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheBaseLink, decorators: [{
             type: Component,
             args: [{
                     template: ''
@@ -10980,12 +11096,12 @@ class TheLink extends TheBaseLink {
         // https://bugs.chromium.org/p/chromium/issues/detail?id=1249405
         this.inlineChromiumBugfix = String.fromCodePoint(160);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheLink, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TheLink, isStandalone: true, selector: "a[theLink]", host: { attributes: { "target": "_blank" }, properties: { "attr.href": "element.url" } }, viewQueries: [{ propertyName: "outletParent", first: true, predicate: ["outletParent"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: ` <span contenteditable="false" class="the-break-char">{{ inlineChromiumBugfix }}</span>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheLink, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: TheLink, isStandalone: true, selector: "a[theLink]", host: { attributes: { "target": "_blank" }, properties: { "attr.href": "element.url" } }, viewQueries: [{ propertyName: "outletParent", first: true, predicate: ["outletParent"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: ` <span contenteditable="false" class="the-break-char">{{ inlineChromiumBugfix }}</span>
         <span #outletParent></span>
         <span contenteditable="false" class="the-break-char">{{ inlineChromiumBugfix }}</span>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheLink, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheLink, decorators: [{
             type: Component,
             args: [{
                     selector: 'a[theLink]',
@@ -11004,7 +11120,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
             }] } });
 
 const withLink = (editor) => {
-    const { insertData, insertText, isInline, renderElement } = editor;
+    const { insertText, isInline, insertFragmentData, renderElement } = editor;
     editor.isInline = (element) => {
         return element.type === ElementKinds.link ? true : isInline(element);
     };
@@ -11017,16 +11133,28 @@ const withLink = (editor) => {
             insertText(text);
         }
     };
-    editor.insertData = data => {
-        const text = data.getData('text/plain');
-        const fragment = data.getData(`application/${CLIPBOARD_FORMAT_KEY}`);
-        if (text && isUrl(text) && !fragment) {
-            LinkEditor.wrapLink(editor, text, text);
-            Transforms.move(editor, { distance: 1, unit: 'offset' });
-        }
-        else {
-            insertData(data);
+    editor.insertFragmentData = async (data) => {
+        const clipboardData = await getClipboardData(data);
+        const text = clipboardData?.text;
+        if (!clipboardData?.elements && text && isUrl(text)) {
+            const urls = Array.from(getUrls(text, { stripWWW: false }));
+            if (urls.length) {
+                let str = cloneDeep(text);
+                urls.forEach((url, index) => {
+                    const parts = str.split(url);
+                    const beforeUrl = parts[0];
+                    insertText(beforeUrl);
+                    LinkEditor.wrapLink(editor, url, url);
+                    Transforms.move(editor, { distance: 1, unit: 'offset' });
+                    str = parts[1];
+                    if (index === urls.length - 1) {
+                        insertText(str);
+                    }
+                });
+                return true;
+            }
         }
+        return insertFragmentData(data);
     };
     editor.renderElement = (element) => {
         if (element.type === ElementKinds.link) {
@@ -11084,10 +11212,10 @@ class TheBulletedList extends TheBaseElement {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheBulletedList, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TheBulletedList, isStandalone: true, selector: "ul[theUl]", host: { properties: { "attr.the-level": "this.level" } }, usesInheritance: true, ngImport: i0, template: ``, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheBulletedList, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: TheBulletedList, isStandalone: true, selector: "ul[theUl]", host: { properties: { "attr.the-level": "this.level" } }, usesInheritance: true, ngImport: i0, template: ``, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheBulletedList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheBulletedList, decorators: [{
             type: Component,
             args: [{
                     selector: 'ul[theUl]',
@@ -11174,10 +11302,10 @@ class TheListItem extends TheBaseElement {
             this.elementRef.nativeElement.removeAttribute(multiDigit);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheListItem, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TheListItem, isStandalone: true, selector: "li[theLi]", usesInheritance: true, ngImport: i0, template: ``, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheListItem, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: TheListItem, isStandalone: true, selector: "li[theLi]", usesInheritance: true, ngImport: i0, template: ``, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheListItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheListItem, decorators: [{
             type: Component,
             args: [{
                     selector: 'li[theLi]',
@@ -11204,10 +11332,10 @@ class TheNumberedList extends TheBaseElement {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheNumberedList, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TheNumberedList, isStandalone: true, selector: "ol[theOl]", host: { properties: { "attr.start": "this.start", "attr.the-level": "this.level" } }, usesInheritance: true, ngImport: i0, template: ``, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheNumberedList, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: TheNumberedList, isStandalone: true, selector: "ol[theOl]", host: { properties: { "attr.start": "this.start", "attr.the-level": "this.level" } }, usesInheritance: true, ngImport: i0, template: ``, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheNumberedList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheNumberedList, decorators: [{
             type: Component,
             args: [{
                     selector: 'ol[theOl]',
@@ -11795,7 +11923,7 @@ const unwrapList = (editor) => {
 };
 
 const withList = (editor) => {
-    const { insertBreak, deleteBackward, onKeydown, insertData, setFragmentData, renderElement } = editor;
+    const { insertBreak, deleteBackward, onKeydown, insertData, insertFragmentData, setFragmentData, renderElement } = editor;
     const validLiChildrenTypes = getPluginOptions(editor, PluginKeys.list)?.validLiChildrenTypes ?? [];
     const resetBlockTypesListRule = {
         types: [ElementKinds.listItem],
@@ -11872,7 +12000,7 @@ const withList = (editor) => {
         }
         insertBreak();
     };
-    editor.setFragmentData = unit => {
+    editor.setFragmentData = (data, originEvent) => {
         const { selection } = editor;
         const [start] = Editor.edges(editor, selection);
         if (isInList(editor, start)) {
@@ -11892,22 +12020,13 @@ const withList = (editor) => {
                     fragmentNodes = children[0].children;
                 }
                 const fragment = fragmentNodes.concat(fragmentData.slice(1));
-                const domRange = AngularEditor.toDOMRange(editor, selection);
-                const contents = domRange.cloneContents();
-                const stringObj = JSON.stringify(fragment);
-                const encoded = window.btoa(encodeURIComponent(stringObj));
-                unit.setData(`application/${CLIPBOARD_FORMAT_KEY}`, encoded);
-                const div = document.createElement('div');
-                div.appendChild(contents);
-                div.setAttribute('hidden', 'true');
-                document.body.appendChild(div);
-                unit.setData('text/html', div.innerHTML);
-                unit.setData('text/plain', getPlainText$1(div));
-                document.body.removeChild(div);
-                return;
+                if (fragment) {
+                    setClipboardDataByDom(editor, fragment, data);
+                    return;
+                }
             }
         }
-        setFragmentData(unit);
+        setFragmentData(data, originEvent);
     };
     editor.deleteBackward = unit => {
         const res = getListItemEntry(editor, {});
@@ -11971,13 +12090,12 @@ const withList = (editor) => {
         }
         deleteBackward(unit);
     };
-    editor.insertData = (data) => {
-        const text = data.getData('text/plain');
-        const fragment = extractFragment(data);
-        const aboveEntry = Editor.above(editor, {
-            match: n => Element.isElement(n) && Editor.isBlock(editor, n) && n.type === ElementKinds.listItem
-        });
+    editor.insertFragmentData = async (data) => {
+        const fragment = await extractFragment(data);
         if (fragment) {
+            const aboveEntry = Editor.above(editor, {
+                match: n => Element.isElement(n) && Editor.isBlock(editor, n) && n.type === ElementKinds.listItem
+            });
             const res = getListItemEntry(editor, {});
             if (fragment.length === 1 &&
                 isList(fragment[0]) &&
@@ -11985,10 +12103,10 @@ const withList = (editor) => {
                 !isSingleListItem(fragment[0]) &&
                 hasStableListItem(res.listItem[0])) {
                 insertListData(editor, { fromList: fragment[0], toListItemEntry: aboveEntry });
-                return;
+                return true;
             }
         }
-        insertData(data);
+        return insertFragmentData(data);
     };
     editor.onKeydown = (event) => {
         const isContinue = !onKeyDownList(event, editor);
@@ -12601,14 +12719,14 @@ class TheTableRow extends TheBaseElement {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheTableRow, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TheTableRow, isStandalone: true, selector: "tr[theTableRow]", host: { properties: { "style.height": "this.height" } }, viewQueries: [{ propertyName: "numberedColumnRef", first: true, predicate: ["numberedColumn"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheTableRow, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: TheTableRow, isStandalone: true, selector: "tr[theTableRow]", host: { properties: { "style.height": "this.height" } }, viewQueries: [{ propertyName: "numberedColumnRef", first: true, predicate: ["numberedColumn"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
         <td #numberedColumn *ngIf="readonly && numberedColumn" class="the-table-number-column align-middle" thePreventDefault>
             {{ rowNumber }}
         </td>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", exportAs: ["thePreventDefault"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheTableRow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheTableRow, decorators: [{
             type: Component,
             args: [{
                     selector: 'tr[theTableRow]',
@@ -13174,10 +13292,10 @@ class TableStore {
             this.setAreaSelectionCells(nextCell);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TableStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TableStore }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TableStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TableStore }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TableStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TableStore, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -13445,10 +13563,10 @@ class TheTableContextMenuService {
             return this.menuRef.afterClosed();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheTableContextMenuService, deps: [{ token: TableStore }, { token: i1.ThyPopover }, { token: i0.NgZone }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheTableContextMenuService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheTableContextMenuService, deps: [{ token: TableStore }, { token: i1.ThyPopover }, { token: i0.NgZone }, { token: TheContextService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheTableContextMenuService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheTableContextMenuService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheTableContextMenuService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: TableStore }, { type: i1.ThyPopover }, { type: i0.NgZone }, { type: TheContextService }] });
 
@@ -13470,10 +13588,10 @@ class TableFreezeColumnPipe {
         }
         return headerColumnWidth + buffer < tableWrapperWidth;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TableFreezeColumnPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: TableFreezeColumnPipe, isStandalone: true, name: "freezeColumn" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TableFreezeColumnPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: TableFreezeColumnPipe, isStandalone: true, name: "freezeColumn" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TableFreezeColumnPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TableFreezeColumnPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'freezeColumn',
@@ -13492,10 +13610,10 @@ class TableFreezeRowPipe {
         const mergeRows = table.children[0]?.children.filter(item => item.rowspan && item.rowspan !== 1);
         return !mergeRows.length;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TableFreezeRowPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: TableFreezeRowPipe, isStandalone: true, name: "freezeRow" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TableFreezeRowPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: TableFreezeRowPipe, isStandalone: true, name: "freezeRow" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TableFreezeRowPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TableFreezeRowPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'freezeRow',
@@ -13506,10 +13624,10 @@ class TableHasHeaderRowPipe {
     transform(table) {
         return hasHeaderRow(table);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TableHasHeaderRowPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: TableHasHeaderRowPipe, isStandalone: true, name: "hasHeaderRow" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TableHasHeaderRowPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: TableHasHeaderRowPipe, isStandalone: true, name: "hasHeaderRow" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TableHasHeaderRowPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TableHasHeaderRowPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'hasHeaderRow', standalone: true }]
         }] });
@@ -13562,8 +13680,8 @@ class TheTableOptions {
             Transforms.setNodes(this.editor, { header: null }, { at: rowPath });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheTableOptions, deps: [{ token: i1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TheTableOptions, isStandalone: true, selector: "the-table-options", inputs: { editor: "editor" }, host: { classAttribute: "the-table-options" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheTableOptions, deps: [{ token: i1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: TheTableOptions, isStandalone: true, selector: "the-table-options", inputs: { editor: "editor" }, host: { classAttribute: "the-table-options" }, ngImport: i0, template: `
         <div class="thy-dropdown-menu table-drop-menu">
             <ng-container *ngFor="let option of tableDropdownList">
                 <a thyDropdownMenuItem href="javascript:;" (mousedown)="setTableOptions($event, option)">
@@ -13576,7 +13694,7 @@ class TheTableOptions {
         </div>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheTableOptions, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheTableOptions, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-table-options',
@@ -13744,10 +13862,10 @@ class TheTableToolbar {
             viewContainerRef: this.viewContainerRef
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheTableToolbar, deps: [{ token: i1.ThyPopover }, { token: i1.ThyPopoverRef }, { token: i1$1.ThyNotifyService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TheTableToolbar, isStandalone: true, selector: "the-table-toolbar", inputs: { tableStore: "tableStore", tableElement: "tableElement" }, ngImport: i0, template: "<thy-actions thySize=\"xxs\" (mousedown)=\"preventDefault($event)\">\n  <ng-container *ngFor=\"let item of cellMenuList\">\n    <a\n      *ngIf=\"item.visibility\"\n      href=\"javascript:;\"\n      thyAction\n      [thyActionIcon]=\"item.icon\"\n      [thyTooltip]=\"item.name\"\n      (click)=\"item.actionHandle()\"\n    ></a>\n  </ng-container>\n  <thy-divider *ngIf=\"hasDivider\" class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"> </thy-divider>\n  <a\n    href=\"javascript:;\"\n    thyAction\n    thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\"\n    thyColorPicker\n    [(ngModel)]=\"selectedColor\"\n    (ngModelChange)=\"changeColor($event)\"\n    (click)=\"openColorPanel($event)\"\n    thyPlacement=\"bottomLeft\"\n    [thyHasBackdrop]=\"false\"\n  >\n    <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n  </a>\n  <a\n    href=\"javascript:;\"\n    *ngIf=\"tableStore.isSelectedTable && !isColumnEqual\"\n    thyAction\n    thyTooltip=\"\u5217\u7B49\u5BBD\"\n    (click)=\"setEquallyColumnHandle($event)\"\n  >\n    <thy-icon thyIconName=\"table-column-equal-width\"></thy-icon>\n  </a>\n  <a\n    href=\"javascript:;\"\n    *ngIf=\"tableStore.isSelectedTable && tableOptions?.showFullscreen\"\n    thyAction\n    thyTooltip=\"\u5168\u5C4F\"\n    (click)=\"setFullscreen($event)\"\n  >\n    <thy-icon thyIconName=\"arrows-alt\"></thy-icon>\n  </a>\n  <a\n    *ngIf=\"tableStore.isSelectedTable && !tableStore?.isFullscreen\"\n    class=\"fullscreen-hidden\"\n    href=\"javascript:;\"\n    thyAction\n    thyActionIcon=\"copy\"\n    thyTooltip=\"\u590D\u5236\"\n    (click)=\"onCopy($event)\"\n  ></a>\n  <ng-container *ngIf=\"tableStore.isSelectedTable\">\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    <a href=\"javascript:;\" class=\"link-with-down\" thyAction (mousedown)=\"preventDefault($event)\" (click)=\"openTableOptionMenu($event)\">\n      <span>\u8868\u683C\u9009\u9879</span>\n      <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n  </ng-container>\n  <ng-container *ngIf=\"tableStore?.isFullscreen ? deleteIcon && !tableStore.isSelectedTable : deleteIcon\">\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    <a\n      href=\"javascript:;\"\n      thyAction\n      thyType=\"danger\"\n      [thyActionIcon]=\"deleteIcon\"\n      [thyTooltip]=\"iconName\"\n      (click)=\"onDelete($event)\"\n      (mouseenter)=\"onEnterDelete($event)\"\n      (mouseleave)=\"onLeaveDelete($event)\"\n    ></a>\n  </ng-container>\n</thy-actions>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: 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: ThyActions, selector: "thy-actions", inputs: ["thySize"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: ThyColorPickerDirective, selector: "[thyColorPicker]", inputs: ["thyOffset", "thyHasBackdrop", "thyDefaultColor", "thyTransparentColorSelectable", "thyPresetColors", "thyPlacement", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyDisabled"], outputs: ["thyPanelOpen", "thyPanelClose"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheTableToolbar, deps: [{ token: i1.ThyPopover }, { token: i1.ThyPopoverRef }, { token: i1$1.ThyNotifyService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: TheTableToolbar, isStandalone: true, selector: "the-table-toolbar", inputs: { tableStore: "tableStore", tableElement: "tableElement" }, ngImport: i0, template: "<thy-actions thySize=\"xxs\" (mousedown)=\"preventDefault($event)\">\n  <ng-container *ngFor=\"let item of cellMenuList\">\n    <a\n      *ngIf=\"item.visibility\"\n      href=\"javascript:;\"\n      thyAction\n      [thyActionIcon]=\"item.icon\"\n      [thyTooltip]=\"item.name\"\n      (click)=\"item.actionHandle()\"\n    ></a>\n  </ng-container>\n  <thy-divider *ngIf=\"hasDivider\" class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"> </thy-divider>\n  <a\n    href=\"javascript:;\"\n    thyAction\n    thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\"\n    thyColorPicker\n    [(ngModel)]=\"selectedColor\"\n    (ngModelChange)=\"changeColor($event)\"\n    (click)=\"openColorPanel($event)\"\n    thyPlacement=\"bottomLeft\"\n    [thyHasBackdrop]=\"false\"\n  >\n    <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n  </a>\n  <a\n    href=\"javascript:;\"\n    *ngIf=\"tableStore.isSelectedTable && !isColumnEqual\"\n    thyAction\n    thyTooltip=\"\u5217\u7B49\u5BBD\"\n    (click)=\"setEquallyColumnHandle($event)\"\n  >\n    <thy-icon thyIconName=\"table-column-equal-width\"></thy-icon>\n  </a>\n  <a\n    href=\"javascript:;\"\n    *ngIf=\"tableStore.isSelectedTable && tableOptions?.showFullscreen\"\n    thyAction\n    thyTooltip=\"\u5168\u5C4F\"\n    (click)=\"setFullscreen($event)\"\n  >\n    <thy-icon thyIconName=\"arrows-alt\"></thy-icon>\n  </a>\n  <a\n    *ngIf=\"tableStore.isSelectedTable && !tableStore?.isFullscreen\"\n    class=\"fullscreen-hidden\"\n    href=\"javascript:;\"\n    thyAction\n    thyActionIcon=\"copy\"\n    thyTooltip=\"\u590D\u5236\"\n    (click)=\"onCopy($event)\"\n  ></a>\n  <ng-container *ngIf=\"tableStore.isSelectedTable\">\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    <a href=\"javascript:;\" class=\"link-with-down\" thyAction (mousedown)=\"preventDefault($event)\" (click)=\"openTableOptionMenu($event)\">\n      <span>\u8868\u683C\u9009\u9879</span>\n      <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n  </ng-container>\n  <ng-container *ngIf=\"tableStore?.isFullscreen ? deleteIcon && !tableStore.isSelectedTable : deleteIcon\">\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    <a\n      href=\"javascript:;\"\n      thyAction\n      thyType=\"danger\"\n      [thyActionIcon]=\"deleteIcon\"\n      [thyTooltip]=\"iconName\"\n      (click)=\"onDelete($event)\"\n      (mouseenter)=\"onEnterDelete($event)\"\n      (mouseleave)=\"onLeaveDelete($event)\"\n    ></a>\n  </ng-container>\n</thy-actions>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: 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: ThyActions, selector: "thy-actions", inputs: ["thySize"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: ThyColorPickerDirective, selector: "[thyColorPicker]", inputs: ["thyOffset", "thyHasBackdrop", "thyDefaultColor", "thyTransparentColorSelectable", "thyPresetColors", "thyPlacement", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyDisabled"], outputs: ["thyPanelOpen", "thyPanelClose"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheTableToolbar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheTableToolbar, decorators: [{
             type: Component,
             args: [{ selector: 'the-table-toolbar', standalone: true, imports: [NgFor, NgIf, FormsModule, ThyIcon, ThyAction, ThyActions, ThyTooltipDirective, ThyDivider, ThyColorPickerDirective], template: "<thy-actions thySize=\"xxs\" (mousedown)=\"preventDefault($event)\">\n  <ng-container *ngFor=\"let item of cellMenuList\">\n    <a\n      *ngIf=\"item.visibility\"\n      href=\"javascript:;\"\n      thyAction\n      [thyActionIcon]=\"item.icon\"\n      [thyTooltip]=\"item.name\"\n      (click)=\"item.actionHandle()\"\n    ></a>\n  </ng-container>\n  <thy-divider *ngIf=\"hasDivider\" class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"> </thy-divider>\n  <a\n    href=\"javascript:;\"\n    thyAction\n    thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\"\n    thyColorPicker\n    [(ngModel)]=\"selectedColor\"\n    (ngModelChange)=\"changeColor($event)\"\n    (click)=\"openColorPanel($event)\"\n    thyPlacement=\"bottomLeft\"\n    [thyHasBackdrop]=\"false\"\n  >\n    <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n  </a>\n  <a\n    href=\"javascript:;\"\n    *ngIf=\"tableStore.isSelectedTable && !isColumnEqual\"\n    thyAction\n    thyTooltip=\"\u5217\u7B49\u5BBD\"\n    (click)=\"setEquallyColumnHandle($event)\"\n  >\n    <thy-icon thyIconName=\"table-column-equal-width\"></thy-icon>\n  </a>\n  <a\n    href=\"javascript:;\"\n    *ngIf=\"tableStore.isSelectedTable && tableOptions?.showFullscreen\"\n    thyAction\n    thyTooltip=\"\u5168\u5C4F\"\n    (click)=\"setFullscreen($event)\"\n  >\n    <thy-icon thyIconName=\"arrows-alt\"></thy-icon>\n  </a>\n  <a\n    *ngIf=\"tableStore.isSelectedTable && !tableStore?.isFullscreen\"\n    class=\"fullscreen-hidden\"\n    href=\"javascript:;\"\n    thyAction\n    thyActionIcon=\"copy\"\n    thyTooltip=\"\u590D\u5236\"\n    (click)=\"onCopy($event)\"\n  ></a>\n  <ng-container *ngIf=\"tableStore.isSelectedTable\">\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    <a href=\"javascript:;\" class=\"link-with-down\" thyAction (mousedown)=\"preventDefault($event)\" (click)=\"openTableOptionMenu($event)\">\n      <span>\u8868\u683C\u9009\u9879</span>\n      <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n    </a>\n  </ng-container>\n  <ng-container *ngIf=\"tableStore?.isFullscreen ? deleteIcon && !tableStore.isSelectedTable : deleteIcon\">\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    <a\n      href=\"javascript:;\"\n      thyAction\n      thyType=\"danger\"\n      [thyActionIcon]=\"deleteIcon\"\n      [thyTooltip]=\"iconName\"\n      (click)=\"onDelete($event)\"\n      (mouseenter)=\"onEnterDelete($event)\"\n      (mouseleave)=\"onLeaveDelete($event)\"\n    ></a>\n  </ng-container>\n</thy-actions>\n" }]
         }], ctorParameters: () => [{ type: i1.ThyPopover }, { type: i1.ThyPopoverRef }, { type: i1$1.ThyNotifyService }, { type: i0.ViewContainerRef }], propDecorators: { tableStore: [{
@@ -13863,10 +13981,10 @@ class TableService {
             e.preventDefault();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TableService, deps: [{ token: i1.ThyPopover }, { token: i2.Overlay }, { token: TableStore }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TableService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TableService, deps: [{ token: i1.ThyPopover }, { token: i2.Overlay }, { token: TableStore }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TableService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TableService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TableService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.ThyPopover }, { type: i2.Overlay }, { type: TableStore }, { type: i0.NgZone }] });
 
@@ -14112,10 +14230,10 @@ class TheInsertMark {
         }
         return this.type === 'column' && this.at === tablePosition.getWidth();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheInsertMark, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TheInsertMark, isStandalone: true, selector: "the-table-insert-mark", inputs: { type: "type", at: "at", tableStore: "tableStore", parentElement: "parentElement" }, host: { classAttribute: "the-table-insert-mark" }, viewQueries: [{ propertyName: "insertWrapper", first: true, predicate: ["insertWrapper"], descendants: true }], ngImport: i0, template: "<div\n  #insertWrapper\n  [thyTooltip]=\"!disabled && tooltipContent\"\n  class=\"the-table-controls-insert-wrapper\"\n  [ngClass]=\"{ disabled: disabled }\"\n  contenteditable=\"false\"\n  (pointerdown)=\"preventDefault($event)\"\n  (pointerup)=\"insert($event)\"\n  (click)=\"preventDefault($event)\"\n  (mouseup)=\"preventDefault($event)\"\n  (mouseenter)=\"onMouseEnter($event)\"\n  (mouseleave)=\"onMouseLeave($event)\"\n>\n  <div\n    class=\"the-table-controls-insert-line\"\n    *ngIf=\"dotWrapperHovered\"\n    [ngStyle]=\"insertLineStyle\"\n  ></div>\n</div>\n", dependencies: [{ kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheInsertMark, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: TheInsertMark, isStandalone: true, selector: "the-table-insert-mark", inputs: { type: "type", at: "at", tableStore: "tableStore", parentElement: "parentElement" }, host: { classAttribute: "the-table-insert-mark" }, viewQueries: [{ propertyName: "insertWrapper", first: true, predicate: ["insertWrapper"], descendants: true }], ngImport: i0, template: "<div\n  #insertWrapper\n  [thyTooltip]=\"!disabled && tooltipContent\"\n  class=\"the-table-controls-insert-wrapper\"\n  [ngClass]=\"{ disabled: disabled }\"\n  contenteditable=\"false\"\n  (pointerdown)=\"preventDefault($event)\"\n  (pointerup)=\"insert($event)\"\n  (click)=\"preventDefault($event)\"\n  (mouseup)=\"preventDefault($event)\"\n  (mouseenter)=\"onMouseEnter($event)\"\n  (mouseleave)=\"onMouseLeave($event)\"\n>\n  <div\n    class=\"the-table-controls-insert-line\"\n    *ngIf=\"dotWrapperHovered\"\n    [ngStyle]=\"insertLineStyle\"\n  ></div>\n</div>\n", dependencies: [{ kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheInsertMark, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheInsertMark, decorators: [{
             type: Component,
             args: [{ selector: 'the-table-insert-mark', host: {
                         class: 'the-table-insert-mark'
@@ -14913,8 +15031,8 @@ class TheTable extends TheBaseElement {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheTable, deps: [{ token: i0.ElementRef }, { token: TableCellEventDispatcher }, { token: ColumnResizeNotifierSource }, { token: TableStore }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: TableService }, { token: TheTableContextMenuService }, { token: TableFreezeColumnPipe }, { token: TableFreezeRowPipe }, { token: i0.Renderer2 }, { token: TheContextService }, { token: THE_MODE_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TheTable, isStandalone: true, selector: "ng-component", host: { properties: { "class.the-table-with-controls": "isInTable || tableStore.isRightClicking || tableStore.isFocusedInput", "class.the-table-with-sticky-column": "isFreezeColumn", "class.the-numbered-table": "element?.options?.numberedColumn", "class.the-table-selection-hide": "tableStore.isCellSelecting || tableStore.isRightClicking || tableStore.isFocusedInput" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheTable, deps: [{ token: i0.ElementRef }, { token: TableCellEventDispatcher }, { token: ColumnResizeNotifierSource }, { token: TableStore }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: TableService }, { token: TheTableContextMenuService }, { token: TableFreezeColumnPipe }, { token: TableFreezeRowPipe }, { token: i0.Renderer2 }, { token: TheContextService }, { token: THE_MODE_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: TheTable, isStandalone: true, selector: "ng-component", host: { properties: { "class.the-table-with-controls": "isInTable || tableStore.isRightClicking || tableStore.isFocusedInput", "class.the-table-with-sticky-column": "isFreezeColumn", "class.the-numbered-table": "element?.options?.numberedColumn", "class.the-table-selection-hide": "tableStore.isCellSelecting || tableStore.isRightClicking || tableStore.isFocusedInput" } }, providers: [
             TableStore,
             TableService,
             TheTableContextMenuService,
@@ -14928,7 +15046,7 @@ class TheTable extends TheBaseElement {
             }
         ], viewQueries: [{ propertyName: "tableWrapper", first: true, predicate: ["tableWrapper"], descendants: true, read: ElementRef, static: true }, { propertyName: "theTableElement", first: true, predicate: ["theTable"], descendants: true, read: ElementRef, static: true }, { propertyName: "tbodyElement", first: true, predicate: ["tbody"], descendants: true, read: ElementRef, static: true }, { propertyName: "tableRowControlsWrapper", first: true, predicate: ["tableRowControlsWrapper"], descendants: true, read: ElementRef }, { propertyName: "columnControlsWrapper", first: true, predicate: ["columnControlsWrapper"], descendants: true, read: ElementRef }, { propertyName: "cornerControl", first: true, predicate: ["cornerControl"], descendants: true, read: ElementRef }, { propertyName: "rowControlsInner", first: true, predicate: ["rowControlsInner"], descendants: true, read: ElementRef }, { propertyName: "headerRowLeftShadow", first: true, predicate: ["headerRowLeftShadow"], descendants: true, read: ElementRef }, { propertyName: "headerRowRightShadow", first: true, predicate: ["headerRowRightShadow"], descendants: true, read: ElementRef }, { propertyName: "colgroup", first: true, predicate: ["colgroup"], descendants: true, read: ElementRef }, { propertyName: "rowControlsButtonWrapper", predicate: ["rowControlsButtonWrapper"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div class=\"the-table-container\" theColumnResize>\n  <div #tableRowControlsWrapper class=\"the-table-row-controls-wrapper\">\n    <div\n      class=\"the-table-corner-controls\"\n      #cornerControl\n      contenteditable=\"false\"\n      [ngClass]=\"{\n        visible: !readonly && (isInTable || tableStore.isRightClicking || tableStore.isFocusedInput),\n        'control-active': isSelectedAllCell,\n        dangerous: tableStore.isSelectedTable && tableStore.dangerousCells.length > 0\n      }\"\n    >\n      <div class=\"the-table-corner-button\" (pointerdown)=\"onSelectTable($event)\"></div>\n      <div class=\"the-table-corner-controls-insert-row-marker\" *ngIf=\"!(element | hasHeaderRow) && !isMobileMode\">\n        <the-table-insert-mark type=\"row\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n      </div>\n      <div class=\"the-table-corner-controls-insert-column-marker\" *ngIf=\"!element?.options?.headerColumn && !isMobileMode\">\n        <the-table-insert-mark type=\"column\" [at]=\"0\" [tableStore]=\"tableStore\"></the-table-insert-mark>\n      </div>\n    </div>\n    <div class=\"the-table-row-controls\">\n      <div class=\"the-table-row-controls-inner\" #rowControlsInner>\n        <div\n          class=\"the-table-row-control-button-wrap\"\n          #rowControlsButtonWrapper\n          contenteditable=\"false\"\n          *ngFor=\"let control of rowControls; let i = index; trackBy: trackByFnRowControls\"\n          [ngClass]=\"{\n            'control-active': tableStore.selectedRowsIndex.includes(control.rowIndex),\n            dangerous: tableStore.dangerousRowsIndex.includes(control.rowIndex) && tableStore.dangerousCells.length > 0\n          }\"\n        >\n          <ng-container\n            *ngIf=\"!readonly && (isInTable || tableStore.isRightClicking || tableStore.isFocusedInput) && !element?.options?.numberedColumn\"\n          >\n            <button\n              (pointerdown)=\"onRowMousedown($event, control.rowIndex)\"\n              type=\"button\"\n              contenteditable=\"false\"\n              [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n              class=\"the-table-row-controls-button the-table-controls-button\"\n            ></button>\n          </ng-container>\n          <ng-container *ngIf=\"element?.options?.numberedColumn\">\n            <div\n              contenteditable=\"false\"\n              (pointerdown)=\"onRowMousedown($event, control.rowIndex)\"\n              class=\"the-table-numbered-controls-button\"\n              [ngStyle]=\"{ height: control.height + 1 + 'px' }\"\n            >\n              <p class=\"row-number d-flex align-items-center\">\n                {{ (element | hasHeaderRow) && i === 0 ? '' : (element | hasHeaderRow) ? i : i + 1 }}\n              </p>\n            </div>\n          </ng-container>\n          <the-table-insert-mark *ngIf=\"!isMobileMode\" type=\"row\" [at]=\"control.rowIndex + 1\" [tableStore]=\"tableStore\">\n          </the-table-insert-mark>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"the-table-wrapper\" #tableWrapper [ngClass]=\"{ 'the-table-numbered': element?.options?.numberedColumn }\">\n    <table class=\"the-table\" #theTable>\n      <colgroup #colgroup>\n        <!--\u63A7\u5236\u5E8F\u53F7\u5217\u5BBD\u5EA6-->\n        <col *ngIf=\"readonly && element?.options?.numberedColumn\" class=\"the-table-number-col\" />\n        <col *ngFor=\"let col of columns\" [ngStyle]=\"{ width: col.width + 'px' }\" />\n      </colgroup>\n      <thead>\n        <tr class=\"the-table-col-controls-wrapper the-sticky-row\" #columnControlsWrapper>\n          <th *ngIf=\"readonly && element?.options?.numberedColumn\" class=\"the-table-number-col\"></th>\n          <th\n            #colControl\n            class=\"the-table-col-control\"\n            contenteditable=\"false\"\n            *ngFor=\"let control of colControls; let i = index; trackBy: trackByFnColControls\"\n            [ngClass]=\"{\n              'control-active': tableStore.selectedColumnsIndex.includes(i),\n              dangerous: tableStore.dangerousColumnsIndex.includes(i) && tableStore.dangerousCells.length > 0,\n              'the-sticky-cell': i === 0 && isFreezeColumn\n            }\"\n            (pointerdown)=\"onColMousedown($event, i)\"\n          >\n            <the-table-insert-mark\n              *ngIf=\"(isInTable || tableStore.isRightClicking || tableStore.isFocusedInput) && !isMobileMode\"\n              type=\"column\"\n              [at]=\"i + 1\"\n              [tableStore]=\"tableStore\"\n              [parentElement]=\"colControl\"\n            >\n            </the-table-insert-mark>\n          </th>\n        </tr>\n      </thead>\n      <tbody #tbody></tbody>\n      <div\n        *ngIf=\"!element?.options?.headerColumn\"\n        #headerRowLeftShadow\n        class=\"header-row-shadow header-row-left-shadow\"\n        contenteditable=\"false\"\n      ></div>\n      <div class=\"header-row-shadow header-row-right-shadow\" #headerRowRightShadow contenteditable=\"false\"></div>\n    </table>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TheInsertMark, selector: "the-table-insert-mark", inputs: ["type", "at", "tableStore", "parentElement"] }, { kind: "directive", type: TheColumnResizeDirective, selector: "div[theColumnResize]" }, { kind: "pipe", type: TableHasHeaderRowPipe, name: "hasHeaderRow" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheTable, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheTable, decorators: [{
             type: Component,
             args: [{ providers: [
                         TableStore,
@@ -15552,10 +15670,10 @@ class TheTd extends TheBaseElement {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheTd, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.Injector }, { token: i2.Overlay }, { token: ColumnResizingStore }, { token: i2.ScrollDispatcher }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TheTd, isStandalone: true, selector: "td[theTd]", host: { properties: { "style.backgroundColor": "this.backgroundColor", "attr.colspan": "this.colspan", "attr.rowspan": "this.rowspan", "style.display": "this.display" } }, providers: [ColumnResizingStore], viewQueries: [{ propertyName: "cellInner", first: true, predicate: ["cellInner"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div #cellInner></div>\n" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheTd, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.Injector }, { token: i2.Overlay }, { token: ColumnResizingStore }, { token: i2.ScrollDispatcher }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: TheTd, isStandalone: true, selector: "td[theTd]", host: { properties: { "style.backgroundColor": "this.backgroundColor", "attr.colspan": "this.colspan", "attr.rowspan": "this.rowspan", "style.display": "this.display" } }, providers: [ColumnResizingStore], viewQueries: [{ propertyName: "cellInner", first: true, predicate: ["cellInner"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div #cellInner></div>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheTd, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheTd, decorators: [{
             type: Component,
             args: [{ selector: 'td[theTd]', standalone: true, providers: [ColumnResizingStore], template: "<div #cellInner></div>\n" }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i0.Injector }, { type: i2.Overlay }, { type: ColumnResizingStore }, { type: i2.ScrollDispatcher }], propDecorators: { cellInner: [{
@@ -15617,8 +15735,8 @@ class TheTableToolbarItem extends TheBaseToolbarItem {
         });
         return this.tableSelectRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheTableToolbarItem, deps: [{ token: i1.ThyPopover }, { token: i2.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TheTableToolbarItem, isStandalone: true, selector: "the-table-toolbar-item", host: { classAttribute: "the-toolbar-dropdown-container" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheTableToolbarItem, deps: [{ token: i1.ThyPopover }, { token: i2.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: TheTableToolbarItem, isStandalone: true, selector: "the-table-toolbar-item", host: { classAttribute: "the-toolbar-dropdown-container" }, usesInheritance: true, ngImport: i0, template: `
         <a
             href="javascript:;"
             class="link-with-down"
@@ -15634,7 +15752,7 @@ class TheTableToolbarItem extends TheBaseToolbarItem {
         </a>
     `, isInline: true, dependencies: [{ kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheTableToolbarItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheTableToolbarItem, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-table-toolbar-item',
@@ -15737,7 +15855,7 @@ const normalizeTable = (table) => {
 };
 
 const withTable = (editor) => {
-    const { deleteBackward, deleteForward, onKeydown, setFragmentData, insertData, normalizeNode, isBlockCard, renderElement, deleteCutData, isContainer, onChange, onClick, mousedown } = editor;
+    const { deleteBackward, deleteForward, onKeydown, setFragmentData, insertFragmentData, normalizeNode, isBlockCard, renderElement, deleteCutData, isContainer, onChange, onClick, mousedown } = editor;
     editor.deleteBackward = unit => {
         const opts = new TableOptions();
         if (!isSelectionInTable(opts, editor)) {
@@ -15939,62 +16057,54 @@ const withTable = (editor) => {
         onKeydown(event);
         return;
     };
-    editor.setFragmentData = unit => {
+    editor.setFragmentData = (data, originEvent) => {
         const opts = new TableOptions();
-        if (!isSelectionInTable(opts, editor)) {
-            setFragmentData(unit);
-            return;
-        }
-        const tablePosition = createTablePosition(editor);
-        const tableComponent = ELEMENT_TO_COMPONENT.get(tablePosition.table);
-        const selectedCellPositions = tableComponent.tableStore.getSelectedCellPositions();
-        let tableFragment = null;
-        if (tableComponent.tableStore.selectedRowsIndex.length > 0) {
-            const rows = tablePosition.table.children.slice(tableComponent.tableStore.selectedRowsIndex[0], tableComponent.tableStore.selectedRowsIndex[tableComponent.tableStore.selectedRowsIndex.length - 1] + 1);
-            tableFragment = {
-                ...tablePosition.table,
-                children: rows
-            };
-        }
-        else if (selectedCellPositions.length > 0) {
-            const tempRows = {};
-            for (const cell of selectedCellPositions) {
-                const { row, col } = cell;
-                const cellPath = [...tablePosition.tableEntry[1], row, col];
-                const cellNode = Node.get(editor, cellPath);
-                if (!tempRows[row]) {
-                    tempRows[row] = [];
-                }
-                tempRows[row].push(cellNode);
+        if (isSelectionInTable(opts, editor)) {
+            const tablePosition = createTablePosition(editor);
+            const tableComponent = ELEMENT_TO_COMPONENT.get(tablePosition.table);
+            const selectedCellPositions = tableComponent.tableStore.getSelectedCellPositions();
+            let tableFragment = null;
+            if (tableComponent.tableStore.selectedRowsIndex.length > 0) {
+                const rows = tablePosition.table.children.slice(tableComponent.tableStore.selectedRowsIndex[0], tableComponent.tableStore.selectedRowsIndex[tableComponent.tableStore.selectedRowsIndex.length - 1] + 1);
+                tableFragment = {
+                    ...tablePosition.table,
+                    children: rows
+                };
             }
-            const rows = Object.values(tempRows).map((item) => {
-                return {
-                    type: ElementKinds.tableRow,
-                    children: item
+            else if (selectedCellPositions.length > 0) {
+                const tempRows = {};
+                for (const cell of selectedCellPositions) {
+                    const { row, col } = cell;
+                    const cellPath = [...tablePosition.tableEntry[1], row, col];
+                    const cellNode = Node.get(editor, cellPath);
+                    if (!tempRows[row]) {
+                        tempRows[row] = [];
+                    }
+                    tempRows[row].push(cellNode);
+                }
+                const rows = Object.values(tempRows).map((item) => {
+                    return {
+                        type: ElementKinds.tableRow,
+                        children: item
+                    };
+                });
+                tableFragment = {
+                    type: ElementKinds.table,
+                    children: rows
                 };
-            });
-            tableFragment = {
-                type: ElementKinds.table,
-                children: rows
-            };
-        }
-        if (tableFragment) {
-            tableFragment = normalizeTable(cloneDeep(tableFragment));
-            const plainText = Node.string(tableFragment);
-            tableFragment = [tableFragment];
-            const stringObj = JSON.stringify(tableFragment);
-            const encoded = window.btoa(encodeURIComponent(stringObj));
-            unit.setData(`application/${CLIPBOARD_FORMAT_KEY}`, encoded);
-            unit.setData('text/plain', plainText);
-            return;
+            }
+            if (tableFragment) {
+                tableFragment = normalizeTable(cloneDeep(tableFragment));
+                setClipboardDataByDom(editor, tableFragment, data);
+                return;
+            }
         }
-        setFragmentData(unit);
+        setFragmentData(data, originEvent);
     };
-    editor.insertData = data => {
-        const fragment = extractFragment(data);
+    editor.insertFragmentData = async (data) => {
+        const fragment = await extractFragment(data);
         if (fragment) {
             const opts = new TableOptions();
-            const { selection } = editor;
             if (isSelectionInTable(opts, editor) &&
                 fragment.length === 1 &&
                 Element.isElement(fragment[0]) &&
@@ -16064,8 +16174,10 @@ const withTable = (editor) => {
                     });
                 });
             }
+            Transforms.insertFragment(editor, fragment);
+            return true;
         }
-        insertData(data);
+        return insertFragmentData(data);
     };
     editor.normalizeNode = ([node, path]) => {
         if (Element.isElement(node) && node.type === ElementKinds.table) {
@@ -16289,15 +16401,15 @@ class TheTodoItem extends TheBaseElement {
         }
         setNode(this.editor, { checked }, this.element);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheTodoItem, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TheTodoItem, isStandalone: true, selector: "div[theTodoItem]", host: { properties: { "class.the-check-item": "this.checkItemClass", "class.the-todo-item-selectable": "this.checkItemSelectable", "attr.the-level": "this.level" } }, viewQueries: [{ propertyName: "childrenOutlet", first: true, predicate: ["childrenOutlet"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheTodoItem, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: TheTodoItem, isStandalone: true, selector: "div[theTodoItem]", host: { properties: { "class.the-check-item": "this.checkItemClass", "class.the-todo-item-selectable": "this.checkItemSelectable", "attr.the-level": "this.level" } }, viewQueries: [{ propertyName: "childrenOutlet", first: true, predicate: ["childrenOutlet"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, ngImport: i0, template: `
         <span contenteditable="false" class="todo-item-status">
             <input #checkbox type="checkbox" [checked]="element.checked" (click)="onCheck(checkbox.checked)" />
         </span>
         <span #childrenOutlet></span>
     `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheTodoItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheTodoItem, decorators: [{
             type: Component,
             args: [{
                     selector: 'div[theTodoItem]',
@@ -16447,123 +16559,6 @@ const internalPlugins = () => [
     createMentionPlugin()
 ];
 
-class TheQuickInsert {
-    handleMousedownNativeElement(event) {
-        event.preventDefault();
-        event.stopPropagation();
-    }
-    constructor(renderer, elementRef, cdr) {
-        this.renderer = renderer;
-        this.elementRef = elementRef;
-        this.cdr = cdr;
-        this.className = 'the-quick-insert';
-        this.isVisible = false;
-        this.defaultIconName = 'plus-circle-thin';
-        this.iconNameFill = 'plus-circle-thin-fill';
-        this.displayIconName = this.defaultIconName;
-    }
-    ngOnInit() {
-        const { onChange } = this.editor;
-        this.editor.onChange = () => {
-            onChange();
-            if (this.editor && this.editor.options && !this.editor.options.readonly) {
-                // wait isOpenedMenu is updated
-                setTimeout(() => {
-                    this.updateIconDisplay();
-                }, 0);
-            }
-        };
-        this.updateIconDisplay();
-    }
-    ngOnChanges(changes) {
-        if (changes.isVisible && !changes.isVisible.firstChange) {
-            this.updateIconDisplay();
-        }
-    }
-    updateIconDisplay() {
-        const { editor } = this;
-        if (this.isVisible &&
-            !QuickInsertEditor.isOpenedMenu(editor) &&
-            isCleanEmptyParagraph(editor) &&
-            !this.hasExcludeAttribute() &&
-            !this.isRichMediaScope()) {
-            const block = Node.ancestor(editor, [editor?.selection?.anchor.path[0]]);
-            const rootNode = AngularEditor.toDOMNode(editor, block);
-            this.updatePosition(rootNode.offsetLeft, rootNode.offsetTop);
-            return;
-        }
-        this.addHiddenClass();
-    }
-    addHiddenClass() {
-        this.elementRef.nativeElement.classList.add('d-none');
-    }
-    removeHiddenClass() {
-        this.elementRef.nativeElement.classList.remove('d-none');
-    }
-    isRichMediaScope() {
-        const { editor } = this;
-        if (editor?.selection) {
-            const block = Node.ancestor(editor, [editor?.selection?.anchor.path[0]]);
-            const rootElement = AngularEditor.toDOMNode(editor, block);
-            const leafElement = rootElement.querySelector('[data-slate-leaf="true"]');
-            const rootElementRect = rootElement.getBoundingClientRect();
-            const leafElementRect = leafElement.getBoundingClientRect();
-            return leafElementRect?.x !== rootElementRect?.x;
-        }
-        return false;
-    }
-    hasExcludeAttribute() {
-        const marks = getSelectionMarks(this.editor);
-        const fontSizeMark = marks[MarkTypes.fontSize];
-        return fontSizeMark;
-    }
-    updatePosition(left, top) {
-        this.renderer.setStyle(this.elementRef.nativeElement, 'top', `${top}px`);
-        this.renderer.setStyle(this.elementRef.nativeElement, 'left', `${left}px`);
-        this.removeHiddenClass();
-    }
-    mouseEnter(event) {
-        this.displayIconName = this.iconNameFill;
-        this.cdr.markForCheck();
-    }
-    mouseLeave(event) {
-        this.displayIconName = this.defaultIconName;
-        this.cdr.markForCheck();
-    }
-    handleClick(event) {
-        event.stopPropagation();
-        event.preventDefault();
-        // avoid popover is closed immediately
-        setTimeout(() => {
-            QuickInsertEditor.openMenu(this.editor)
-                .afterClosed()
-                .subscribe(() => {
-                this.updateIconDisplay();
-            });
-            this.updateIconDisplay();
-        }, 100);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheQuickInsert, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TheQuickInsert, isStandalone: true, selector: "[theQuickInsert]", inputs: { editor: "editor", isVisible: "isVisible" }, host: { listeners: { "mousedown": "handleMousedownNativeElement($event)" }, properties: { "class": "this.className" } }, viewQueries: [{ propertyName: "iconElement", first: true, predicate: ["iconElement"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<thy-icon\n  #iconElement\n  [thyIconName]=\"displayIconName\"\n  class=\"quick-insert-icon text-desc font-size-xlg\"\n  (mouseenter)=\"mouseEnter($event)\"\n  (mouseleave)=\"mouseLeave($event)\"\n  (mousedown)=\"handleClick($event)\"\n></thy-icon>\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheQuickInsert, decorators: [{
-            type: Component,
-            args: [{ selector: '[theQuickInsert]', standalone: true, imports: [ThyIcon], template: "<thy-icon\n  #iconElement\n  [thyIconName]=\"displayIconName\"\n  class=\"quick-insert-icon text-desc font-size-xlg\"\n  (mouseenter)=\"mouseEnter($event)\"\n  (mouseleave)=\"mouseLeave($event)\"\n  (mousedown)=\"handleClick($event)\"\n></thy-icon>\n" }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class']
-            }], editor: [{
-                type: Input
-            }], isVisible: [{
-                type: Input
-            }], iconElement: [{
-                type: ViewChild,
-                args: ['iconElement', { read: ElementRef, static: false }]
-            }], handleMousedownNativeElement: [{
-                type: HostListener,
-                args: ['mousedown', ['$event']]
-            }] } });
-
 const HOTKEYS = {
     'mod+b': MarkTypes.bold,
     'mod+i': MarkTypes.italic,
@@ -16672,22 +16667,22 @@ class TheEditorComponent {
             });
         };
         this.onSlaPaste = (event) => {
+            const clipboardData = getDataTransferClipboard(event.clipboardData);
             this.theOnDOMEvent.emit({
-                data: {
-                    ...this.getTextAndJSON(event.clipboardData)
-                },
+                data: clipboardData,
                 nativeEvent: event
             });
         };
-        this.onSlaBeforeInput = (event) => {
+        this.onSlaBeforeInput = async (event) => {
             let data = {
                 inputType: event.inputType,
                 text: (event.data || event.dataTransfer)
             };
             if (event.inputType === 'insertFromPaste') {
+                const clipboardData = getDataTransferClipboard(event.dataTransfer);
                 data = {
                     ...data,
-                    ...this.getTextAndJSON((event.data || event.dataTransfer))
+                    ...clipboardData
                 };
             }
             this.theOnDOMEvent.emit({
@@ -16980,20 +16975,8 @@ class TheEditorComponent {
         event.preventDefault();
         return;
     }
-    getTextAndJSON(data) {
-        const fragment = data.getData(`application/${CLIPBOARD_FORMAT_KEY}`);
-        let json = [];
-        if (fragment) {
-            json = JSON.parse(decodeURIComponent(window.atob(fragment)));
-        }
-        const text = data.getData('text/plain');
-        return {
-            json,
-            text
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.DestroyRef }, { token: i0.ElementRef }, { token: i0.Injector }, { token: i0.NgZone }, { token: i0.ViewContainerRef }, { token: TheContextService }, { token: i2$2.ThyIconRegistry }, { token: THE_PRESET_CONFIG_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: TheEditorComponent, isStandalone: true, selector: "the-editor, theEditor", inputs: { theOptions: "theOptions", thePlugins: "thePlugins", theGlobalToolbar: "theGlobalToolbar", theDecorate: "theDecorate", theOnError: "theOnError" }, outputs: { theOnSave: "theOnSave", theOnDOMEvent: "theOnDOMEvent", theEditorCreated: "theEditorCreated", theUploadingStatus: "theUploadingStatus" }, host: { properties: { "class.the-editor-readonly": "editor.options?.readonly", "class.the-mobile-editor": "isMobileMode" }, classAttribute: "the-editor" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.DestroyRef }, { token: i0.ElementRef }, { token: i0.Injector }, { token: i0.NgZone }, { token: i0.ViewContainerRef }, { token: TheContextService }, { token: i2$2.ThyIconRegistry }, { token: THE_PRESET_CONFIG_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: TheEditorComponent, isStandalone: true, selector: "the-editor, theEditor", inputs: { theOptions: "theOptions", thePlugins: "thePlugins", theGlobalToolbar: "theGlobalToolbar", theDecorate: "theDecorate", theOnError: "theOnError" }, outputs: { theOnSave: "theOnSave", theOnDOMEvent: "theOnDOMEvent", theEditorCreated: "theEditorCreated", theUploadingStatus: "theUploadingStatus" }, host: { properties: { "class.the-editor-readonly": "editor.options?.readonly", "class.the-mobile-editor": "isMobileMode" }, classAttribute: "the-editor" }, providers: [
             TheContextService,
             {
                 provide: TheToolbarGroupToken,
@@ -17006,7 +16989,7 @@ class TheEditorComponent {
             }
         ], viewQueries: [{ propertyName: "templateInstance", first: true, predicate: ["templateInstance"], descendants: true, static: true }, { propertyName: "theEditableContainer", first: true, predicate: ["theEditableContainer"], descendants: true, read: ElementRef, static: true }, { propertyName: "globalToolbarInstance", first: true, predicate: ["globalToolbar"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<the-toolbar\n  *ngIf=\"!options?.readonly && !theGlobalToolbar && !isMobileMode\"\n  [ngClass]=\"{\n    'the-toolbar-disabled': options?.disabled\n  }\"\n  #globalToolbar\n  [editor]=\"editor\"\n  [toolbarItems]=\"toolbarEntity.global\"\n  [containerClass]=\"globalToolbarClass\"\n  [align]=\"options?.toolbar?.align\"\n></the-toolbar>\n\n<div\n  #theEditableContainer\n  class=\"the-editable-container\"\n  thyImageGroup\n  [ngClass]=\"{\n    'the-editor-disabled': options?.disabled,\n    'max-height': maxHeight\n  }\"\n  [ngStyle]=\"{ 'max-height': maxHeight }\"\n>\n  <slate-editable\n    class=\"the-editor-typo\"\n    [editor]=\"editor\"\n    [ngModel]=\"editorValue\"\n    [renderElement]=\"renderElement\"\n    [renderText]=\"renderText\"\n    [renderLeaf]=\"renderLeaf\"\n    [isStrictDecorate]=\"false\"\n    [decorate]=\"decorate\"\n    [placeholder]=\"options?.placeholder\"\n    [placeholderDecorate]=\"options?.placeholderDecorate ? options?.placeholderDecorate : null\"\n    [readonly]=\"options?.readonly || options?.disabled\"\n    [keydown]=\"onKeyDown\"\n    [click]=\"onClick\"\n    [paste]=\"onSlaPaste\"\n    [blur]=\"onSlaBlur\"\n    [focus]=\"onSlaFocus\"\n    [copy]=\"onSlaCopy\"\n    [cut]=\"onSlaCut\"\n    [beforeInput]=\"onSlaBeforeInput\"\n    [compositionStart]=\"onSlaCompositionStart\"\n    [compositionEnd]=\"onSlaCompositionEnd\"\n    [dragStart]=\"onSlaDragStart\"\n    [dragOver]=\"onSlaDragOver\"\n    [drop]=\"onDrop\"\n    [scrollSelectionIntoView]=\"scrollSelectionIntoView\"\n    (ngModelChange)=\"valueChange($event)\"\n    (mousedown)=\"mousedown($event)\"\n  ></slate-editable>\n\n  <ng-container *ngIf=\"!isMobileMode\">\n    <the-inline-toolbar\n      *ngIf=\"!options?.readonly && options?.inlineToolbarVisible\"\n      [editor]=\"editor\"\n      [toolbarItems]=\"toolbarEntity.inline\"\n    ></the-inline-toolbar>\n    <div *ngIf=\"!options?.readonly\" theQuickInsert [editor]=\"editor\" [isVisible]=\"visibleQuickInsertPlus\"></div>\n  </ng-container>\n\n  <the-template #templateInstance></the-template>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: SlateModule }, { kind: "component", type: i4.SlateEditable, selector: "slate-editable", inputs: ["editor", "renderElement", "renderLeaf", "renderText", "decorate", "placeholderDecorate", "scrollSelectionIntoView", "isStrictDecorate", "trackBy", "readonly", "placeholder", "beforeInput", "blur", "click", "compositionEnd", "compositionUpdate", "compositionStart", "copy", "cut", "dragOver", "dragStart", "dragEnd", "drop", "focus", "keydown", "paste", "spellCheck", "autoCorrect", "autoCapitalize"] }, { kind: "component", type: TheTemplate, selector: "the-template,[theTemplate]" }, { kind: "component", type: TheQuickInsert, selector: "[theQuickInsert]", inputs: ["editor", "isVisible"] }, { kind: "component", type: TheInlineToolbar, selector: "the-inline-toolbar", inputs: ["editor", "toolbarItems"] }, { kind: "component", type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }, { kind: "component", type: ThyImageGroup, selector: "thy-image-group, [thyImageGroup]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-editor, theEditor', host: {
                         class: 'the-editor',
@@ -17070,11 +17053,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
             }] } });
 
 class TheEditorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: TheEditorModule, imports: [TheEditorComponent], exports: [TheEditorComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheEditorModule, providers: [THE_MODE_PROVIDER], imports: [TheEditorComponent] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: TheEditorModule, imports: [TheEditorComponent], exports: [TheEditorComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheEditorModule, providers: [THE_MODE_PROVIDER], imports: [TheEditorComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheEditorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheEditorModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [TheEditorComponent],
@@ -17120,10 +17103,10 @@ class TheToolbarService {
             return item;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheToolbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheToolbarService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheToolbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheToolbarService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: TheToolbarService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TheToolbarService, decorators: [{
             type: Injectable
         }] });
 
@@ -17140,10 +17123,10 @@ class theTethysIconRegistryFaker extends ThyIconRegistry {
     splitIconName(iconName) {
         return ['', ''];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: theTethysIconRegistryFaker, deps: [{ token: i1$3.DomSanitizer }, { token: i2$3.HttpClient }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: theTethysIconRegistryFaker, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: theTethysIconRegistryFaker, deps: [{ token: i1$3.DomSanitizer }, { token: i2$3.HttpClient }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: theTethysIconRegistryFaker, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: theTethysIconRegistryFaker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: theTethysIconRegistryFaker, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1$3.DomSanitizer }, { type: i2$3.HttpClient }, { type: undefined, decorators: [{
@@ -17168,8 +17151,8 @@ class BasicTest {
     editorCreate(editor) {
         this.editor = editor;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: BasicTest, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: BasicTest, isStandalone: true, selector: "basic-editor-component", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: BasicTest, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: BasicTest, isStandalone: true, selector: "basic-editor-component", providers: [
             THY_TOOLTIP_DEFAULT_CONFIG_PROVIDER,
             {
                 provide: ThyIconRegistry,
@@ -17177,7 +17160,7 @@ class BasicTest {
             }
         ], viewQueries: [{ propertyName: "editorComponent", first: true, predicate: TheEditorComponent, descendants: true, static: true }], ngImport: i0, template: `<the-editor [(ngModel)]="value" [thePlugins]="plugins" (theEditorCreated)="editorCreate($event)"></the-editor>`, isInline: true, dependencies: [{ 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: ThyPopoverModule }, { kind: "ngmodule", type: ThyTooltipModule }, { kind: "ngmodule", type: TheEditorModule }, { kind: "component", type: TheEditorComponent, selector: "the-editor, theEditor", inputs: ["theOptions", "thePlugins", "theGlobalToolbar", "theDecorate", "theOnError"], outputs: ["theOnSave", "theOnDOMEvent", "theEditorCreated", "theUploadingStatus"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: BasicTest, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: BasicTest, decorators: [{
             type: Component,
             args: [{
                     selector: 'basic-editor-component',
@@ -17341,5 +17324,5 @@ const withTestPlugin = (plugins, initValue) => {
  * Generated bundle index. Do not edit.
  */
 
-export { ALIGN_BLOCK_TYPES, A_TAG_REL_ATTR, AlignEditor, Alignment, BLOCK_DELETE_BACKWARD_TYPES, BasicTest, BlockquoteEditor, CLIPBOARD_FORMAT_KEY, CODEMIRROR_PADDING_TOP, CODE_MODES, CONTAINER_BLOCKS, CONTROL_KEY, CodeEditor, ColorEditor, ColumnResizeNotifierSource, ColumnResizingStore, DEFAULT_LANGUAGE, DEFAULT_SCROLL_CONTAINER, DISABLED_OPERATE_TYPES, DataTransferFaker, DefaultElementOptions, DefaultGlobalToolbarDefinition, DefaultInlineToolbarDefinition, DefaultPluginMenu, DropdownMode, ELEMENT_UNIQUE_ID, EditorPresetConfigFactoryMock, ElementKinds, ErrorCodes, FontSizeTypes, FontSizes, HEADING_TYPES, HeadingEditor, HoveredCellInfo, HrEditor, IS_MAC, ImageEditor, IndentEditor, Indents, InlineCodeEditor, LINK_DEFAULT_TEXT, LIST_BLOCK_TYPES, LayoutTypes, LinkEditor, ListEditor, MarkEditor, MarkProps, MarkTypes, MentionEditor, PICTURE_ACCEPTED_UPLOAD_MIME, PICTURE_ACCEPTED_UPLOAD_SIZE, PluginKeys, PluginMenuIcons, PluginMenuSvgs, Position, QuickInsertEditor, ResizeRef, SLA_TABLE_CELL_SELECTOR, SLA_TABLE_SELECTOR, STANDARD_HEADING_TYPES, ScrollDirection, SpecialBackgroundColor, TAB_SPACE, THE_EDITOR_BG_COLOR, THE_EDITOR_COLOR, THE_EDITOR_CONVERSION_HINT_REF, THE_EDITOR_ORIGIN_ANCHOR, THE_EDITOR_POPOVER_REF, THE_EDITOR_PREVIOUS_SELECTION, THE_EDITOR_UUID, THE_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 };
+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, TheQuickInsert, 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, 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, setClipboardDataByDom, setEditorUUID, theTethysIconRegistryFaker, topLeftPosition, uniqueCellPosition, updatePopoverPosition, useElementStyle, withMention, withTestPlugin, withTheia };
 //# sourceMappingURL=worktile-theia.mjs.map