@worktile/theia 20.1.0-next.0 → 20.1.0-next.10

package/components/plugin-menu/plugin-menu.component.scss

@@ -22,7 +22,8 @@
                 color: variables.$gray-700;
             }
         }
-        :nth-child(6) {
+        :nth-child(6),
+        :nth-child(12) {
             margin-right: 0;
         }
     }

package/fesm2022/worktile-theia.mjs

@@ -10,7 +10,7 @@ import { cloneDeep, map, assign, defaults, groupBy, uniq, isEqual } from 'lodash
 export { assign, cloneDeep, debounce, defaults, groupBy, isEqual, map, uniq } from 'lodash';
 import { Editor, Element, Span, Range, Path, Node, Point, Text, Transforms, Operation, createEditor } from 'slate';
 import * as i4 from 'slate-angular';
-import { FAKE_LEFT_BLOCK_CARD_OFFSET, FAKE_RIGHT_BLOCK_CARD_OFFSET, getClipboardData, AngularEditor, hotkeys, getPlainText as getPlainText$1, createClipboardData, setClipboardData, BaseElementComponent, IS_SAFARI, ELEMENT_TO_COMPONENT, SlateModule, getBlockCardByNativeElement, SLATE_BLOCK_CARD_CLASS_NAME, BaseElementFlavour, hasBlockCard, isCardLeft, DefaultTextFlavour, defaultScrollSelectionIntoView, getDataTransferClipboard, JUST_NOW_UPDATED_VIRTUAL_VIEW, SLATE_DEBUG_KEY, withAngular } from 'slate-angular';
+import { FAKE_LEFT_BLOCK_CARD_OFFSET, FAKE_RIGHT_BLOCK_CARD_OFFSET, getClipboardData, AngularEditor, hotkeys, getPlainText as getPlainText$1, createClipboardData, setClipboardData, BaseElementComponent, IS_SAFARI, ELEMENT_TO_COMPONENT, SlateModule, getBlockCardByNativeElement, SLATE_BLOCK_CARD_CLASS_NAME, EDITOR_TO_VIRTUAL_SCROLL_SELECTION, BaseElementFlavour, hasBlockCard, isCardLeft, ELEMENT_KEY_TO_HEIGHTS, DefaultTextFlavour, defaultScrollSelectionIntoView, getDataTransferClipboard, JUST_NOW_UPDATED_VIRTUAL_VIEW, SLATE_DEBUG_KEY, withAngular } from 'slate-angular';
 import { HistoryEditor, withHistory } from 'slate-history';
 import { NODE_TO_PARENT, NODE_TO_INDEX, NODE_TO_ELEMENT, DOMEditor, EDITOR_TO_ELEMENT } from 'slate-dom';
 import { TheiaConverter } from '@atinc/selene';
@@ -3906,9 +3906,6 @@ const withTheia = (editor, plugins = []) => {
     e.isContainer = (value) => false;
     e.globalMousedown = (event) => null;
     e.mousedown = (event) => { };
-    e.isVisible = (element) => {
-        return true;
-    };
     e.extraElementOptions = [];
     e.disabled = false;
     e.plugins = [];
@@ -10785,9 +10782,13 @@ class TheTable extends TheBaseElement {
         });
     }
     updateHorizontalScrollbar() {
+        this.syncMouseOverState();
         this.updateScrollbarVisibility();
         this.updateScrollbarFixedState();
     }
+    syncMouseOverState() {
+        this.isMouseOverTable = this.nativeElement.matches(':hover');
+    }
     // 更新横向滚动条可见性
     updateScrollbarVisibility() {
         if (!this.tableWrapper || !this.horizontalScrollbarContainer || !this.horizontalScrollbarContent) {
@@ -11194,9 +11195,13 @@ class TheQuickInsert {
     }
     updateIconDisplay() {
         const { editor } = this;
+        const virtualScrollSelection = EDITOR_TO_VIRTUAL_SCROLL_SELECTION.get(editor);
+        const conditionWithVirtualScroll = !AngularEditor.isEnabledVirtualScroll(editor) ||
+            (editor.selection && virtualScrollSelection && Range.equals(virtualScrollSelection, editor.selection));
         if (this.isVisible &&
             !QuickInsertEditor.isOpenedMenu(editor) &&
             isCleanEmptyParagraph(editor) &&
+            conditionWithVirtualScroll &&
             !this.hasExcludeAttribute() &&
             !this.isRichMediaScope()) {
             const block = Node.ancestor(editor, [editor?.selection?.anchor.path[0]]);
@@ -13327,7 +13332,7 @@ const createBlockCardPlugin = createPluginFactory({
 });
 
 const withInternalCommon = (editor) => {
-    const { globalMousedown, onKeydown } = editor;
+    const { globalMousedown, onKeydown, selectAll } = editor;
     editor.globalMousedown = (event) => {
         const target = event.target;
         if (isColorIndicator(target)) {
@@ -13350,6 +13355,34 @@ const withInternalCommon = (editor) => {
         }
         onKeydown(event);
     };
+    editor.selectAll = () => {
+        let node = null;
+        if (!editor.selection) {
+            setEndSelection(editor);
+        }
+        const [start, end] = Range.edges(editor.selection);
+        const selectionRange = Editor.range(editor, start, end);
+        const containerBlocks = getContainerBlocks(editor);
+        for (let i = 0; i < containerBlocks.length; i++) {
+            [node] = getNodesByType(editor, containerBlocks[i]);
+            if (node) {
+                const [, path] = node;
+                const isStartParent = Path.equals(path, start.path.slice(0, path.length));
+                const isEndParent = Path.equals(path, end.path.slice(0, path.length));
+                if (isStartParent && isEndParent) {
+                    const nodeRange = Editor.range(editor, path);
+                    if (!Range.equals(nodeRange, selectionRange)) {
+                        Transforms.select(editor, nodeRange);
+                        break;
+                    }
+                    node = null;
+                }
+            }
+        }
+        if (!node) {
+            Transforms.select(editor, []);
+        }
+    };
     return editor;
 };
 const createCommonPlugin = (locale) => createPluginFactory({
@@ -14273,7 +14306,6 @@ class TheImage extends TheBaseElement {
             }
         ];
         this.dragable = false;
-        this.resolveImageHeight = null;
         this.beforeContextChange = (value) => {
             if (value.element !== this.element && value.element.thumbUrl) {
                 let thumbUrl = value.element.thumbUrl;
@@ -14313,6 +14345,10 @@ class TheImage extends TheBaseElement {
         this.subscribeMouseUp();
         this.subscribeImageUploadingState();
     }
+    afterViewInit() {
+        super.afterViewInit();
+        this.setImageMinHeight();
+    }
     onContextChange() {
         super.onContextChange();
         if (this.initialized && !isMobileMode(this.editor)) {
@@ -14325,6 +14361,9 @@ class TheImage extends TheBaseElement {
         }
     }
     ngOnDestroy() {
+        if (this.imageLoadedCacheHeightTimer) {
+            clearTimeout(this.imageLoadedCacheHeightTimer);
+        }
         this.uploadingSubscription.unsubscribe();
         this.theContextService.removeUploadFile(this.fileItem);
         if (this.uploading) {
@@ -14332,6 +14371,37 @@ class TheImage extends TheBaseElement {
         }
         super.ngOnDestroy();
     }
+    cacheImageHeight(height) {
+        if (!AngularEditor.isEnabledVirtualScroll(this.editor)) {
+            return;
+        }
+        const heights = ELEMENT_KEY_TO_HEIGHTS.get(this.editor);
+        const key = AngularEditor.findKey(this.editor, this.element);
+        heights.set(key.id, height);
+    }
+    setImageMinHeight() {
+        if (!AngularEditor.isEnabledVirtualScroll(this.editor)) {
+            return;
+        }
+        const heights = ELEMENT_KEY_TO_HEIGHTS.get(this.editor);
+        const key = AngularEditor.findKey(this.editor, this.element);
+        if (heights && heights.get(key.id)) {
+            const blockCard = getBlockCardByNativeElement(this.nativeElement);
+            if (blockCard) {
+                const style = getComputedStyle(blockCard);
+                blockCard.style.minHeight = heights.get(key.id) - parseFloat(style.marginTop) - parseFloat(style.marginBottom) + 'px';
+            }
+        }
+    }
+    clearMinHeight() {
+        if (!AngularEditor.isEnabledVirtualScroll(this.editor)) {
+            return;
+        }
+        const blockCard = getBlockCardByNativeElement(this.nativeElement);
+        if (blockCard) {
+            blockCard.style.minHeight = '';
+        }
+    }
     setImagePluginOptions() {
         this.imagePluginOptions = getPluginOptions(this.editor, PluginKeys.image);
     }
@@ -14484,6 +14554,7 @@ class TheImage extends TheBaseElement {
                 width: this.imageEntry.width,
                 height: this.imageEntry.height
             }, { at: this.selection });
+            this.cacheImageHeight(this.getRealHeight());
         }
     }
     cancelUpload() {
@@ -14568,14 +14639,15 @@ class TheImage extends TheBaseElement {
             .withPositions([bottomPosition]);
     }
     imageLoaded(event) {
+        this.clearMinHeight();
         const img = event.target;
         this.naturalWidth = img.naturalWidth;
         this.naturalHeight = img.naturalHeight;
-        setTimeout(() => {
-            const blockCard = getBlockCardByNativeElement(this.nativeElement);
-            const style = getComputedStyle(blockCard);
-            this.resolveImageHeight?.(blockCard.offsetHeight + parseFloat(style.paddingTop) + parseFloat(style.paddingBottom));
-        }, 0);
+        if (AngularEditor.isEnabledVirtualScroll(this.editor)) {
+            this.imageLoadedCacheHeightTimer = setTimeout(() => {
+                this.cacheImageHeight(this.getRealHeight());
+            }, 0);
+        }
     }
     imageError(event) {
         const img = event.target;
@@ -14622,11 +14694,6 @@ class TheImage extends TheBaseElement {
             });
         }
     }
-    getRealHeight() {
-        return new Promise(resolve => {
-            this.resolveImageHeight = resolve;
-        });
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheImage, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.ThyImageGroup }, { token: THE_IMAGE_SERVICE_TOKEN }, { token: TheContextService }, { token: i1.ThyPopover }, { token: i2.Overlay }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: TheImage, isStandalone: true, selector: "the-image, [theImage]", providers: [ThyImageService], viewQueries: [{ propertyName: "imageContent", first: true, predicate: ["imageContent"], descendants: true }, { propertyName: "img", first: true, predicate: ["img"], descendants: true }, { propertyName: "layoutToolbar", first: true, predicate: ["layoutToolbar"], descendants: true, static: true }, { propertyName: "imageDirective", first: true, predicate: ThyImageDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"the-image-container\" contenteditable=\"false\" [style.textAlign]=\"imageEntry.align\">\n  @if (imageEntry.thumbUrl) {\n    <div #imageContent class=\"image-content\" contenteditable=\"false\" [class.cursor-pointer]=\"!selection\">\n      <img\n        #img\n        thyImage\n        class=\"main-image\"\n        [class.image-collapsed]=\"selection && !uploading\"\n        [ngStyle]=\"{ 'width.px': imageBindingWidth }\"\n        [alt]=\"imageEntry.name\"\n        [thySrc]=\"imageEntry.thumbUrl\"\n        [thyPreviewSrc]=\"imageEntry.thumbUrl\"\n        [thyOriginSrc]=\"imageEntry.originUrl\"\n        [thyDisablePreview]=\"disablePreview\"\n        [thyImageMeta]=\"{ name: imageEntry.name, size: imageEntry.size }\"\n        (load)=\"imageLoaded($event)\"\n        (mousedown)=\"preventDefault($event)\"\n        (error)=\"imageError($event)\"\n        (click)=\"imageClick($event)\"\n      />\n      @if (isCollapsedAndNonReadonly) {\n        <div class=\"image-profile\" [class.outline]=\"selection\">\n          @if (!loadImageError) {\n            <span (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left top\"></span>\n            <span (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right top\"></span>\n            <span (mousedown)=\"startDrag($event, 'xl')\" class=\"image-pointer right bottom\"></span>\n            <span (mousedown)=\"startDrag($event, '-xl')\" class=\"image-pointer left bottom\"></span>\n          }\n        </div>\n      }\n      <ng-template [ngTemplateOutlet]=\"imageUploading\"></ng-template>\n      @if (!uploading) {\n        <div class=\"layer\" [class.readonly]=\"readonly\"></div>\n      }\n    </div>\n  } @else {\n    @if (!imageEntry.thumbUrl) {\n      <div class=\"image-loading cursor-pointer\" contenteditable=\"false\">\n        <thy-icon thyIconName=\"image\"></thy-icon>\n      </div>\n    }\n    <ng-template [ngTemplateOutlet]=\"imageUploading\"></ng-template>\n  }\n</div>\n\n<ng-template #layoutToolbar>\n  <thy-actions thySize=\"xxs\">\n    @for (item of layoutOptions; track $index) {\n      @if (item.key !== 'split') {\n        <a\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      }\n      @if (item.key === 'split') {\n        <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n      }\n    }\n  </thy-actions>\n</ng-template>\n\n<ng-template #imageUploading>\n  @if (uploading) {\n    <div 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  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: ThyImageDirective, selector: "img[thyImage]", inputs: ["thySrc", "thyPreviewSrc", "thyOriginSrc", "thyImageMeta", "thyDisablePreview", "thyResolveSize"], exportAs: ["thyImage"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "component", type: ThyActions, selector: "thy-actions", inputs: ["thySize"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyProgress, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips", "thyShape", "thyGapDegree", "thyGapPosition", "thyStrokeWidth"] }] }); }
 }
@@ -18206,12 +18273,12 @@ class TheEditorComponent {
         this.theUploadingStatus = new EventEmitter(); // true 上传结束 false 上传中
         this.visibleQuickInsertPlus = true;
         this.elementToHtml = new WeakMap();
-        this.virtualConfig = signal({
+        this.virtualScrollConfig = signal({
             enabled: false,
             scrollTop: 0,
             viewportHeight: 0,
             bufferCount: 5
-        }, ...(ngDevMode ? [{ debugName: "virtualConfig" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "virtualScrollConfig" }] : []));
         this.onChangeCallback = () => { };
         this.onTouchedCallback = () => { };
         this.locale = injectTranslations(inject(TheI18nService));
@@ -18261,9 +18328,6 @@ class TheEditorComponent {
                 event.preventDefault();
                 return;
             }
-            if (isKeyHotkey('mod+a', event) && !event.defaultPrevented) {
-                this.handleSelectAll(event);
-            }
         };
         this.onClick = (event) => {
             AngularEditor.onClick(this.editor, event);
@@ -18305,7 +18369,7 @@ class TheEditorComponent {
         initializeDefaultMenuIcons(this.iconRegistry);
     }
     ngAfterViewInit() {
-        this.bindVirtualScrollContainer();
+        this.listenScrollEvent();
     }
     ngOnChanges(changes) {
         const options = changes.theOptions;
@@ -18326,25 +18390,22 @@ class TheEditorComponent {
         }
     }
     ngOnDestroy() {
-        this.scrollContainerResizeObserver?.disconnect();
         THE_EDITOR_PREVIOUS_SELECTION.delete(this.editor);
     }
-    bindVirtualScrollContainer() {
+    listenScrollEvent() {
+        if (!this.virtualScrollConfig().enabled) {
+            return;
+        }
         const scrollContainer = this.theContextService.getScrollContainer();
         if (!scrollContainer) {
             return;
         }
-        this.scrollContainerElement = scrollContainer;
-        this.scrollContainerResizeObserver = new ResizeObserver(() => {
-            this.syncVirtualConfig();
-        });
-        this.scrollContainerResizeObserver.observe(scrollContainer);
         this.ngZone.runOutsideAngular(() => {
             fromEvent(scrollContainer, 'scroll')
                 .pipe(takeUntilDestroyed(this.destroyRef))
                 .subscribe(() => {
                 if (!JUST_NOW_UPDATED_VIRTUAL_VIEW.get(this.editor)) {
-                    this.syncVirtualConfig();
+                    this.updateVirtualConfig();
                 }
                 else {
                     if (localStorage.getItem(SLATE_DEBUG_KEY)) {
@@ -18353,26 +18414,26 @@ class TheEditorComponent {
                     JUST_NOW_UPDATED_VIRTUAL_VIEW.set(this.editor, false);
                 }
             });
+            this.updateVirtualConfig();
         });
-        this.syncVirtualConfig();
     }
-    syncVirtualConfig() {
-        if (!this.virtualConfig().enabled || !this.scrollContainerElement) {
+    updateVirtualConfig() {
+        const scrollContainer = this.theContextService.getScrollContainer();
+        if (!this.virtualScrollConfig().enabled || !scrollContainer) {
             return;
         }
-        const { scrollTop, clientHeight } = this.scrollContainerElement;
-        console.log('scrollTop', scrollTop);
-        if (localStorage.getItem(SLATE_DEBUG_KEY)) {
+        const { scrollTop, offsetHeight } = scrollContainer;
+        if (localStorage.getItem(SLATE_DEBUG_KEY + '__SCROLL_TOP')) {
             console.log(`theia: scroll event fired from user: ${scrollTop}`);
         }
-        this.virtualConfig.update(config => ({
+        this.virtualScrollConfig.update(config => ({
             ...config,
             scrollTop,
-            viewportHeight: clientHeight
+            viewportHeight: offsetHeight
         }));
     }
     initialize() {
-        this.virtualConfig.update(config => ({
+        this.virtualScrollConfig.update(config => ({
             ...config,
             enabled: this.theOptions?.enableVirtualScroll
         }));
@@ -18570,42 +18631,12 @@ class TheEditorComponent {
     mousedown(event) {
         this.editor.mousedown(event);
     }
-    handleSelectAll(event) {
-        let node = null;
-        if (!this.editor.selection) {
-            setEndSelection(this.editor);
-        }
-        const [start, end] = Range.edges(this.editor.selection);
-        const selectionRange = Editor.range(this.editor, start, end);
-        const containerBlocks = getContainerBlocks(this.editor);
-        for (let i = 0; i < containerBlocks.length; i++) {
-            [node] = getNodesByType(this.editor, containerBlocks[i]);
-            if (node) {
-                const [, path] = node;
-                const isStartParent = Path.equals(path, start.path.slice(0, path.length));
-                const isEndParent = Path.equals(path, end.path.slice(0, path.length));
-                if (isStartParent && isEndParent) {
-                    const nodeRange = Editor.range(this.editor, path);
-                    if (!Range.equals(nodeRange, selectionRange)) {
-                        Transforms.select(this.editor, nodeRange);
-                        break;
-                    }
-                    node = null;
-                }
-            }
-        }
-        if (!node) {
-            Transforms.select(this.editor, []);
-        }
-        event.preventDefault();
-        return;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheEditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.DestroyRef }, { token: i0.ElementRef }, { token: i0.Injector }, { token: i0.NgZone }, { token: i0.ViewContainerRef }, { token: TheContextService }, { token: i2$5.ThyIconRegistry }, { token: THE_PRESET_CONFIG_TOKEN, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: TheEditorComponent, isStandalone: true, selector: "the-editor, theEditor", inputs: { theOptions: "theOptions", thePlugins: "thePlugins", theGlobalToolbar: "theGlobalToolbar", theDecorate: "theDecorate", theOnError: "theOnError" }, outputs: { theOnSave: "theOnSave", theOnDOMEvent: "theOnDOMEvent", theEditorCreated: "theEditorCreated", theUploadingStatus: "theUploadingStatus" }, host: { properties: { "class.the-editor-readonly": "editor.options?.readonly", "class.the-mobile-editor": "isMobileMode" }, classAttribute: "the-editor" }, providers: [
             TheContextService,
             { provide: TheToolbarGroupToken, useValue: TheToolbarGroup },
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TheEditorComponent), multi: true }
-        ], viewQueries: [{ propertyName: "theEditableContainer", first: true, predicate: ["theEditableContainer"], descendants: true, read: ElementRef, static: true }, { propertyName: "globalToolbarInstance", first: true, predicate: ["globalToolbar"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (!options?.readonly && !theGlobalToolbar && !isMobileMode) {\n  <the-toolbar\n    [ngClass]=\"{\n      'the-toolbar-disabled': options?.disabled\n    }\"\n    #globalToolbar\n    [editor]=\"editor\"\n    [toolbarItems]=\"toolbarEntity.global\"\n    [containerClass]=\"globalToolbarClass\"\n    [align]=\"options?.toolbar?.align\"\n  ></the-toolbar>\n}\n\n<div\n  #theEditableContainer\n  class=\"the-editable-container\"\n  thyImageGroup\n  [ngClass]=\"{\n    'the-editor-disabled': options?.disabled,\n    'max-height': maxHeight\n  }\"\n  [ngStyle]=\"{ 'max-height': maxHeight }\"\n>\n  <slate-editable\n    class=\"the-editor-typo\"\n    [editor]=\"editor\"\n    [ngModel]=\"editorValue\"\n    [renderElement]=\"renderElement\"\n    [renderText]=\"renderText\"\n    [renderLeaf]=\"renderLeaf\"\n    [isStrictDecorate]=\"false\"\n    [decorate]=\"decorate\"\n    [placeholder]=\"options?.placeholder\"\n    [placeholderDecorate]=\"options?.placeholderDecorate ? options?.placeholderDecorate : null\"\n    [readonly]=\"options?.readonly || options?.disabled\"\n    [keydown]=\"onKeyDown\"\n    [click]=\"onClick\"\n    [paste]=\"onSlaPaste\"\n    [blur]=\"onSlaBlur\"\n    [focus]=\"onSlaFocus\"\n    [copy]=\"onSlaCopy\"\n    [cut]=\"onSlaCut\"\n    [beforeInput]=\"onSlaBeforeInput\"\n    [compositionStart]=\"onSlaCompositionStart\"\n    [compositionEnd]=\"onSlaCompositionEnd\"\n    [dragStart]=\"onSlaDragStart\"\n    [dragOver]=\"onSlaDragOver\"\n    [drop]=\"onDrop\"\n    [scrollSelectionIntoView]=\"scrollSelectionIntoView\"\n    [virtualScroll]=\"virtualConfig()\"\n    (ngModelChange)=\"valueChange($event)\"\n    (mousedown)=\"mousedown($event)\"\n  ></slate-editable>\n\n  @if (!isMobileMode) {\n    @if (!options?.readonly && options?.inlineToolbarVisible) {\n      <the-inline-toolbar [editor]=\"editor\" [toolbarItems]=\"toolbarEntity.inline\"></the-inline-toolbar>\n    }\n    @if (!options?.readonly) {\n      <div theQuickInsert [editor]=\"editor\" [isVisible]=\"visibleQuickInsertPlus\"></div>\n    }\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SlateModule }, { kind: "component", type: i4.SlateEditable, selector: "slate-editable", inputs: ["editor", "renderElement", "renderLeaf", "renderText", "decorate", "placeholderDecorate", "scrollSelectionIntoView", "isStrictDecorate", "trackBy", "readonly", "placeholder", "virtualScroll", "beforeInput", "blur", "click", "compositionEnd", "compositionUpdate", "compositionStart", "copy", "cut", "dragOver", "dragStart", "dragEnd", "drop", "focus", "keydown", "paste", "spellCheck", "autoCorrect", "autoCapitalize"] }, { kind: "component", type: TheQuickInsert, selector: "[theQuickInsert]", inputs: ["editor", "isVisible"] }, { kind: "component", type: TheInlineToolbar, selector: "the-inline-toolbar", inputs: ["editor", "toolbarItems"] }, { kind: "component", type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }, { kind: "component", type: ThyImageGroup, selector: "thy-image-group, [thyImageGroup]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "theEditableContainer", first: true, predicate: ["theEditableContainer"], descendants: true, read: ElementRef, static: true }, { propertyName: "globalToolbarInstance", first: true, predicate: ["globalToolbar"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (!options?.readonly && !theGlobalToolbar && !isMobileMode) {\n  <the-toolbar\n    [ngClass]=\"{\n      'the-toolbar-disabled': options?.disabled\n    }\"\n    #globalToolbar\n    [editor]=\"editor\"\n    [toolbarItems]=\"toolbarEntity.global\"\n    [containerClass]=\"globalToolbarClass\"\n    [align]=\"options?.toolbar?.align\"\n  ></the-toolbar>\n}\n\n<div\n  #theEditableContainer\n  class=\"the-editable-container\"\n  thyImageGroup\n  [ngClass]=\"{\n    'the-editor-disabled': options?.disabled,\n    'max-height': maxHeight\n  }\"\n  [ngStyle]=\"{ 'max-height': maxHeight }\"\n>\n  <slate-editable\n    class=\"the-editor-typo\"\n    [editor]=\"editor\"\n    [ngModel]=\"editorValue\"\n    [renderElement]=\"renderElement\"\n    [renderText]=\"renderText\"\n    [renderLeaf]=\"renderLeaf\"\n    [isStrictDecorate]=\"false\"\n    [decorate]=\"decorate\"\n    [placeholder]=\"options?.placeholder\"\n    [placeholderDecorate]=\"options?.placeholderDecorate ? options?.placeholderDecorate : null\"\n    [readonly]=\"options?.readonly || options?.disabled\"\n    [keydown]=\"onKeyDown\"\n    [click]=\"onClick\"\n    [paste]=\"onSlaPaste\"\n    [blur]=\"onSlaBlur\"\n    [focus]=\"onSlaFocus\"\n    [copy]=\"onSlaCopy\"\n    [cut]=\"onSlaCut\"\n    [beforeInput]=\"onSlaBeforeInput\"\n    [compositionStart]=\"onSlaCompositionStart\"\n    [compositionEnd]=\"onSlaCompositionEnd\"\n    [dragStart]=\"onSlaDragStart\"\n    [dragOver]=\"onSlaDragOver\"\n    [drop]=\"onDrop\"\n    [scrollSelectionIntoView]=\"scrollSelectionIntoView\"\n    [virtualScroll]=\"virtualScrollConfig()\"\n    (ngModelChange)=\"valueChange($event)\"\n    (mousedown)=\"mousedown($event)\"\n  ></slate-editable>\n\n  @if (!isMobileMode) {\n    @if (!options?.readonly && options?.inlineToolbarVisible) {\n      <the-inline-toolbar [editor]=\"editor\" [toolbarItems]=\"toolbarEntity.inline\"></the-inline-toolbar>\n    }\n    @if (!options?.readonly) {\n      <div theQuickInsert [editor]=\"editor\" [isVisible]=\"visibleQuickInsertPlus\"></div>\n    }\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SlateModule }, { kind: "component", type: i4.SlateEditable, selector: "slate-editable", inputs: ["editor", "renderElement", "renderLeaf", "renderText", "decorate", "placeholderDecorate", "scrollSelectionIntoView", "isStrictDecorate", "trackBy", "readonly", "placeholder", "virtualScroll", "beforeInput", "blur", "click", "compositionEnd", "compositionUpdate", "compositionStart", "copy", "cut", "dragOver", "dragStart", "dragEnd", "drop", "focus", "keydown", "paste", "spellCheck", "autoCorrect", "autoCapitalize"] }, { kind: "component", type: TheQuickInsert, selector: "[theQuickInsert]", inputs: ["editor", "isVisible"] }, { kind: "component", type: TheInlineToolbar, selector: "the-inline-toolbar", inputs: ["editor", "toolbarItems"] }, { kind: "component", type: TheToolbarComponent, selector: "the-toolbar", inputs: ["editor", "toolbarItems", "align", "containerClass", "isMore", "afterTemplate"] }, { kind: "component", type: ThyImageGroup, selector: "thy-image-group, [thyImageGroup]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheEditorComponent, decorators: [{
             type: Component,
@@ -18613,7 +18644,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                         TheContextService,
                         { provide: TheToolbarGroupToken, useValue: TheToolbarGroup },
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => TheEditorComponent), multi: true }
-                    ], template: "@if (!options?.readonly && !theGlobalToolbar && !isMobileMode) {\n  <the-toolbar\n    [ngClass]=\"{\n      'the-toolbar-disabled': options?.disabled\n    }\"\n    #globalToolbar\n    [editor]=\"editor\"\n    [toolbarItems]=\"toolbarEntity.global\"\n    [containerClass]=\"globalToolbarClass\"\n    [align]=\"options?.toolbar?.align\"\n  ></the-toolbar>\n}\n\n<div\n  #theEditableContainer\n  class=\"the-editable-container\"\n  thyImageGroup\n  [ngClass]=\"{\n    'the-editor-disabled': options?.disabled,\n    'max-height': maxHeight\n  }\"\n  [ngStyle]=\"{ 'max-height': maxHeight }\"\n>\n  <slate-editable\n    class=\"the-editor-typo\"\n    [editor]=\"editor\"\n    [ngModel]=\"editorValue\"\n    [renderElement]=\"renderElement\"\n    [renderText]=\"renderText\"\n    [renderLeaf]=\"renderLeaf\"\n    [isStrictDecorate]=\"false\"\n    [decorate]=\"decorate\"\n    [placeholder]=\"options?.placeholder\"\n    [placeholderDecorate]=\"options?.placeholderDecorate ? options?.placeholderDecorate : null\"\n    [readonly]=\"options?.readonly || options?.disabled\"\n    [keydown]=\"onKeyDown\"\n    [click]=\"onClick\"\n    [paste]=\"onSlaPaste\"\n    [blur]=\"onSlaBlur\"\n    [focus]=\"onSlaFocus\"\n    [copy]=\"onSlaCopy\"\n    [cut]=\"onSlaCut\"\n    [beforeInput]=\"onSlaBeforeInput\"\n    [compositionStart]=\"onSlaCompositionStart\"\n    [compositionEnd]=\"onSlaCompositionEnd\"\n    [dragStart]=\"onSlaDragStart\"\n    [dragOver]=\"onSlaDragOver\"\n    [drop]=\"onDrop\"\n    [scrollSelectionIntoView]=\"scrollSelectionIntoView\"\n    [virtualScroll]=\"virtualConfig()\"\n    (ngModelChange)=\"valueChange($event)\"\n    (mousedown)=\"mousedown($event)\"\n  ></slate-editable>\n\n  @if (!isMobileMode) {\n    @if (!options?.readonly && options?.inlineToolbarVisible) {\n      <the-inline-toolbar [editor]=\"editor\" [toolbarItems]=\"toolbarEntity.inline\"></the-inline-toolbar>\n    }\n    @if (!options?.readonly) {\n      <div theQuickInsert [editor]=\"editor\" [isVisible]=\"visibleQuickInsertPlus\"></div>\n    }\n  }\n</div>\n" }]
+                    ], template: "@if (!options?.readonly && !theGlobalToolbar && !isMobileMode) {\n  <the-toolbar\n    [ngClass]=\"{\n      'the-toolbar-disabled': options?.disabled\n    }\"\n    #globalToolbar\n    [editor]=\"editor\"\n    [toolbarItems]=\"toolbarEntity.global\"\n    [containerClass]=\"globalToolbarClass\"\n    [align]=\"options?.toolbar?.align\"\n  ></the-toolbar>\n}\n\n<div\n  #theEditableContainer\n  class=\"the-editable-container\"\n  thyImageGroup\n  [ngClass]=\"{\n    'the-editor-disabled': options?.disabled,\n    'max-height': maxHeight\n  }\"\n  [ngStyle]=\"{ 'max-height': maxHeight }\"\n>\n  <slate-editable\n    class=\"the-editor-typo\"\n    [editor]=\"editor\"\n    [ngModel]=\"editorValue\"\n    [renderElement]=\"renderElement\"\n    [renderText]=\"renderText\"\n    [renderLeaf]=\"renderLeaf\"\n    [isStrictDecorate]=\"false\"\n    [decorate]=\"decorate\"\n    [placeholder]=\"options?.placeholder\"\n    [placeholderDecorate]=\"options?.placeholderDecorate ? options?.placeholderDecorate : null\"\n    [readonly]=\"options?.readonly || options?.disabled\"\n    [keydown]=\"onKeyDown\"\n    [click]=\"onClick\"\n    [paste]=\"onSlaPaste\"\n    [blur]=\"onSlaBlur\"\n    [focus]=\"onSlaFocus\"\n    [copy]=\"onSlaCopy\"\n    [cut]=\"onSlaCut\"\n    [beforeInput]=\"onSlaBeforeInput\"\n    [compositionStart]=\"onSlaCompositionStart\"\n    [compositionEnd]=\"onSlaCompositionEnd\"\n    [dragStart]=\"onSlaDragStart\"\n    [dragOver]=\"onSlaDragOver\"\n    [drop]=\"onDrop\"\n    [scrollSelectionIntoView]=\"scrollSelectionIntoView\"\n    [virtualScroll]=\"virtualScrollConfig()\"\n    (ngModelChange)=\"valueChange($event)\"\n    (mousedown)=\"mousedown($event)\"\n  ></slate-editable>\n\n  @if (!isMobileMode) {\n    @if (!options?.readonly && options?.inlineToolbarVisible) {\n      <the-inline-toolbar [editor]=\"editor\" [toolbarItems]=\"toolbarEntity.inline\"></the-inline-toolbar>\n    }\n    @if (!options?.readonly) {\n      <div theQuickInsert [editor]=\"editor\" [isVisible]=\"visibleQuickInsertPlus\"></div>\n    }\n  }\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.DestroyRef }, { type: i0.ElementRef }, { type: i0.Injector }, { type: i0.NgZone }, { type: i0.ViewContainerRef }, { type: TheContextService }, { type: i2$5.ThyIconRegistry }, { type: undefined, decorators: [{
                     type: Optional
                 }, {