slate-angular 20.2.10 → 20.2.12

package/fesm2022/slate-angular.mjs

@@ -5,7 +5,7 @@ import * as i0 from '@angular/core';
 import { TemplateRef, ComponentRef, IterableDiffers, inject, ViewContainerRef, forwardRef, HostBinding, Input, ChangeDetectionStrategy, Component, NgModule, ElementRef, ChangeDetectorRef, Directive, ViewChild } from '@angular/core';
 import { direction } from 'direction';
 import scrollIntoView from 'scroll-into-view-if-needed';
-import { Subject, debounceTime } from 'rxjs';
+import { Subject, tap, debounceTime, filter } from 'rxjs';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { HistoryEditor } from 'slate-history';
 import { CommonModule } from '@angular/common';
@@ -1566,7 +1566,10 @@ const measureHeightByIndics = (editor, indics, force = false) => {
             return;
         }
         hasChanged = true;
-        calcHeightByElement(editor, element);
+        const currentHeight = calcHeightByElement(editor, element);
+        if (isDebug) {
+            debugLog('log', 'measureHeightByIndics: height not equal, index: ', index, 'preHeight: ', preHeight, 'height: ', currentHeight);
+        }
     });
     return hasChanged;
 };
@@ -1585,13 +1588,13 @@ 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++) {
-        const isVisible = editor.isVisible(children[i]);
+        const isVisible = visibleStates[i];
         let height = isVisible ? getCachedHeightByElement(editor, children[i]) : 0;
         if (height === null) {
             try {
@@ -1606,8 +1609,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) => {
@@ -1619,7 +1622,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(() => {
@@ -1826,6 +1830,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;
     };
@@ -3379,7 +3386,7 @@ class SlateEditable {
         this.inViewportChildren = [];
         this.inViewportIndics = [];
         this.keyHeightMap = new Map();
-        this.viewportRefresh$ = new Subject();
+        this.indicsOfNeedBeMeasured$ = new Subject();
         this.virtualScrollInitialized = false;
     }
     ngOnInit() {
@@ -3438,7 +3445,9 @@ class SlateEditable {
             this.editor.children = value;
             this.initializeContext();
             if (this.isEnabledVirtualScroll()) {
-                const virtualView = this.calculateVirtualViewport();
+                const previousInViewportChildren = [...this.inViewportChildren];
+                const visibleStates = this.editor.getAllVisibleStates();
+                const virtualView = this.calculateVirtualViewport(visibleStates);
                 this.applyVirtualView(virtualView);
                 const childrenForRender = virtualView.inViewportChildren;
                 if (isDebug) {
@@ -3448,10 +3457,13 @@ 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();
+                const remeasureIndics = this.getChangedIndics(previousInViewportChildren);
+                if (remeasureIndics.length) {
+                    this.indicsOfNeedBeMeasured$.next(remeasureIndics);
+                }
             }
             else {
                 if (!this.listRender.initialized) {
@@ -3695,28 +3707,25 @@ class SlateEditable {
         }
     }
     updateListRenderAndRemeasureHeights() {
-        let virtualView = this.calculateVirtualViewport();
+        const visibleStates = this.editor.getAllVisibleStates();
+        const previousInViewportChildren = [...this.inViewportChildren];
+        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 = [];
-        // this.inViewportChildren.forEach((child, index) => {
-        //     if (oldInViewportChildren.indexOf(child) === -1) {
-        //         remeasureIndics.push(this.inViewportIndics[index]);
-        //     }
-        // });
-        this.viewportRefresh$.next();
+        const remeasureIndics = this.getChangedIndics(previousInViewportChildren);
+        if (remeasureIndics.length) {
+            this.indicsOfNeedBeMeasured$.next(remeasureIndics);
+        }
     }
     updateContext() {
         const decorations = this.generateDecorations();
@@ -3809,28 +3818,40 @@ class SlateEditable {
                     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));
                     }
                 }
             });
             this.editorResizeObserver.observe(this.elementRef.nativeElement);
-            this.viewportRefresh$.pipe(debounceTime(1000)).subscribe(() => {
-                // const res = measureHeightByIndics(this.editor, this.inViewportIndics);
-                // if (isDebug) {
-                //     debugLog(
-                //         'log',
-                //         'viewportRefresh$ debounceTime 1000ms',
-                //         'inViewportIndics: ',
-                //         this.inViewportIndics,
-                //         'measureHeightByIndics height changed: ',
-                //         res
-                //     );
-                // }
+            let pendingRemeasureIndics = [];
+            this.indicsOfNeedBeMeasured$
+                .pipe(tap((previousValue) => {
+                previousValue.forEach((index) => {
+                    if (!pendingRemeasureIndics.includes(index)) {
+                        pendingRemeasureIndics.push(index);
+                    }
+                });
+            }), debounceTime(500), filter(() => pendingRemeasureIndics.length > 0))
+                .subscribe(() => {
+                measureHeightByIndics(this.editor, pendingRemeasureIndics, true);
+                pendingRemeasureIndics = [];
+                if (isDebug) {
+                    debugLog('log', 'exist pendingRemeasureIndics: ', pendingRemeasureIndics, 'will try to update virtual viewport');
+                }
+                this.tryUpdateVirtualViewport();
             });
         }
     }
+    getChangedIndics(previousValue) {
+        const remeasureIndics = [];
+        this.inViewportChildren.forEach((child, index) => {
+            if (previousValue.indexOf(child) === -1) {
+                remeasureIndics.push(this.inViewportIndics[index]);
+            }
+        });
+        return remeasureIndics;
+    }
     setVirtualSpaceHeight(topHeight, bottomHeight) {
         if (!this.virtualScrollInitialized) {
             return;
@@ -3846,14 +3867,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;
@@ -3863,7 +3884,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;
@@ -3878,7 +3899,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);
@@ -3892,20 +3914,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;
@@ -3916,7 +3939,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);
@@ -3928,7 +3951,6 @@ class SlateEditable {
                     if (!AngularEditor.isReadOnly(this.editor) && this.editor.selection) {
                         this.toNativeSelection(false);
                     }
-                    this.viewportRefresh$.next();
                 }
             }
             if (isDebug) {
@@ -3936,7 +3958,7 @@ class SlateEditable {
             }
         });
     }
-    calculateVirtualViewport() {
+    calculateVirtualViewport(visibleStates) {
         const children = (this.editor.children || []);
         if (!children.length || !this.isEnabledVirtualScroll()) {
             return {
@@ -3973,7 +3995,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);
@@ -3985,7 +4007,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;