slate-angular 20.2.8 → 20.2.10

package/fesm2022/slate-angular.mjs

@@ -1449,6 +1449,49 @@ class VirtualScrollDebugOverlay {
     }
 }
 
+const SLATE_BLOCK_CARD_CLASS_NAME = 'slate-block-card';
+class SlateBlockCard {
+    onInit() {
+        const nativeElement = document.createElement('div');
+        nativeElement.classList.add(SLATE_BLOCK_CARD_CLASS_NAME);
+        this.nativeElement = nativeElement;
+        this.createContent();
+    }
+    createContent() {
+        const leftCaret = document.createElement('span');
+        leftCaret.setAttribute(`card-target`, 'card-left');
+        leftCaret.classList.add('card-left');
+        leftCaret.appendChild(getZeroTextNode());
+        const rightCaret = document.createElement('span');
+        rightCaret.setAttribute(`card-target`, 'card-right');
+        rightCaret.classList.add('card-right');
+        rightCaret.appendChild(getZeroTextNode());
+        const center = document.createElement('div');
+        center.setAttribute(`card-target`, 'card-center');
+        this.nativeElement.appendChild(leftCaret);
+        this.nativeElement.appendChild(center);
+        this.nativeElement.appendChild(rightCaret);
+        this.centerContainer = center;
+    }
+    append() {
+        this.centerRootNodes.forEach(rootNode => !this.centerContainer.contains(rootNode) && this.centerContainer.appendChild(rootNode));
+    }
+    initializeCenter(rootNodes) {
+        this.centerRootNodes = rootNodes;
+        this.append();
+    }
+    onDestroy() {
+        this.nativeElement.remove();
+    }
+}
+const getBlockCardByNativeElement = (nativeElement) => {
+    const blockCardElement = nativeElement?.parentElement?.parentElement;
+    if (blockCardElement && blockCardElement.classList.contains(SLATE_BLOCK_CARD_CLASS_NAME)) {
+        return blockCardElement;
+    }
+    return null;
+};
+
 const isDebug = localStorage.getItem(SLATE_DEBUG_KEY) === 'true';
 const isDebugScrollTop = localStorage.getItem(SLATE_DEBUG_KEY_SCROLL_TOP) === 'true';
 const ELEMENT_KEY_TO_HEIGHTS = new WeakMap();
@@ -1459,16 +1502,54 @@ const debugLog = (type, ...args) => {
     const doc = document;
     VirtualScrollDebugOverlay.log(doc, type, ...args);
 };
-const calcHeightByElement = (editor, element) => {
+const cacheHeightByElement = (editor, element, height) => {
+    if (!AngularEditor.isEnabledVirtualScroll(editor)) {
+        return;
+    }
+    if (typeof height !== 'number') {
+        console.error('cacheHeightByElement: height must be number', height);
+        return;
+    }
     const key = AngularEditor.findKey(editor, element);
+    const heights = ELEMENT_KEY_TO_HEIGHTS.get(editor);
+    heights.set(key.id, height);
+};
+const setMinHeightByElement = (editor, element, rootElementMarginBottom) => {
+    if (!AngularEditor.isEnabledVirtualScroll(editor)) {
+        return;
+    }
+    const realHeight = getCachedHeightByElement(editor, element);
+    if (realHeight) {
+        const nativeElement = AngularEditor.toDOMNode(editor, element);
+        const blockCard = getBlockCardByNativeElement(nativeElement);
+        if (blockCard) {
+            const minHeight = realHeight - rootElementMarginBottom;
+            blockCard.style.minHeight = minHeight + 'px';
+        }
+    }
+};
+const clearMinHeightByElement = (editor, element) => {
+    if (!AngularEditor.isEnabledVirtualScroll(editor)) {
+        return;
+    }
+    const nativeElement = AngularEditor.toDOMNode(editor, element);
+    const blockCard = getBlockCardByNativeElement(nativeElement);
+    if (blockCard && blockCard.style.minHeight) {
+        blockCard.style.minHeight = '';
+        return true;
+    }
+    else {
+        return false;
+    }
+};
+const calcHeightByElement = (editor, element) => {
     const view = ELEMENT_TO_COMPONENT.get(element);
     if (!view) {
         return;
     }
-    const ret = view.calcHeight();
-    const heights = ELEMENT_KEY_TO_HEIGHTS.get(editor);
-    heights.set(key.id, ret);
-    return ret;
+    const height = view.calcHeight();
+    cacheHeightByElement(editor, element, height);
+    return height;
 };
 const measureHeightByIndics = (editor, indics, force = false) => {
     let hasChanged = false;
@@ -1510,7 +1591,8 @@ const buildHeightsAndAccumulatedHeights = (editor) => {
     const accumulatedHeights = new Array(children.length + 1);
     accumulatedHeights[0] = 0;
     for (let i = 0; i < children.length; i++) {
-        let height = getCachedHeightByElement(editor, children[i]);
+        const isVisible = editor.isVisible(children[i]);
+        let height = isVisible ? getCachedHeightByElement(editor, children[i]) : 0;
         if (height === null) {
             try {
                 height = editor.getRoughHeight(children[i]);
@@ -2298,49 +2380,6 @@ class BaseFlavour {
     }
 }
 
-const SLATE_BLOCK_CARD_CLASS_NAME = 'slate-block-card';
-class SlateBlockCard {
-    onInit() {
-        const nativeElement = document.createElement('div');
-        nativeElement.classList.add(SLATE_BLOCK_CARD_CLASS_NAME);
-        this.nativeElement = nativeElement;
-        this.createContent();
-    }
-    createContent() {
-        const leftCaret = document.createElement('span');
-        leftCaret.setAttribute(`card-target`, 'card-left');
-        leftCaret.classList.add('card-left');
-        leftCaret.appendChild(getZeroTextNode());
-        const rightCaret = document.createElement('span');
-        rightCaret.setAttribute(`card-target`, 'card-right');
-        rightCaret.classList.add('card-right');
-        rightCaret.appendChild(getZeroTextNode());
-        const center = document.createElement('div');
-        center.setAttribute(`card-target`, 'card-center');
-        this.nativeElement.appendChild(leftCaret);
-        this.nativeElement.appendChild(center);
-        this.nativeElement.appendChild(rightCaret);
-        this.centerContainer = center;
-    }
-    append() {
-        this.centerRootNodes.forEach(rootNode => !this.centerContainer.contains(rootNode) && this.centerContainer.appendChild(rootNode));
-    }
-    initializeCenter(rootNodes) {
-        this.centerRootNodes = rootNodes;
-        this.append();
-    }
-    onDestroy() {
-        this.nativeElement.remove();
-    }
-}
-const getBlockCardByNativeElement = (nativeElement) => {
-    const blockCardElement = nativeElement?.parentElement?.parentElement;
-    if (blockCardElement && blockCardElement.classList.contains(SLATE_BLOCK_CARD_CLASS_NAME)) {
-        return blockCardElement;
-    }
-    return null;
-};
-
 const DEFAULT_ELEMENT_HEIGHT = 24;
 class BaseElementFlavour extends BaseFlavour {
     constructor() {
@@ -2437,9 +2476,6 @@ class BaseElementFlavour extends BaseFlavour {
             readonly: this._context.readonly
         };
     }
-    hasStableHeight() {
-        return true;
-    }
     calcHeight() {
         const blockCard = getBlockCardByNativeElement(this.nativeElement);
         const target = blockCard || this.nativeElement;
@@ -2886,11 +2922,13 @@ const createText = (text) => {
     return { nativeElement };
 };
 
+const PRE_RENDERING_ELEMENT_ON_TOP_CLASS = 'pre-rendering-element-on-top';
 const setPreRenderingElementStyle = (editor, rootNode, isClear = false) => {
     if (isClear) {
         rootNode.style.top = '';
         rootNode.style.width = '';
         rootNode.style.position = '';
+        rootNode.classList.remove(PRE_RENDERING_ELEMENT_ON_TOP_CLASS);
         return;
     }
     const preRenderingWidth = EDITOR_TO_ROOT_NODE_WIDTH.get(editor) ?? 0;
@@ -2902,6 +2940,20 @@ const setPreRenderingElementStyle = (editor, rootNode, isClear = false) => {
         rootNode.style.width = '100%';
     }
     rootNode.style.position = 'absolute';
+    rootNode.classList.add(PRE_RENDERING_ELEMENT_ON_TOP_CLASS);
+};
+const updatePreRenderingElementWidth = (editor) => {
+    const editorDom = AngularEditor.toDOMNode(editor, editor);
+    const rootNodes = editorDom.querySelectorAll(`.${PRE_RENDERING_ELEMENT_ON_TOP_CLASS}`);
+    const preRenderingWidth = EDITOR_TO_ROOT_NODE_WIDTH.get(editor) ?? 0;
+    rootNodes.forEach(rootNode => {
+        if (preRenderingWidth) {
+            rootNode.style.width = `${preRenderingWidth}px`;
+        }
+        else {
+            rootNode.style.width = '100%';
+        }
+    });
 };
 class ListRender {
     constructor(viewContext, viewContainerRef, getOutletParent, getOutletElement) {
@@ -3747,12 +3799,16 @@ class SlateEditable {
             this.elementRef.nativeElement.appendChild(this.virtualCenterOutlet);
             this.elementRef.nativeElement.appendChild(this.virtualBottomHeightElement);
             let editorResizeObserverRectWidth = this.elementRef.nativeElement.getBoundingClientRect().width;
-            EDITOR_TO_ROOT_NODE_WIDTH.set(this.editor, this.virtualTopHeightElement.getBoundingClientRect().width);
+            EDITOR_TO_ROOT_NODE_WIDTH.set(this.editor, this.virtualTopHeightElement.offsetWidth);
             this.editorResizeObserver = new ResizeObserver(entries => {
                 if (entries.length > 0 && entries[0].contentRect.width !== editorResizeObserverRectWidth) {
                     editorResizeObserverRectWidth = entries[0].contentRect.width;
                     this.keyHeightMap.clear();
-                    EDITOR_TO_ROOT_NODE_WIDTH.set(this.editor, this.virtualTopHeightElement.getBoundingClientRect().width);
+                    const firstElement = this.inViewportChildren[0];
+                    const firstDomElement = AngularEditor.toDOMNode(this.editor, firstElement);
+                    const target = firstDomElement || this.virtualTopHeightElement;
+                    EDITOR_TO_ROOT_NODE_WIDTH.set(this.editor, target.offsetWidth);
+                    updatePreRenderingElementWidth(this.editor);
                     this.viewportRefresh$.next();
                     if (isDebug) {
                         debugLog('log', 'editorResizeObserverRectWidth: ', editorResizeObserverRectWidth, 'EDITOR_TO_ROOT_NODE_WIDTH: ', EDITOR_TO_ROOT_NODE_WIDTH.get(this.editor));
@@ -5127,9 +5183,6 @@ class BaseElementComponent extends BaseComponent {
             readonly: this._context.readonly
         };
     }
-    hasStableHeight() {
-        return true;
-    }
     calcHeight() {
         const blockCard = getBlockCardByNativeElement(this.nativeElement);
         const target = blockCard || this.nativeElement;
@@ -5295,5 +5348,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AngularEditor, BaseComponent, BaseElementComponent, BaseElementFlavour, BaseFlavour, BaseLeafComponent, BaseLeafFlavour, BaseTextComponent, BaseTextFlavour, BlockCardRef, DEFAULT_ELEMENT_HEIGHT, DefaultTextFlavour, EDITOR_TO_AFTER_VIEW_INIT_QUEUE, EDITOR_TO_BUSINESS_TOP, EDITOR_TO_IS_FROM_SCROLL_TO, EDITOR_TO_ROOT_NODE_WIDTH, EDITOR_TO_VIRTUAL_SCROLL_SELECTION, ELEMENT_KEY_TO_HEIGHTS, ELEMENT_TO_COMPONENT, FAKE_LEFT_BLOCK_CARD_OFFSET, FAKE_RIGHT_BLOCK_CARD_OFFSET, FlavourRef, HAS_BEFORE_INPUT_SUPPORT, IS_ANDROID, IS_APPLE, IS_CHROME, IS_CHROME_LEGACY, IS_EDGE_LEGACY, IS_ENABLED_VIRTUAL_SCROLL, IS_FIREFOX, IS_FIREFOX_LEGACY, IS_IOS, IS_QQBROWSER, IS_SAFARI, IS_UC_MOBILE, IS_WECHATBROWSER, PLACEHOLDER_SYMBOL, SLATE_BLOCK_CARD_CLASS_NAME, SLATE_DEBUG_KEY, SLATE_DEBUG_KEY_SCROLL_TOP, SlateBlockCard, SlateChildrenOutlet, SlateEditable, SlateErrorCode, SlateFragmentAttributeKey, SlateModule, SlateString, VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT, VoidTextFlavour, blobAsString, buildHTMLText, buildHeightsAndAccumulatedHeights, calcHeightByElement, calculateVirtualTopHeight, check, completeTable, createClipboardData, createText, createThrottleRAF, debugLog, defaultScrollSelectionIntoView, fallbackCopyText, getBlockCardByNativeElement, getBusinessTop, getCachedHeightByElement, getCardTargetAttribute, getClipboardData, getClipboardFromHTMLText, getContentHeight, getDataTransferClipboard, getDataTransferClipboardText, getNavigatorClipboard, getPlainText, getSelection, getSlateFragmentAttribute, getZeroTextNode, hasAfterContextChange, hasBeforeContextChange, hasBlockCard, hasBlockCardWithNode, hotkeys, isCardCenterByTargetAttr, isCardLeft, isCardLeftByTargetAttr, isCardRightByTargetAttr, isClipboardFile, isClipboardReadSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isComponentType, isDOMText, isDebug, isDebugScrollTop, isDecoratorRangeListEqual, isFlavourType, isInvalidTable, isTemplateRef, isValid, measureHeightByIndics, normalize, scrollToElement, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setNavigatorClipboard, shallowCompare, stripHtml, withAngular };
+export { AngularEditor, BaseComponent, BaseElementComponent, BaseElementFlavour, BaseFlavour, BaseLeafComponent, BaseLeafFlavour, BaseTextComponent, BaseTextFlavour, BlockCardRef, DEFAULT_ELEMENT_HEIGHT, DefaultTextFlavour, EDITOR_TO_AFTER_VIEW_INIT_QUEUE, EDITOR_TO_BUSINESS_TOP, EDITOR_TO_IS_FROM_SCROLL_TO, EDITOR_TO_ROOT_NODE_WIDTH, EDITOR_TO_VIRTUAL_SCROLL_SELECTION, ELEMENT_KEY_TO_HEIGHTS, ELEMENT_TO_COMPONENT, FAKE_LEFT_BLOCK_CARD_OFFSET, FAKE_RIGHT_BLOCK_CARD_OFFSET, FlavourRef, HAS_BEFORE_INPUT_SUPPORT, IS_ANDROID, IS_APPLE, IS_CHROME, IS_CHROME_LEGACY, IS_EDGE_LEGACY, IS_ENABLED_VIRTUAL_SCROLL, IS_FIREFOX, IS_FIREFOX_LEGACY, IS_IOS, IS_QQBROWSER, IS_SAFARI, IS_UC_MOBILE, IS_WECHATBROWSER, PLACEHOLDER_SYMBOL, SLATE_BLOCK_CARD_CLASS_NAME, SLATE_DEBUG_KEY, SLATE_DEBUG_KEY_SCROLL_TOP, SlateBlockCard, SlateChildrenOutlet, SlateEditable, SlateErrorCode, SlateFragmentAttributeKey, SlateModule, SlateString, VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT, VoidTextFlavour, blobAsString, buildHTMLText, buildHeightsAndAccumulatedHeights, cacheHeightByElement, calcHeightByElement, calculateVirtualTopHeight, check, clearMinHeightByElement, completeTable, createClipboardData, createText, createThrottleRAF, debugLog, defaultScrollSelectionIntoView, fallbackCopyText, getBlockCardByNativeElement, getBusinessTop, getCachedHeightByElement, getCardTargetAttribute, getClipboardData, getClipboardFromHTMLText, getContentHeight, getDataTransferClipboard, getDataTransferClipboardText, getNavigatorClipboard, getPlainText, getSelection, getSlateFragmentAttribute, getZeroTextNode, hasAfterContextChange, hasBeforeContextChange, hasBlockCard, hasBlockCardWithNode, hotkeys, isCardCenterByTargetAttr, isCardLeft, isCardLeftByTargetAttr, isCardRightByTargetAttr, isClipboardFile, isClipboardReadSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isComponentType, isDOMText, isDebug, isDebugScrollTop, isDecoratorRangeListEqual, isFlavourType, isInvalidTable, isTemplateRef, isValid, measureHeightByIndics, normalize, scrollToElement, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setMinHeightByElement, setNavigatorClipboard, shallowCompare, stripHtml, withAngular };
 //# sourceMappingURL=slate-angular.mjs.map