slate-angular 20.2.0-next.11 → 20.2.0-next.13

package/fesm2022/slate-angular.mjs

@@ -1138,6 +1138,9 @@ const withAngular = (editor, clipboardFormatKey = 'x-slate-fragment') => {
     e.selectAll = () => {
         Transforms.select(e, []);
     };
+    e.isVisible = element => {
+        return true;
+    };
     return e;
 };
 
@@ -2568,17 +2571,51 @@ function executeAfterViewInit(editor) {
 }
 
 class VirtualScrollDebugOverlay {
+    static { this.storageKey = 'slate_virtual_scroll_debug_overlay_state'; }
+    static { this.minWidth = 320; }
+    static { this.minHeight = 240; }
+    static { this.defaultWidth = 410; }
+    static { this.defaultHeight = 480; }
+    static getInstance(doc) {
+        if (!this.instance) {
+            this.instance = new VirtualScrollDebugOverlay(doc);
+        }
+        this.instance.init();
+        return this.instance;
+    }
+    static log(doc, type, ...args) {
+        this.getInstance(doc).log(type, ...args);
+    }
+    static syncScrollTop(doc, value) {
+        const instance = this.getInstance(doc);
+        instance.setScrollTopValue(value);
+    }
     constructor(doc) {
         this.doc = doc;
+        this.state = {
+            left: 16,
+            top: 16,
+            collapsed: false,
+            width: VirtualScrollDebugOverlay.defaultWidth,
+            height: VirtualScrollDebugOverlay.defaultHeight
+        };
         this.originalConsoleLog = console.log.bind(console);
         this.originalConsoleWarn = console.warn.bind(console);
         this.dragOffsetX = 0;
         this.dragOffsetY = 0;
         this.isDragging = false;
+        this.isResizing = false;
+        this.resizeStartX = 0;
+        this.resizeStartY = 0;
+        this.resizeStartWidth = 0;
+        this.resizeStartHeight = 0;
+        this.dragMoved = false;
+        this.wasDragged = false;
         this.onDragging = (event) => {
             if (!this.isDragging || !this.container) {
                 return;
             }
+            this.dragMoved = true;
             const nextLeft = event.clientX - this.dragOffsetX;
             const nextTop = event.clientY - this.dragOffsetY;
             this.container.style.left = `${nextLeft}px`;
@@ -2591,17 +2628,47 @@ class VirtualScrollDebugOverlay {
                 return;
             }
             this.isDragging = false;
+            this.wasDragged = this.dragMoved;
+            this.dragMoved = false;
             this.doc.removeEventListener('mousemove', this.onDragging);
             this.doc.removeEventListener('mouseup', this.onDragEnd);
             if (this.container) {
+                const rect = this.container.getBoundingClientRect();
+                this.state.left = rect.left;
+                this.state.top = rect.top;
+                this.persistState();
                 this.container.style.transition = '';
             }
         };
+        this.onResizing = (event) => {
+            if (!this.isResizing || !this.container) {
+                return;
+            }
+            const deltaX = event.clientX - this.resizeStartX;
+            const deltaY = event.clientY - this.resizeStartY;
+            const nextWidth = Math.max(VirtualScrollDebugOverlay.minWidth, this.resizeStartWidth + deltaX);
+            const nextHeight = Math.max(VirtualScrollDebugOverlay.minHeight, this.resizeStartHeight + deltaY);
+            this.state.width = nextWidth;
+            this.state.height = nextHeight;
+            this.applySize();
+        };
+        this.onResizeEnd = () => {
+            if (!this.isResizing) {
+                return;
+            }
+            this.isResizing = false;
+            this.doc.removeEventListener('mousemove', this.onResizing);
+            this.doc.removeEventListener('mouseup', this.onResizeEnd);
+            this.persistState();
+        };
     }
     init() {
         if (!this.container) {
             this.createContainer();
         }
+        else {
+            this.applyState();
+        }
     }
     log(type, ...args) {
         this.init();
@@ -2616,58 +2683,75 @@ class VirtualScrollDebugOverlay {
     dispose() {
         this.container?.remove();
         this.container = undefined;
+        this.contentWrapper = undefined;
+        this.bubble = undefined;
         this.logList = undefined;
         this.selectorInput = undefined;
         this.distanceInput = undefined;
+        this.collapseToggle = undefined;
+        this.resizeHandle = undefined;
         this.doc.removeEventListener('mousemove', this.onDragging);
         this.doc.removeEventListener('mouseup', this.onDragEnd);
+        this.doc.removeEventListener('mousemove', this.onResizing);
+        this.doc.removeEventListener('mouseup', this.onResizeEnd);
         this.isDragging = false;
+        this.isResizing = false;
     }
     createContainer() {
+        this.loadState();
         const doc = this.doc;
         const container = doc.createElement('div');
         container.style.position = 'fixed';
-        container.style.left = '16px';
-        container.style.top = '16px';
         container.style.right = 'auto';
         container.style.bottom = 'auto';
-        container.style.width = '360px';
-        container.style.maxHeight = '70vh';
-        container.style.padding = '12px';
         container.style.boxSizing = 'border-box';
         container.style.background = 'rgba(17, 24, 39, 0.95)';
         container.style.color = '#e5e7eb';
         container.style.fontSize = '12px';
-        container.style.fontFamily = 'Menlo, Consolas, monospace';
         container.style.border = '1px solid #1f2937';
         container.style.borderRadius = '10px';
+        container.style.fontFamily = 'Menlo, Consolas, monospace';
         container.style.boxShadow = '0 10px 30px rgba(0, 0, 0, 0.35)';
         container.style.zIndex = '9999';
         container.style.display = 'flex';
         container.style.flexDirection = 'column';
         container.style.gap = '10px';
+        container.style.minWidth = `${VirtualScrollDebugOverlay.minWidth}px`;
+        container.style.minHeight = `${VirtualScrollDebugOverlay.minHeight}px`;
+        container.style.maxHeight = '80vh';
+        container.style.cursor = 'default';
+        container.addEventListener('mousedown', event => {
+            if (this.state.collapsed) {
+                this.startDrag(event);
+            }
+        });
         const header = doc.createElement('div');
         header.style.display = 'flex';
         header.style.alignItems = 'center';
         header.style.justifyContent = 'space-between';
         header.style.cursor = 'move';
         header.addEventListener('mousedown', event => {
-            if (!this.container) {
-                return;
-            }
-            const rect = this.container.getBoundingClientRect();
-            this.isDragging = true;
-            this.dragOffsetX = event.clientX - rect.left;
-            this.dragOffsetY = event.clientY - rect.top;
-            this.container.style.transition = 'none';
-            this.doc.addEventListener('mousemove', this.onDragging);
-            this.doc.addEventListener('mouseup', this.onDragEnd);
-            event.preventDefault();
+            this.startDrag(event);
         });
         const title = doc.createElement('div');
         title.textContent = 'Virtual Scroll Debug';
         title.style.fontWeight = '600';
         title.style.letterSpacing = '0.3px';
+        const actions = doc.createElement('div');
+        actions.style.display = 'flex';
+        actions.style.gap = '6px';
+        const collapseButton = doc.createElement('button');
+        collapseButton.type = 'button';
+        collapseButton.textContent = '折叠';
+        collapseButton.style.background = '#1f2937';
+        collapseButton.style.color = '#e5e7eb';
+        collapseButton.style.border = '1px solid #374151';
+        collapseButton.style.borderRadius = '6px';
+        collapseButton.style.padding = '4px 8px';
+        collapseButton.style.cursor = 'pointer';
+        collapseButton.addEventListener('click', () => {
+            this.setCollapsed(!this.state.collapsed);
+        });
         const clearButton = doc.createElement('button');
         clearButton.type = 'button';
         clearButton.textContent = '清除日志';
@@ -2682,11 +2766,13 @@ class VirtualScrollDebugOverlay {
                 this.logList.innerHTML = '';
             }
         });
+        actions.appendChild(collapseButton);
+        actions.appendChild(clearButton);
         header.appendChild(title);
-        header.appendChild(clearButton);
+        header.appendChild(actions);
         const scrollForm = doc.createElement('div');
         scrollForm.style.display = 'grid';
-        scrollForm.style.gridTemplateColumns = '1fr 90px 70px';
+        scrollForm.style.gridTemplateColumns = '1fr 110px 50px';
         scrollForm.style.gap = '6px';
         scrollForm.style.alignItems = 'center';
         const selectorInput = doc.createElement('input');
@@ -2752,14 +2838,194 @@ class VirtualScrollDebugOverlay {
         logList.style.display = 'flex';
         logList.style.flexDirection = 'column';
         logList.style.gap = '6px';
-        container.appendChild(header);
-        container.appendChild(scrollForm);
-        container.appendChild(logList);
+        logList.style.flex = '1';
+        logList.style.minHeight = '160px';
+        const bubble = doc.createElement('div');
+        bubble.textContent = 'VS';
+        bubble.style.display = 'none';
+        bubble.style.alignItems = 'center';
+        bubble.style.justifyContent = 'center';
+        bubble.style.fontWeight = '700';
+        bubble.style.fontSize = '14px';
+        bubble.style.letterSpacing = '0.5px';
+        bubble.style.width = '100%';
+        bubble.style.height = '100%';
+        bubble.style.userSelect = 'none';
+        bubble.addEventListener('click', () => {
+            if (this.wasDragged) {
+                this.wasDragged = false;
+                return;
+            }
+            this.setCollapsed(false);
+        });
+        const contentWrapper = doc.createElement('div');
+        contentWrapper.style.display = 'flex';
+        contentWrapper.style.flexDirection = 'column';
+        contentWrapper.style.gap = '10px';
+        contentWrapper.style.width = '100%';
+        contentWrapper.style.height = '100%';
+        contentWrapper.appendChild(header);
+        contentWrapper.appendChild(scrollForm);
+        contentWrapper.appendChild(logList);
+        container.appendChild(contentWrapper);
+        container.appendChild(bubble);
+        const resizeHandle = doc.createElement('div');
+        resizeHandle.style.position = 'absolute';
+        resizeHandle.style.right = '6px';
+        resizeHandle.style.bottom = '6px';
+        resizeHandle.style.width = '14px';
+        resizeHandle.style.height = '14px';
+        resizeHandle.style.cursor = 'nwse-resize';
+        resizeHandle.style.borderRight = '2px solid #4b5563';
+        resizeHandle.style.borderBottom = '2px solid #4b5563';
+        resizeHandle.addEventListener('mousedown', event => {
+            this.startResize(event);
+        });
+        container.appendChild(resizeHandle);
         doc.body.appendChild(container);
         this.container = container;
+        this.contentWrapper = contentWrapper;
+        this.bubble = bubble;
         this.logList = logList;
         this.selectorInput = selectorInput;
         this.distanceInput = distanceInput;
+        this.collapseToggle = collapseButton;
+        this.resizeHandle = resizeHandle;
+        this.applyState();
+    }
+    startDrag(event) {
+        if (event.button !== 0) {
+            return;
+        }
+        if (!this.container) {
+            return;
+        }
+        const rect = this.container.getBoundingClientRect();
+        this.isDragging = true;
+        this.wasDragged = false;
+        this.dragMoved = false;
+        this.dragOffsetX = event.clientX - rect.left;
+        this.dragOffsetY = event.clientY - rect.top;
+        this.container.style.transition = 'none';
+        this.doc.addEventListener('mousemove', this.onDragging);
+        this.doc.addEventListener('mouseup', this.onDragEnd);
+        if (!this.state.collapsed) {
+            event.preventDefault();
+        }
+    }
+    startResize(event) {
+        if (event.button !== 0 || this.state.collapsed) {
+            return;
+        }
+        if (!this.container) {
+            return;
+        }
+        const rect = this.container.getBoundingClientRect();
+        this.isResizing = true;
+        this.resizeStartX = event.clientX;
+        this.resizeStartY = event.clientY;
+        this.resizeStartWidth = rect.width;
+        this.resizeStartHeight = rect.height;
+        this.doc.addEventListener('mousemove', this.onResizing);
+        this.doc.addEventListener('mouseup', this.onResizeEnd);
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    applyPosition() {
+        if (!this.container) {
+            return;
+        }
+        this.container.style.left = `${this.state.left}px`;
+        this.container.style.top = `${this.state.top}px`;
+    }
+    applySize() {
+        if (!this.container) {
+            return;
+        }
+        const width = Math.max(VirtualScrollDebugOverlay.minWidth, this.state.width || VirtualScrollDebugOverlay.defaultWidth);
+        const height = Math.max(VirtualScrollDebugOverlay.minHeight, this.state.height || VirtualScrollDebugOverlay.defaultHeight);
+        this.state.width = width;
+        this.state.height = height;
+        this.container.style.width = `${width}px`;
+        this.container.style.height = `${height}px`;
+    }
+    applyCollapsedState() {
+        if (!this.container || !this.contentWrapper || !this.bubble || !this.collapseToggle) {
+            return;
+        }
+        if (this.state.collapsed) {
+            this.container.style.width = '36px';
+            this.container.style.height = '36px';
+            this.container.style.minWidth = '';
+            this.container.style.minHeight = '';
+            this.container.style.padding = '0';
+            this.container.style.borderRadius = '50%';
+            this.container.style.display = 'flex';
+            this.container.style.flexDirection = 'row';
+            this.container.style.alignItems = 'center';
+            this.container.style.justifyContent = 'center';
+            this.container.style.cursor = 'move';
+            this.contentWrapper.style.display = 'none';
+            this.bubble.style.display = 'flex';
+            this.collapseToggle.textContent = '展开';
+            this.resizeHandle.style.display = 'none';
+        }
+        else {
+            this.applySize();
+            this.container.style.padding = '12px';
+            this.container.style.borderRadius = '10px';
+            this.container.style.display = 'flex';
+            this.container.style.flexDirection = 'column';
+            this.container.style.gap = '10px';
+            this.container.style.cursor = 'default';
+            this.contentWrapper.style.display = 'flex';
+            this.bubble.style.display = 'none';
+            this.collapseToggle.textContent = '折叠';
+            this.resizeHandle.style.display = 'block';
+        }
+    }
+    setCollapsed(collapsed) {
+        this.state.collapsed = collapsed;
+        this.applyCollapsedState();
+        this.persistState();
+    }
+    applyState() {
+        this.applyPosition();
+        this.applyCollapsedState();
+    }
+    loadState() {
+        try {
+            const raw = this.doc.defaultView?.localStorage?.getItem(VirtualScrollDebugOverlay.storageKey);
+            if (raw) {
+                const parsed = JSON.parse(raw);
+                if (typeof parsed.left === 'number') {
+                    this.state.left = parsed.left;
+                }
+                if (typeof parsed.top === 'number') {
+                    this.state.top = parsed.top;
+                }
+                if (typeof parsed.collapsed === 'boolean') {
+                    this.state.collapsed = parsed.collapsed;
+                }
+                if (typeof parsed.width === 'number') {
+                    this.state.width = parsed.width;
+                }
+                if (typeof parsed.height === 'number') {
+                    this.state.height = parsed.height;
+                }
+            }
+        }
+        catch {
+            // ignore storage errors
+        }
+    }
+    persistState() {
+        try {
+            this.doc.defaultView?.localStorage?.setItem(VirtualScrollDebugOverlay.storageKey, JSON.stringify(this.state));
+        }
+        catch {
+            // ignore storage errors
+        }
     }
     appendLog(type, ...args) {
         if (!this.logList) {
@@ -2794,6 +3060,11 @@ class VirtualScrollDebugOverlay {
             return String(value);
         }
     }
+    setScrollTopValue(value) {
+        if (this.distanceInput) {
+            this.distanceInput.value = String(value ?? 0);
+        }
+    }
 }
 
 const JUST_NOW_UPDATED_VIRTUAL_VIEW = new WeakMap();
@@ -2803,8 +3074,8 @@ const forceOnDOMPaste = IS_SAFARI;
 const isDebug = localStorage.getItem(SLATE_DEBUG_KEY) === 'true';
 class SlateEditable {
     set virtualScroll(config) {
-        this.virtualConfig = config;
-        this.doVirtualScroll();
+        this.virtualScrollConfig = config;
+        this.tryUpdateVirtualViewport();
     }
     get hasBeforeInputSupport() {
         return HAS_BEFORE_INPUT_SUPPORT;
@@ -2849,14 +3120,14 @@ class SlateEditable {
                 return null;
             }
         };
-        this.virtualConfig = {
+        this.virtualScrollConfig = {
             enabled: false,
             scrollTop: 0,
             viewportHeight: 0
         };
-        this.renderedChildren = [];
-        this.virtualVisibleIndexes = new Set();
-        this.measuredHeights = new Map();
+        this.inViewportChildren = [];
+        this.inViewportIndics = new Set();
+        this.keyHeightMap = new Map();
         // the height from scroll container top to editor top height element
         this.businessHeight = 0;
         this.virtualScrollInitialized = false;
@@ -2870,7 +3141,7 @@ class SlateEditable {
         NODE_TO_ELEMENT.set(this.editor, this.elementRef.nativeElement);
         ELEMENT_TO_NODE.set(this.elementRef.nativeElement, this.editor);
         IS_READ_ONLY.set(this.editor, this.readonly);
-        ELEMENT_KEY_TO_HEIGHTS.set(this.editor, this.measuredHeights);
+        ELEMENT_KEY_TO_HEIGHTS.set(this.editor, this.keyHeightMap);
         EDITOR_TO_ON_CHANGE.set(this.editor, () => {
             this.ngZone.run(() => {
                 this.onChange();
@@ -2884,7 +3155,7 @@ class SlateEditable {
         // add browser class
         let browserClass = IS_FIREFOX ? 'firefox' : IS_SAFARI ? 'safari' : '';
         browserClass && this.elementRef.nativeElement.classList.add(browserClass);
-        this.initializeVirtualScrolling();
+        this.initializeVirtualScroll();
         this.listRender = new ListRender(this.viewContext, this.viewContainerRef, this.getOutletParent, this.getOutletElement);
     }
     ngOnChanges(simpleChanges) {
@@ -2916,9 +3187,9 @@ class SlateEditable {
         if (value && value.length) {
             this.editor.children = value;
             this.initializeContext();
-            const virtualView = this.refreshVirtualView();
+            const virtualView = this.calculateVirtualViewport();
             this.applyVirtualView(virtualView);
-            const childrenForRender = virtualView.renderedChildren;
+            const childrenForRender = virtualView.inViewportChildren;
             if (!this.listRender.initialized) {
                 this.listRender.initialize(childrenForRender, this.editor, this.context);
             }
@@ -2959,8 +3230,8 @@ class SlateEditable {
     toNativeSelection() {
         try {
             let { selection } = this.editor;
-            if (this.virtualConfig?.enabled && selection) {
-                const indics = Array.from(this.virtualVisibleIndexes.values());
+            if (this.virtualScrollConfig?.enabled && selection) {
+                const indics = Array.from(this.inViewportIndics.values());
                 if (indics.length > 0) {
                     const currentVisibleRange = {
                         anchor: Editor.start(this.editor, [indics[0]]),
@@ -3064,10 +3335,10 @@ class SlateEditable {
     ngDoCheck() { }
     forceRender() {
         this.updateContext();
-        const virtualView = this.refreshVirtualView();
+        const virtualView = this.calculateVirtualViewport();
         this.applyVirtualView(virtualView);
-        const visibleIndexes = Array.from(this.virtualVisibleIndexes);
-        this.listRender.update(this.renderedChildren, this.editor, this.context);
+        const visibleIndexes = Array.from(this.inViewportIndics);
+        this.listRender.update(this.inViewportChildren, this.editor, this.context);
         this.remeasureHeightByIndics(visibleIndexes);
         // repair collaborative editing when Chinese input is interrupted by other users' cursors
         // when the DOMElement where the selection is located is removed
@@ -3107,9 +3378,9 @@ class SlateEditable {
     render() {
         const changed = this.updateContext();
         if (changed) {
-            const virtualView = this.refreshVirtualView();
+            const virtualView = this.calculateVirtualViewport();
             this.applyVirtualView(virtualView);
-            this.listRender.update(virtualView.renderedChildren, this.editor, this.context);
+            this.listRender.update(virtualView.inViewportChildren, this.editor, this.context);
             this.scheduleMeasureVisibleHeights();
         }
     }
@@ -3173,14 +3444,14 @@ class SlateEditable {
         decorations.push(...placeholderDecorations);
         return decorations;
     }
-    shouldUseVirtual() {
-        return !!(this.virtualConfig && this.virtualConfig.enabled);
+    isEnabledVirtualScroll() {
+        return !!(this.virtualScrollConfig && this.virtualScrollConfig.enabled);
     }
-    initializeVirtualScrolling() {
+    initializeVirtualScroll() {
         if (this.virtualScrollInitialized) {
             return;
         }
-        if (this.virtualConfig && this.virtualConfig.enabled) {
+        if (this.virtualScrollConfig && this.virtualScrollConfig.enabled) {
             this.virtualScrollInitialized = true;
             this.virtualTopHeightElement = document.createElement('div');
             this.virtualTopHeightElement.classList.add('virtual-top-height');
@@ -3198,18 +3469,17 @@ class SlateEditable {
             this.editorResizeObserver = new ResizeObserver(entries => {
                 if (entries.length > 0 && entries[0].contentRect.width !== editorResizeObserverRectWidth) {
                     editorResizeObserverRectWidth = entries[0].contentRect.width;
-                    this.remeasureHeightByIndics(Array.from(this.virtualVisibleIndexes));
+                    this.remeasureHeightByIndics(Array.from(this.inViewportIndics));
                 }
             });
             this.editorResizeObserver.observe(this.elementRef.nativeElement);
             if (isDebug) {
                 const doc = this.elementRef?.nativeElement?.ownerDocument ?? document;
-                this.debugOverlay = new VirtualScrollDebugOverlay(doc);
-                this.debugOverlay.init();
+                VirtualScrollDebugOverlay.getInstance(doc);
             }
         }
     }
-    changeVirtualHeight(topHeight, bottomHeight) {
+    setVirtualSpaceHeight(topHeight, bottomHeight) {
         if (!this.virtualScrollInitialized) {
             return;
         }
@@ -3217,25 +3487,22 @@ class SlateEditable {
         this.virtualBottomHeightElement.style.height = `${bottomHeight}px`;
     }
     debugLog(type, ...args) {
-        if (!this.debugOverlay) {
-            const doc = this.elementRef?.nativeElement?.ownerDocument ?? document;
-            this.debugOverlay = new VirtualScrollDebugOverlay(doc);
-        }
-        this.debugOverlay.log(type, ...args);
+        const doc = this.elementRef?.nativeElement?.ownerDocument ?? document;
+        VirtualScrollDebugOverlay.log(doc, type, ...args);
     }
-    doVirtualScroll() {
+    tryUpdateVirtualViewport() {
         this.refreshVirtualViewAnimId && cancelAnimationFrame(this.refreshVirtualViewAnimId);
         this.refreshVirtualViewAnimId = requestAnimationFrame(() => {
-            let virtualView = this.refreshVirtualView();
-            let diff = this.diffVirtualView(virtualView);
+            let virtualView = this.calculateVirtualViewport();
+            let diff = this.diffVirtualViewport(virtualView);
             if (!diff.isDiff) {
                 return;
             }
             if (diff.isMissingTop) {
                 const result = this.remeasureHeightByIndics(diff.diffTopRenderedIndexes);
                 if (result) {
-                    virtualView = this.refreshVirtualView();
-                    diff = this.diffVirtualView(virtualView, 'second');
+                    virtualView = this.calculateVirtualViewport();
+                    diff = this.diffVirtualViewport(virtualView, 'second');
                     if (!diff.isDiff) {
                         return;
                     }
@@ -3243,7 +3510,7 @@ class SlateEditable {
             }
             this.applyVirtualView(virtualView);
             if (this.listRender.initialized) {
-                this.listRender.update(virtualView.renderedChildren, this.editor, this.context);
+                this.listRender.update(virtualView.inViewportChildren, this.editor, this.context);
                 if (!AngularEditor.isReadOnly(this.editor) && this.editor.selection) {
                     this.toNativeSelection();
                 }
@@ -3251,22 +3518,26 @@ class SlateEditable {
             this.scheduleMeasureVisibleHeights();
         });
     }
-    refreshVirtualView() {
+    calculateVirtualViewport() {
         const children = (this.editor.children || []);
-        if (!children.length || !this.shouldUseVirtual()) {
+        if (!children.length || !this.isEnabledVirtualScroll()) {
             return {
-                renderedChildren: children,
+                inViewportChildren: children,
                 visibleIndexes: new Set(),
                 top: 0,
                 bottom: 0,
                 heights: []
             };
         }
-        const scrollTop = this.virtualConfig.scrollTop;
-        const viewportHeight = this.virtualConfig.viewportHeight ?? 0;
+        const scrollTop = this.virtualScrollConfig.scrollTop;
+        if (isDebug) {
+            const doc = this.elementRef?.nativeElement?.ownerDocument ?? document;
+            VirtualScrollDebugOverlay.syncScrollTop(doc, Number.isFinite(scrollTop) ? scrollTop : 0);
+        }
+        const viewportHeight = this.virtualScrollConfig.viewportHeight ?? 0;
         if (!viewportHeight) {
             return {
-                renderedChildren: [],
+                inViewportChildren: [],
                 visibleIndexes: new Set(),
                 top: 0,
                 bottom: 0,
@@ -3306,7 +3577,7 @@ class SlateEditable {
         const top = visibleStartIndex === -1 ? 0 : accumulatedHeights[visibleStartIndex];
         const bottom = totalHeight - accumulatedHeights[visibleEndIndex + 1];
         return {
-            renderedChildren: visible.length ? visible : children,
+            inViewportChildren: visible.length ? visible : children,
             visibleIndexes: new Set(visibleIndexes),
             top,
             bottom,
@@ -3314,19 +3585,19 @@ class SlateEditable {
         };
     }
     applyVirtualView(virtualView) {
-        this.renderedChildren = virtualView.renderedChildren;
-        this.changeVirtualHeight(virtualView.top, virtualView.bottom);
-        this.virtualVisibleIndexes = virtualView.visibleIndexes;
+        this.inViewportChildren = virtualView.inViewportChildren;
+        this.setVirtualSpaceHeight(virtualView.top, virtualView.bottom);
+        this.inViewportIndics = virtualView.visibleIndexes;
     }
-    diffVirtualView(virtualView, stage = 'first') {
-        if (!this.renderedChildren.length) {
+    diffVirtualViewport(virtualView, stage = 'first') {
+        if (!this.inViewportChildren.length) {
             return {
                 isDiff: true,
                 diffTopRenderedIndexes: [],
                 diffBottomRenderedIndexes: []
             };
         }
-        const oldVisibleIndexes = [...this.virtualVisibleIndexes];
+        const oldVisibleIndexes = [...this.inViewportIndics];
         const newVisibleIndexes = [...virtualView.visibleIndexes];
         const firstNewIndex = newVisibleIndexes[0];
         const lastNewIndex = newVisibleIndexes[newVisibleIndexes.length - 1];
@@ -3382,7 +3653,7 @@ class SlateEditable {
                 }
             }
             if (isDebug) {
-                this.debugLog('log', `====== diffVirtualView stage: ${stage} ======`);
+                this.debugLog('log', `====== diffVirtualViewport stage: ${stage} ======`);
                 this.debugLog('log', 'oldVisibleIndexes:', oldVisibleIndexes);
                 this.debugLog('log', 'newVisibleIndexes:', newVisibleIndexes);
                 this.debugLog('log', 'diffTopRenderedIndexes:', isMissingTop ? '-' : isAddedTop ? '+' : '-', diffTopRenderedIndexes, diffTopRenderedIndexes.map(index => this.getBlockHeight(index, 0)));
@@ -3413,11 +3684,22 @@ class SlateEditable {
     }
     getBlockHeight(index, defaultHeight = VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT) {
         const node = this.editor.children[index];
+        const isVisible = this.editor.isVisible(node);
+        if (!isVisible) {
+            return 0;
+        }
         if (!node) {
             return defaultHeight;
         }
         const key = AngularEditor.findKey(this.editor, node);
-        return this.measuredHeights.get(key.id) ?? defaultHeight;
+        const height = this.keyHeightMap.get(key.id);
+        if (typeof height === 'number') {
+            return height;
+        }
+        if (this.keyHeightMap.has(key.id)) {
+            console.error('getBlockHeight: invalid height value', key.id, height);
+        }
+        return defaultHeight;
     }
     buildAccumulatedHeight(heights) {
         const accumulatedHeights = new Array(heights.length + 1).fill(0);
@@ -3428,7 +3710,7 @@ class SlateEditable {
         return accumulatedHeights;
     }
     scheduleMeasureVisibleHeights() {
-        if (!this.shouldUseVirtual()) {
+        if (!this.isEnabledVirtualScroll()) {
             return;
         }
         this.measureVisibleHeightsAnimId && cancelAnimationFrame(this.measureVisibleHeightsAnimId);
@@ -3438,14 +3720,14 @@ class SlateEditable {
     }
     measureVisibleHeights() {
         const children = (this.editor.children || []);
-        this.virtualVisibleIndexes.forEach(index => {
+        this.inViewportIndics.forEach(index => {
             const node = children[index];
             if (!node) {
                 return;
             }
             const key = AngularEditor.findKey(this.editor, node);
             // 跳过已测过的块，除非强制测量
-            if (this.measuredHeights.has(key.id)) {
+            if (this.keyHeightMap.has(key.id)) {
                 return;
             }
             const view = ELEMENT_TO_COMPONENT.get(node);
@@ -3455,11 +3737,11 @@ class SlateEditable {
             const ret = view.getRealHeight();
             if (ret instanceof Promise) {
                 ret.then(height => {
-                    this.measuredHeights.set(key.id, height);
+                    this.keyHeightMap.set(key.id, height);
                 });
             }
             else {
-                this.measuredHeights.set(key.id, ret);
+                this.keyHeightMap.set(key.id, ret);
             }
         });
     }
@@ -3476,12 +3758,12 @@ class SlateEditable {
             if (!view) {
                 return;
             }
-            const prevHeight = this.measuredHeights.get(key.id);
+            const prevHeight = this.keyHeightMap.get(key.id);
             const ret = view.getRealHeight();
             if (ret instanceof Promise) {
                 ret.then(height => {
                     if (height !== prevHeight) {
-                        this.measuredHeights.set(key.id, height);
+                        this.keyHeightMap.set(key.id, height);
                         isHeightChanged = true;
                         if (isDebug) {
                             this.debugLog('log', `remeasureHeightByIndics, index: ${index} prevHeight: ${prevHeight} newHeight: ${height}`);
@@ -3491,7 +3773,7 @@ class SlateEditable {
             }
             else {
                 if (ret !== prevHeight) {
-                    this.measuredHeights.set(key.id, ret);
+                    this.keyHeightMap.set(key.id, ret);
                     isHeightChanged = true;
                     if (isDebug) {
                         this.debugLog('log', `remeasureHeightByIndics, index: ${index} prevHeight: ${prevHeight} newHeight: ${ret}`);
@@ -4198,8 +4480,6 @@ class SlateEditable {
     //#endregion
     ngOnDestroy() {
         this.editorResizeObserver?.disconnect();
-        this.debugOverlay?.dispose();
-        this.debugOverlay = undefined;
         NODE_TO_ELEMENT.delete(this.editor);
         this.manualListeners.forEach(manualListener => {
             manualListener();