@worktile/theia 14.1.8 → 14.2.1

package/fesm2015/worktile-theia.mjs

@@ -1,15 +1,15 @@
 import * as i2 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, HostBinding, InjectionToken, Pipe, TemplateRef, ViewChild, Directive, Input, ViewContainerRef, HostListener, Inject, Injectable, ChangeDetectorRef, ElementRef, EventEmitter, forwardRef, Output, NgModule } from '@angular/core';
+import { Component, ChangeDetectionStrategy, HostBinding, InjectionToken, Pipe, TemplateRef, ViewChild, Directive, Input, HostListener, ViewContainerRef, Inject, Injectable, ChangeDetectorRef, ElementRef, EventEmitter, forwardRef, Output, NgModule, Optional, SkipSelf, ContentChildren } from '@angular/core';
 import * as i2$2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import * as i1 from 'slate-angular';
-import { BaseElementComponent, BaseTextComponent, NODE_TO_PARENT, NODE_TO_INDEX, AngularEditor, hotkeys, isComponentType, ELEMENT_TO_COMPONENT, IS_SAFARI, hasBlockCard, isCardLeft, FAKE_RIGHT_BLOCK_CARD_OFFSET, getPlainText as getPlainText$1, EDITOR_TO_ELEMENT, withAngular, SlateModule } from 'slate-angular';
+import { BaseElementComponent, BaseTextComponent, NODE_TO_PARENT, NODE_TO_INDEX, AngularEditor, hotkeys, ELEMENT_TO_COMPONENT, IS_SAFARI, hasBlockCard, isCardLeft, FAKE_RIGHT_BLOCK_CARD_OFFSET, getPlainText as getPlainText$1, EDITOR_TO_ELEMENT, withAngular, SlateModule } from 'slate-angular';
 import { Element as Element$1, Editor, Range, Node, Span, Path, Text, Point, Transforms, Operation, createEditor } from 'slate';
 import { __rest, __awaiter } from 'tslib';
 import { map, cloneDeep, assign, defaults, groupBy, uniq, debounce } from 'lodash';
-import { isObject, isArray } from 'ngx-tethys/util';
+import { isObject, isArray, isString } from 'ngx-tethys/util';
 import { TheiaConverter } from '@atinc/selene';
 import { HistoryEditor, withHistory } from 'slate-history';
 import * as i1$1 from 'ngx-tethys/popover';
@@ -22,7 +22,7 @@ import * as i5 from 'ngx-tethys/action';
 import { ThyActionModule } from 'ngx-tethys/action';
 import * as i6 from 'ngx-tethys/dropdown';
 import { ThyDropdownModule } from 'ngx-tethys/dropdown';
-import * as i3$1 from 'ngx-tethys/tooltip';
+import * as i8 from 'ngx-tethys/tooltip';
 import { ThyTooltipModule } from 'ngx-tethys/tooltip';
 import * as i12 from 'ngx-tethys/divider';
 import { ThyDividerComponent, ThyDividerModule } from 'ngx-tethys/divider';
@@ -51,21 +51,25 @@ import { ThyProgressModule } from 'ngx-tethys/progress';
 import isUrl from 'is-url';
 import * as i1$4 from 'ngx-tethys/button';
 import { ThyButtonModule } from 'ngx-tethys/button';
-import * as i3$2 from 'ngx-tethys/form';
+import * as i3$1 from 'ngx-tethys/form';
 import { ThyFormModule } from 'ngx-tethys/form';
 import * as i4$1 from 'ngx-tethys/shared';
 import { ThySharedModule } from 'ngx-tethys/shared';
-import * as i2$3 from 'ngx-tethys/list';
-import { ThyListModule } from 'ngx-tethys/list';
+import * as i7 from 'ngx-tethys/empty';
+import { ThyEmptyModule } from 'ngx-tethys/empty';
 import * as i6$1 from '@angular/cdk/scrolling';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import { coerceCssPixelValue } from '@angular/cdk/coercion';
 import { PortalInjector, ComponentPortal } from '@angular/cdk/portal';
+import * as i3$2 from '@angular/platform-browser';
 import { ThyAutocompleteModule } from 'ngx-tethys/autocomplete';
 import { ThyAvatarModule } from 'ngx-tethys/avatar';
 import { ThyDialogModule } from 'ngx-tethys/dialog';
+import { ThyListModule } from 'ngx-tethys/list';
 import { ThyNavModule } from 'ngx-tethys/nav';
 import { ThySelectModule } from 'ngx-tethys/select';
+import { ThyMenuModule } from 'ngx-tethys/menu';
+import { LEFT_ARROW, RIGHT_ARROW, UP_ARROW, DOWN_ARROW } from '@angular/cdk/keycodes';
 
 class TheBaseElementComponent extends BaseElementComponent {
     ngOnInit() {
@@ -222,6 +226,7 @@ var ToolbarActionTypes;
     ToolbarActionTypes["tableRemove"] = "table-remove";
     ToolbarActionTypes["tableDeleteRows"] = "table-delete-rows";
     ToolbarActionTypes["tableDeleteColumns"] = "table-delete-columns";
+    ToolbarActionTypes["group"] = "group";
 })(ToolbarActionTypes || (ToolbarActionTypes = {}));
 const MarkProps = [
     MarkTypes.backgroundColor,
@@ -350,22 +355,17 @@ var DropdownMode;
     DropdownMode["icon"] = "icon-mode";
     DropdownMode["text"] = "text-mode";
 })(DropdownMode || (DropdownMode = {}));
-var ToolbarItemMode;
-(function (ToolbarItemMode) {
-    ToolbarItemMode[ToolbarItemMode["horizontal"] = 0] = "horizontal";
-    ToolbarItemMode[ToolbarItemMode["vertical"] = 1] = "vertical";
-})(ToolbarItemMode || (ToolbarItemMode = {}));
 const DefaultGlobalToolbarDefinition = [
     ElementKinds.headingList,
     ToolbarActionTypes.split,
     MarkTypes.bold,
     MarkTypes.italic,
-    MarkTypes.underline,
-    MarkTypes.strike,
-    ElementKinds.inlineCode,
+    ToolbarActionTypes.group,
+    ToolbarActionTypes.split,
     MarkTypes.color,
     MarkTypes.backgroundColor,
     ToolbarActionTypes.split,
+    ElementKinds.indent,
     ToolbarActionTypes.alignType,
     ToolbarActionTypes.verticalAlign,
     ToolbarActionTypes.split,
@@ -393,23 +393,281 @@ const DefaultInlineToolbarDefinition = [
     ToolbarActionTypes.split,
     ElementKinds.link
 ];
-const DefaultQuickToolbarDefinition = [
+const ToolbarMoreGroup = {
+    key: 'more',
+    icon: 'more'
+};
+
+const DefaultPluginMenu = [
     ...STANDARD_HEADING_TYPES,
-    ToolbarActionTypes.split,
     ElementKinds.numberedList,
     ElementKinds.bulletedList,
-    ToolbarActionTypes.split,
     ElementKinds.link,
+    { groupName: '基础' },
     ElementKinds.image,
     ElementKinds.table,
     ElementKinds.blockquote,
     ElementKinds.hr,
     ElementKinds.code
 ];
-const ToolbarMoreGroup = {
-    key: 'more',
-    icon: 'more'
-};
+var ThePluginMenuItemType;
+(function (ThePluginMenuItemType) {
+    ThePluginMenuItemType["icon"] = "iconMenu";
+    ThePluginMenuItemType["group"] = "groupMenu";
+})(ThePluginMenuItemType || (ThePluginMenuItemType = {}));
+var PluginMenuIcons;
+(function (PluginMenuIcons) {
+    PluginMenuIcons["heading_1"] = "the-icon-heading-one";
+    PluginMenuIcons["heading_2"] = "the-icon-heading-two";
+    PluginMenuIcons["heading_3"] = "the-icon-heading-three";
+    PluginMenuIcons["heading_4"] = "the-icon-heading-four";
+    PluginMenuIcons["numberedList"] = "the-icon-numbered-list";
+    PluginMenuIcons["bulletedList"] = "the-icon-bulleted-list";
+    PluginMenuIcons["link"] = "the-icon-link";
+    PluginMenuIcons["image"] = "the-icon-image";
+    PluginMenuIcons["blockquote"] = "the-icon-block-quote";
+    PluginMenuIcons["code"] = "the-icon-code";
+    PluginMenuIcons["table"] = "the-icon-table";
+    PluginMenuIcons["hr"] = "the-icon-hr";
+})(PluginMenuIcons || (PluginMenuIcons = {}));
+const PluginMenuSvgs = [
+    {
+        key: PluginMenuIcons.image,
+        svg: `<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<title>图片</title>
+    <g id="图片" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="icon">
+            <path d="M32,0 C34.209139,0 36,1.790861 36,4 L36,32 C36,34.209139 34.209139,36 32,36 L4,36 C1.790861,36 0,34.209139 0,32 L0,4 C0,1.790861 1.790861,0 4,0 L32,0 Z M32,1 L4,1 C2.40231912,1 1.09633912,2.24891996 1.00509269,3.82372721 L1,4 L1,32 C1,33.5976809 2.24891996,34.9036609 3.82372721,34.9949073 L4,35 L32,35 C33.5976809,35 34.9036609,33.75108 34.9949073,32.1762728 L35,32 L35,4 C35,2.40231912 33.75108,1.09633912 32.1762728,1.00509269 L32,1 Z" id="矩形" fill="#EEEEEE" fill-rule="nonzero"></path>
+            <g id="编组" transform="translate(8.500000, 10.000000)">
+                <path d="M0,1 C0,0.447715 0.447715,0 1,0 L18,0 C18.5523,0 19,0.447715 19,1 L19,15 C19,15.5523 18.5523,16 18,16 L1,16 C0.447715,16 0,15.5523 0,15 L0,1 Z" id="路径" fill="#EEEEEE"></path>
+                <path d="M4.5,7 C5.60453333,7 6.5,6.10453333 6.5,5 C6.5,3.89546667 5.60453333,3 4.5,3 C3.39546667,3 2.5,3.89546667 2.5,5 C2.5,6.10453333 3.39546667,7 4.5,7 Z" id="路径" fill="#F6C659"></path>
+                <path d="M5,9 L7.5,11 L10.5,7.5 L19,13 L19,15 C19,15.5523 18.5523,16 18,16 L1,16 C0.447715,16 0,15.5523 0,15 L0,13 L5,9 Z" id="路径" fill="#6698FF"></path>
+                <path d="M5,9 L7.488,10.99 L3.165,16 L1,16 C0.447715,16 0,15.5523 0,15 L0,13 L5,9 Z" id="形状结合" fill="#CAD9F8"></path>
+            </g>
+        </g>
+    </g>
+</svg>`
+    },
+    {
+        key: PluginMenuIcons.blockquote,
+        svg: `<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>引用</title>
+    <defs>
+        <rect id="path-1" x="1" y="1" width="34" height="34" rx="4"></rect>
+    </defs>
+    <g id="引用" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="矩形">
+            <path d="M32,0 C34.209139,0 36,1.790861 36,4 L36,32 C36,34.209139 34.209139,36 32,36 L4,36 C1.790861,36 0,34.209139 0,32 L0,4 C0,1.790861 1.790861,0 4,0 L32,0 Z M32,1 L4,1 C2.40231912,1 1.09633912,2.24891996 1.00509269,3.82372721 L1,4 L1,32 C1,33.5976809 2.24891996,34.9036609 3.82372721,34.9949073 L4,35 L32,35 C33.5976809,35 34.9036609,33.75108 34.9949073,32.1762728 L35,32 L35,4 C35,2.40231912 33.75108,1.09633912 32.1762728,1.00509269 L32,1 Z" id="蒙版" fill="#EEEEEE" fill-rule="nonzero"></path>
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <use id="蒙版" fill="#FFFFFF" xlink:href="#path-1"></use>
+            <g id="编组-34" mask="url(#mask-2)">
+                <g transform="translate(7.000000, 7.600000)">
+                    <path d="M-9.3,9.9 L10.5,9.9 C10.8313708,9.9 11.1,10.1686292 11.1,10.5 C11.1,10.8313708 10.8313708,11.1 10.5,11.1 L-9.3,11.1 C-9.63137085,11.1 -9.9,10.8313708 -9.9,10.5 C-9.9,10.1686292 -9.63137085,9.9 -9.3,9.9 Z" id="矩形备份-86" fill="#AAAAAA" transform="translate(0.600000, 10.500000) rotate(-270.000000) translate(-0.600000, -10.500000) "></path>
+                    <path d="M12.0569495,0.107381518 C9.05340743,2.09055298 7.38481149,4.39881214 7.05114973,7.03213028 C6.53171396,11.1315969 10.097464,13.1381708 11.9041919,11.3352765 C13.7109198,9.53238214 12.6278961,7.24401116 11.3196447,6.61849713 C10.0113932,5.99294208 9.21135004,6.21080993 9.35090591,5.37489124 C9.49046177,4.53901356 11.3517118,2.22140491 12.9868965,1.14207129 C13.0953823,1.04722312 13.1366628,0.863185692 13.0322053,0.723558362 C12.9634843,0.631744678 12.8287146,0.451664378 12.6278961,0.18330516 C12.4522847,-0.0513630698 12.2840519,-0.042579465 12.0569495,0.107381518 Z M19.9642908,0.107381518 C16.9607886,2.09055298 15.2921807,4.39881214 14.9585069,7.03213028 C14.4390911,11.1315969 18.0048451,13.1381708 19.811573,11.3352765 C21.618301,9.53238214 20.5352773,7.24401116 19.2270258,6.61849713 C17.9187744,5.99294208 17.1186913,6.21080993 17.2582871,5.37489124 C17.3978429,4.53901356 19.259093,2.22140491 20.8942776,1.14207129 C21.0027635,1.04722312 21.0440439,0.863185692 20.9395466,0.723558362 C20.8708654,0.631744678 20.7360957,0.451664378 20.5352773,0.18330516 C20.3596658,-0.0513630698 20.191433,-0.042579465 19.9642908,0.107381518 Z" id="形状结合" fill="#CACACA" transform="translate(14.000000, 6.000000) rotate(-180.000000) translate(-14.000000, -6.000000) "></path>
+                    <path d="M6.6,20.4 L15.7517228,20.4 C16.0830937,20.4 16.3517228,20.6686292 16.3517228,21 C16.3517228,21.3313708 16.0830937,21.6 15.7517228,21.6 L6.6,21.6 C6.26862915,21.6 6,21.3313708 6,21 C6,20.6686292 6.26862915,20.4 6.6,20.4 Z" id="矩形备份-88" fill="#CACACA"></path>
+                    <rect id="矩形备份-87" fill="#CACACA" x="6" y="15.4" width="16" height="1.2" rx="0.6"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+    </svg>`
+    },
+    {
+        key: PluginMenuIcons.code,
+        svg: `<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>代码块</title>
+    <defs>
+        <rect id="path-1" x="1" y="1" width="34" height="34" rx="4"></rect>
+    </defs>
+    <g id="代码块" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="icon">
+            <path d="M32,0 C34.209139,0 36,1.790861 36,4 L36,32 C36,34.209139 34.209139,36 32,36 L4,36 C1.790861,36 0,34.209139 0,32 L0,4 C0,1.790861 1.790861,0 4,0 L32,0 Z M32,1 L4,1 C2.40231912,1 1.09633912,2.24891996 1.00509269,3.82372721 L1,4 L1,32 C1,33.5976809 2.24891996,34.9036609 3.82372721,34.9949073 L4,35 L32,35 C33.5976809,35 34.9036609,33.75108 34.9949073,32.1762728 L35,32 L35,4 C35,2.40231912 33.75108,1.09633912 32.1762728,1.00509269 L32,1 Z" id="蒙版" fill="#EEEEEE" fill-rule="nonzero"></path>
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <use id="蒙版" fill="#FFFFFF" xlink:href="#path-1"></use>
+            <g id="编组-24" mask="url(#mask-2)">
+                <g transform="translate(6.000000, 6.000000)">
+                    <rect id="矩形备份-60" fill="#F5F5F5" x="0" y="0" width="43" height="24" rx="2"></rect>
+                    <path d="M2,0 L6,0 L6,0 L6,24 L2,24 C0.8954305,24 1.3527075e-16,23.1045695 0,22 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 Z" id="矩形备份-60" fill="#EEEEEE"></path>
+                    <path d="M2.6,4 L3.4,4 C3.73137085,4 4,4.26862915 4,4.6 C4,4.93137085 3.73137085,5.2 3.4,5.2 L2.6,5.2 C2.26862915,5.2 2,4.93137085 2,4.6 C2,4.26862915 2.26862915,4 2.6,4 Z M2.6,9 L3.4,9 C3.73137085,9 4,9.26862915 4,9.6 C4,9.93137085 3.73137085,10.2 3.4,10.2 L2.6,10.2 C2.26862915,10.2 2,9.93137085 2,9.6 C2,9.26862915 2.26862915,9 2.6,9 Z M2.6,14 L3.4,14 C3.73137085,14 4,14.2686292 4,14.6 C4,14.9313708 3.73137085,15.2 3.4,15.2 L2.6,15.2 C2.26862915,15.2 2,14.9313708 2,14.6 C2,14.2686292 2.26862915,14 2.6,14 Z M2.6,19 L3.4,19 C3.73137085,19 4,19.2686292 4,19.6 C4,19.9313708 3.73137085,20.2 3.4,20.2 L2.6,20.2 C2.26862915,20.2 2,19.9313708 2,19.6 C2,19.2686292 2.26862915,19 2.6,19 Z" id="形状结合" fill="#CACACA"></path>
+                    <path d="M10.6,4 L23.8215948,4 C24.1529656,4 24.4215948,4.26862915 24.4215948,4.6 C24.4215948,4.93137085 24.1529656,5.2 23.8215948,5.2 L10.6,5.2 C10.2686292,5.2 10,4.93137085 10,4.6 C10,4.26862915 10.2686292,4 10.6,4 Z" id="矩形备份-61" fill="#CACACA"></path>
+                    <path d="M15.6,9 L23.9488547,9 C24.2802256,9 24.5488547,9.26862915 24.5488547,9.6 C24.5488547,9.93137085 24.2802256,10.2 23.9488547,10.2 L15.6,10.2 C15.2686292,10.2 15,9.93137085 15,9.6 C15,9.26862915 15.2686292,9 15.6,9 Z" id="矩形备份-63" fill="#FF7575"></path>
+                    <path d="M10.6,14 L21.7142342,14 C22.0456051,14 22.3142342,14.2686292 22.3142342,14.6 C22.3142342,14.9313708 22.0456051,15.2 21.7142342,15.2 L10.6,15.2 C10.2686292,15.2 10,14.9313708 10,14.6 C10,14.2686292 10.2686292,14 10.6,14 Z" id="矩形备份-65" fill="#CACACA"></path>
+                    <path d="M13.6,19 L29.1044747,19 C29.4358456,19 29.7044747,19.2686292 29.7044747,19.6 C29.7044747,19.9313708 29.4358456,20.2 29.1044747,20.2 L13.6,20.2 C13.2686292,20.2 13,19.9313708 13,19.6 C13,19.2686292 13.2686292,19 13.6,19 Z" id="矩形备份-66" fill="#6698FF"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+    </svg>`
+    },
+    {
+        key: PluginMenuIcons.table,
+        svg: `<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>表格</title>
+    <g id="表格" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="icon">
+            <path d="M32,0 C34.209139,0 36,1.790861 36,4 L36,32 C36,34.209139 34.209139,36 32,36 L4,36 C1.790861,36 0,34.209139 0,32 L0,4 C0,1.790861 1.790861,0 4,0 L32,0 Z M32,1 L4,1 C2.40231912,1 1.09633912,2.24891996 1.00509269,3.82372721 L1,4 L1,32 C1,33.5976809 2.24891996,34.9036609 3.82372721,34.9949073 L4,35 L32,35 C33.5976809,35 34.9036609,33.75108 34.9949073,32.1762728 L35,32 L35,4 C35,2.40231912 33.75108,1.09633912 32.1762728,1.00509269 L32,1 Z" id="矩形" fill="#EEEEEE" fill-rule="nonzero"></path>
+            <g id="编组-36" transform="translate(6.800000, 8.800000)">
+                <path d="M20.2,0 L2.2,0 C0.98497355,0 0,0.98497355 0,2.2 L0,16.2 C0,17.4150264 0.98497355,18.4 2.2,18.4 L20.2,18.4 C21.4150264,18.4 22.4,17.4150264 22.4,16.2 L22.4,2.2 C22.4,0.98497355 21.4150264,0 20.2,0 Z M20.2,1.2 C20.7522847,1.2 21.2,1.64771525 21.2,2.2 L21.2,16.2 C21.2,16.7522847 20.7522847,17.2 20.2,17.2 L2.2,17.2 C1.64771525,17.2 1.2,16.7522847 1.2,16.2 L1.2,2.2 C1.2,1.64771525 1.64771525,1.2 2.2,1.2 L20.2,1.2 Z" id="矩形" fill="#D8D8D8" fill-rule="nonzero"></path>
+                <path d="M2.2,1.2 L20.2,1.2 C20.7522847,1.2 21.2,1.64771525 21.2,2.2 L21.2,5.7 L21.2,5.7 L1.2,5.7 L1.2,2.2 C1.2,1.64771525 1.64771525,1.2 2.2,1.2 Z" id="矩形" fill="#EEEEEE"></path>
+                <path d="M21.2,5.2 L21.2,6.4 L15.3,6.4 L15.3,11.2 L21.2,11.2 L21.2,12.4 L15.3,12.4 L15.3,17.3 L14.1,17.3 L14.1,12.4 L8.3,12.4 L8.3,17.3 L7.1,17.3 L7.1,12.4 L1.2,12.4 L1.2,11.2 L7.1,11.2 L7.1,6.4 L1.2,6.4 L1.2,5.2 L21.2,5.2 Z M14.1,6.4 L8.3,6.4 L8.3,11.2 L14.1,11.2 L14.1,6.4 Z" id="形状结合" fill="#D8D8D8"></path>
+                <path d="M9.8,8.11197815 L12.6,8.11197815 C12.9313708,8.11197815 13.2,8.3806073 13.2,8.71197815 C13.2,9.043349 12.9313708,9.31197815 12.6,9.31197815 L9.8,9.31197815 C9.46862915,9.31197815 9.2,9.043349 9.2,8.71197815 C9.2,8.3806073 9.46862915,8.11197815 9.8,8.11197815 Z" id="矩形" fill="#6698FF"></path>
+                <path d="M16.8,14.1134683 L19.6,14.1134683 C19.9313708,14.1134683 20.2,14.3820974 20.2,14.7134683 C20.2,15.0448391 19.9313708,15.3134683 19.6,15.3134683 L16.8,15.3134683 C16.4686292,15.3134683 16.2,15.0448391 16.2,14.7134683 C16.2,14.3820974 16.4686292,14.1134683 16.8,14.1134683 Z" id="矩形备份-71" fill="#FF7575"></path>
+            </g>
+        </g>
+    </g>
+    </svg>`
+    },
+    {
+        key: PluginMenuIcons.hr,
+        svg: `<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>分割线</title>
+    <defs>
+        <rect id="path-1" x="1" y="1" width="34" height="34" rx="4"></rect>
+    </defs>
+    <g id="分割线" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="矩形备份-60">
+            <path d="M32,0 C34.209139,0 36,1.790861 36,4 L36,32 C36,34.209139 34.209139,36 32,36 L4,36 C1.790861,36 0,34.209139 0,32 L0,4 C0,1.790861 1.790861,0 4,0 L32,0 Z M32,1 L4,1 C2.40231912,1 1.09633912,2.24891996 1.00509269,3.82372721 L1,4 L1,32 C1,33.5976809 2.24891996,34.9036609 3.82372721,34.9949073 L4,35 L32,35 C33.5976809,35 34.9036609,33.75108 34.9949073,32.1762728 L35,32 L35,4 C35,2.40231912 33.75108,1.09633912 32.1762728,1.00509269 L32,1 Z" id="蒙版" fill="#EEEEEE" fill-rule="nonzero"></path>
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <use id="蒙版" fill="#FFFFFF" xlink:href="#path-1"></use>
+            <g id="编组-33" mask="url(#mask-2)">
+                <g transform="translate(7.000000, 7.500000)">
+                    <path d="M3.6,0 L17.5238673,0 C17.8552382,1.87571599e-15 18.1238673,0.26862915 18.1238673,0.6 C18.1238673,0.93137085 17.8552382,1.2 17.5238673,1.2 L3.6,1.2 C3.26862915,1.2 3,0.93137085 3,0.6 C3,0.26862915 3.26862915,1.7189414e-16 3.6,0 Z" id="矩形备份-81" fill="#CACACA"></path>
+                    <path d="M6.47613265,15 L20.4,15 C20.7313708,15 21,15.2686292 21,15.6 C21,15.9313708 20.7313708,16.2 20.4,16.2 L6.47613265,16.2 C6.1447618,16.2 5.87613265,15.9313708 5.87613265,15.6 C5.87613265,15.2686292 6.1447618,15 6.47613265,15 Z" id="矩形备份-84" fill="#CACACA"></path>
+                    <path d="M5.49677721,5 L14.6485,5 C14.9798709,5 15.2485,5.26862915 15.2485,5.6 C15.2485,5.93137085 14.9798709,6.2 14.6485,6.2 L5.49677721,6.2 C5.16540636,6.2 4.89677721,5.93137085 4.89677721,5.6 C4.89677721,5.26862915 5.16540636,5 5.49677721,5 Z" id="矩形备份-82" fill="#CACACA"></path>
+                    <path d="M2.55871088,20 L11.7104337,20 C12.0418046,20 12.3104337,20.2686292 12.3104337,20.6 C12.3104337,20.9313708 12.0418046,21.2 11.7104337,21.2 L2.55871088,21.2 C2.22734003,21.2 1.95871088,20.9313708 1.95871088,20.6 C1.95871088,20.2686292 2.22734003,20 2.55871088,20 Z" id="矩形备份-85" fill="#CACACA"></path>
+                    <path d="M0.6,10 L20.4,10 C20.7313708,10 21,10.2686292 21,10.6 C21,10.9313708 20.7313708,11.2 20.4,11.2 L0.6,11.2 C0.26862915,11.2 4.05812251e-17,10.9313708 0,10.6 C-4.05812251e-17,10.2686292 0.26862915,10 0.6,10 Z" id="矩形备份-83" fill="#AAAAAA"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+    </svg>`
+    },
+    {
+        key: PluginMenuIcons.heading_1,
+        svg: `<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <title>H1</title>
+        <g id="H1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <g id="icon">
+                <rect id="矩形" stroke="#EEEEEE" fill="#FFFFFF" x="0.5" y="0.5" width="35" height="35" rx="4"></rect>
+                <g id="1.Base基础/1.icon图标/11.editor/header-1" transform="translate(9.000000, 7.000000)" fill="#666666">
+                    <path d="M7.6,0 C7.93137085,-6.08718376e-17 8.2,0.26862915 8.2,0.6 L8.2,11.4 C8.2,11.7313708 7.93137085,12 7.6,12 C7.26862915,12 7,11.7313708 7,11.4 L7,6.4 L1.2,6.4 L1.2,11.4 C1.2,11.7313708 0.93137085,12 0.6,12 C0.26862915,12 1.51603528e-16,11.7313708 0,11.4 L0,0.6 C7.04410774e-17,0.26862915 0.26862915,-1.61172767e-16 0.6,0 C0.93137085,-6.08718376e-17 1.2,0.26862915 1.2,0.6 L1.2,5.2 L7,5.2 L7,0.6 C7,0.26862915 7.26862915,-1.61172767e-16 7.6,0 Z M12.6,4.03849355 C12.9313708,4.03849355 13.2,4.3071227 13.2,4.63849355 L13.2,10.7994936 L14.3,10.8 C14.5761424,10.8 14.8,11.0238576 14.8,11.3 L14.8,11.5 C14.8,11.7761424 14.5761424,12 14.3,12 L10.8,12 C10.5238576,12 10.3,11.7761424 10.3,11.5 L10.3,11.3 C10.3,11.0238576 10.5238576,10.8 10.8,10.8 L12,10.7994936 L11.9992076,5.99749355 L11.4573367,6.503957 C11.2420362,6.70484511 10.9182139,6.71678064 10.6901851,6.54683893 L10.6095636,6.47459911 C10.6095239,6.47455657 10.6094842,6.47451403 10.6094445,6.47447147 C10.3834309,6.23210152 10.3966345,5.85241672 10.6389386,5.62633256 L12.1456416,4.22048943 C12.1994667,4.1702674 12.2600744,4.13185491 12.3242723,4.1051414 L12.4103536,4.06908195 C12.4699613,4.04923872 12.5337258,4.03849355 12.6,4.03849355 Z" id="形状结合"></path>
+                </g>
+                <path d="M8.6,28 L18.4,28 C18.7313708,28 19,28.2686292 19,28.6 C19,28.9313708 18.7313708,29.2 18.4,29.2 L8.6,29.2 C8.26862915,29.2 8,28.9313708 8,28.6 C8,28.2686292 8.26862915,28 8.6,28 Z M8.6,24 L27.4,24 C27.7313708,24 28,24.2686292 28,24.6 C28,24.9313708 27.7313708,25.2 27.4,25.2 L8.6,25.2 C8.26862915,25.2 8,24.9313708 8,24.6 C8,24.2686292 8.26862915,24 8.6,24 Z" id="形状结合" fill="#CACACA"></path>
+            </g>
+        </g>
+    </svg>`
+    },
+    {
+        key: PluginMenuIcons.heading_2,
+        svg: `<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <title>H2</title>
+        <g id="H2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <g id="icon">
+                <rect id="矩形" stroke="#EEEEEE" fill="#FFFFFF" x="0.5" y="0.5" width="35" height="35" rx="4"></rect>
+                <g id="1.Base基础/1.icon图标/11.editor/header-1" transform="translate(8.000000, 5.000000)" fill="#666666">
+                    <path d="M8.6,2 C8.93137085,2 9.2,2.26862915 9.2,2.6 L9.2,13.4 C9.2,13.7313708 8.93137085,14 8.6,14 C8.26862915,14 8,13.7313708 8,13.4 L7.999,8.4 L2.2,8.4 L2.2,13.4 C2.2,13.7313708 1.93137085,14 1.6,14 C1.26862915,14 1,13.7313708 1,13.4 L1,2.6 C1,2.26862915 1.26862915,2 1.6,2 C1.93137085,2 2.2,2.26862915 2.2,2.6 L2.2,7.2 L7.999,7.2 L8,2.6 C8,2.26862915 8.26862915,2 8.6,2 Z M10.6050397,12.9143577 C10.5088932,13.5872926 11.0315636,13.9150843 11.673969,13.8576252 L14.7346207,13.8600109 C15.0659915,13.8600109 15.3346207,13.5913818 15.3346207,13.2600109 C15.3346207,12.9286401 15.0659915,12.6600109 14.7346207,12.6600109 L11.8578688,12.6600109 C11.9286468,12.324783 12.0484495,12.1022143 12.3451123,11.7834278 C12.3790085,11.7470038 12.4146387,11.7109747 12.4520606,11.6753577 C12.4981091,11.6315301 12.5450179,11.590446 12.5935631,11.5512355 C12.734276,11.4375804 12.8707598,11.3503175 13.1225647,11.206769 C13.9119415,10.7567625 14.2357153,10.5238408 14.7581338,9.92598498 C15.7545688,8.78566459 15.3845816,6.90006903 13.8145208,6.29898616 C13.1088388,6.02882249 12.2294594,6.13691231 11.509755,6.55397744 C11.1947054,6.73654711 10.9257925,6.99181908 10.7050302,7.31345899 C10.5175098,7.5866672 10.5869735,7.96016156 10.8601817,8.147682 C11.1333899,8.33520244 11.5068842,8.26573878 11.6944047,7.99253057 C11.8168882,7.81407796 11.9552234,7.68276 12.1114244,7.59224233 C12.5322515,7.34837511 13.037157,7.28631413 13.3854792,7.41966599 C14.146101,7.71086283 14.3210515,8.60247738 13.8545136,9.13638345 C13.4412636,9.6093069 13.2103422,9.77543093 12.5282596,10.1642713 C12.2246758,10.3373378 12.0423445,10.4539139 11.8395486,10.6177142 C11.7659434,10.6771658 11.6945757,10.7396718 11.6247531,10.8061268 C11.5697738,10.8584544 11.5170831,10.911735 11.4666494,10.9659299 C11.1108509,11.3482621 10.877698,11.762253 10.7425697,12.192387 C10.6922909,12.3524319 10.6581826,12.5062255 10.6351917,12.6597188 C10.6238114,12.7356971 10.6061737,12.8994638 10.6050397,12.9143577 Z" id="形状结合"></path>
+                </g>
+                <path d="M8.6,28 L18.4,28 C18.7313708,28 19,28.2686292 19,28.6 C19,28.9313708 18.7313708,29.2 18.4,29.2 L8.6,29.2 C8.26862915,29.2 8,28.9313708 8,28.6 C8,28.2686292 8.26862915,28 8.6,28 Z M8.6,24 L27.4,24 C27.7313708,24 28,24.2686292 28,24.6 C28,24.9313708 27.7313708,25.2 27.4,25.2 L8.6,25.2 C8.26862915,25.2 8,24.9313708 8,24.6 C8,24.2686292 8.26862915,24 8.6,24 Z" id="形状结合" fill="#CACACA"></path>
+            </g>
+        </g>
+    </svg>`
+    },
+    {
+        key: PluginMenuIcons.heading_3,
+        svg: `<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <title>H3</title>
+        <g id="H3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <g id="icon">
+                <rect id="矩形" stroke="#EEEEEE" fill="#FFFFFF" x="0.5" y="0.5" width="35" height="35" rx="4"></rect>
+                <g id="1.Base基础/1.icon图标/11.editor/header-1" transform="translate(8.000000, 5.000000)" fill="#666666">
+                    <path d="M8.6,2 C8.93137085,2 9.2,2.26862915 9.2,2.6 L9.2,13.4 C9.2,13.7313708 8.93137085,14 8.6,14 C8.26862915,14 8,13.7313708 8,13.4 L7.999,8.4 L2.2,8.4 L2.2,13.4 C2.2,13.7313708 1.93137085,14 1.6,14 C1.26862915,14 1,13.7313708 1,13.4 L1,2.6 C1,2.26862915 1.26862915,2 1.6,2 C1.93137085,2 2.2,2.26862915 2.2,2.6 L2.2,7.2 L7.999,7.2 L8,2.6 C8,2.26862915 8.26862915,2 8.6,2 Z M14.8321775,7.18983161 C15.1357692,6.79527134 14.854493,6.22394171 14.356652,6.22394171 L11.0241938,6.22394171 C10.6928229,6.22394171 10.4241938,6.49257086 10.4241938,6.82394171 C10.4241938,7.15531256 10.6928229,7.42394171 11.0241938,7.42394171 L13.137929,7.42394171 L11.8506572,9.09693329 C11.7699456,9.20182941 11.7261828,9.33046927 11.7261828,9.46282318 L11.7261828,9.82922943 C11.7261828,10.1666497 12.0043217,10.4377176 12.3416301,10.4290305 C12.6787875,10.4203474 12.9830249,10.4540644 13.2547454,10.5294651 C13.7397835,10.6640601 14.0222167,11.2257408 13.8341992,11.8813236 C13.6970249,12.3596256 13.2389994,12.6238282 12.6183411,12.6238282 C12.0434265,12.6238282 11.4646434,12.41278 10.8719286,11.9820919 C10.6038559,11.7873006 10.2286305,11.8467069 10.0338391,12.1147796 C9.8390478,12.3828523 9.89845407,12.7580777 10.1665268,12.952869 C10.9617588,13.5307135 11.7826635,13.8238282 12.6183411,13.8238282 C13.7784713,13.8238282 14.6856352,13.2653796 14.9876983,12.2121406 C15.3629178,10.9038183 14.7001971,9.6852239 13.575613,9.37315895 C13.4583717,9.34062522 13.3380638,9.31356451 13.2147084,9.29196113 L14.8321775,7.18983161 Z" id="形状结合"></path>
+                </g>
+                <path d="M8.6,28 L18.4,28 C18.7313708,28 19,28.2686292 19,28.6 C19,28.9313708 18.7313708,29.2 18.4,29.2 L8.6,29.2 C8.26862915,29.2 8,28.9313708 8,28.6 C8,28.2686292 8.26862915,28 8.6,28 Z M8.6,24 L27.4,24 C27.7313708,24 28,24.2686292 28,24.6 C28,24.9313708 27.7313708,25.2 27.4,25.2 L8.6,25.2 C8.26862915,25.2 8,24.9313708 8,24.6 C8,24.2686292 8.26862915,24 8.6,24 Z" id="形状结合" fill="#CACACA"></path>
+            </g>
+        </g>
+    </svg>`
+    },
+    {
+        key: PluginMenuIcons.heading_4,
+        svg: `<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <title>H4</title>
+        <g id="H4" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <g id="icon">
+                <rect id="矩形" stroke="#EEEEEE" fill="#FFFFFF" x="0.5" y="0.5" width="35" height="35" rx="4"></rect>
+                <g id="1.Base基础/1.icon图标/11.editor/header-1" transform="translate(8.000000, 5.000000)" fill="#666666">
+                    <path d="M8.6,2 C8.93137085,2 9.2,2.26862915 9.2,2.6 L9.2,13.4 C9.2,13.7313708 8.93137085,14 8.6,14 C8.26862915,14 8,13.7313708 8,13.4 L7.999,8.4 L2.2,8.4 L2.2,13.4 C2.2,13.7313708 1.93137085,14 1.6,14 C1.26862915,14 1,13.7313708 1,13.4 L1,2.6 C1,2.26862915 1.26862915,2 1.6,2 C1.93137085,2 2.2,2.26862915 2.2,2.6 L2.2,7.2 L7.999,7.2 L8,2.6 C8,2.26862915 8.26862915,2 8.6,2 Z M13.4093228,5.91341961 C13.7406441,5.91915017 14.0045876,6.19238469 13.998857,6.52370599 L13.998857,6.52370599 L13.9382755,9.99126303 L14.8179917,9.99134588 C15.1162255,9.99134588 15.3636385,10.2089355 15.4101387,10.4940228 L15.4179917,10.5913459 C15.4179917,10.9227167 15.1493626,11.1913459 14.8179917,11.1913459 L14.8179917,11.1913459 L13.9182755,11.191263 L13.8794422,13.4278503 C13.8742847,13.7260395 13.652449,13.9696526 13.3666002,14.0112157 L13.2691559,14.0173845 C12.9378346,14.0116539 12.6738911,13.7384194 12.6796217,13.4070981 L12.6796217,13.4070981 L12.7172755,11.191263 L10.5912754,11.1913459 C10.1454143,11.1913459 9.86643429,10.7287014 10.0448619,10.3426594 L10.0902034,10.2613052 L12.776267,6.18328918 C12.9048512,5.9880711 13.1278997,5.89246083 13.3452953,5.91706111 Z M12.7382755,9.99126303 L12.7662755,8.38026303 L11.7049365,9.99134588 L12.7382755,9.99126303 Z" id="形状结合"></path>
+                </g>
+                <path d="M8.6,28 L18.4,28 C18.7313708,28 19,28.2686292 19,28.6 C19,28.9313708 18.7313708,29.2 18.4,29.2 L8.6,29.2 C8.26862915,29.2 8,28.9313708 8,28.6 C8,28.2686292 8.26862915,28 8.6,28 Z M8.6,24 L27.4,24 C27.7313708,24 28,24.2686292 28,24.6 C28,24.9313708 27.7313708,25.2 27.4,25.2 L8.6,25.2 C8.26862915,25.2 8,24.9313708 8,24.6 C8,24.2686292 8.26862915,24 8.6,24 Z" id="形状结合" fill="#CACACA"></path>
+            </g>
+        </g>
+    </svg>`
+    },
+    {
+        key: PluginMenuIcons.bulletedList,
+        svg: `<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <title>无序列表</title>
+        <g id="无序列表" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <g id="icon">
+                <rect id="矩形" stroke="#EEEEEE" fill="#FFFFFF" x="0.5" y="0.5" width="35" height="35" rx="4"></rect>
+                <g id="1.icon图标/11.editor/-save备份-32" transform="translate(8.000000, 9.000000)">
+                    <circle id="椭圆形" fill="#666666" cx="1.5" cy="1.5" r="1.5"></circle>
+                    <circle id="椭圆形备份" fill="#666666" cx="1.5" cy="9" r="1.5"></circle>
+                    <circle id="椭圆形备份-2" fill="#666666" cx="1.5" cy="16.5" r="1.5"></circle>
+                    <g id="编组-2" transform="translate(7.000000, 1.000000)" fill="#CACACA">
+                        <path d="M0.59981695,7.55958265 L8.40018305,7.55958265 C8.7314528,7.55958265 9,7.82812984 9,8.1593996 C9,8.49066935 8.7314528,8.75921655 8.40018305,8.75921655 L0.59981695,8.75921655 C0.268547196,8.75921655 4.05688444e-17,8.49066935 0,8.1593996 C-4.05688444e-17,7.82812984 0.268547196,7.55958265 0.59981695,7.55958265 Z" id="矩形备份-74"></path>
+                        <path d="M0.59981695,0 L12.400183,0 C12.7314528,-2.44215884e-15 13,0.268547196 13,0.59981695 C13,0.931086705 12.7314528,1.1996339 12.400183,1.1996339 L0.59981695,1.1996339 C0.268547196,1.1996339 4.05688444e-17,0.931086705 0,0.59981695 C-4.05688444e-17,0.268547196 0.268547196,6.08532667e-17 0.59981695,0 Z" id="矩形备份-75"></path>
+                        <path d="M0.59981695,15 L12.400183,15 C12.7314528,15 13,15.2685472 13,15.599817 C13,15.9310867 12.7314528,16.1996339 12.400183,16.1996339 L0.59981695,16.1996339 C0.268547196,16.1996339 4.05688444e-17,15.9310867 0,15.599817 C-4.05688444e-17,15.2685472 0.268547196,15 0.59981695,15 Z" id="矩形备份-77"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </svg>`
+    },
+    {
+        key: PluginMenuIcons.numberedList,
+        svg: `<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <title>有序列表</title>
+        <g id="有序列表" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <g id="icon">
+                <rect id="矩形" stroke="#EEEEEE" fill="#FFFFFF" x="0.5" y="0.5" width="35" height="35" rx="4"></rect>
+                <g id="1.icon图标/11.editor/-save备份-32" transform="translate(8.000000, 8.000000)">
+                    <path d="M1.29125304,1.43706144 L1.29125304,4.74230276 L2.58250608,4.74230276 L2.58250608,0 L1.57819816,0 L0,1.00594301 L0.57389024,2.01188602 L1.29125304,1.43706144 Z M0.14347256,8.47866252 L1.00430792,9.19719324 C1.14778048,8.90978095 1.4347256,8.76607481 1.57819816,8.76607481 C1.72167072,8.76607481 1.72167072,8.76607481 1.86514328,8.90978095 C2.00861584,9.0534871 2.00861584,9.0534871 2.00861584,9.19719324 C2.00861584,9.34089938 2.00861584,9.48460553 1.86514328,9.62831167 C1.72167072,9.77201782 1.57819816,9.91572396 1.4347256,10.2031362 L0.14347256,11.6401977 L0.14347256,12.5024346 L3.29986888,12.5024346 L3.29986888,11.3527854 L1.86514328,11.3527854 L2.43903352,10.7779608 C2.8694512,10.3468424 3.15639632,10.0594301 3.15639632,9.77201782 C3.29986888,9.48460553 3.29986888,9.34089938 3.29986888,9.0534871 C3.29986888,8.62236866 3.15639632,8.33495637 2.8694512,8.04754408 C2.58250608,7.7601318 2.1520884,7.61642565 1.72167072,7.61642565 C1.00430792,7.61642565 0.43041768,7.90383794 0.14347256,8.47866252 Z M2.72597864,17.6758558 C3.15639632,17.3884435 3.29986888,17.1010312 3.29986888,16.5262066 C3.29986888,16.0950882 3.15639632,15.8076759 2.8694512,15.5202636 C2.58250608,15.2328513 2.1520884,15.2328513 1.72167072,15.2328513 C1.4347256,15.2328513 1.00430792,15.3765574 0.7173628,15.5202636 C0.43041768,15.6639697 0.28694512,15.951382 0.14347256,16.2387943 L1.14778048,16.8136189 C1.29125304,16.5262066 1.4347256,16.3825005 1.72167072,16.3825005 C1.86514328,16.3825005 2.00861584,16.3825005 2.00861584,16.5262066 C2.1520884,16.5262066 2.1520884,16.6699127 2.1520884,16.8136189 C2.1520884,16.957325 2.1520884,16.957325 2.00861584,17.1010312 C1.86514328,17.1010312 1.86514328,17.2447373 1.72167072,17.2447373 L1.29125304,17.2447373 L1.29125304,18.2506803 L1.57819816,18.2506803 C1.72167072,18.2506803 1.86514328,18.2506803 2.00861584,18.3943865 C2.1520884,18.5380926 2.1520884,18.5380926 2.1520884,18.6817988 C2.1520884,18.8255049 2.1520884,18.9692111 2.00861584,18.9692111 C1.86514328,19.1129172 1.86514328,19.1129172 1.72167072,19.1129172 C1.4347256,19.1129172 1.29125304,18.9692111 1.14778048,18.6817988 L1.687539e-14,18.9692111 C0.14347256,19.2566233 0.28694512,19.5440356 0.7173628,19.8314479 C1.00430792,19.9751541 1.4347256,20.1188602 1.86514328,20.1188602 C2.29556096,20.1188602 2.72597864,19.9751541 3.01292376,19.6877418 C3.29986888,19.4003295 3.44334144,19.1129172 3.44334144,18.6817988 C3.44334144,18.2506803 3.15639632,17.8195619 2.72597864,17.6758558 Z" id="合并形状" fill="#666666" fill-rule="nonzero"></path>
+                    <g id="编组-2" transform="translate(7.000000, 2.000000)" fill="#CACACA">
+                        <path d="M0.59981695,7.55958265 L8.40018305,7.55958265 C8.7314528,7.55958265 9,7.82812984 9,8.1593996 C9,8.49066935 8.7314528,8.75921655 8.40018305,8.75921655 L0.59981695,8.75921655 C0.268547196,8.75921655 4.05688444e-17,8.49066935 0,8.1593996 C-4.05688444e-17,7.82812984 0.268547196,7.55958265 0.59981695,7.55958265 Z" id="矩形备份-74"></path>
+                        <path d="M0.59981695,0 L12.400183,0 C12.7314528,-2.44215884e-15 13,0.268547196 13,0.59981695 C13,0.931086705 12.7314528,1.1996339 12.400183,1.1996339 L0.59981695,1.1996339 C0.268547196,1.1996339 4.05688444e-17,0.931086705 0,0.59981695 C-4.05688444e-17,0.268547196 0.268547196,6.08532667e-17 0.59981695,0 Z" id="矩形备份-75"></path>
+                        <path d="M0.59981695,15 L12.400183,15 C12.7314528,15 13,15.2685472 13,15.599817 C13,15.9310867 12.7314528,16.1996339 12.400183,16.1996339 L0.59981695,16.1996339 C0.268547196,16.1996339 4.05688444e-17,15.9310867 0,15.599817 C-4.05688444e-17,15.2685472 0.268547196,15 0.59981695,15 Z" id="矩形备份-77"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </svg>`
+    },
+    {
+        key: PluginMenuIcons.link,
+        svg: `<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <title>链接</title>
+        <g id="链接" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+            <g id="icon">
+                <rect id="矩形" stroke="#EEEEEE" fill="#FFFFFF" x="0.5" y="0.5" width="35" height="35" rx="4"></rect>
+                <g id="编组-5" transform="translate(5.000000, 10.000000)">
+                    <path d="M18.6642225,7.87948239 L21.6075695,7.87948239 C21.9389404,7.87948239 22.2075695,8.14811154 22.2075695,8.47948239 C22.2075695,8.81085324 21.9389404,9.07948239 21.6075695,9.07948239 L18.6642225,9.07948239 C18.3328516,9.07948239 18.0642225,8.81085324 18.0642225,8.47948239 C18.0642225,8.14811154 18.3328516,7.87948239 18.6642225,7.87948239 Z" id="矩形备份-76" fill="#73D897"></path>
+                    <path d="M18.6642225,2.29271731 L24.4,2.29271731 C24.7313708,2.29271731 25,2.56134646 25,2.89271731 C25,3.22408816 24.7313708,3.49271731 24.4,3.49271731 L18.6642225,3.49271731 C18.3328516,3.49271731 18.0642225,3.22408816 18.0642225,2.89271731 C18.0642225,2.56134646 18.3328516,2.29271731 18.6642225,2.29271731 Z" id="矩形备份-89" fill="#6698FF"></path>
+                    <path d="M18.6642225,13.4662475 L24.4,13.4662475 C24.7313708,13.4662475 25,13.7348766 25,14.0662475 C25,14.3976183 24.7313708,14.6662475 24.4,14.6662475 L18.6642225,14.6662475 C18.3328516,14.6662475 18.0642225,14.3976183 18.0642225,14.0662475 C18.0642225,13.7348766 18.3328516,13.4662475 18.6642225,13.4662475 Z" id="矩形备份-91" fill="#FF7575"></path>
+                    <g id="1.Base基础/1.icon图标/11.editor/link-insert" transform="translate(-1.000000, -1.000000)" fill="#DDDDDD">
+                        <path d="M9.25269168,6.12928454 C11.4618307,6.12928454 13.2526917,7.92014554 13.2526917,10.1292845 L13.2526917,14.1292845 C13.2526917,16.3384235 11.4618307,18.1292845 9.25269168,18.1292845 C7.04355269,18.1292845 5.25269168,16.3384235 5.25269168,14.1292845 L5.25269168,13.1292845 L6.45269168,13.1292845 L6.45269168,14.1292845 C6.45269168,15.6756818 7.70629439,16.9292845 9.25269168,16.9292845 C10.799089,16.9292845 12.0526917,15.6756818 12.0526917,14.1292845 L12.0526917,10.1292845 C12.0526917,8.58288724 10.799089,7.32928454 9.25269168,7.32928454 L9.25269168,6.12928454 Z M9.25269168,0.129284535 C11.4618307,0.129284535 13.2526917,1.92014554 13.2526917,4.12928454 L13.2526917,5.12928454 L12.0526917,5.12928454 L12.0526917,4.12928454 C12.0526917,2.58288724 10.799089,1.32928454 9.25269168,1.32928454 C7.70629439,1.32928454 6.45269168,2.58288724 6.45269168,4.12928454 L6.45269168,8.12928454 C6.45269168,9.67568184 7.70629439,10.9292845 9.25269168,10.9292845 L9.25269168,12.1292845 C7.04355269,12.1292845 5.25269168,10.3384235 5.25269168,8.12928454 L5.25269168,4.12928454 C5.25269168,1.92014554 7.04355269,0.129284535 9.25269168,0.129284535 Z" id="形状结合" transform="translate(9.252692, 9.129285) rotate(46.000000) translate(-9.252692, -9.129285) "></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </svg>`
+    }
+];
 
 class ElementStylePipe {
     transform(element, align) {
@@ -1160,6 +1418,14 @@ function filterTextFormat(node) {
         }
     });
 }
+function recursionNodes(nodes, callback) {
+    nodes.forEach(element => {
+        if (Element$1.isElement(element)) {
+            recursionNodes(element.children, callback);
+        }
+        callback(element);
+    });
+}
 
 const isAcrossBlocks = (editor, fragment) => {
     const startBlock = getStartBlock(editor, fragment[0]);
@@ -1458,6 +1724,58 @@ const pluginsByKey = (editor, plugins) => {
     });
 };
 
+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;
+        }
+    }
+};
+
+/**
+ * 构建插入菜单，用于绑定界面
+ * @param editor
+ * @param items
+ * @returns
+ */
+const buildPluginMenu = (menuItemMap, items) => {
+    return items
+        .map(item => {
+        if (ThePluginMenu.isMenuGroup(item)) {
+            return item;
+        }
+        else {
+            return menuItemMap.get(item);
+        }
+    })
+        .filter(item => !!item);
+};
+const buildPluginMenuItemMap = (editor) => {
+    const map = new Map();
+    const pluginMenuItems = editor === null || editor === void 0 ? void 0 : editor.plugins.reduce((ret, current) => {
+        var _a;
+        ret.push(...((_a = current === null || current === void 0 ? void 0 : current.menuItems) !== null && _a !== void 0 ? _a : []));
+        return ret;
+    }, []);
+    pluginMenuItems.forEach(menuItem => {
+        if (menuItem) {
+            map.set(menuItem.key, menuItem);
+        }
+    });
+    return map;
+};
+
 const withTheia = (editor, plugins = []) => {
     let e = editor;
     e.renderElement = (element) => null;
@@ -1593,6 +1911,7 @@ var PluginKeys;
     PluginKeys["quickInsert"] = "quick-insert";
     PluginKeys["paintFormat"] = "paint-format";
     PluginKeys["mention"] = "mention";
+    PluginKeys["internalCommon"] = "internalCommon";
 })(PluginKeys || (PluginKeys = {}));
 
 function idCreator(length = 5) {
@@ -1664,7 +1983,7 @@ function dataSerializing(mode, value) {
 
 const THE_EDITOR_UUID = new WeakMap();
 const THE_EDITOR_CONVERSION_HINT_REF = new WeakMap();
-const THE_EDITOR_QUICK_TOOLBAR_REF = new WeakMap();
+const THE_PLUGIN_MENU_REF = new WeakMap();
 const THE_EDITOR_ORIGIN_ANCHOR = new WeakMap();
 const THE_EDITOR_POPOVER_REF = new WeakMap();
 
@@ -1836,11 +2155,26 @@ const autoScrollViewHandle = (editor, scrollContainer) => {
     previousHeight = currentHeight;
 };
 
-const toolbarInitialize = (toolbarItems, global = DefaultGlobalToolbarDefinition, inline = DefaultInlineToolbarDefinition, quick = DefaultQuickToolbarDefinition) => {
+const base64toBlob = (b64Data, contentType = '', sliceSize = 512) => {
+    const byteCharacters = atob(b64Data);
+    const byteArrays = [];
+    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
+        const slice = byteCharacters.slice(offset, offset + sliceSize);
+        const byteNumbers = new Array(slice.length);
+        for (let i = 0; i < slice.length; i++) {
+            byteNumbers[i] = slice.charCodeAt(i);
+        }
+        const byteArray = new Uint8Array(byteNumbers);
+        byteArrays.push(byteArray);
+    }
+    const blob = new Blob(byteArrays, { type: contentType });
+    return blob;
+};
+
+const toolbarInitialize = (toolbarItems, global = DefaultGlobalToolbarDefinition, inline = DefaultInlineToolbarDefinition) => {
     const toolbarDefinition = {
         global,
-        inline,
-        quick
+        inline
     };
     const toolbarOperations = new Map();
     toolbarItems.forEach(i => toolbarOperations.set(i.key, i));
@@ -1882,7 +2216,7 @@ const createToolbar = (editor, toolbar) => {
         prevItems.push(...((_a = nextPlugin === null || nextPlugin === void 0 ? void 0 : nextPlugin.toolbarItems) !== null && _a !== void 0 ? _a : []));
         return prevItems;
     }, []);
-    const toolbarOption = toolbarInitialize(toolbarItems, toolbar === null || toolbar === void 0 ? void 0 : toolbar.global, toolbar === null || toolbar === void 0 ? void 0 : toolbar.inline, toolbar === null || toolbar === void 0 ? void 0 : toolbar.quick);
+    const toolbarOption = toolbarInitialize(toolbarItems, toolbar === null || toolbar === void 0 ? void 0 : toolbar.global, toolbar === null || toolbar === void 0 ? void 0 : toolbar.inline);
     const globalToolbarClass = ['the-global-toolbar', getToolbarClass(editor)];
     const toolbarEntity = toolbarOption.toolbarEntity;
     return {
@@ -2113,11 +2447,22 @@ class TheToolbarDropdownComponent extends TheBaseToolbarDropdown {
         this.viewContainerRef = viewContainerRef;
         this.overlay = overlay;
         this.className = 'the-toolbar-dropdown-container';
+        this.activeKeys = [];
         this.dropdownMode = DropdownMode;
     }
     get isOpen() {
         return this.dropdownPopoverRef && this.dropdownPopoverRef.getOverlayRef() && this.dropdownPopoverRef.getOverlayRef().hasAttached();
     }
+    get activeIcon() {
+        var _a;
+        if (this.toolbarItem.dropdownFixedIcon) {
+            return this.toolbarItem.icon;
+        }
+        return (_a = this.activeMenuItem) === null || _a === void 0 ? void 0 : _a.icon;
+    }
+    get activeDropdown() {
+        return this.toolbarItem.dropdownFixedIcon && !!this.activeKeys.length;
+    }
     ngOnInit() {
         var _a, _b, _c, _d;
         if (!this.activeMenuItem) {
@@ -2127,6 +2472,14 @@ class TheToolbarDropdownComponent extends TheBaseToolbarDropdown {
             (_c = (_b = this.elementRef.nativeElement) === null || _b === void 0 ? void 0 : _b.classList) === null || _c === void 0 ? void 0 : _c.add(`${(_d = this.toolbarItem) === null || _d === void 0 ? void 0 : _d.key}`);
         }
     }
+    selectionChange(editor) {
+        super.selectionChange(editor);
+        for (const menu of this.menus) {
+            if ((menu === null || menu === void 0 ? void 0 : menu.active) && (menu === null || menu === void 0 ? void 0 : menu.active(editor))) {
+                this.activeKeys.push(menu.key);
+            }
+        }
+    }
     toggleDropdown(event) {
         var _a;
         super.execute(event);
@@ -2164,7 +2517,7 @@ class TheToolbarDropdownComponent extends TheBaseToolbarDropdown {
             outsideClosable: true,
             backdropClosable: true,
             hasBackdrop: false,
-            offset: 10,
+            offset: 4,
             minWidth: 0,
             viewContainerRef: this.viewContainerRef,
             scrollStrategy: this.overlay.scrollStrategies.reposition()
@@ -2184,9 +2537,9 @@ class TheToolbarDropdownComponent extends TheBaseToolbarDropdown {
             overlayX: 'start',
             overlayY: 'bottom',
             offsetX: 0,
-            offsetY: -15
+            offsetY: -4
         };
-        const bottomPosition = Object.assign(Object.assign({}, topPosition), { overlayY: 'top', offsetY: 42 });
+        const bottomPosition = Object.assign(Object.assign({}, topPosition), { originY: 'bottom', overlayY: 'top', offsetY: 4 });
         return this.overlay
             .position()
             .flexibleConnectedTo(this.elementRef)
@@ -2197,10 +2550,10 @@ class TheToolbarDropdownComponent extends TheBaseToolbarDropdown {
     }
 }
 TheToolbarDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheToolbarDropdownComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ThyPopover }, { token: i0.ViewContainerRef }, { token: i2$1.Overlay }], target: i0.ɵɵFactoryTarget.Component });
-TheToolbarDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: { itemMousedownHandle: "itemMousedownHandle" }, 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 link-with-down\"\n    thyAction\n    [thyActionIcon]=\"activeMenuItem?.icon\"\n    thyTooltipPlacement=\"top\"\n    (mousedown)=\"preventDefault($event)\"\n    (click)=\"toggleDropdown($event)\"\n>\n    <thy-icon 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    thyTooltipPlacement=\"top\"\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                href=\"javascript:;\"\n                thyDropdownMenuItem\n                [ngStyle]=\"menu?.styles\"\n                [thyDropdownMenuItemActive]=\"menu.key === activeMenuItem?.key && !toolbarItem?.dropdownFixedIcon\"\n                (mousedown)=\"preventDefault($event)\"\n                (click)=\"itemMousedown($event, menu)\"\n            >\n                <thy-icon *ngIf=\"menu.icon && mode === dropdownMode.icon\" thyDropdownMenuItemIcon [thyIconName]=\"menu.icon\"></thy-icon>\n                <span *ngIf=\"menu.name\" thyDropdownMenuItemName>{{ menu.name }}</span>\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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: i5.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i6.ThyDropdownMenuDividerComponent, selector: "thy-dropdown-menu-divider" }, { kind: "directive", type: i6.ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: i6.ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: i6.ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: i6.ThyDropdownMenuItemActiveDirective, selector: "[thyDropdownMenuItemActive]", inputs: ["thyDropdownMenuItemActive"] }] });
+TheToolbarDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: { itemMousedownHandle: "itemMousedownHandle" }, 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    thyTooltipPlacement=\"top\"\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    thyTooltipPlacement=\"top\"\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 *ngIf=\"menu.icon && mode === dropdownMode.icon\" thyDropdownMenuItemIcon [thyIconName]=\"menu.icon\"></thy-icon>\n                    <span *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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: i5.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i6.ThyDropdownMenuDividerComponent, selector: "thy-dropdown-menu-divider" }, { kind: "directive", type: i6.ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: i6.ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: i6.ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: i6.ThyDropdownMenuItemActiveDirective, selector: "[thyDropdownMenuItemActive]", inputs: ["thyDropdownMenuItemActive"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheToolbarDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'the-toolbar-dropdown', template: "<a\n    *ngIf=\"mode === dropdownMode.icon\"\n    href=\"javascript:;\"\n    class=\"icon-mode link-with-down\"\n    thyAction\n    [thyActionIcon]=\"activeMenuItem?.icon\"\n    thyTooltipPlacement=\"top\"\n    (mousedown)=\"preventDefault($event)\"\n    (click)=\"toggleDropdown($event)\"\n>\n    <thy-icon 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    thyTooltipPlacement=\"top\"\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                href=\"javascript:;\"\n                thyDropdownMenuItem\n                [ngStyle]=\"menu?.styles\"\n                [thyDropdownMenuItemActive]=\"menu.key === activeMenuItem?.key && !toolbarItem?.dropdownFixedIcon\"\n                (mousedown)=\"preventDefault($event)\"\n                (click)=\"itemMousedown($event, menu)\"\n            >\n                <thy-icon *ngIf=\"menu.icon && mode === dropdownMode.icon\" thyDropdownMenuItemIcon [thyIconName]=\"menu.icon\"></thy-icon>\n                <span *ngIf=\"menu.name\" thyDropdownMenuItemName>{{ menu.name }}</span>\n            </a>\n            <thy-dropdown-menu-divider *ngIf=\"menu.key === 'split'\"></thy-dropdown-menu-divider>\n        </ng-container>\n    </div>\n</ng-template>\n" }]
+            args: [{ selector: 'the-toolbar-dropdown', template: "<a\n    *ngIf=\"mode === dropdownMode.icon\"\n    href=\"javascript:;\"\n    class=\"icon-mode\"\n    thyAction\n    [thyActionIcon]=\"activeIcon\"\n    [thyActionActive]=\"activeDropdown\"\n    thyTooltipPlacement=\"top\"\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    thyTooltipPlacement=\"top\"\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 *ngIf=\"menu.icon && mode === dropdownMode.icon\" thyDropdownMenuItemIcon [thyIconName]=\"menu.icon\"></thy-icon>\n                    <span *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" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ThyPopover }, { type: i0.ViewContainerRef }, { type: i2$1.Overlay }]; }, propDecorators: { className: [{
                 type: HostBinding,
                 args: ['class']
@@ -2221,19 +2574,12 @@ class TheToolbarItemComponent extends TheBaseToolbarItem {
     constructor(ngZone) {
         super();
         this.ngZone = ngZone;
-        this.ToolbarItemMode = ToolbarItemMode;
         this.className = 'the-toolbar-item';
-        this.itemMode = ToolbarItemMode.horizontal;
     }
     toggleDropdown(event) {
         super.execute(event);
     }
-    ngOnInit() {
-        var _a, _b;
-        if (((_a = this.toolbarItem) === null || _a === void 0 ? void 0 : _a.quickItemComponent) && isComponentType((_b = this.toolbarItem) === null || _b === void 0 ? void 0 : _b.quickItemComponent)) {
-            this.renderToolbarItem();
-        }
-    }
+    ngOnInit() { }
     preventDefault(event) {
         event.preventDefault();
         event.stopPropagation();
@@ -2246,75 +2592,44 @@ class TheToolbarItemComponent extends TheBaseToolbarItem {
         }
         (_c = this.toolbarItem) === null || _c === void 0 ? void 0 : _c.execute(this.editor);
     }
-    renderToolbarItem() {
-        this.ngZone.run(() => {
-            const toolbarItemRef = this.toolbarContainer.createComponent(this.toolbarItem.quickItemComponent);
-            toolbarItemRef.instance.editor = this.editor;
-            toolbarItemRef.instance.item = this.toolbarItem;
-            toolbarItemRef.instance.itemMode = ToolbarItemMode.vertical;
-        });
-    }
 }
 TheToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheToolbarItemComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-TheToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: { itemMode: "itemMode" }, host: { listeners: { "mousedown": "toggleDropdown($event)" }, properties: { "class": "this.className" } }, viewQueries: [{ propertyName: "toolbarContainer", first: true, predicate: ["toolbarContainer"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: `
-        <ng-container *ngIf="itemMode === ToolbarItemMode.horizontal; else selectionItem">
-            <a
-                href="javascript:;"
-                thyAction
-                [thyActionIcon]="toolbarItem.icon"
-                [thyActionActive]="active"
-                [thyTooltip]="tooltip"
-                [thyTooltipTemplateContext]="{ name: toolbarItem.name, shortcutKey: toolbarItem.shortcutKey }"
-                thyTooltipPlacement="top"
-                (mousedown)="preventDefault($event)"
-                (click)="execute($event)"
-            ></a>
-        </ng-container>
-        <ng-template #selectionItem>
-            <ng-container *ngIf="!toolbarItem?.quickItemComponent">
-                <thy-icon [thyIconName]="toolbarItem?.icon" [thyIconRotate]="0" class="quick-toolbar-icon"></thy-icon>
-                <span class="quick-toolbar-name">{{ toolbarItem?.name }}</span>
-            </ng-container>
-        </ng-template>
+TheToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TheToolbarItemComponent, selector: "the-toolbar-item", host: { listeners: { "mousedown": "toggleDropdown($event)" }, properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0, template: `
+        <a
+            href="javascript:;"
+            thyAction
+            [thyActionIcon]="toolbarItem.icon"
+            [thyActionActive]="active"
+            [thyTooltip]="tooltip"
+            [thyTooltipTemplateContext]="{ name: toolbarItem.name, shortcutKey: toolbarItem.shortcutKey }"
+            thyTooltipPlacement="top"
+            (mousedown)="preventDefault($event)"
+            (click)="execute($event)"
+        ></a>
         <ng-template #tooltip let-data> {{ data.name }} {{ data.shortcutKey }} </ng-template>
-        <ng-container #toolbarContainer></ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i3$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i5.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i5.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheToolbarItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'the-toolbar-item',
                     template: `
-        <ng-container *ngIf="itemMode === ToolbarItemMode.horizontal; else selectionItem">
-            <a
-                href="javascript:;"
-                thyAction
-                [thyActionIcon]="toolbarItem.icon"
-                [thyActionActive]="active"
-                [thyTooltip]="tooltip"
-                [thyTooltipTemplateContext]="{ name: toolbarItem.name, shortcutKey: toolbarItem.shortcutKey }"
-                thyTooltipPlacement="top"
-                (mousedown)="preventDefault($event)"
-                (click)="execute($event)"
-            ></a>
-        </ng-container>
-        <ng-template #selectionItem>
-            <ng-container *ngIf="!toolbarItem?.quickItemComponent">
-                <thy-icon [thyIconName]="toolbarItem?.icon" [thyIconRotate]="0" class="quick-toolbar-icon"></thy-icon>
-                <span class="quick-toolbar-name">{{ toolbarItem?.name }}</span>
-            </ng-container>
-        </ng-template>
+        <a
+            href="javascript:;"
+            thyAction
+            [thyActionIcon]="toolbarItem.icon"
+            [thyActionActive]="active"
+            [thyTooltip]="tooltip"
+            [thyTooltipTemplateContext]="{ name: toolbarItem.name, shortcutKey: toolbarItem.shortcutKey }"
+            thyTooltipPlacement="top"
+            (mousedown)="preventDefault($event)"
+            (click)="execute($event)"
+        ></a>
         <ng-template #tooltip let-data> {{ data.name }} {{ data.shortcutKey }} </ng-template>
-        <ng-container #toolbarContainer></ng-container>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { className: [{
                 type: HostBinding,
                 args: ['class']
-            }], itemMode: [{
-                type: Input
-            }], toolbarContainer: [{
-                type: ViewChild,
-                args: ['toolbarContainer', { read: ViewContainerRef, static: true }]
             }], toggleDropdown: [{
                 type: HostListener,
                 args: ['mousedown', ['$event']]
@@ -2374,7 +2689,12 @@ class TheToolbarComponent {
         });
         this.resizeObserver.observe(editableElement);
     }
+    isTableActive() {
+        const [table] = Editor.nodes(this.editor, { match: n => Element$1.isElement(n) && n.type === ElementKinds.table });
+        return !!table;
+    }
     selectionChange(editor) {
+        this.renderToolbarView();
         const toolbarItems = [...this.toolbarItems, this.moreGroupMenu];
         for (const item of toolbarItems) {
             if (item.key !== ToolbarActionTypes.split) {
@@ -2405,7 +2725,7 @@ class TheToolbarComponent {
     /**
      * calculation display toolbar and more grouped toolbars
      *
-     *	┌──────────────────────────────────────── GoolbarToolbarView ───────────────────────────────────┐
+     *	┌────────────────────────────────────────  GlobalToolbarView ───────────────────────────────────┐
      *	| ┌─────────────────────────────────────── #children ─────────────────────────────────────────┐ |
      *	| |   ┌─────── #itemsView ────────┐ ┌──────────────────────┐ ┌── #groupedItemsDropdown ───┐   | |
      *	| |   |       #ungroupedItems     | | ToolbarSeparatorView | |        #groupedItems       |   | |
@@ -2413,53 +2733,49 @@ class TheToolbarComponent {
      *	| |                                  \---------- only when toolbar items overflow --------/   | |
      *	| └───────────────────────────────────────────────────────────────────────────────────────────┘ |
      *	└───────────────────────────────────────────────────────────────────────────────────────────────┘
-     * split width: 17px
-     * item width: default item: 35px; dropdown item: 42px
+     * split width: 13px
+     * item width: default item: 32px; dropdown item: 48px
      * default paddingRight: 4px
      * set aside 50px
      */
     toolbarItemsCompose() {
         let elementWidth = this.isMore ? this.elementWidth : null;
         // dropdown item + paddingRight
-        const maxItemWidth = 46;
+        const maxItemWidth = 52;
         // default item + paddingRight
         const defaultItemWidth = 36;
-        const splitWidth = 17;
-        const splitPadding = 8;
-        // special type
-        const headingWidth = 75;
-        const fontSizeWidth = 52;
         const items = [];
         const group = [];
-        for (const item of this.toolbarItems) {
+        for (let i = 0; i < this.toolbarItems.length; i++) {
+            const item = this.toolbarItems[i];
             if (!this.isMore) {
                 items.push(item);
                 continue;
             }
-            // not enough free space
-            const allowRender = elementWidth && elementWidth > maxItemWidth;
-            if (allowRender && item.key === ToolbarActionTypes.split) {
-                items.push(item);
-                elementWidth -= splitWidth;
-                elementWidth -= splitPadding;
-                continue;
+            let itemWidth = defaultItemWidth;
+            switch (item.key) {
+                case ElementKinds.headingList:
+                    itemWidth = 74;
+                    break;
+                case ToolbarActionTypes.split:
+                    itemWidth = 13;
+                    break;
+                case ToolbarActionTypes.verticalAlign:
+                    itemWidth = this.isTableActive() ? maxItemWidth : 0;
+                    break;
+                default:
+                    const isCustomComponent = (item === null || item === void 0 ? void 0 : item.type) === ToolbarItemType.dropdown || !!(item === null || item === void 0 ? void 0 : item.iconComponent);
+                    itemWidth = isCustomComponent ? maxItemWidth : defaultItemWidth;
             }
+            const remainingWidth = i === this.toolbarItems.length - 1 ? itemWidth : itemWidth + defaultItemWidth;
+            const allowRender = elementWidth && elementWidth >= remainingWidth;
+            elementWidth -= itemWidth;
             if (allowRender) {
                 items.push(item);
             }
             else {
                 group.push(item);
             }
-            if (item.key === ElementKinds.headingList) {
-                elementWidth -= headingWidth;
-                continue;
-            }
-            if (item.key === MarkTypes.fontSize) {
-                elementWidth -= fontSizeWidth;
-                continue;
-            }
-            const isCustomComponent = (item === null || item === void 0 ? void 0 : item.type) === ToolbarItemType.dropdown || !!(item === null || item === void 0 ? void 0 : item.iconComponent);
-            elementWidth -= isCustomComponent ? maxItemWidth : defaultItemWidth;
         }
         return {
             items: this.pureToolbarItems(items),
@@ -4722,6 +5038,19 @@ const createBlockquotePlugin = createPluginFactory({
             execute: editor => BlockquoteEditor.toggleBlockquote(editor)
         }
     ],
+    menuItems: [
+        {
+            key: ElementKinds.blockquote,
+            type: ThePluginMenuItemType.group,
+            keywords: 'yy,yinyong,quote,引用',
+            active: editor => isBlockActive(editor, ElementKinds.blockquote),
+            execute: editor => BlockquoteEditor.toggleBlockquote(editor),
+            name: '引用',
+            description: '引用内容',
+            menuIcon: PluginMenuIcons.blockquote,
+            displayKey: '/yy'
+        }
+    ],
     options: {
         allowParentTypes: [ElementKinds.tableCell]
     }
@@ -4746,7 +5075,6 @@ class TheCodeComponent extends TheBaseElementComponent {
             return { key: item.value, name: item.showName };
         });
         this.destroy$ = new Subject();
-        this.ToolbarItemMode = ToolbarItemMode;
         this.isHightLight = false;
         this.resizeHeight = null;
         this.options = {
@@ -4988,7 +5316,7 @@ class TheCodeComponent extends TheBaseElementComponent {
     }
 }
 TheCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheCodeComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$2.ThyNotifyService }, { token: TheContextService }, { token: i0.NgZone }, { token: THE_MODE_TOKEN }, { token: i1$1.ThyPopover }, { token: i0.ViewContainerRef }, { token: i2$1.Overlay }], target: i0.ɵɵFactoryTarget.Component });
-TheCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TheCodeComponent, selector: "div[theCode]", viewQueries: [{ propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true, read: TemplateRef, static: true }, { propertyName: "codemirror", first: true, predicate: ["codemirror"], descendants: true, read: CodeMirrorComponent }, { propertyName: "toolbarDropdownComponent", first: true, predicate: TheToolbarDropdownComponent, descendants: true, read: TheToolbarDropdownComponent }], usesInheritance: true, ngImport: i0, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<!-- \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\" (mousedown)=\"preventDefault($event)\">\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\" (mousedown)=\"onCopy($event)\"></a>\n        <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n        <a\n            href=\"javascript:;\"\n            thyAction\n            thyType=\"danger\"\n            thyActionIcon=\"trash\"\n            thyTooltip=\"\u5220\u9664\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"onDelete($event)\"\n        ></a>\n    </thy-actions>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "directive", type: i9.ThyResizableDirective, selector: "[thyResizable]", inputs: ["thyBounds", "thyMaxHeight", "thyMaxWidth", "thyMinHeight", "thyMinWidth", "thyGridColumnCount", "thyMaxColumn", "thyMinColumn", "thyLockAspectRatio", "thyPreview", "thyDisabled"], outputs: ["thyResize", "thyResizeEnd", "thyResizeStart"] }, { kind: "component", type: i9.ThyResizeHandleComponent, selector: "thy-resize-handle, [thy-resize-handle]", inputs: ["thyDirection"], outputs: ["thyMouseDown"], exportAs: ["thyResizeHandle"] }, { kind: "component", type: i10.ThySwitchComponent, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled"], outputs: ["thyChange"] }, { kind: "component", type: i5.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i5.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "component", type: i12.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "component", type: i13.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["autoMaxHeight", "options", "delayRefreshTime"], outputs: ["focusChange"] }, { kind: "component", type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: ["itemMousedownHandle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TheCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TheCodeComponent, selector: "div[theCode]", viewQueries: [{ propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true, read: TemplateRef, static: true }, { propertyName: "codemirror", first: true, predicate: ["codemirror"], descendants: true, read: CodeMirrorComponent }, { propertyName: "toolbarDropdownComponent", first: true, predicate: TheToolbarDropdownComponent, descendants: true, read: TheToolbarDropdownComponent }], usesInheritance: true, ngImport: i0, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<!-- \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\" (mousedown)=\"preventDefault($event)\">\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\" (mousedown)=\"onCopy($event)\"></a>\n        <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n        <a\n            href=\"javascript:;\"\n            thyAction\n            thyType=\"danger\"\n            thyActionIcon=\"trash\"\n            thyTooltip=\"\u5220\u9664\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"onDelete($event)\"\n        ></a>\n    </thy-actions>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "directive", type: i9.ThyResizableDirective, selector: "[thyResizable]", inputs: ["thyBounds", "thyMaxHeight", "thyMaxWidth", "thyMinHeight", "thyMinWidth", "thyGridColumnCount", "thyMaxColumn", "thyMinColumn", "thyLockAspectRatio", "thyPreview", "thyDisabled"], outputs: ["thyResize", "thyResizeEnd", "thyResizeStart"] }, { kind: "component", type: i9.ThyResizeHandleComponent, selector: "thy-resize-handle, [thy-resize-handle]", inputs: ["thyDirection", "thyLine"], outputs: ["thyMouseDown"], exportAs: ["thyResizeHandle"] }, { kind: "component", type: i10.ThySwitchComponent, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled"], outputs: ["thyChange"] }, { kind: "component", type: i5.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i5.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "component", type: i12.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "component", type: i13.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["autoMaxHeight", "options", "delayRefreshTime"], outputs: ["focusChange"] }, { kind: "component", type: TheToolbarDropdownComponent, selector: "the-toolbar-dropdown", inputs: ["itemMousedownHandle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheCodeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'div[theCode]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<!-- \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\" (mousedown)=\"preventDefault($event)\">\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\" (mousedown)=\"onCopy($event)\"></a>\n        <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n        <a\n            href=\"javascript:;\"\n            thyAction\n            thyType=\"danger\"\n            thyActionIcon=\"trash\"\n            thyTooltip=\"\u5220\u9664\"\n            thyTooltipPlacement=\"top\"\n            (mousedown)=\"onDelete($event)\"\n        ></a>\n    </thy-actions>\n</ng-template>\n" }]
@@ -5039,6 +5367,19 @@ const createCodePlugin = createPluginFactory({
             execute: editor => CodeEditor.insertCode(editor)
         }
     ],
+    menuItems: [
+        {
+            key: ElementKinds.code,
+            type: ThePluginMenuItemType.group,
+            keywords: 'dmk,daimakuai,code,代码块',
+            active: editor => isBlockActive(editor, ElementKinds.code),
+            execute: editor => CodeEditor.insertCode(editor),
+            name: '代码块',
+            description: '支持插入多种语言代码块',
+            menuIcon: PluginMenuIcons.code,
+            displayKey: '/dmk'
+        }
+    ],
     options: {
         allowParentTypes: [ElementKinds.tableCell]
     }
@@ -5192,7 +5533,7 @@ class TheColorToolbarItemComponent extends TheBaseToolbarItem {
             origin: event.currentTarget,
             backdropClosable: false,
             placement: 'bottomLeft',
-            offset: 10,
+            offset: 0,
             minWidth: 0,
             hasBackdrop: false,
             insideClosable: false,
@@ -5224,7 +5565,7 @@ TheColorToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
             ></thy-icon>
             <thy-icon class="link-down-icon font-size-sm text-desc ml-1" thyIconName="caret-down"></thy-icon>
         </a>
-    `, isInline: true, dependencies: [{ kind: "component", type: i3.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i3$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i5.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: i3.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i5.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheColorToolbarItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -5623,6 +5964,23 @@ const createBlockCardPlugin = createPluginFactory({
     withOverrides: withBlockCard
 });
 
+const createCommonPlugin = createPluginFactory({
+    key: PluginKeys.internalCommon,
+    toolbarItems: [
+        {
+            key: ToolbarActionTypes.group,
+            name: '更多',
+            icon: 'more',
+            type: ToolbarItemType.dropdown,
+            dropdownMode: DropdownMode.icon,
+            dropdownItemKey: ToolbarActionTypes.group,
+            dropdownFixedIcon: true,
+            isHideDropdownActionIcon: true,
+            includes: [MarkTypes.underline, MarkTypes.strike, ElementKinds.inlineCode]
+        }
+    ]
+});
+
 const withGetFragment = (editor) => {
     var _a, _b;
     const { getFragment } = editor;
@@ -5913,6 +6271,74 @@ const createTransformsPlugin = createPluginFactory({
     withOverrides: withTransforms
 });
 
+const ImageEditor = {
+    openUpload(editor) {
+        const inputFile = document.createElement('input');
+        inputFile.setAttribute('type', 'file');
+        inputFile.setAttribute('accept', 'image/*');
+        inputFile.setAttribute('multiple', 'true');
+        inputFile.onchange = (event) => {
+            ImageEditor.insertImages(editor, event.target.files);
+        };
+        inputFile.click();
+    },
+    insertImages(editor, imageFiles) {
+        const contextService = editor.injector.get(TheContextService);
+        const imageNodes = [];
+        const text = { text: '' };
+        for (const image of imageFiles) {
+            const verify = ImageEditor.verifyImage(editor, image);
+            if (verify) {
+                const url = URL.createObjectURL(image);
+                contextService.addUploadingFiles({ url, file: image });
+                imageNodes.push({ type: ElementKinds.image, url, children: [text] });
+            }
+        }
+        if (imageNodes.length > 0) {
+            insertElements(editor, imageNodes);
+        }
+    },
+    handleBase64ImageElement(editor, image) {
+        if (isString(image.originUrl) && image.originUrl.includes('base64')) {
+            const indexSplit = image.originUrl.indexOf(',');
+            const base64 = image.originUrl.slice(indexSplit + 1);
+            const contentType = image.originUrl.substring(0, image.originUrl.indexOf(';'));
+            const blob = base64toBlob(base64, contentType);
+            const blobUrl = URL.createObjectURL(blob);
+            image.thumbUrl = blobUrl;
+            image.originUrl = blobUrl;
+            image.url = blobUrl;
+            const contextService = editor.injector.get(TheContextService);
+            contextService.addUploadingFiles({ url: blobUrl, file: new File([blob], '') });
+        }
+    },
+    verifyImage(editor, image) {
+        if (!PICTURE_ACCEPTED_UPLOAD_MIME.includes(image.type)) {
+            editor.onError({
+                code: ErrorCodes.IMAGE_ERR_MIME_FORMAT
+            });
+            return false;
+        }
+        if (image.size / 1000000 >= PICTURE_ACCEPTED_UPLOAD_SIZE) {
+            editor.onError({
+                code: ErrorCodes.IMAGE_ERR_SIZE_LIMIT
+            });
+            return false;
+        }
+        return true;
+    },
+    isImageActive(editor) {
+        const [match] = Editor.nodes(editor, {
+            match: n => Element$1.isElement(n) && n.type === ElementKinds.image,
+            universal: true
+        });
+        return !!match;
+    },
+    setImageNode(editor, path, partial) {
+        Transforms.setNodes(editor, partial, { at: path });
+    }
+};
+
 const withDeserializeHTML = (editor) => {
     const { insertData } = editor;
     editor.insertData = (data) => {
@@ -5934,6 +6360,13 @@ const withDeserializeHTML = (editor) => {
             }
             // 过滤 text 节点的 color/background-color 属性
             fragment.forEach(node => filterTextFormat(node));
+            // base 64 图片处理
+            recursionNodes(fragment, (node) => {
+                const isImage = Element$1.isElement(node) && node.type === ElementKinds.image;
+                if (isImage) {
+                    ImageEditor.handleBase64ImageElement(editor, node);
+                }
+            });
             Transforms.insertFragment(editor, fragment);
             return;
         }
@@ -6031,6 +6464,13 @@ const withDeserializeMd = (editor) => {
                                     editor.undo();
                                     setTimeout(() => {
                                         Transforms.select(editor, oldRange);
+                                        // base 64 图片处理
+                                        recursionNodes(fragment, (node) => {
+                                            const isImage = Element$1.isElement(node) && node.type === ElementKinds.image;
+                                            if (isImage) {
+                                                ImageEditor.handleBase64ImageElement(editor, node);
+                                            }
+                                        });
                                         Transforms.insertFragment(editor, fragment);
                                         AngularEditor.focus(editor);
                                     });
@@ -6228,6 +6668,7 @@ const createHeadingPlugin = createPluginFactory({
             key: ElementKinds.headingList,
             name: '正文',
             type: ToolbarItemType.dropdown,
+            dropdownMode: DropdownMode.text,
             dropdownItemKey: ElementKinds.paragraph,
             includes: [ElementKinds.paragraph, ...STANDARD_HEADING_TYPES]
         },
@@ -6271,6 +6712,52 @@ const createHeadingPlugin = createPluginFactory({
             active: editor => HeadingEditor.isHeadingActive(editor, ElementKinds.heading_4)
         }
     ],
+    menuItems: [
+        {
+            key: ElementKinds.heading_1,
+            type: ThePluginMenuItemType.icon,
+            execute: editor => HeadingEditor.setHeading(editor, ElementKinds.heading_1),
+            active: editor => HeadingEditor.isHeadingActive(editor, ElementKinds.heading_1),
+            name: '标题1',
+            displayKey: '/h1',
+            icon: 'header-1',
+            menuIcon: PluginMenuIcons.heading_1,
+            keywords: 'h,H,bt,BT,标题,h1'
+        },
+        {
+            key: ElementKinds.heading_2,
+            type: ThePluginMenuItemType.icon,
+            execute: editor => HeadingEditor.setHeading(editor, ElementKinds.heading_2),
+            active: editor => HeadingEditor.isHeadingActive(editor, ElementKinds.heading_2),
+            name: '标题2',
+            icon: 'header-2',
+            displayKey: '/h2',
+            menuIcon: PluginMenuIcons.heading_2,
+            keywords: 'h,H,bt,BT,标题,h2'
+        },
+        {
+            key: ElementKinds.heading_3,
+            type: ThePluginMenuItemType.icon,
+            execute: editor => HeadingEditor.setHeading(editor, ElementKinds.heading_3),
+            active: editor => HeadingEditor.isHeadingActive(editor, ElementKinds.heading_3),
+            name: '标题3',
+            icon: 'header-3',
+            displayKey: '/h3',
+            menuIcon: PluginMenuIcons.heading_3,
+            keywords: 'h,H,bt,BT,标题,h3'
+        },
+        {
+            key: ElementKinds.heading_4,
+            type: ThePluginMenuItemType.icon,
+            execute: editor => HeadingEditor.setHeading(editor, ElementKinds.heading_4),
+            active: editor => HeadingEditor.isHeadingActive(editor, ElementKinds.heading_4),
+            name: '标题4',
+            icon: 'header-4',
+            displayKey: '/h4',
+            menuIcon: PluginMenuIcons.heading_4,
+            keywords: 'h,H,bt,BT,标题,h4'
+        }
+    ],
     options: headingOptions
 });
 
@@ -6353,65 +6840,24 @@ const createHrPlugin = createPluginFactory({
             execute: editor => HrEditor.insertHr(editor)
         }
     ],
+    menuItems: [
+        {
+            key: ElementKinds.hr,
+            keywords: 'fengexian,fgx,divider,分割线',
+            type: ThePluginMenuItemType.group,
+            active: editor => isBlockActive(editor, ElementKinds.hr),
+            execute: editor => HrEditor.insertHr(editor),
+            name: '分割线',
+            menuIcon: PluginMenuIcons.hr,
+            description: '使用水平线分隔内容',
+            displayKey: '/fgx'
+        }
+    ],
     options: {
         allowParentTypes: [ElementKinds.tableCell]
     }
 });
 
-const ImageEditor = {
-    openUpload(editor) {
-        const inputFile = document.createElement('input');
-        inputFile.setAttribute('type', 'file');
-        inputFile.setAttribute('accept', 'image/*');
-        inputFile.setAttribute('multiple', 'true');
-        inputFile.onchange = (event) => {
-            ImageEditor.insertImages(editor, event.target.files);
-        };
-        inputFile.click();
-    },
-    insertImages(editor, imageFiles) {
-        const contextService = editor.injector.get(TheContextService);
-        const imageNodes = [];
-        const text = { text: '' };
-        for (const image of imageFiles) {
-            const verify = ImageEditor.verifyImage(editor, image);
-            if (verify) {
-                const url = URL.createObjectURL(image);
-                contextService.addUploadingFiles({ url, file: image });
-                imageNodes.push({ type: ElementKinds.image, url, children: [text] });
-            }
-        }
-        if (imageNodes.length > 0) {
-            insertElements(editor, imageNodes);
-        }
-    },
-    verifyImage(editor, image) {
-        if (!PICTURE_ACCEPTED_UPLOAD_MIME.includes(image.type)) {
-            editor.onError({
-                code: ErrorCodes.IMAGE_ERR_MIME_FORMAT
-            });
-            return false;
-        }
-        if (image.size / 1000000 >= PICTURE_ACCEPTED_UPLOAD_SIZE) {
-            editor.onError({
-                code: ErrorCodes.IMAGE_ERR_SIZE_LIMIT
-            });
-            return false;
-        }
-        return true;
-    },
-    isImageActive(editor) {
-        const [match] = Editor.nodes(editor, {
-            match: n => Element$1.isElement(n) && n.type === ElementKinds.image,
-            universal: true
-        });
-        return !!match;
-    },
-    setImageNode(editor, path, partial) {
-        Transforms.setNodes(editor, partial, { at: path });
-    }
-};
-
 class TheImageComponent extends TheBaseElementComponent {
     constructor(elementRef, imageUploaderService, cdr, theContextService, thyPopover, overlay, thyImageService, viewContainerRef) {
         super(elementRef, cdr);
@@ -6748,7 +7194,7 @@ class TheImageComponent extends TheBaseElementComponent {
     }
 }
 TheImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheImageComponent, deps: [{ token: i0.ElementRef }, { token: THE_UPLOAD_SERVICE_TOKEN }, { token: i0.ChangeDetectorRef }, { token: TheContextService }, { token: i1$1.ThyPopover }, { token: i2$1.Overlay }, { token: i4.ThyImageService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-TheImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TheImageComponent, selector: "the-image, [theImage]", 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 }], usesInheritance: true, ngImport: i0, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<div class=\"image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align\">\n    <div #imageContent *ngIf=\"imageEntry.thumbUrl\" class=\"image-content\" [class.pointer]=\"!selection\">\n        <img\n            #img\n            thyImage\n            [ngStyle]=\"{ 'width.px': imageBindingWidth }\"\n            [class.image-collapsed]=\"selection && !uploading\"\n            class=\"main-image\"\n            (load)=\"imageLoaded($event)\"\n            (mousedown)=\"preventDefault($event)\"\n            [thySrc]=\"imageEntry.thumbUrl\"\n            [thyPreviewSrc]=\"imageEntry.thumbUrl\"\n            [thyOriginSrc]=\"imageEntry.originUrl\"\n            [thyImageMeta]=\"{ name: imageEntry.name, size: imageEntry.size }\"\n            [alt]=\"imageEntry.name\"\n        />\n        <div *ngIf=\"isCollapsedAndNonReadonly\" class=\"image-profile\" [class.outline]=\"selection\">\n            <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n            <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n            <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n            <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n        </div>\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        <div *ngIf=\"!uploading\" class=\"layer\" [class.readonly]=\"readonly\"></div>\n    </div>\n    <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading\" contenteditable=\"false\">\n        <thy-icon thyIconName=\"image\"></thy-icon>\n    </div>\n</div>\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\"></thy-divider>\n        </ng-container>\n    </thy-actions>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { kind: "component", type: i3.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i3$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i9$1.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips"] }, { kind: "directive", type: i4.ThyImageDirective, selector: "img[thyImage]", inputs: ["thySrc", "thyPreviewSrc", "thyOriginSrc", "thyImageMeta", "thyDisablePreview", "thyResolveSize"], exportAs: ["thyImage"] }, { kind: "component", type: i5.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i5.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "component", type: i12.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }] });
+TheImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TheImageComponent, selector: "the-image, [theImage]", 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 }], usesInheritance: true, ngImport: i0, template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<div class=\"image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align\">\n    <div #imageContent *ngIf=\"imageEntry.thumbUrl\" class=\"image-content\" [class.pointer]=\"!selection\">\n        <img\n            #img\n            thyImage\n            [ngStyle]=\"{ 'width.px': imageBindingWidth }\"\n            [class.image-collapsed]=\"selection && !uploading\"\n            class=\"main-image\"\n            (load)=\"imageLoaded($event)\"\n            (mousedown)=\"preventDefault($event)\"\n            [thySrc]=\"imageEntry.thumbUrl\"\n            [thyPreviewSrc]=\"imageEntry.thumbUrl\"\n            [thyOriginSrc]=\"imageEntry.originUrl\"\n            [thyImageMeta]=\"{ name: imageEntry.name, size: imageEntry.size }\"\n            [alt]=\"imageEntry.name\"\n        />\n        <div *ngIf=\"isCollapsedAndNonReadonly\" class=\"image-profile\" [class.outline]=\"selection\">\n            <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n            <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n            <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n            <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n        </div>\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        <div *ngIf=\"!uploading\" class=\"layer\" [class.readonly]=\"readonly\"></div>\n    </div>\n    <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading\" contenteditable=\"false\">\n        <thy-icon thyIconName=\"image\"></thy-icon>\n    </div>\n</div>\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\"></thy-divider>\n        </ng-container>\n    </thy-actions>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1.SlateChildrenComponent, selector: "slate-children", inputs: ["children", "context", "viewContext"] }, { kind: "component", type: i3.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i9$1.ThyProgressComponent, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips"] }, { kind: "directive", type: i4.ThyImageDirective, selector: "img[thyImage]", inputs: ["thySrc", "thyPreviewSrc", "thyOriginSrc", "thyImageMeta", "thyDisablePreview", "thyResolveSize"], exportAs: ["thyImage"] }, { kind: "component", type: i5.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i5.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "component", type: i12.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheImageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-image, [theImage]', template: "<slate-children [children]=\"children\" [context]=\"childrenContext\" [viewContext]=\"viewContext\"></slate-children>\n\n<div class=\"image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align\">\n    <div #imageContent *ngIf=\"imageEntry.thumbUrl\" class=\"image-content\" [class.pointer]=\"!selection\">\n        <img\n            #img\n            thyImage\n            [ngStyle]=\"{ 'width.px': imageBindingWidth }\"\n            [class.image-collapsed]=\"selection && !uploading\"\n            class=\"main-image\"\n            (load)=\"imageLoaded($event)\"\n            (mousedown)=\"preventDefault($event)\"\n            [thySrc]=\"imageEntry.thumbUrl\"\n            [thyPreviewSrc]=\"imageEntry.thumbUrl\"\n            [thyOriginSrc]=\"imageEntry.originUrl\"\n            [thyImageMeta]=\"{ name: imageEntry.name, size: imageEntry.size }\"\n            [alt]=\"imageEntry.name\"\n        />\n        <div *ngIf=\"isCollapsedAndNonReadonly\" class=\"image-profile\" [class.outline]=\"selection\">\n            <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n            <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n            <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n            <span *ngIf=\"isCollapsedAndNonReadonly\" (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n        </div>\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        <div *ngIf=\"!uploading\" class=\"layer\" [class.readonly]=\"readonly\"></div>\n    </div>\n    <div *ngIf=\"!imageEntry.thumbUrl\" class=\"image-loading\" contenteditable=\"false\">\n        <thy-icon thyIconName=\"image\"></thy-icon>\n    </div>\n</div>\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\"></thy-divider>\n        </ng-container>\n    </thy-actions>\n</ng-template>\n" }]
@@ -6815,6 +7261,19 @@ const createImagePlugin = createPluginFactory({
             active: editor => ImageEditor.isImageActive(editor)
         }
     ],
+    menuItems: [
+        {
+            key: ElementKinds.image,
+            keywords: 'tp,tupian,image,图片',
+            execute: editor => ImageEditor.openUpload(editor),
+            active: editor => ImageEditor.isImageActive(editor),
+            name: '图片',
+            menuIcon: PluginMenuIcons.image,
+            description: '支持jpg、jpeg等格式图像',
+            type: ThePluginMenuItemType.group,
+            displayKey: '/tp'
+        }
+    ],
     options: {
         allowParentTypes: [ElementKinds.listItem, ElementKinds.tableCell, ElementKinds.blockquote],
         imageTypes: ['image/png', 'image/jpeg', 'image/gif', 'image/bmp']
@@ -6962,6 +7421,7 @@ const createIndentPlugin = createPluginFactory({
             key: ElementKinds.indent,
             includes: [Indents.indentRight, Indents.indentLeft],
             type: ToolbarItemType.dropdown,
+            icon: 'float-left',
             dropdownMode: DropdownMode.icon,
             dropdownItemKey: Indents.indentRight,
             dropdownFixedIcon: true
@@ -6977,7 +7437,7 @@ const createIndentPlugin = createPluginFactory({
             key: Indents.indentLeft,
             name: '减少缩进',
             icon: 'float-right',
-            shortcutKey: 'Shift+Tab/BackSpace',
+            shortcutKey: 'Shift+Tab',
             execute: editor => IndentEditor.cancelIndent(editor)
         }
     ],
@@ -7266,7 +7726,7 @@ class TheLinkEditComponent {
     }
 }
 TheLinkEditComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheLinkEditComponent, deps: [{ token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-TheLinkEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TheLinkEditComponent, 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: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { kind: "component", type: i3$2.ThyFormGroupComponent, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { kind: "directive", type: i3$2.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }, { kind: "component", type: i3$2.ThyFormGroupFooterComponent, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { kind: "directive", type: i4$1.ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutoSelect", "thyAutofocus"] }, { kind: "directive", type: i5$1.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { kind: "component", type: i1$4.ThyButtonComponent, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }] });
+TheLinkEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TheLinkEditComponent, 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: "directive", type: i2$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { kind: "component", type: i3$1.ThyFormGroupComponent, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { kind: "directive", type: i3$1.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }, { kind: "component", type: i3$1.ThyFormGroupFooterComponent, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { kind: "directive", type: i4$1.ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutoSelect", "thyAutofocus"] }, { kind: "directive", type: i5$1.ThyInputDirective, selector: "[thyInput]", inputs: ["thySize", "thyAutocomplete"] }, { kind: "component", type: i1$4.ThyButtonComponent, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheLinkEditComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-link-edit', 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" }]
@@ -7490,6 +7950,19 @@ const createLinkPlugin = createPluginFactory({
             active: editor => LinkEditor.isLinkActive(editor)
         }
     ],
+    menuItems: [
+        {
+            key: ElementKinds.link,
+            keywords: 'lj,linajie,link,链接',
+            execute: editor => LinkEditor.insertLink(editor),
+            active: editor => LinkEditor.isLinkActive(editor),
+            type: ThePluginMenuItemType.icon,
+            name: '链接',
+            displayKey: '/lj',
+            icon: 'link-insert',
+            menuIcon: PluginMenuIcons.link
+        }
+    ],
     options: {
         disabledOperateTypes: [ElementKinds.image, ...DISABLED_OPERATE_TYPES]
     }
@@ -8470,6 +8943,30 @@ const createListPlugin = createPluginFactory({
             active: editor => ListEditor.isActive(editor, ElementKinds.bulletedList)
         }
     ],
+    menuItems: [
+        {
+            key: ElementKinds.numberedList,
+            keywords: 'yxlb,youxuliebiao,numberedlist,有序列表',
+            execute: editor => ListEditor.toggleList(editor, ElementKinds.numberedList),
+            active: editor => ListEditor.isActive(editor, ElementKinds.numberedList),
+            type: ThePluginMenuItemType.icon,
+            name: '有序列表',
+            displayKey: '/yxlb',
+            icon: 'list-ordered',
+            menuIcon: PluginMenuIcons.numberedList
+        },
+        {
+            key: ElementKinds.bulletedList,
+            keywords: 'wxlb,wuxuliebiao,bulletedlist,无序列表',
+            execute: editor => ListEditor.toggleList(editor, ElementKinds.bulletedList),
+            active: editor => ListEditor.isActive(editor, ElementKinds.bulletedList),
+            type: ThePluginMenuItemType.icon,
+            name: '无序列表',
+            displayKey: '/wxlb',
+            icon: 'list-bullet',
+            menuIcon: PluginMenuIcons.bulletedList
+        }
+    ],
     options: listOptions
 });
 
@@ -9071,198 +9568,443 @@ const createPaintFormatPlugin = createPluginFactory({
     ]
 });
 
-class TheQuickToolbarComponent extends mixinUnsubscribe(MixinBase) {
-    constructor(elementRef, cdr) {
+class TheBaseSuggestion {
+    handleMousedown(event) {
+        event.preventDefault();
+    }
+}
+TheBaseSuggestion.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheBaseSuggestion, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+TheBaseSuggestion.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: TheBaseSuggestion, inputs: { editor: "editor", type: "type", keywords: "keywords" }, host: { listeners: { "mousedown": "handleMousedown($event)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheBaseSuggestion, decorators: [{
+            type: Directive
+        }], propDecorators: { editor: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], keywords: [{
+                type: Input
+            }], handleMousedown: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }] } });
+
+class TheVerticalToolbarItemComponent extends TheBaseToolbarDropdown {
+    constructor(elementRef, thyPopover, viewContainerRef) {
         super();
         this.elementRef = elementRef;
-        this.cdr = cdr;
-        this.ToolbarItemMode = ToolbarItemMode;
-        this.ToolbarActionTypes = ToolbarActionTypes;
+        this.thyPopover = thyPopover;
+        this.viewContainerRef = viewContainerRef;
+        this.isHide = true;
     }
-    handleMouseDown(event) {
+    get isOpened() {
+        return this.dropdownPopoverRef && this.dropdownPopoverRef.getOverlayRef() && this.dropdownPopoverRef.getOverlayRef().hasAttached();
+    }
+    handleDocumentMouseDown(event) {
         if (!this.elementRef.nativeElement.contains(event.target)) {
-            QuickInsertEditor.closeQuickInsertToolbar(this.editor);
-        }
-        else {
-            event.preventDefault();
+            this.close();
         }
     }
-    handleEnter() {
-        QuickInsertEditor.closeQuickInsertToolbar(this.editor);
-    }
-    handleEsc() {
-        QuickInsertEditor.closeQuickInsertToolbar(this.editor);
+    ngOnInit() { }
+    menusActive(editor) {
+        return this.menus.find(i => {
+            var _a;
+            if (((_a = this.editor) === null || _a === void 0 ? void 0 : _a.selection) && (i === null || i === void 0 ? void 0 : i.active)) {
+                return i === null || i === void 0 ? void 0 : i.active(editor);
+            }
+        });
     }
-    ngOnInit() {
-        this.editorElement = AngularEditor.toDOMNode(this.editor, this.editor);
+    execute(event) {
+        var _a, _b;
+        super.execute(event);
+        if (((_a = this.editor) === null || _a === void 0 ? void 0 : _a.readOnly) || ((_b = this.editor) === null || _b === void 0 ? void 0 : _b.disabled)) {
+            return;
+        }
+        this.openPopover();
     }
-    stopPropagation(event) {
+    itemMousedown(event, item) {
         event.preventDefault();
-    }
-    selectionChange(event) {
-        this.removeHotKey();
-        const toolbarItem = this.quickToolbarItems.find(item => item.key === event.value);
-        if (toolbarItem === null || toolbarItem === void 0 ? void 0 : toolbarItem.execute) {
-            toolbarItem.execute(this.editor);
+        event.stopPropagation();
+        this.close();
+        if (item === null || item === void 0 ? void 0 : item.execute) {
+            item === null || item === void 0 ? void 0 : item.execute(this.editor);
         }
     }
-    removeHotKey() {
+    openPopover() {
         var _a;
-        const hotkey = (_a = getPluginOptions(this.editor, PluginKeys.quickInsert)) === null || _a === void 0 ? void 0 : _a.hotkey;
-        const node = Node.get(this.editor, this.editor.selection.anchor.path);
-        if (node && hotkey === node.text) {
-            Editor.deleteBackward(this.editor);
-        }
+        this.dropdownPopoverRef = this.thyPopover.open(this.template, {
+            origin: this.elementRef,
+            panelClass: ['the-toolbar-dropdown-popover', (_a = this.toolbarItem) === null || _a === void 0 ? void 0 : _a.key],
+            placement: 'bottomLeft',
+            offset: 10,
+            minWidth: 0,
+            viewContainerRef: this.viewContainerRef,
+            insideClosable: false,
+            backdropClosable: false,
+            hasBackdrop: false
+        });
     }
-    ngOnDestroy() {
-        super.ngOnDestroy();
+    close() {
+        if (this.dropdownPopoverRef) {
+            this.dropdownPopoverRef.close();
+        }
     }
 }
-TheQuickToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheQuickToolbarComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TheQuickToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TheQuickToolbarComponent, selector: "the-quick-toolbar", inputs: { editor: "editor", quickToolbarItems: "quickToolbarItems" }, host: { listeners: { "document: mousedown": "handleMouseDown($event)", "document: keydown.enter": "handleEnter()", "document: keydown.escape": "handleEsc()" } }, usesInheritance: true, ngImport: i0, template: "<thy-selection-list\n    class=\"the-quick-toolbar\"\n    [thyBindKeyEventContainer]=\"editorElement\"\n    (thySelectionChange)=\"selectionChange($event)\"\n    [thyMultiple]=\"false\"\n>\n    <ng-container *ngFor=\"let item of quickToolbarItems\">\n        <ng-container *ngIf=\"item.key !== ToolbarActionTypes.split; else splitLine\">\n            <thy-list-option [thyValue]=\"item?.key\" (mousedown)=\"stopPropagation($event)\">\n                <the-toolbar-item [editor]=\"editor\" [toolbarItem]=\"item\" [itemMode]=\"ToolbarItemMode.vertical\"></the-toolbar-item>\n            </thy-list-option>\n        </ng-container>\n    </ng-container>\n</thy-selection-list>\n\n<ng-template #splitLine>\n    <thy-divider class=\"my-1 mx-5\"></thy-divider>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.ThySelectionListComponent, selector: "thy-selection-list,[thy-selection-list]", inputs: ["thyMultiple", "thyBindKeyEventContainer", "thyScrollContainer", "thyBeforeKeydown", "thyUniqueKey", "thyCompareWith", "thyLayout", "thyAutoActiveFirstItem", "thySize", "thySpaceKeyEnabled"], outputs: ["thySelectionChange"] }, { kind: "component", type: i4$1.ThyListOptionComponent, selector: "thy-list-option,[thy-list-option]", inputs: ["id", "thyValue", "thyDisabled"] }, { kind: "component", type: i12.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "component", type: TheToolbarItemComponent, selector: "the-toolbar-item", inputs: ["itemMode"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheQuickToolbarComponent, decorators: [{
+TheVerticalToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheVerticalToolbarItemComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ThyPopover }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+TheVerticalToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TheVerticalToolbarItemComponent, selector: "the-toolbar-vertical-align-item", host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class.hide": "!active" }, classAttribute: "the-toolbar-dropdown-container verticalAlign" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["VerticalAlignItems"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<a\n    href=\"javascript:;\"\n    class=\"icon-mode link-with-down\"\n    thyAction\n    [thyActionIcon]=\"activeMenuItem?.icon\"\n    [thyActionActive]=\"isOpened\"\n    [thyTooltip]=\"toolbarItem?.name\"\n    thyTooltipPlacement=\"top\"\n    (mousedown)=\"execute($event)\"\n>\n    <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #VerticalAlignItems>\n    <div class=\"thy-dropdown-menu\">\n        <ng-container *ngFor=\"let menu of toolbarItem?.includes\">\n            <a\n                href=\"javascript:;\"\n                thyDropdownMenuItem\n                [thyDropdownMenuItemActive]=\"menu.key === activeMenuItem?.key\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n            >\n                <thy-icon *ngIf=\"menu.icon\" thyDropdownMenuItemIcon [thyIconName]=\"menu?.icon\"></thy-icon>\n                <span thyDropdownMenuItemName>{{ menu.name }}</span>\n            </a>\n        </ng-container>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i5.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "directive", type: i6.ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: i6.ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: i6.ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: i6.ThyDropdownMenuItemActiveDirective, selector: "[thyDropdownMenuItemActive]", inputs: ["thyDropdownMenuItemActive"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheVerticalToolbarItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'the-quick-toolbar', template: "<thy-selection-list\n    class=\"the-quick-toolbar\"\n    [thyBindKeyEventContainer]=\"editorElement\"\n    (thySelectionChange)=\"selectionChange($event)\"\n    [thyMultiple]=\"false\"\n>\n    <ng-container *ngFor=\"let item of quickToolbarItems\">\n        <ng-container *ngIf=\"item.key !== ToolbarActionTypes.split; else splitLine\">\n            <thy-list-option [thyValue]=\"item?.key\" (mousedown)=\"stopPropagation($event)\">\n                <the-toolbar-item [editor]=\"editor\" [toolbarItem]=\"item\" [itemMode]=\"ToolbarItemMode.vertical\"></the-toolbar-item>\n            </thy-list-option>\n        </ng-container>\n    </ng-container>\n</thy-selection-list>\n\n<ng-template #splitLine>\n    <thy-divider class=\"my-1 mx-5\"></thy-divider>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { editor: [{
-                type: Input
-            }], quickToolbarItems: [{
-                type: Input
-            }], handleMouseDown: [{
+            args: [{ selector: 'the-toolbar-vertical-align-item', host: {
+                        class: 'the-toolbar-dropdown-container verticalAlign',
+                        '[class.hide]': '!active'
+                    }, 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" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ThyPopover }, { type: i0.ViewContainerRef }]; }, propDecorators: { template: [{
+                type: ViewChild,
+                args: ['VerticalAlignItems', { read: TemplateRef, static: true }]
+            }], handleDocumentMouseDown: [{
                 type: HostListener,
                 args: ['document: mousedown', ['$event']]
-            }], handleEnter: [{
-                type: HostListener,
-                args: ['document: keydown.enter']
-            }], handleEsc: [{
-                type: HostListener,
-                args: ['document: keydown.escape']
             }] } });
 
-const QuickInsertEditor = {
-    openQuickInsertToolbar(editor, quickToolbarItems, origin) {
-        if (QuickInsertEditor.isOpenedToolbar(editor)) {
-            return;
-        }
-        if (!origin) {
-            const [block] = getBlockAbove(editor);
-            const rootNode = AngularEditor.toDOMNode(editor, block);
-            origin = rootNode.querySelector('[data-slate-leaf="true"]');
-        }
-        const overlay = editor.injector.get(Overlay);
-        const viewContainerRef = editor.injector.get(ViewContainerRef);
-        const thyPopover = editor.injector.get(ThyPopover);
-        const quickToolbarRef = thyPopover.open(TheQuickToolbarComponent, {
-            initialState: {
-                editor,
-                quickToolbarItems
-            },
-            origin,
-            viewContainerRef: viewContainerRef,
-            backdropClosable: true,
-            placement: 'bottomLeft',
-            offset: 4,
-            hasBackdrop: false,
-            insideClosable: true,
-            minWidth: 0,
-            panelClass: 'the-quick-toolbar-container',
-            scrollStrategy: overlay.scrollStrategies.reposition(),
-            manualClosure: true
-        });
-        quickToolbarRef.componentInstance.cdr.markForCheck();
-        THE_EDITOR_QUICK_TOOLBAR_REF.set(editor, quickToolbarRef);
-    },
-    closeQuickInsertToolbar(editor) {
-        const quickToolbarRef = THE_EDITOR_QUICK_TOOLBAR_REF.get(editor);
-        if (quickToolbarRef) {
-            quickToolbarRef.close();
-            THE_EDITOR_QUICK_TOOLBAR_REF.set(editor, null);
+const VerticalAlignEditor = {
+    isVerticalActive(editor, alignment) {
+        const tableCellAlign = TableEditor.isVerticalAlignActive(editor, alignment);
+        if (tableCellAlign !== null) {
+            return tableCellAlign;
         }
+        return false;
     },
-    isOpenedToolbar(editor) {
-        const quickToolbarRef = THE_EDITOR_QUICK_TOOLBAR_REF.get(editor);
-        return !!quickToolbarRef;
-    }
-};
-
-const withQuickInsert = (editor) => {
-    const { onKeydown, deleteBackward, onChange } = editor;
-    let pressingQuickInsertHotkey = false;
-    editor.onKeydown = (event) => {
-        const options = getPluginOptions(editor, PluginKeys.quickInsert);
-        const { hotkey, allowHotkeyInTypes } = options;
-        if (event.key === hotkey) {
-            const types = [...(allowHotkeyInTypes || [])];
-            const [block] = getBlockAbove(editor);
-            if (isPureEmptyParagraph(editor, block) && allowOpenQuickToolbar(editor, types)) {
-                pressingQuickInsertHotkey = true;
-            }
-        }
-        const quickToolbarRef = THE_EDITOR_QUICK_TOOLBAR_REF.get(editor);
-        const isMoveUp = hotkeys.isMoveUp(event);
-        const isMoveDown = hotkeys.isMoveDown(event);
-        if (quickToolbarRef && (isMoveUp || isMoveDown)) {
+    setVerticalAlign(editor, alignment) {
+        if (TableEditor.setVerticalAlign(editor, alignment)) {
             return;
         }
-        onKeydown(event);
-    };
-    editor.deleteBackward = unit => {
-        if (QuickInsertEditor.isOpenedToolbar(editor)) {
-            QuickInsertEditor.closeQuickInsertToolbar(editor);
-        }
-        deleteBackward(unit);
-    };
-    editor.onChange = () => {
-        var _a, _b;
-        onChange();
-        if (editor.selection) {
-            const hotkey = (_a = getPluginOptions(editor, PluginKeys.quickInsert)) === null || _a === void 0 ? void 0 : _a.hotkey;
-            const [block] = getBlockAbove(editor);
-            // quick insert plus
-            const editorComponent = editor.injector.get(TheEditorComponent);
-            (_b = editorComponent.quickInsertInstance) === null || _b === void 0 ? void 0 : _b.checkStatus();
-            if (pressingQuickInsertHotkey && Node.string(block) === hotkey) {
-                QuickInsertEditor.openQuickInsertToolbar(editor, editorComponent.quickToolbarItems);
-                pressingQuickInsertHotkey = false;
-                return;
-            }
-            else {
-                pressingQuickInsertHotkey = false;
-            }
-            if (QuickInsertEditor.isOpenedToolbar(editor) && !isPureEmptyParagraph(editor, block) && Node.string(block) !== hotkey) {
-                QuickInsertEditor.closeQuickInsertToolbar(editor);
-            }
-        }
-    };
-    return editor;
-};
-const createQuickInsertPlugin = createPluginFactory({
-    key: PluginKeys.quickInsert,
-    withOverrides: withQuickInsert,
-    options: {
-        hotkey: '/',
-        disabledPlus: true
-    }
-});
-const allowOpenQuickToolbar = (editor, allowTypes) => {
-    const [, path] = getBlockAbove(editor);
-    const parentNode = Node.parent(editor, path);
-    if (path.length === 1 || (parentNode && allowTypes.includes(parentNode.type))) {
-        return true;
     }
-    return false;
 };
-
-const withSoftBreak = (editor) => {
-    var _a, _b;
-    const { onKeydown } = editor;
-    const rules = (_b = (_a = getPluginOptions(editor, PluginKeys.softBreak)) === null || _a === void 0 ? void 0 : _a.rules) !== null && _b !== void 0 ? _b : [];
-    editor.onKeydown = (event) => {
-        const entry = getBlockAbove(editor);
-        rules.forEach(({ hotkey, query }) => {
-            if (isKeyHotkey(hotkey, event) && isNodeType(entry, query)) {
-                event.preventDefault();
-                editor.insertText('\n');
-            }
+const createVerticalAlignPlugin = createPluginFactory({
+    key: PluginKeys.verticalAlign,
+    toolbarItems: [
+        {
+            key: ToolbarActionTypes.verticalAlign,
+            name: '垂直对齐',
+            type: ToolbarItemType.dropdown,
+            dropdownMode: DropdownMode.icon,
+            iconComponent: TheVerticalToolbarItemComponent,
+            includes: [ToolbarActionTypes.verticalAlignTop, ToolbarActionTypes.verticalAlignMiddle, ToolbarActionTypes.verticalAlignBottom],
+            active: editor => TableEditor.isActive(editor)
+        },
+        {
+            key: ToolbarActionTypes.verticalAlignTop,
+            icon: 'align-top',
+            name: '顶部对齐',
+            execute: editor => VerticalAlignEditor.setVerticalAlign(editor, VerticalAlignment.top),
+            active: editor => VerticalAlignEditor.isVerticalActive(editor, VerticalAlignment.top)
+        },
+        {
+            key: ToolbarActionTypes.verticalAlignMiddle,
+            icon: 'align-middle',
+            name: '垂直居中',
+            execute: editor => VerticalAlignEditor.setVerticalAlign(editor, VerticalAlignment.middle),
+            active: editor => VerticalAlignEditor.isVerticalActive(editor, VerticalAlignment.middle)
+        },
+        {
+            key: ToolbarActionTypes.verticalAlignBottom,
+            icon: 'align-bottom',
+            name: '底部对齐',
+            execute: editor => VerticalAlignEditor.setVerticalAlign(editor, VerticalAlignment.bottom),
+            active: editor => VerticalAlignEditor.isVerticalActive(editor, VerticalAlignment.bottom)
+        }
+    ]
+});
+
+class TheTableSelectComponent {
+    constructor(popoverRef) {
+        this.popoverRef = popoverRef;
+        this.beforeInsert = () => { };
+        this.tableData = new Array(10);
+        this.maxRowIndex = -1;
+        this.maxColIndex = -1;
+    }
+    ngOnInit() { }
+    onSelectCells(rowIndex, colIndex) {
+        this.maxRowIndex = rowIndex;
+        this.maxColIndex = colIndex;
+    }
+    executeTable(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.beforeInsert();
+        const opts = new TableOptions(this.optionsParam);
+        insertTable(opts, this.editor, this.maxRowIndex + 1, this.maxColIndex + 1);
+        if (this.popoverRef) {
+            this.popoverRef.close();
+            this.maxColIndex = -1;
+            this.maxRowIndex = -1;
+        }
+    }
+}
+TheTableSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheTableSelectComponent, deps: [{ token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
+TheTableSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TheTableSelectComponent, 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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheTableSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'table-select', 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: function () { return [{ type: i1$1.ThyPopoverRef }]; }, propDecorators: { optionsParam: [{
+                type: Input
+            }], editor: [{
+                type: Input
+            }], beforeInsert: [{
+                type: Input
+            }] } });
+
+class ThePluginMenuComponent extends mixinUnsubscribe(MixinBase) {
+    constructor(elementRef, cdr) {
+        super();
+        this.elementRef = elementRef;
+        this.cdr = cdr;
+        this.ThePluginMenu = ThePluginMenu;
+        this.groupMenu = [];
+        this.iconMenu = [];
+        this.ThePluginMenuItemType = ThePluginMenuItemType;
+        this.thyMessage = '暂无数据';
+        this.searchGroup = {
+            groupName: '搜索结果'
+        };
+        this.expandPopoverOptions = {
+            placement: 'rightTop',
+            width: '266px'
+        };
+        this.containerClassName = `the-plugin-menu-container`;
+        this.removeKeywords = () => {
+            var _a;
+            const hotkey = (_a = getPluginOptions(this.editor, PluginKeys.quickInsert)) === null || _a === void 0 ? void 0 : _a.hotkey;
+            const node = Node.get(this.editor, this.editor.selection.anchor.path);
+            if (node && node.text.includes(hotkey)) {
+                Editor.deleteBackward(this.editor, { unit: 'block' });
+            }
+        };
+    }
+    ngOnInit() {
+        this.editorElement = AngularEditor.toDOMNode(this.editor, this.editor);
+        let currentMenu = this.editor.options.menu ? this.editor.options.menu : DefaultPluginMenu;
+        const menuItemsMap = buildPluginMenuItemMap(this.editor);
+        this.pluginMenu = buildPluginMenu(menuItemsMap, currentMenu);
+        this.buildMenus();
+    }
+    buildMenus() {
+        if (this.keyWords) {
+            this.iconMenu = [];
+            this.groupMenu = this.pluginMenu.filter((item) => {
+                return (item === null || item === void 0 ? void 0 : item.keywords) && (item === null || item === void 0 ? void 0 : item.keywords.includes(this.keyWords));
+            });
+            if (this.groupMenu.length > 0) {
+                this.groupMenu.unshift(this.searchGroup);
+            }
+        }
+        else {
+            this.iconMenu = this.pluginMenu.filter((item) => {
+                return (item === null || item === void 0 ? void 0 : item.type) === ThePluginMenuItemType.icon;
+            });
+            this.groupMenu = this.pluginMenu.filter((item) => {
+                return (item === null || item === void 0 ? void 0 : item.type) !== ThePluginMenuItemType.icon;
+            });
+        }
+        this.cdr.detectChanges();
+    }
+    executeItem(event, menuItem) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.removeKeywords();
+        const toolbarItem = this.pluginMenu.find((item) => item.key === menuItem.key);
+        if (toolbarItem.execute) {
+            toolbarItem.execute(this.editor);
+        }
+        QuickInsertEditor.closeMenu(this.editor);
+    }
+    updateKeywords(keywords) {
+        this.keyWords = keywords.toLowerCase().trim();
+        this.buildMenus();
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}
+ThePluginMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ThePluginMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ThePluginMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: ThePluginMenuComponent, selector: "the-plugin-menu", inputs: { editor: "editor" }, host: { properties: { "class": "this.containerClassName" } }, usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"groupMenu.length > 0; else thyEmpty\" class=\"thy-dropdown-menu py-2\">\n    <div class=\"icon-menu d-flex px-5 py-1\">\n        <ng-container *ngFor=\"let item of iconMenu\">\n            <a\n                *ngIf=\"item.type === ThePluginMenuItemType.icon\"\n                href=\"javascript:;\"\n                class=\"mt-2\"\n                thyAction\n                [thyActionIcon]=\"item.icon\"\n                [thyTooltip]=\"item.name\"\n                (mousedown)=\"executeItem($event, item)\"\n            ></a>\n        </ng-container>\n    </div>\n\n    <thy-divider *ngIf=\"this.iconMenu?.length\" class=\"my-2\"></thy-divider>\n\n    <ng-container *ngFor=\"let item of groupMenu\">\n        <ng-container *ngIf=\"ThePluginMenu.isMenuItem(item) && !item.isExpanded\">\n            <div thyDropdownMenuItem class=\"insert-menu-item mb-1 py-0\" (mousedown)=\"executeItem($event, item)\">\n                <div class=\"menu-icon mr-2\">\n                    <thy-icon [thyIconName]=\"item.menuIcon\"></thy-icon>\n                </div>\n                <div class=\"menu-content d-flex align-items-center\">\n                    <div class=\"menu-item-title w-100\">\n                        <span *ngIf=\"!item?.isExpanded\" class=\"menu-item-display-key font-size-sm text-placeholder\">\n                            {{ item.displayKey }}</span\n                        >\n                        {{ item.name }}\n                    </div>\n                    <div class=\"text-muted font-size-sm\">{{ item.description }}</div>\n                </div>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"ThePluginMenu.isMenuItem(item) && item.isExpanded\" #hasExpanded>\n            <div\n                [thyDropdown]=\"expand\"\n                thyTrigger=\"hover\"\n                thyDropdownMenuItem\n                [thyPopoverOptions]=\"expandPopoverOptions\"\n                class=\"insert-menu-item mb-1 py-0\"\n                (mousedown)=\"executeItem($event, item)\"\n            >\n                <div class=\"menu-icon mr-2\">\n                    <thy-icon [thyIconName]=\"item.menuIcon\"></thy-icon>\n                </div>\n                <div class=\"menu-content d-flex align-items-center\">\n                    <div class=\"menu-item-title w-100\">\n                        <span *ngIf=\"!item?.isExpanded\" class=\"menu-item-display-key font-size-sm text-placeholder\">\n                            {{ item.displayKey }}</span\n                        >\n                        {{ item.name }}\n                    </div>\n                    <div class=\"text-muted font-size-sm\">{{ item.description }}</div>\n                </div>\n                <div *ngIf=\"item?.isExpanded\">\n                    <thy-icon class=\"text-muted\" thyIconName=\"angle-right\"></thy-icon>\n                </div>\n            </div>\n            <thy-dropdown-menu class=\"expand-menu\" #expand>\n                <div class=\"the-plugin-menu-container\">\n                    <div *ngFor=\"let child of item.children\" thyDropdownMenuItem class=\"insert-menu-item mb-1 py-0\">\n                        <div class=\"menu-icon mr-2\">\n                            <thy-icon [thyIconName]=\"child.menuIcon\"></thy-icon>\n                        </div>\n                        <div class=\"menu-content d-flex align-items-center\">\n                            <div class=\"menu-item-title w-100\">\n                                <span class=\"menu-item-display-key font-size-sm text-placeholder\"> {{ child.displayKey }}</span>\n                                {{ child.name }}\n                            </div>\n                            <div class=\"text-muted font-size-sm\">{{ child.description }}</div>\n                        </div>\n                    </div>\n                </div>\n                <table-select\n                    *ngIf=\"item.key === 'table'\"\n                    class=\"plugin-menu-table the-table-selector-panel\"\n                    [editor]=\"editor\"\n                    [beforeInsert]=\"removeKeywords\"\n                ></table-select>\n            </thy-dropdown-menu>\n        </ng-container>\n\n        <ng-container *ngIf=\"!ThePluginMenu.isMenuItem(item)\" #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\n<ng-template #thyEmpty>\n    <div class=\"empty d-flex align-items-center justify-content-center\">\n        <thy-empty [thyMessage]=\"thyMessage\"></thy-empty>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i5.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i12.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: i6.ThyDropdownDirective, selector: "[thyDropdown]", inputs: ["thyDropdownMenu", "thyDropdown", "thyTrigger", "thyActiveClass", "thyPopoverOptions"], outputs: ["thyActiveChange"] }, { kind: "component", type: i6.ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth"] }, { kind: "component", type: i6.ThyDropdownMenuGroupComponent, selector: "thy-dropdown-menu-group", inputs: ["thyTitle"] }, { kind: "directive", type: i6.ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "component", type: i7.ThyEmptyComponent, selector: "thy-empty", inputs: ["thyMessage", "thyTranslationKey", "thyTranslationValues", "thyEntityName", "thyEntityNameTranslateKey", "thyIconName", "thySize", "thyMarginTop", "thyTopAuto", "thyContainer", "thyImageUrl", "thyImageLoading", "thyImageFetchPriority", "thyDescription"] }, { kind: "component", type: TheTableSelectComponent, selector: "table-select", inputs: ["optionsParam", "editor", "beforeInsert"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: ThePluginMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'the-plugin-menu', template: "<div *ngIf=\"groupMenu.length > 0; else thyEmpty\" class=\"thy-dropdown-menu py-2\">\n    <div class=\"icon-menu d-flex px-5 py-1\">\n        <ng-container *ngFor=\"let item of iconMenu\">\n            <a\n                *ngIf=\"item.type === ThePluginMenuItemType.icon\"\n                href=\"javascript:;\"\n                class=\"mt-2\"\n                thyAction\n                [thyActionIcon]=\"item.icon\"\n                [thyTooltip]=\"item.name\"\n                (mousedown)=\"executeItem($event, item)\"\n            ></a>\n        </ng-container>\n    </div>\n\n    <thy-divider *ngIf=\"this.iconMenu?.length\" class=\"my-2\"></thy-divider>\n\n    <ng-container *ngFor=\"let item of groupMenu\">\n        <ng-container *ngIf=\"ThePluginMenu.isMenuItem(item) && !item.isExpanded\">\n            <div thyDropdownMenuItem class=\"insert-menu-item mb-1 py-0\" (mousedown)=\"executeItem($event, item)\">\n                <div class=\"menu-icon mr-2\">\n                    <thy-icon [thyIconName]=\"item.menuIcon\"></thy-icon>\n                </div>\n                <div class=\"menu-content d-flex align-items-center\">\n                    <div class=\"menu-item-title w-100\">\n                        <span *ngIf=\"!item?.isExpanded\" class=\"menu-item-display-key font-size-sm text-placeholder\">\n                            {{ item.displayKey }}</span\n                        >\n                        {{ item.name }}\n                    </div>\n                    <div class=\"text-muted font-size-sm\">{{ item.description }}</div>\n                </div>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"ThePluginMenu.isMenuItem(item) && item.isExpanded\" #hasExpanded>\n            <div\n                [thyDropdown]=\"expand\"\n                thyTrigger=\"hover\"\n                thyDropdownMenuItem\n                [thyPopoverOptions]=\"expandPopoverOptions\"\n                class=\"insert-menu-item mb-1 py-0\"\n                (mousedown)=\"executeItem($event, item)\"\n            >\n                <div class=\"menu-icon mr-2\">\n                    <thy-icon [thyIconName]=\"item.menuIcon\"></thy-icon>\n                </div>\n                <div class=\"menu-content d-flex align-items-center\">\n                    <div class=\"menu-item-title w-100\">\n                        <span *ngIf=\"!item?.isExpanded\" class=\"menu-item-display-key font-size-sm text-placeholder\">\n                            {{ item.displayKey }}</span\n                        >\n                        {{ item.name }}\n                    </div>\n                    <div class=\"text-muted font-size-sm\">{{ item.description }}</div>\n                </div>\n                <div *ngIf=\"item?.isExpanded\">\n                    <thy-icon class=\"text-muted\" thyIconName=\"angle-right\"></thy-icon>\n                </div>\n            </div>\n            <thy-dropdown-menu class=\"expand-menu\" #expand>\n                <div class=\"the-plugin-menu-container\">\n                    <div *ngFor=\"let child of item.children\" thyDropdownMenuItem class=\"insert-menu-item mb-1 py-0\">\n                        <div class=\"menu-icon mr-2\">\n                            <thy-icon [thyIconName]=\"child.menuIcon\"></thy-icon>\n                        </div>\n                        <div class=\"menu-content d-flex align-items-center\">\n                            <div class=\"menu-item-title w-100\">\n                                <span class=\"menu-item-display-key font-size-sm text-placeholder\"> {{ child.displayKey }}</span>\n                                {{ child.name }}\n                            </div>\n                            <div class=\"text-muted font-size-sm\">{{ child.description }}</div>\n                        </div>\n                    </div>\n                </div>\n                <table-select\n                    *ngIf=\"item.key === 'table'\"\n                    class=\"plugin-menu-table the-table-selector-panel\"\n                    [editor]=\"editor\"\n                    [beforeInsert]=\"removeKeywords\"\n                ></table-select>\n            </thy-dropdown-menu>\n        </ng-container>\n\n        <ng-container *ngIf=\"!ThePluginMenu.isMenuItem(item)\" #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\n<ng-template #thyEmpty>\n    <div class=\"empty d-flex align-items-center justify-content-center\">\n        <thy-empty [thyMessage]=\"thyMessage\"></thy-empty>\n    </div>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { containerClassName: [{
+                type: HostBinding,
+                args: ['class']
+            }], editor: [{
+                type: Input
+            }] } });
+
+const QuickInsertEditor = {
+    openMenu(editor) {
+        if (QuickInsertEditor.isOpenedMenu(editor)) {
+            return;
+        }
+        const [block] = getBlockAbove(editor);
+        const rootNode = AngularEditor.toDOMNode(editor, block);
+        const origin = rootNode.querySelector('[data-slate-leaf="true"]');
+        const overlay = editor.injector.get(Overlay);
+        const viewContainerRef = editor.injector.get(ViewContainerRef);
+        const thyPopover = editor.injector.get(ThyPopover);
+        const pluginMenuRef = thyPopover.open(ThePluginMenuComponent, {
+            initialState: {
+                editor
+            },
+            origin,
+            viewContainerRef: viewContainerRef,
+            backdropClosable: true,
+            placement: 'bottomLeft',
+            offset: 4,
+            hasBackdrop: false,
+            insideClosable: true,
+            outsideClosable: true,
+            manualClosure: true,
+            minWidth: 0,
+            scrollStrategy: overlay.scrollStrategies.reposition()
+        });
+        QuickInsertEditor.updatePluginMenuRef(editor, pluginMenuRef);
+        pluginMenuRef.afterClosed().subscribe(() => {
+            QuickInsertEditor.updatePluginMenuRef(editor, null);
+        });
+        pluginMenuRef.componentInstance.cdr.markForCheck();
+        return pluginMenuRef;
+    },
+    updateKeywords(editor, keywords) {
+        const pluginMenuRef = THE_PLUGIN_MENU_REF.get(editor);
+        if (pluginMenuRef) {
+            pluginMenuRef.componentInstance.updateKeywords(keywords);
+        }
+    },
+    updatePluginMenuRef(editor, pluginMenuRef) {
+        if (pluginMenuRef) {
+            THE_PLUGIN_MENU_REF.set(editor, pluginMenuRef);
+        }
+        else {
+            THE_PLUGIN_MENU_REF.set(editor, null);
+        }
+    },
+    closeMenu(editor) {
+        const pluginMenuRef = THE_PLUGIN_MENU_REF.get(editor);
+        if (pluginMenuRef) {
+            pluginMenuRef.close();
+            QuickInsertEditor.updatePluginMenuRef(editor, null);
+        }
+    },
+    isOpenedMenu(editor) {
+        const pluginMenuRef = THE_PLUGIN_MENU_REF.get(editor);
+        return !!pluginMenuRef;
+    }
+};
+
+const withQuickInsert = (editor) => {
+    const { onKeydown, onChange, insertText, insertBreak, deleteBackward } = editor;
+    let openMenuFromHotkey = false;
+    editor.onKeydown = (event) => {
+        const isOpenMenu = QuickInsertEditor.isOpenedMenu(editor);
+        const isMoveUp = hotkeys.isMoveUp(event);
+        const isMoveDown = hotkeys.isMoveDown(event);
+        const isMoveForward = hotkeys.isMoveForward(event);
+        const isMoveBackward = hotkeys.isMoveBackward(event);
+        // 阻止方向键默认行为
+        if (isOpenMenu && (isMoveUp || isMoveDown || isMoveForward || isMoveBackward)) {
+            event.preventDefault();
+            return;
+        }
+        onKeydown(event);
+    };
+    editor.insertText = (text) => {
+        const options = getPluginOptions(editor, PluginKeys.quickInsert);
+        const [block] = getBlockAbove(editor);
+        const { hotkey, allowHotkeyInTypes } = options;
+        // 基于插入内容对比，避免 keydown 判断时无法区分中文「、」和英文「/」热键
+        if (text === hotkey) {
+            const types = [...(allowHotkeyInTypes || [])];
+            if (isPureEmptyParagraph(editor, block) && allowOpenInsertMenu(editor, types)) {
+                openMenuFromHotkey = true;
+                QuickInsertEditor.openMenu(editor);
+            }
+        }
+        insertText(text);
+    };
+    editor.onChange = () => {
+        onChange();
+        if (editor.selection) {
+            const [block] = getBlockAbove(editor);
+            const isOpenMenu = QuickInsertEditor.isOpenedMenu(editor);
+            if (openMenuFromHotkey && !isOpenMenu) {
+                openMenuFromHotkey = false;
+            }
+            if (isOpenMenu) {
+                if (!Range.isCollapsed(editor.selection)) {
+                    QuickInsertEditor.closeMenu(editor);
+                    return;
+                }
+                // 更新搜索
+                const options = getPluginOptions(editor, PluginKeys.quickInsert);
+                const { hotkey } = options;
+                const keywords = Node.string(block);
+                const filterKeywords = openMenuFromHotkey && keywords.startsWith(hotkey) ? keywords.substring(1) : keywords;
+                QuickInsertEditor.updateKeywords(editor, filterKeywords);
+            }
+        }
+    };
+    // 拦截行为处理菜单的关闭（避免协同编辑出现异常）
+    editor.deleteBackward = unit => {
+        const isOpenMenu = QuickInsertEditor.isOpenedMenu(editor);
+        if (isOpenMenu) {
+            const [block] = getBlockAbove(editor);
+            const options = getPluginOptions(editor, PluginKeys.quickInsert);
+            const { hotkey } = options;
+            if (isPureEmptyParagraph(editor, block)) {
+                QuickInsertEditor.closeMenu(editor);
+            }
+            else if (openMenuFromHotkey && Node.string(block) === hotkey) {
+                QuickInsertEditor.closeMenu(editor);
+            }
+        }
+        deleteBackward(unit);
+    };
+    // 拦截行为处理菜单的关闭（避免协同编辑出现异常）
+    editor.insertBreak = () => {
+        const isOpenMenu = QuickInsertEditor.isOpenedMenu(editor);
+        if (isOpenMenu) {
+            QuickInsertEditor.closeMenu(editor);
+        }
+        insertBreak();
+    };
+    return editor;
+};
+const createQuickInsertPlugin = createPluginFactory({
+    key: PluginKeys.quickInsert,
+    withOverrides: withQuickInsert,
+    options: {
+        hotkey: '/',
+        disabledPlus: true
+    }
+});
+const allowOpenInsertMenu = (editor, allowTypes) => {
+    const [, path] = getBlockAbove(editor);
+    const parentNode = Node.parent(editor, path);
+    if (path.length === 1 || (parentNode && allowTypes.includes(parentNode.type))) {
+        return true;
+    }
+    return false;
+};
+
+const withSoftBreak = (editor) => {
+    var _a, _b;
+    const { onKeydown } = editor;
+    const rules = (_b = (_a = getPluginOptions(editor, PluginKeys.softBreak)) === null || _a === void 0 ? void 0 : _a.rules) !== null && _b !== void 0 ? _b : [];
+    editor.onKeydown = (event) => {
+        const entry = getBlockAbove(editor);
+        rules.forEach(({ hotkey, query }) => {
+            if (isKeyHotkey(hotkey, event) && isNodeType(entry, query)) {
+                event.preventDefault();
+                editor.insertText('\n');
+            }
         });
         onKeydown(event);
     };
@@ -10186,7 +10928,7 @@ class TheTableToolbarComponent {
     }
 }
 TheTableToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheTableToolbarComponent, deps: [{ token: i0.NgZone }, { token: TheColorSelectService }, { token: i1$1.ThyPopover }, { token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-TheTableToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TheTableToolbarComponent, selector: "the-table-toolbar", inputs: { tableStore: "tableStore", isFromControls: "isFromControls", tableElement: "tableElement" }, ngImport: i0, template: "<thy-actions thySize=\"xxs\">\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            (mousedown)=\"item.actionHandle()\"\n        ></a>\n    </ng-container>\n    <thy-divider *ngIf=\"hasDivider\" class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"> </thy-divider>\n    <a href=\"javascript:;\" thyAction thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\" (mousedown)=\"openSelectColor($event)\">\n        <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n    </a>\n    <a\n        href=\"javascript:;\"\n        *ngIf=\"tableStore.isSelectedTable && tableOptions?.showFullscreen\"\n        thyAction\n        thyTooltip=\"\u5168\u5C4F\"\n        (mousedown)=\"setFullscreen($event)\"\n    >\n        <thy-icon thyIconName=\"arrows-alt\"></thy-icon>\n    </a>\n\n    <ng-container *ngIf=\"tableStore.isSelectedTable\">\n        <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n        <a href=\"javascript:;\" class=\"link-with-down\" thyAction (mousedown)=\"mousedown($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\n    <ng-container *ngIf=\"tableOptions?.showFullscreen ? deleteIcon : deleteIcon && !tableStore.isSelectedTable\">\n        <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n        <a\n            href=\"javascript:;\"\n            thyAction\n            thyType=\"danger\"\n            [thyActionIcon]=\"deleteIcon\"\n            [thyTooltip]=\"iconName\"\n            (mousedown)=\"onDelete($event)\"\n            (mouseenter)=\"onEnterDelete($event)\"\n            (mouseleave)=\"onLeaveDelete($event)\"\n        ></a>\n    </ng-container>\n</thy-actions>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i3$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i5.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i5.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "component", type: i12.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }] });
+TheTableToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TheTableToolbarComponent, selector: "the-table-toolbar", inputs: { tableStore: "tableStore", isFromControls: "isFromControls", tableElement: "tableElement" }, ngImport: i0, template: "<thy-actions thySize=\"xxs\">\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            (mousedown)=\"item.actionHandle()\"\n        ></a>\n    </ng-container>\n    <thy-divider *ngIf=\"hasDivider\" class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"> </thy-divider>\n    <a href=\"javascript:;\" thyAction thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\" (mousedown)=\"openSelectColor($event)\">\n        <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n    </a>\n    <a\n        href=\"javascript:;\"\n        *ngIf=\"tableStore.isSelectedTable && tableOptions?.showFullscreen\"\n        thyAction\n        thyTooltip=\"\u5168\u5C4F\"\n        (mousedown)=\"setFullscreen($event)\"\n    >\n        <thy-icon thyIconName=\"arrows-alt\"></thy-icon>\n    </a>\n\n    <ng-container *ngIf=\"tableStore.isSelectedTable\">\n        <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n        <a href=\"javascript:;\" class=\"link-with-down\" thyAction (mousedown)=\"mousedown($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\n    <ng-container *ngIf=\"tableOptions?.showFullscreen ? deleteIcon : deleteIcon && !tableStore.isSelectedTable\">\n        <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n        <a\n            href=\"javascript:;\"\n            thyAction\n            thyType=\"danger\"\n            [thyActionIcon]=\"deleteIcon\"\n            [thyTooltip]=\"iconName\"\n            (mousedown)=\"onDelete($event)\"\n            (mouseenter)=\"onEnterDelete($event)\"\n            (mouseleave)=\"onLeaveDelete($event)\"\n        ></a>\n    </ng-container>\n</thy-actions>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i5.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: i5.ThyActionsComponent, selector: "thy-actions", inputs: ["thySize"] }, { kind: "component", type: i12.ThyDividerComponent, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheTableToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-table-toolbar', template: "<thy-actions thySize=\"xxs\">\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            (mousedown)=\"item.actionHandle()\"\n        ></a>\n    </ng-container>\n    <thy-divider *ngIf=\"hasDivider\" class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"> </thy-divider>\n    <a href=\"javascript:;\" thyAction thyTooltip=\"\u5355\u5143\u683C\u80CC\u666F\" (mousedown)=\"openSelectColor($event)\">\n        <thy-icon thyIconName=\"background-tt\" thyIconType=\"twotone\" [thyTwotoneColor]=\"selectedColor\"></thy-icon>\n    </a>\n    <a\n        href=\"javascript:;\"\n        *ngIf=\"tableStore.isSelectedTable && tableOptions?.showFullscreen\"\n        thyAction\n        thyTooltip=\"\u5168\u5C4F\"\n        (mousedown)=\"setFullscreen($event)\"\n    >\n        <thy-icon thyIconName=\"arrows-alt\"></thy-icon>\n    </a>\n\n    <ng-container *ngIf=\"tableStore.isSelectedTable\">\n        <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n        <a href=\"javascript:;\" class=\"link-with-down\" thyAction (mousedown)=\"mousedown($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\n    <ng-container *ngIf=\"tableOptions?.showFullscreen ? deleteIcon : deleteIcon && !tableStore.isSelectedTable\">\n        <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\"></thy-divider>\n        <a\n            href=\"javascript:;\"\n            thyAction\n            thyType=\"danger\"\n            [thyActionIcon]=\"deleteIcon\"\n            [thyTooltip]=\"iconName\"\n            (mousedown)=\"onDelete($event)\"\n            (mouseenter)=\"onEnterDelete($event)\"\n            (mouseleave)=\"onLeaveDelete($event)\"\n        ></a>\n    </ng-container>\n</thy-actions>\n" }]
@@ -10711,7 +11453,7 @@ class TheInsertMarkComponent {
     ngOnDestroy() { }
 }
 TheInsertMarkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheInsertMarkComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TheInsertMarkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TheInsertMarkComponent, selector: "the-table-insert-mark", inputs: { type: "type", at: "at", tableStore: "tableStore" }, ngImport: i0, template: "<div\n    [thyTooltip]=\"!disabled && tooltipContent\"\n    class=\"the-table-controls-insert-wrapper\"\n    [ngClass]=\"{ disabled: disabled }\"\n    contenteditable=\"false\"\n    (mousedown)=\"onMouseDown($event)\"\n    (mouseenter)=\"onMouseEnter($event)\"\n    (mouseleave)=\"onMouseLeave($event)\"\n>\n    <div\n        class=\"the-table-controls-insert-line\"\n        *ngIf=\"dotWrapperHovered\"\n        [attr.data-dot-type]=\"type\"\n        [ngStyle]=\"{ height: type === 'column' && insertLength, width: type === 'row' && insertLength }\"\n    ></div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }] });
+TheInsertMarkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TheInsertMarkComponent, selector: "the-table-insert-mark", inputs: { type: "type", at: "at", tableStore: "tableStore" }, ngImport: i0, template: "<div\n    [thyTooltip]=\"!disabled && tooltipContent\"\n    class=\"the-table-controls-insert-wrapper\"\n    [ngClass]=\"{ disabled: disabled }\"\n    contenteditable=\"false\"\n    (mousedown)=\"onMouseDown($event)\"\n    (mouseenter)=\"onMouseEnter($event)\"\n    (mouseleave)=\"onMouseLeave($event)\"\n>\n    <div\n        class=\"the-table-controls-insert-line\"\n        *ngIf=\"dotWrapperHovered\"\n        [attr.data-dot-type]=\"type\"\n        [ngStyle]=\"{ height: type === 'column' && insertLength, width: type === 'row' && insertLength }\"\n    ></div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i8.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: "14.2.0", ngImport: i0, type: TheInsertMarkComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-table-insert-mark', template: "<div\n    [thyTooltip]=\"!disabled && tooltipContent\"\n    class=\"the-table-controls-insert-wrapper\"\n    [ngClass]=\"{ disabled: disabled }\"\n    contenteditable=\"false\"\n    (mousedown)=\"onMouseDown($event)\"\n    (mouseenter)=\"onMouseEnter($event)\"\n    (mouseleave)=\"onMouseLeave($event)\"\n>\n    <div\n        class=\"the-table-controls-insert-line\"\n        *ngIf=\"dotWrapperHovered\"\n        [attr.data-dot-type]=\"type\"\n        [ngStyle]=\"{ height: type === 'column' && insertLength, width: type === 'row' && insertLength }\"\n    ></div>\n</div>\n" }]
@@ -12300,49 +13042,6 @@ const normalizeTable = (table) => {
     return table;
 };
 
-class TheTableSelectComponent {
-    constructor(popoverRef) {
-        this.popoverRef = popoverRef;
-        this.tableData = new Array(10);
-        this.maxRowIndex = -1;
-        this.maxColIndex = -1;
-    }
-    handleDocumentMouseDown(event) {
-        if (!document.querySelector('.table-selector-container').contains(event.target)) {
-            this.popoverRef.close();
-        }
-    }
-    ngOnInit() { }
-    onSelectCells(rowIndex, colIndex) {
-        this.maxRowIndex = rowIndex;
-        this.maxColIndex = colIndex;
-    }
-    executeTable(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        const opts = new TableOptions(this.optionsParam);
-        insertTable(opts, this.editor, this.maxRowIndex + 1, this.maxColIndex + 1);
-        if (this.popoverRef) {
-            this.popoverRef.close();
-            this.maxColIndex = -1;
-            this.maxRowIndex = -1;
-        }
-    }
-}
-TheTableSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheTableSelectComponent, deps: [{ token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-TheTableSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TheTableSelectComponent, selector: "table-select", inputs: { optionsParam: "optionsParam", editor: "editor" }, host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" } }, 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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheTableSelectComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'table-select', 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: function () { return [{ type: i1$1.ThyPopoverRef }]; }, propDecorators: { optionsParam: [{
-                type: Input
-            }], editor: [{
-                type: Input
-            }], handleDocumentMouseDown: [{
-                type: HostListener,
-                args: ['document: mousedown', ['$event']]
-            }] } });
-
 class TheTableToolbarItemComponent extends TheBaseToolbarItem {
     constructor(thyPopover, overlay) {
         super();
@@ -12378,10 +13077,11 @@ class TheTableToolbarItemComponent extends TheBaseToolbarItem {
             minWidth: 0,
             backdropClosable: false,
             hasBackdrop: false,
+            outsideClosable: true,
             insideClosable: false,
             placement: 'bottomLeft',
-            offset: 10,
-            panelClass: 'the-table-selector-pannel',
+            offset: 0,
+            panelClass: 'the-table-selector-panel',
             scrollStrategy: this.overlay.scrollStrategies.reposition()
         });
         return this.tableSelectRef;
@@ -12402,7 +13102,7 @@ TheTableToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14
         >
             <thy-icon class="link-down-icon font-size-sm text-desc ml-1" thyIconName="caret-down"> </thy-icon>
         </a>
-    `, isInline: true, dependencies: [{ kind: "component", type: i3.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i3$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i5.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: i3.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i5.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheTableToolbarItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -12825,8 +13525,22 @@ const createTablePlugin = createPluginFactory({
             active: editor => TableEditor.isActive(editor)
         }
     ],
-    options: {
-        showFullscreen: true,
+    menuItems: [
+        {
+            key: ElementKinds.table,
+            keywords: 'biaoge,bg,table,表格',
+            execute: editor => TableEditor.insertTable(editor),
+            active: editor => TableEditor.isActive(editor),
+            name: '表格',
+            type: ThePluginMenuItemType.group,
+            menuIcon: PluginMenuIcons.table,
+            description: '结构化呈现数据信息',
+            displayKey: '/bg',
+            isExpanded: true
+        }
+    ],
+    options: {
+        showFullscreen: true,
         setFullscreen: (editor, event, element) => {
             event.preventDefault();
         }
@@ -12957,141 +13671,28 @@ const createTodoItemPlugin = createPluginFactory({
             active: editor => TodoItemEditor.isActive(editor)
         }
     ],
+    menuItems: [
+        {
+            key: ElementKinds.checkItem,
+            keywords: 'dbsx,daibanshixiang,todolist,待办事项',
+            execute: editor => TodoItemEditor.insertTodoItem(editor),
+            active: editor => TodoItemEditor.isActive(editor),
+            type: ThePluginMenuItemType.icon,
+            name: '待办事项',
+            displayKey: '/dbsx',
+            icon: 'list-check',
+            menuIcon: PluginMenuIcons.numberedList
+        }
+    ],
     options: {
         allowParentTypes: [ElementKinds.tableCell, ElementKinds.blockquote],
         editableWithReadonly: false
     }
 });
 
-class TheVerticalToolbarItemComponent extends TheBaseToolbarDropdown {
-    constructor(elementRef, thyPopover, viewContainerRef) {
-        super();
-        this.elementRef = elementRef;
-        this.thyPopover = thyPopover;
-        this.viewContainerRef = viewContainerRef;
-        this.isHide = true;
-    }
-    get isOpened() {
-        return this.dropdownPopoverRef && this.dropdownPopoverRef.getOverlayRef() && this.dropdownPopoverRef.getOverlayRef().hasAttached();
-    }
-    handleDocumentMouseDown(event) {
-        if (!this.elementRef.nativeElement.contains(event.target)) {
-            this.close();
-        }
-    }
-    ngOnInit() { }
-    menusActive(editor) {
-        return this.menus.find(i => {
-            var _a;
-            if (((_a = this.editor) === null || _a === void 0 ? void 0 : _a.selection) && (i === null || i === void 0 ? void 0 : i.active)) {
-                return i === null || i === void 0 ? void 0 : i.active(editor);
-            }
-        });
-    }
-    execute(event) {
-        var _a, _b;
-        super.execute(event);
-        if (((_a = this.editor) === null || _a === void 0 ? void 0 : _a.readOnly) || ((_b = this.editor) === null || _b === void 0 ? void 0 : _b.disabled)) {
-            return;
-        }
-        this.openPopover();
-    }
-    itemMousedown(event, item) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.close();
-        if (item === null || item === void 0 ? void 0 : item.execute) {
-            item === null || item === void 0 ? void 0 : item.execute(this.editor);
-        }
-    }
-    openPopover() {
-        var _a;
-        this.dropdownPopoverRef = this.thyPopover.open(this.template, {
-            origin: this.elementRef,
-            panelClass: ['the-toolbar-dropdown-popover', (_a = this.toolbarItem) === null || _a === void 0 ? void 0 : _a.key],
-            placement: 'bottomLeft',
-            offset: 10,
-            minWidth: 0,
-            viewContainerRef: this.viewContainerRef,
-            insideClosable: false,
-            backdropClosable: false,
-            hasBackdrop: false
-        });
-    }
-    close() {
-        if (this.dropdownPopoverRef) {
-            this.dropdownPopoverRef.close();
-        }
-    }
-}
-TheVerticalToolbarItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheVerticalToolbarItemComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ThyPopover }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-TheVerticalToolbarItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TheVerticalToolbarItemComponent, selector: "the-toolbar-vertical-align-item", host: { listeners: { "document: mousedown": "handleDocumentMouseDown($event)" }, properties: { "class.hide": "!active" }, classAttribute: "the-toolbar-dropdown-container verticalAlign" }, viewQueries: [{ propertyName: "template", first: true, predicate: ["VerticalAlignItems"], descendants: true, read: TemplateRef, static: true }], usesInheritance: true, ngImport: i0, template: "<a\n    href=\"javascript:;\"\n    class=\"icon-mode link-with-down\"\n    thyAction\n    [thyActionIcon]=\"activeMenuItem?.icon\"\n    [thyActionActive]=\"isOpened\"\n    [thyTooltip]=\"toolbarItem?.name\"\n    thyTooltipPlacement=\"top\"\n    (mousedown)=\"execute($event)\"\n>\n    <thy-icon class=\"font-size-sm text-desc ml-1\" thyIconName=\"caret-down\"></thy-icon>\n</a>\n\n<ng-template #VerticalAlignItems>\n    <div class=\"thy-dropdown-menu\">\n        <ng-container *ngFor=\"let menu of toolbarItem?.includes\">\n            <a\n                href=\"javascript:;\"\n                thyDropdownMenuItem\n                [thyDropdownMenuItemActive]=\"menu.key === activeMenuItem?.key\"\n                (mousedown)=\"itemMousedown($event, menu)\"\n            >\n                <thy-icon *ngIf=\"menu.icon\" thyDropdownMenuItemIcon [thyIconName]=\"menu?.icon\"></thy-icon>\n                <span thyDropdownMenuItemName>{{ menu.name }}</span>\n            </a>\n        </ng-container>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: i3$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i5.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "directive", type: i6.ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: i6.ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: i6.ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: i6.ThyDropdownMenuItemActiveDirective, selector: "[thyDropdownMenuItemActive]", inputs: ["thyDropdownMenuItemActive"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheVerticalToolbarItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'the-toolbar-vertical-align-item', host: {
-                        class: 'the-toolbar-dropdown-container verticalAlign',
-                        '[class.hide]': '!active'
-                    }, 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" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ThyPopover }, { type: i0.ViewContainerRef }]; }, propDecorators: { template: [{
-                type: ViewChild,
-                args: ['VerticalAlignItems', { read: TemplateRef, static: true }]
-            }], handleDocumentMouseDown: [{
-                type: HostListener,
-                args: ['document: mousedown', ['$event']]
-            }] } });
-
-const VerticalAlignEditor = {
-    isVerticalActive(editor, alignment) {
-        const tableCellAlign = TableEditor.isVerticalAlignActive(editor, alignment);
-        if (tableCellAlign !== null) {
-            return tableCellAlign;
-        }
-        return false;
-    },
-    setVerticalAlign(editor, alignment) {
-        if (TableEditor.setVerticalAlign(editor, alignment)) {
-            return;
-        }
-    }
-};
-const createVerticalAlignPlugin = createPluginFactory({
-    key: PluginKeys.verticalAlign,
-    toolbarItems: [
-        {
-            key: ToolbarActionTypes.verticalAlign,
-            name: '垂直对齐',
-            type: ToolbarItemType.dropdown,
-            dropdownMode: DropdownMode.icon,
-            iconComponent: TheVerticalToolbarItemComponent,
-            includes: [ToolbarActionTypes.verticalAlignTop, ToolbarActionTypes.verticalAlignMiddle, ToolbarActionTypes.verticalAlignBottom],
-            active: editor => TableEditor.isActive(editor)
-        },
-        {
-            key: ToolbarActionTypes.verticalAlignTop,
-            icon: 'align-top',
-            name: '顶部对齐',
-            execute: editor => VerticalAlignEditor.setVerticalAlign(editor, VerticalAlignment.top),
-            active: editor => VerticalAlignEditor.isVerticalActive(editor, VerticalAlignment.top)
-        },
-        {
-            key: ToolbarActionTypes.verticalAlignMiddle,
-            icon: 'align-middle',
-            name: '垂直居中',
-            execute: editor => VerticalAlignEditor.setVerticalAlign(editor, VerticalAlignment.middle),
-            active: editor => VerticalAlignEditor.isVerticalActive(editor, VerticalAlignment.middle)
-        },
-        {
-            key: ToolbarActionTypes.verticalAlignBottom,
-            icon: 'align-bottom',
-            name: '底部对齐',
-            execute: editor => VerticalAlignEditor.setVerticalAlign(editor, VerticalAlignment.bottom),
-            active: editor => VerticalAlignEditor.isVerticalActive(editor, VerticalAlignment.bottom)
-        }
-    ]
-});
-
 const internalPlugins = () => [
     createTheHistoryPlugin(),
+    createCommonPlugin(),
     createAutoInsertDataPlugin(),
     createRemoveEmptyPlugin(),
     createRemoveVoidPlugin(),
@@ -13286,8 +13887,8 @@ class TheQuickInsertComponent {
         this.renderer = renderer;
         this.elementRef = elementRef;
         this.cdr = cdr;
+        this.className = 'the-quick-insert';
         this.isVisible = false;
-        this.isHide = true;
         this.defaultIconName = 'plus-circle-thin';
         this.iconNameFill = 'plus-circle-thin-fill';
         this.displayIconName = this.defaultIconName;
@@ -13296,16 +13897,38 @@ class TheQuickInsertComponent {
         event.preventDefault();
         event.stopPropagation();
     }
+    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.checkStatus();
+                }, 0);
+            }
+        };
+    }
     checkStatus() {
         var _a;
         const { editor } = this;
-        if (this.isVisible && isCleanEmptyParagraph(editor) && !this.hasExcludeAttribute() && !this.isRichMediaScope()) {
+        if (this.isVisible &&
+            !QuickInsertEditor.isOpenedMenu(editor) &&
+            isCleanEmptyParagraph(editor) &&
+            !this.hasExcludeAttribute() &&
+            !this.isRichMediaScope()) {
             const block = Node.ancestor(editor, [(_a = editor === null || editor === void 0 ? void 0 : editor.selection) === null || _a === void 0 ? void 0 : _a.anchor.path[0]]);
             const rootNode = AngularEditor.toDOMNode(editor, block);
             this.updatePosition(rootNode.offsetLeft, rootNode.offsetTop);
             return;
         }
-        this.isHide = true;
+        this.addHiddenClass();
+    }
+    addHiddenClass() {
+        this.elementRef.nativeElement.classList.add('d-none');
+    }
+    removeHiddenClass() {
+        this.elementRef.nativeElement.classList.remove('d-none');
     }
     isRichMediaScope() {
         var _a;
@@ -13326,9 +13949,9 @@ class TheQuickInsertComponent {
         return fontSizeMark;
     }
     updatePosition(left, top) {
-        this.isHide = false;
         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;
@@ -13341,24 +13964,26 @@ class TheQuickInsertComponent {
     handleClick(event) {
         event.stopPropagation();
         event.preventDefault();
-        if (QuickInsertEditor.isOpenedToolbar(this.editor)) {
-            QuickInsertEditor.closeQuickInsertToolbar(this.editor);
-            return;
-        }
-        QuickInsertEditor.openQuickInsertToolbar(this.editor, this.quickToolbarItems, this.iconElement.nativeElement);
+        // avoid popover is closed immediately
+        setTimeout(() => {
+            QuickInsertEditor.openMenu(this.editor)
+                .afterClosed()
+                .subscribe(() => {
+                this.checkStatus();
+            });
+            this.checkStatus();
+        }, 100);
     }
 }
 TheQuickInsertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheQuickInsertComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TheQuickInsertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: { editor: "editor", quickToolbarItems: "quickToolbarItems", isVisible: "isVisible" }, host: { listeners: { "mousedown": "handleMousedownNativeElement($event)" }, properties: { "class.hide": "isHide" }, classAttribute: "the-quick-insert" }, viewQueries: [{ propertyName: "iconElement", first: true, predicate: ["iconElement"], descendants: true, read: ElementRef }], 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: i3.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] });
+TheQuickInsertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TheQuickInsertComponent, 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 }], 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: i3.ThyIconComponent, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheQuickInsertComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[theQuickInsert]', host: {
-                        class: 'the-quick-insert',
-                        '[class.hide]': 'isHide'
-                    }, 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: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { editor: [{
-                type: Input
-            }], quickToolbarItems: [{
+            args: [{ selector: '[theQuickInsert]', 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: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class']
+            }], editor: [{
                 type: Input
             }], isVisible: [{
                 type: Input
@@ -13371,13 +13996,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
             }] } });
 
 class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
-    constructor(theContextService, viewContainerRef, elementRef, ngZone, cdr) {
+    constructor(theContextService, viewContainerRef, elementRef, ngZone, cdr, iconRegistry, domSanitizer) {
         super();
         this.theContextService = theContextService;
         this.viewContainerRef = viewContainerRef;
         this.elementRef = elementRef;
         this.ngZone = ngZone;
         this.cdr = cdr;
+        this.iconRegistry = iconRegistry;
+        this.domSanitizer = domSanitizer;
         this.visibleQuickInsertPlus = true;
         this.thePlugins = [];
         this.theOnSave = new EventEmitter();
@@ -13487,12 +14114,9 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
         var _a, _b;
         return ((_a = this.theOptions) === null || _a === void 0 ? void 0 : _a.maxHeight) ? `${(_b = this.theOptions) === null || _b === void 0 ? void 0 : _b.maxHeight}px` : null;
     }
-    get quickToolbarItems() {
-        var _a;
-        return (_a = this.toolbarEntity) === null || _a === void 0 ? void 0 : _a.quick;
-    }
     ngOnInit() {
         this.initialize();
+        this.initializeMenuIcon();
         this.theContextService.uploadingStatus$.subscribe(isUploading => {
             if (isUploading) {
                 this.theUploadingStatus.emit(true);
@@ -13564,6 +14188,11 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
             this.theOptions = Object.assign(Object.assign({}, this.theOptions), { mode: TheDataMode.html });
         }
     }
+    initializeMenuIcon() {
+        PluginMenuSvgs.forEach(menuItem => {
+            this.iconRegistry.addSvgIconLiteral(menuItem.key, this.domSanitizer.bypassSecurityTrustHtml(menuItem.svg));
+        });
+    }
     applyAutoFocus() {
         var _a, _b, _c;
         if (!((_a = this.theOptions) === null || _a === void 0 ? void 0 : _a.disabled) && !((_b = this.theOptions) === null || _b === void 0 ? void 0 : _b.readonly)) {
@@ -13601,16 +14230,12 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
         this.onTouchedCallback = fn;
     }
     valueChange(value) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e;
         const isEditable = !((_a = this.theOptions) === null || _a === void 0 ? void 0 : _a.readonly) && !((_b = this.theOptions) === null || _b === void 0 ? void 0 : _b.disabled);
         (_c = this.theGlobalToolbarInstance) === null || _c === void 0 ? void 0 : _c.selectionChange(this.editor);
-        // quick insert button
-        if (isEditable) {
-            (_d = this.quickInsertInstance) === null || _d === void 0 ? void 0 : _d.checkStatus();
-        }
         // auto scroll view
-        const scrollContainer = (_e = this.theOptions) === null || _e === void 0 ? void 0 : _e.scrollContainer;
-        const maxHeight = (_f = this.theOptions) === null || _f === void 0 ? void 0 : _f.maxHeight;
+        const scrollContainer = (_d = this.theOptions) === null || _d === void 0 ? void 0 : _d.scrollContainer;
+        const maxHeight = (_e = this.theOptions) === null || _e === void 0 ? void 0 : _e.maxHeight;
         if (isEditable && (scrollContainer || maxHeight)) {
             const container = maxHeight ? DEFAULT_SCROLL_CONTAINER : scrollContainer;
             this.autoScrollView(this.editor, container);
@@ -13729,7 +14354,7 @@ class TheEditorComponent extends mixinUnsubscribe(MixinBase) {
         };
     }
 }
-TheEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheEditorComponent, deps: [{ token: TheContextService }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TheEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheEditorComponent, deps: [{ token: TheContextService }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i3.ThyIconRegistry }, { token: i3$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
 TheEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TheEditorComponent, 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": "theOptions?.readonly" }, classAttribute: "the-editor" }, providers: [
         TheContextService,
         TheColorSelectService,
@@ -13738,7 +14363,7 @@ TheEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
             useExisting: forwardRef(() => TheEditorComponent),
             multi: true
         }
-    ], viewQueries: [{ propertyName: "templateInstance", first: true, predicate: ["templateInstance"], descendants: true, static: true }, { propertyName: "globalToolbarInstance", first: true, predicate: ["globalToolbar"], descendants: true }, { propertyName: "quickInsertInstance", first: true, predicate: ["quickInsert"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<the-toolbar\n    *ngIf=\"!theOptions?.readonly && !theGlobalToolbar\"\n    [ngClass]=\"{\n        'the-toolbar-disabled': theOptions?.disabled\n    }\"\n    #globalToolbar\n    [editor]=\"editor\"\n    [toolbarItems]=\"toolbarEntity.global\"\n    [containerClass]=\"globalToolbarClass\"\n    [align]=\"theOptions?.toolbar?.align\"\n></the-toolbar>\n\n<div\n    class=\"the-editable-container\"\n    cdkScrollable\n    thyImageGroup\n    [ngClass]=\"{\n        'the-editor-disabled': theOptions?.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        (ngModelChange)=\"valueChange($event)\"\n        [decorate]=\"decorate\"\n        [placeholder]=\"theOptions?.placeholder\"\n        [placeholderDecorate]=\"theOptions?.placeholderDecorate ? theOptions?.placeholderDecorate : null\"\n        [renderElement]=\"renderElement\"\n        [renderText]=\"renderText\"\n        [renderLeaf]=\"renderLeaf\"\n        [readonly]=\"theOptions?.readonly || theOptions?.disabled\"\n        [keydown]=\"onKeyDown\"\n        [click]=\"onClick\"\n        [paste]=\"onSlaPaste\"\n        [beforeInput]=\"onSlaBeforeInput\"\n        [blur]=\"onSlaBlur\"\n        [focus]=\"onSlaFocus\"\n        [copy]=\"onSlaCopy\"\n        [cut]=\"onSlaCut\"\n        [isStrictDecorate]=\"false\"\n        [compositionStart]=\"onSlaCompositionStart\"\n        [compositionEnd]=\"onSlaCompositionEnd\"\n        [dragStart]=\"onSlaDragStart\"\n        [dragOver]=\"onSlaDragOver\"\n        [drop]=\"onDrop\"\n        (mousedown)=\"mousedown($event)\"\n    ></slate-editable>\n    <the-inline-toolbar\n        *ngIf=\"!theOptions?.readonly && theOptions?.inlineToolbarVisible\"\n        [editor]=\"editor\"\n        [toolbarItems]=\"toolbarEntity.inline\"\n    ></the-inline-toolbar>\n    <div #quickInsert theQuickInsert [editor]=\"editor\" [quickToolbarItems]=\"quickToolbarItems\" [isVisible]=\"visibleQuickInsertPlus\"></div>\n    <the-template #templateInstance></the-template>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i6$1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i1.SlateEditableComponent, selector: "slate-editable", inputs: ["editor", "renderElement", "renderLeaf", "renderText", "decorate", "placeholderDecorate", "isStrictDecorate", "trackBy", "readonly", "placeholder", "beforeInput", "blur", "click", "compositionEnd", "compositionStart", "copy", "cut", "dragOver", "dragStart", "dragEnd", "drop", "focus", "keydown", "paste", "spellCheck", "autoCorrect", "autoCapitalize"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ThyImageGroupComponent, selector: "thy-image-group, [thyImageGroup]" }, { kind: "component", type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }, { kind: "component", type: TheInlineToolbarComponent, selector: "the-inline-toolbar", inputs: ["editor", "toolbarItems"] }, { kind: "component", type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: ["editor", "quickToolbarItems", "isVisible"] }, { kind: "component", type: TheTemplateComponent, selector: "the-template,[theTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], viewQueries: [{ propertyName: "templateInstance", first: true, predicate: ["templateInstance"], descendants: true, static: true }, { propertyName: "globalToolbarInstance", first: true, predicate: ["globalToolbar"], descendants: true }, { propertyName: "quickInsertInstance", first: true, predicate: ["quickInsert"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<the-toolbar\n    *ngIf=\"!theOptions?.readonly && !theGlobalToolbar\"\n    [ngClass]=\"{\n        'the-toolbar-disabled': theOptions?.disabled\n    }\"\n    #globalToolbar\n    [editor]=\"editor\"\n    [toolbarItems]=\"toolbarEntity.global\"\n    [containerClass]=\"globalToolbarClass\"\n    [align]=\"theOptions?.toolbar?.align\"\n></the-toolbar>\n\n<div\n    class=\"the-editable-container\"\n    cdkScrollable\n    thyImageGroup\n    [ngClass]=\"{\n        'the-editor-disabled': theOptions?.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        (ngModelChange)=\"valueChange($event)\"\n        [decorate]=\"decorate\"\n        [placeholder]=\"theOptions?.placeholder\"\n        [placeholderDecorate]=\"theOptions?.placeholderDecorate ? theOptions?.placeholderDecorate : null\"\n        [renderElement]=\"renderElement\"\n        [renderText]=\"renderText\"\n        [renderLeaf]=\"renderLeaf\"\n        [readonly]=\"theOptions?.readonly || theOptions?.disabled\"\n        [keydown]=\"onKeyDown\"\n        [click]=\"onClick\"\n        [paste]=\"onSlaPaste\"\n        [beforeInput]=\"onSlaBeforeInput\"\n        [blur]=\"onSlaBlur\"\n        [focus]=\"onSlaFocus\"\n        [copy]=\"onSlaCopy\"\n        [cut]=\"onSlaCut\"\n        [isStrictDecorate]=\"false\"\n        [compositionStart]=\"onSlaCompositionStart\"\n        [compositionEnd]=\"onSlaCompositionEnd\"\n        [dragStart]=\"onSlaDragStart\"\n        [dragOver]=\"onSlaDragOver\"\n        [drop]=\"onDrop\"\n        (mousedown)=\"mousedown($event)\"\n    ></slate-editable>\n    <the-inline-toolbar\n        *ngIf=\"!theOptions?.readonly && theOptions?.inlineToolbarVisible\"\n        [editor]=\"editor\"\n        [toolbarItems]=\"toolbarEntity.inline\"\n    ></the-inline-toolbar>\n    <div #quickInsert theQuickInsert [editor]=\"editor\" [isVisible]=\"visibleQuickInsertPlus\"></div>\n    <the-template #templateInstance></the-template>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i6$1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: i1.SlateEditableComponent, selector: "slate-editable", inputs: ["editor", "renderElement", "renderLeaf", "renderText", "decorate", "placeholderDecorate", "isStrictDecorate", "trackBy", "readonly", "placeholder", "beforeInput", "blur", "click", "compositionEnd", "compositionStart", "copy", "cut", "dragOver", "dragStart", "dragEnd", "drop", "focus", "keydown", "paste", "spellCheck", "autoCorrect", "autoCapitalize"] }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ThyImageGroupComponent, selector: "thy-image-group, [thyImageGroup]" }, { kind: "component", type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }, { kind: "component", type: TheInlineToolbarComponent, selector: "the-inline-toolbar", inputs: ["editor", "toolbarItems"] }, { kind: "component", type: TheQuickInsertComponent, selector: "[theQuickInsert]", inputs: ["editor", "isVisible"] }, { kind: "component", type: TheTemplateComponent, selector: "the-template,[theTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-editor, theEditor', providers: [
@@ -13752,8 +14377,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                     ], host: {
                         class: 'the-editor',
                         '[class.the-editor-readonly]': 'theOptions?.readonly'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<the-toolbar\n    *ngIf=\"!theOptions?.readonly && !theGlobalToolbar\"\n    [ngClass]=\"{\n        'the-toolbar-disabled': theOptions?.disabled\n    }\"\n    #globalToolbar\n    [editor]=\"editor\"\n    [toolbarItems]=\"toolbarEntity.global\"\n    [containerClass]=\"globalToolbarClass\"\n    [align]=\"theOptions?.toolbar?.align\"\n></the-toolbar>\n\n<div\n    class=\"the-editable-container\"\n    cdkScrollable\n    thyImageGroup\n    [ngClass]=\"{\n        'the-editor-disabled': theOptions?.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        (ngModelChange)=\"valueChange($event)\"\n        [decorate]=\"decorate\"\n        [placeholder]=\"theOptions?.placeholder\"\n        [placeholderDecorate]=\"theOptions?.placeholderDecorate ? theOptions?.placeholderDecorate : null\"\n        [renderElement]=\"renderElement\"\n        [renderText]=\"renderText\"\n        [renderLeaf]=\"renderLeaf\"\n        [readonly]=\"theOptions?.readonly || theOptions?.disabled\"\n        [keydown]=\"onKeyDown\"\n        [click]=\"onClick\"\n        [paste]=\"onSlaPaste\"\n        [beforeInput]=\"onSlaBeforeInput\"\n        [blur]=\"onSlaBlur\"\n        [focus]=\"onSlaFocus\"\n        [copy]=\"onSlaCopy\"\n        [cut]=\"onSlaCut\"\n        [isStrictDecorate]=\"false\"\n        [compositionStart]=\"onSlaCompositionStart\"\n        [compositionEnd]=\"onSlaCompositionEnd\"\n        [dragStart]=\"onSlaDragStart\"\n        [dragOver]=\"onSlaDragOver\"\n        [drop]=\"onDrop\"\n        (mousedown)=\"mousedown($event)\"\n    ></slate-editable>\n    <the-inline-toolbar\n        *ngIf=\"!theOptions?.readonly && theOptions?.inlineToolbarVisible\"\n        [editor]=\"editor\"\n        [toolbarItems]=\"toolbarEntity.inline\"\n    ></the-inline-toolbar>\n    <div #quickInsert theQuickInsert [editor]=\"editor\" [quickToolbarItems]=\"quickToolbarItems\" [isVisible]=\"visibleQuickInsertPlus\"></div>\n    <the-template #templateInstance></the-template>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: TheContextService }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { theOptions: [{
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<the-toolbar\n    *ngIf=\"!theOptions?.readonly && !theGlobalToolbar\"\n    [ngClass]=\"{\n        'the-toolbar-disabled': theOptions?.disabled\n    }\"\n    #globalToolbar\n    [editor]=\"editor\"\n    [toolbarItems]=\"toolbarEntity.global\"\n    [containerClass]=\"globalToolbarClass\"\n    [align]=\"theOptions?.toolbar?.align\"\n></the-toolbar>\n\n<div\n    class=\"the-editable-container\"\n    cdkScrollable\n    thyImageGroup\n    [ngClass]=\"{\n        'the-editor-disabled': theOptions?.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        (ngModelChange)=\"valueChange($event)\"\n        [decorate]=\"decorate\"\n        [placeholder]=\"theOptions?.placeholder\"\n        [placeholderDecorate]=\"theOptions?.placeholderDecorate ? theOptions?.placeholderDecorate : null\"\n        [renderElement]=\"renderElement\"\n        [renderText]=\"renderText\"\n        [renderLeaf]=\"renderLeaf\"\n        [readonly]=\"theOptions?.readonly || theOptions?.disabled\"\n        [keydown]=\"onKeyDown\"\n        [click]=\"onClick\"\n        [paste]=\"onSlaPaste\"\n        [beforeInput]=\"onSlaBeforeInput\"\n        [blur]=\"onSlaBlur\"\n        [focus]=\"onSlaFocus\"\n        [copy]=\"onSlaCopy\"\n        [cut]=\"onSlaCut\"\n        [isStrictDecorate]=\"false\"\n        [compositionStart]=\"onSlaCompositionStart\"\n        [compositionEnd]=\"onSlaCompositionEnd\"\n        [dragStart]=\"onSlaDragStart\"\n        [dragOver]=\"onSlaDragOver\"\n        [drop]=\"onDrop\"\n        (mousedown)=\"mousedown($event)\"\n    ></slate-editable>\n    <the-inline-toolbar\n        *ngIf=\"!theOptions?.readonly && theOptions?.inlineToolbarVisible\"\n        [editor]=\"editor\"\n        [toolbarItems]=\"toolbarEntity.inline\"\n    ></the-inline-toolbar>\n    <div #quickInsert theQuickInsert [editor]=\"editor\" [isVisible]=\"visibleQuickInsertPlus\"></div>\n    <the-template #templateInstance></the-template>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: TheContextService }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i3.ThyIconRegistry }, { type: i3$2.DomSanitizer }]; }, propDecorators: { theOptions: [{
                 type: Input
             }], thePlugins: [{
                 type: Input
@@ -13837,7 +14462,7 @@ class TheToolbarGroupComponent {
     }
     ngOnInit() { }
     ngOnDestroy() {
-        this.colseGroup();
+        this.closeGroup();
     }
     toggleGroupMenus(event) {
         var _a;
@@ -13845,7 +14470,7 @@ class TheToolbarGroupComponent {
             return;
         }
         if (this.isOpened) {
-            this.colseGroup();
+            this.closeGroup();
         }
         else {
             this.openGroup(event);
@@ -13876,7 +14501,7 @@ class TheToolbarGroupComponent {
         this.active = true;
         this.groupPopoverRef = this.thyPopover.open(this.groupTemplate, {
             panelClass: 'the-toolbar-group-container',
-            offset: 10,
+            offset: 0,
             minWidth: 0,
             placement: 'bottomRight',
             origin: event.currentTarget,
@@ -13889,14 +14514,14 @@ class TheToolbarGroupComponent {
             this.activeChange();
         });
     }
-    colseGroup() {
+    closeGroup() {
         if (this.isOpened) {
             this.groupPopoverRef.close();
         }
     }
 }
 TheToolbarGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheToolbarGroupComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ThyPopover }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-TheToolbarGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TheToolbarGroupComponent, selector: "the-toolbar-group", inputs: { menus: "menus", item: "item" }, host: { listeners: { "mousedown": "mousedownHandler($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: "directive", type: i3$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i5.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }] });
+TheToolbarGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.0", type: TheToolbarGroupComponent, selector: "the-toolbar-group", inputs: { menus: "menus", item: "item" }, host: { listeners: { "mousedown": "mousedownHandler($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: "directive", type: i8.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: i5.ThyActionComponent, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheToolbarGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'the-toolbar-group', 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" }]
@@ -13918,6 +14543,349 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                 args: ['click', ['$event']]
             }] } });
 
+const THE_LISTBOX_PARENT_OPTION_TOKEN = new InjectionToken('THE_LISTBOX_PARENT_OPTION_TOKEN');
+const THE_LISTBOX_PARENT_GROUP_TOKEN = new InjectionToken('THE_LISTBOX_PARENT_GROUP_TOKEN');
+const THE_LISTBOX_TOKEN = new InjectionToken('THE_LISTBOX_TOKEN');
+
+class TheListboxOptionDirective {
+    constructor(parentOption, parentGroup, elementRef) {
+        this.parentOption = parentOption;
+        this.parentGroup = parentGroup;
+        this.elementRef = elementRef;
+        this._active = false;
+        this.className = 'the-listbox-option';
+    }
+    get hasChild() {
+        return this._options.length > 0;
+    }
+    get firstChild() {
+        return this._options.first;
+    }
+    ngOnInit() { }
+    ngAfterContentInit() { }
+    getGroups() {
+        const groups = [];
+        this._options.forEach(option => {
+            if (option.parentOption && option.parentOption === this && !groups.includes(option.parentGroup)) {
+                groups.push(option.parentGroup);
+            }
+        });
+        return groups;
+    }
+    setActive(active) {
+        this._active = active;
+        if (active) {
+            this.elementRef.nativeElement.classList.add('active');
+        }
+        else {
+            this.elementRef.nativeElement.classList.remove('active');
+        }
+    }
+    getActive() {
+        return this._active;
+    }
+}
+TheListboxOptionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.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 });
+TheListboxOptionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: TheListboxOptionDirective, selector: "[theListboxOpton]", host: { properties: { "class": "this.className" } }, providers: [
+        {
+            provide: THE_LISTBOX_PARENT_OPTION_TOKEN,
+            useExisting: TheListboxOptionDirective
+        }
+    ], queries: [{ propertyName: "_options", predicate: TheListboxOptionDirective, descendants: true }], exportAs: ["theListboxOpton"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheListboxOptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[theListboxOpton]',
+                    exportAs: 'theListboxOpton',
+                    providers: [
+                        {
+                            provide: THE_LISTBOX_PARENT_OPTION_TOKEN,
+                            useExisting: TheListboxOptionDirective
+                        }
+                    ]
+                }]
+        }], ctorParameters: function () {
+        return [{ type: TheListboxOptionDirective, decorators: [{
+                        type: Inject,
+                        args: [THE_LISTBOX_PARENT_OPTION_TOKEN]
+                    }, {
+                        type: Optional
+                    }, {
+                        type: SkipSelf
+                    }] }, { type: TheListboxGroupDirective, decorators: [{
+                        type: Inject,
+                        args: [THE_LISTBOX_PARENT_GROUP_TOKEN]
+                    }] }, { type: i0.ElementRef }];
+    }, propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class']
+            }], _options: [{
+                type: ContentChildren,
+                args: [TheListboxOptionDirective, { descendants: true }]
+            }] } });
+class TheListboxGroupDirective {
+    constructor(parentOption, theListBox) {
+        this.parentOption = parentOption;
+        this.theListBox = theListBox;
+        this.className = 'the-listbox-group';
+        this.options = [];
+        /**
+         * 大于 1 表示水平分组，小于等于 1 表示垂直分组
+         */
+        this.horizontalColumn = 1;
+    }
+    ngOnInit() { }
+    ngAfterContentInit() {
+        this.filterOptions();
+    }
+    filterOptions() {
+        this.options = this._options.filter(_option => {
+            if (_option.parentGroup && _option.parentGroup === this) {
+                return true;
+            }
+            else {
+                return false;
+            }
+        });
+    }
+    getSiblingGroups() {
+        if (this.parentOption) {
+            return this.parentOption.getGroups();
+        }
+        else {
+            return this.theListBox.groups;
+        }
+    }
+    getFirst() {
+        return this.options[0];
+    }
+    getLast() {
+        return this.options[this.options.length - 1];
+    }
+}
+TheListboxGroupDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheListboxGroupDirective, deps: [{ token: THE_LISTBOX_PARENT_OPTION_TOKEN, optional: true, skipSelf: true }, { token: THE_LISTBOX_TOKEN }], target: i0.ɵɵFactoryTarget.Directive });
+TheListboxGroupDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: TheListboxGroupDirective, 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: "14.2.0", ngImport: i0, type: TheListboxGroupDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[theListboxGroup]',
+                    exportAs: 'theListboxGroup',
+                    providers: [
+                        {
+                            provide: THE_LISTBOX_PARENT_GROUP_TOKEN,
+                            useExisting: TheListboxGroupDirective
+                        }
+                    ]
+                }]
+        }], ctorParameters: function () {
+        return [{ type: TheListboxOptionDirective, decorators: [{
+                        type: Inject,
+                        args: [THE_LISTBOX_PARENT_OPTION_TOKEN]
+                    }, {
+                        type: Optional
+                    }, {
+                        type: SkipSelf
+                    }] }, { type: TheListboxDirective, decorators: [{
+                        type: Inject,
+                        args: [THE_LISTBOX_TOKEN]
+                    }] }];
+    }, propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class']
+            }], _options: [{
+                type: ContentChildren,
+                args: [TheListboxOptionDirective, { descendants: true }]
+            }], horizontalColumn: [{
+                type: Input
+            }] } });
+class TheListboxDirective {
+    constructor(ngZone, elementRef) {
+        this.ngZone = ngZone;
+        this.elementRef = elementRef;
+        this.className = 'the-listbox-container';
+        this.groups = [];
+        this.theActiveOptionChange = new EventEmitter();
+    }
+    ngOnInit() { }
+    ngAfterContentInit() {
+        this.filterGroups();
+        if (this.groups.length > 0) {
+            this.setActiveItem(null, this.groups[0].getFirst(), 'init');
+        }
+        this._optionChangesSubscription = this._groups.changes.subscribe(() => {
+            this.filterGroups();
+            this.setActiveItem(null, this.groups[0].getFirst(), 'init');
+        });
+        this.ngZone.runOutsideAngular(() => {
+            this._keyboardSubscription = fromEvent(this.keyboardContainer || this.elementRef.nativeElement, 'keydown').subscribe(event => {
+                this.handleKeydown(event);
+            });
+        });
+    }
+    filterGroups() {
+        this.groups = this._groups.filter(group => {
+            if (!group.parentOption) {
+                return true;
+            }
+            else {
+                return false;
+            }
+        });
+    }
+    handleKeydown(event) {
+        const { keyCode } = event;
+        switch (keyCode) {
+            case DOWN_ARROW:
+                this.setNextLineActive();
+                event.preventDefault();
+                break;
+            case UP_ARROW:
+                this.setPreviousLineActive();
+                event.preventDefault();
+                break;
+            case RIGHT_ARROW:
+                this.setNextItemActive();
+                event.preventDefault();
+                break;
+            case LEFT_ARROW:
+                this.setPreviousItemActive();
+                event.preventDefault();
+                break;
+        }
+    }
+    /**
+     * ←
+     */
+    setPreviousItemActive() {
+        if (this.activeOption.parentOption) {
+            this.setActiveItem(this.activeOption, this.activeOption.parentOption, 'parent');
+        }
+        else {
+            const groupOptions = this.activeOption.parentGroup.options;
+            let optionIndex = groupOptions.indexOf(this.activeOption);
+            let newOptionIndex = optionIndex - 1;
+            if (newOptionIndex >= 0) {
+                this.setActiveItem(this.activeOption, groupOptions[newOptionIndex], 'turn');
+            }
+            else {
+                this.enterPreviousGroup();
+            }
+        }
+    }
+    /**
+     * ↓ 键
+     */
+    setNextLineActive() {
+        const groupOptions = this.activeOption.parentGroup.options;
+        let optionIndex = groupOptions.indexOf(this.activeOption);
+        let newOptionIndex = optionIndex + this.activeOption.parentGroup.horizontalColumn;
+        if (newOptionIndex <= groupOptions.length - 1) {
+            this.setActiveItem(this.activeOption, groupOptions[newOptionIndex], 'turn');
+        }
+        else {
+            this.enterNextGroup();
+        }
+    }
+    /**
+     * → 键
+     */
+    setNextItemActive() {
+        if (this.activeOption.hasChild) {
+            this.setActiveItem(this.activeOption, this.activeOption.firstChild, 'child');
+        }
+        else {
+            const groupOptions = this.activeOption.parentGroup.options;
+            let optionIndex = groupOptions.indexOf(this.activeOption);
+            let newOptionIndex = optionIndex + 1;
+            if (newOptionIndex <= groupOptions.length - 1) {
+                this.setActiveItem(this.activeOption, groupOptions[newOptionIndex], 'turn');
+            }
+            else {
+                this.enterNextGroup();
+            }
+        }
+    }
+    /**
+     * ↑ 键
+     */
+    setPreviousLineActive() {
+        const groupOptions = this.activeOption.parentGroup.options;
+        let optionIndex = groupOptions.indexOf(this.activeOption);
+        let newOptionIndex = optionIndex - this.activeOption.parentGroup.horizontalColumn;
+        if (newOptionIndex >= 0) {
+            this.setActiveItem(this.activeOption, groupOptions[newOptionIndex], 'turn');
+        }
+        else {
+            this.enterPreviousGroup();
+        }
+    }
+    enterNextGroup() {
+        const groups = this.activeOption.parentGroup.getSiblingGroups();
+        const groupIndex = groups.indexOf(this.activeOption.parentGroup);
+        let newGroupIndex = groupIndex + 1;
+        if (newGroupIndex > groups.length - 1) {
+            newGroupIndex = 0;
+        }
+        this.setActiveItem(this.activeOption, groups[newGroupIndex].getFirst(), 'turn');
+    }
+    enterPreviousGroup() {
+        const groups = this.activeOption.parentGroup.getSiblingGroups();
+        const groupIndex = groups.indexOf(this.activeOption.parentGroup);
+        let newGroupIndex = groupIndex - 1;
+        if (newGroupIndex < 0) {
+            newGroupIndex = groups.length - 1;
+        }
+        this.setActiveItem(this.activeOption, groups[newGroupIndex].getLast(), 'turn');
+    }
+    setActiveItem(previous, option, type) {
+        if (previous) {
+            previous.setActive(false);
+        }
+        option.setActive(true);
+        this.activeOption = option;
+        this.theActiveOptionChange.emit({ option, type });
+    }
+    ngOnDestroy() {
+        this._optionChangesSubscription.unsubscribe();
+        this._keyboardSubscription.unsubscribe();
+    }
+}
+TheListboxDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheListboxDirective, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+TheListboxDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: TheListboxDirective, selector: "[theListBox]", inputs: { keyboardContainer: "keyboardContainer" }, outputs: { theActiveOptionChange: "theActiveOptionChange" }, host: { properties: { "class": "this.className" } }, providers: [
+        {
+            provide: THE_LISTBOX_TOKEN,
+            useExisting: TheListboxDirective
+        }
+    ], queries: [{ propertyName: "_groups", predicate: TheListboxGroupDirective, descendants: true }], exportAs: ["theListBox"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheListboxDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[theListBox]',
+                    exportAs: 'theListBox',
+                    providers: [
+                        {
+                            provide: THE_LISTBOX_TOKEN,
+                            useExisting: TheListboxDirective
+                        }
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }]; }, propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class']
+            }], _groups: [{
+                type: ContentChildren,
+                args: [TheListboxGroupDirective, { descendants: true }]
+            }], keyboardContainer: [{
+                type: Input
+            }], theActiveOptionChange: [{
+                type: Output
+            }] } });
+
 const TETHYS = [
     ThyIconModule,
     ThyAvatarModule,
@@ -13939,7 +14907,9 @@ const TETHYS = [
     ThyDialogModule,
     ThyActionModule,
     ThyDividerModule,
-    ThyDropdownModule
+    ThyDropdownModule,
+    ThyMenuModule,
+    ThyEmptyModule
 ];
 const COMPONENTS = [
     TheToolbarComponent,
@@ -13950,7 +14920,7 @@ const COMPONENTS = [
     TheTextComponent,
     TheDefaultElementComponent,
     TheQuickInsertComponent,
-    TheQuickToolbarComponent,
+    ThePluginMenuComponent,
     TheColorSelectComponent,
     TheColorToolbarItemComponent,
     TheContextMenuComponent,
@@ -13959,7 +14929,10 @@ const COMPONENTS = [
     TheTableToolbarItemComponent,
     TheConversionHintComponent,
     TheVerticalToolbarItemComponent,
-    TheTableOptionsComponent
+    TheTableOptionsComponent,
+    TheListboxOptionDirective,
+    TheListboxGroupDirective,
+    TheListboxDirective
 ];
 const PLUGIN_COMPONENTS = [
     TheImageComponent,
@@ -13992,7 +14965,7 @@ TheEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version
         TheTextComponent,
         TheDefaultElementComponent,
         TheQuickInsertComponent,
-        TheQuickToolbarComponent,
+        ThePluginMenuComponent,
         TheColorSelectComponent,
         TheColorToolbarItemComponent,
         TheContextMenuComponent,
@@ -14001,7 +14974,10 @@ TheEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version
         TheTableToolbarItemComponent,
         TheConversionHintComponent,
         TheVerticalToolbarItemComponent,
-        TheTableOptionsComponent, TheImageComponent,
+        TheTableOptionsComponent,
+        TheListboxOptionDirective,
+        TheListboxGroupDirective,
+        TheListboxDirective, TheImageComponent,
         TheTemplateComponent,
         TheHrComponent,
         TheBlockquoteComponent,
@@ -14037,7 +15013,16 @@ TheEditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version
         ThyDialogModule,
         ThyActionModule,
         ThyDividerModule,
-        ThyDropdownModule, CodemirrorModule, TheColumnSizeModule], exports: [TheEditorComponent, TheToolbarComponent, TheToolbarDropdownComponent, TheToolbarItemComponent, TheDefaultElementComponent] });
+        ThyDropdownModule,
+        ThyMenuModule,
+        ThyEmptyModule, CodemirrorModule, TheColumnSizeModule], exports: [TheEditorComponent,
+        TheToolbarComponent,
+        TheToolbarDropdownComponent,
+        TheToolbarItemComponent,
+        TheDefaultElementComponent,
+        TheListboxOptionDirective,
+        TheListboxGroupDirective,
+        TheListboxDirective] });
 TheEditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheEditorModule, providers: [
         {
             provide: TheToolbarGroupToken,
@@ -14050,7 +15035,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
             args: [{
                     declarations: [TheEditorComponent, ...PIPES, ...COMPONENTS, ...PLUGIN_COMPONENTS],
                     imports: [CommonModule, ScrollingModule, SlateModule, FormsModule, ...TETHYS, CodemirrorModule, TheColumnSizeModule],
-                    exports: [TheEditorComponent, TheToolbarComponent, TheToolbarDropdownComponent, TheToolbarItemComponent, TheDefaultElementComponent],
+                    exports: [
+                        TheEditorComponent,
+                        TheToolbarComponent,
+                        TheToolbarDropdownComponent,
+                        TheToolbarItemComponent,
+                        TheDefaultElementComponent,
+                        TheListboxOptionDirective,
+                        TheListboxGroupDirective,
+                        TheListboxDirective
+                    ],
                     providers: [
                         {
                             provide: TheToolbarGroupToken,
@@ -14061,32 +15055,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImpor
                 }]
         }] });
 
-class TheBaseSuggestion {
-    handleMousedown(event) {
-        event.preventDefault();
-    }
-}
-TheBaseSuggestion.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheBaseSuggestion, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-TheBaseSuggestion.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.0", type: TheBaseSuggestion, inputs: { editor: "editor", type: "type", keywords: "keywords" }, host: { listeners: { "mousedown": "handleMousedown($event)" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.0", ngImport: i0, type: TheBaseSuggestion, decorators: [{
-            type: Directive
-        }], propDecorators: { editor: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], keywords: [{
-                type: Input
-            }], handleMousedown: [{
-                type: HostListener,
-                args: ['mousedown', ['$event']]
-            }] } });
-
 class TheToolbarService {
-    initialize(toolbarItems, global = DefaultGlobalToolbarDefinition, inline = DefaultInlineToolbarDefinition, quick = DefaultQuickToolbarDefinition) {
+    initialize(toolbarItems, global = DefaultGlobalToolbarDefinition, inline = DefaultInlineToolbarDefinition) {
         const toolbarDefinition = {
             global,
-            inline,
-            quick
+            inline
         };
         const toolbarOperations = new Map();
         toolbarItems.forEach(i => toolbarOperations.set(i.key, i));
@@ -14140,5 +15113,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, BlockquoteEditor, CLIPBOARD_FORMAT_KEY, CODEMIRROR_PADDING_TOP, CODE_MODES, COMPONENTS, CONTAINER_BLOCKS, CONTROL_KEY, CodeEditor, ColorEditor, DEFAULT_LANGUAGE, DEFAULT_SCROLL_CONTAINER, DISABLED_OPERATE_TYPES, DefaultElementOptions, DefaultGlobalToolbarDefinition, DefaultInlineToolbarDefinition, DefaultQuickToolbarDefinition, DropdownMode, ELEMENT_UNIQUE_ID, ElementKinds, ErrorCodes, FontSizeTypes, FontSizes, HEADING_TYPES, HeadingEditor, HrEditor, IS_MAC, ImageEditor, IndentEditor, Indents, LINK_DEFAULT_TEXT, LIST_BLOCK_TYPES, LayoutTypes, LinkEditor, ListEditor, MarkEditor, MarkProps, MarkTypes, MentionEditor, PICTURE_ACCEPTED_UPLOAD_MIME, PICTURE_ACCEPTED_UPLOAD_SIZE, PLUGIN_COMPONENTS, PluginKeys, QuickInsertEditor, STANDARD_HEADING_TYPES, TAB_SPACE, THE_EDITOR_CONVERSION_HINT_REF, THE_EDITOR_ORIGIN_ANCHOR, THE_EDITOR_POPOVER_REF, THE_EDITOR_QUICK_TOOLBAR_REF, THE_EDITOR_UUID, THE_INLINE_TOOLBAR_TYPES, THE_MODE_PROVIDER, THE_MODE_TOKEN, THE_UPLOAD_SERVICE_TOKEN, TableEditor, TheBaseElementComponent, TheBaseSuggestion, TheBaseToolbarDropdown, TheBaseToolbarItem, TheContextService, TheDataMode, TheDefaultElementComponent, TheEditor, TheEditorComponent, TheEditorModule, TheImageComponent, TheMode, TheModeConfig, index$1 as TheQueries, TheToolbarComponent, TheToolbarDropdownComponent, TheToolbarGroupComponent, TheToolbarGroupToken, TheToolbarItemComponent, TheToolbarService, index as TheTransforms, TodoItemEditor, ToolbarActionTypes, ToolbarAlignment, ToolbarItemMode, ToolbarItemType, ToolbarMoreGroup, VOID_BLOCK_TYPES, VerticalAlignEditor, VerticalAlignment, ZERO_WIDTH_CHAR, autoFocus, autoScrollViewHandle, coercePixelsFromCssValue, combinePlugins, createEmptyParagraph, createMentionPlugin, createPluginFactory, createToolbar, createVerticalAlignPlugin, dataDeserialize, dataSerializing, deleteElementKey, extractFragment, filterTextFormat, flattenDeepPlugins, getColsTotalWidth, getEditorUUID, getElementClassByPrefix, getElementHeight, getElementWidth, getEndBlock, getPlugin, getPluginOptions, getPlugins, getRowsTotalHeight, getStartBlock, getToolbarClass, headingOptions, htmlToTheia, idCreator, inValidTypes, internalPlugins, isCleanEmptyParagraph, isDirectionKeydown, isPureEmptyParagraph, mergeArray, mergeDeepPlugins, mergeElementOptions, mergeOptions, nestedStructureByKey, plainToTheia, pluginsByKey, setEditorUUID, useElementStyle, withMention, withTestPlugin, withTheia };
+export { ALIGN_BLOCK_TYPES, A_TAG_REL_ATTR, AlignEditor, Alignment, BLOCK_DELETE_BACKWARD_TYPES, BlockquoteEditor, CLIPBOARD_FORMAT_KEY, CODEMIRROR_PADDING_TOP, CODE_MODES, COMPONENTS, CONTAINER_BLOCKS, CONTROL_KEY, CodeEditor, ColorEditor, DEFAULT_LANGUAGE, DEFAULT_SCROLL_CONTAINER, DISABLED_OPERATE_TYPES, DefaultElementOptions, DefaultGlobalToolbarDefinition, DefaultInlineToolbarDefinition, DefaultPluginMenu, DropdownMode, ELEMENT_UNIQUE_ID, ElementKinds, ErrorCodes, FontSizeTypes, FontSizes, HEADING_TYPES, HeadingEditor, HrEditor, IS_MAC, ImageEditor, IndentEditor, Indents, LINK_DEFAULT_TEXT, LIST_BLOCK_TYPES, LayoutTypes, LinkEditor, ListEditor, MarkEditor, MarkProps, MarkTypes, MentionEditor, PICTURE_ACCEPTED_UPLOAD_MIME, PICTURE_ACCEPTED_UPLOAD_SIZE, PLUGIN_COMPONENTS, PluginKeys, PluginMenuIcons, PluginMenuSvgs, QuickInsertEditor, STANDARD_HEADING_TYPES, TAB_SPACE, THE_EDITOR_CONVERSION_HINT_REF, THE_EDITOR_ORIGIN_ANCHOR, THE_EDITOR_POPOVER_REF, THE_EDITOR_UUID, THE_INLINE_TOOLBAR_TYPES, THE_LISTBOX_PARENT_GROUP_TOKEN, THE_LISTBOX_PARENT_OPTION_TOKEN, THE_LISTBOX_TOKEN, THE_MODE_PROVIDER, THE_MODE_TOKEN, THE_PLUGIN_MENU_REF, THE_UPLOAD_SERVICE_TOKEN, TableEditor, TheBaseElementComponent, TheBaseSuggestion, TheBaseToolbarDropdown, TheBaseToolbarItem, TheContextService, TheDataMode, TheDefaultElementComponent, TheEditor, TheEditorComponent, TheEditorModule, TheImageComponent, TheListboxDirective, TheListboxGroupDirective, TheListboxOptionDirective, TheMode, TheModeConfig, ThePluginMenu, ThePluginMenuItemType, index$1 as TheQueries, TheToolbarComponent, TheToolbarDropdownComponent, TheToolbarGroupComponent, TheToolbarGroupToken, TheToolbarItemComponent, TheToolbarService, index as TheTransforms, TodoItemEditor, ToolbarActionTypes, ToolbarAlignment, ToolbarItemType, ToolbarMoreGroup, VOID_BLOCK_TYPES, VerticalAlignEditor, VerticalAlignment, ZERO_WIDTH_CHAR, autoFocus, autoScrollViewHandle, base64toBlob, buildPluginMenu, buildPluginMenuItemMap, coercePixelsFromCssValue, combinePlugins, createEmptyParagraph, createMentionPlugin, createPluginFactory, createToolbar, createVerticalAlignPlugin, dataDeserialize, dataSerializing, deleteElementKey, extractFragment, filterTextFormat, flattenDeepPlugins, getColsTotalWidth, getEditorUUID, getElementClassByPrefix, getElementHeight, getElementWidth, getEndBlock, getPlugin, getPluginOptions, getPlugins, getRowsTotalHeight, getStartBlock, getToolbarClass, headingOptions, htmlToTheia, idCreator, inValidTypes, internalPlugins, isCleanEmptyParagraph, isDirectionKeydown, isPureEmptyParagraph, mergeArray, mergeDeepPlugins, mergeElementOptions, mergeOptions, nestedStructureByKey, plainToTheia, pluginsByKey, recursionNodes, setEditorUUID, useElementStyle, withMention, withTestPlugin, withTheia };
 //# sourceMappingURL=worktile-theia.mjs.map