@worktile/theia 20.1.0-next.13 → 20.1.0-next.15

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, EDITOR_TO_VIRTUAL_SCROLL_SELECTION, BaseElementFlavour, hasBlockCard, isCardLeft, ELEMENT_KEY_TO_HEIGHTS, DefaultTextFlavour, defaultScrollSelectionIntoView, getDataTransferClipboard, 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, getRealHeightByElement, DefaultTextFlavour, defaultScrollSelectionIntoView, getDataTransferClipboard, 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';
@@ -7091,7 +7091,7 @@ class TheCode extends TheBaseElement {
         this.destroy$ = new Subject();
         this.isHightLight = false;
         this.resizeHeight = null;
-        this.options = {
+        this.options = signal({
             mode: DEFAULT_LANGUAGE.value,
             lineNumbers: false,
             readonly: false,
@@ -7099,7 +7099,7 @@ class TheCode extends TheBaseElement {
             lineWiseCopyCut: true,
             lineWrapping: false,
             cursorBlinkRate: 500
-        };
+        }, ...(ngDevMode ? [{ debugName: "options" }] : []));
         this.resizeBounds = null;
         this.isDelayRender = signal(false, ...(ngDevMode ? [{ debugName: "isDelayRender" }] : []));
         this.thyNotifyService = inject(ThyNotifyService);
@@ -7108,7 +7108,7 @@ class TheCode extends TheBaseElement {
         this.thyPopover = inject(ThyPopover);
         this.overlay = inject(Overlay);
         this.onChangeLanguage = item => {
-            this.options = { ...this.options, mode: item.key };
+            this.options.set({ ...this.options(), mode: item.key });
             this.activeLanguage = item;
             CodeEditor.setCodeAttribute(this.editor, { language: item.key }, this.element);
         };
@@ -7128,13 +7128,13 @@ class TheCode extends TheBaseElement {
             this.closeToolbar();
         }
         if (this.initialized) {
-            if (this.options.readonly !== this.readonly) {
+            if (this.options().readonly !== this.readonly) {
                 this.useReadonly();
             }
-            if (this.options.mode !== this.element.language) {
+            if (this.options().mode !== this.element.language) {
                 this.useMode();
             }
-            if (this.options.lineWrapping !== this.element.autoWrap) {
+            if (this.options().lineWrapping !== this.element.autoWrap) {
                 this.useAutoWrap();
             }
             if (this.resizeHeight !== this.element.height) {
@@ -7171,9 +7171,13 @@ class TheCode extends TheBaseElement {
         }
     }
     ngAfterViewInit() {
-        if (this.isCollapsedAndNonReadonly) {
-            this.useAutofocus();
-        }
+        this.codemirror.view.requestMeasure({
+            read: view => {
+                if (this.isCollapsedAndNonReadonly) {
+                    this.useAutofocus();
+                }
+            }
+        });
     }
     initMaxHeight() {
         this.maxHeight = isPrintMode(this.editor) ? 0 : 350 - CODEMIRROR_PADDING_TOP * 2;
@@ -7226,7 +7230,7 @@ class TheCode extends TheBaseElement {
         }
     }
     useMode() {
-        this.options = { ...this.options, mode: this.element.language };
+        this.options.set({ ...this.options(), mode: this.element.language });
         const menuItem = this.menus.find(i => i.key === this.element.language);
         if (menuItem) {
             this.activeLanguage = menuItem;
@@ -7235,7 +7239,7 @@ class TheCode extends TheBaseElement {
     useAutoWrap() {
         const isPrint = isPrintMode(this.editor);
         const lineWrapping = isPrint ? true : this.element.autoWrap || false;
-        this.options = { ...this.options, lineWrapping };
+        this.options.set({ ...this.options(), lineWrapping });
     }
     useHeight() {
         if (this.element.height && !isPrintMode(this.editor)) {
@@ -7244,10 +7248,10 @@ class TheCode extends TheBaseElement {
         }
     }
     useReadonly() {
-        this.options = { ...this.options, readonly: this.readonly, cursorBlinkRate: this.readonly ? -1 : 500 };
+        this.options.set({ ...this.options(), readonly: this.readonly, cursorBlinkRate: this.readonly ? -1 : 500 });
     }
     useAutofocus() {
-        this.options = { ...this.options, autofocus: true };
+        this.options.set({ ...this.options(), autofocus: true });
     }
     onResize({ height }) {
         this.resizeHeight = height;
@@ -7259,7 +7263,7 @@ class TheCode extends TheBaseElement {
     }
     onChangeWrap(value) {
         this.isHightLight = false;
-        this.options = { ...this.options, lineWrapping: value || false };
+        this.options.set({ ...this.options(), lineWrapping: value || false });
         CodeEditor.setCodeAttribute(this.editor, { autoWrap: value ? value : null }, this.element);
     }
     ngOnDestroy() {
@@ -7267,7 +7271,7 @@ class TheCode extends TheBaseElement {
         this.destroy$.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheCode, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: TheCode, isStandalone: true, selector: "div[theCode]", host: { classAttribute: "the-code-container" }, viewQueries: [{ propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true, read: TemplateRef, static: true }, { propertyName: "codemirror", first: true, predicate: ["codemirror"], descendants: true, read: CodeMirrorComponent }, { propertyName: "toolbarDropdown", first: true, predicate: TheToolbarDropdown, descendants: true, read: TheToolbarDropdown }], usesInheritance: true, ngImport: i0, template: "<!-- \u53EA\u8BFB\u6A21\u5F0F\u4E0BCodeMirror-sizer\u9AD8\u5EA6\u6BD4\u7F16\u8F91\u6A21\u5F0F\u4E0B\u591A2px\uFF0C\u8BBE\u7F6EthyMinHeight\u4E3A46px\u9632\u6B62\u62D6\u62FD\u5230\u6700\u5C0F\u9AD8\u5EA6\u65F6\u53EA\u8BFB\u6A21\u5F0F\u4E0B\u51FA\u73B0\u6EDA\u52A8\u6761  -->\n<div\n  thyResizable\n  [thyMinHeight]=\"46\"\n  [thyBounds]=\"resizeBounds\"\n  [style.height.px]=\"resizeHeight\"\n  (thyResize)=\"onResize($event)\"\n  (thyResizeEnd)=\"onEndResize()\"\n  class=\"resize-code-container\"\n  [ngClass]=\"{ focus: isCollapsedAndNonReadonly, readonly: options.readonly, active: isHightLight && isCollapsedAndNonReadonly }\"\n>\n  <ng-codemirror\n    #codemirror\n    [isDelayRender]=\"isDelayRender()\"\n    contenteditable=\"false\"\n    class=\"ng-codemirror-wrapper\"\n    [ngStyle]=\"{ maxHeight: maxHeight > 0 ? maxHeight + 'px' : 'auto' }\"\n    [options]=\"options\"\n    [ngModel]=\"code\"\n    (ngModelChange)=\"codeChange($event)\"\n    (focusChange)=\"focusChange($event)\"\n  >\n  </ng-codemirror>\n  @if (isCollapsedAndNonReadonly) {\n    <thy-resize-handle thyDirection=\"bottom\" class=\"code-resize-icon\"></thy-resize-handle>\n  }\n</div>\n\n<ng-template #toolbar>\n  <thy-actions thySize=\"xxs\" thePreventDefault>\n    <the-toolbar-dropdown\n      [menus]=\"menus\"\n      [toolbarItem]=\"activeLanguage\"\n      [dropdownItemKey]=\"activeLanguage?.key\"\n      [itemMousedownHandle]=\"onChangeLanguage\"\n    >\n    </the-toolbar-dropdown>\n    <span class=\"auto-wrap d-flex align-items-center px-2 text-secondary\">\n      <span>{{ locale().autoWrap }}</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\n      href=\"javascript:;\"\n      thyAction\n      thyActionIcon=\"copy\"\n      [thyTooltip]=\"locale().copy\"\n      thyTooltipPlacement=\"top\"\n      (click)=\"onCopy($event)\"\n    ></a>\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    <a\n      href=\"javascript:;\"\n      thyAction\n      thyType=\"danger\"\n      thyActionIcon=\"trash\"\n      [thyTooltip]=\"locale().delete\"\n      thyTooltipPlacement=\"top\"\n      (click)=\"onDelete($event)\"\n    ></a>\n  </thy-actions>\n</ng-template>\n", dependencies: [{ kind: "directive", type: ThyResizableDirective, selector: "[thyResizable]", inputs: ["thyBounds", "thyMaxHeight", "thyMaxWidth", "thyMinHeight", "thyMinWidth", "thyGridColumnCount", "thyMaxColumn", "thyMinColumn", "thyLockAspectRatio", "thyPreview", "thyDisabled"], outputs: ["thyResize", "thyResizeStart", "thyResizeEnd"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SlateModule }, { kind: "ngmodule", type: CodemirrorModule }, { kind: "component", type: i2$2.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["options", "extensions", "languages", "isDelayRender"], outputs: ["focusChange"] }, { kind: "component", type: ThySwitch, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled", "thyLoading"], outputs: ["thyChange"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "component", type: ThyActions, selector: "thy-actions", inputs: ["thySize"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyResizeHandle, selector: "thy-resize-handle, [thy-resize-handle]", inputs: ["thyDirection", "thyLine"], outputs: ["thyMouseDown"], exportAs: ["thyResizeHandle"] }, { kind: "component", type: TheToolbarDropdown, selector: "the-toolbar-dropdown" }, { kind: "directive", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", exportAs: ["thePreventDefault"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: TheCode, isStandalone: true, selector: "div[theCode]", host: { classAttribute: "the-code-container" }, viewQueries: [{ propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true, read: TemplateRef, static: true }, { propertyName: "codemirror", first: true, predicate: ["codemirror"], descendants: true, read: CodeMirrorComponent }, { propertyName: "toolbarDropdown", first: true, predicate: TheToolbarDropdown, descendants: true, read: TheToolbarDropdown }], usesInheritance: true, ngImport: i0, template: "<!-- \u53EA\u8BFB\u6A21\u5F0F\u4E0BCodeMirror-sizer\u9AD8\u5EA6\u6BD4\u7F16\u8F91\u6A21\u5F0F\u4E0B\u591A2px\uFF0C\u8BBE\u7F6EthyMinHeight\u4E3A46px\u9632\u6B62\u62D6\u62FD\u5230\u6700\u5C0F\u9AD8\u5EA6\u65F6\u53EA\u8BFB\u6A21\u5F0F\u4E0B\u51FA\u73B0\u6EDA\u52A8\u6761  -->\n<div\n  thyResizable\n  [thyMinHeight]=\"46\"\n  [thyBounds]=\"resizeBounds\"\n  [style.height.px]=\"resizeHeight\"\n  (thyResize)=\"onResize($event)\"\n  (thyResizeEnd)=\"onEndResize()\"\n  class=\"resize-code-container\"\n  [ngClass]=\"{ focus: isCollapsedAndNonReadonly, readonly: options().readonly, active: isHightLight && isCollapsedAndNonReadonly }\"\n>\n  <ng-codemirror\n    #codemirror\n    [isDelayRender]=\"isDelayRender()\"\n    contenteditable=\"false\"\n    class=\"ng-codemirror-wrapper\"\n    [ngStyle]=\"{ maxHeight: maxHeight > 0 ? maxHeight + 'px' : 'auto' }\"\n    [options]=\"options()\"\n    [ngModel]=\"code\"\n    (ngModelChange)=\"codeChange($event)\"\n    (focusChange)=\"focusChange($event)\"\n  >\n  </ng-codemirror>\n  @if (isCollapsedAndNonReadonly) {\n    <thy-resize-handle thyDirection=\"bottom\" class=\"code-resize-icon\"></thy-resize-handle>\n  }\n</div>\n\n<ng-template #toolbar>\n  <thy-actions thySize=\"xxs\" thePreventDefault>\n    <the-toolbar-dropdown\n      [menus]=\"menus\"\n      [toolbarItem]=\"activeLanguage\"\n      [dropdownItemKey]=\"activeLanguage?.key\"\n      [itemMousedownHandle]=\"onChangeLanguage\"\n    >\n    </the-toolbar-dropdown>\n    <span class=\"auto-wrap d-flex align-items-center px-2 text-secondary\">\n      <span>{{ locale().autoWrap }}</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\n      href=\"javascript:;\"\n      thyAction\n      thyActionIcon=\"copy\"\n      [thyTooltip]=\"locale().copy\"\n      thyTooltipPlacement=\"top\"\n      (click)=\"onCopy($event)\"\n    ></a>\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    <a\n      href=\"javascript:;\"\n      thyAction\n      thyType=\"danger\"\n      thyActionIcon=\"trash\"\n      [thyTooltip]=\"locale().delete\"\n      thyTooltipPlacement=\"top\"\n      (click)=\"onDelete($event)\"\n    ></a>\n  </thy-actions>\n</ng-template>\n", dependencies: [{ kind: "directive", type: ThyResizableDirective, selector: "[thyResizable]", inputs: ["thyBounds", "thyMaxHeight", "thyMaxWidth", "thyMinHeight", "thyMinWidth", "thyGridColumnCount", "thyMaxColumn", "thyMinColumn", "thyLockAspectRatio", "thyPreview", "thyDisabled"], outputs: ["thyResize", "thyResizeStart", "thyResizeEnd"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SlateModule }, { kind: "ngmodule", type: CodemirrorModule }, { kind: "component", type: i2$2.CodeMirrorComponent, selector: "ng-codemirror, [ngCodeMirror]", inputs: ["options", "extensions", "languages", "isDelayRender"], outputs: ["focusChange"] }, { kind: "component", type: ThySwitch, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled", "thyLoading"], outputs: ["thyChange"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "component", type: ThyActions, selector: "thy-actions", inputs: ["thySize"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyResizeHandle, selector: "thy-resize-handle, [thy-resize-handle]", inputs: ["thyDirection", "thyLine"], outputs: ["thyMouseDown"], exportAs: ["thyResizeHandle"] }, { kind: "component", type: TheToolbarDropdown, selector: "the-toolbar-dropdown" }, { kind: "directive", type: ThePreventDefaultDirective, selector: "[thePreventDefault]", exportAs: ["thePreventDefault"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TheCode, decorators: [{
             type: Component,
@@ -7290,7 +7294,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                         ThyResizeHandle,
                         TheToolbarDropdown,
                         ThePreventDefaultDirective
-                    ], template: "<!-- \u53EA\u8BFB\u6A21\u5F0F\u4E0BCodeMirror-sizer\u9AD8\u5EA6\u6BD4\u7F16\u8F91\u6A21\u5F0F\u4E0B\u591A2px\uFF0C\u8BBE\u7F6EthyMinHeight\u4E3A46px\u9632\u6B62\u62D6\u62FD\u5230\u6700\u5C0F\u9AD8\u5EA6\u65F6\u53EA\u8BFB\u6A21\u5F0F\u4E0B\u51FA\u73B0\u6EDA\u52A8\u6761  -->\n<div\n  thyResizable\n  [thyMinHeight]=\"46\"\n  [thyBounds]=\"resizeBounds\"\n  [style.height.px]=\"resizeHeight\"\n  (thyResize)=\"onResize($event)\"\n  (thyResizeEnd)=\"onEndResize()\"\n  class=\"resize-code-container\"\n  [ngClass]=\"{ focus: isCollapsedAndNonReadonly, readonly: options.readonly, active: isHightLight && isCollapsedAndNonReadonly }\"\n>\n  <ng-codemirror\n    #codemirror\n    [isDelayRender]=\"isDelayRender()\"\n    contenteditable=\"false\"\n    class=\"ng-codemirror-wrapper\"\n    [ngStyle]=\"{ maxHeight: maxHeight > 0 ? maxHeight + 'px' : 'auto' }\"\n    [options]=\"options\"\n    [ngModel]=\"code\"\n    (ngModelChange)=\"codeChange($event)\"\n    (focusChange)=\"focusChange($event)\"\n  >\n  </ng-codemirror>\n  @if (isCollapsedAndNonReadonly) {\n    <thy-resize-handle thyDirection=\"bottom\" class=\"code-resize-icon\"></thy-resize-handle>\n  }\n</div>\n\n<ng-template #toolbar>\n  <thy-actions thySize=\"xxs\" thePreventDefault>\n    <the-toolbar-dropdown\n      [menus]=\"menus\"\n      [toolbarItem]=\"activeLanguage\"\n      [dropdownItemKey]=\"activeLanguage?.key\"\n      [itemMousedownHandle]=\"onChangeLanguage\"\n    >\n    </the-toolbar-dropdown>\n    <span class=\"auto-wrap d-flex align-items-center px-2 text-secondary\">\n      <span>{{ locale().autoWrap }}</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\n      href=\"javascript:;\"\n      thyAction\n      thyActionIcon=\"copy\"\n      [thyTooltip]=\"locale().copy\"\n      thyTooltipPlacement=\"top\"\n      (click)=\"onCopy($event)\"\n    ></a>\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    <a\n      href=\"javascript:;\"\n      thyAction\n      thyType=\"danger\"\n      thyActionIcon=\"trash\"\n      [thyTooltip]=\"locale().delete\"\n      thyTooltipPlacement=\"top\"\n      (click)=\"onDelete($event)\"\n    ></a>\n  </thy-actions>\n</ng-template>\n" }]
+                    ], template: "<!-- \u53EA\u8BFB\u6A21\u5F0F\u4E0BCodeMirror-sizer\u9AD8\u5EA6\u6BD4\u7F16\u8F91\u6A21\u5F0F\u4E0B\u591A2px\uFF0C\u8BBE\u7F6EthyMinHeight\u4E3A46px\u9632\u6B62\u62D6\u62FD\u5230\u6700\u5C0F\u9AD8\u5EA6\u65F6\u53EA\u8BFB\u6A21\u5F0F\u4E0B\u51FA\u73B0\u6EDA\u52A8\u6761  -->\n<div\n  thyResizable\n  [thyMinHeight]=\"46\"\n  [thyBounds]=\"resizeBounds\"\n  [style.height.px]=\"resizeHeight\"\n  (thyResize)=\"onResize($event)\"\n  (thyResizeEnd)=\"onEndResize()\"\n  class=\"resize-code-container\"\n  [ngClass]=\"{ focus: isCollapsedAndNonReadonly, readonly: options().readonly, active: isHightLight && isCollapsedAndNonReadonly }\"\n>\n  <ng-codemirror\n    #codemirror\n    [isDelayRender]=\"isDelayRender()\"\n    contenteditable=\"false\"\n    class=\"ng-codemirror-wrapper\"\n    [ngStyle]=\"{ maxHeight: maxHeight > 0 ? maxHeight + 'px' : 'auto' }\"\n    [options]=\"options()\"\n    [ngModel]=\"code\"\n    (ngModelChange)=\"codeChange($event)\"\n    (focusChange)=\"focusChange($event)\"\n  >\n  </ng-codemirror>\n  @if (isCollapsedAndNonReadonly) {\n    <thy-resize-handle thyDirection=\"bottom\" class=\"code-resize-icon\"></thy-resize-handle>\n  }\n</div>\n\n<ng-template #toolbar>\n  <thy-actions thySize=\"xxs\" thePreventDefault>\n    <the-toolbar-dropdown\n      [menus]=\"menus\"\n      [toolbarItem]=\"activeLanguage\"\n      [dropdownItemKey]=\"activeLanguage?.key\"\n      [itemMousedownHandle]=\"onChangeLanguage\"\n    >\n    </the-toolbar-dropdown>\n    <span class=\"auto-wrap d-flex align-items-center px-2 text-secondary\">\n      <span>{{ locale().autoWrap }}</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\n      href=\"javascript:;\"\n      thyAction\n      thyActionIcon=\"copy\"\n      [thyTooltip]=\"locale().copy\"\n      thyTooltipPlacement=\"top\"\n      (click)=\"onCopy($event)\"\n    ></a>\n    <thy-divider class=\"mr-2 ml-1 align-self-center\" [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n    <a\n      href=\"javascript:;\"\n      thyAction\n      thyType=\"danger\"\n      thyActionIcon=\"trash\"\n      [thyTooltip]=\"locale().delete\"\n      thyTooltipPlacement=\"top\"\n      (click)=\"onDelete($event)\"\n    ></a>\n  </thy-actions>\n</ng-template>\n" }]
         }], propDecorators: { toolbar: [{
                 type: ViewChild,
                 args: ['toolbar', { read: TemplateRef, static: true }]
@@ -14379,13 +14383,12 @@ class TheImage extends TheBaseElement {
         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 realHeight = getRealHeightByElement(this.editor, this.element, 0);
+        if (realHeight > 0) {
             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';
+                blockCard.style.minHeight = realHeight - parseFloat(style.marginTop) - parseFloat(style.marginBottom) + 'px';
             }
         }
     }
@@ -14394,8 +14397,12 @@ class TheImage extends TheBaseElement {
             return;
         }
         const blockCard = getBlockCardByNativeElement(this.nativeElement);
-        if (blockCard) {
+        if (blockCard && blockCard.style.minHeight) {
             blockCard.style.minHeight = '';
+            return true;
+        }
+        else {
+            return false;
         }
     }
     setImagePluginOptions() {
@@ -14635,13 +14642,15 @@ class TheImage extends TheBaseElement {
             .withPositions([bottomPosition]);
     }
     imageLoaded(event) {
-        this.clearMinHeight();
         const img = event.target;
         this.naturalWidth = img.naturalWidth;
         this.naturalHeight = img.naturalHeight;
         if (AngularEditor.isEnabledVirtualScroll(this.editor)) {
             this.imageLoadedCacheHeightTimer = setTimeout(() => {
-                this.cacheImageHeight(this.getRealHeight());
+                const result = this.clearMinHeight();
+                if (!result) {
+                    this.cacheImageHeight(this.getRealHeight());
+                }
             }, 0);
         }
     }