@worktile/theia 20.1.0-next.3 → 20.1.0-next.5

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, 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';
@@ -14340,6 +14340,10 @@ class TheImage extends TheBaseElement {
         this.subscribeMouseUp();
         this.subscribeImageUploadingState();
     }
+    afterViewInit() {
+        super.afterViewInit();
+        this.setImageMinHeight();
+    }
     onContextChange() {
         super.onContextChange();
         if (this.initialized && !isMobileMode(this.editor)) {
@@ -14359,6 +14363,28 @@ class TheImage extends TheBaseElement {
         }
         super.ngOnDestroy();
     }
+    cacheImageHeight(height) {
+        const heights = ELEMENT_KEY_TO_HEIGHTS.get(this.editor);
+        const key = AngularEditor.findKey(this.editor, this.element);
+        heights.set(key.id, height);
+    }
+    setImageMinHeight() {
+        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() {
+        const blockCard = getBlockCardByNativeElement(this.nativeElement);
+        if (blockCard) {
+            blockCard.style.minHeight = '';
+        }
+    }
     setImagePluginOptions() {
         this.imagePluginOptions = getPluginOptions(this.editor, PluginKeys.image);
     }
@@ -14511,6 +14537,7 @@ class TheImage extends TheBaseElement {
                 width: this.imageEntry.width,
                 height: this.imageEntry.height
             }, { at: this.selection });
+            this.cacheImageHeight(this.getRealHeight());
         }
     }
     cancelUpload() {
@@ -14595,9 +14622,13 @@ class TheImage extends TheBaseElement {
             .withPositions([bottomPosition]);
     }
     imageLoaded(event) {
+        this.clearMinHeight();
         const img = event.target;
         this.naturalWidth = img.naturalWidth;
         this.naturalHeight = img.naturalHeight;
+        setTimeout(() => {
+            this.cacheImageHeight(this.getRealHeight());
+        }, 0);
     }
     imageError(event) {
         const img = event.target;
@@ -18340,7 +18371,6 @@ class TheEditorComponent {
         }
     }
     ngOnDestroy() {
-        this.scrollContainerResizeObserver?.disconnect();
         THE_EDITOR_PREVIOUS_SELECTION.delete(this.editor);
     }
     bindVirtualScrollContainer() {
@@ -18349,10 +18379,6 @@ class TheEditorComponent {
             return;
         }
         this.scrollContainerElement = scrollContainer;
-        this.scrollContainerResizeObserver = new ResizeObserver(() => {
-            this.syncVirtualConfig();
-        });
-        this.scrollContainerResizeObserver.observe(scrollContainer);
         this.ngZone.runOutsideAngular(() => {
             fromEvent(scrollContainer, 'scroll')
                 .pipe(takeUntilDestroyed(this.destroyRef))
@@ -18367,21 +18393,21 @@ class TheEditorComponent {
                     JUST_NOW_UPDATED_VIRTUAL_VIEW.set(this.editor, false);
                 }
             });
+            this.syncVirtualConfig();
         });
-        this.syncVirtualConfig();
     }
     syncVirtualConfig() {
         if (!this.virtualConfig().enabled || !this.scrollContainerElement) {
             return;
         }
-        const { scrollTop, clientHeight } = this.scrollContainerElement;
+        const { scrollTop, offsetHeight } = this.scrollContainerElement;
         if (localStorage.getItem(SLATE_DEBUG_KEY + '__SCROLL_TOP')) {
             console.log(`theia: scroll event fired from user: ${scrollTop}`);
         }
         this.virtualConfig.update(config => ({
             ...config,
             scrollTop,
-            viewportHeight: clientHeight
+            viewportHeight: offsetHeight
         }));
     }
     initialize() {