@worktile/theia 20.1.0-next.7 → 20.1.0-next.9

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

@@ -10782,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) {
@@ -14364,11 +14368,17 @@ 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)) {
@@ -14380,6 +14390,9 @@ class TheImage extends TheBaseElement {
         }
     }
     clearMinHeight() {
+        if (!AngularEditor.isEnabledVirtualScroll(this.editor)) {
+            return;
+        }
         const blockCard = getBlockCardByNativeElement(this.nativeElement);
         if (blockCard) {
             blockCard.style.minHeight = '';
@@ -14626,9 +14639,11 @@ class TheImage extends TheBaseElement {
         const img = event.target;
         this.naturalWidth = img.naturalWidth;
         this.naturalHeight = img.naturalHeight;
-        this.imageLoadedCacheHeightTimer = setTimeout(() => {
-            this.cacheImageHeight(this.getRealHeight());
-        }, 0);
+        if (AngularEditor.isEnabledVirtualScroll(this.editor)) {
+            this.imageLoadedCacheHeightTimer = setTimeout(() => {
+                this.cacheImageHeight(this.getRealHeight());
+            }, 0);
+        }
     }
     imageError(event) {
         const img = event.target;
@@ -18254,12 +18269,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));
@@ -18350,7 +18365,7 @@ class TheEditorComponent {
         initializeDefaultMenuIcons(this.iconRegistry);
     }
     ngAfterViewInit() {
-        this.bindVirtualScrollContainer();
+        this.listenScrollEvent();
     }
     ngOnChanges(changes) {
         const options = changes.theOptions;
@@ -18373,18 +18388,20 @@ class TheEditorComponent {
     ngOnDestroy() {
         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.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)) {
@@ -18393,25 +18410,26 @@ class TheEditorComponent {
                     JUST_NOW_UPDATED_VIRTUAL_VIEW.set(this.editor, false);
                 }
             });
-            this.syncVirtualConfig();
+            this.updateVirtualConfig();
         });
     }
-    syncVirtualConfig() {
-        if (!this.virtualConfig().enabled || !this.scrollContainerElement) {
+    updateVirtualConfig() {
+        const scrollContainer = this.theContextService.getScrollContainer();
+        if (!this.virtualScrollConfig().enabled || !scrollContainer) {
             return;
         }
-        const { scrollTop, offsetHeight } = this.scrollContainerElement;
+        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: offsetHeight
         }));
     }
     initialize() {
-        this.virtualConfig.update(config => ({
+        this.virtualScrollConfig.update(config => ({
             ...config,
             enabled: this.theOptions?.enableVirtualScroll
         }));
@@ -18614,7 +18632,7 @@ class TheEditorComponent {
             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,
@@ -18622,7 +18640,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
                 }, {