slate-angular 20.2.1 → 20.2.2

package/fesm2022/slate-angular.mjs

@@ -1510,17 +1510,17 @@ const getRealHeightByElement = (editor, element, defaultHeight = VIRTUAL_SCROLL_
 const buildHeightsAndAccumulatedHeights = (editor) => {
     const children = (editor.children || []);
     const heights = new Array(children.length);
-    const visibles = new Array(children.length);
+    const visibleStates = new Array(children.length);
     const accumulatedHeights = new Array(children.length + 1);
     accumulatedHeights[0] = 0;
     for (let i = 0; i < children.length; i++) {
         const isVisible = editor.isVisible(children[i]);
-        visibles[i] = isVisible;
+        visibleStates[i] = isVisible;
         const height = getRealHeightByElement(editor, children[i], VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT, isVisible);
         heights[i] = height;
         accumulatedHeights[i + 1] = accumulatedHeights[i] + height;
     }
-    return { heights, accumulatedHeights, visibles };
+    return { heights, accumulatedHeights, visibleStates };
 };
 const calculateVirtualTopHeight = (editor, startIndex) => {
     const { accumulatedHeights } = buildHeightsAndAccumulatedHeights(editor);
@@ -2622,6 +2622,9 @@ class SlateStringRender {
         if (this.type === StringType.normalString) {
             this.nativeElement.textContent = this.leaf.text;
         }
+        if (this.type === StringType.compatibleString) {
+            updateCompatibleStringNode(this.nativeElement, this.leaf.text);
+        }
     }
     getElementStringLength() {
         return Node.string(this.context.parent).length;
@@ -2656,6 +2659,12 @@ const createCompatibleStringNode = (text) => {
     stringNode.appendChild(zeroWidthSpan);
     return stringNode;
 };
+const updateCompatibleStringNode = (stringNode, text) => {
+    const zeroWidthSpan = stringNode.querySelector('span');
+    stringNode.textContent = text;
+    stringNode.appendChild(zeroWidthSpan);
+    return stringNode;
+};
 const createLineBreakEmptyStringDOM = (elementStringLength) => {
     const stringNode = document.createElement('span');
     stringNode.setAttribute('data-slate-zero-width', 'n');
@@ -3628,7 +3637,16 @@ class SlateEditable {
         }
     }
     updateListRenderAndRemeasureHeights() {
-        const virtualView = this.calculateVirtualViewport();
+        let virtualView = this.calculateVirtualViewport();
+        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();
+                diff = this.diffVirtualViewport(virtualView, 'second');
+            }
+        }
         const oldInViewportChildren = this.inViewportChildren;
         this.applyVirtualView(virtualView);
         const { preRenderingCount, childrenWithPreRendering, childrenWithPreRenderingIndics } = this.handlePreRendering();
@@ -3640,9 +3658,6 @@ class SlateEditable {
                 remeasureIndics.push(this.inViewportIndics[index]);
             }
         });
-        if (isDebug && remeasureIndics.length > 0) {
-            console.log('remeasure height by indics: ', remeasureIndics);
-        }
     }
     updateContext() {
         const decorations = this.generateDecorations();
@@ -3881,7 +3896,7 @@ class SlateEditable {
             }, 100);
         }
         const adjustedScrollTop = Math.max(0, scrollTop - getBusinessTop(this.editor));
-        const { heights, accumulatedHeights, visibles } = buildHeightsAndAccumulatedHeights(this.editor);
+        const { heights, accumulatedHeights, visibleStates } = buildHeightsAndAccumulatedHeights(this.editor);
         const totalHeight = accumulatedHeights[elementLength];
         const maxScrollTop = Math.max(0, totalHeight - viewportHeight);
         const limitedScrollTop = Math.min(adjustedScrollTop, maxScrollTop);
@@ -3893,7 +3908,7 @@ class SlateEditable {
         for (let i = 0; i < elementLength && accumulatedOffset < viewBottom; i++) {
             const currentHeight = heights[i];
             const nextOffset = accumulatedOffset + currentHeight;
-            if (!visibles[i]) {
+            if (!visibleStates[i]) {
                 accumulatedOffset = nextOffset;
                 continue;
             }
@@ -4002,8 +4017,13 @@ class SlateEditable {
                 debugLog('log', `====== diffVirtualViewport stage: ${stage} ======`);
                 debugLog('log', 'oldIndexesInViewport:', oldIndexesInViewport);
                 debugLog('log', 'newIndexesInViewport:', newIndexesInViewport);
-                debugLog('log', 'changedIndexesOfTop:', needRemoveOnTop ? '-' : needAddOnTop ? '+' : '-', changedIndexesOfTop, changedIndexesOfTop.map(index => getRealHeightByElement(this.editor, this.editor.children[index], 0)));
-                debugLog('log', 'changedIndexesOfBottom:', needAddOnBottom ? '+' : needRemoveOnBottom ? '-' : '+', changedIndexesOfBottom, changedIndexesOfBottom.map(index => getRealHeightByElement(this.editor, this.editor.children[index], 0)));
+                // this.editor.children[index] will be undefined when it is removed
+                debugLog('log', 'changedIndexesOfTop:', needRemoveOnTop ? '-' : needAddOnTop ? '+' : '-', changedIndexesOfTop, changedIndexesOfTop.map(index => (this.editor.children[index] &&
+                    getRealHeightByElement(this.editor, this.editor.children[index], 0)) ||
+                    0));
+                debugLog('log', 'changedIndexesOfBottom:', needAddOnBottom ? '+' : needRemoveOnBottom ? '-' : '+', changedIndexesOfBottom, changedIndexesOfBottom.map(index => (this.editor.children[index] &&
+                    getRealHeightByElement(this.editor, this.editor.children[index], 0)) ||
+                    0));
                 const needTop = virtualView.heights.slice(0, newIndexesInViewport[0]).reduce((acc, height) => acc + height, 0);
                 const needBottom = virtualView.heights
                     .slice(newIndexesInViewport[newIndexesInViewport.length - 1] + 1)