slate-angular 20.2.11 → 20.2.13

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;
 };
@@ -3383,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() {
@@ -3442,6 +3445,7 @@ class SlateEditable {
             this.editor.children = value;
             this.initializeContext();
             if (this.isEnabledVirtualScroll()) {
+                const previousInViewportChildren = [...this.inViewportChildren];
                 const visibleStates = this.editor.getAllVisibleStates();
                 const virtualView = this.calculateVirtualViewport(visibleStates);
                 this.applyVirtualView(virtualView);
@@ -3456,7 +3460,10 @@ class SlateEditable {
                     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) {
@@ -3701,6 +3708,7 @@ class SlateEditable {
     }
     updateListRenderAndRemeasureHeights() {
         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) {
@@ -3711,18 +3719,13 @@ class SlateEditable {
                 diff = this.diffVirtualViewport(virtualView, 'second');
             }
         }
-        // const oldInViewportChildren = this.inViewportChildren;
         this.applyVirtualView(virtualView);
         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();
@@ -3810,33 +3813,48 @@ class SlateEditable {
                 if (entries.length > 0 && entries[0].contentRect.width !== editorResizeObserverRectWidth) {
                     editorResizeObserverRectWidth = entries[0].contentRect.width;
                     this.keyHeightMap.clear();
-                    const firstElement = this.inViewportChildren[0];
-                    const firstDomElement = AngularEditor.toDOMNode(this.editor, firstElement);
-                    const target = firstDomElement || this.virtualTopHeightElement;
+                    let target = this.virtualTopHeightElement;
+                    if (this.inViewportChildren[0]) {
+                        const firstElement = this.inViewportChildren[0];
+                        const firstDomElement = AngularEditor.toDOMNode(this.editor, firstElement);
+                        target = firstDomElement;
+                    }
                     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;
@@ -3933,10 +3951,9 @@ class SlateEditable {
                             }
                         }
                     }
-                    if (!AngularEditor.isReadOnly(this.editor) && this.editor.selection) {
+                    if (this.editor.selection) {
                         this.toNativeSelection(false);
                     }
-                    this.viewportRefresh$.next();
                 }
             }
             if (isDebug) {