slate-angular 20.2.0-next.24 → 20.2.0-next.26

package/fesm2022/slate-angular.mjs

@@ -957,6 +957,30 @@ const fallbackCopyText = async (text) => {
 
 const ELEMENT_KEY_TO_HEIGHTS = new WeakMap();
 const EDITOR_TO_BUSINESS_TOP = new WeakMap();
+const measureHeightByElement = (editor, element) => {
+    const key = AngularEditor.findKey(editor, element);
+    const view = ELEMENT_TO_COMPONENT.get(element);
+    if (!view) {
+        return;
+    }
+    const ret = view.getRealHeight();
+    const heights = ELEMENT_KEY_TO_HEIGHTS.get(editor);
+    heights.set(key.id, ret);
+    return ret;
+};
+const measureHeightByIndics = (editor, indics, force = false) => {
+    let hasChanged = false;
+    indics.forEach((index, i) => {
+        const element = editor.children[index];
+        const preHeight = getRealHeightByElement(editor, element, 0);
+        if (preHeight && !force) {
+            return;
+        }
+        hasChanged = true;
+        measureHeightByElement(editor, element);
+    });
+    return hasChanged;
+};
 const getBusinessTop = (editor) => {
     return EDITOR_TO_BUSINESS_TOP.get(editor) ?? 0;
 };
@@ -965,9 +989,6 @@ const getRealHeightByElement = (editor, element, defaultHeight = VIRTUAL_SCROLL_
     if (!isVisible) {
         return 0;
     }
-    if (!element) {
-        return defaultHeight;
-    }
     const heights = ELEMENT_KEY_TO_HEIGHTS.get(editor);
     const key = AngularEditor.findKey(editor, element);
     const height = heights?.get(key.id);
@@ -3291,7 +3312,6 @@ class SlateEditable {
                     const { preRenderingCount, childrenWithPreRendering } = this.handlePreRendering();
                     this.listRender.update(childrenWithPreRendering, this.editor, this.context, preRenderingCount);
                 }
-                this.tryMeasureInViewportChildrenHeights();
             }
             else {
                 if (!this.listRender.initialized) {
@@ -3516,7 +3536,7 @@ class SlateEditable {
         if (isDebug && remeasureIndics.length > 0) {
             console.log('remeasure height by indics: ', remeasureIndics);
         }
-        this.remeasureHeightByIndics(remeasureIndics);
+        measureHeightByIndics(this.editor, remeasureIndics, true);
     }
     updateContext() {
         const decorations = this.generateDecorations();
@@ -3604,7 +3624,7 @@ class SlateEditable {
                     editorResizeObserverRectWidth = entries[0].contentRect.width;
                     this.keyHeightMap.clear();
                     const remeasureIndics = this.inViewportIndics;
-                    this.remeasureHeightByIndics(remeasureIndics);
+                    measureHeightByIndics(this.editor, remeasureIndics);
                 }
             });
             this.editorResizeObserver.observe(this.elementRef.nativeElement);
@@ -3634,12 +3654,18 @@ class SlateEditable {
         VirtualScrollDebugOverlay.log(doc, type, ...args);
     }
     handlePreRendering() {
-        let preRenderingCount = 0;
+        let preRenderingCount = 1;
         const childrenWithPreRendering = [...this.inViewportChildren];
         if (this.inViewportIndics[0] !== 0) {
-            preRenderingCount = 1;
             childrenWithPreRendering.unshift(this.editor.children[this.inViewportIndics[0] - 1]);
         }
+        else {
+            preRenderingCount = 0;
+        }
+        const lastIndex = this.inViewportIndics[this.inViewportIndics.length - 1];
+        if (lastIndex !== this.editor.children.length - 1) {
+            childrenWithPreRendering.push(this.editor.children[lastIndex + 1]);
+        }
         return { preRenderingCount, childrenWithPreRendering };
     }
     tryUpdateVirtualViewport() {
@@ -3653,37 +3679,46 @@ class SlateEditable {
             }
             let virtualView = this.calculateVirtualViewport();
             let diff = this.diffVirtualViewport(virtualView);
-            if (diff.isDiff) {
+            if (diff.isDifferent && diff.needRemoveOnTop) {
+                const remeasureIndics = diff.changedIndexesOfTop;
+                const changed = measureHeightByIndics(this.editor, remeasureIndics);
+                if (changed) {
+                    virtualView = this.calculateVirtualViewport();
+                    diff = this.diffVirtualViewport(virtualView, 'second');
+                }
+            }
+            if (diff.isDifferent) {
                 this.applyVirtualView(virtualView);
                 if (this.listRender.initialized) {
                     const { preRenderingCount, childrenWithPreRendering } = this.handlePreRendering();
                     this.listRender.update(childrenWithPreRendering, this.editor, this.context, preRenderingCount);
+                    if (diff.needAddOnTop) {
+                        const remeasureAddedIndics = diff.changedIndexesOfTop;
+                        if (isDebug) {
+                            this.debugLog('log', 'needAddOnTop to remeasure heights: ', remeasureAddedIndics);
+                        }
+                        const startIndexBeforeAdd = diff.changedIndexesOfTop[diff.changedIndexesOfTop.length - 1] + 1;
+                        const topHeightBeforeAdd = virtualView.accumulatedHeights[startIndexBeforeAdd];
+                        const result = measureHeightByIndics(this.editor, remeasureAddedIndics);
+                        if (result) {
+                            const newHeights = buildHeightsAndAccumulatedHeights(this.editor);
+                            const actualTopHeightAfterAdd = newHeights.accumulatedHeights[startIndexBeforeAdd];
+                            const newTopHeight = virtualView.top - (actualTopHeightAfterAdd - topHeightBeforeAdd);
+                            this.setVirtualSpaceHeight(newTopHeight);
+                            if (isDebug) {
+                                this.debugLog('log', `update top height since will add element in top（正数减去高度，负数代表增加高度）: ${actualTopHeightAfterAdd - topHeightBeforeAdd}`);
+                            }
+                        }
+                    }
                     if (!AngularEditor.isReadOnly(this.editor) && this.editor.selection) {
                         this.toNativeSelection();
                     }
                 }
-                if (diff.isAddedTop) {
-                    const remeasureAddedIndics = diff.diffTopRenderedIndexes;
-                    if (isDebug) {
-                        this.debugLog('log', 'isAddedTop to remeasure heights: ', remeasureAddedIndics);
-                    }
-                    const startIndexBeforeAdd = diff.diffTopRenderedIndexes[diff.diffTopRenderedIndexes.length - 1] + 1;
-                    const topHeightBeforeAdd = virtualView.accumulatedHeights[startIndexBeforeAdd];
-                    const result = this.remeasureHeightByIndics(remeasureAddedIndics);
-                    if (result) {
-                        const newHeights = buildHeightsAndAccumulatedHeights(this.editor);
-                        const actualTopHeightAfterAdd = newHeights.accumulatedHeights[startIndexBeforeAdd];
-                        const newTopHeight = virtualView.top - (actualTopHeightAfterAdd - topHeightBeforeAdd);
-                        this.setVirtualSpaceHeight(newTopHeight);
-                        this.debugLog('log', `update top height cause added element in top, 减去: ${actualTopHeightAfterAdd - topHeightBeforeAdd}`);
-                    }
-                }
-                this.tryMeasureInViewportChildrenHeights();
             }
             else {
                 const topHeight = this.getVirtualTopHeight();
                 if (virtualView.top !== topHeight) {
-                    this.debugLog('log', 'update top height: ', virtualView.top - topHeight, 'start index', this.inViewportIndics[0]);
+                    this.debugLog('log', 'update top height since invalid status（正数减去高度，负数代表增加高度）: ', topHeight - virtualView.top);
                     this.setVirtualSpaceHeight(virtualView.top);
                 }
             }
@@ -3779,60 +3814,60 @@ class SlateEditable {
     diffVirtualViewport(virtualView, stage = 'first') {
         if (!this.inViewportChildren.length) {
             return {
-                isDiff: true,
-                diffTopRenderedIndexes: [],
-                diffBottomRenderedIndexes: []
+                isDifferent: true,
+                changedIndexesOfTop: [],
+                changedIndexesOfBottom: []
             };
         }
-        const oldVisibleIndexes = [...this.inViewportIndics];
-        const newVisibleIndexes = [...virtualView.visibleIndexes];
-        const firstNewIndex = newVisibleIndexes[0];
-        const lastNewIndex = newVisibleIndexes[newVisibleIndexes.length - 1];
-        const firstOldIndex = oldVisibleIndexes[0];
-        const lastOldIndex = oldVisibleIndexes[oldVisibleIndexes.length - 1];
+        const oldIndexesInViewport = [...this.inViewportIndics];
+        const newIndexesInViewport = [...virtualView.visibleIndexes];
+        const firstNewIndex = newIndexesInViewport[0];
+        const lastNewIndex = newIndexesInViewport[newIndexesInViewport.length - 1];
+        const firstOldIndex = oldIndexesInViewport[0];
+        const lastOldIndex = oldIndexesInViewport[oldIndexesInViewport.length - 1];
         if (firstNewIndex !== firstOldIndex || lastNewIndex !== lastOldIndex) {
-            const diffTopRenderedIndexes = [];
-            const diffBottomRenderedIndexes = [];
-            const isMissingTop = firstNewIndex !== firstOldIndex && firstNewIndex > firstOldIndex;
-            const isAddedTop = firstNewIndex !== firstOldIndex && firstNewIndex < firstOldIndex;
-            const isMissingBottom = lastNewIndex !== lastOldIndex && lastOldIndex > lastNewIndex;
-            const isAddedBottom = lastNewIndex !== lastOldIndex && lastOldIndex < lastNewIndex;
-            if (isMissingTop || isAddedBottom) {
+            const changedIndexesOfTop = [];
+            const changedIndexesOfBottom = [];
+            const needRemoveOnTop = firstNewIndex !== firstOldIndex && firstNewIndex > firstOldIndex;
+            const needAddOnTop = firstNewIndex !== firstOldIndex && firstNewIndex < firstOldIndex;
+            const needRemoveOnBottom = lastNewIndex !== lastOldIndex && lastOldIndex > lastNewIndex;
+            const needAddOnBottom = lastNewIndex !== lastOldIndex && lastOldIndex < lastNewIndex;
+            if (needRemoveOnTop || needAddOnBottom) {
                 // 向下
-                for (let index = 0; index < oldVisibleIndexes.length; index++) {
-                    const element = oldVisibleIndexes[index];
-                    if (!newVisibleIndexes.includes(element)) {
-                        diffTopRenderedIndexes.push(element);
+                for (let index = 0; index < oldIndexesInViewport.length; index++) {
+                    const element = oldIndexesInViewport[index];
+                    if (!newIndexesInViewport.includes(element)) {
+                        changedIndexesOfTop.push(element);
                     }
                     else {
                         break;
                     }
                 }
-                for (let index = newVisibleIndexes.length - 1; index >= 0; index--) {
-                    const element = newVisibleIndexes[index];
-                    if (!oldVisibleIndexes.includes(element)) {
-                        diffBottomRenderedIndexes.push(element);
+                for (let index = newIndexesInViewport.length - 1; index >= 0; index--) {
+                    const element = newIndexesInViewport[index];
+                    if (!oldIndexesInViewport.includes(element)) {
+                        changedIndexesOfBottom.push(element);
                     }
                     else {
                         break;
                     }
                 }
             }
-            else if (isAddedTop || isMissingBottom) {
+            else if (needAddOnTop || needRemoveOnBottom) {
                 // 向上
-                for (let index = 0; index < newVisibleIndexes.length; index++) {
-                    const element = newVisibleIndexes[index];
-                    if (!oldVisibleIndexes.includes(element)) {
-                        diffTopRenderedIndexes.push(element);
+                for (let index = 0; index < newIndexesInViewport.length; index++) {
+                    const element = newIndexesInViewport[index];
+                    if (!oldIndexesInViewport.includes(element)) {
+                        changedIndexesOfTop.push(element);
                     }
                     else {
                         break;
                     }
                 }
-                for (let index = oldVisibleIndexes.length - 1; index >= 0; index--) {
-                    const element = oldVisibleIndexes[index];
-                    if (!newVisibleIndexes.includes(element)) {
-                        diffBottomRenderedIndexes.push(element);
+                for (let index = oldIndexesInViewport.length - 1; index >= 0; index--) {
+                    const element = oldIndexesInViewport[index];
+                    if (!newIndexesInViewport.includes(element)) {
+                        changedIndexesOfBottom.push(element);
                     }
                     else {
                         break;
@@ -3841,109 +3876,34 @@ class SlateEditable {
             }
             if (isDebug) {
                 this.debugLog('log', `====== diffVirtualViewport stage: ${stage} ======`);
-                this.debugLog('log', 'oldVisibleIndexes:', oldVisibleIndexes);
-                this.debugLog('log', 'newVisibleIndexes:', newVisibleIndexes);
-                this.debugLog('log', 'diffTopRenderedIndexes:', isMissingTop ? '-' : isAddedTop ? '+' : '-', diffTopRenderedIndexes, diffTopRenderedIndexes.map(index => getRealHeightByElement(this.editor, this.editor.children[index], 0)));
-                this.debugLog('log', 'diffBottomRenderedIndexes:', isAddedBottom ? '+' : isMissingBottom ? '-' : '+', diffBottomRenderedIndexes, diffBottomRenderedIndexes.map(index => getRealHeightByElement(this.editor, this.editor.children[index], 0)));
-                const needTop = virtualView.heights.slice(0, newVisibleIndexes[0]).reduce((acc, height) => acc + height, 0);
+                this.debugLog('log', 'oldIndexesInViewport:', oldIndexesInViewport);
+                this.debugLog('log', 'newIndexesInViewport:', newIndexesInViewport);
+                this.debugLog('log', 'changedIndexesOfTop:', needRemoveOnTop ? '-' : needAddOnTop ? '+' : '-', changedIndexesOfTop, changedIndexesOfTop.map(index => getRealHeightByElement(this.editor, this.editor.children[index], 0)));
+                this.debugLog('log', 'changedIndexesOfBottom:', needAddOnBottom ? '+' : needRemoveOnBottom ? '-' : '+', changedIndexesOfBottom, changedIndexesOfBottom.map(index => getRealHeightByElement(this.editor, this.editor.children[index], 0)));
+                const needTop = virtualView.heights.slice(0, newIndexesInViewport[0]).reduce((acc, height) => acc + height, 0);
                 const needBottom = virtualView.heights
-                    .slice(newVisibleIndexes[newVisibleIndexes.length - 1] + 1)
+                    .slice(newIndexesInViewport[newIndexesInViewport.length - 1] + 1)
                     .reduce((acc, height) => acc + height, 0);
                 this.debugLog('log', needTop - parseFloat(this.virtualTopHeightElement.style.height), 'newTopHeight:', needTop, 'prevTopHeight:', parseFloat(this.virtualTopHeightElement.style.height));
                 this.debugLog('log', 'newBottomHeight:', needBottom, 'prevBottomHeight:', parseFloat(this.virtualBottomHeightElement.style.height));
                 this.debugLog('warn', '=========== Dividing line ===========');
             }
             return {
-                isDiff: true,
-                isMissingTop,
-                isAddedTop,
-                isMissingBottom,
-                isAddedBottom,
-                diffTopRenderedIndexes,
-                diffBottomRenderedIndexes
+                isDifferent: true,
+                needRemoveOnTop,
+                needAddOnTop,
+                needRemoveOnBottom,
+                needAddOnBottom,
+                changedIndexesOfTop,
+                changedIndexesOfBottom
             };
         }
         return {
-            isDiff: false,
-            diffTopRenderedIndexes: [],
-            diffBottomRenderedIndexes: []
+            isDifferent: false,
+            changedIndexesOfTop: [],
+            changedIndexesOfBottom: []
         };
     }
-    tryMeasureInViewportChildrenHeights() {
-        if (!this.isEnabledVirtualScroll()) {
-            return;
-        }
-        this.tryMeasureInViewportChildrenHeightsAnimId && cancelAnimationFrame(this.tryMeasureInViewportChildrenHeightsAnimId);
-        this.tryMeasureInViewportChildrenHeightsAnimId = requestAnimationFrame(() => {
-            this.measureVisibleHeights();
-        });
-    }
-    measureVisibleHeights() {
-        const children = (this.editor.children || []);
-        const inViewportIndics = [...this.inViewportIndics];
-        inViewportIndics.forEach(index => {
-            const node = children[index];
-            if (!node) {
-                return;
-            }
-            const key = AngularEditor.findKey(this.editor, node);
-            // 跳过已测过的块，除非强制测量
-            if (this.keyHeightMap.has(key.id)) {
-                return;
-            }
-            const view = ELEMENT_TO_COMPONENT.get(node);
-            if (!view) {
-                return;
-            }
-            const ret = view.getRealHeight();
-            if (ret instanceof Promise) {
-                ret.then(height => {
-                    this.keyHeightMap.set(key.id, height);
-                });
-            }
-            else {
-                this.keyHeightMap.set(key.id, ret);
-            }
-        });
-    }
-    remeasureHeightByIndics(indics) {
-        const children = (this.editor.children || []);
-        let isHeightChanged = false;
-        indics.forEach((index, i) => {
-            const node = children[index];
-            if (!node) {
-                return;
-            }
-            const key = AngularEditor.findKey(this.editor, node);
-            const view = ELEMENT_TO_COMPONENT.get(node);
-            if (!view) {
-                return;
-            }
-            const prevHeight = this.keyHeightMap.get(key.id);
-            const ret = view.getRealHeight();
-            if (ret instanceof Promise) {
-                ret.then(height => {
-                    this.keyHeightMap.set(key.id, height);
-                    if (height !== prevHeight) {
-                        isHeightChanged = true;
-                        if (isDebug) {
-                            this.debugLog('log', `remeasure element height, index: ${index} prevHeight: ${prevHeight} newHeight: ${height}`);
-                        }
-                    }
-                });
-            }
-            else {
-                this.keyHeightMap.set(key.id, ret);
-                if (ret !== prevHeight) {
-                    isHeightChanged = true;
-                    if (isDebug) {
-                        this.debugLog('log', `remeasure element height, index: ${index} prevHeight: ${prevHeight} newHeight: ${ret}`);
-                    }
-                }
-            }
-        });
-        return isHeightChanged;
-    }
     //#region event proxy
     addEventListener(eventName, listener, target = this.elementRef.nativeElement) {
         this.manualListeners.push(this.renderer2.listen(target, eventName, (event) => {
@@ -5176,5 +5136,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_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, check, completeTable, createClipboardData, createText, createThrottleRAF, defaultScrollSelectionIntoView, fallbackCopyText, getBlockCardByNativeElement, getBusinessTop, getCardTargetAttribute, getClipboardData, getClipboardFromHTMLText, getContentHeight, getDataTransferClipboard, getDataTransferClipboardText, getNavigatorClipboard, getPlainText, getRealHeightByElement, getSelection, getSlateFragmentAttribute, getZeroTextNode, hasAfterContextChange, hasBeforeContextChange, hasBlockCard, hasBlockCardWithNode, hotkeys, isCardCenterByTargetAttr, isCardLeft, isCardLeftByTargetAttr, isCardRightByTargetAttr, isClipboardFile, isClipboardReadSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isComponentType, isDOMText, isDecoratorRangeListEqual, isFlavourType, isInvalidTable, isTemplateRef, isValid, 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_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, check, completeTable, createClipboardData, createText, createThrottleRAF, defaultScrollSelectionIntoView, fallbackCopyText, getBlockCardByNativeElement, getBusinessTop, getCardTargetAttribute, getClipboardData, getClipboardFromHTMLText, getContentHeight, getDataTransferClipboard, getDataTransferClipboardText, getNavigatorClipboard, getPlainText, getRealHeightByElement, getSelection, getSlateFragmentAttribute, getZeroTextNode, hasAfterContextChange, hasBeforeContextChange, hasBlockCard, hasBlockCardWithNode, hotkeys, isCardCenterByTargetAttr, isCardLeft, isCardLeftByTargetAttr, isCardRightByTargetAttr, isClipboardFile, isClipboardReadSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isComponentType, isDOMText, isDecoratorRangeListEqual, isFlavourType, isInvalidTable, isTemplateRef, isValid, measureHeightByElement, measureHeightByIndics, normalize, scrollToElement, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setNavigatorClipboard, shallowCompare, stripHtml, withAngular };
 //# sourceMappingURL=slate-angular.mjs.map