slate-angular 20.2.0-next.25 → 20.2.0-next.27

package/fesm2022/slate-angular.mjs

@@ -955,179 +955,709 @@ const fallbackCopyText = async (text) => {
     });
 };
 
-const ELEMENT_KEY_TO_HEIGHTS = new WeakMap();
-const EDITOR_TO_BUSINESS_TOP = new WeakMap();
-const getBusinessTop = (editor) => {
-    return EDITOR_TO_BUSINESS_TOP.get(editor) ?? 0;
-};
-const getRealHeightByElement = (editor, element, defaultHeight = VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT) => {
-    const isVisible = editor.isVisible(element);
-    if (!isVisible) {
-        return 0;
-    }
-    if (!element) {
-        return defaultHeight;
-    }
-    const heights = ELEMENT_KEY_TO_HEIGHTS.get(editor);
-    const key = AngularEditor.findKey(editor, element);
-    const height = heights?.get(key.id);
-    if (typeof height === 'number') {
-        return height;
-    }
-    if (heights?.has(key.id)) {
-        console.error('getBlockHeight: invalid height value', key.id, height);
-    }
-    return defaultHeight;
-};
-const buildHeightsAndAccumulatedHeights = (editor) => {
-    const children = (editor.children || []);
-    const heights = new Array(children.length);
-    const accumulatedHeights = new Array(children.length + 1);
-    accumulatedHeights[0] = 0;
-    for (let i = 0; i < children.length; i++) {
-        const height = getRealHeightByElement(editor, children[i]);
-        heights[i] = height;
-        accumulatedHeights[i + 1] = accumulatedHeights[i] + height;
+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;
     }
-    return { heights, accumulatedHeights };
-};
-const scrollToElement = (editor, element, scrollTo) => {
-    const children = editor.children;
-    if (!children.length) {
-        return;
+    static log(doc, type, ...args) {
+        this.getInstance(doc).log(type, ...args);
     }
-    const anchorIndex = children.findIndex(item => item === element);
-    if (anchorIndex < 0) {
-        return;
+    static syncScrollTop(doc, value) {
+        const instance = this.getInstance(doc);
+        instance.setScrollTopValue(value);
     }
-    const { accumulatedHeights } = buildHeightsAndAccumulatedHeights(editor);
-    scrollTo((accumulatedHeights[anchorIndex] ?? 0) + getBusinessTop(editor));
-};
-
-const withAngular = (editor, clipboardFormatKey = 'x-slate-fragment') => {
-    let e = editor;
-    let { apply } = e;
-    e = withDOM(e, clipboardFormatKey);
-    e.setFragmentData = (dataTransfer, originEvent) => {
-        const { selection } = e;
-        if (!selection) {
-            return;
-        }
-        const [start, end] = Range.edges(selection);
-        const startVoid = Editor.void(e, { at: start.path });
-        const endVoid = Editor.void(e, { at: end.path });
-        if (Range.isCollapsed(selection) && !startVoid) {
-            return;
-        }
-        // Create a fake selection so that we can add a Base64-encoded copy of the
-        // fragment to the HTML, to decode on future pastes.
-        let domRange;
-        if (AngularEditor.isEnabledVirtualScroll(e)) {
-            const virtualScrollSelection = EDITOR_TO_VIRTUAL_SCROLL_SELECTION.get(e);
-            if (virtualScrollSelection) {
-                domRange = AngularEditor.toDOMRange(e, virtualScrollSelection);
+    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;
             }
-        }
-        domRange = domRange ?? AngularEditor.toDOMRange(e, selection);
-        let contents = domRange.cloneContents();
-        let attach = contents.childNodes[0];
-        // Make sure attach is non-empty, since empty nodes will not get copied.
-        const contentsArray = Array.from(contents.children);
-        contentsArray.forEach(node => {
-            if (node.textContent && node.textContent.trim() !== '') {
-                attach = node;
+            this.dragMoved = true;
+            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;
             }
-        });
-        // COMPAT: If the end node is a void node, we need to move the end of the
-        // range from the void node's spacer span, to the end of the void node's
-        // content, since the spacer is before void's content in the DOM.
-        if (endVoid) {
-            const [voidNode] = endVoid;
-            const r = domRange.cloneRange();
-            const domNode = AngularEditor.toDOMNode(e, voidNode);
-            r.setEndAfter(domNode);
-            contents = r.cloneContents();
-        }
-        // COMPAT: If the start node is a void node, we need to attach the encoded
-        // fragment to the void node's content node instead of the spacer, because
-        // attaching it to empty `<div>/<span>` nodes will end up having it erased by
-        // most browsers. (2018/04/27)
-        if (startVoid) {
-            attach = contents.querySelector('[data-slate-spacer]');
-        }
-        // Remove any zero-width space spans from the cloned DOM so that they don't
-        // show up elsewhere when pasted.
-        Array.from(contents.querySelectorAll('[data-slate-zero-width]')).forEach(zw => {
-            const isNewline = zw.getAttribute('data-slate-zero-width') === 'n';
-            zw.textContent = isNewline ? '\n' : '';
-        });
-        // Set a `data-slate-fragment` attribute on a non-empty node, so it shows up
-        // in the HTML, and can be used for intra-Slate pasting. If it's a text
-        // node, wrap it in a `<span>` so we have something to set an attribute on.
-        if (isDOMText(attach)) {
-            const span = attach.ownerDocument.createElement('span');
-            // COMPAT: In Chrome and Safari, if we don't add the `white-space` style
-            // then leading and trailing spaces will be ignored. (2017/09/21)
-            span.style.whiteSpace = 'pre';
-            span.appendChild(attach);
-            contents.appendChild(span);
-            attach = span;
-        }
-        const fragment = e.getFragment();
-        // Add the content to a <div> so that we can get its inner HTML.
-        const div = contents.ownerDocument.createElement('div');
-        const attachWrapper = document.createElement('div');
-        const elements = Array.from(contents.children);
-        if (isInvalidTable(elements)) {
-            contents = completeTable(contents.cloneNode(true));
-        }
-        attachWrapper.appendChild(contents);
-        div.appendChild(attachWrapper);
-        div.setAttribute('hidden', 'true');
-        contents.ownerDocument.body.appendChild(div);
-        setClipboardData({ text: getPlainText(div), elements: fragment }, div, attachWrapper, dataTransfer);
-        contents.ownerDocument.body.removeChild(div);
-    };
-    e.deleteCutData = () => {
-        const { selection } = editor;
-        if (selection) {
-            if (Range.isExpanded(selection)) {
-                Editor.deleteFragment(editor);
+            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 = '';
             }
-            else {
-                const node = Node.parent(editor, selection.anchor.path);
-                if (Element.isElement(node) && Editor.isVoid(editor, node)) {
-                    Transforms.delete(editor);
-                }
+        };
+        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();
         }
-    };
-    e.insertData = async (data) => {
-        if (!(await e.customInsertFragmentData(data, null))) {
-            e.insertTextData(data);
+        else {
+            this.applyState();
         }
-    };
-    e.customInsertFragmentData = async (data, contextClipboardData) => {
-        /**
-         * Checking copied fragment from application/x-slate-fragment or data-slate-fragment
-         */
-        const clipboardData = contextClipboardData || (await getClipboardData(data));
-        if (clipboardData && clipboardData.elements) {
-            e.insertFragment(clipboardData.elements);
-            return true;
+    }
+    log(type, ...args) {
+        this.init();
+        if (type === 'warn') {
+            this.originalConsoleWarn(...args);
         }
-        return false;
-    };
-    e.customInsertTextData = async (data) => {
-        const clipboardData = await getClipboardData(data);
-        if (clipboardData && clipboardData.text) {
-            const lines = clipboardData.text.split(/\r\n|\r|\n/);
-            let split = false;
-            for (const line of lines) {
-                if (split) {
-                    Transforms.splitNodes(e, { always: true });
-                }
-                e.insertText(line);
+        else {
+            this.originalConsoleLog(...args);
+        }
+        this.appendLog(type, ...args);
+    }
+    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.right = 'auto';
+        container.style.bottom = 'auto';
+        container.style.boxSizing = 'border-box';
+        container.style.background = 'rgba(17, 24, 39, 0.95)';
+        container.style.color = '#e5e7eb';
+        container.style.fontSize = '12px';
+        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 => {
+            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 = '清除日志';
+        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 = '';
+            }
+        });
+        actions.appendChild(collapseButton);
+        actions.appendChild(clearButton);
+        header.appendChild(title);
+        header.appendChild(actions);
+        const scrollForm = doc.createElement('div');
+        scrollForm.style.display = 'grid';
+        scrollForm.style.gridTemplateColumns = '1fr 110px 50px';
+        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';
+        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) {
+            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);
+        }
+    }
+    setScrollTopValue(value) {
+        if (this.distanceInput) {
+            this.distanceInput.value = String(value ?? 0);
+        }
+    }
+}
+
+const isDebug = localStorage.getItem(SLATE_DEBUG_KEY) === 'true';
+const isDebugScrollTop = localStorage.getItem(SLATE_DEBUG_KEY_SCROLL_TOP) === 'true';
+const ELEMENT_KEY_TO_HEIGHTS = new WeakMap();
+const EDITOR_TO_BUSINESS_TOP = new WeakMap();
+const debugLog = (type, ...args) => {
+    const doc = document;
+    VirtualScrollDebugOverlay.log(doc, type, ...args);
+};
+const measureHeightByElement = (editor, element) => {
+    const key = AngularEditor.findKey(editor, element);
+    const view = ELEMENT_TO_COMPONENT.get(element);
+    if (!view) {
+        return;
+    }
+    const ret = view.getRealHeight();
+    const heights = ELEMENT_KEY_TO_HEIGHTS.get(editor);
+    heights.set(key.id, ret);
+    return ret;
+};
+const measureHeightByIndics = (editor, indics, force = false) => {
+    let hasChanged = false;
+    indics.forEach((index, i) => {
+        const element = editor.children[index];
+        const preHeight = getRealHeightByElement(editor, element, 0);
+        if (preHeight && !force) {
+            if (isDebug) {
+                const height = measureHeightByElement(editor, element);
+                if (height !== preHeight) {
+                    debugLog('warn', 'measureHeightByElement: height not equal, index: ', index, 'preHeight: ', preHeight, 'height: ', height);
+                }
+            }
+            return;
+        }
+        hasChanged = true;
+        measureHeightByElement(editor, element);
+    });
+    return hasChanged;
+};
+const getBusinessTop = (editor) => {
+    return EDITOR_TO_BUSINESS_TOP.get(editor) ?? 0;
+};
+const getRealHeightByElement = (editor, element, defaultHeight = VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT) => {
+    const isVisible = editor.isVisible(element);
+    if (!isVisible) {
+        return 0;
+    }
+    const heights = ELEMENT_KEY_TO_HEIGHTS.get(editor);
+    const key = AngularEditor.findKey(editor, element);
+    const height = heights?.get(key.id);
+    if (typeof height === 'number') {
+        return height;
+    }
+    if (heights?.has(key.id)) {
+        console.error('getBlockHeight: invalid height value', key.id, height);
+    }
+    return defaultHeight;
+};
+const buildHeightsAndAccumulatedHeights = (editor) => {
+    const children = (editor.children || []);
+    const heights = new Array(children.length);
+    const accumulatedHeights = new Array(children.length + 1);
+    accumulatedHeights[0] = 0;
+    for (let i = 0; i < children.length; i++) {
+        const height = getRealHeightByElement(editor, children[i]);
+        heights[i] = height;
+        accumulatedHeights[i + 1] = accumulatedHeights[i] + height;
+    }
+    return { heights, accumulatedHeights };
+};
+const scrollToElement = (editor, element, scrollTo) => {
+    const children = editor.children;
+    if (!children.length) {
+        return;
+    }
+    const anchorIndex = children.findIndex(item => item === element);
+    if (anchorIndex < 0) {
+        return;
+    }
+    const { accumulatedHeights } = buildHeightsAndAccumulatedHeights(editor);
+    scrollTo((accumulatedHeights[anchorIndex] ?? 0) + getBusinessTop(editor));
+};
+
+const withAngular = (editor, clipboardFormatKey = 'x-slate-fragment') => {
+    let e = editor;
+    let { apply } = e;
+    e = withDOM(e, clipboardFormatKey);
+    e.setFragmentData = (dataTransfer, originEvent) => {
+        const { selection } = e;
+        if (!selection) {
+            return;
+        }
+        const [start, end] = Range.edges(selection);
+        const startVoid = Editor.void(e, { at: start.path });
+        const endVoid = Editor.void(e, { at: end.path });
+        if (Range.isCollapsed(selection) && !startVoid) {
+            return;
+        }
+        // Create a fake selection so that we can add a Base64-encoded copy of the
+        // fragment to the HTML, to decode on future pastes.
+        let domRange;
+        if (AngularEditor.isEnabledVirtualScroll(e)) {
+            const virtualScrollSelection = EDITOR_TO_VIRTUAL_SCROLL_SELECTION.get(e);
+            if (virtualScrollSelection) {
+                domRange = AngularEditor.toDOMRange(e, virtualScrollSelection);
+            }
+        }
+        domRange = domRange ?? AngularEditor.toDOMRange(e, selection);
+        let contents = domRange.cloneContents();
+        let attach = contents.childNodes[0];
+        // Make sure attach is non-empty, since empty nodes will not get copied.
+        const contentsArray = Array.from(contents.children);
+        contentsArray.forEach(node => {
+            if (node.textContent && node.textContent.trim() !== '') {
+                attach = node;
+            }
+        });
+        // COMPAT: If the end node is a void node, we need to move the end of the
+        // range from the void node's spacer span, to the end of the void node's
+        // content, since the spacer is before void's content in the DOM.
+        if (endVoid) {
+            const [voidNode] = endVoid;
+            const r = domRange.cloneRange();
+            const domNode = AngularEditor.toDOMNode(e, voidNode);
+            r.setEndAfter(domNode);
+            contents = r.cloneContents();
+        }
+        // COMPAT: If the start node is a void node, we need to attach the encoded
+        // fragment to the void node's content node instead of the spacer, because
+        // attaching it to empty `<div>/<span>` nodes will end up having it erased by
+        // most browsers. (2018/04/27)
+        if (startVoid) {
+            attach = contents.querySelector('[data-slate-spacer]');
+        }
+        // Remove any zero-width space spans from the cloned DOM so that they don't
+        // show up elsewhere when pasted.
+        Array.from(contents.querySelectorAll('[data-slate-zero-width]')).forEach(zw => {
+            const isNewline = zw.getAttribute('data-slate-zero-width') === 'n';
+            zw.textContent = isNewline ? '\n' : '';
+        });
+        // Set a `data-slate-fragment` attribute on a non-empty node, so it shows up
+        // in the HTML, and can be used for intra-Slate pasting. If it's a text
+        // node, wrap it in a `<span>` so we have something to set an attribute on.
+        if (isDOMText(attach)) {
+            const span = attach.ownerDocument.createElement('span');
+            // COMPAT: In Chrome and Safari, if we don't add the `white-space` style
+            // then leading and trailing spaces will be ignored. (2017/09/21)
+            span.style.whiteSpace = 'pre';
+            span.appendChild(attach);
+            contents.appendChild(span);
+            attach = span;
+        }
+        const fragment = e.getFragment();
+        // Add the content to a <div> so that we can get its inner HTML.
+        const div = contents.ownerDocument.createElement('div');
+        const attachWrapper = document.createElement('div');
+        const elements = Array.from(contents.children);
+        if (isInvalidTable(elements)) {
+            contents = completeTable(contents.cloneNode(true));
+        }
+        attachWrapper.appendChild(contents);
+        div.appendChild(attachWrapper);
+        div.setAttribute('hidden', 'true');
+        contents.ownerDocument.body.appendChild(div);
+        setClipboardData({ text: getPlainText(div), elements: fragment }, div, attachWrapper, dataTransfer);
+        contents.ownerDocument.body.removeChild(div);
+    };
+    e.deleteCutData = () => {
+        const { selection } = editor;
+        if (selection) {
+            if (Range.isExpanded(selection)) {
+                Editor.deleteFragment(editor);
+            }
+            else {
+                const node = Node.parent(editor, selection.anchor.path);
+                if (Element.isElement(node) && Editor.isVoid(editor, node)) {
+                    Transforms.delete(editor);
+                }
+            }
+        }
+    };
+    e.insertData = async (data) => {
+        if (!(await e.customInsertFragmentData(data, null))) {
+            e.insertTextData(data);
+        }
+    };
+    e.customInsertFragmentData = async (data, contextClipboardData) => {
+        /**
+         * Checking copied fragment from application/x-slate-fragment or data-slate-fragment
+         */
+        const clipboardData = contextClipboardData || (await getClipboardData(data));
+        if (clipboardData && clipboardData.elements) {
+            e.insertFragment(clipboardData.elements);
+            return true;
+        }
+        return false;
+    };
+    e.customInsertTextData = async (data) => {
+        const clipboardData = await getClipboardData(data);
+        if (clipboardData && clipboardData.text) {
+            const lines = clipboardData.text.split(/\r\n|\r|\n/);
+            let split = false;
+            for (const line of lines) {
+                if (split) {
+                    Transforms.splitNodes(e, { always: true });
+                }
+                e.insertText(line);
                 split = true;
             }
             return true;
@@ -2141,1030 +2671,531 @@ const createLineBreakEmptyStringDOM = (elementStringLength) => {
  */
 const isEmpty = (editor, element) => {
     const { children } = element;
-    const [first] = children;
-    return children.length === 0 || (children.length === 1 && Text$1.isText(first) && first.text === '' && !editor.isVoid(element));
-};
-
-class DefaultLeafFlavour extends BaseLeafFlavour {
-    constructor() {
-        super(...arguments);
-        this.stringRender = null;
-    }
-    render() {
-        const leafNode = createDefaultLeafNode();
-        this.stringRender = new SlateStringRender(this.context, this.viewContext);
-        const stringNode = this.stringRender.render();
-        leafNode.appendChild(stringNode);
-        this.nativeElement = leafNode;
-    }
-    rerender() {
-        this.stringRender?.update(this.context, this.viewContext);
-    }
-}
-const createDefaultLeafNode = () => {
-    const span = document.createElement('span');
-    span.setAttribute('data-slate-leaf', 'true');
-    return span;
-};
-
-class LeavesRender {
-    constructor(viewContext, viewContainerRef, getOutletParent, getOutletElement) {
-        this.viewContext = viewContext;
-        this.viewContainerRef = viewContainerRef;
-        this.getOutletParent = getOutletParent;
-        this.getOutletElement = getOutletElement;
-        this.views = [];
-        this.contexts = [];
-        this.viewTypes = [];
-    }
-    initialize(context) {
-        const { decoratedLeaves, contexts } = this.getLeaves(context);
-        this.decoratedLeaves = decoratedLeaves;
-        this.contexts = contexts;
-        this.decoratedLeaves.forEach((leaf, index) => {
-            const context = getContext$1(index, this.contexts);
-            const viewType = getViewType$1(context, this.viewContext);
-            const view = createEmbeddedViewOrComponentOrFlavour(viewType, context, this.viewContext, this.viewContainerRef);
-            this.views.push(view);
-            this.contexts.push(context);
-            this.viewTypes.push(viewType);
-        });
-        mount(this.views, null, this.getOutletParent(), this.getOutletElement());
-        const newDiffers = this.viewContext.editor.injector.get(IterableDiffers);
-        this.differ = newDiffers.find(this.decoratedLeaves).create(trackBy$1(this.viewContext));
-        this.differ.diff(this.decoratedLeaves);
-    }
-    update(context) {
-        const { decoratedLeaves, contexts } = this.getLeaves(context);
-        const outletParent = this.getOutletParent();
-        const diffResult = this.differ.diff(decoratedLeaves);
-        if (diffResult) {
-            let firstRootNode = getRootNodes(this.views[0])[0];
-            const newContexts = [];
-            const newViewTypes = [];
-            const newViews = [];
-            diffResult.forEachItem(record => {
-                let context = getContext$1(record.currentIndex, contexts);
-                const viewType = getViewType$1(context, this.viewContext);
-                newViewTypes.push(viewType);
-                let view;
-                if (record.previousIndex === null) {
-                    view = createEmbeddedViewOrComponentOrFlavour(viewType, context, this.viewContext, this.viewContainerRef);
-                    newContexts.push(context);
-                    newViews.push(view);
-                    mountOnItemChange(record.currentIndex, record.item, newViews, null, outletParent, firstRootNode, this.viewContext);
-                }
-                else {
-                    const previousView = this.views[record.previousIndex];
-                    const previousViewType = this.viewTypes[record.previousIndex];
-                    if (previousViewType !== viewType) {
-                        view = createEmbeddedViewOrComponentOrFlavour(viewType, context, this.viewContext, this.viewContainerRef);
-                        const firstRootNode = getRootNodes(previousView, null)[0];
-                        const newRootNodes = getRootNodes(view, null);
-                        firstRootNode.replaceWith(...newRootNodes);
-                        previousView.destroy();
-                    }
-                    else {
-                        view = previousView;
-                        updateContext(previousView, context, this.viewContext);
-                    }
-                    newContexts.push(context);
-                    newViews.push(view);
-                }
-            });
-            diffResult.forEachRemovedItem(record => {
-                const view = this.views[record.previousIndex];
-                view.destroy();
-            });
-            diffResult.forEachMovedItem(record => {
-                mountOnItemChange(record.currentIndex, record.item, newViews, null, outletParent, firstRootNode, this.viewContext);
-            });
-            this.viewTypes = newViewTypes;
-            this.views = newViews;
-            this.contexts = newContexts;
-            this.decoratedLeaves = decoratedLeaves;
-        }
-    }
-    getLeaves(context) {
-        const decoratedLeaves = Text$1.decorations(context.text, context.decorations);
-        const contexts = decoratedLeaves.map((decoratedLeaf, index) => {
-            return {
-                leaf: decoratedLeaf.leaf,
-                leafPosition: decoratedLeaf.position,
-                text: context.text,
-                parent: context.parent,
-                index,
-                isLast: context.isLast && index === decoratedLeaves.length - 1
-            };
-        });
-        return { decoratedLeaves, contexts };
-    }
-    destroy() {
-        this.views.forEach(view => view.destroy());
-    }
-}
-function getContext$1(index, leafContexts) {
-    return leafContexts[index];
-}
-function getViewType$1(leafContext, viewContext) {
-    return (viewContext.renderLeaf && viewContext.renderLeaf(leafContext.leaf)) || DefaultLeafFlavour;
-}
-function trackBy$1(viewContext) {
-    return (index, node) => {
-        return index;
-    };
-}
-
-class BaseTextFlavour extends BaseFlavour {
-    constructor() {
-        super(...arguments);
-        this.getOutletParent = () => {
-            return this.nativeElement;
-        };
-        this.getOutletElement = () => {
-            return this.nativeElement.querySelector('.children-outlet');
-        };
-    }
-    get text() {
-        return this._context && this._context.text;
-    }
-    onInit() {
-        this.render();
-        this.updateWeakMap();
-        this.initialized = true;
-        this.leavesRender = new LeavesRender(this.viewContext, this.viewContainerRef, this.getOutletParent, this.getOutletElement);
-        this.leavesRender.initialize(this.context);
-    }
-    updateWeakMap() {
-        ELEMENT_TO_NODE.set(this.nativeElement, this.text);
-        NODE_TO_ELEMENT.set(this.text, this.nativeElement);
-    }
-    onDestroy() {
-        if (NODE_TO_ELEMENT.get(this.text) === this.nativeElement) {
-            NODE_TO_ELEMENT.delete(this.text);
-        }
-        ELEMENT_TO_NODE.delete(this.nativeElement);
-        this.leavesRender.destroy();
-        this.nativeElement?.remove();
-    }
-    onContextChange() {
-        if (!this.initialized) {
-            return;
-        }
-        this.rerender();
-        this.updateWeakMap();
-        this.leavesRender.update(this.context);
-    }
-}
+    const [first] = children;
+    return children.length === 0 || (children.length === 1 && Text$1.isText(first) && first.text === '' && !editor.isVoid(element));
+};
 
-class DefaultTextFlavour extends BaseTextFlavour {
-    render() {
-        const { nativeElement } = createText(this.text.text);
-        this.nativeElement = nativeElement;
+class DefaultLeafFlavour extends BaseLeafFlavour {
+    constructor() {
+        super(...arguments);
+        this.stringRender = null;
     }
-    rerender() { }
-}
-class VoidTextFlavour extends BaseTextFlavour {
     render() {
-        const { nativeElement } = createText(this.text.text);
-        this.nativeElement = nativeElement;
-        this.nativeElement.setAttribute('data-slate-spacer', 'true');
-        this.nativeElement.classList.add('slate-spacer');
+        const leafNode = createDefaultLeafNode();
+        this.stringRender = new SlateStringRender(this.context, this.viewContext);
+        const stringNode = this.stringRender.render();
+        leafNode.appendChild(stringNode);
+        this.nativeElement = leafNode;
+    }
+    rerender() {
+        this.stringRender?.update(this.context, this.viewContext);
     }
-    rerender() { }
 }
-const createText = (text) => {
-    const nativeElement = document.createElement('span');
-    nativeElement.setAttribute('data-slate-node', 'text');
-    return { nativeElement };
+const createDefaultLeafNode = () => {
+    const span = document.createElement('span');
+    span.setAttribute('data-slate-leaf', 'true');
+    return span;
 };
 
-class ListRender {
+class LeavesRender {
     constructor(viewContext, viewContainerRef, getOutletParent, getOutletElement) {
         this.viewContext = viewContext;
         this.viewContainerRef = viewContainerRef;
         this.getOutletParent = getOutletParent;
         this.getOutletElement = getOutletElement;
-        this.children = [];
-        this.views = [];
-        this.blockCards = [];
-        this.contexts = [];
-        this.viewTypes = [];
-        this.differ = null;
-        this.initialized = false;
-        this.preRenderingHTMLElement = [];
-    }
-    initialize(children, parent, childrenContext, preRenderingCount = 0) {
-        this.initialized = true;
-        this.children = children;
-        const isRoot = parent === this.viewContext.editor;
-        const firstIndex = isRoot ? this.viewContext.editor.children.indexOf(children[0]) : 0;
-        const parentPath = AngularEditor.findPath(this.viewContext.editor, parent);
-        children.forEach((descendant, _index) => {
-            NODE_TO_INDEX.set(descendant, firstIndex + _index);
-            NODE_TO_PARENT.set(descendant, parent);
-            const context = getContext(firstIndex + _index, descendant, parentPath, childrenContext, this.viewContext);
-            const viewType = getViewType(descendant, parent, this.viewContext);
-            const view = createEmbeddedViewOrComponentOrFlavour(viewType, context, this.viewContext, this.viewContainerRef);
-            const blockCard = createBlockCard(descendant, view, this.viewContext);
-            this.views.push(view);
-            this.contexts.push(context);
-            this.viewTypes.push(viewType);
-            this.blockCards.push(blockCard);
-        });
-        mount(this.views, this.blockCards, this.getOutletParent(), this.getOutletElement());
-        const newDiffers = this.viewContext.editor.injector.get(IterableDiffers);
-        this.differ = newDiffers.find(children).create(trackBy(this.viewContext));
-        this.differ.diff(children);
-        if (parent === this.viewContext.editor) {
-            executeAfterViewInit(this.viewContext.editor);
-        }
-    }
-    update(children, parent, childrenContext, preRenderingCount = 0) {
-        if (!this.initialized || this.children.length === 0) {
-            this.initialize(children, parent, childrenContext, preRenderingCount);
-            return;
-        }
-        if (!this.differ) {
-            throw new Error('Exception: Can not find differ ');
-        }
-        const outletParent = this.getOutletParent();
-        if (this.preRenderingHTMLElement.length > 0) {
-            const preRenderingElement = [...this.preRenderingHTMLElement];
-            preRenderingElement.forEach((rootNodes, index) => {
-                rootNodes.forEach(rootNode => {
-                    rootNode.style.position = '';
-                    rootNode.style.top = '';
-                    rootNode.style.width = '';
-                });
-            });
-            this.preRenderingHTMLElement = [];
-        }
-        const diffResult = this.differ.diff(children);
-        const parentPath = AngularEditor.findPath(this.viewContext.editor, parent);
-        const isRoot = parent === this.viewContext.editor;
-        const firstIndex = isRoot ? this.viewContext.editor.children.indexOf(children[0]) : 0;
-        if (diffResult) {
-            let firstRootNode = getRootNodes(this.views[0], this.blockCards[0])[0];
-            const newContexts = [];
-            const newViewTypes = [];
-            const newViews = [];
-            const newBlockCards = [];
-            diffResult.forEachItem(record => {
-                const currentIndex = firstIndex + record.currentIndex;
-                NODE_TO_INDEX.set(record.item, currentIndex);
-                NODE_TO_PARENT.set(record.item, parent);
-                let context = getContext(currentIndex, record.item, parentPath, childrenContext, this.viewContext);
-                const viewType = getViewType(record.item, parent, this.viewContext);
-                newViewTypes.push(viewType);
-                let view;
-                let blockCard;
-                if (record.previousIndex === null) {
-                    view = createEmbeddedViewOrComponentOrFlavour(viewType, context, this.viewContext, this.viewContainerRef);
-                    blockCard = createBlockCard(record.item, view, this.viewContext);
-                    newContexts.push(context);
-                    newViews.push(view);
-                    newBlockCards.push(blockCard);
-                    mountOnItemChange(record.currentIndex, record.item, newViews, newBlockCards, outletParent, firstRootNode, this.viewContext);
-                }
-                else {
-                    const previousView = this.views[record.previousIndex];
-                    const previousViewType = this.viewTypes[record.previousIndex];
-                    const previousContext = this.contexts[record.previousIndex];
-                    const previousBlockCard = this.blockCards[record.previousIndex];
-                    if (previousViewType !== viewType) {
-                        view = createEmbeddedViewOrComponentOrFlavour(viewType, context, this.viewContext, this.viewContainerRef);
-                        blockCard = createBlockCard(record.item, view, this.viewContext);
-                        const firstRootNode = getRootNodes(previousView, previousBlockCard)[0];
-                        const newRootNodes = getRootNodes(view, blockCard);
-                        firstRootNode.replaceWith(...newRootNodes);
-                        previousView.destroy();
-                        previousBlockCard?.destroy();
-                    }
-                    else {
-                        view = previousView;
-                        blockCard = previousBlockCard;
-                        if (memoizedContext(this.viewContext, record.item, previousContext, context)) {
-                            context = previousContext;
-                        }
-                        else {
-                            updateContext(previousView, context, this.viewContext);
-                        }
-                    }
-                    newContexts.push(context);
-                    newViews.push(view);
-                    newBlockCards.push(blockCard);
-                }
-            });
-            diffResult.forEachOperation(record => {
-                // removed
-                if (record.currentIndex === null) {
-                    const view = this.views[record.previousIndex];
-                    const blockCard = this.blockCards[record.previousIndex];
-                    view.destroy();
-                    blockCard?.destroy();
-                }
-                // moved
-                if (record.previousIndex !== null && record.currentIndex !== null) {
-                    mountOnItemChange(record.currentIndex, record.item, newViews, newBlockCards, outletParent, firstRootNode, this.viewContext);
-                    // Solve the block-card DOMElement loss when moving nodes
-                    newBlockCards[record.currentIndex]?.instance.append();
-                }
-            });
-            this.viewTypes = newViewTypes;
-            this.views = newViews;
-            this.contexts = newContexts;
-            this.children = children;
-            this.blockCards = newBlockCards;
-            if (parent === this.viewContext.editor) {
-                executeAfterViewInit(this.viewContext.editor);
-            }
-        }
-        else {
-            const newContexts = [];
-            this.children.forEach((child, _index) => {
-                NODE_TO_INDEX.set(child, firstIndex + _index);
-                NODE_TO_PARENT.set(child, parent);
-                let context = getContext(firstIndex + _index, child, parentPath, childrenContext, this.viewContext);
-                const previousContext = this.contexts[_index];
-                if (memoizedContext(this.viewContext, child, previousContext, context)) {
-                    context = previousContext;
-                }
-                else {
-                    updateContext(this.views[_index], context, this.viewContext);
-                }
-                newContexts.push(context);
-            });
-            this.contexts = newContexts;
-        }
-        if (preRenderingCount > 0) {
-            for (let i = 0; i < preRenderingCount; i++) {
-                const rootNodes = [...getRootNodes(this.views[i], this.blockCards[i])];
-                rootNodes.forEach(rootNode => {
-                    rootNode.style = `position: absolute;top: -100%;`;
-                });
-                this.preRenderingHTMLElement.push(rootNodes);
-            }
-        }
-    }
-    destroy() {
-        this.children.forEach((element, index) => {
-            if (this.views[index]) {
-                this.views[index].destroy();
-            }
-            if (this.blockCards[index]) {
-                this.blockCards[index].destroy();
-            }
-        });
-        this.children = [];
         this.views = [];
-        this.blockCards = [];
         this.contexts = [];
         this.viewTypes = [];
-        this.initialized = false;
-        this.differ = null;
-    }
-}
-function getContext(index, item, parentPath, childrenContext, viewContext) {
-    if (Element.isElement(item)) {
-        const computedContext = getCommonContext(index, item, parentPath, viewContext, childrenContext);
-        const key = AngularEditor.findKey(viewContext.editor, item);
-        const isInline = viewContext.editor.isInline(item);
-        const isVoid = viewContext.editor.isVoid(item);
-        const elementContext = {
-            element: item,
-            ...computedContext,
-            attributes: {
-                'data-slate-node': 'element',
-                'data-slate-key': key.id
-            },
-            decorate: childrenContext.decorate,
-            readonly: childrenContext.readonly
-        };
-        if (isInline) {
-            elementContext.attributes['data-slate-inline'] = true;
-        }
-        if (isVoid) {
-            elementContext.attributes['data-slate-void'] = true;
-        }
-        // add contentEditable for block element only to avoid chinese input be broken
-        if (isVoid && !isInline) {
-            elementContext.contentEditable = false;
-        }
-        return elementContext;
     }
-    else {
-        const computedContext = getCommonContext(index, item, parentPath, viewContext, childrenContext);
-        const isLeafBlock = AngularEditor.isLeafBlock(viewContext.editor, childrenContext.parent);
-        const textContext = {
-            decorations: computedContext.decorations,
-            isLast: isLeafBlock && index === childrenContext.parent.children.length - 1,
-            parent: childrenContext.parent,
-            text: item
-        };
-        return textContext;
+    initialize(context) {
+        const { decoratedLeaves, contexts } = this.getLeaves(context);
+        this.decoratedLeaves = decoratedLeaves;
+        this.contexts = contexts;
+        this.decoratedLeaves.forEach((leaf, index) => {
+            const context = getContext$1(index, this.contexts);
+            const viewType = getViewType$1(context, this.viewContext);
+            const view = createEmbeddedViewOrComponentOrFlavour(viewType, context, this.viewContext, this.viewContainerRef);
+            this.views.push(view);
+            this.contexts.push(context);
+            this.viewTypes.push(viewType);
+        });
+        mount(this.views, null, this.getOutletParent(), this.getOutletElement());
+        const newDiffers = this.viewContext.editor.injector.get(IterableDiffers);
+        this.differ = newDiffers.find(this.decoratedLeaves).create(trackBy$1(this.viewContext));
+        this.differ.diff(this.decoratedLeaves);
     }
-}
-function getCommonContext(index, item, parentPath, viewContext, childrenContext) {
-    const p = parentPath.concat(index);
-    try {
-        const ds = childrenContext.decorate([item, p]);
-        // [list-render] performance optimization: reduce the number of calls to the `Editor.range(viewContext.editor, p)` method
-        if (childrenContext.selection || childrenContext.decorations.length > 0) {
-            const range = Editor.range(viewContext.editor, p);
-            const sel = childrenContext.selection && Range.intersection(range, childrenContext.selection);
-            for (const dec of childrenContext.decorations) {
-                const d = Range.intersection(dec, range);
-                if (d) {
-                    ds.push(d);
+    update(context) {
+        const { decoratedLeaves, contexts } = this.getLeaves(context);
+        const outletParent = this.getOutletParent();
+        const diffResult = this.differ.diff(decoratedLeaves);
+        if (diffResult) {
+            let firstRootNode = getRootNodes(this.views[0])[0];
+            const newContexts = [];
+            const newViewTypes = [];
+            const newViews = [];
+            diffResult.forEachItem(record => {
+                let context = getContext$1(record.currentIndex, contexts);
+                const viewType = getViewType$1(context, this.viewContext);
+                newViewTypes.push(viewType);
+                let view;
+                if (record.previousIndex === null) {
+                    view = createEmbeddedViewOrComponentOrFlavour(viewType, context, this.viewContext, this.viewContainerRef);
+                    newContexts.push(context);
+                    newViews.push(view);
+                    mountOnItemChange(record.currentIndex, record.item, newViews, null, outletParent, firstRootNode, this.viewContext);
                 }
-            }
-            return { selection: sel, decorations: ds };
-        }
-        else {
-            return { selection: null, decorations: ds };
+                else {
+                    const previousView = this.views[record.previousIndex];
+                    const previousViewType = this.viewTypes[record.previousIndex];
+                    if (previousViewType !== viewType) {
+                        view = createEmbeddedViewOrComponentOrFlavour(viewType, context, this.viewContext, this.viewContainerRef);
+                        const firstRootNode = getRootNodes(previousView, null)[0];
+                        const newRootNodes = getRootNodes(view, null);
+                        firstRootNode.replaceWith(...newRootNodes);
+                        previousView.destroy();
+                    }
+                    else {
+                        view = previousView;
+                        updateContext(previousView, context, this.viewContext);
+                    }
+                    newContexts.push(context);
+                    newViews.push(view);
+                }
+            });
+            diffResult.forEachRemovedItem(record => {
+                const view = this.views[record.previousIndex];
+                view.destroy();
+            });
+            diffResult.forEachMovedItem(record => {
+                mountOnItemChange(record.currentIndex, record.item, newViews, null, outletParent, firstRootNode, this.viewContext);
+            });
+            this.viewTypes = newViewTypes;
+            this.views = newViews;
+            this.contexts = newContexts;
+            this.decoratedLeaves = decoratedLeaves;
         }
     }
-    catch (error) {
-        viewContext.editor.onError({
-            code: SlateErrorCode.GetStartPointError,
-            nativeError: error
+    getLeaves(context) {
+        const decoratedLeaves = Text$1.decorations(context.text, context.decorations);
+        const contexts = decoratedLeaves.map((decoratedLeaf, index) => {
+            return {
+                leaf: decoratedLeaf.leaf,
+                leafPosition: decoratedLeaf.position,
+                text: context.text,
+                parent: context.parent,
+                index,
+                isLast: context.isLast && index === decoratedLeaves.length - 1
+            };
         });
-        return { selection: null, decorations: [] };
-    }
-}
-function getViewType(item, parent, viewContext) {
-    if (Element.isElement(item)) {
-        return (viewContext.renderElement && viewContext.renderElement(item)) || DefaultElementFlavour;
+        return { decoratedLeaves, contexts };
     }
-    else {
-        const isVoid = viewContext.editor.isVoid(parent);
-        return isVoid ? VoidTextFlavour : (viewContext.renderText && viewContext.renderText(item)) || DefaultTextFlavour;
+    destroy() {
+        this.views.forEach(view => view.destroy());
     }
 }
-function createBlockCard(item, view, viewContext) {
-    const isBlockCard = viewContext.editor.isBlockCard(item);
-    if (isBlockCard) {
-        const rootNodes = getRootNodes(view);
-        const blockCardRef = new BlockCardRef();
-        blockCardRef.instance = new SlateBlockCard();
-        blockCardRef.instance.onInit();
-        blockCardRef.instance.initializeCenter(rootNodes);
-        return blockCardRef;
-    }
-    else {
-        return null;
-    }
+function getContext$1(index, leafContexts) {
+    return leafContexts[index];
 }
-function trackBy(viewContext) {
+function getViewType$1(leafContext, viewContext) {
+    return (viewContext.renderLeaf && viewContext.renderLeaf(leafContext.leaf)) || DefaultLeafFlavour;
+}
+function trackBy$1(viewContext) {
     return (index, node) => {
-        return viewContext.trackBy(node) || AngularEditor.findKey(viewContext.editor, node);
+        return index;
     };
 }
-function memoizedContext(viewContext, descendant, prev, next) {
-    if (Element.isElement(descendant)) {
-        return memoizedElementContext(viewContext, prev, next);
-    }
-    else {
-        return memoizedTextContext(prev, next);
-    }
-}
-function memoizedElementContext(viewContext, prev, next) {
-    return (prev.element === next.element &&
-        (!viewContext.isStrictDecorate || prev.decorate === next.decorate) &&
-        prev.readonly === next.readonly &&
-        isDecoratorRangeListEqual(prev.decorations, next.decorations) &&
-        (prev.selection === next.selection || (!!prev.selection && !!next.selection && Range.equals(prev.selection, next.selection))));
-}
-function memoizedTextContext(prev, next) {
-    return (next.parent === prev.parent &&
-        next.isLast === prev.isLast &&
-        next.text === prev.text &&
-        isDecoratorRangeListEqual(next.decorations, prev.decorations));
-}
-function addAfterViewInitQueue(editor, afterViewInitCallback) {
-    const queue = getAfterViewInitQueue(editor);
-    queue.push(afterViewInitCallback);
-    EDITOR_TO_AFTER_VIEW_INIT_QUEUE.set(editor, queue);
-}
-function getAfterViewInitQueue(editor) {
-    return EDITOR_TO_AFTER_VIEW_INIT_QUEUE.get(editor) || [];
-}
-function clearAfterViewInitQueue(editor) {
-    EDITOR_TO_AFTER_VIEW_INIT_QUEUE.set(editor, []);
-}
-function executeAfterViewInit(editor) {
-    const queue = getAfterViewInitQueue(editor);
-    queue.forEach(callback => callback());
-    clearAfterViewInitQueue(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`;
-            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.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();
+class BaseTextFlavour extends BaseFlavour {
+    constructor() {
+        super(...arguments);
+        this.getOutletParent = () => {
+            return this.nativeElement;
+        };
+        this.getOutletElement = () => {
+            return this.nativeElement.querySelector('.children-outlet');
         };
     }
-    init() {
-        if (!this.container) {
-            this.createContainer();
-        }
-        else {
-            this.applyState();
-        }
+    get text() {
+        return this._context && this._context.text;
     }
-    log(type, ...args) {
-        this.init();
-        if (type === 'warn') {
-            this.originalConsoleWarn(...args);
+    onInit() {
+        this.render();
+        this.updateWeakMap();
+        this.initialized = true;
+        this.leavesRender = new LeavesRender(this.viewContext, this.viewContainerRef, this.getOutletParent, this.getOutletElement);
+        this.leavesRender.initialize(this.context);
+    }
+    updateWeakMap() {
+        ELEMENT_TO_NODE.set(this.nativeElement, this.text);
+        NODE_TO_ELEMENT.set(this.text, this.nativeElement);
+    }
+    onDestroy() {
+        if (NODE_TO_ELEMENT.get(this.text) === this.nativeElement) {
+            NODE_TO_ELEMENT.delete(this.text);
         }
-        else {
-            this.originalConsoleLog(...args);
+        ELEMENT_TO_NODE.delete(this.nativeElement);
+        this.leavesRender.destroy();
+        this.nativeElement?.remove();
+    }
+    onContextChange() {
+        if (!this.initialized) {
+            return;
         }
-        this.appendLog(type, ...args);
+        this.rerender();
+        this.updateWeakMap();
+        this.leavesRender.update(this.context);
     }
-    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;
+}
+
+class DefaultTextFlavour extends BaseTextFlavour {
+    render() {
+        const { nativeElement } = createText(this.text.text);
+        this.nativeElement = nativeElement;
     }
-    createContainer() {
-        this.loadState();
-        const doc = this.doc;
-        const container = doc.createElement('div');
-        container.style.position = 'fixed';
-        container.style.right = 'auto';
-        container.style.bottom = 'auto';
-        container.style.boxSizing = 'border-box';
-        container.style.background = 'rgba(17, 24, 39, 0.95)';
-        container.style.color = '#e5e7eb';
-        container.style.fontSize = '12px';
-        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 => {
-            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 = '清除日志';
-        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 = '';
-            }
-        });
-        actions.appendChild(collapseButton);
-        actions.appendChild(clearButton);
-        header.appendChild(title);
-        header.appendChild(actions);
-        const scrollForm = doc.createElement('div');
-        scrollForm.style.display = 'grid';
-        scrollForm.style.gridTemplateColumns = '1fr 110px 50px';
-        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';
-        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);
+    rerender() { }
+}
+class VoidTextFlavour extends BaseTextFlavour {
+    render() {
+        const { nativeElement } = createText(this.text.text);
+        this.nativeElement = nativeElement;
+        this.nativeElement.setAttribute('data-slate-spacer', 'true');
+        this.nativeElement.classList.add('slate-spacer');
+    }
+    rerender() { }
+}
+const createText = (text) => {
+    const nativeElement = document.createElement('span');
+    nativeElement.setAttribute('data-slate-node', 'text');
+    return { nativeElement };
+};
+
+class ListRender {
+    constructor(viewContext, viewContainerRef, getOutletParent, getOutletElement) {
+        this.viewContext = viewContext;
+        this.viewContainerRef = viewContainerRef;
+        this.getOutletParent = getOutletParent;
+        this.getOutletElement = getOutletElement;
+        this.children = [];
+        this.views = [];
+        this.blockCards = [];
+        this.contexts = [];
+        this.viewTypes = [];
+        this.differ = null;
+        this.initialized = false;
+        this.preRenderingHTMLElement = [];
+    }
+    initialize(children, parent, childrenContext, preRenderingCount = 0) {
+        this.initialized = true;
+        this.children = children;
+        const isRoot = parent === this.viewContext.editor;
+        const firstIndex = isRoot ? this.viewContext.editor.children.indexOf(children[0]) : 0;
+        const parentPath = AngularEditor.findPath(this.viewContext.editor, parent);
+        children.forEach((descendant, _index) => {
+            NODE_TO_INDEX.set(descendant, firstIndex + _index);
+            NODE_TO_PARENT.set(descendant, parent);
+            const context = getContext(firstIndex + _index, descendant, parentPath, childrenContext, this.viewContext);
+            const viewType = getViewType(descendant, parent, this.viewContext);
+            const view = createEmbeddedViewOrComponentOrFlavour(viewType, context, this.viewContext, this.viewContainerRef);
+            const blockCard = createBlockCard(descendant, view, this.viewContext);
+            this.views.push(view);
+            this.contexts.push(context);
+            this.viewTypes.push(viewType);
+            this.blockCards.push(blockCard);
         });
-        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();
+        mount(this.views, this.blockCards, this.getOutletParent(), this.getOutletElement());
+        const newDiffers = this.viewContext.editor.injector.get(IterableDiffers);
+        this.differ = newDiffers.find(children).create(trackBy(this.viewContext));
+        this.differ.diff(children);
+        if (parent === this.viewContext.editor) {
+            executeAfterViewInit(this.viewContext.editor);
+        }
     }
-    startDrag(event) {
-        if (event.button !== 0) {
+    update(children, parent, childrenContext, preRenderingCount = 0) {
+        if (!this.initialized || this.children.length === 0) {
+            this.initialize(children, parent, childrenContext, preRenderingCount);
             return;
         }
-        if (!this.container) {
-            return;
+        if (!this.differ) {
+            throw new Error('Exception: Can not find differ ');
         }
-        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();
+        const outletParent = this.getOutletParent();
+        if (this.preRenderingHTMLElement.length > 0) {
+            const preRenderingElement = [...this.preRenderingHTMLElement];
+            preRenderingElement.forEach((rootNodes, index) => {
+                rootNodes.forEach(rootNode => {
+                    rootNode.style.position = '';
+                    rootNode.style.top = '';
+                });
+            });
+            this.preRenderingHTMLElement = [];
         }
-    }
-    startResize(event) {
-        if (event.button !== 0 || this.state.collapsed) {
-            return;
+        const diffResult = this.differ.diff(children);
+        const parentPath = AngularEditor.findPath(this.viewContext.editor, parent);
+        const isRoot = parent === this.viewContext.editor;
+        const firstIndex = isRoot ? this.viewContext.editor.children.indexOf(children[0]) : 0;
+        if (diffResult) {
+            let firstRootNode = getRootNodes(this.views[0], this.blockCards[0])[0];
+            const newContexts = [];
+            const newViewTypes = [];
+            const newViews = [];
+            const newBlockCards = [];
+            diffResult.forEachItem(record => {
+                const currentIndex = firstIndex + record.currentIndex;
+                NODE_TO_INDEX.set(record.item, currentIndex);
+                NODE_TO_PARENT.set(record.item, parent);
+                let context = getContext(currentIndex, record.item, parentPath, childrenContext, this.viewContext);
+                const viewType = getViewType(record.item, parent, this.viewContext);
+                newViewTypes.push(viewType);
+                let view;
+                let blockCard;
+                if (record.previousIndex === null) {
+                    view = createEmbeddedViewOrComponentOrFlavour(viewType, context, this.viewContext, this.viewContainerRef);
+                    blockCard = createBlockCard(record.item, view, this.viewContext);
+                    newContexts.push(context);
+                    newViews.push(view);
+                    newBlockCards.push(blockCard);
+                    mountOnItemChange(record.currentIndex, record.item, newViews, newBlockCards, outletParent, firstRootNode, this.viewContext);
+                }
+                else {
+                    const previousView = this.views[record.previousIndex];
+                    const previousViewType = this.viewTypes[record.previousIndex];
+                    const previousContext = this.contexts[record.previousIndex];
+                    const previousBlockCard = this.blockCards[record.previousIndex];
+                    if (previousViewType !== viewType) {
+                        view = createEmbeddedViewOrComponentOrFlavour(viewType, context, this.viewContext, this.viewContainerRef);
+                        blockCard = createBlockCard(record.item, view, this.viewContext);
+                        const firstRootNode = getRootNodes(previousView, previousBlockCard)[0];
+                        const newRootNodes = getRootNodes(view, blockCard);
+                        firstRootNode.replaceWith(...newRootNodes);
+                        previousView.destroy();
+                        previousBlockCard?.destroy();
+                    }
+                    else {
+                        view = previousView;
+                        blockCard = previousBlockCard;
+                        if (memoizedContext(this.viewContext, record.item, previousContext, context)) {
+                            context = previousContext;
+                        }
+                        else {
+                            updateContext(previousView, context, this.viewContext);
+                        }
+                    }
+                    newContexts.push(context);
+                    newViews.push(view);
+                    newBlockCards.push(blockCard);
+                }
+            });
+            diffResult.forEachOperation(record => {
+                // removed
+                if (record.currentIndex === null) {
+                    const view = this.views[record.previousIndex];
+                    const blockCard = this.blockCards[record.previousIndex];
+                    view.destroy();
+                    blockCard?.destroy();
+                }
+                // moved
+                if (record.previousIndex !== null && record.currentIndex !== null) {
+                    mountOnItemChange(record.currentIndex, record.item, newViews, newBlockCards, outletParent, firstRootNode, this.viewContext);
+                    // Solve the block-card DOMElement loss when moving nodes
+                    newBlockCards[record.currentIndex]?.instance.append();
+                }
+            });
+            this.viewTypes = newViewTypes;
+            this.views = newViews;
+            this.contexts = newContexts;
+            this.children = children;
+            this.blockCards = newBlockCards;
+            if (parent === this.viewContext.editor) {
+                executeAfterViewInit(this.viewContext.editor);
+            }
         }
-        if (!this.container) {
-            return;
+        else {
+            const newContexts = [];
+            this.children.forEach((child, _index) => {
+                NODE_TO_INDEX.set(child, firstIndex + _index);
+                NODE_TO_PARENT.set(child, parent);
+                let context = getContext(firstIndex + _index, child, parentPath, childrenContext, this.viewContext);
+                const previousContext = this.contexts[_index];
+                if (memoizedContext(this.viewContext, child, previousContext, context)) {
+                    context = previousContext;
+                }
+                else {
+                    updateContext(this.views[_index], context, this.viewContext);
+                }
+                newContexts.push(context);
+            });
+            this.contexts = newContexts;
         }
-        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;
+        if (preRenderingCount > 0) {
+            for (let i = 0; i < preRenderingCount; i++) {
+                const rootNodes = [...getRootNodes(this.views[i], this.blockCards[i])];
+                rootNodes.forEach(rootNode => {
+                    rootNode.style.top = '-100%';
+                    rootNode.style.position = 'absolute';
+                });
+                this.preRenderingHTMLElement.push(rootNodes);
+            }
         }
-        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`;
+    destroy() {
+        this.children.forEach((element, index) => {
+            if (this.views[index]) {
+                this.views[index].destroy();
+            }
+            if (this.blockCards[index]) {
+                this.blockCards[index].destroy();
+            }
+        });
+        this.children = [];
+        this.views = [];
+        this.blockCards = [];
+        this.contexts = [];
+        this.viewTypes = [];
+        this.initialized = false;
+        this.differ = null;
     }
-    applyCollapsedState() {
-        if (!this.container || !this.contentWrapper || !this.bubble || !this.collapseToggle) {
-            return;
+}
+function getContext(index, item, parentPath, childrenContext, viewContext) {
+    if (Element.isElement(item)) {
+        const computedContext = getCommonContext(index, item, parentPath, viewContext, childrenContext);
+        const key = AngularEditor.findKey(viewContext.editor, item);
+        const isInline = viewContext.editor.isInline(item);
+        const isVoid = viewContext.editor.isVoid(item);
+        const elementContext = {
+            element: item,
+            ...computedContext,
+            attributes: {
+                'data-slate-node': 'element',
+                'data-slate-key': key.id
+            },
+            decorate: childrenContext.decorate,
+            readonly: childrenContext.readonly
+        };
+        if (isInline) {
+            elementContext.attributes['data-slate-inline'] = true;
         }
-        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';
+        if (isVoid) {
+            elementContext.attributes['data-slate-void'] = true;
         }
-        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';
+        // add contentEditable for block element only to avoid chinese input be broken
+        if (isVoid && !isInline) {
+            elementContext.contentEditable = false;
         }
+        return elementContext;
     }
-    setCollapsed(collapsed) {
-        this.state.collapsed = collapsed;
-        this.applyCollapsedState();
-        this.persistState();
-    }
-    applyState() {
-        this.applyPosition();
-        this.applyCollapsedState();
+    else {
+        const computedContext = getCommonContext(index, item, parentPath, viewContext, childrenContext);
+        const isLeafBlock = AngularEditor.isLeafBlock(viewContext.editor, childrenContext.parent);
+        const textContext = {
+            decorations: computedContext.decorations,
+            isLast: isLeafBlock && index === childrenContext.parent.children.length - 1,
+            parent: childrenContext.parent,
+            text: item
+        };
+        return textContext;
     }
-    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;
+}
+function getCommonContext(index, item, parentPath, viewContext, childrenContext) {
+    const p = parentPath.concat(index);
+    try {
+        const ds = childrenContext.decorate([item, p]);
+        // [list-render] performance optimization: reduce the number of calls to the `Editor.range(viewContext.editor, p)` method
+        if (childrenContext.selection || childrenContext.decorations.length > 0) {
+            const range = Editor.range(viewContext.editor, p);
+            const sel = childrenContext.selection && Range.intersection(range, childrenContext.selection);
+            for (const dec of childrenContext.decorations) {
+                const d = Range.intersection(dec, range);
+                if (d) {
+                    ds.push(d);
                 }
             }
+            return { selection: sel, decorations: ds };
         }
-        catch {
-            // ignore storage errors
+        else {
+            return { selection: null, decorations: ds };
         }
     }
-    persistState() {
-        try {
-            this.doc.defaultView?.localStorage?.setItem(VirtualScrollDebugOverlay.storageKey, JSON.stringify(this.state));
-        }
-        catch {
-            // ignore storage errors
-        }
+    catch (error) {
+        viewContext.editor.onError({
+            code: SlateErrorCode.GetStartPointError,
+            nativeError: error
+        });
+        return { selection: null, decorations: [] };
     }
-    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;
+}
+function getViewType(item, parent, viewContext) {
+    if (Element.isElement(item)) {
+        return (viewContext.renderElement && viewContext.renderElement(item)) || DefaultElementFlavour;
     }
-    formatValue(value) {
-        if (typeof value === 'string') {
-            return value;
-        }
-        try {
-            return JSON.stringify(value);
-        }
-        catch (error) {
-            return String(value);
-        }
+    else {
+        const isVoid = viewContext.editor.isVoid(parent);
+        return isVoid ? VoidTextFlavour : (viewContext.renderText && viewContext.renderText(item)) || DefaultTextFlavour;
     }
-    setScrollTopValue(value) {
-        if (this.distanceInput) {
-            this.distanceInput.value = String(value ?? 0);
-        }
+}
+function createBlockCard(item, view, viewContext) {
+    const isBlockCard = viewContext.editor.isBlockCard(item);
+    if (isBlockCard) {
+        const rootNodes = getRootNodes(view);
+        const blockCardRef = new BlockCardRef();
+        blockCardRef.instance = new SlateBlockCard();
+        blockCardRef.instance.onInit();
+        blockCardRef.instance.initializeCenter(rootNodes);
+        return blockCardRef;
+    }
+    else {
+        return null;
+    }
+}
+function trackBy(viewContext) {
+    return (index, node) => {
+        return viewContext.trackBy(node) || AngularEditor.findKey(viewContext.editor, node);
+    };
+}
+function memoizedContext(viewContext, descendant, prev, next) {
+    if (Element.isElement(descendant)) {
+        return memoizedElementContext(viewContext, prev, next);
     }
+    else {
+        return memoizedTextContext(prev, next);
+    }
+}
+function memoizedElementContext(viewContext, prev, next) {
+    return (prev.element === next.element &&
+        (!viewContext.isStrictDecorate || prev.decorate === next.decorate) &&
+        prev.readonly === next.readonly &&
+        isDecoratorRangeListEqual(prev.decorations, next.decorations) &&
+        (prev.selection === next.selection || (!!prev.selection && !!next.selection && Range.equals(prev.selection, next.selection))));
+}
+function memoizedTextContext(prev, next) {
+    return (next.parent === prev.parent &&
+        next.isLast === prev.isLast &&
+        next.text === prev.text &&
+        isDecoratorRangeListEqual(next.decorations, prev.decorations));
+}
+function addAfterViewInitQueue(editor, afterViewInitCallback) {
+    const queue = getAfterViewInitQueue(editor);
+    queue.push(afterViewInitCallback);
+    EDITOR_TO_AFTER_VIEW_INIT_QUEUE.set(editor, queue);
+}
+function getAfterViewInitQueue(editor) {
+    return EDITOR_TO_AFTER_VIEW_INIT_QUEUE.get(editor) || [];
+}
+function clearAfterViewInitQueue(editor) {
+    EDITOR_TO_AFTER_VIEW_INIT_QUEUE.set(editor, []);
+}
+function executeAfterViewInit(editor) {
+    const queue = getAfterViewInitQueue(editor);
+    queue.forEach(callback => callback());
+    clearAfterViewInitQueue(editor);
 }
 
 // not correctly clipboardData on beforeinput
 const forceOnDOMPaste = IS_SAFARI;
-const isDebug = localStorage.getItem(SLATE_DEBUG_KEY) === 'true';
-const isDebugScrollTop = localStorage.getItem(SLATE_DEBUG_KEY_SCROLL_TOP) === 'true';
 class SlateEditable {
     set virtualScroll(config) {
         this.virtualScrollConfig = config;
         if (isDebugScrollTop) {
-            this.debugLog('log', 'virtualScrollConfig scrollTop:', config.scrollTop);
+            debugLog('log', 'virtualScrollConfig scrollTop:', config.scrollTop);
         }
         IS_ENABLED_VIRTUAL_SCROLL.set(this.editor, config.enabled);
         if (this.isEnabledVirtualScroll()) {
@@ -3291,7 +3322,6 @@ class SlateEditable {
                     const { preRenderingCount, childrenWithPreRendering } = this.handlePreRendering();
                     this.listRender.update(childrenWithPreRendering, this.editor, this.context, preRenderingCount);
                 }
-                this.tryMeasureInViewportChildrenHeights();
             }
             else {
                 if (!this.listRender.initialized) {
@@ -3345,7 +3375,7 @@ class SlateEditable {
                 EDITOR_TO_VIRTUAL_SCROLL_SELECTION.set(this.editor, intersectedSelection);
                 if (!intersectedSelection || !Range.equals(intersectedSelection, forwardSelection)) {
                     if (isDebug) {
-                        this.debugLog('log', `selection is not in visible range, selection: ${JSON.stringify(selection)}, intersectedSelection: ${JSON.stringify(intersectedSelection)}`);
+                        debugLog('log', `selection is not in visible range, selection: ${JSON.stringify(selection)}, intersectedSelection: ${JSON.stringify(intersectedSelection)}`);
                     }
                     return intersectedSelection;
                 }
@@ -3516,7 +3546,7 @@ class SlateEditable {
         if (isDebug && remeasureIndics.length > 0) {
             console.log('remeasure height by indics: ', remeasureIndics);
         }
-        this.remeasureHeightByIndics(remeasureIndics);
+        measureHeightByIndics(this.editor, remeasureIndics, true);
     }
     updateContext() {
         const decorations = this.generateDecorations();
@@ -3604,14 +3634,10 @@ class SlateEditable {
                     editorResizeObserverRectWidth = entries[0].contentRect.width;
                     this.keyHeightMap.clear();
                     const remeasureIndics = this.inViewportIndics;
-                    this.remeasureHeightByIndics(remeasureIndics);
+                    measureHeightByIndics(this.editor, remeasureIndics, true);
                 }
             });
             this.editorResizeObserver.observe(this.elementRef.nativeElement);
-            if (isDebug) {
-                const doc = this.elementRef?.nativeElement?.ownerDocument ?? document;
-                VirtualScrollDebugOverlay.getInstance(doc);
-            }
         }
     }
     setVirtualSpaceHeight(topHeight, bottomHeight) {
@@ -3629,10 +3655,6 @@ class SlateEditable {
         }
         return parseFloat(this.virtualTopHeightElement.style.height.replace('px', ''));
     }
-    debugLog(type, ...args) {
-        const doc = this.elementRef?.nativeElement?.ownerDocument ?? document;
-        VirtualScrollDebugOverlay.log(doc, type, ...args);
-    }
     handlePreRendering() {
         let preRenderingCount = 1;
         const childrenWithPreRendering = [...this.inViewportChildren];
@@ -3650,51 +3672,62 @@ class SlateEditable {
     }
     tryUpdateVirtualViewport() {
         if (isDebug) {
-            this.debugLog('log', 'tryUpdateVirtualViewport');
+            debugLog('log', 'tryUpdateVirtualViewport');
         }
         this.tryUpdateVirtualViewportAnimId && cancelAnimationFrame(this.tryUpdateVirtualViewportAnimId);
         this.tryUpdateVirtualViewportAnimId = requestAnimationFrame(() => {
             if (isDebug) {
-                this.debugLog('log', 'tryUpdateVirtualViewport Anim start');
+                debugLog('log', 'tryUpdateVirtualViewport Anim start');
             }
             let virtualView = this.calculateVirtualViewport();
             let diff = this.diffVirtualViewport(virtualView);
+            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');
+                }
+            }
             if (diff.isDifferent) {
                 this.applyVirtualView(virtualView);
                 if (this.listRender.initialized) {
                     const { preRenderingCount, childrenWithPreRendering } = this.handlePreRendering();
                     this.listRender.update(childrenWithPreRendering, this.editor, this.context, preRenderingCount);
+                    if (diff.needAddOnTop) {
+                        const remeasureAddedIndics = diff.changedIndexesOfTop;
+                        if (isDebug) {
+                            debugLog('log', 'needAddOnTop to remeasure heights: ', remeasureAddedIndics);
+                        }
+                        const startIndexBeforeAdd = diff.changedIndexesOfTop[diff.changedIndexesOfTop.length - 1] + 1;
+                        const topHeightBeforeAdd = virtualView.accumulatedHeights[startIndexBeforeAdd];
+                        const changed = measureHeightByIndics(this.editor, remeasureAddedIndics);
+                        if (changed) {
+                            const newHeights = buildHeightsAndAccumulatedHeights(this.editor);
+                            const actualTopHeightAfterAdd = newHeights.accumulatedHeights[startIndexBeforeAdd];
+                            const newTopHeight = virtualView.top - (actualTopHeightAfterAdd - topHeightBeforeAdd);
+                            this.setVirtualSpaceHeight(newTopHeight);
+                            if (isDebug) {
+                                debugLog('log', `update top height since will add element in top（正数减去高度，负数代表增加高度）: ${actualTopHeightAfterAdd - topHeightBeforeAdd}`);
+                            }
+                        }
+                    }
                     if (!AngularEditor.isReadOnly(this.editor) && this.editor.selection) {
                         this.toNativeSelection();
                     }
                 }
-                if (diff.needAddOnTop) {
-                    const remeasureAddedIndics = diff.changedIndexesOfTop;
-                    if (isDebug) {
-                        this.debugLog('log', 'needAddOnTop to remeasure heights: ', remeasureAddedIndics);
-                    }
-                    const startIndexBeforeAdd = diff.changedIndexesOfTop[diff.changedIndexesOfTop.length - 1] + 1;
-                    const topHeightBeforeAdd = virtualView.accumulatedHeights[startIndexBeforeAdd];
-                    const result = this.remeasureHeightByIndics(remeasureAddedIndics);
-                    if (result) {
-                        const newHeights = buildHeightsAndAccumulatedHeights(this.editor);
-                        const actualTopHeightAfterAdd = newHeights.accumulatedHeights[startIndexBeforeAdd];
-                        const newTopHeight = virtualView.top - (actualTopHeightAfterAdd - topHeightBeforeAdd);
-                        this.setVirtualSpaceHeight(newTopHeight);
-                        this.debugLog('log', `update top height cause added element in top, 减去: ${actualTopHeightAfterAdd - topHeightBeforeAdd}`);
-                    }
-                }
-                this.tryMeasureInViewportChildrenHeights();
             }
             else {
                 const topHeight = this.getVirtualTopHeight();
                 if (virtualView.top !== topHeight) {
-                    this.debugLog('log', 'update top height: ', virtualView.top - topHeight, 'start index', this.inViewportIndics[0]);
+                    if (isDebug) {
+                        debugLog('log', 'update top height since invalid status（正数减去高度，负数代表增加高度）: ', topHeight - virtualView.top);
+                    }
                     this.setVirtualSpaceHeight(virtualView.top);
                 }
             }
             if (isDebug) {
-                this.debugLog('log', 'tryUpdateVirtualViewport Anim end');
+                debugLog('log', 'tryUpdateVirtualViewport Anim end');
             }
         });
     }
@@ -3734,7 +3767,7 @@ class SlateEditable {
                     Math.floor(this.virtualScrollConfig.viewportBoundingTop);
                 EDITOR_TO_BUSINESS_TOP.set(this.editor, businessTop);
                 if (isDebug) {
-                    this.debugLog('log', 'businessTop', businessTop);
+                    debugLog('log', 'businessTop', businessTop);
                 }
             }, 100);
         }
@@ -3846,18 +3879,18 @@ class SlateEditable {
                 }
             }
             if (isDebug) {
-                this.debugLog('log', `====== diffVirtualViewport stage: ${stage} ======`);
-                this.debugLog('log', 'oldIndexesInViewport:', oldIndexesInViewport);
-                this.debugLog('log', 'newIndexesInViewport:', newIndexesInViewport);
-                this.debugLog('log', 'changedIndexesOfTop:', needRemoveOnTop ? '-' : needAddOnTop ? '+' : '-', changedIndexesOfTop, changedIndexesOfTop.map(index => getRealHeightByElement(this.editor, this.editor.children[index], 0)));
-                this.debugLog('log', 'changedIndexesOfBottom:', needAddOnBottom ? '+' : needRemoveOnBottom ? '-' : '+', changedIndexesOfBottom, changedIndexesOfBottom.map(index => getRealHeightByElement(this.editor, this.editor.children[index], 0)));
+                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)));
                 const needTop = virtualView.heights.slice(0, newIndexesInViewport[0]).reduce((acc, height) => acc + height, 0);
                 const needBottom = virtualView.heights
                     .slice(newIndexesInViewport[newIndexesInViewport.length - 1] + 1)
                     .reduce((acc, height) => acc + height, 0);
-                this.debugLog('log', needTop - parseFloat(this.virtualTopHeightElement.style.height), 'newTopHeight:', needTop, 'prevTopHeight:', parseFloat(this.virtualTopHeightElement.style.height));
-                this.debugLog('log', 'newBottomHeight:', needBottom, 'prevBottomHeight:', parseFloat(this.virtualBottomHeightElement.style.height));
-                this.debugLog('warn', '=========== Dividing line ===========');
+                debugLog('log', needTop - parseFloat(this.virtualTopHeightElement.style.height), 'newTopHeight:', needTop, 'prevTopHeight:', parseFloat(this.virtualTopHeightElement.style.height));
+                debugLog('log', 'newBottomHeight:', needBottom, 'prevBottomHeight:', parseFloat(this.virtualBottomHeightElement.style.height));
+                debugLog('warn', '=========== Dividing line ===========');
             }
             return {
                 isDifferent: true,
@@ -3875,81 +3908,6 @@ class SlateEditable {
             changedIndexesOfBottom: []
         };
     }
-    tryMeasureInViewportChildrenHeights() {
-        if (!this.isEnabledVirtualScroll()) {
-            return;
-        }
-        this.tryMeasureInViewportChildrenHeightsAnimId && cancelAnimationFrame(this.tryMeasureInViewportChildrenHeightsAnimId);
-        this.tryMeasureInViewportChildrenHeightsAnimId = requestAnimationFrame(() => {
-            this.measureVisibleHeights();
-        });
-    }
-    measureVisibleHeights() {
-        const children = (this.editor.children || []);
-        const inViewportIndics = [...this.inViewportIndics];
-        inViewportIndics.forEach(index => {
-            const node = children[index];
-            if (!node) {
-                return;
-            }
-            const key = AngularEditor.findKey(this.editor, node);
-            // 跳过已测过的块，除非强制测量
-            if (this.keyHeightMap.has(key.id)) {
-                return;
-            }
-            const view = ELEMENT_TO_COMPONENT.get(node);
-            if (!view) {
-                return;
-            }
-            const ret = view.getRealHeight();
-            if (ret instanceof Promise) {
-                ret.then(height => {
-                    this.keyHeightMap.set(key.id, height);
-                });
-            }
-            else {
-                this.keyHeightMap.set(key.id, ret);
-            }
-        });
-    }
-    remeasureHeightByIndics(indics) {
-        const children = (this.editor.children || []);
-        let isHeightChanged = false;
-        indics.forEach((index, i) => {
-            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.keyHeightMap.get(key.id);
-            const ret = view.getRealHeight();
-            if (ret instanceof Promise) {
-                ret.then(height => {
-                    this.keyHeightMap.set(key.id, height);
-                    if (height !== prevHeight) {
-                        isHeightChanged = true;
-                        if (isDebug) {
-                            this.debugLog('log', `remeasure element height, index: ${index} prevHeight: ${prevHeight} newHeight: ${height}`);
-                        }
-                    }
-                });
-            }
-            else {
-                this.keyHeightMap.set(key.id, ret);
-                if (ret !== prevHeight) {
-                    isHeightChanged = true;
-                    if (isDebug) {
-                        this.debugLog('log', `remeasure element height, 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) => {
@@ -5182,5 +5140,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, EDITOR_TO_BUSINESS_TOP, EDITOR_TO_VIRTUAL_SCROLL_SELECTION, 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_ENABLED_VIRTUAL_SCROLL, IS_FIREFOX, IS_FIREFOX_LEGACY, IS_IOS, IS_QQBROWSER, IS_SAFARI, IS_UC_MOBILE, IS_WECHATBROWSER, PLACEHOLDER_SYMBOL, SLATE_BLOCK_CARD_CLASS_NAME, SLATE_DEBUG_KEY, SLATE_DEBUG_KEY_SCROLL_TOP, SlateBlockCard, SlateChildrenOutlet, SlateEditable, SlateErrorCode, SlateFragmentAttributeKey, SlateModule, SlateString, VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT, VoidTextFlavour, blobAsString, buildHTMLText, buildHeightsAndAccumulatedHeights, check, completeTable, createClipboardData, createText, createThrottleRAF, defaultScrollSelectionIntoView, fallbackCopyText, getBlockCardByNativeElement, getBusinessTop, getCardTargetAttribute, getClipboardData, getClipboardFromHTMLText, getContentHeight, getDataTransferClipboard, getDataTransferClipboardText, getNavigatorClipboard, getPlainText, getRealHeightByElement, getSelection, getSlateFragmentAttribute, getZeroTextNode, hasAfterContextChange, hasBeforeContextChange, hasBlockCard, hasBlockCardWithNode, hotkeys, isCardCenterByTargetAttr, isCardLeft, isCardLeftByTargetAttr, isCardRightByTargetAttr, isClipboardFile, isClipboardReadSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isComponentType, isDOMText, isDecoratorRangeListEqual, isFlavourType, isInvalidTable, isTemplateRef, isValid, normalize, scrollToElement, 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, EDITOR_TO_BUSINESS_TOP, EDITOR_TO_VIRTUAL_SCROLL_SELECTION, 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_ENABLED_VIRTUAL_SCROLL, IS_FIREFOX, IS_FIREFOX_LEGACY, IS_IOS, IS_QQBROWSER, IS_SAFARI, IS_UC_MOBILE, IS_WECHATBROWSER, PLACEHOLDER_SYMBOL, SLATE_BLOCK_CARD_CLASS_NAME, SLATE_DEBUG_KEY, SLATE_DEBUG_KEY_SCROLL_TOP, SlateBlockCard, SlateChildrenOutlet, SlateEditable, SlateErrorCode, SlateFragmentAttributeKey, SlateModule, SlateString, VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT, VoidTextFlavour, blobAsString, buildHTMLText, buildHeightsAndAccumulatedHeights, check, completeTable, createClipboardData, createText, createThrottleRAF, debugLog, defaultScrollSelectionIntoView, fallbackCopyText, getBlockCardByNativeElement, getBusinessTop, getCardTargetAttribute, getClipboardData, getClipboardFromHTMLText, getContentHeight, getDataTransferClipboard, getDataTransferClipboardText, getNavigatorClipboard, getPlainText, getRealHeightByElement, getSelection, getSlateFragmentAttribute, getZeroTextNode, hasAfterContextChange, hasBeforeContextChange, hasBlockCard, hasBlockCardWithNode, hotkeys, isCardCenterByTargetAttr, isCardLeft, isCardLeftByTargetAttr, isCardRightByTargetAttr, isClipboardFile, isClipboardReadSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isComponentType, isDOMText, isDebug, isDebugScrollTop, isDecoratorRangeListEqual, isFlavourType, isInvalidTable, isTemplateRef, isValid, measureHeightByElement, measureHeightByIndics, normalize, scrollToElement, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setNavigatorClipboard, shallowCompare, stripHtml, withAngular };
 //# sourceMappingURL=slate-angular.mjs.map