slate-angular 20.2.0-next.1 → 20.2.0-next.10

package/fesm2022/slate-angular.mjs

@@ -1135,6 +1135,9 @@ const withAngular = (editor, clipboardFormatKey = 'x-slate-fragment') => {
             NODE_TO_KEY.set(node, key);
         }
     };
+    e.selectAll = () => {
+        Transforms.select(e, []);
+    };
     return e;
 };
 
@@ -1739,6 +1742,7 @@ class BaseElementFlavour extends BaseFlavour {
         this.getOutletElement = () => {
             return this.nativeElement.querySelector('.children-outlet');
         };
+        this.stableHeight = null;
     }
     get element() {
         return this._context && this._context.element;
@@ -1824,11 +1828,21 @@ 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);
-        return Promise.resolve(target.offsetHeight + parseFloat(computedStyle.marginTop) + parseFloat(computedStyle.marginBottom));
+        const height = Math.ceil(target.getBoundingClientRect().height) + parseFloat(computedStyle.marginTop) + parseFloat(computedStyle.marginBottom);
+        if (this.isStableHeight()) {
+            this.stableHeight = height;
+        }
+        return height;
     }
 }
 
@@ -2553,24 +2567,244 @@ function executeAfterViewInit(editor) {
     clearAfterViewInitQueue(editor);
 }
 
+class VirtualScrollDebugOverlay {
+    constructor(doc) {
+        this.doc = doc;
+        this.originalConsoleLog = console.log.bind(console);
+        this.originalConsoleWarn = console.warn.bind(console);
+        this.dragOffsetX = 0;
+        this.dragOffsetY = 0;
+        this.isDragging = false;
+        this.onDragging = (event) => {
+            if (!this.isDragging || !this.container) {
+                return;
+            }
+            const nextLeft = event.clientX - this.dragOffsetX;
+            const nextTop = event.clientY - this.dragOffsetY;
+            this.container.style.left = `${nextLeft}px`;
+            this.container.style.top = `${nextTop}px`;
+            this.container.style.right = 'auto';
+            this.container.style.bottom = 'auto';
+        };
+        this.onDragEnd = () => {
+            if (!this.isDragging) {
+                return;
+            }
+            this.isDragging = false;
+            this.doc.removeEventListener('mousemove', this.onDragging);
+            this.doc.removeEventListener('mouseup', this.onDragEnd);
+            if (this.container) {
+                this.container.style.transition = '';
+            }
+        };
+    }
+    init() {
+        if (!this.container) {
+            this.createContainer();
+        }
+    }
+    log(type, ...args) {
+        this.init();
+        if (type === 'warn') {
+            this.originalConsoleWarn(...args);
+        }
+        else {
+            this.originalConsoleLog(...args);
+        }
+        this.appendLog(type, ...args);
+    }
+    dispose() {
+        this.container?.remove();
+        this.container = undefined;
+        this.logList = undefined;
+        this.selectorInput = undefined;
+        this.distanceInput = undefined;
+        this.doc.removeEventListener('mousemove', this.onDragging);
+        this.doc.removeEventListener('mouseup', this.onDragEnd);
+        this.isDragging = false;
+    }
+    createContainer() {
+        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.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';
+        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();
+        });
+        const title = doc.createElement('div');
+        title.textContent = 'Virtual Scroll Debug';
+        title.style.fontWeight = '600';
+        title.style.letterSpacing = '0.3px';
+        const clearButton = doc.createElement('button');
+        clearButton.type = 'button';
+        clearButton.textContent = '清除日志';
+        clearButton.style.background = '#374151';
+        clearButton.style.color = '#e5e7eb';
+        clearButton.style.border = '1px solid #4b5563';
+        clearButton.style.borderRadius = '6px';
+        clearButton.style.padding = '4px 10px';
+        clearButton.style.cursor = 'pointer';
+        clearButton.addEventListener('click', () => {
+            if (this.logList) {
+                this.logList.innerHTML = '';
+            }
+        });
+        header.appendChild(title);
+        header.appendChild(clearButton);
+        const scrollForm = doc.createElement('div');
+        scrollForm.style.display = 'grid';
+        scrollForm.style.gridTemplateColumns = '1fr 90px 70px';
+        scrollForm.style.gap = '6px';
+        scrollForm.style.alignItems = 'center';
+        const selectorInput = doc.createElement('input');
+        selectorInput.placeholder = '滚动容器 selector';
+        selectorInput.style.padding = '6px 8px';
+        selectorInput.style.borderRadius = '6px';
+        selectorInput.style.border = '1px solid #4b5563';
+        selectorInput.style.background = '#111827';
+        selectorInput.style.color = '#e5e7eb';
+        selectorInput.autocomplete = 'off';
+        const distanceInput = doc.createElement('input');
+        distanceInput.placeholder = '滚动距离(px)';
+        distanceInput.type = 'number';
+        distanceInput.style.padding = '6px 8px';
+        distanceInput.style.borderRadius = '6px';
+        distanceInput.style.border = '1px solid #4b5563';
+        distanceInput.style.background = '#111827';
+        distanceInput.style.color = '#e5e7eb';
+        const scrollButton = doc.createElement('button');
+        scrollButton.type = 'button';
+        scrollButton.textContent = '滚动';
+        scrollButton.style.background = '#10b981';
+        scrollButton.style.color = '#0b1c15';
+        scrollButton.style.border = 'none';
+        scrollButton.style.borderRadius = '6px';
+        scrollButton.style.padding = '6px 10px';
+        scrollButton.style.cursor = 'pointer';
+        scrollButton.addEventListener('click', () => {
+            const selector = selectorInput.value.trim();
+            const distanceValue = Number(distanceInput.value ?? 0);
+            const distance = Number.isFinite(distanceValue) ? distanceValue : 0;
+            if (!selector) {
+                this.log('warn', '请先填写滚动容器 selector');
+                return;
+            }
+            const target = doc.querySelector(selector);
+            if (!target) {
+                this.log('warn', `未找到滚动容器: ${selector}`);
+                return;
+            }
+            if (typeof target.scrollTo === 'function') {
+                target.scrollTo({ top: distance, behavior: 'auto' });
+            }
+            else if (Object.prototype.hasOwnProperty.call(target, 'scrollTop')) {
+                target.scrollTop = distance;
+            }
+            else {
+                this.log('warn', '目标元素不支持滚动:', selector);
+                return;
+            }
+            this.log('log', `已将 ${selector} 滚动到`, distance);
+        });
+        scrollForm.appendChild(selectorInput);
+        scrollForm.appendChild(distanceInput);
+        scrollForm.appendChild(scrollButton);
+        const logList = doc.createElement('div');
+        logList.style.height = '260px';
+        logList.style.overflowY = 'auto';
+        logList.style.background = '#0b1220';
+        logList.style.border = '1px solid #1f2937';
+        logList.style.borderRadius = '8px';
+        logList.style.padding = '8px';
+        logList.style.display = 'flex';
+        logList.style.flexDirection = 'column';
+        logList.style.gap = '6px';
+        container.appendChild(header);
+        container.appendChild(scrollForm);
+        container.appendChild(logList);
+        doc.body.appendChild(container);
+        this.container = container;
+        this.logList = logList;
+        this.selectorInput = selectorInput;
+        this.distanceInput = distanceInput;
+    }
+    appendLog(type, ...args) {
+        if (!this.logList) {
+            return;
+        }
+        const item = this.doc.createElement('div');
+        item.style.display = 'flex';
+        item.style.gap = '6px';
+        item.style.alignItems = 'flex-start';
+        item.style.wordBreak = 'break-all';
+        item.style.color = type === 'warn' ? '#fbbf24' : '#9ca3af';
+        const time = this.doc.createElement('span');
+        time.textContent = new Date().toLocaleTimeString();
+        time.style.color = '#6b7280';
+        time.style.flexShrink = '0';
+        time.style.width = '72px';
+        const text = this.doc.createElement('span');
+        text.textContent = `[${type}] ${args.map(arg => this.formatValue(arg)).join(' ')}`;
+        item.appendChild(time);
+        item.appendChild(text);
+        this.logList.appendChild(item);
+        this.logList.scrollTop = this.logList.scrollHeight;
+    }
+    formatValue(value) {
+        if (typeof value === 'string') {
+            return value;
+        }
+        try {
+            return JSON.stringify(value);
+        }
+        catch (error) {
+            return String(value);
+        }
+    }
+}
+
 const JUST_NOW_UPDATED_VIRTUAL_VIEW = new WeakMap();
+const ELEMENT_KEY_TO_HEIGHTS = new WeakMap();
 // not correctly clipboardData on beforeinput
 const forceOnDOMPaste = IS_SAFARI;
+const isDebug = localStorage.getItem(SLATE_DEBUG_KEY) === 'true';
 class SlateEditable {
     set virtualScroll(config) {
         this.virtualConfig = config;
-        this.refreshVirtualViewAnimId && cancelAnimationFrame(this.refreshVirtualViewAnimId);
-        this.refreshVirtualViewAnimId = requestAnimationFrame(() => {
-            const virtualView = this.refreshVirtualView();
-            const diff = this.diffVirtualView(virtualView);
-            if (diff) {
-                this.applyVirtualView(virtualView);
-                if (this.listRender.initialized) {
-                    this.listRender.update(virtualView.renderedChildren, this.editor, this.context);
-                }
-                this.scheduleMeasureVisibleHeights();
-            }
-        });
+        this.doVirtualScroll();
     }
     get hasBeforeInputSupport() {
         return HAS_BEFORE_INPUT_SUPPORT;
@@ -2623,7 +2857,8 @@ class SlateEditable {
         this.renderedChildren = [];
         this.virtualVisibleIndexes = new Set();
         this.measuredHeights = new Map();
-        this.measurePending = false;
+        // the height from scroll container top to editor top height element
+        this.businessHeight = 0;
         this.virtualScrollInitialized = false;
     }
     ngOnInit() {
@@ -2635,6 +2870,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);
         EDITOR_TO_ON_CHANGE.set(this.editor, () => {
             this.ngZone.run(() => {
                 this.onChange();
@@ -2722,7 +2958,25 @@ class SlateEditable {
     }
     toNativeSelection() {
         try {
-            const { selection } = this.editor;
+            let { selection } = this.editor;
+            if (this.virtualConfig?.enabled && selection) {
+                const indics = Array.from(this.virtualVisibleIndexes.values());
+                if (indics.length > 0) {
+                    const currentVisibleRange = {
+                        anchor: Editor.start(this.editor, [indics[0]]),
+                        focus: Editor.end(this.editor, [indics[indics.length - 1]])
+                    };
+                    const [start, end] = Range.edges(selection);
+                    const forwardSelection = { anchor: start, focus: end };
+                    const intersectedSelection = Range.intersection(forwardSelection, currentVisibleRange);
+                    if (!intersectedSelection || !Range.equals(intersectedSelection, forwardSelection)) {
+                        selection = intersectedSelection;
+                        if (isDebug) {
+                            this.debugLog('log', `selection is not in visible range, selection: ${JSON.stringify(selection)}, intersectedSelection: ${JSON.stringify(intersectedSelection)}`);
+                        }
+                    }
+                }
+            }
             const root = AngularEditor.findDocumentOrShadowRoot(this.editor);
             const { activeElement } = root;
             const domSelection = root.getSelection();
@@ -2810,10 +3064,18 @@ class SlateEditable {
     ngDoCheck() { }
     forceRender() {
         this.updateContext();
-        const virtualView = this.refreshVirtualView();
-        this.applyVirtualView(virtualView);
-        this.listRender.update(virtualView.renderedChildren, this.editor, this.context);
-        this.scheduleMeasureVisibleHeights();
+        let visibleIndexes = Array.from(this.virtualVisibleIndexes);
+        const isFirstRender = visibleIndexes.length === 0;
+        if (isFirstRender) {
+            const virtualView = this.refreshVirtualView();
+            this.applyVirtualView(virtualView);
+            visibleIndexes = Array.from(this.virtualVisibleIndexes);
+        }
+        else {
+            this.renderedChildren = visibleIndexes.map(index => this.editor.children[index]);
+        }
+        this.listRender.update(this.renderedChildren, 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
         // the compositionupdate and compositionend events will no longer be fired
@@ -2929,13 +3191,29 @@ class SlateEditable {
             this.virtualScrollInitialized = true;
             this.virtualTopHeightElement = document.createElement('div');
             this.virtualTopHeightElement.classList.add('virtual-top-height');
+            this.virtualTopHeightElement.contentEditable = 'false';
             this.virtualBottomHeightElement = document.createElement('div');
             this.virtualBottomHeightElement.classList.add('virtual-bottom-height');
+            this.virtualBottomHeightElement.contentEditable = 'false';
             this.virtualCenterOutlet = document.createElement('div');
             this.virtualCenterOutlet.classList.add('virtual-center-outlet');
             this.elementRef.nativeElement.appendChild(this.virtualTopHeightElement);
             this.elementRef.nativeElement.appendChild(this.virtualCenterOutlet);
             this.elementRef.nativeElement.appendChild(this.virtualBottomHeightElement);
+            this.businessHeight = this.virtualTopHeightElement.getBoundingClientRect()?.top ?? 0;
+            let editorResizeObserverRectWidth = this.elementRef.nativeElement.getBoundingClientRect()?.width ?? 0;
+            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.editorResizeObserver.observe(this.elementRef.nativeElement);
+            if (isDebug) {
+                const doc = this.elementRef?.nativeElement?.ownerDocument ?? document;
+                this.debugOverlay = new VirtualScrollDebugOverlay(doc);
+                this.debugOverlay.init();
+            }
         }
     }
     changeVirtualHeight(topHeight, bottomHeight) {
@@ -2945,6 +3223,41 @@ class SlateEditable {
         this.virtualTopHeightElement.style.height = `${topHeight}px`;
         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);
+    }
+    doVirtualScroll() {
+        this.refreshVirtualViewAnimId && cancelAnimationFrame(this.refreshVirtualViewAnimId);
+        this.refreshVirtualViewAnimId = requestAnimationFrame(() => {
+            let virtualView = this.refreshVirtualView();
+            let diff = this.diffVirtualView(virtualView);
+            if (!diff.isDiff) {
+                return;
+            }
+            if (diff.isMissingTop) {
+                const result = this.remeasureHeightByIndics(diff.diffTopRenderedIndexes);
+                if (result) {
+                    virtualView = this.refreshVirtualView();
+                    diff = this.diffVirtualView(virtualView, 'second');
+                    if (!diff.isDiff) {
+                        return;
+                    }
+                }
+            }
+            this.applyVirtualView(virtualView);
+            if (this.listRender.initialized) {
+                this.listRender.update(virtualView.renderedChildren, this.editor, this.context);
+                if (!AngularEditor.isReadOnly(this.editor) && this.editor.selection) {
+                    this.toNativeSelection();
+                }
+            }
+            this.scheduleMeasureVisibleHeights();
+        });
+    }
     refreshVirtualView() {
         const children = (this.editor.children || []);
         if (!children.length || !this.shouldUseVirtual()) {
@@ -2956,10 +3269,9 @@ class SlateEditable {
                 heights: []
             };
         }
-        const scrollTop = this.virtualConfig.scrollTop ?? 0;
+        const scrollTop = this.virtualConfig.scrollTop;
         const viewportHeight = this.virtualConfig.viewportHeight ?? 0;
         if (!viewportHeight) {
-            // 已经启用虚拟滚动，但可视区域高度还未获取到，先置空不渲染
             return {
                 renderedChildren: [],
                 visibleIndexes: new Set(),
@@ -2968,36 +3280,41 @@ class SlateEditable {
                 heights: []
             };
         }
-        const bufferCount = this.virtualConfig.bufferCount ?? VIRTUAL_SCROLL_DEFAULT_BUFFER_COUNT;
+        const elementLength = children.length;
+        const adjustedScrollTop = Math.max(0, scrollTop - this.businessHeight);
         const heights = children.map((_, idx) => this.getBlockHeight(idx));
         const accumulatedHeights = this.buildAccumulatedHeight(heights);
-        let visibleStart = 0;
-        // 按真实或估算高度往后累加，找到滚动起点所在块
-        while (visibleStart < heights.length && accumulatedHeights[visibleStart + 1] <= scrollTop) {
-            visibleStart++;
-        }
-        // 向上预留 bufferCount 块
-        const startIndex = Math.max(0, visibleStart - bufferCount);
-        const top = accumulatedHeights[startIndex];
-        const bufferBelowHeight = this.getBufferBelowHeight(viewportHeight, visibleStart, bufferCount);
-        const targetHeight = accumulatedHeights[visibleStart] - top + viewportHeight + bufferBelowHeight;
+        const totalHeight = accumulatedHeights[elementLength];
+        const maxScrollTop = Math.max(0, totalHeight - viewportHeight);
+        const limitedScrollTop = Math.min(adjustedScrollTop, maxScrollTop);
+        const viewBottom = limitedScrollTop + viewportHeight + this.businessHeight;
+        let accumulatedOffset = 0;
+        let visibleStartIndex = -1;
         const visible = [];
         const visibleIndexes = [];
-        let accumulated = 0;
-        let cursor = startIndex;
-        // 循环累计高度超出目标高度（可视高度 + 上下 buffer）
-        while (cursor < children.length && accumulated < targetHeight) {
-            visible.push(children[cursor]);
-            visibleIndexes.push(cursor);
-            accumulated += this.getBlockHeight(cursor);
-            cursor++;
-        }
-        const bottom = heights.slice(cursor).reduce((acc, height) => acc + height, 0);
-        const renderedChildren = visible.length ? visible : children;
-        const visibleIndexesSet = new Set(visibleIndexes);
+        for (let i = 0; i < elementLength && accumulatedOffset < viewBottom; i++) {
+            const currentHeight = heights[i];
+            const nextOffset = accumulatedOffset + currentHeight;
+            // 可视区域有交集，加入渲染
+            if (nextOffset > limitedScrollTop && accumulatedOffset < viewBottom) {
+                if (visibleStartIndex === -1)
+                    visibleStartIndex = i; // 第一个相交起始位置
+                visible.push(children[i]);
+                visibleIndexes.push(i);
+            }
+            accumulatedOffset = nextOffset;
+        }
+        if (visibleStartIndex === -1 && elementLength) {
+            visibleStartIndex = elementLength - 1;
+            visible.push(children[visibleStartIndex]);
+            visibleIndexes.push(visibleStartIndex);
+        }
+        const visibleEndIndex = visibleStartIndex === -1 ? elementLength - 1 : (visibleIndexes[visibleIndexes.length - 1] ?? visibleStartIndex);
+        const top = visibleStartIndex === -1 ? 0 : accumulatedHeights[visibleStartIndex];
+        const bottom = totalHeight - accumulatedHeights[visibleEndIndex + 1];
         return {
-            renderedChildren,
-            visibleIndexes: visibleIndexesSet,
+            renderedChildren: visible.length ? visible : children,
+            visibleIndexes: new Set(visibleIndexes),
             top,
             bottom,
             heights
@@ -3008,86 +3325,106 @@ class SlateEditable {
         this.changeVirtualHeight(virtualView.top, virtualView.bottom);
         this.virtualVisibleIndexes = virtualView.visibleIndexes;
     }
-    diffVirtualView(virtualView) {
+    diffVirtualView(virtualView, stage = 'first') {
         if (!this.renderedChildren.length) {
-            return true;
+            return {
+                isDiff: true,
+                diffTopRenderedIndexes: [],
+                diffBottomRenderedIndexes: []
+            };
         }
         const oldVisibleIndexes = [...this.virtualVisibleIndexes];
         const newVisibleIndexes = [...virtualView.visibleIndexes];
-        if (newVisibleIndexes[0] !== oldVisibleIndexes[0] ||
-            newVisibleIndexes[newVisibleIndexes.length - 1] !== oldVisibleIndexes[oldVisibleIndexes.length - 1]) {
-            if (localStorage.getItem(SLATE_DEBUG_KEY) === 'true') {
-                const diffTopRenderedIndexes = [];
-                const diffBottomRenderedIndexes = [];
-                let direction = '';
-                if (newVisibleIndexes[0] > oldVisibleIndexes[0]) {
-                    // 向下
-                    direction = 'down';
-                    for (let index = 0; index < oldVisibleIndexes.length; index++) {
-                        const element = oldVisibleIndexes[index];
-                        if (!newVisibleIndexes.includes(element)) {
-                            diffTopRenderedIndexes.push(element);
-                        }
-                        else {
-                            break;
-                        }
+        const firstNewIndex = newVisibleIndexes[0];
+        const lastNewIndex = newVisibleIndexes[newVisibleIndexes.length - 1];
+        const firstOldIndex = oldVisibleIndexes[0];
+        const lastOldIndex = oldVisibleIndexes[oldVisibleIndexes.length - 1];
+        if (firstNewIndex !== firstOldIndex || lastNewIndex !== lastOldIndex) {
+            const diffTopRenderedIndexes = [];
+            const diffBottomRenderedIndexes = [];
+            const isMissingTop = firstNewIndex !== firstOldIndex && firstNewIndex > firstOldIndex;
+            const isAddedTop = firstNewIndex !== firstOldIndex && firstNewIndex < firstOldIndex;
+            const isMissingBottom = lastNewIndex !== lastOldIndex && lastOldIndex > lastNewIndex;
+            const isAddedBottom = lastNewIndex !== lastOldIndex && lastOldIndex < lastNewIndex;
+            if (isMissingTop || isAddedBottom) {
+                // 向下
+                for (let index = 0; index < oldVisibleIndexes.length; index++) {
+                    const element = oldVisibleIndexes[index];
+                    if (!newVisibleIndexes.includes(element)) {
+                        diffTopRenderedIndexes.push(element);
                     }
-                    for (let index = newVisibleIndexes.length - 1; index >= 0; index--) {
-                        const element = newVisibleIndexes[index];
-                        if (!oldVisibleIndexes.includes(element)) {
-                            diffBottomRenderedIndexes.push(element);
-                        }
-                        else {
-                            break;
-                        }
+                    else {
+                        break;
                     }
                 }
-                else {
-                    // 向上
-                    direction = 'up';
-                    for (let index = 0; index < newVisibleIndexes.length; index++) {
-                        const element = newVisibleIndexes[index];
-                        if (!oldVisibleIndexes.includes(element)) {
-                            diffTopRenderedIndexes.push(element);
-                        }
-                        else {
-                            break;
-                        }
+                for (let index = newVisibleIndexes.length - 1; index >= 0; index--) {
+                    const element = newVisibleIndexes[index];
+                    if (!oldVisibleIndexes.includes(element)) {
+                        diffBottomRenderedIndexes.push(element);
                     }
-                    for (let index = oldVisibleIndexes.length - 1; index >= 0; index--) {
-                        const element = oldVisibleIndexes[index];
-                        if (!newVisibleIndexes.includes(element)) {
-                            diffBottomRenderedIndexes.push(element);
-                        }
-                        else {
-                            break;
-                        }
+                    else {
+                        break;
+                    }
+                }
+            }
+            else if (isAddedTop || isMissingBottom) {
+                // 向上
+                for (let index = 0; index < newVisibleIndexes.length; index++) {
+                    const element = newVisibleIndexes[index];
+                    if (!oldVisibleIndexes.includes(element)) {
+                        diffTopRenderedIndexes.push(element);
+                    }
+                    else {
+                        break;
                     }
                 }
-                console.log('oldVisibleIndexes:', oldVisibleIndexes);
-                console.log('newVisibleIndexes:', newVisibleIndexes);
-                const directionStr = direction === 'down' ? '+' : '-';
-                console.log('diffTopRenderedIndexes:', directionStr, diffTopRenderedIndexes, diffTopRenderedIndexes.map(index => virtualView.heights[index]));
-                console.log('diffBottomRenderedIndexes:', directionStr, diffBottomRenderedIndexes, diffBottomRenderedIndexes.map(index => virtualView.heights[index]));
+                for (let index = oldVisibleIndexes.length - 1; index >= 0; index--) {
+                    const element = oldVisibleIndexes[index];
+                    if (!newVisibleIndexes.includes(element)) {
+                        diffBottomRenderedIndexes.push(element);
+                    }
+                    else {
+                        break;
+                    }
+                }
+            }
+            if (isDebug) {
+                this.debugLog('log', `====== diffVirtualView 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)));
+                this.debugLog('log', 'diffBottomRenderedIndexes:', isAddedBottom ? '+' : isMissingBottom ? '-' : '+', diffBottomRenderedIndexes, diffBottomRenderedIndexes.map(index => this.getBlockHeight(index, 0)));
                 const needTop = virtualView.heights.slice(0, newVisibleIndexes[0]).reduce((acc, height) => acc + height, 0);
                 const needBottom = virtualView.heights
                     .slice(newVisibleIndexes[newVisibleIndexes.length - 1] + 1)
                     .reduce((acc, height) => acc + height, 0);
-                console.log('newTopHeight:', needTop, 'prevTopHeight:', parseFloat(this.virtualTopHeightElement.style.height));
-                console.log('newBottomHeight:', needBottom, 'prevBottomHeight:', parseFloat(this.virtualBottomHeightElement.style.height));
-                console.warn('=========== Dividing line ===========');
+                this.debugLog('log', 'newTopHeight:', needTop, 'prevTopHeight:', parseFloat(this.virtualTopHeightElement.style.height));
+                this.debugLog('log', 'newBottomHeight:', needBottom, 'prevBottomHeight:', parseFloat(this.virtualBottomHeightElement.style.height));
+                this.debugLog('warn', '=========== Dividing line ===========');
             }
-            return true;
+            return {
+                isDiff: true,
+                isMissingTop,
+                isAddedTop,
+                isMissingBottom,
+                isAddedBottom,
+                diffTopRenderedIndexes,
+                diffBottomRenderedIndexes
+            };
         }
-        return false;
+        return {
+            isDiff: false,
+            diffTopRenderedIndexes: [],
+            diffBottomRenderedIndexes: []
+        };
     }
-    getBlockHeight(index) {
+    getBlockHeight(index, defaultHeight = VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT) {
         const node = this.editor.children[index];
         if (!node) {
-            return VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT;
+            return defaultHeight;
         }
         const key = AngularEditor.findKey(this.editor, node);
-        return this.measuredHeights.get(key.id) ?? VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT;
+        return this.measuredHeights.get(key.id) ?? defaultHeight;
     }
     buildAccumulatedHeight(heights) {
         const accumulatedHeights = new Array(heights.length + 1).fill(0);
@@ -3097,32 +3434,13 @@ class SlateEditable {
         }
         return accumulatedHeights;
     }
-    getBufferBelowHeight(viewportHeight, visibleStart, bufferCount) {
-        let blockHeight = 0;
-        let start = visibleStart;
-        // 循环累计高度超出视图高度代表找到向下缓冲区的起始位置
-        while (blockHeight < viewportHeight) {
-            blockHeight += this.getBlockHeight(start);
-            start++;
-        }
-        let bufferHeight = 0;
-        for (let i = start; i < start + bufferCount; i++) {
-            bufferHeight += this.getBlockHeight(i);
-        }
-        return bufferHeight;
-    }
     scheduleMeasureVisibleHeights() {
         if (!this.shouldUseVirtual()) {
             return;
         }
-        if (this.measurePending) {
-            return;
-        }
-        this.measurePending = true;
         this.measureVisibleHeightsAnimId && cancelAnimationFrame(this.measureVisibleHeightsAnimId);
         this.measureVisibleHeightsAnimId = requestAnimationFrame(() => {
             this.measureVisibleHeights();
-            this.measurePending = false;
         });
     }
     measureVisibleHeights() {
@@ -3133,7 +3451,7 @@ class SlateEditable {
                 return;
             }
             const key = AngularEditor.findKey(this.editor, node);
-            // 跳过已测过的块
+            // 跳过已测过的块，除非强制测量
             if (this.measuredHeights.has(key.id)) {
                 return;
             }
@@ -3141,11 +3459,55 @@ class SlateEditable {
             if (!view) {
                 return;
             }
-            view.getRealHeight()?.then(height => {
-                this.measuredHeights.set(key.id, height);
-            });
+            const ret = view.getRealHeight();
+            if (ret instanceof Promise) {
+                ret.then(height => {
+                    this.measuredHeights.set(key.id, height);
+                });
+            }
+            else {
+                this.measuredHeights.set(key.id, ret);
+            }
         });
     }
+    remeasureHeightByIndics(indics) {
+        const children = (this.editor.children || []);
+        let isHeightChanged = false;
+        indics.forEach(index => {
+            const node = children[index];
+            if (!node) {
+                return;
+            }
+            const key = AngularEditor.findKey(this.editor, node);
+            const view = ELEMENT_TO_COMPONENT.get(node);
+            if (!view) {
+                return;
+            }
+            const prevHeight = this.measuredHeights.get(key.id);
+            const ret = view.getRealHeight();
+            if (ret instanceof Promise) {
+                ret.then(height => {
+                    if (height !== prevHeight) {
+                        this.measuredHeights.set(key.id, height);
+                        isHeightChanged = true;
+                        if (isDebug) {
+                            this.debugLog('log', `remeasureHeightByIndics, index: ${index} prevHeight: ${prevHeight} newHeight: ${height}`);
+                        }
+                    }
+                });
+            }
+            else {
+                if (ret !== prevHeight) {
+                    this.measuredHeights.set(key.id, ret);
+                    isHeightChanged = true;
+                    if (isDebug) {
+                        this.debugLog('log', `remeasureHeightByIndics, index: ${index} prevHeight: ${prevHeight} newHeight: ${ret}`);
+                    }
+                }
+            }
+        });
+        return isHeightChanged;
+    }
     //#region event proxy
     addEventListener(eventName, listener, target = this.elementRef.nativeElement) {
         this.manualListeners.push(this.renderer2.listen(target, eventName, (event) => {
@@ -3670,6 +4032,11 @@ class SlateEditable {
                     Transforms.move(editor, { unit: 'word', reverse: isRTL });
                     return;
                 }
+                if (isKeyHotkey('mod+a', event)) {
+                    this.editor.selectAll();
+                    event.preventDefault();
+                    return;
+                }
                 // COMPAT: Certain browsers don't support the `beforeinput` event, so we
                 // fall back to guessing at the input intention for hotkeys.
                 // COMPAT: In iOS, some of these hotkeys are handled in the
@@ -3837,6 +4204,9 @@ class SlateEditable {
     }
     //#endregion
     ngOnDestroy() {
+        this.editorResizeObserver?.disconnect();
+        this.debugOverlay?.dispose();
+        this.debugOverlay = undefined;
         NODE_TO_ELEMENT.delete(this.editor);
         this.manualListeners.forEach(manualListener => {
             manualListener();
@@ -4096,6 +4466,7 @@ class BaseElementComponent extends BaseComponent {
             }
             return null;
         };
+        this.stableHeight = null;
     }
     get element() {
         return this._context && this._context.element;
@@ -4177,11 +4548,21 @@ 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);
-        return Promise.resolve(target.offsetHeight + parseFloat(computedStyle.marginTop) + parseFloat(computedStyle.marginBottom));
+        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 }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.12", type: BaseElementComponent, isStandalone: true, viewQueries: [{ propertyName: "childrenOutletInstance", first: true, predicate: SlateChildrenOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0 }); }
@@ -4337,5 +4718,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AngularEditor, BaseComponent, BaseElementComponent, BaseElementFlavour, BaseFlavour, BaseLeafComponent, BaseLeafFlavour, BaseTextComponent, BaseTextFlavour, BlockCardRef, DEFAULT_ELEMENT_HEIGHT, DefaultTextFlavour, EDITOR_TO_AFTER_VIEW_INIT_QUEUE, ELEMENT_TO_COMPONENT, FAKE_LEFT_BLOCK_CARD_OFFSET, FAKE_RIGHT_BLOCK_CARD_OFFSET, FlavourRef, HAS_BEFORE_INPUT_SUPPORT, IS_ANDROID, IS_APPLE, IS_CHROME, IS_CHROME_LEGACY, IS_EDGE_LEGACY, IS_FIREFOX, IS_FIREFOX_LEGACY, IS_IOS, IS_QQBROWSER, IS_SAFARI, IS_UC_MOBILE, IS_WECHATBROWSER, JUST_NOW_UPDATED_VIRTUAL_VIEW, PLACEHOLDER_SYMBOL, SLATE_BLOCK_CARD_CLASS_NAME, SLATE_DEBUG_KEY, SlateBlockCard, SlateChildrenOutlet, SlateEditable, SlateErrorCode, SlateFragmentAttributeKey, SlateModule, VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT, VIRTUAL_SCROLL_DEFAULT_BUFFER_COUNT, VoidTextFlavour, blobAsString, buildHTMLText, check, completeTable, createClipboardData, createText, createThrottleRAF, defaultScrollSelectionIntoView, fallbackCopyText, getBlockCardByNativeElement, getCardTargetAttribute, getClipboardData, getClipboardFromHTMLText, getContentHeight, getDataTransferClipboard, getDataTransferClipboardText, getNavigatorClipboard, getPlainText, getSelection, getSlateFragmentAttribute, getZeroTextNode, hasAfterContextChange, hasBeforeContextChange, hasBlockCard, hasBlockCardWithNode, hotkeys, isCardCenterByTargetAttr, isCardLeft, isCardLeftByTargetAttr, isCardRightByTargetAttr, isClipboardFile, isClipboardReadSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isComponentType, isDOMText, isDecoratorRangeListEqual, isFlavourType, isInvalidTable, isTemplateRef, isValid, normalize, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setNavigatorClipboard, shallowCompare, stripHtml, withAngular };
+export { AngularEditor, BaseComponent, BaseElementComponent, BaseElementFlavour, BaseFlavour, BaseLeafComponent, BaseLeafFlavour, BaseTextComponent, BaseTextFlavour, BlockCardRef, DEFAULT_ELEMENT_HEIGHT, DefaultTextFlavour, EDITOR_TO_AFTER_VIEW_INIT_QUEUE, ELEMENT_KEY_TO_HEIGHTS, ELEMENT_TO_COMPONENT, FAKE_LEFT_BLOCK_CARD_OFFSET, FAKE_RIGHT_BLOCK_CARD_OFFSET, FlavourRef, HAS_BEFORE_INPUT_SUPPORT, IS_ANDROID, IS_APPLE, IS_CHROME, IS_CHROME_LEGACY, IS_EDGE_LEGACY, IS_FIREFOX, IS_FIREFOX_LEGACY, IS_IOS, IS_QQBROWSER, IS_SAFARI, IS_UC_MOBILE, IS_WECHATBROWSER, JUST_NOW_UPDATED_VIRTUAL_VIEW, PLACEHOLDER_SYMBOL, SLATE_BLOCK_CARD_CLASS_NAME, SLATE_DEBUG_KEY, SlateBlockCard, SlateChildrenOutlet, SlateEditable, SlateErrorCode, SlateFragmentAttributeKey, SlateModule, VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT, VIRTUAL_SCROLL_DEFAULT_BUFFER_COUNT, VoidTextFlavour, blobAsString, buildHTMLText, check, completeTable, createClipboardData, createText, createThrottleRAF, defaultScrollSelectionIntoView, fallbackCopyText, getBlockCardByNativeElement, getCardTargetAttribute, getClipboardData, getClipboardFromHTMLText, getContentHeight, getDataTransferClipboard, getDataTransferClipboardText, getNavigatorClipboard, getPlainText, getSelection, getSlateFragmentAttribute, getZeroTextNode, hasAfterContextChange, hasBeforeContextChange, hasBlockCard, hasBlockCardWithNode, hotkeys, isCardCenterByTargetAttr, isCardLeft, isCardLeftByTargetAttr, isCardRightByTargetAttr, isClipboardFile, isClipboardReadSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isComponentType, isDOMText, isDecoratorRangeListEqual, isFlavourType, isInvalidTable, isTemplateRef, isValid, normalize, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setNavigatorClipboard, shallowCompare, stripHtml, withAngular };
 //# sourceMappingURL=slate-angular.mjs.map