slate-angular 20.2.0 → 20.2.2

package/fesm2022/slate-angular.mjs

@@ -1491,9 +1491,9 @@ const measureHeightByIndics = (editor, indics, force = false) => {
 const getBusinessTop = (editor) => {
     return EDITOR_TO_BUSINESS_TOP.get(editor) ?? 0;
 };
-const getRealHeightByElement = (editor, element, defaultHeight = VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT) => {
-    const isVisible = editor.isVisible(element);
-    if (!isVisible) {
+const getRealHeightByElement = (editor, element, defaultHeight = VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT, isVisible) => {
+    const visible = isVisible ?? editor.isVisible(element);
+    if (!visible) {
         return 0;
     }
     const heights = ELEMENT_KEY_TO_HEIGHTS.get(editor);
@@ -1510,14 +1510,17 @@ const getRealHeightByElement = (editor, element, defaultHeight = VIRTUAL_SCROLL_
 const buildHeightsAndAccumulatedHeights = (editor) => {
     const children = (editor.children || []);
     const heights = 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 height = getRealHeightByElement(editor, children[i]);
+        const isVisible = editor.isVisible(children[i]);
+        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 };
+    return { heights, accumulatedHeights, visibleStates };
 };
 const calculateVirtualTopHeight = (editor, startIndex) => {
     const { accumulatedHeights } = buildHeightsAndAccumulatedHeights(editor);
@@ -2619,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;
@@ -2653,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');
@@ -2903,16 +2915,23 @@ class ListRender {
         this.initialized = false;
         this.preRenderingHTMLElement = [];
     }
-    initialize(children, parent, childrenContext, preRenderingCount = 0) {
+    initialize(children, parent, childrenContext, preRenderingCount = 0, childrenIndics) {
         this.initialized = true;
         this.children = children;
         const isRoot = parent === this.viewContext.editor;
         const firstIndex = isRoot ? this.viewContext.editor.children.indexOf(children[0]) : 0;
         const parentPath = AngularEditor.findPath(this.viewContext.editor, parent);
+        const getBlockIndex = (index) => {
+            if (childrenIndics && childrenIndics[index] !== undefined) {
+                return childrenIndics[index];
+            }
+            return isRoot ? firstIndex + index : index;
+        };
         children.forEach((descendant, _index) => {
-            NODE_TO_INDEX.set(descendant, firstIndex + _index);
+            const currentIndex = getBlockIndex(_index);
+            NODE_TO_INDEX.set(descendant, currentIndex);
             NODE_TO_PARENT.set(descendant, parent);
-            const context = getContext(firstIndex + _index, descendant, parentPath, childrenContext, this.viewContext);
+            const context = getContext(currentIndex, descendant, parentPath, childrenContext, this.viewContext);
             const viewType = getViewType(descendant, parent, this.viewContext);
             const view = createEmbeddedViewOrComponentOrFlavour(viewType, context, this.viewContext, this.viewContainerRef);
             const blockCard = createBlockCard(descendant, view, this.viewContext);
@@ -2929,9 +2948,9 @@ class ListRender {
             executeAfterViewInit(this.viewContext.editor);
         }
     }
-    update(children, parent, childrenContext, preRenderingCount = 0) {
+    update(children, parent, childrenContext, preRenderingCount = 0, childrenIndics) {
         if (!this.initialized || this.children.length === 0) {
-            this.initialize(children, parent, childrenContext, preRenderingCount);
+            this.initialize(children, parent, childrenContext, preRenderingCount, childrenIndics);
             return;
         }
         if (!this.differ) {
@@ -2961,7 +2980,13 @@ class ListRender {
         const diffResult = this.differ.diff(children);
         const parentPath = AngularEditor.findPath(this.viewContext.editor, parent);
         const isRoot = parent === this.viewContext.editor;
-        const firstIndex = isRoot ? this.viewContext.editor.children.indexOf(children[0]) : 0;
+        const firstIndex = isRoot && children.length ? this.viewContext.editor.children.indexOf(children[0]) : 0;
+        const getBlockIndex = (index) => {
+            if (childrenIndics && childrenIndics[index] !== undefined) {
+                return childrenIndics[index];
+            }
+            return isRoot ? firstIndex + index : index;
+        };
         if (diffResult) {
             let firstRootNode = getRootNodes(this.views[0], this.blockCards[0])[0];
             const newContexts = [];
@@ -2969,7 +2994,7 @@ class ListRender {
             const newViews = [];
             const newBlockCards = [];
             diffResult.forEachItem(record => {
-                const currentIndex = firstIndex + record.currentIndex;
+                const currentIndex = getBlockIndex(record.currentIndex);
                 NODE_TO_INDEX.set(record.item, currentIndex);
                 NODE_TO_PARENT.set(record.item, parent);
                 let context = getContext(currentIndex, record.item, parentPath, childrenContext, this.viewContext);
@@ -3041,9 +3066,10 @@ class ListRender {
         else {
             const newContexts = [];
             this.children.forEach((child, _index) => {
-                NODE_TO_INDEX.set(child, firstIndex + _index);
+                const currentIndex = getBlockIndex(_index);
+                NODE_TO_INDEX.set(child, currentIndex);
                 NODE_TO_PARENT.set(child, parent);
-                let context = getContext(firstIndex + _index, child, parentPath, childrenContext, this.viewContext);
+                let context = getContext(currentIndex, child, parentPath, childrenContext, this.viewContext);
                 const previousContext = this.contexts[_index];
                 if (memoizedContext(this.viewContext, child, previousContext, context)) {
                     context = previousContext;
@@ -3362,11 +3388,11 @@ class SlateEditable {
                     debugLog('log', 'writeValue calculate: ', virtualView.inViewportIndics, 'initialized: ', this.listRender.initialized);
                 }
                 if (!this.listRender.initialized) {
-                    this.listRender.initialize(childrenForRender, this.editor, this.context);
+                    this.listRender.initialize(childrenForRender, this.editor, this.context, 0, virtualView.inViewportIndics);
                 }
                 else {
-                    const { preRenderingCount, childrenWithPreRendering } = this.handlePreRendering();
-                    this.listRender.update(childrenWithPreRendering, this.editor, this.context, preRenderingCount);
+                    const { preRenderingCount, childrenWithPreRendering, childrenWithPreRenderingIndics } = this.handlePreRendering();
+                    this.listRender.update(childrenWithPreRendering, this.editor, this.context, preRenderingCount, childrenWithPreRenderingIndics);
                 }
             }
             else {
@@ -3441,6 +3467,13 @@ class SlateEditable {
         EDITOR_TO_VIRTUAL_SCROLL_SELECTION.set(this.editor, null);
         return selection;
     }
+    isSelectionInvisible(selection) {
+        const anchorIndex = selection.anchor.path[0];
+        const focusIndex = selection.focus.path[0];
+        const anchorElement = this.editor.children[anchorIndex];
+        const focusElement = this.editor.children[focusIndex];
+        return !anchorElement || !focusElement || !this.editor.isVisible(anchorElement) || !this.editor.isVisible(focusElement);
+    }
     toNativeSelection(autoScroll = true) {
         try {
             let { selection } = this.editor;
@@ -3584,7 +3617,13 @@ class SlateEditable {
                 }
             }, 0);
         }
-        this.toNativeSelection();
+        if (this.editor.selection && this.isSelectionInvisible(this.editor.selection)) {
+            Transforms.deselect(this.editor);
+            return;
+        }
+        else {
+            this.toNativeSelection();
+        }
     }
     render() {
         const changed = this.updateContext();
@@ -3598,11 +3637,20 @@ 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 } = this.handlePreRendering();
-        this.listRender.update(childrenWithPreRendering, this.editor, this.context, preRenderingCount);
+        const { preRenderingCount, childrenWithPreRendering, childrenWithPreRenderingIndics } = this.handlePreRendering();
+        this.listRender.update(childrenWithPreRendering, this.editor, this.context, preRenderingCount, childrenWithPreRenderingIndics);
         // 新增或者修改的才需要重算，计算出这个结果
         const remeasureIndics = [];
         this.inViewportChildren.forEach((child, index) => {
@@ -3610,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();
@@ -3727,19 +3772,29 @@ class SlateEditable {
         return parseFloat(this.virtualTopHeightElement.style.height.replace('px', ''));
     }
     handlePreRendering() {
-        let preRenderingCount = 1;
+        let preRenderingCount = 0;
         const childrenWithPreRendering = [...this.inViewportChildren];
-        if (this.inViewportIndics[0] !== 0) {
-            childrenWithPreRendering.unshift(this.editor.children[this.inViewportIndics[0] - 1]);
-        }
-        else {
-            preRenderingCount = 0;
+        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)) {
+                childrenWithPreRendering.unshift(element);
+                childrenWithPreRenderingIndics.unshift(index);
+                preRenderingCount = 1;
+                break;
+            }
         }
         const lastIndex = this.inViewportIndics[this.inViewportIndics.length - 1];
-        if (lastIndex !== this.editor.children.length - 1) {
-            childrenWithPreRendering.push(this.editor.children[lastIndex + 1]);
+        for (let index = lastIndex + 1; index < this.editor.children.length; index++) {
+            const element = this.editor.children[index];
+            if (this.editor.isVisible(element)) {
+                childrenWithPreRendering.push(element);
+                childrenWithPreRenderingIndics.push(index);
+                break;
+            }
         }
-        return { preRenderingCount, childrenWithPreRendering };
+        return { preRenderingCount, childrenWithPreRendering, childrenWithPreRenderingIndics };
     }
     tryUpdateVirtualViewport() {
         if (isDebug) {
@@ -3774,8 +3829,8 @@ class SlateEditable {
             if (diff.isDifferent) {
                 this.applyVirtualView(virtualView);
                 if (this.listRender.initialized) {
-                    const { preRenderingCount, childrenWithPreRendering } = this.handlePreRendering();
-                    this.listRender.update(childrenWithPreRendering, this.editor, this.context, preRenderingCount);
+                    const { preRenderingCount, childrenWithPreRendering, childrenWithPreRenderingIndics } = this.handlePreRendering();
+                    this.listRender.update(childrenWithPreRendering, this.editor, this.context, preRenderingCount, childrenWithPreRenderingIndics);
                     if (diff.needAddOnTop) {
                         const remeasureAddedIndics = diff.changedIndexesOfTop;
                         if (isDebug) {
@@ -3841,7 +3896,7 @@ class SlateEditable {
             }, 100);
         }
         const adjustedScrollTop = Math.max(0, scrollTop - getBusinessTop(this.editor));
-        const { heights, accumulatedHeights } = 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);
@@ -3853,6 +3908,10 @@ class SlateEditable {
         for (let i = 0; i < elementLength && accumulatedOffset < viewBottom; i++) {
             const currentHeight = heights[i];
             const nextOffset = accumulatedOffset + currentHeight;
+            if (!visibleStates[i]) {
+                accumulatedOffset = nextOffset;
+                continue;
+            }
             // 可视区域有交集，加入渲染
             if (nextOffset > limitedScrollTop && accumulatedOffset < viewBottom) {
                 if (inViewportStartIndex === -1)
@@ -3862,11 +3921,6 @@ class SlateEditable {
             }
             accumulatedOffset = nextOffset;
         }
-        if (inViewportStartIndex === -1 && elementLength) {
-            inViewportStartIndex = elementLength - 1;
-            visible.push(children[inViewportStartIndex]);
-            inViewportIndics.push(inViewportStartIndex);
-        }
         const inViewportEndIndex = inViewportStartIndex === -1 ? elementLength - 1 : (inViewportIndics[inViewportIndics.length - 1] ?? inViewportStartIndex);
         const top = inViewportStartIndex === -1 ? 0 : accumulatedHeights[inViewportStartIndex];
         const bottom = totalHeight - accumulatedHeights[inViewportEndIndex + 1];
@@ -3901,6 +3955,15 @@ class SlateEditable {
         const lastNewIndex = newIndexesInViewport[newIndexesInViewport.length - 1];
         const firstOldIndex = oldIndexesInViewport[0];
         const lastOldIndex = oldIndexesInViewport[oldIndexesInViewport.length - 1];
+        const isSameViewport = oldIndexesInViewport.length === newIndexesInViewport.length &&
+            oldIndexesInViewport.every((index, i) => index === newIndexesInViewport[i]);
+        if (firstNewIndex === firstOldIndex && lastNewIndex === lastOldIndex) {
+            return {
+                isDifferent: !isSameViewport,
+                changedIndexesOfTop: [],
+                changedIndexesOfBottom: []
+            };
+        }
         if (firstNewIndex !== firstOldIndex || lastNewIndex !== lastOldIndex) {
             const changedIndexesOfTop = [];
             const changedIndexesOfBottom = [];
@@ -3954,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)