slate-angular 20.2.1 → 20.2.3

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,20 @@ 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 visibles = 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]);
-        visibles[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, visibles };
+    return { heights, accumulatedHeights, visibleStates };
 };
 const calculateVirtualTopHeight = (editor, startIndex) => {
     const { accumulatedHeights } = buildHeightsAndAccumulatedHeights(editor);
@@ -1737,6 +1731,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 +2338,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 +2424,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;
     }
 }
@@ -2622,6 +2609,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;
@@ -2656,6 +2646,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');
@@ -3314,6 +3310,7 @@ class SlateEditable {
         this.inViewportChildren = [];
         this.inViewportIndics = [];
         this.keyHeightMap = new Map();
+        this.viewportRefresh$ = new Subject();
         this.virtualScrollInitialized = false;
     }
     ngOnInit() {
@@ -3385,6 +3382,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) {
@@ -3628,21 +3626,28 @@ class SlateEditable {
         }
     }
     updateListRenderAndRemeasureHeights() {
-        const virtualView = this.calculateVirtualViewport();
-        const oldInViewportChildren = this.inViewportChildren;
+        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, 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]);
-            }
-        });
-        if (isDebug && remeasureIndics.length > 0) {
-            console.log('remeasure height by indics: ', remeasureIndics);
-        }
+        // 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();
@@ -3730,15 +3735,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) {
@@ -3837,6 +3854,7 @@ class SlateEditable {
                     if (!AngularEditor.isReadOnly(this.editor) && this.editor.selection) {
                         this.toNativeSelection(false);
                     }
+                    this.viewportRefresh$.next();
                 }
             }
             if (isDebug) {
@@ -3881,7 +3899,7 @@ class SlateEditable {
             }, 100);
         }
         const adjustedScrollTop = Math.max(0, scrollTop - getBusinessTop(this.editor));
-        const { heights, accumulatedHeights, visibles } = 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);
@@ -3893,7 +3911,7 @@ class SlateEditable {
         for (let i = 0; i < elementLength && accumulatedOffset < viewBottom; i++) {
             const currentHeight = heights[i];
             const nextOffset = accumulatedOffset + currentHeight;
-            if (!visibles[i]) {
+            if (!visibleStates[i]) {
                 accumulatedOffset = nextOffset;
                 continue;
             }
@@ -4002,8 +4020,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)
@@ -5003,7 +5026,6 @@ class BaseElementComponent extends BaseComponent {
             }
             return null;
         };
-        this.stableHeight = null;
     }
     get element() {
         return this._context && this._context.element;
@@ -5086,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 }); }