slate-angular 20.2.9 → 20.2.11

package/fesm2022/slate-angular.mjs

@@ -1585,13 +1585,14 @@ const getCachedHeightByElement = (editor, element) => {
     }
     return null;
 };
-const buildHeightsAndAccumulatedHeights = (editor) => {
+const buildHeightsAndAccumulatedHeights = (editor, visibleStates) => {
     const children = (editor.children || []);
     const heights = new Array(children.length);
     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 = visibleStates[i];
+        let height = isVisible ? getCachedHeightByElement(editor, children[i]) : 0;
         if (height === null) {
             try {
                 height = editor.getRoughHeight(children[i]);
@@ -1605,8 +1606,8 @@ const buildHeightsAndAccumulatedHeights = (editor) => {
     }
     return { heights, accumulatedHeights };
 };
-const calculateVirtualTopHeight = (editor, startIndex) => {
-    const { accumulatedHeights } = buildHeightsAndAccumulatedHeights(editor);
+const calculateVirtualTopHeight = (editor, startIndex, visibleStates) => {
+    const { accumulatedHeights } = buildHeightsAndAccumulatedHeights(editor, visibleStates);
     return accumulatedHeights[startIndex] ?? 0;
 };
 const scrollToElement = (editor, element, scrollTo) => {
@@ -1618,7 +1619,8 @@ const scrollToElement = (editor, element, scrollTo) => {
     if (anchorIndex < 0) {
         return;
     }
-    const { accumulatedHeights } = buildHeightsAndAccumulatedHeights(editor);
+    const visibleStates = editor.getAllVisibleStates();
+    const { accumulatedHeights } = buildHeightsAndAccumulatedHeights(editor, visibleStates);
     scrollTo((accumulatedHeights[anchorIndex] ?? 0) + getBusinessTop(editor));
     EDITOR_TO_IS_FROM_SCROLL_TO.set(editor, true);
     setTimeout(() => {
@@ -1825,6 +1827,9 @@ const withAngular = (editor, clipboardFormatKey = 'x-slate-fragment') => {
     e.isVisible = element => {
         return true;
     };
+    e.getAllVisibleStates = () => {
+        return new Array(e.children.length).fill(true);
+    };
     e.getRoughHeight = (element, defaultHeight) => {
         return defaultHeight === undefined ? VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT : defaultHeight;
     };
@@ -2921,11 +2926,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;
@@ -2937,6 +2944,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) {
@@ -3421,7 +3442,8 @@ class SlateEditable {
             this.editor.children = value;
             this.initializeContext();
             if (this.isEnabledVirtualScroll()) {
-                const virtualView = this.calculateVirtualViewport();
+                const visibleStates = this.editor.getAllVisibleStates();
+                const virtualView = this.calculateVirtualViewport(visibleStates);
                 this.applyVirtualView(virtualView);
                 const childrenForRender = virtualView.inViewportChildren;
                 if (isDebug) {
@@ -3431,7 +3453,7 @@ class SlateEditable {
                     this.listRender.initialize(childrenForRender, this.editor, this.context, 0, virtualView.inViewportIndics);
                 }
                 else {
-                    const { preRenderingCount, childrenWithPreRendering, childrenWithPreRenderingIndics } = this.handlePreRendering();
+                    const { preRenderingCount, childrenWithPreRendering, childrenWithPreRenderingIndics } = this.handlePreRendering(visibleStates);
                     this.listRender.update(childrenWithPreRendering, this.editor, this.context, preRenderingCount, childrenWithPreRenderingIndics);
                 }
                 this.viewportRefresh$.next();
@@ -3678,19 +3700,20 @@ class SlateEditable {
         }
     }
     updateListRenderAndRemeasureHeights() {
-        let virtualView = this.calculateVirtualViewport();
+        const visibleStates = this.editor.getAllVisibleStates();
+        let virtualView = this.calculateVirtualViewport(visibleStates);
         let diff = this.diffVirtualViewport(virtualView, 'onChange');
         if (diff.isDifferent && diff.needRemoveOnTop) {
             const remeasureIndics = diff.changedIndexesOfTop;
             const changed = measureHeightByIndics(this.editor, remeasureIndics);
             if (changed) {
-                virtualView = this.calculateVirtualViewport();
+                virtualView = this.calculateVirtualViewport(visibleStates);
                 diff = this.diffVirtualViewport(virtualView, 'second');
             }
         }
         // const oldInViewportChildren = this.inViewportChildren;
         this.applyVirtualView(virtualView);
-        const { preRenderingCount, childrenWithPreRendering, childrenWithPreRenderingIndics } = this.handlePreRendering();
+        const { preRenderingCount, childrenWithPreRendering, childrenWithPreRenderingIndics } = this.handlePreRendering(visibleStates);
         this.listRender.update(childrenWithPreRendering, this.editor, this.context, preRenderingCount, childrenWithPreRenderingIndics);
         // 新增或者修改的才需要重算，计算出这个结果
         // const remeasureIndics = [];
@@ -3782,12 +3805,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));
@@ -3825,14 +3852,14 @@ class SlateEditable {
         }
         return parseFloat(this.virtualTopHeightElement.style.height.replace('px', ''));
     }
-    handlePreRendering() {
+    handlePreRendering(visibleStates) {
         let preRenderingCount = 0;
         const childrenWithPreRendering = [...this.inViewportChildren];
         const childrenWithPreRenderingIndics = [...this.inViewportIndics];
         const firstIndex = this.inViewportIndics[0];
         for (let index = firstIndex - 1; index >= 0; index--) {
             const element = this.editor.children[index];
-            if (this.editor.isVisible(element)) {
+            if (visibleStates[index]) {
                 childrenWithPreRendering.unshift(element);
                 childrenWithPreRenderingIndics.unshift(index);
                 preRenderingCount = 1;
@@ -3842,7 +3869,7 @@ class SlateEditable {
         const lastIndex = this.inViewportIndics[this.inViewportIndics.length - 1];
         for (let index = lastIndex + 1; index < this.editor.children.length; index++) {
             const element = this.editor.children[index];
-            if (this.editor.isVisible(element)) {
+            if (visibleStates[index]) {
                 childrenWithPreRendering.push(element);
                 childrenWithPreRenderingIndics.push(index);
                 break;
@@ -3857,7 +3884,8 @@ class SlateEditable {
         const isFromScrollTo = EDITOR_TO_IS_FROM_SCROLL_TO.get(this.editor);
         if (this.inViewportIndics.length > 0 && !isFromScrollTo) {
             const topHeight = this.getActualVirtualTopHeight();
-            const refreshVirtualTopHeight = calculateVirtualTopHeight(this.editor, this.inViewportIndics[0]);
+            const visibleStates = this.editor.getAllVisibleStates();
+            const refreshVirtualTopHeight = calculateVirtualTopHeight(this.editor, this.inViewportIndics[0], visibleStates);
             if (topHeight !== refreshVirtualTopHeight) {
                 if (isDebug) {
                     debugLog('log', 'update top height since dirty state（正数减去高度，负数代表增加高度）: ', topHeight - refreshVirtualTopHeight);
@@ -3871,20 +3899,21 @@ class SlateEditable {
             if (isDebug) {
                 debugLog('log', 'tryUpdateVirtualViewport Anim start');
             }
-            let virtualView = this.calculateVirtualViewport();
+            const visibleStates = this.editor.getAllVisibleStates();
+            let virtualView = this.calculateVirtualViewport(visibleStates);
             let diff = this.diffVirtualViewport(virtualView);
             if (diff.isDifferent && diff.needRemoveOnTop && !isFromScrollTo) {
                 const remeasureIndics = diff.changedIndexesOfTop;
                 const changed = measureHeightByIndics(this.editor, remeasureIndics);
                 if (changed) {
-                    virtualView = this.calculateVirtualViewport();
+                    virtualView = this.calculateVirtualViewport(visibleStates);
                     diff = this.diffVirtualViewport(virtualView, 'second');
                 }
             }
             if (diff.isDifferent) {
                 this.applyVirtualView(virtualView);
                 if (this.listRender.initialized) {
-                    const { preRenderingCount, childrenWithPreRendering, childrenWithPreRenderingIndics } = this.handlePreRendering();
+                    const { preRenderingCount, childrenWithPreRendering, childrenWithPreRenderingIndics } = this.handlePreRendering(visibleStates);
                     this.listRender.update(childrenWithPreRendering, this.editor, this.context, preRenderingCount, childrenWithPreRenderingIndics);
                     if (diff.needAddOnTop && !isFromScrollTo) {
                         const remeasureAddedIndics = diff.changedIndexesOfTop;
@@ -3895,7 +3924,7 @@ class SlateEditable {
                         const topHeightBeforeAdd = virtualView.accumulatedHeights[startIndexBeforeAdd];
                         const changed = measureHeightByIndics(this.editor, remeasureAddedIndics);
                         if (changed) {
-                            const newHeights = buildHeightsAndAccumulatedHeights(this.editor);
+                            const newHeights = buildHeightsAndAccumulatedHeights(this.editor, visibleStates);
                             const actualTopHeightAfterAdd = newHeights.accumulatedHeights[startIndexBeforeAdd];
                             const newTopHeight = virtualView.top - (actualTopHeightAfterAdd - topHeightBeforeAdd);
                             this.setVirtualSpaceHeight(newTopHeight);
@@ -3915,7 +3944,7 @@ class SlateEditable {
             }
         });
     }
-    calculateVirtualViewport() {
+    calculateVirtualViewport(visibleStates) {
         const children = (this.editor.children || []);
         if (!children.length || !this.isEnabledVirtualScroll()) {
             return {
@@ -3952,7 +3981,7 @@ class SlateEditable {
             }, 100);
         }
         const adjustedScrollTop = Math.max(0, scrollTop - getBusinessTop(this.editor));
-        const { heights, accumulatedHeights } = buildHeightsAndAccumulatedHeights(this.editor);
+        const { heights, accumulatedHeights } = buildHeightsAndAccumulatedHeights(this.editor, visibleStates);
         const totalHeight = accumulatedHeights[elementLength];
         const maxScrollTop = Math.max(0, totalHeight - viewportHeight);
         const limitedScrollTop = Math.min(adjustedScrollTop, maxScrollTop);
@@ -3964,7 +3993,7 @@ class SlateEditable {
         for (let i = 0; i < elementLength && accumulatedOffset < viewBottom; i++) {
             const currentHeight = heights[i];
             const nextOffset = accumulatedOffset + currentHeight;
-            const isVisible = this.editor.isVisible(children[i]);
+            const isVisible = visibleStates[i];
             if (!isVisible) {
                 accumulatedOffset = nextOffset;
                 continue;