slate-angular 20.2.0-next.1 → 20.2.0-next.2

package/fesm2022/slate-angular.mjs

@@ -2556,6 +2556,7 @@ function executeAfterViewInit(editor) {
 const JUST_NOW_UPDATED_VIRTUAL_VIEW = new WeakMap();
 // not correctly clipboardData on beforeinput
 const forceOnDOMPaste = IS_SAFARI;
+const isDebug = localStorage.getItem(SLATE_DEBUG_KEY) === 'true';
 class SlateEditable {
     set virtualScroll(config) {
         this.virtualConfig = config;
@@ -2563,12 +2564,26 @@ class SlateEditable {
         this.refreshVirtualViewAnimId = requestAnimationFrame(() => {
             const virtualView = this.refreshVirtualView();
             const diff = this.diffVirtualView(virtualView);
-            if (diff) {
-                this.applyVirtualView(virtualView);
-                if (this.listRender.initialized) {
-                    this.listRender.update(virtualView.renderedChildren, this.editor, this.context);
+            if (diff.isDiff) {
+                if (diff.isMissingTop || diff.isMissingBottom) {
+                    this.measureHeightByIndexes([...diff.diffTopRenderedIndexes, ...diff.diffBottomRenderedIndexes], true).then(result => {
+                        if (isDebug) {
+                            console.log('async measureHeightByIndexes:', result);
+                        }
+                        this.applyVirtualView(result || virtualView);
+                        if (this.listRender.initialized) {
+                            this.listRender.update(this.renderedChildren, this.editor, this.context);
+                        }
+                        this.scheduleMeasureVisibleHeights();
+                    });
+                }
+                else {
+                    this.applyVirtualView(virtualView);
+                    if (this.listRender.initialized) {
+                        this.listRender.update(virtualView.renderedChildren, this.editor, this.context);
+                    }
+                    this.scheduleMeasureVisibleHeights();
                 }
-                this.scheduleMeasureVisibleHeights();
             }
         });
     }
@@ -3010,65 +3025,72 @@ class SlateEditable {
     }
     diffVirtualView(virtualView) {
         if (!this.renderedChildren.length) {
-            return true;
+            return {
+                isDiff: true,
+                diffTopRenderedIndexes: [],
+                diffBottomRenderedIndexes: []
+            };
         }
         const oldVisibleIndexes = [...this.virtualVisibleIndexes];
         const newVisibleIndexes = [...virtualView.visibleIndexes];
-        if (newVisibleIndexes[0] !== oldVisibleIndexes[0] ||
-            newVisibleIndexes[newVisibleIndexes.length - 1] !== oldVisibleIndexes[oldVisibleIndexes.length - 1]) {
-            if (localStorage.getItem(SLATE_DEBUG_KEY) === 'true') {
-                const diffTopRenderedIndexes = [];
-                const diffBottomRenderedIndexes = [];
-                let direction = '';
-                if (newVisibleIndexes[0] > oldVisibleIndexes[0]) {
-                    // 向下
-                    direction = 'down';
-                    for (let index = 0; index < oldVisibleIndexes.length; index++) {
-                        const element = oldVisibleIndexes[index];
-                        if (!newVisibleIndexes.includes(element)) {
-                            diffTopRenderedIndexes.push(element);
-                        }
-                        else {
-                            break;
-                        }
+        const firstNewIndex = newVisibleIndexes[0];
+        const lastNewIndex = newVisibleIndexes[newVisibleIndexes.length - 1];
+        const firstOldIndex = oldVisibleIndexes[0];
+        const lastOldIndex = oldVisibleIndexes[oldVisibleIndexes.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) {
+                // 向下
+                for (let index = 0; index < oldVisibleIndexes.length; index++) {
+                    const element = oldVisibleIndexes[index];
+                    if (!newVisibleIndexes.includes(element)) {
+                        diffTopRenderedIndexes.push(element);
                     }
-                    for (let index = newVisibleIndexes.length - 1; index >= 0; index--) {
-                        const element = newVisibleIndexes[index];
-                        if (!oldVisibleIndexes.includes(element)) {
-                            diffBottomRenderedIndexes.push(element);
-                        }
-                        else {
-                            break;
-                        }
+                    else {
+                        break;
                     }
                 }
-                else {
-                    // 向上
-                    direction = 'up';
-                    for (let index = 0; index < newVisibleIndexes.length; index++) {
-                        const element = newVisibleIndexes[index];
-                        if (!oldVisibleIndexes.includes(element)) {
-                            diffTopRenderedIndexes.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 = oldVisibleIndexes.length - 1; index >= 0; index--) {
-                        const element = oldVisibleIndexes[index];
-                        if (!newVisibleIndexes.includes(element)) {
-                            diffBottomRenderedIndexes.push(element);
-                        }
-                        else {
-                            break;
-                        }
+                    else {
+                        break;
+                    }
+                }
+            }
+            else if (isAddedTop || isMissingBottom) {
+                // 向上
+                for (let index = 0; index < newVisibleIndexes.length; index++) {
+                    const element = newVisibleIndexes[index];
+                    if (!oldVisibleIndexes.includes(element)) {
+                        diffTopRenderedIndexes.push(element);
+                    }
+                    else {
+                        break;
                     }
                 }
+                for (let index = oldVisibleIndexes.length - 1; index >= 0; index--) {
+                    const element = oldVisibleIndexes[index];
+                    if (!newVisibleIndexes.includes(element)) {
+                        diffBottomRenderedIndexes.push(element);
+                    }
+                    else {
+                        break;
+                    }
+                }
+            }
+            if (isDebug) {
                 console.log('oldVisibleIndexes:', oldVisibleIndexes);
                 console.log('newVisibleIndexes:', newVisibleIndexes);
-                const directionStr = direction === 'down' ? '+' : '-';
-                console.log('diffTopRenderedIndexes:', directionStr, diffTopRenderedIndexes, diffTopRenderedIndexes.map(index => virtualView.heights[index]));
-                console.log('diffBottomRenderedIndexes:', directionStr, diffBottomRenderedIndexes, diffBottomRenderedIndexes.map(index => virtualView.heights[index]));
+                console.log('diffTopRenderedIndexes:', isMissingTop ? '-' : isAddedTop ? '+' : '-', diffTopRenderedIndexes, diffTopRenderedIndexes.map(index => this.getBlockHeight(index, 0)));
+                console.log('diffBottomRenderedIndexes:', isAddedBottom ? '+' : isMissingBottom ? '-' : '+', diffBottomRenderedIndexes, diffBottomRenderedIndexes.map(index => this.getBlockHeight(index, 0)));
                 const needTop = virtualView.heights.slice(0, newVisibleIndexes[0]).reduce((acc, height) => acc + height, 0);
                 const needBottom = virtualView.heights
                     .slice(newVisibleIndexes[newVisibleIndexes.length - 1] + 1)
@@ -3077,17 +3099,29 @@ class SlateEditable {
                 console.log('newBottomHeight:', needBottom, 'prevBottomHeight:', parseFloat(this.virtualBottomHeightElement.style.height));
                 console.warn('=========== Dividing line ===========');
             }
-            return true;
+            return {
+                isDiff: true,
+                isMissingTop,
+                isAddedTop,
+                isMissingBottom,
+                isAddedBottom,
+                diffTopRenderedIndexes,
+                diffBottomRenderedIndexes
+            };
         }
-        return false;
+        return {
+            isDiff: false,
+            diffTopRenderedIndexes: [],
+            diffBottomRenderedIndexes: []
+        };
     }
-    getBlockHeight(index) {
+    getBlockHeight(index, defaultHeight = VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT) {
         const node = this.editor.children[index];
         if (!node) {
-            return VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT;
+            return defaultHeight;
         }
         const key = AngularEditor.findKey(this.editor, node);
-        return this.measuredHeights.get(key.id) ?? VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT;
+        return this.measuredHeights.get(key.id) ?? defaultHeight;
     }
     buildAccumulatedHeight(heights) {
         const accumulatedHeights = new Array(heights.length + 1).fill(0);
@@ -3146,6 +3180,42 @@ class SlateEditable {
             });
         });
     }
+    async measureHeightByIndexes(indexes, isRefresh = false) {
+        const children = (this.editor.children || []);
+        let isHeightChanged = false;
+        const promises = [];
+        indexes.forEach(index => {
+            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 promise = view.getRealHeight()?.then(height => {
+                const prevHeight = this.measuredHeights.get(key.id);
+                if (isDebug) {
+                    console.log('measureHeightByIndexes: get index:', index, 'prevHeight:', prevHeight, 'newHeight:', height);
+                }
+                if (prevHeight && height !== prevHeight) {
+                    this.measuredHeights.set(key.id, height);
+                    isHeightChanged = true;
+                }
+            });
+            if (promise) {
+                promises.push(promise);
+            }
+        });
+        if (promises.length > 0) {
+            await Promise.all(promises);
+            if (isHeightChanged && isRefresh) {
+                return this.refreshVirtualView();
+            }
+        }
+        return null;
+    }
     //#region event proxy
     addEventListener(eventName, listener, target = this.elementRef.nativeElement) {
         this.manualListeners.push(this.renderer2.listen(target, eventName, (event) => {