slate-angular 20.2.2 → 20.2.4

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 } from 'rxjs';
+import { Subject, debounceTime } from 'rxjs';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { HistoryEditor } from 'slate-history';
 import { CommonModule } from '@angular/common';
@@ -1491,11 +1491,7 @@ 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, isVisible) => {
-    const visible = isVisible ?? editor.isVisible(element);
-    if (!visible) {
-        return 0;
-    }
+const getRealHeightByElement = (editor, element, defaultHeight) => {
     const heights = ELEMENT_KEY_TO_HEIGHTS.get(editor);
     const key = AngularEditor.findKey(editor, element);
     const height = heights?.get(key.id);
@@ -1505,22 +1501,19 @@ const getRealHeightByElement = (editor, element, defaultHeight = VIRTUAL_SCROLL_
     if (heights?.has(key.id)) {
         console.error('getBlockHeight: invalid height value', key.id, height);
     }
-    return defaultHeight;
+    return editor.getRoughHeight(element, defaultHeight);
 };
 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 isVisible = editor.isVisible(children[i]);
-        visibleStates[i] = isVisible;
-        const height = getRealHeightByElement(editor, children[i], VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT, isVisible);
+        const height = getRealHeightByElement(editor, children[i], VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT);
         heights[i] = height;
         accumulatedHeights[i + 1] = accumulatedHeights[i] + height;
     }
-    return { heights, accumulatedHeights, visibleStates };
+    return { heights, accumulatedHeights };
 };
 const calculateVirtualTopHeight = (editor, startIndex) => {
     const { accumulatedHeights } = buildHeightsAndAccumulatedHeights(editor);
@@ -1737,6 +1730,9 @@ const withAngular = (editor, clipboardFormatKey = 'x-slate-fragment') => {
     e.isVisible = element => {
         return true;
     };
+    e.getRoughHeight = (element, defaultHeight) => {
+        return defaultHeight === undefined ? VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT : defaultHeight;
+    };
     return e;
 };
 
@@ -2341,7 +2337,6 @@ class BaseElementFlavour extends BaseFlavour {
         this.getOutletElement = () => {
             return this.nativeElement.querySelector('.children-outlet');
         };
-        this.stableHeight = null;
     }
     get element() {
         return this._context && this._context.element;
@@ -2428,20 +2423,11 @@ class BaseElementFlavour extends BaseFlavour {
             readonly: this._context.readonly
         };
     }
-    isStableHeight() {
-        return false;
-    }
     getRealHeight() {
-        if (this.isStableHeight() && this.stableHeight !== null) {
-            return this.stableHeight;
-        }
         const blockCard = getBlockCardByNativeElement(this.nativeElement);
         const target = blockCard || this.nativeElement;
         const computedStyle = getComputedStyle(target);
         const height = Math.ceil(target.getBoundingClientRect().height) + parseFloat(computedStyle.marginTop) + parseFloat(computedStyle.marginBottom);
-        if (this.isStableHeight()) {
-            this.stableHeight = height;
-        }
         return height;
     }
 }
@@ -3323,6 +3309,7 @@ class SlateEditable {
         this.inViewportChildren = [];
         this.inViewportIndics = [];
         this.keyHeightMap = new Map();
+        this.viewportRefresh$ = new Subject();
         this.virtualScrollInitialized = false;
     }
     ngOnInit() {
@@ -3394,6 +3381,7 @@ class SlateEditable {
                     const { preRenderingCount, childrenWithPreRendering, childrenWithPreRenderingIndics } = this.handlePreRendering();
                     this.listRender.update(childrenWithPreRendering, this.editor, this.context, preRenderingCount, childrenWithPreRenderingIndics);
                 }
+                this.viewportRefresh$.next();
             }
             else {
                 if (!this.listRender.initialized) {
@@ -3647,17 +3635,18 @@ class SlateEditable {
                 diff = this.diffVirtualViewport(virtualView, 'second');
             }
         }
-        const oldInViewportChildren = this.inViewportChildren;
+        // const oldInViewportChildren = this.inViewportChildren;
         this.applyVirtualView(virtualView);
         const { preRenderingCount, childrenWithPreRendering, childrenWithPreRenderingIndics } = this.handlePreRendering();
         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]);
-            }
-        });
+        // const remeasureIndics = [];
+        // this.inViewportChildren.forEach((child, index) => {
+        //     if (oldInViewportChildren.indexOf(child) === -1) {
+        //         remeasureIndics.push(this.inViewportIndics[index]);
+        //     }
+        // });
+        this.viewportRefresh$.next();
     }
     updateContext() {
         const decorations = this.generateDecorations();
@@ -3745,15 +3734,27 @@ class SlateEditable {
                 if (entries.length > 0 && entries[0].contentRect.width !== editorResizeObserverRectWidth) {
                     editorResizeObserverRectWidth = entries[0].contentRect.width;
                     this.keyHeightMap.clear();
-                    const remeasureIndics = this.inViewportIndics;
-                    measureHeightByIndics(this.editor, remeasureIndics, true);
                     EDITOR_TO_ROOT_NODE_WIDTH.set(this.editor, this.virtualTopHeightElement.getBoundingClientRect().width);
+                    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
+                //     );
+                // }
+            });
         }
     }
     setVirtualSpaceHeight(topHeight, bottomHeight) {
@@ -3852,6 +3853,7 @@ class SlateEditable {
                     if (!AngularEditor.isReadOnly(this.editor) && this.editor.selection) {
                         this.toNativeSelection(false);
                     }
+                    this.viewportRefresh$.next();
                 }
             }
             if (isDebug) {
@@ -3896,7 +3898,7 @@ class SlateEditable {
             }, 100);
         }
         const adjustedScrollTop = Math.max(0, scrollTop - getBusinessTop(this.editor));
-        const { heights, accumulatedHeights, visibleStates } = buildHeightsAndAccumulatedHeights(this.editor);
+        const { heights, accumulatedHeights } = buildHeightsAndAccumulatedHeights(this.editor);
         const totalHeight = accumulatedHeights[elementLength];
         const maxScrollTop = Math.max(0, totalHeight - viewportHeight);
         const limitedScrollTop = Math.min(adjustedScrollTop, maxScrollTop);
@@ -3908,7 +3910,8 @@ class SlateEditable {
         for (let i = 0; i < elementLength && accumulatedOffset < viewBottom; i++) {
             const currentHeight = heights[i];
             const nextOffset = accumulatedOffset + currentHeight;
-            if (!visibleStates[i]) {
+            const isVisible = this.editor.isVisible(children[i]);
+            if (!isVisible) {
                 accumulatedOffset = nextOffset;
                 continue;
             }
@@ -5023,7 +5026,6 @@ class BaseElementComponent extends BaseComponent {
             }
             return null;
         };
-        this.stableHeight = null;
     }
     get element() {
         return this._context && this._context.element;
@@ -5106,20 +5108,11 @@ class BaseElementComponent extends BaseComponent {
             readonly: this._context.readonly
         };
     }
-    isStableHeight() {
-        return false;
-    }
     getRealHeight() {
-        if (this.isStableHeight() && this.stableHeight !== null) {
-            return this.stableHeight;
-        }
         const blockCard = getBlockCardByNativeElement(this.nativeElement);
         const target = blockCard || this.nativeElement;
         const computedStyle = getComputedStyle(target);
         const height = Math.ceil(target.getBoundingClientRect().height) + parseFloat(computedStyle.marginTop) + parseFloat(computedStyle.marginBottom);
-        if (this.isStableHeight()) {
-            this.stableHeight = height;
-        }
         return height;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: BaseElementComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }