slate-angular 20.2.0-next.9 → 20.2.0

package/fesm2022/slate-angular.mjs

@@ -353,6 +353,18 @@ const CustomDOMEditor = {
     }
 };
 
+/**
+ * Symbols.
+ */
+const PLACEHOLDER_SYMBOL = Symbol('placeholder');
+/**
+ * Weak map for associating the html element with the component.
+ */
+const ELEMENT_TO_COMPONENT = new WeakMap();
+const IS_ENABLED_VIRTUAL_SCROLL = new WeakMap();
+const EDITOR_TO_VIRTUAL_SCROLL_SELECTION = new WeakMap();
+const EDITOR_TO_AFTER_VIEW_INIT_QUEUE = new WeakMap();
+
 const AngularEditor = {
     ...CustomDOMEditor,
     /**
@@ -424,19 +436,12 @@ const AngularEditor = {
             // FocusedContext is updated to the correct value
             el.focus({ preventScroll: true });
         }
+    },
+    isEnabledVirtualScroll(editor) {
+        return IS_ENABLED_VIRTUAL_SCROLL.get(editor);
     }
 };
 
-/**
- * Symbols.
- */
-const PLACEHOLDER_SYMBOL = Symbol('placeholder');
-/**
- * Weak map for associating the html element with the component.
- */
-const ELEMENT_TO_COMPONENT = new WeakMap();
-const EDITOR_TO_AFTER_VIEW_INIT_QUEUE = new WeakMap();
-
 const IS_IOS = typeof navigator !== 'undefined' &&
     typeof window !== 'undefined' &&
     /iPad|iPhone|iPod/.test(navigator.userAgent) &&
@@ -470,9 +475,9 @@ const HAS_BEFORE_INPUT_SUPPORT = !IS_CHROME_LEGACY &&
     globalThis.InputEvent &&
     // @ts-ignore The `getTargetRanges` property isn't recognized.
     typeof globalThis.InputEvent.prototype.getTargetRanges === 'function';
-const VIRTUAL_SCROLL_DEFAULT_BUFFER_COUNT = 3;
-const VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT = 40;
+const VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT = 30;
 const SLATE_DEBUG_KEY = '__SLATE_DEBUG__';
+const SLATE_DEBUG_KEY_SCROLL_TOP = '__SLATE_DEBUG_SCROLL_TOP__';
 
 /**
  * Hotkey mappings for each platform.
@@ -950,815 +955,1406 @@ const fallbackCopyText = async (text) => {
     });
 };
 
-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.
-        const 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;
+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);
+    }
+    // will trigger selectionchange and clear editor's selection
+    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;
             }
-        });
-        // 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.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;
             }
-            else {
-                const node = Node.parent(editor, selection.anchor.path);
-                if (Element.isElement(node) && Editor.isVoid(editor, node)) {
-                    Transforms.delete(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 = '';
             }
-        }
-    };
-    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;
+        };
+        this.onResizing = (event) => {
+            if (!this.isResizing || !this.container) {
+                return;
             }
-            return true;
+            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();
         }
-        return false;
-    };
-    e.onKeydown = () => { };
-    e.onClick = () => { };
-    e.isBlockCard = element => false;
-    e.isExpanded = element => true;
-    e.onError = (errorData) => {
-        if (errorData.nativeError) {
-            console.error(errorData.nativeError);
+    }
+    log(type, ...args) {
+        this.init();
+        if (type === 'warn') {
+            this.originalConsoleWarn(...args);
         }
         else {
-            console.error(errorData);
+            this.originalConsoleLog(...args);
         }
-    };
-    // exist issue for move operation in withDOM
-    e.apply = (op) => {
-        const matches = [];
-        switch (op.type) {
-            case 'insert_text':
-            case 'remove_text':
-            case 'set_node': {
-                for (const [node, path] of Editor.levels(e, { at: op.path })) {
-                    const key = AngularEditor.findKey(e, node);
-                    matches.push([path, key]);
-                }
-                break;
-            }
-            case 'insert_node':
-            case 'remove_node':
-            case 'merge_node':
-            case 'split_node': {
-                for (const [node, path] of Editor.levels(e, {
-                    at: Path.parent(op.path)
-                })) {
-                    const key = AngularEditor.findKey(e, node);
-                    matches.push([path, key]);
-                }
-                break;
+        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);
             }
-            case 'move_node': {
-                const commonPath = Path.common(Path.parent(op.path), Path.parent(op.newPath));
-                for (const [node, path] of Editor.levels(e, {
-                    at: Path.parent(op.path)
-                })) {
-                    const key = AngularEditor.findKey(e, node);
-                    matches.push([Editor.pathRef(editor, path), key]);
-                }
-                for (const [node, path] of Editor.levels(e, {
-                    at: Path.parent(op.newPath)
-                })) {
-                    if (path.length > commonPath.length) {
-                        const key = AngularEditor.findKey(e, node);
-                        matches.push([Editor.pathRef(editor, path), key]);
-                    }
+        });
+        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;
                 }
-                break;
             }
         }
-        apply(op);
-        for (const [source, key] of matches) {
-            const [node] = Editor.node(e, Path.isPath(source) ? source : source.current);
-            NODE_TO_KEY.set(node, key);
+        catch {
+            // ignore storage errors
         }
-    };
-    e.selectAll = () => {
-        Transforms.select(e, []);
-    };
-    return e;
-};
-
-const TOP_BLUR = 'blur';
-const TOP_COMPOSITION_END = 'compositionend';
-const TOP_COMPOSITION_START = 'compositionstart';
-const TOP_COMPOSITION_UPDATE = 'compositionupdate';
-const TOP_KEY_DOWN = 'keydown';
-const TOP_KEY_PRESS = 'keypress';
-const TOP_KEY_UP = 'keyup';
-const TOP_MOUSE_DOWN = 'mousedown';
-const TOP_MOUSE_MOVE = 'mousemove';
-const TOP_MOUSE_OUT = 'mouseout';
-const TOP_TEXT_INPUT = 'textInput';
-const TOP_PASTE = 'paste';
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/**
- * These variables store information about text content of a target node,
- * allowing comparison of content before and after a given event.
- *
- * Identify the node where selection currently begins, then observe
- * both its text content and its current position in the DOM. Since the
- * browser may natively replace the target node during composition, we can
- * use its position to find its replacement.
- *
- *
- */
-let root = null;
-let startText = null;
-let fallbackText = null;
-function initialize(nativeEventTarget) {
-    root = nativeEventTarget;
-    startText = getText();
-    return true;
-}
-function reset() {
-    root = null;
-    startText = null;
-    fallbackText = null;
-}
-function getData() {
-    if (fallbackText) {
-        return fallbackText;
     }
-    let start;
-    const startValue = startText;
-    const startLength = startValue.length;
-    let end;
-    const endValue = getText();
-    const endLength = endValue.length;
-    for (start = 0; start < startLength; start++) {
-        if (startValue[start] !== endValue[start]) {
-            break;
+    persistState() {
+        try {
+            this.doc.defaultView?.localStorage?.setItem(VirtualScrollDebugOverlay.storageKey, JSON.stringify(this.state));
+        }
+        catch {
+            // ignore storage errors
         }
     }
-    const minEnd = startLength - start;
-    for (end = 1; end <= minEnd; end++) {
-        if (startValue[startLength - end] !== endValue[endLength - end]) {
-            break;
+    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);
+    }
+    formatValue(value) {
+        if (typeof value === 'string') {
+            return value;
+        }
+        try {
+            return JSON.stringify(value);
+        }
+        catch (error) {
+            return String(value);
         }
     }
-    const sliceTail = end > 1 ? 1 - end : undefined;
-    fallbackText = endValue.slice(start, sliceTail);
-    return fallbackText;
-}
-function getText() {
-    if ('value' in root) {
-        return root.value;
+    setScrollTopValue(value) {
+        if (this.distanceInput) {
+            this.distanceInput.value = String(value ?? 0);
+        }
     }
-    return root.textContent;
 }
 
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-const canUseDOM = !!(typeof window !== 'undefined' &&
-    typeof window.document !== 'undefined' &&
-    typeof window.document.createElement !== 'undefined');
-const END_KEYCODES = [9, 13, 27, 32]; // Tab, Return, Esc, Space
-const START_KEYCODE = 229;
-const canUseCompositionEvent = canUseDOM && 'CompositionEvent' in window;
-let documentMode = null;
-if (canUseDOM && 'documentMode' in document) {
-    documentMode = document.documentMode;
-}
-// Webkit offers a very useful `textInput` event that can be used to
-// directly represent `beforeInput`. The IE `textinput` event is not as
-// useful, so we don't use it.
-const canUseTextInputEvent = canUseDOM && 'TextEvent' in window && !documentMode;
-// In IE9+, we have access to composition events, but the data supplied
-// by the native compositionend event may be incorrect. Japanese ideographic
-// spaces, for instance (\u3000) are not recorded correctly.
-const useFallbackCompositionData = canUseDOM && (!canUseCompositionEvent || (documentMode && documentMode > 8 && documentMode <= 11));
-const SPACEBAR_CODE = 32;
-const SPACEBAR_CHAR = String.fromCharCode(SPACEBAR_CODE);
-// Events and their corresponding property names.
-const eventTypes = {
-    beforeInput: {
-        phasedRegistrationNames: {
-            bubbled: 'onBeforeInput',
-            captured: 'onBeforeInputCapture'
-        },
-        dependencies: [TOP_COMPOSITION_END, TOP_KEY_PRESS, TOP_TEXT_INPUT, TOP_PASTE]
-    }
+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 EDITOR_TO_ROOT_NODE_WIDTH = new WeakMap();
+const debugLog = (type, ...args) => {
+    const doc = document;
+    VirtualScrollDebugOverlay.log(doc, type, ...args);
 };
-// Track whether we've ever handled a keypress on the space key.
-let hasSpaceKeypress = false;
-/**
- * Return whether a native keypress event is assumed to be a command.
- * This is required because Firefox fires `keypress` events for key commands
- * (cut, copy, select-all, etc.) even though no character is inserted.
- */
-function isKeypressCommand(nativeEvent) {
-    return ((nativeEvent.ctrlKey || nativeEvent.altKey || nativeEvent.metaKey) &&
-        // ctrlKey && altKey is equivalent to AltGr, and is not a command.
-        !(nativeEvent.ctrlKey && nativeEvent.altKey));
-}
-/**
- * Does our fallback mode think that this event is the end of composition?
- *
- */
-function isFallbackCompositionEnd(topLevelType, nativeEvent) {
-    switch (topLevelType) {
-        case TOP_KEY_UP:
-            // Command keys insert or clear IME input.
-            return END_KEYCODES.indexOf(nativeEvent.keyCode) !== -1;
-        case TOP_KEY_DOWN:
-            // Expect IME keyCode on each keydown. If we get any other
-            // code we must have exited earlier.
-            return nativeEvent.keyCode !== START_KEYCODE;
-        case TOP_KEY_PRESS:
-        case TOP_MOUSE_DOWN:
-        case TOP_BLUR:
-            // Events are not possible without cancelling IME.
-            return true;
-        default:
-            return false;
-    }
-}
-/**
- * Google Input Tools provides composition data via a CustomEvent,
- * with the `data` property populated in the `detail` object. If this
- * is available on the event object, use it. If not, this is a plain
- * composition event and we have nothing special to extract.
- *
- */
-function getDataFromCustomEvent(nativeEvent) {
-    const detail = nativeEvent.detail;
-    if (typeof detail === 'object' && 'data' in detail) {
-        return detail.data;
-    }
-    return null;
-}
-/**
- * Check if a composition event was triggered by Korean IME.
- * Our fallback mode does not work well with IE's Korean IME,
- * so just use native composition events when Korean IME is used.
- * Although CompositionEvent.locale property is deprecated,
- * it is available in IE, where our fallback mode is enabled.
- *
- */
-function isUsingKoreanIME(nativeEvent) {
-    return nativeEvent.locale === 'ko';
-}
-// Track the current IME composition status, if any.
-let isComposing = false;
-function getNativeBeforeInputChars(topLevelType, nativeEvent) {
-    switch (topLevelType) {
-        case TOP_COMPOSITION_END:
-            return getDataFromCustomEvent(nativeEvent);
-        case TOP_KEY_PRESS:
-            /**
-             * If native `textInput` events are available, our goal is to make
-             * use of them. However, there is a special case: the spacebar key.
-             * In Webkit, preventing default on a spacebar `textInput` event
-             * cancels character insertion, but it *also* causes the browser
-             * to fall back to its default spacebar behavior of scrolling the
-             * page.
-             *
-             * Tracking at:
-             * https://code.google.com/p/chromium/issues/detail?id=355103
-             *
-             * To avoid this issue, use the keypress event as if no `textInput`
-             * event is available.
-             */
-            const which = nativeEvent.which;
-            if (which !== SPACEBAR_CODE) {
-                return null;
-            }
-            hasSpaceKeypress = true;
-            return SPACEBAR_CHAR;
-        case TOP_TEXT_INPUT:
-            // Record the characters to be added to the DOM.
-            const chars = nativeEvent.data;
-            // If it's a spacebar character, assume that we have already handled
-            // it at the keypress level and bail immediately. Android Chrome
-            // doesn't give us keycodes, so we need to ignore it.
-            if (chars === SPACEBAR_CHAR && hasSpaceKeypress) {
-                return null;
-            }
-            return chars;
-        default:
-            // For other native event types, do nothing.
-            return null;
-    }
-}
-/**
- * For browsers that do not provide the `textInput` event, extract the
- * appropriate string to use for SyntheticInputEvent.
- *
- */
-function getFallbackBeforeInputChars(topLevelType, nativeEvent) {
-    // If we are currently composing (IME) and using a fallback to do so,
-    // try to extract the composed characters from the fallback object.
-    // If composition event is available, we extract a string only at
-    // compositionevent, otherwise extract it at fallback events.
-    if (isComposing) {
-        if (topLevelType === TOP_COMPOSITION_END || (!canUseCompositionEvent && isFallbackCompositionEnd(topLevelType, nativeEvent))) {
-            const chars = getData();
-            reset();
-            isComposing = false;
-            return chars;
-        }
-        return null;
+const measureHeightByElement = (editor, element) => {
+    const key = AngularEditor.findKey(editor, element);
+    const view = ELEMENT_TO_COMPONENT.get(element);
+    if (!view) {
+        return;
     }
-    switch (topLevelType) {
-        case TOP_PASTE:
-            // If a paste event occurs after a keypress, throw out the input
-            // chars. Paste events should not lead to BeforeInput events.
-            return null;
-        case TOP_KEY_PRESS:
-            /**
-             * As of v27, Firefox may fire keypress events even when no character
-             * will be inserted. A few possibilities:
-             *
-             * - `which` is `0`. Arrow keys, Esc key, etc.
-             *
-             * - `which` is the pressed key code, but no char is available.
-             *   Ex: 'AltGr + d` in Polish. There is no modified character for
-             *   this key combination and no character is inserted into the
-             *   document, but FF fires the keypress for char code `100` anyway.
-             *   No `input` event will occur.
-             *
-             * - `which` is the pressed key code, but a command combination is
-             *   being used. Ex: `Cmd+C`. No character is inserted, and no
-             *   `input` event will occur.
-             */
-            if (!isKeypressCommand(nativeEvent)) {
-                // IE fires the `keypress` event when a user types an emoji via
-                // Touch keyboard of Windows.  In such a case, the `char` property
-                // holds an emoji character like `\uD83D\uDE0A`.  Because its length
-                // is 2, the property `which` does not represent an emoji correctly.
-                // In such a case, we directly return the `char` property instead of
-                // using `which`.
-                if (nativeEvent.char && nativeEvent.char.length > 1) {
-                    return nativeEvent.char;
-                }
-                else if (nativeEvent.which) {
-                    return String.fromCharCode(nativeEvent.which);
+    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 null;
-        case TOP_COMPOSITION_END:
-            return useFallbackCompositionData && !isUsingKoreanIME(nativeEvent) ? null : nativeEvent.data;
-        default:
-            return null;
+            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;
     }
-}
-/**
- * Extract a SyntheticInputEvent for `beforeInput`, based on either native
- * `textInput` or fallback behavior.
- *
- */
-function extractBeforeInputEvent(topLevelType, targetInst, nativeEvent, nativeEventTarget) {
-    let chars;
-    if (canUseTextInputEvent) {
-        chars = getNativeBeforeInputChars(topLevelType, nativeEvent);
+    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;
     }
-    else {
-        chars = getFallbackBeforeInputChars(topLevelType, nativeEvent);
+    if (heights?.has(key.id)) {
+        console.error('getBlockHeight: invalid height value', key.id, height);
     }
-    // If no characters are being inserted, no BeforeInput event should
-    // be fired.
-    if (!chars) {
-        return null;
+    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 calculateVirtualTopHeight = (editor, startIndex) => {
+    const { accumulatedHeights } = buildHeightsAndAccumulatedHeights(editor);
+    return accumulatedHeights[startIndex] ?? 0;
+};
+const scrollToElement = (editor, element, scrollTo) => {
+    const children = editor.children;
+    if (!children.length) {
+        return;
     }
-    const beforeInputEvent = new BeforeInputEvent();
-    beforeInputEvent.data = chars;
-    beforeInputEvent.nativeEvent = nativeEvent;
-    return beforeInputEvent;
-}
-/**
- * Create an `onBeforeInput` event to match
- * http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105/#events-inputevents.
- *
- * This event plugin is based on the native `textInput` event
- * available in Chrome, Safari, Opera, and IE. This event fires after
- * `onKeyPress` and `onCompositionEnd`, but before `onInput`.
- *
- * `beforeInput` is spec'd but not implemented in any browsers, and
- * the `input` event does not provide any useful information about what has
- * actually been added, contrary to the spec. Thus, `textInput` is the best
- * available event to identify the characters that have actually been inserted
- * into the target node.
- *
- * This plugin is also responsible for emitting `composition` events, thus
- * allowing us to share composition fallback code for both `beforeInput` and
- * `composition` event types.
- */
-const BeforeInputEventPlugin = {
-    extractEvents: (topLevelType, targetInst, nativeEvent, nativeEventTarget) => {
-        return extractBeforeInputEvent(topLevelType, targetInst, nativeEvent, nativeEventTarget);
+    const anchorIndex = children.findIndex(item => item === element);
+    if (anchorIndex < 0) {
+        return;
     }
+    const { accumulatedHeights } = buildHeightsAndAccumulatedHeights(editor);
+    scrollTo((accumulatedHeights[anchorIndex] ?? 0) + getBusinessTop(editor));
 };
-class BeforeInputEvent {
-}
 
-const BEFORE_INPUT_EVENTS = [
-    // { name: 'blur', handler: 'onBlur', isTriggerBeforeInput: true },
-    // { name: 'compositionstart', handler: 'onCompositionStart', isTriggerBeforeInput: true },
-    { name: 'compositionupdate', handler: null, isTriggerBeforeInput: true },
-    // { name: 'compositionend', handler: 'onCompositionEnd', isTriggerBeforeInput: false },
-    // { name: 'keydown', handler: 'onKeyDown', isTriggerBeforeInput: true },
-    { name: 'keypress', handler: null, isTriggerBeforeInput: true },
-    { name: 'keyup', handler: 'onKeyUp', isTriggerBeforeInput: true },
-    { name: 'mousedown', handler: 'onMouseDown', isTriggerBeforeInput: true },
-    { name: 'textInput', handler: null, isTriggerBeforeInput: true }
-    // { name: 'paste', handler: 'onPaste', isTriggerBeforeInput: true }
-];
-
-var SlateErrorCode;
-(function (SlateErrorCode) {
-    SlateErrorCode[SlateErrorCode["ToNativeSelectionError"] = 2100] = "ToNativeSelectionError";
-    SlateErrorCode[SlateErrorCode["ToSlateSelectionError"] = 2101] = "ToSlateSelectionError";
-    SlateErrorCode[SlateErrorCode["OnDOMBeforeInputError"] = 2102] = "OnDOMBeforeInputError";
-    SlateErrorCode[SlateErrorCode["OnSyntheticBeforeInputError"] = 2103] = "OnSyntheticBeforeInputError";
-    SlateErrorCode[SlateErrorCode["OnDOMKeydownError"] = 2104] = "OnDOMKeydownError";
-    SlateErrorCode[SlateErrorCode["GetStartPointError"] = 2105] = "GetStartPointError";
-    SlateErrorCode[SlateErrorCode["NotFoundPreviousRootNodeError"] = 3100] = "NotFoundPreviousRootNodeError";
-    SlateErrorCode[SlateErrorCode["InvalidValueError"] = 4100] = "InvalidValueError";
-})(SlateErrorCode || (SlateErrorCode = {}));
-
-function restoreDom(editor, execute) {
-    const editable = EDITOR_TO_ELEMENT.get(editor);
-    let observer = new MutationObserver(mutations => {
-        mutations.reverse().forEach(mutation => {
-            if (mutation.type === 'characterData') {
-                // We don't want to restore the DOM for characterData mutations
-                // because this interrupts the composition.
-                return;
+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);
             }
-            mutation.removedNodes.forEach(node => {
-                mutation.target.insertBefore(node, mutation.nextSibling);
-            });
-            mutation.addedNodes.forEach(node => {
-                mutation.target.removeChild(node);
-            });
-        });
-        disconnect();
-        execute();
-    });
-    const disconnect = () => {
-        observer.disconnect();
-        observer = null;
-    };
-    observer.observe(editable, { subtree: true, childList: true, characterData: true, characterDataOldValue: true });
-    setTimeout(() => {
-        if (observer) {
-            disconnect();
-            execute();
         }
-    }, 0);
-}
-
-class FlavourRef {
-    destroy() {
-        this.instance.onDestroy();
-    }
-}
-class BlockCardRef {
-    destroy() {
-        this.instance.onDestroy();
-    }
-}
-
-function createEmbeddedViewOrComponentOrFlavour(viewType, context, viewContext, viewContainerRef) {
-    if (isFlavourType(viewType)) {
-        const flavourRef = new FlavourRef();
-        flavourRef.instance = new viewType();
-        flavourRef.instance.context = context;
-        flavourRef.instance.viewContext = viewContext;
-        flavourRef.instance.viewContainerRef = viewContainerRef;
-        flavourRef.instance.onInit();
-        return flavourRef;
-    }
-    if (isTemplateRef(viewType)) {
-        const embeddedViewContext = {
-            context,
-            viewContext
-        };
-        const embeddedViewRef = viewContainerRef.createEmbeddedView(viewType, embeddedViewContext);
-        embeddedViewRef.detectChanges();
-        return embeddedViewRef;
-    }
-    if (isComponentType(viewType)) {
-        const componentRef = viewContainerRef.createComponent(viewType, {
-            injector: viewContainerRef.injector
-        });
-        componentRef.instance.viewContext = viewContext;
-        componentRef.instance.context = context;
-        componentRef.changeDetectorRef.detectChanges();
-        return componentRef;
-    }
-}
-function updateContext(view, newContext, viewContext) {
-    if (view instanceof FlavourRef) {
-        view.instance.context = newContext;
-        return;
-    }
-    if (view instanceof ComponentRef) {
-        view.instance.context = newContext;
-    }
-    else {
-        view.context.context = newContext;
-        view.context.viewContext = viewContext;
-        view.detectChanges();
-    }
-}
-function mount(views, blockCards, outletParent, outletElement) {
-    if (views.length > 0) {
-        const fragment = document.createDocumentFragment();
-        views.forEach((view, index) => {
-            const blockCard = blockCards ? blockCards[index] : undefined;
-            fragment.append(...getRootNodes(view, blockCard));
+        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;
+            }
         });
-        if (outletElement) {
-            outletElement.parentElement.insertBefore(fragment, outletElement);
-            outletElement.remove();
+        // 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();
         }
-        else {
-            outletParent.prepend(fragment);
+        // 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]');
         }
-    }
-}
-function getRootNodes(ref, blockCard) {
-    if (blockCard) {
-        return [blockCard.instance.nativeElement];
-    }
-    if (ref instanceof FlavourRef) {
-        return [ref.instance.nativeElement];
-    }
-    if (ref instanceof ComponentRef) {
-        ref.hostView.rootNodes.forEach(ele => {
-            if (!(ele instanceof HTMLElement)) {
-                ele.remove();
-            }
+        // 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' : '';
         });
-        return [ref.instance.nativeElement];
-    }
-    else {
-        const result = [];
-        ref.rootNodes.forEach(rootNode => {
-            const isHTMLElement = rootNode instanceof HTMLElement;
-            const isSlateNodeOfLeaf = isHTMLElement && (rootNode.hasAttribute('data-slate-node') || rootNode.hasAttribute('data-slate-leaf'));
-            if (isSlateNodeOfLeaf && result.every(item => !item.contains(rootNode))) {
-                result.push(rootNode);
+        // 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);
             }
-            if (!isHTMLElement) {
-                rootNode.remove();
+            else {
+                const node = Node.parent(editor, selection.anchor.path);
+                if (Element.isElement(node) && Editor.isVoid(editor, node)) {
+                    Transforms.delete(editor);
+                }
             }
-        });
-        return result;
-    }
-}
-function mountOnItemChange(index, item, views, blockCards, outletParent, firstRootNode, viewContext) {
-    const view = views[index];
-    let rootNodes = getRootNodes(view);
-    if (blockCards) {
-        const isBlockCard = viewContext.editor.isBlockCard(item);
-        if (isBlockCard) {
-            const blockCard = blockCards[index];
-            rootNodes = [blockCard.instance.nativeElement];
         }
-    }
-    if (index === 0) {
-        if (firstRootNode) {
-            rootNodes.forEach(rootNode => {
-                firstRootNode.insertAdjacentElement('beforebegin', rootNode);
-            });
+    };
+    e.insertData = async (data) => {
+        if (!(await e.customInsertFragmentData(data, null))) {
+            e.insertTextData(data);
         }
-        else {
-            outletParent.prepend(...rootNodes);
+    };
+    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;
         }
-    }
-    else {
-        const previousView = views[index - 1];
-        const blockCard = blockCards ? blockCards[index - 1] : null;
-        const previousRootNodes = getRootNodes(previousView, blockCard);
-        let previousRootNode = previousRootNodes[previousRootNodes.length - 1];
-        rootNodes.forEach(rootNode => {
-            previousRootNode.insertAdjacentElement('afterend', rootNode);
-            previousRootNode = rootNode;
-        });
-    }
-}
-
-function hasBeforeContextChange(value) {
-    if (value.beforeContextChange) {
+        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;
+        }
+        return false;
+    };
+    e.onKeydown = () => { };
+    e.onClick = () => { };
+    e.isBlockCard = element => false;
+    e.isExpanded = element => true;
+    e.onError = (errorData) => {
+        if (errorData.nativeError) {
+            console.error(errorData.nativeError);
+        }
+        else {
+            console.error(errorData);
+        }
+    };
+    // exist issue for move operation in withDOM
+    e.apply = (op) => {
+        const matches = [];
+        switch (op.type) {
+            case 'insert_text':
+            case 'remove_text':
+            case 'set_node': {
+                for (const [node, path] of Editor.levels(e, { at: op.path })) {
+                    const key = AngularEditor.findKey(e, node);
+                    matches.push([path, key]);
+                }
+                break;
+            }
+            case 'insert_node':
+            case 'remove_node':
+            case 'merge_node':
+            case 'split_node': {
+                for (const [node, path] of Editor.levels(e, {
+                    at: Path.parent(op.path)
+                })) {
+                    const key = AngularEditor.findKey(e, node);
+                    matches.push([path, key]);
+                }
+                break;
+            }
+            case 'move_node': {
+                const commonPath = Path.common(Path.parent(op.path), Path.parent(op.newPath));
+                for (const [node, path] of Editor.levels(e, {
+                    at: Path.parent(op.path)
+                })) {
+                    const key = AngularEditor.findKey(e, node);
+                    matches.push([Editor.pathRef(editor, path), key]);
+                }
+                for (const [node, path] of Editor.levels(e, {
+                    at: Path.parent(op.newPath)
+                })) {
+                    if (path.length > commonPath.length) {
+                        const key = AngularEditor.findKey(e, node);
+                        matches.push([Editor.pathRef(editor, path), key]);
+                    }
+                }
+                break;
+            }
+        }
+        apply(op);
+        for (const [source, key] of matches) {
+            const [node] = Editor.node(e, Path.isPath(source) ? source : source.current);
+            NODE_TO_KEY.set(node, key);
+        }
+    };
+    e.selectAll = () => {
+        Transforms.select(e, []);
+    };
+    e.isVisible = element => {
         return true;
-    }
-    return false;
+    };
+    return e;
+};
+
+const TOP_BLUR = 'blur';
+const TOP_COMPOSITION_END = 'compositionend';
+const TOP_COMPOSITION_START = 'compositionstart';
+const TOP_COMPOSITION_UPDATE = 'compositionupdate';
+const TOP_KEY_DOWN = 'keydown';
+const TOP_KEY_PRESS = 'keypress';
+const TOP_KEY_UP = 'keyup';
+const TOP_MOUSE_DOWN = 'mousedown';
+const TOP_MOUSE_MOVE = 'mousemove';
+const TOP_MOUSE_OUT = 'mouseout';
+const TOP_TEXT_INPUT = 'textInput';
+const TOP_PASTE = 'paste';
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * These variables store information about text content of a target node,
+ * allowing comparison of content before and after a given event.
+ *
+ * Identify the node where selection currently begins, then observe
+ * both its text content and its current position in the DOM. Since the
+ * browser may natively replace the target node during composition, we can
+ * use its position to find its replacement.
+ *
+ *
+ */
+let root = null;
+let startText = null;
+let fallbackText = null;
+function initialize(nativeEventTarget) {
+    root = nativeEventTarget;
+    startText = getText();
+    return true;
 }
-function hasAfterContextChange(value) {
-    if (value.afterContextChange) {
-        return true;
-    }
-    return false;
+function reset() {
+    root = null;
+    startText = null;
+    fallbackText = null;
 }
-
-class BaseFlavour {
-    constructor() {
-        this.initialized = false;
+function getData() {
+    if (fallbackText) {
+        return fallbackText;
     }
-    static { this.isFlavour = true; }
-    set context(value) {
-        if (hasBeforeContextChange(this)) {
-            this.beforeContextChange(value);
-        }
-        this._context = value;
-        this.onContextChange();
-        if (hasAfterContextChange(this)) {
-            this.afterContextChange();
+    let start;
+    const startValue = startText;
+    const startLength = startValue.length;
+    let end;
+    const endValue = getText();
+    const endLength = endValue.length;
+    for (start = 0; start < startLength; start++) {
+        if (startValue[start] !== endValue[start]) {
+            break;
         }
     }
-    get context() {
-        return this._context;
-    }
-    get editor() {
-        return this.viewContext && this.viewContext.editor;
+    const minEnd = startLength - start;
+    for (end = 1; end <= minEnd; end++) {
+        if (startValue[startLength - end] !== endValue[endLength - end]) {
+            break;
+        }
     }
+    const sliceTail = end > 1 ? 1 - end : undefined;
+    fallbackText = endValue.slice(start, sliceTail);
+    return fallbackText;
 }
-
-const SLATE_BLOCK_CARD_CLASS_NAME = 'slate-block-card';
-class SlateBlockCard {
-    onInit() {
-        const nativeElement = document.createElement('div');
-        nativeElement.classList.add(SLATE_BLOCK_CARD_CLASS_NAME);
-        this.nativeElement = nativeElement;
-        this.createContent();
-    }
-    createContent() {
-        const leftCaret = document.createElement('span');
-        leftCaret.setAttribute(`card-target`, 'card-left');
-        leftCaret.classList.add('card-left');
-        leftCaret.appendChild(getZeroTextNode());
-        const rightCaret = document.createElement('span');
-        rightCaret.setAttribute(`card-target`, 'card-right');
-        rightCaret.classList.add('card-right');
-        rightCaret.appendChild(getZeroTextNode());
-        const center = document.createElement('div');
-        center.setAttribute(`card-target`, 'card-center');
-        this.nativeElement.appendChild(leftCaret);
-        this.nativeElement.appendChild(center);
-        this.nativeElement.appendChild(rightCaret);
-        this.centerContainer = center;
-    }
-    append() {
-        this.centerRootNodes.forEach(rootNode => !this.centerContainer.contains(rootNode) && this.centerContainer.appendChild(rootNode));
-    }
-    initializeCenter(rootNodes) {
-        this.centerRootNodes = rootNodes;
-        this.append();
-    }
-    onDestroy() {
-        this.nativeElement.remove();
+function getText() {
+    if ('value' in root) {
+        return root.value;
     }
+    return root.textContent;
 }
-const getBlockCardByNativeElement = (nativeElement) => {
-    const blockCardElement = nativeElement?.parentElement?.parentElement;
-    if (blockCardElement && blockCardElement.classList.contains(SLATE_BLOCK_CARD_CLASS_NAME)) {
-        return blockCardElement;
-    }
-    return null;
-};
 
-const DEFAULT_ELEMENT_HEIGHT = 24;
-class BaseElementFlavour extends BaseFlavour {
-    constructor() {
-        super(...arguments);
-        this.getOutletParent = () => {
-            return this.nativeElement;
-        };
-        this.getOutletElement = () => {
-            return this.nativeElement.querySelector('.children-outlet');
-        };
-        this.stableHeight = null;
-    }
-    get element() {
-        return this._context && this._context.element;
-    }
-    get selection() {
-        return this._context && this._context.selection;
-    }
-    get decorations() {
-        return this._context && this._context.decorations;
-    }
-    get children() {
-        return this._context && this._context.element.children;
-    }
-    get isCollapsed() {
-        return this.selection && Range.isCollapsed(this.selection);
-    }
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const canUseDOM = !!(typeof window !== 'undefined' &&
+    typeof window.document !== 'undefined' &&
+    typeof window.document.createElement !== 'undefined');
+const END_KEYCODES = [9, 13, 27, 32]; // Tab, Return, Esc, Space
+const START_KEYCODE = 229;
+const canUseCompositionEvent = canUseDOM && 'CompositionEvent' in window;
+let documentMode = null;
+if (canUseDOM && 'documentMode' in document) {
+    documentMode = document.documentMode;
+}
+// Webkit offers a very useful `textInput` event that can be used to
+// directly represent `beforeInput`. The IE `textinput` event is not as
+// useful, so we don't use it.
+const canUseTextInputEvent = canUseDOM && 'TextEvent' in window && !documentMode;
+// In IE9+, we have access to composition events, but the data supplied
+// by the native compositionend event may be incorrect. Japanese ideographic
+// spaces, for instance (\u3000) are not recorded correctly.
+const useFallbackCompositionData = canUseDOM && (!canUseCompositionEvent || (documentMode && documentMode > 8 && documentMode <= 11));
+const SPACEBAR_CODE = 32;
+const SPACEBAR_CHAR = String.fromCharCode(SPACEBAR_CODE);
+// Events and their corresponding property names.
+const eventTypes = {
+    beforeInput: {
+        phasedRegistrationNames: {
+            bubbled: 'onBeforeInput',
+            captured: 'onBeforeInputCapture'
+        },
+        dependencies: [TOP_COMPOSITION_END, TOP_KEY_PRESS, TOP_TEXT_INPUT, TOP_PASTE]
+    }
+};
+// Track whether we've ever handled a keypress on the space key.
+let hasSpaceKeypress = false;
+/**
+ * Return whether a native keypress event is assumed to be a command.
+ * This is required because Firefox fires `keypress` events for key commands
+ * (cut, copy, select-all, etc.) even though no character is inserted.
+ */
+function isKeypressCommand(nativeEvent) {
+    return ((nativeEvent.ctrlKey || nativeEvent.altKey || nativeEvent.metaKey) &&
+        // ctrlKey && altKey is equivalent to AltGr, and is not a command.
+        !(nativeEvent.ctrlKey && nativeEvent.altKey));
+}
+/**
+ * Does our fallback mode think that this event is the end of composition?
+ *
+ */
+function isFallbackCompositionEnd(topLevelType, nativeEvent) {
+    switch (topLevelType) {
+        case TOP_KEY_UP:
+            // Command keys insert or clear IME input.
+            return END_KEYCODES.indexOf(nativeEvent.keyCode) !== -1;
+        case TOP_KEY_DOWN:
+            // Expect IME keyCode on each keydown. If we get any other
+            // code we must have exited earlier.
+            return nativeEvent.keyCode !== START_KEYCODE;
+        case TOP_KEY_PRESS:
+        case TOP_MOUSE_DOWN:
+        case TOP_BLUR:
+            // Events are not possible without cancelling IME.
+            return true;
+        default:
+            return false;
+    }
+}
+/**
+ * Google Input Tools provides composition data via a CustomEvent,
+ * with the `data` property populated in the `detail` object. If this
+ * is available on the event object, use it. If not, this is a plain
+ * composition event and we have nothing special to extract.
+ *
+ */
+function getDataFromCustomEvent(nativeEvent) {
+    const detail = nativeEvent.detail;
+    if (typeof detail === 'object' && 'data' in detail) {
+        return detail.data;
+    }
+    return null;
+}
+/**
+ * Check if a composition event was triggered by Korean IME.
+ * Our fallback mode does not work well with IE's Korean IME,
+ * so just use native composition events when Korean IME is used.
+ * Although CompositionEvent.locale property is deprecated,
+ * it is available in IE, where our fallback mode is enabled.
+ *
+ */
+function isUsingKoreanIME(nativeEvent) {
+    return nativeEvent.locale === 'ko';
+}
+// Track the current IME composition status, if any.
+let isComposing = false;
+function getNativeBeforeInputChars(topLevelType, nativeEvent) {
+    switch (topLevelType) {
+        case TOP_COMPOSITION_END:
+            return getDataFromCustomEvent(nativeEvent);
+        case TOP_KEY_PRESS:
+            /**
+             * If native `textInput` events are available, our goal is to make
+             * use of them. However, there is a special case: the spacebar key.
+             * In Webkit, preventing default on a spacebar `textInput` event
+             * cancels character insertion, but it *also* causes the browser
+             * to fall back to its default spacebar behavior of scrolling the
+             * page.
+             *
+             * Tracking at:
+             * https://code.google.com/p/chromium/issues/detail?id=355103
+             *
+             * To avoid this issue, use the keypress event as if no `textInput`
+             * event is available.
+             */
+            const which = nativeEvent.which;
+            if (which !== SPACEBAR_CODE) {
+                return null;
+            }
+            hasSpaceKeypress = true;
+            return SPACEBAR_CHAR;
+        case TOP_TEXT_INPUT:
+            // Record the characters to be added to the DOM.
+            const chars = nativeEvent.data;
+            // If it's a spacebar character, assume that we have already handled
+            // it at the keypress level and bail immediately. Android Chrome
+            // doesn't give us keycodes, so we need to ignore it.
+            if (chars === SPACEBAR_CHAR && hasSpaceKeypress) {
+                return null;
+            }
+            return chars;
+        default:
+            // For other native event types, do nothing.
+            return null;
+    }
+}
+/**
+ * For browsers that do not provide the `textInput` event, extract the
+ * appropriate string to use for SyntheticInputEvent.
+ *
+ */
+function getFallbackBeforeInputChars(topLevelType, nativeEvent) {
+    // If we are currently composing (IME) and using a fallback to do so,
+    // try to extract the composed characters from the fallback object.
+    // If composition event is available, we extract a string only at
+    // compositionevent, otherwise extract it at fallback events.
+    if (isComposing) {
+        if (topLevelType === TOP_COMPOSITION_END || (!canUseCompositionEvent && isFallbackCompositionEnd(topLevelType, nativeEvent))) {
+            const chars = getData();
+            reset();
+            isComposing = false;
+            return chars;
+        }
+        return null;
+    }
+    switch (topLevelType) {
+        case TOP_PASTE:
+            // If a paste event occurs after a keypress, throw out the input
+            // chars. Paste events should not lead to BeforeInput events.
+            return null;
+        case TOP_KEY_PRESS:
+            /**
+             * As of v27, Firefox may fire keypress events even when no character
+             * will be inserted. A few possibilities:
+             *
+             * - `which` is `0`. Arrow keys, Esc key, etc.
+             *
+             * - `which` is the pressed key code, but no char is available.
+             *   Ex: 'AltGr + d` in Polish. There is no modified character for
+             *   this key combination and no character is inserted into the
+             *   document, but FF fires the keypress for char code `100` anyway.
+             *   No `input` event will occur.
+             *
+             * - `which` is the pressed key code, but a command combination is
+             *   being used. Ex: `Cmd+C`. No character is inserted, and no
+             *   `input` event will occur.
+             */
+            if (!isKeypressCommand(nativeEvent)) {
+                // IE fires the `keypress` event when a user types an emoji via
+                // Touch keyboard of Windows.  In such a case, the `char` property
+                // holds an emoji character like `\uD83D\uDE0A`.  Because its length
+                // is 2, the property `which` does not represent an emoji correctly.
+                // In such a case, we directly return the `char` property instead of
+                // using `which`.
+                if (nativeEvent.char && nativeEvent.char.length > 1) {
+                    return nativeEvent.char;
+                }
+                else if (nativeEvent.which) {
+                    return String.fromCharCode(nativeEvent.which);
+                }
+            }
+            return null;
+        case TOP_COMPOSITION_END:
+            return useFallbackCompositionData && !isUsingKoreanIME(nativeEvent) ? null : nativeEvent.data;
+        default:
+            return null;
+    }
+}
+/**
+ * Extract a SyntheticInputEvent for `beforeInput`, based on either native
+ * `textInput` or fallback behavior.
+ *
+ */
+function extractBeforeInputEvent(topLevelType, targetInst, nativeEvent, nativeEventTarget) {
+    let chars;
+    if (canUseTextInputEvent) {
+        chars = getNativeBeforeInputChars(topLevelType, nativeEvent);
+    }
+    else {
+        chars = getFallbackBeforeInputChars(topLevelType, nativeEvent);
+    }
+    // If no characters are being inserted, no BeforeInput event should
+    // be fired.
+    if (!chars) {
+        return null;
+    }
+    const beforeInputEvent = new BeforeInputEvent();
+    beforeInputEvent.data = chars;
+    beforeInputEvent.nativeEvent = nativeEvent;
+    return beforeInputEvent;
+}
+/**
+ * Create an `onBeforeInput` event to match
+ * http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105/#events-inputevents.
+ *
+ * This event plugin is based on the native `textInput` event
+ * available in Chrome, Safari, Opera, and IE. This event fires after
+ * `onKeyPress` and `onCompositionEnd`, but before `onInput`.
+ *
+ * `beforeInput` is spec'd but not implemented in any browsers, and
+ * the `input` event does not provide any useful information about what has
+ * actually been added, contrary to the spec. Thus, `textInput` is the best
+ * available event to identify the characters that have actually been inserted
+ * into the target node.
+ *
+ * This plugin is also responsible for emitting `composition` events, thus
+ * allowing us to share composition fallback code for both `beforeInput` and
+ * `composition` event types.
+ */
+const BeforeInputEventPlugin = {
+    extractEvents: (topLevelType, targetInst, nativeEvent, nativeEventTarget) => {
+        return extractBeforeInputEvent(topLevelType, targetInst, nativeEvent, nativeEventTarget);
+    }
+};
+class BeforeInputEvent {
+}
+
+const BEFORE_INPUT_EVENTS = [
+    // { name: 'blur', handler: 'onBlur', isTriggerBeforeInput: true },
+    // { name: 'compositionstart', handler: 'onCompositionStart', isTriggerBeforeInput: true },
+    { name: 'compositionupdate', handler: null, isTriggerBeforeInput: true },
+    // { name: 'compositionend', handler: 'onCompositionEnd', isTriggerBeforeInput: false },
+    // { name: 'keydown', handler: 'onKeyDown', isTriggerBeforeInput: true },
+    { name: 'keypress', handler: null, isTriggerBeforeInput: true },
+    { name: 'keyup', handler: 'onKeyUp', isTriggerBeforeInput: true },
+    { name: 'mousedown', handler: 'onMouseDown', isTriggerBeforeInput: true },
+    { name: 'textInput', handler: null, isTriggerBeforeInput: true }
+    // { name: 'paste', handler: 'onPaste', isTriggerBeforeInput: true }
+];
+
+var SlateErrorCode;
+(function (SlateErrorCode) {
+    SlateErrorCode[SlateErrorCode["ToNativeSelectionError"] = 2100] = "ToNativeSelectionError";
+    SlateErrorCode[SlateErrorCode["ToSlateSelectionError"] = 2101] = "ToSlateSelectionError";
+    SlateErrorCode[SlateErrorCode["OnDOMBeforeInputError"] = 2102] = "OnDOMBeforeInputError";
+    SlateErrorCode[SlateErrorCode["OnSyntheticBeforeInputError"] = 2103] = "OnSyntheticBeforeInputError";
+    SlateErrorCode[SlateErrorCode["OnDOMKeydownError"] = 2104] = "OnDOMKeydownError";
+    SlateErrorCode[SlateErrorCode["GetStartPointError"] = 2105] = "GetStartPointError";
+    SlateErrorCode[SlateErrorCode["NotFoundPreviousRootNodeError"] = 3100] = "NotFoundPreviousRootNodeError";
+    SlateErrorCode[SlateErrorCode["InvalidValueError"] = 4100] = "InvalidValueError";
+})(SlateErrorCode || (SlateErrorCode = {}));
+
+function restoreDom(editor, execute) {
+    const editable = EDITOR_TO_ELEMENT.get(editor);
+    let observer = new MutationObserver(mutations => {
+        mutations.reverse().forEach(mutation => {
+            if (mutation.type === 'characterData') {
+                // We don't want to restore the DOM for characterData mutations
+                // because this interrupts the composition.
+                return;
+            }
+            mutation.removedNodes.forEach(node => {
+                mutation.target.insertBefore(node, mutation.nextSibling);
+            });
+            mutation.addedNodes.forEach(node => {
+                mutation.target.removeChild(node);
+            });
+        });
+        disconnect();
+        execute();
+    });
+    const disconnect = () => {
+        observer.disconnect();
+        observer = null;
+    };
+    observer.observe(editable, { subtree: true, childList: true, characterData: true, characterDataOldValue: true });
+    setTimeout(() => {
+        if (observer) {
+            disconnect();
+            execute();
+        }
+    }, 0);
+}
+
+class FlavourRef {
+    destroy() {
+        this.instance.onDestroy();
+    }
+}
+class BlockCardRef {
+    destroy() {
+        this.instance.onDestroy();
+    }
+}
+
+function createEmbeddedViewOrComponentOrFlavour(viewType, context, viewContext, viewContainerRef) {
+    if (isFlavourType(viewType)) {
+        const flavourRef = new FlavourRef();
+        flavourRef.instance = new viewType();
+        flavourRef.instance.context = context;
+        flavourRef.instance.viewContext = viewContext;
+        flavourRef.instance.viewContainerRef = viewContainerRef;
+        flavourRef.instance.onInit();
+        return flavourRef;
+    }
+    if (isTemplateRef(viewType)) {
+        const embeddedViewContext = {
+            context,
+            viewContext
+        };
+        const embeddedViewRef = viewContainerRef.createEmbeddedView(viewType, embeddedViewContext);
+        embeddedViewRef.detectChanges();
+        return embeddedViewRef;
+    }
+    if (isComponentType(viewType)) {
+        const componentRef = viewContainerRef.createComponent(viewType, {
+            injector: viewContainerRef.injector
+        });
+        componentRef.instance.viewContext = viewContext;
+        componentRef.instance.context = context;
+        componentRef.changeDetectorRef.detectChanges();
+        return componentRef;
+    }
+}
+function updateContext(view, newContext, viewContext) {
+    if (view instanceof FlavourRef) {
+        view.instance.context = newContext;
+        return;
+    }
+    if (view instanceof ComponentRef) {
+        view.instance.context = newContext;
+    }
+    else {
+        view.context.context = newContext;
+        view.context.viewContext = viewContext;
+        view.detectChanges();
+    }
+}
+function mount(views, blockCards, outletParent, outletElement) {
+    if (views.length > 0) {
+        const fragment = document.createDocumentFragment();
+        views.forEach((view, index) => {
+            const blockCard = blockCards ? blockCards[index] : undefined;
+            fragment.append(...getRootNodes(view, blockCard));
+        });
+        if (outletElement) {
+            outletElement.parentElement.insertBefore(fragment, outletElement);
+            outletElement.remove();
+        }
+        else {
+            outletParent.prepend(fragment);
+        }
+    }
+}
+function getRootNodes(ref, blockCard) {
+    if (blockCard) {
+        return [blockCard.instance.nativeElement];
+    }
+    if (ref instanceof FlavourRef) {
+        return [ref.instance.nativeElement];
+    }
+    if (ref instanceof ComponentRef) {
+        ref.hostView.rootNodes.forEach(ele => {
+            if (!(ele instanceof HTMLElement)) {
+                ele.remove();
+            }
+        });
+        return [ref.instance.nativeElement];
+    }
+    else {
+        const result = [];
+        ref.rootNodes.forEach(rootNode => {
+            const isHTMLElement = rootNode instanceof HTMLElement;
+            const isSlateNodeOfLeaf = isHTMLElement && (rootNode.hasAttribute('data-slate-node') || rootNode.hasAttribute('data-slate-leaf'));
+            if (isSlateNodeOfLeaf && result.every(item => !item.contains(rootNode))) {
+                result.push(rootNode);
+            }
+            if (!isHTMLElement) {
+                rootNode.remove();
+            }
+        });
+        return result;
+    }
+}
+function mountOnItemChange(index, item, views, blockCards, outletParent, firstRootNode, viewContext) {
+    const view = views[index];
+    let rootNodes = getRootNodes(view);
+    if (blockCards) {
+        const isBlockCard = viewContext.editor.isBlockCard(item);
+        if (isBlockCard) {
+            const blockCard = blockCards[index];
+            rootNodes = [blockCard.instance.nativeElement];
+        }
+    }
+    if (index === 0) {
+        if (firstRootNode) {
+            rootNodes.forEach(rootNode => {
+                firstRootNode.insertAdjacentElement('beforebegin', rootNode);
+            });
+        }
+        else {
+            outletParent.prepend(...rootNodes);
+        }
+    }
+    else {
+        const previousView = views[index - 1];
+        const blockCard = blockCards ? blockCards[index - 1] : null;
+        const previousRootNodes = getRootNodes(previousView, blockCard);
+        let previousRootNode = previousRootNodes[previousRootNodes.length - 1];
+        rootNodes.forEach(rootNode => {
+            previousRootNode.insertAdjacentElement('afterend', rootNode);
+            previousRootNode = rootNode;
+        });
+    }
+}
+
+function hasBeforeContextChange(value) {
+    if (value.beforeContextChange) {
+        return true;
+    }
+    return false;
+}
+function hasAfterContextChange(value) {
+    if (value.afterContextChange) {
+        return true;
+    }
+    return false;
+}
+
+class BaseFlavour {
+    constructor() {
+        this.initialized = false;
+    }
+    static { this.isFlavour = true; }
+    set context(value) {
+        if (hasBeforeContextChange(this)) {
+            this.beforeContextChange(value);
+        }
+        this._context = value;
+        this.onContextChange();
+        if (hasAfterContextChange(this)) {
+            this.afterContextChange();
+        }
+    }
+    get context() {
+        return this._context;
+    }
+    get editor() {
+        return this.viewContext && this.viewContext.editor;
+    }
+}
+
+const SLATE_BLOCK_CARD_CLASS_NAME = 'slate-block-card';
+class SlateBlockCard {
+    onInit() {
+        const nativeElement = document.createElement('div');
+        nativeElement.classList.add(SLATE_BLOCK_CARD_CLASS_NAME);
+        this.nativeElement = nativeElement;
+        this.createContent();
+    }
+    createContent() {
+        const leftCaret = document.createElement('span');
+        leftCaret.setAttribute(`card-target`, 'card-left');
+        leftCaret.classList.add('card-left');
+        leftCaret.appendChild(getZeroTextNode());
+        const rightCaret = document.createElement('span');
+        rightCaret.setAttribute(`card-target`, 'card-right');
+        rightCaret.classList.add('card-right');
+        rightCaret.appendChild(getZeroTextNode());
+        const center = document.createElement('div');
+        center.setAttribute(`card-target`, 'card-center');
+        this.nativeElement.appendChild(leftCaret);
+        this.nativeElement.appendChild(center);
+        this.nativeElement.appendChild(rightCaret);
+        this.centerContainer = center;
+    }
+    append() {
+        this.centerRootNodes.forEach(rootNode => !this.centerContainer.contains(rootNode) && this.centerContainer.appendChild(rootNode));
+    }
+    initializeCenter(rootNodes) {
+        this.centerRootNodes = rootNodes;
+        this.append();
+    }
+    onDestroy() {
+        this.nativeElement.remove();
+    }
+}
+const getBlockCardByNativeElement = (nativeElement) => {
+    const blockCardElement = nativeElement?.parentElement?.parentElement;
+    if (blockCardElement && blockCardElement.classList.contains(SLATE_BLOCK_CARD_CLASS_NAME)) {
+        return blockCardElement;
+    }
+    return null;
+};
+
+const DEFAULT_ELEMENT_HEIGHT = 24;
+class BaseElementFlavour extends BaseFlavour {
+    constructor() {
+        super(...arguments);
+        this.getOutletParent = () => {
+            return this.nativeElement;
+        };
+        this.getOutletElement = () => {
+            return this.nativeElement.querySelector('.children-outlet');
+        };
+        this.stableHeight = null;
+    }
+    get element() {
+        return this._context && this._context.element;
+    }
+    get selection() {
+        return this._context && this._context.selection;
+    }
+    get decorations() {
+        return this._context && this._context.decorations;
+    }
+    get children() {
+        return this._context && this._context.element.children;
+    }
+    get isCollapsed() {
+        return this.selection && Range.isCollapsed(this.selection);
+    }
     get isCollapsedAndNonReadonly() {
         return this.selection && Range.isCollapsed(this.selection) && !this.readonly;
     }
@@ -1798,6 +2394,7 @@ class BaseElementFlavour extends BaseFlavour {
         if (ELEMENT_TO_COMPONENT.get(this.element) === this) {
             ELEMENT_TO_COMPONENT.delete(this.element);
         }
+        this.listRender.destroy();
         this.nativeElement?.remove();
     }
     onContextChange() {
@@ -2052,758 +2649,600 @@ const createCompatibleStringNode = (text) => {
     const zeroWidthSpan = document.createElement('span');
     const zeroWidthSpace = getZeroTextNode();
     zeroWidthSpan.setAttribute('data-slate-zero-width', '');
-    zeroWidthSpan.appendChild(zeroWidthSpace);
-    stringNode.appendChild(zeroWidthSpan);
-    return stringNode;
-};
-const createLineBreakEmptyStringDOM = (elementStringLength) => {
-    const stringNode = document.createElement('span');
-    stringNode.setAttribute('data-slate-zero-width', 'n');
-    stringNode.setAttribute('data-slate-length', `${elementStringLength}`);
-    const zeroWidthSpace = getZeroTextNode();
-    stringNode.appendChild(zeroWidthSpace);
-    const brNode = document.createElement('br');
-    stringNode.appendChild(brNode);
-    stringNode.setAttribute('editable-text', '');
-    return stringNode;
-};
-/**
- * TODO: remove when bump slate
- * copy from slate
- * @param editor
- * @param element
- * @returns
- */
-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 };
-    }
-}
-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.nativeElement?.remove();
-    }
-    onContextChange() {
-        if (!this.initialized) {
-            return;
-        }
-        this.rerender();
-        this.updateWeakMap();
-        this.leavesRender.update(this.context);
-    }
-}
+    zeroWidthSpan.appendChild(zeroWidthSpace);
+    stringNode.appendChild(zeroWidthSpan);
+    return stringNode;
+};
+const createLineBreakEmptyStringDOM = (elementStringLength) => {
+    const stringNode = document.createElement('span');
+    stringNode.setAttribute('data-slate-zero-width', 'n');
+    stringNode.setAttribute('data-slate-length', `${elementStringLength}`);
+    const zeroWidthSpace = getZeroTextNode();
+    stringNode.appendChild(zeroWidthSpace);
+    const brNode = document.createElement('br');
+    stringNode.appendChild(brNode);
+    stringNode.setAttribute('editable-text', '');
+    return stringNode;
+};
+/**
+ * TODO: remove when bump slate
+ * copy from slate
+ * @param editor
+ * @param element
+ * @returns
+ */
+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 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.views = [];
-        this.blockCards = [];
         this.contexts = [];
         this.viewTypes = [];
-        this.differ = null;
-        this.initialized = false;
     }
-    initialize(children, parent, childrenContext) {
-        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);
+    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);
-            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());
+        mount(this.views, null, 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);
-        }
+        this.differ = newDiffers.find(this.decoratedLeaves).create(trackBy$1(this.viewContext));
+        this.differ.diff(this.decoratedLeaves);
     }
-    update(children, parent, childrenContext) {
-        if (!this.initialized || this.children.length === 0) {
-            this.initialize(children, parent, childrenContext);
-            return;
-        }
-        if (!this.differ) {
-            throw new Error('Exception: Can not find differ ');
-        }
+    update(context) {
+        const { decoratedLeaves, contexts } = this.getLeaves(context);
         const outletParent = this.getOutletParent();
-        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;
+        const diffResult = this.differ.diff(decoratedLeaves);
         if (diffResult) {
-            let firstRootNode = getRootNodes(this.views[0], this.blockCards[0])[0];
+            let firstRootNode = getRootNodes(this.views[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);
+                let context = getContext$1(record.currentIndex, contexts);
+                const viewType = getViewType$1(context, 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);
+                    mountOnItemChange(record.currentIndex, record.item, newViews, null, 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);
+                        const firstRootNode = getRootNodes(previousView, null)[0];
+                        const newRootNodes = getRootNodes(view, null);
                         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);
-                        }
+                        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;
-        }
-    }
-    destroy() {
-        this.children.forEach((element, index) => {
-            if (this.views[index]) {
-                this.views[index].destroy();
-            }
-            if (this.blockCards[index]) {
-                this.blockCards[index].destroy();
-            }
-        });
-        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;
-    }
-}
-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 };
-        }
-        else {
-            return { selection: null, decorations: ds };
+            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);
+
+class BaseTextFlavour extends BaseFlavour {
+    constructor() {
+        super(...arguments);
+        this.getOutletParent = () => {
+            return this.nativeElement;
+        };
+        this.getOutletElement = () => {
+            return this.nativeElement.querySelector('.children-outlet');
+        };
     }
-    else {
-        return memoizedTextContext(prev, next);
+    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);
     }
 }
-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, []);
+
+class DefaultTextFlavour extends BaseTextFlavour {
+    render() {
+        const { nativeElement } = createText(this.text.text);
+        this.nativeElement = nativeElement;
+    }
+    rerender() { }
 }
-function executeAfterViewInit(editor) {
-    const queue = getAfterViewInitQueue(editor);
-    queue.forEach(callback => callback());
-    clearAfterViewInitQueue(editor);
+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 VirtualScrollDebugOverlay {
-    constructor(doc) {
-        this.doc = doc;
-        this.originalConsoleLog = console.log.bind(console);
-        this.originalConsoleWarn = console.warn.bind(console);
-        this.dragOffsetX = 0;
-        this.dragOffsetY = 0;
-        this.isDragging = false;
-        this.onDragging = (event) => {
-            if (!this.isDragging || !this.container) {
-                return;
-            }
-            const nextLeft = event.clientX - this.dragOffsetX;
-            const nextTop = event.clientY - this.dragOffsetY;
-            this.container.style.left = `${nextLeft}px`;
-            this.container.style.top = `${nextTop}px`;
-            this.container.style.right = 'auto';
-            this.container.style.bottom = 'auto';
-        };
-        this.onDragEnd = () => {
-            if (!this.isDragging) {
-                return;
-            }
-            this.isDragging = false;
-            this.doc.removeEventListener('mousemove', this.onDragging);
-            this.doc.removeEventListener('mouseup', this.onDragEnd);
-            if (this.container) {
-                this.container.style.transition = '';
+const setPreRenderingElementStyle = (editor, rootNode, isClear = false) => {
+    if (isClear) {
+        rootNode.style.top = '';
+        rootNode.style.width = '';
+        rootNode.style.position = '';
+        return;
+    }
+    const preRenderingWidth = EDITOR_TO_ROOT_NODE_WIDTH.get(editor) ?? 0;
+    rootNode.style.top = '-100%';
+    if (preRenderingWidth) {
+        rootNode.style.width = `${preRenderingWidth}px`;
+    }
+    else {
+        rootNode.style.width = '100%';
+    }
+    rootNode.style.position = 'absolute';
+};
+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);
+        });
+        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) => {
+                const slateElement = this.children[index];
+                if (slateElement && children.indexOf(slateElement) >= 0) {
+                    rootNodes.forEach(rootNode => {
+                        setPreRenderingElementStyle(this.viewContext.editor, rootNode, true);
+                    });
+                    if (isDebug) {
+                        debugLog('log', 'preRenderingHTMLElement index: ', this.viewContext.editor.children.indexOf(this.children[index]), 'is clear true');
+                    }
+                }
+                else {
+                    if (isDebug) {
+                        debugLog('log', 'preRenderingHTMLElement index: ', this.viewContext.editor.children.indexOf(this.children[index]), 'do not clear since it would be removed soon');
+                    }
+                }
+            });
+            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);
             }
-        };
-    }
-    init() {
-        if (!this.container) {
-            this.createContainer();
-        }
-    }
-    log(type, ...args) {
-        this.init();
-        if (type === 'warn') {
-            this.originalConsoleWarn(...args);
         }
         else {
-            this.originalConsoleLog(...args);
+            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;
         }
-        this.appendLog(type, ...args);
-    }
-    dispose() {
-        this.container?.remove();
-        this.container = undefined;
-        this.logList = undefined;
-        this.selectorInput = undefined;
-        this.distanceInput = undefined;
-        this.doc.removeEventListener('mousemove', this.onDragging);
-        this.doc.removeEventListener('mouseup', this.onDragEnd);
-        this.isDragging = false;
-    }
-    createContainer() {
-        const doc = this.doc;
-        const container = doc.createElement('div');
-        container.style.position = 'fixed';
-        container.style.left = '16px';
-        container.style.top = '16px';
-        container.style.right = 'auto';
-        container.style.bottom = 'auto';
-        container.style.width = '360px';
-        container.style.maxHeight = '70vh';
-        container.style.padding = '12px';
-        container.style.boxSizing = 'border-box';
-        container.style.background = 'rgba(17, 24, 39, 0.95)';
-        container.style.color = '#e5e7eb';
-        container.style.fontSize = '12px';
-        container.style.fontFamily = 'Menlo, Consolas, monospace';
-        container.style.border = '1px solid #1f2937';
-        container.style.borderRadius = '10px';
-        container.style.boxShadow = '0 10px 30px rgba(0, 0, 0, 0.35)';
-        container.style.zIndex = '9999';
-        container.style.display = 'flex';
-        container.style.flexDirection = 'column';
-        container.style.gap = '10px';
-        const header = doc.createElement('div');
-        header.style.display = 'flex';
-        header.style.alignItems = 'center';
-        header.style.justifyContent = 'space-between';
-        header.style.cursor = 'move';
-        header.addEventListener('mousedown', event => {
-            if (!this.container) {
-                return;
-            }
-            const rect = this.container.getBoundingClientRect();
-            this.isDragging = true;
-            this.dragOffsetX = event.clientX - rect.left;
-            this.dragOffsetY = event.clientY - rect.top;
-            this.container.style.transition = 'none';
-            this.doc.addEventListener('mousemove', this.onDragging);
-            this.doc.addEventListener('mouseup', this.onDragEnd);
-            event.preventDefault();
-        });
-        const title = doc.createElement('div');
-        title.textContent = 'Virtual Scroll Debug';
-        title.style.fontWeight = '600';
-        title.style.letterSpacing = '0.3px';
-        const clearButton = doc.createElement('button');
-        clearButton.type = 'button';
-        clearButton.textContent = '清除日志';
-        clearButton.style.background = '#374151';
-        clearButton.style.color = '#e5e7eb';
-        clearButton.style.border = '1px solid #4b5563';
-        clearButton.style.borderRadius = '6px';
-        clearButton.style.padding = '4px 10px';
-        clearButton.style.cursor = 'pointer';
-        clearButton.addEventListener('click', () => {
-            if (this.logList) {
-                this.logList.innerHTML = '';
-            }
-        });
-        header.appendChild(title);
-        header.appendChild(clearButton);
-        const scrollForm = doc.createElement('div');
-        scrollForm.style.display = 'grid';
-        scrollForm.style.gridTemplateColumns = '1fr 90px 70px';
-        scrollForm.style.gap = '6px';
-        scrollForm.style.alignItems = 'center';
-        const selectorInput = doc.createElement('input');
-        selectorInput.placeholder = '滚动容器 selector';
-        selectorInput.style.padding = '6px 8px';
-        selectorInput.style.borderRadius = '6px';
-        selectorInput.style.border = '1px solid #4b5563';
-        selectorInput.style.background = '#111827';
-        selectorInput.style.color = '#e5e7eb';
-        selectorInput.autocomplete = 'off';
-        const distanceInput = doc.createElement('input');
-        distanceInput.placeholder = '滚动距离(px)';
-        distanceInput.type = 'number';
-        distanceInput.style.padding = '6px 8px';
-        distanceInput.style.borderRadius = '6px';
-        distanceInput.style.border = '1px solid #4b5563';
-        distanceInput.style.background = '#111827';
-        distanceInput.style.color = '#e5e7eb';
-        const scrollButton = doc.createElement('button');
-        scrollButton.type = 'button';
-        scrollButton.textContent = '滚动';
-        scrollButton.style.background = '#10b981';
-        scrollButton.style.color = '#0b1c15';
-        scrollButton.style.border = 'none';
-        scrollButton.style.borderRadius = '6px';
-        scrollButton.style.padding = '6px 10px';
-        scrollButton.style.cursor = 'pointer';
-        scrollButton.addEventListener('click', () => {
-            const selector = selectorInput.value.trim();
-            const distanceValue = Number(distanceInput.value ?? 0);
-            const distance = Number.isFinite(distanceValue) ? distanceValue : 0;
-            if (!selector) {
-                this.log('warn', '请先填写滚动容器 selector');
-                return;
-            }
-            const target = doc.querySelector(selector);
-            if (!target) {
-                this.log('warn', `未找到滚动容器: ${selector}`);
-                return;
+        if (preRenderingCount > 0) {
+            for (let i = 0; i < preRenderingCount; i++) {
+                const rootNodes = [...getRootNodes(this.views[i], this.blockCards[i])];
+                rootNodes.forEach(rootNode => {
+                    setPreRenderingElementStyle(this.viewContext.editor, rootNode);
+                });
+                this.preRenderingHTMLElement.push(rootNodes);
+                if (isDebug) {
+                    debugLog('log', 'preRenderingHTMLElement index: ', this.viewContext.editor.children.indexOf(children[i]));
+                }
             }
-            if (typeof target.scrollTo === 'function') {
-                target.scrollTo({ top: distance, behavior: 'auto' });
+        }
+        if (isDebug) {
+            for (let i = 0; i < children.length; i++) {
+                const rootNodes = [...getRootNodes(this.views[i], this.blockCards[i])];
+                const index = this.viewContext.editor.children.indexOf(children[i]);
+                const height = getRealHeightByElement(this.viewContext.editor, children[i]);
+                rootNodes.forEach(rootNode => {
+                    rootNode.setAttribute('debug-index', index.toString());
+                    rootNode.setAttribute('debug-height', height.toString());
+                });
             }
-            else if (Object.prototype.hasOwnProperty.call(target, 'scrollTop')) {
-                target.scrollTop = distance;
+        }
+    }
+    destroy() {
+        this.children.forEach((element, index) => {
+            if (this.views[index]) {
+                this.views[index].destroy();
             }
-            else {
-                this.log('warn', '目标元素不支持滚动:', selector);
-                return;
+            if (this.blockCards[index]) {
+                this.blockCards[index].destroy();
             }
-            this.log('log', `已将 ${selector} 滚动到`, distance);
         });
-        scrollForm.appendChild(selectorInput);
-        scrollForm.appendChild(distanceInput);
-        scrollForm.appendChild(scrollButton);
-        const logList = doc.createElement('div');
-        logList.style.height = '260px';
-        logList.style.overflowY = 'auto';
-        logList.style.background = '#0b1220';
-        logList.style.border = '1px solid #1f2937';
-        logList.style.borderRadius = '8px';
-        logList.style.padding = '8px';
-        logList.style.display = 'flex';
-        logList.style.flexDirection = 'column';
-        logList.style.gap = '6px';
-        container.appendChild(header);
-        container.appendChild(scrollForm);
-        container.appendChild(logList);
-        doc.body.appendChild(container);
-        this.container = container;
-        this.logList = logList;
-        this.selectorInput = selectorInput;
-        this.distanceInput = distanceInput;
+        this.children = [];
+        this.views = [];
+        this.blockCards = [];
+        this.contexts = [];
+        this.viewTypes = [];
+        this.initialized = false;
+        this.differ = null;
     }
-    appendLog(type, ...args) {
-        if (!this.logList) {
-            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 (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;
         }
-        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;
+        return elementContext;
     }
-    formatValue(value) {
-        if (typeof value === 'string') {
-            return value;
-        }
-        try {
-            return JSON.stringify(value);
+    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;
+    }
+}
+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 (error) {
-            return String(value);
+        else {
+            return { selection: null, decorations: ds };
         }
     }
+    catch (error) {
+        viewContext.editor.onError({
+            code: SlateErrorCode.GetStartPointError,
+            nativeError: error
+        });
+        return { selection: null, decorations: [] };
+    }
+}
+function getViewType(item, parent, viewContext) {
+    if (Element.isElement(item)) {
+        return (viewContext.renderElement && viewContext.renderElement(item)) || DefaultElementFlavour;
+    }
+    else {
+        const isVoid = viewContext.editor.isVoid(parent);
+        return isVoid ? VoidTextFlavour : (viewContext.renderText && viewContext.renderText(item)) || DefaultTextFlavour;
+    }
+}
+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);
 }
 
-const JUST_NOW_UPDATED_VIRTUAL_VIEW = new WeakMap();
 // not correctly clipboardData on beforeinput
 const forceOnDOMPaste = IS_SAFARI;
-const isDebug = localStorage.getItem(SLATE_DEBUG_KEY) === 'true';
 class SlateEditable {
     set virtualScroll(config) {
-        this.virtualConfig = config;
-        this.doVirtualScroll();
+        this.virtualScrollConfig = config;
+        if (isDebugScrollTop) {
+            debugLog('log', 'virtualScrollConfig scrollTop:', config.scrollTop);
+        }
+        IS_ENABLED_VIRTUAL_SCROLL.set(this.editor, config.enabled);
+        if (this.isEnabledVirtualScroll()) {
+            this.tryUpdateVirtualViewport();
+        }
     }
     get hasBeforeInputSupport() {
         return HAS_BEFORE_INPUT_SUPPORT;
@@ -2848,16 +3287,16 @@ class SlateEditable {
                 return null;
             }
         };
-        this.virtualConfig = {
+        this.virtualScrollConfig = {
             enabled: false,
             scrollTop: 0,
-            viewportHeight: 0
+            viewportHeight: 0,
+            viewportBoundingTop: 0,
+            scrollContainer: null
         };
-        this.renderedChildren = [];
-        this.virtualVisibleIndexes = new Set();
-        this.measuredHeights = new Map();
-        // the height from scroll container top to editor top height element
-        this.businessHeight = 0;
+        this.inViewportChildren = [];
+        this.inViewportIndics = [];
+        this.keyHeightMap = new Map();
         this.virtualScrollInitialized = false;
     }
     ngOnInit() {
@@ -2869,6 +3308,7 @@ class SlateEditable {
         NODE_TO_ELEMENT.set(this.editor, this.elementRef.nativeElement);
         ELEMENT_TO_NODE.set(this.elementRef.nativeElement, this.editor);
         IS_READ_ONLY.set(this.editor, this.readonly);
+        ELEMENT_KEY_TO_HEIGHTS.set(this.editor, this.keyHeightMap);
         EDITOR_TO_ON_CHANGE.set(this.editor, () => {
             this.ngZone.run(() => {
                 this.onChange();
@@ -2882,7 +3322,7 @@ class SlateEditable {
         // add browser class
         let browserClass = IS_FIREFOX ? 'firefox' : IS_SAFARI ? 'safari' : '';
         browserClass && this.elementRef.nativeElement.classList.add(browserClass);
-        this.initializeVirtualScrolling();
+        this.initializeVirtualScroll();
         this.listRender = new ListRender(this.viewContext, this.viewContainerRef, this.getOutletParent, this.getOutletElement);
     }
     ngOnChanges(simpleChanges) {
@@ -2914,16 +3354,29 @@ class SlateEditable {
         if (value && value.length) {
             this.editor.children = value;
             this.initializeContext();
-            const virtualView = this.refreshVirtualView();
-            this.applyVirtualView(virtualView);
-            const childrenForRender = virtualView.renderedChildren;
-            if (!this.listRender.initialized) {
-                this.listRender.initialize(childrenForRender, this.editor, this.context);
+            if (this.isEnabledVirtualScroll()) {
+                const virtualView = this.calculateVirtualViewport();
+                this.applyVirtualView(virtualView);
+                const childrenForRender = virtualView.inViewportChildren;
+                if (isDebug) {
+                    debugLog('log', 'writeValue calculate: ', virtualView.inViewportIndics, 'initialized: ', this.listRender.initialized);
+                }
+                if (!this.listRender.initialized) {
+                    this.listRender.initialize(childrenForRender, this.editor, this.context);
+                }
+                else {
+                    const { preRenderingCount, childrenWithPreRendering } = this.handlePreRendering();
+                    this.listRender.update(childrenWithPreRendering, this.editor, this.context, preRenderingCount);
+                }
             }
             else {
-                this.listRender.update(childrenForRender, this.editor, this.context);
+                if (!this.listRender.initialized) {
+                    this.listRender.initialize(this.editor.children, this.editor, this.context);
+                }
+                else {
+                    this.listRender.update(this.editor.children, this.editor, this.context);
+                }
             }
-            this.scheduleMeasureVisibleHeights();
             this.cdr.markForCheck();
         }
     }
@@ -2954,26 +3407,45 @@ class SlateEditable {
             this.addEventListener(event.name, () => { });
         });
     }
-    toNativeSelection() {
-        try {
-            let { selection } = this.editor;
-            if (this.virtualConfig?.enabled && selection) {
-                const indics = Array.from(this.virtualVisibleIndexes.values());
-                if (indics.length > 0) {
-                    const currentVisibleRange = {
-                        anchor: Editor.start(this.editor, [indics[0]]),
-                        focus: Editor.end(this.editor, [indics[indics.length - 1]])
-                    };
-                    const [start, end] = Range.edges(selection);
-                    const forwardSelection = { anchor: start, focus: end };
-                    const intersectedSelection = Range.intersection(forwardSelection, currentVisibleRange);
-                    if (!intersectedSelection || !Range.equals(intersectedSelection, forwardSelection)) {
-                        selection = intersectedSelection;
-                        if (isDebug) {
-                            this.debugLog('log', `selection is not in visible range, selection: ${JSON.stringify(selection)}, intersectedSelection: ${JSON.stringify(intersectedSelection)}`);
-                        }
+    calculateVirtualScrollSelection(selection) {
+        if (selection) {
+            const isBlockCardCursor = AngularEditor.isBlockCardLeftCursor(this.editor) || AngularEditor.isBlockCardRightCursor(this.editor);
+            const indics = this.inViewportIndics;
+            if (indics.length > 0) {
+                const currentVisibleRange = {
+                    anchor: Editor.start(this.editor, [indics[0]]),
+                    focus: Editor.end(this.editor, [indics[indics.length - 1]])
+                };
+                const [start, end] = Range.edges(selection);
+                let forwardSelection = { anchor: start, focus: end };
+                if (!isBlockCardCursor) {
+                    forwardSelection = { anchor: start, focus: end };
+                }
+                else {
+                    forwardSelection = { anchor: { path: start.path, offset: 0 }, focus: { path: end.path, offset: 0 } };
+                }
+                const intersectedSelection = Range.intersection(forwardSelection, currentVisibleRange);
+                if (intersectedSelection && isBlockCardCursor) {
+                    return selection;
+                }
+                EDITOR_TO_VIRTUAL_SCROLL_SELECTION.set(this.editor, intersectedSelection);
+                if (!intersectedSelection || !Range.equals(intersectedSelection, forwardSelection)) {
+                    if (isDebug) {
+                        debugLog('log', `selection is not in visible range, selection: ${JSON.stringify(selection)}, currentVisibleRange: ${JSON.stringify(currentVisibleRange)}, intersectedSelection: ${JSON.stringify(intersectedSelection)}`);
                     }
+                    return intersectedSelection;
                 }
+                return selection;
+            }
+        }
+        EDITOR_TO_VIRTUAL_SCROLL_SELECTION.set(this.editor, null);
+        return selection;
+    }
+    toNativeSelection(autoScroll = true) {
+        try {
+            let { selection } = this.editor;
+            if (this.isEnabledVirtualScroll()) {
+                selection = this.calculateVirtualScrollSelection(selection);
             }
             const root = AngularEditor.findDocumentOrShadowRoot(this.editor);
             const { activeElement } = root;
@@ -3035,13 +3507,24 @@ class SlateEditable {
                 domSelection.removeAllRanges();
             }
             setTimeout(() => {
-                // handle scrolling in setTimeout because of
-                // dom should not have updated immediately after listRender's updating
-                newDomRange && this.scrollSelectionIntoView(this.editor, newDomRange);
-                // COMPAT: In Firefox, it's not enough to create a range, you also need
-                // to focus the contenteditable element too. (2016/11/16)
-                if (newDomRange && IS_FIREFOX) {
-                    el.focus();
+                if (this.isEnabledVirtualScroll() &&
+                    !selection &&
+                    this.editor.selection &&
+                    autoScroll &&
+                    this.virtualScrollConfig.scrollContainer) {
+                    this.virtualScrollConfig.scrollContainer.scrollTop = this.virtualScrollConfig.scrollContainer.scrollTop + 100;
+                    this.isUpdatingSelection = false;
+                    return;
+                }
+                else {
+                    // handle scrolling in setTimeout because of
+                    // dom should not have updated immediately after listRender's updating
+                    newDomRange && autoScroll && this.scrollSelectionIntoView(this.editor, newDomRange);
+                    // COMPAT: In Firefox, it's not enough to create a range, you also need
+                    // to focus the contenteditable element too. (2016/11/16)
+                    if (newDomRange && IS_FIREFOX) {
+                        el.focus();
+                    }
                 }
                 this.isUpdatingSelection = false;
             });
@@ -3062,10 +3545,12 @@ class SlateEditable {
     ngDoCheck() { }
     forceRender() {
         this.updateContext();
-        const virtualView = this.refreshVirtualView();
-        this.applyVirtualView(virtualView);
-        this.listRender.update(virtualView.renderedChildren, this.editor, this.context);
-        this.scheduleMeasureVisibleHeights();
+        if (this.isEnabledVirtualScroll()) {
+            this.updateListRenderAndRemeasureHeights();
+        }
+        else {
+            this.listRender.update(this.editor.children, this.editor, this.context);
+        }
         // repair collaborative editing when Chinese input is interrupted by other users' cursors
         // when the DOMElement where the selection is located is removed
         // the compositionupdate and compositionend events will no longer be fired
@@ -3104,10 +3589,29 @@ class SlateEditable {
     render() {
         const changed = this.updateContext();
         if (changed) {
-            const virtualView = this.refreshVirtualView();
-            this.applyVirtualView(virtualView);
-            this.listRender.update(virtualView.renderedChildren, this.editor, this.context);
-            this.scheduleMeasureVisibleHeights();
+            if (this.isEnabledVirtualScroll()) {
+                this.updateListRenderAndRemeasureHeights();
+            }
+            else {
+                this.listRender.update(this.editor.children, this.editor, this.context);
+            }
+        }
+    }
+    updateListRenderAndRemeasureHeights() {
+        const virtualView = this.calculateVirtualViewport();
+        const oldInViewportChildren = this.inViewportChildren;
+        this.applyVirtualView(virtualView);
+        const { preRenderingCount, childrenWithPreRendering } = this.handlePreRendering();
+        this.listRender.update(childrenWithPreRendering, this.editor, this.context, preRenderingCount);
+        // 新增或者修改的才需要重算，计算出这个结果
+        const remeasureIndics = [];
+        this.inViewportChildren.forEach((child, index) => {
+            if (oldInViewportChildren.indexOf(child) === -1) {
+                remeasureIndics.push(this.inViewportIndics[index]);
+            }
+        });
+        if (isDebug && remeasureIndics.length > 0) {
+            console.log('remeasure height by indics: ', remeasureIndics);
         }
     }
     updateContext() {
@@ -3170,14 +3674,14 @@ class SlateEditable {
         decorations.push(...placeholderDecorations);
         return decorations;
     }
-    shouldUseVirtual() {
-        return !!(this.virtualConfig && this.virtualConfig.enabled);
+    isEnabledVirtualScroll() {
+        return !!(this.virtualScrollConfig && this.virtualScrollConfig.enabled);
     }
-    initializeVirtualScrolling() {
+    initializeVirtualScroll() {
         if (this.virtualScrollInitialized) {
             return;
         }
-        if (this.virtualConfig && this.virtualConfig.enabled) {
+        if (this.isEnabledVirtualScroll()) {
             this.virtualScrollInitialized = true;
             this.virtualTopHeightElement = document.createElement('div');
             this.virtualTopHeightElement.classList.add('virtual-top-height');
@@ -3190,188 +3694,256 @@ class SlateEditable {
             this.elementRef.nativeElement.appendChild(this.virtualTopHeightElement);
             this.elementRef.nativeElement.appendChild(this.virtualCenterOutlet);
             this.elementRef.nativeElement.appendChild(this.virtualBottomHeightElement);
-            this.businessHeight = this.virtualTopHeightElement.getBoundingClientRect()?.top ?? 0;
-            let editorResizeObserverRectWidth = this.elementRef.nativeElement.getBoundingClientRect()?.width ?? 0;
+            let editorResizeObserverRectWidth = this.elementRef.nativeElement.getBoundingClientRect().width;
+            EDITOR_TO_ROOT_NODE_WIDTH.set(this.editor, this.virtualTopHeightElement.getBoundingClientRect().width);
             this.editorResizeObserver = new ResizeObserver(entries => {
                 if (entries.length > 0 && entries[0].contentRect.width !== editorResizeObserverRectWidth) {
                     editorResizeObserverRectWidth = entries[0].contentRect.width;
-                    this.remeasureHeightByIndics(Array.from(this.virtualVisibleIndexes));
+                    this.keyHeightMap.clear();
+                    const remeasureIndics = this.inViewportIndics;
+                    measureHeightByIndics(this.editor, remeasureIndics, true);
+                    EDITOR_TO_ROOT_NODE_WIDTH.set(this.editor, this.virtualTopHeightElement.getBoundingClientRect().width);
+                    if (isDebug) {
+                        debugLog('log', 'editorResizeObserverRectWidth: ', editorResizeObserverRectWidth, 'EDITOR_TO_ROOT_NODE_WIDTH: ', EDITOR_TO_ROOT_NODE_WIDTH.get(this.editor));
+                    }
                 }
             });
             this.editorResizeObserver.observe(this.elementRef.nativeElement);
-            if (isDebug) {
-                const doc = this.elementRef?.nativeElement?.ownerDocument ?? document;
-                this.debugOverlay = new VirtualScrollDebugOverlay(doc);
-                this.debugOverlay.init();
-            }
         }
     }
-    changeVirtualHeight(topHeight, bottomHeight) {
+    setVirtualSpaceHeight(topHeight, bottomHeight) {
         if (!this.virtualScrollInitialized) {
             return;
         }
         this.virtualTopHeightElement.style.height = `${topHeight}px`;
-        this.virtualBottomHeightElement.style.height = `${bottomHeight}px`;
+        if (bottomHeight !== undefined) {
+            this.virtualBottomHeightElement.style.height = `${bottomHeight}px`;
+        }
+    }
+    getActualVirtualTopHeight() {
+        if (!this.virtualScrollInitialized) {
+            return 0;
+        }
+        return parseFloat(this.virtualTopHeightElement.style.height.replace('px', ''));
     }
-    debugLog(type, ...args) {
-        if (!this.debugOverlay) {
-            const doc = this.elementRef?.nativeElement?.ownerDocument ?? document;
-            this.debugOverlay = new VirtualScrollDebugOverlay(doc);
+    handlePreRendering() {
+        let preRenderingCount = 1;
+        const childrenWithPreRendering = [...this.inViewportChildren];
+        if (this.inViewportIndics[0] !== 0) {
+            childrenWithPreRendering.unshift(this.editor.children[this.inViewportIndics[0] - 1]);
+        }
+        else {
+            preRenderingCount = 0;
         }
-        this.debugOverlay.log(type, ...args);
+        const lastIndex = this.inViewportIndics[this.inViewportIndics.length - 1];
+        if (lastIndex !== this.editor.children.length - 1) {
+            childrenWithPreRendering.push(this.editor.children[lastIndex + 1]);
+        }
+        return { preRenderingCount, childrenWithPreRendering };
     }
-    doVirtualScroll() {
-        this.refreshVirtualViewAnimId && cancelAnimationFrame(this.refreshVirtualViewAnimId);
-        this.refreshVirtualViewAnimId = requestAnimationFrame(() => {
-            let virtualView = this.refreshVirtualView();
-            let diff = this.diffVirtualView(virtualView);
-            if (!diff.isDiff) {
+    tryUpdateVirtualViewport() {
+        if (isDebug) {
+            debugLog('log', 'tryUpdateVirtualViewport');
+        }
+        if (this.inViewportIndics.length > 0) {
+            const topHeight = this.getActualVirtualTopHeight();
+            const refreshVirtualTopHeight = calculateVirtualTopHeight(this.editor, this.inViewportIndics[0]);
+            if (topHeight !== refreshVirtualTopHeight) {
+                if (isDebug) {
+                    debugLog('log', 'update top height since dirty state（正数减去高度，负数代表增加高度）: ', topHeight - refreshVirtualTopHeight);
+                }
+                this.setVirtualSpaceHeight(refreshVirtualTopHeight);
                 return;
             }
-            if (diff.isMissingTop) {
-                const result = this.remeasureHeightByIndics(diff.diffTopRenderedIndexes);
-                if (result) {
-                    virtualView = this.refreshVirtualView();
-                    diff = this.diffVirtualView(virtualView, 'second');
-                    if (!diff.isDiff) {
-                        return;
-                    }
+        }
+        this.tryUpdateVirtualViewportAnimId && cancelAnimationFrame(this.tryUpdateVirtualViewportAnimId);
+        this.tryUpdateVirtualViewportAnimId = requestAnimationFrame(() => {
+            if (isDebug) {
+                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');
                 }
             }
-            this.applyVirtualView(virtualView);
-            if (this.listRender.initialized) {
-                this.listRender.update(virtualView.renderedChildren, this.editor, this.context);
-                if (!AngularEditor.isReadOnly(this.editor) && this.editor.selection) {
-                    this.toNativeSelection();
+            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(false);
+                    }
                 }
             }
-            this.scheduleMeasureVisibleHeights();
+            if (isDebug) {
+                debugLog('log', 'tryUpdateVirtualViewport Anim end');
+            }
         });
     }
-    refreshVirtualView() {
+    calculateVirtualViewport() {
         const children = (this.editor.children || []);
-        if (!children.length || !this.shouldUseVirtual()) {
+        if (!children.length || !this.isEnabledVirtualScroll()) {
             return {
-                renderedChildren: children,
-                visibleIndexes: new Set(),
+                inViewportChildren: children,
+                inViewportIndics: [],
                 top: 0,
                 bottom: 0,
                 heights: []
             };
         }
-        const scrollTop = this.virtualConfig.scrollTop;
-        const viewportHeight = this.virtualConfig.viewportHeight ?? 0;
+        const scrollTop = this.virtualScrollConfig.scrollTop;
+        const viewportHeight = this.virtualScrollConfig.viewportHeight ?? 0;
         if (!viewportHeight) {
             return {
-                renderedChildren: [],
-                visibleIndexes: new Set(),
+                inViewportChildren: [],
+                inViewportIndics: [],
                 top: 0,
                 bottom: 0,
                 heights: []
             };
         }
         const elementLength = children.length;
-        const adjustedScrollTop = Math.max(0, scrollTop - this.businessHeight);
-        const heights = children.map((_, idx) => this.getBlockHeight(idx));
-        const accumulatedHeights = this.buildAccumulatedHeight(heights);
+        if (!EDITOR_TO_BUSINESS_TOP.has(this.editor)) {
+            EDITOR_TO_BUSINESS_TOP.set(this.editor, 0);
+            setTimeout(() => {
+                const virtualTopBoundingTop = this.virtualTopHeightElement.getBoundingClientRect()?.top ?? 0;
+                const businessTop = Math.ceil(virtualTopBoundingTop) +
+                    Math.ceil(this.virtualScrollConfig.scrollTop) -
+                    Math.floor(this.virtualScrollConfig.viewportBoundingTop);
+                EDITOR_TO_BUSINESS_TOP.set(this.editor, businessTop);
+                if (isDebug) {
+                    debugLog('log', 'businessTop', businessTop);
+                }
+            }, 100);
+        }
+        const adjustedScrollTop = Math.max(0, scrollTop - getBusinessTop(this.editor));
+        const { heights, accumulatedHeights } = buildHeightsAndAccumulatedHeights(this.editor);
         const totalHeight = accumulatedHeights[elementLength];
         const maxScrollTop = Math.max(0, totalHeight - viewportHeight);
         const limitedScrollTop = Math.min(adjustedScrollTop, maxScrollTop);
-        const viewBottom = limitedScrollTop + viewportHeight + this.businessHeight;
+        const viewBottom = limitedScrollTop + viewportHeight;
         let accumulatedOffset = 0;
-        let visibleStartIndex = -1;
+        let inViewportStartIndex = -1;
         const visible = [];
-        const visibleIndexes = [];
+        const inViewportIndics = [];
         for (let i = 0; i < elementLength && accumulatedOffset < viewBottom; i++) {
             const currentHeight = heights[i];
             const nextOffset = accumulatedOffset + currentHeight;
             // 可视区域有交集，加入渲染
             if (nextOffset > limitedScrollTop && accumulatedOffset < viewBottom) {
-                if (visibleStartIndex === -1)
-                    visibleStartIndex = i; // 第一个相交起始位置
+                if (inViewportStartIndex === -1)
+                    inViewportStartIndex = i; // 第一个相交起始位置
                 visible.push(children[i]);
-                visibleIndexes.push(i);
+                inViewportIndics.push(i);
             }
             accumulatedOffset = nextOffset;
         }
-        if (visibleStartIndex === -1 && elementLength) {
-            visibleStartIndex = elementLength - 1;
-            visible.push(children[visibleStartIndex]);
-            visibleIndexes.push(visibleStartIndex);
+        if (inViewportStartIndex === -1 && elementLength) {
+            inViewportStartIndex = elementLength - 1;
+            visible.push(children[inViewportStartIndex]);
+            inViewportIndics.push(inViewportStartIndex);
         }
-        const visibleEndIndex = visibleStartIndex === -1 ? elementLength - 1 : (visibleIndexes[visibleIndexes.length - 1] ?? visibleStartIndex);
-        const top = visibleStartIndex === -1 ? 0 : accumulatedHeights[visibleStartIndex];
-        const bottom = totalHeight - accumulatedHeights[visibleEndIndex + 1];
+        const inViewportEndIndex = inViewportStartIndex === -1 ? elementLength - 1 : (inViewportIndics[inViewportIndics.length - 1] ?? inViewportStartIndex);
+        const top = inViewportStartIndex === -1 ? 0 : accumulatedHeights[inViewportStartIndex];
+        const bottom = totalHeight - accumulatedHeights[inViewportEndIndex + 1];
         return {
-            renderedChildren: visible.length ? visible : children,
-            visibleIndexes: new Set(visibleIndexes),
+            inViewportChildren: visible.length ? visible : children,
+            inViewportIndics,
             top,
             bottom,
-            heights
+            heights,
+            accumulatedHeights
         };
     }
     applyVirtualView(virtualView) {
-        this.renderedChildren = virtualView.renderedChildren;
-        this.changeVirtualHeight(virtualView.top, virtualView.bottom);
-        this.virtualVisibleIndexes = virtualView.visibleIndexes;
+        this.inViewportChildren = virtualView.inViewportChildren;
+        this.setVirtualSpaceHeight(virtualView.top, virtualView.bottom);
+        this.inViewportIndics = virtualView.inViewportIndics;
     }
-    diffVirtualView(virtualView, stage = 'first') {
-        if (!this.renderedChildren.length) {
+    diffVirtualViewport(virtualView, stage = 'first') {
+        if (!this.inViewportChildren.length) {
+            if (isDebug) {
+                debugLog('log', 'diffVirtualViewport', stage, 'empty inViewportChildren', virtualView.inViewportIndics);
+            }
             return {
-                isDiff: true,
-                diffTopRenderedIndexes: [],
-                diffBottomRenderedIndexes: []
+                isDifferent: true,
+                changedIndexesOfTop: [],
+                changedIndexesOfBottom: []
             };
         }
-        const oldVisibleIndexes = [...this.virtualVisibleIndexes];
-        const newVisibleIndexes = [...virtualView.visibleIndexes];
-        const firstNewIndex = newVisibleIndexes[0];
-        const lastNewIndex = newVisibleIndexes[newVisibleIndexes.length - 1];
-        const firstOldIndex = oldVisibleIndexes[0];
-        const lastOldIndex = oldVisibleIndexes[oldVisibleIndexes.length - 1];
+        const oldIndexesInViewport = [...this.inViewportIndics];
+        const newIndexesInViewport = [...virtualView.inViewportIndics];
+        const firstNewIndex = newIndexesInViewport[0];
+        const lastNewIndex = newIndexesInViewport[newIndexesInViewport.length - 1];
+        const firstOldIndex = oldIndexesInViewport[0];
+        const lastOldIndex = oldIndexesInViewport[oldIndexesInViewport.length - 1];
         if (firstNewIndex !== firstOldIndex || lastNewIndex !== lastOldIndex) {
-            const diffTopRenderedIndexes = [];
-            const diffBottomRenderedIndexes = [];
-            const isMissingTop = firstNewIndex !== firstOldIndex && firstNewIndex > firstOldIndex;
-            const isAddedTop = firstNewIndex !== firstOldIndex && firstNewIndex < firstOldIndex;
-            const isMissingBottom = lastNewIndex !== lastOldIndex && lastOldIndex > lastNewIndex;
-            const isAddedBottom = lastNewIndex !== lastOldIndex && lastOldIndex < lastNewIndex;
-            if (isMissingTop || isAddedBottom) {
+            const changedIndexesOfTop = [];
+            const changedIndexesOfBottom = [];
+            const needRemoveOnTop = firstNewIndex !== firstOldIndex && firstNewIndex > firstOldIndex;
+            const needAddOnTop = firstNewIndex !== firstOldIndex && firstNewIndex < firstOldIndex;
+            const needRemoveOnBottom = lastNewIndex !== lastOldIndex && lastOldIndex > lastNewIndex;
+            const needAddOnBottom = lastNewIndex !== lastOldIndex && lastOldIndex < lastNewIndex;
+            if (needRemoveOnTop || needAddOnBottom) {
                 // 向下
-                for (let index = 0; index < oldVisibleIndexes.length; index++) {
-                    const element = oldVisibleIndexes[index];
-                    if (!newVisibleIndexes.includes(element)) {
-                        diffTopRenderedIndexes.push(element);
+                for (let index = 0; index < oldIndexesInViewport.length; index++) {
+                    const element = oldIndexesInViewport[index];
+                    if (!newIndexesInViewport.includes(element)) {
+                        changedIndexesOfTop.push(element);
                     }
                     else {
                         break;
                     }
                 }
-                for (let index = newVisibleIndexes.length - 1; index >= 0; index--) {
-                    const element = newVisibleIndexes[index];
-                    if (!oldVisibleIndexes.includes(element)) {
-                        diffBottomRenderedIndexes.push(element);
+                for (let index = newIndexesInViewport.length - 1; index >= 0; index--) {
+                    const element = newIndexesInViewport[index];
+                    if (!oldIndexesInViewport.includes(element)) {
+                        changedIndexesOfBottom.push(element);
                     }
                     else {
                         break;
                     }
                 }
             }
-            else if (isAddedTop || isMissingBottom) {
+            else if (needAddOnTop || needRemoveOnBottom) {
                 // 向上
-                for (let index = 0; index < newVisibleIndexes.length; index++) {
-                    const element = newVisibleIndexes[index];
-                    if (!oldVisibleIndexes.includes(element)) {
-                        diffTopRenderedIndexes.push(element);
+                for (let index = 0; index < newIndexesInViewport.length; index++) {
+                    const element = newIndexesInViewport[index];
+                    if (!oldIndexesInViewport.includes(element)) {
+                        changedIndexesOfTop.push(element);
                     }
                     else {
                         break;
                     }
                 }
-                for (let index = oldVisibleIndexes.length - 1; index >= 0; index--) {
-                    const element = oldVisibleIndexes[index];
-                    if (!newVisibleIndexes.includes(element)) {
-                        diffBottomRenderedIndexes.push(element);
+                for (let index = oldIndexesInViewport.length - 1; index >= 0; index--) {
+                    const element = oldIndexesInViewport[index];
+                    if (!newIndexesInViewport.includes(element)) {
+                        changedIndexesOfBottom.push(element);
                     }
                     else {
                         break;
@@ -3379,125 +3951,35 @@ class SlateEditable {
                 }
             }
             if (isDebug) {
-                this.debugLog('log', `====== diffVirtualView stage: ${stage} ======`);
-                this.debugLog('log', 'oldVisibleIndexes:', oldVisibleIndexes);
-                this.debugLog('log', 'newVisibleIndexes:', newVisibleIndexes);
-                this.debugLog('log', 'diffTopRenderedIndexes:', isMissingTop ? '-' : isAddedTop ? '+' : '-', diffTopRenderedIndexes, diffTopRenderedIndexes.map(index => this.getBlockHeight(index, 0)));
-                this.debugLog('log', 'diffBottomRenderedIndexes:', isAddedBottom ? '+' : isMissingBottom ? '-' : '+', diffBottomRenderedIndexes, diffBottomRenderedIndexes.map(index => this.getBlockHeight(index, 0)));
-                const needTop = virtualView.heights.slice(0, newVisibleIndexes[0]).reduce((acc, height) => acc + height, 0);
+                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(newVisibleIndexes[newVisibleIndexes.length - 1] + 1)
+                    .slice(newIndexesInViewport[newIndexesInViewport.length - 1] + 1)
                     .reduce((acc, height) => acc + height, 0);
-                this.debugLog('log', 'newTopHeight:', needTop, 'prevTopHeight:', parseFloat(this.virtualTopHeightElement.style.height));
-                this.debugLog('log', 'newBottomHeight:', needBottom, 'prevBottomHeight:', parseFloat(this.virtualBottomHeightElement.style.height));
-                this.debugLog('warn', '=========== Dividing line ===========');
+                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 {
-                isDiff: true,
-                isMissingTop,
-                isAddedTop,
-                isMissingBottom,
-                isAddedBottom,
-                diffTopRenderedIndexes,
-                diffBottomRenderedIndexes
+                isDifferent: true,
+                needRemoveOnTop,
+                needAddOnTop,
+                needRemoveOnBottom,
+                needAddOnBottom,
+                changedIndexesOfTop,
+                changedIndexesOfBottom
             };
         }
         return {
-            isDiff: false,
-            diffTopRenderedIndexes: [],
-            diffBottomRenderedIndexes: []
+            isDifferent: false,
+            changedIndexesOfTop: [],
+            changedIndexesOfBottom: []
         };
     }
-    getBlockHeight(index, defaultHeight = VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT) {
-        const node = this.editor.children[index];
-        if (!node) {
-            return defaultHeight;
-        }
-        const key = AngularEditor.findKey(this.editor, node);
-        return this.measuredHeights.get(key.id) ?? defaultHeight;
-    }
-    buildAccumulatedHeight(heights) {
-        const accumulatedHeights = new Array(heights.length + 1).fill(0);
-        for (let i = 0; i < heights.length; i++) {
-            // 存储前 i 个的累计高度
-            accumulatedHeights[i + 1] = accumulatedHeights[i] + heights[i];
-        }
-        return accumulatedHeights;
-    }
-    scheduleMeasureVisibleHeights() {
-        if (!this.shouldUseVirtual()) {
-            return;
-        }
-        this.measureVisibleHeightsAnimId && cancelAnimationFrame(this.measureVisibleHeightsAnimId);
-        this.measureVisibleHeightsAnimId = requestAnimationFrame(() => {
-            this.measureVisibleHeights();
-        });
-    }
-    measureVisibleHeights() {
-        const children = (this.editor.children || []);
-        this.virtualVisibleIndexes.forEach(index => {
-            const node = children[index];
-            if (!node) {
-                return;
-            }
-            const key = AngularEditor.findKey(this.editor, node);
-            // 跳过已测过的块
-            if (this.measuredHeights.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.measuredHeights.set(key.id, height);
-                });
-            }
-            else {
-                this.measuredHeights.set(key.id, ret);
-            }
-        });
-    }
-    remeasureHeightByIndics(indics) {
-        const children = (this.editor.children || []);
-        let isHeightChanged = false;
-        indics.forEach(index => {
-            const node = children[index];
-            if (!node) {
-                return;
-            }
-            const key = AngularEditor.findKey(this.editor, node);
-            const view = ELEMENT_TO_COMPONENT.get(node);
-            if (!view) {
-                return;
-            }
-            const prevHeight = this.measuredHeights.get(key.id);
-            const ret = view.getRealHeight();
-            if (ret instanceof Promise) {
-                ret.then(height => {
-                    if (height !== prevHeight) {
-                        this.measuredHeights.set(key.id, height);
-                        isHeightChanged = true;
-                        if (isDebug) {
-                            this.debugLog('log', `remeasureHeightByIndics, index: ${index} prevHeight: ${prevHeight} newHeight: ${height}`);
-                        }
-                    }
-                });
-            }
-            else {
-                if (ret !== prevHeight) {
-                    this.measuredHeights.set(key.id, ret);
-                    isHeightChanged = true;
-                    if (isDebug) {
-                        this.debugLog('log', `remeasureHeightByIndics, index: ${index} prevHeight: ${prevHeight} newHeight: ${ret}`);
-                    }
-                }
-            }
-        });
-        return isHeightChanged;
-    }
     //#region event proxy
     addEventListener(eventName, listener, target = this.elementRef.nativeElement) {
         this.manualListeners.push(this.renderer2.listen(target, eventName, (event) => {
@@ -3538,7 +4020,7 @@ class SlateEditable {
                     if (this.editor.selection && Range.equals(range, this.editor.selection) && !hasStringTarget(domSelection)) {
                         if (!isTargetInsideVoid(this.editor, activeElement)) {
                             // force adjust DOMSelection
-                            this.toNativeSelection();
+                            this.toNativeSelection(false);
                         }
                     }
                     else {
@@ -4195,8 +4677,6 @@ class SlateEditable {
     //#endregion
     ngOnDestroy() {
         this.editorResizeObserver?.disconnect();
-        this.debugOverlay?.dispose();
-        this.debugOverlay = undefined;
         NODE_TO_ELEMENT.delete(this.editor);
         this.manualListeners.forEach(manualListener => {
             manualListener();
@@ -4385,16 +4865,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }] });
 
+class SlateString {
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: SlateString, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: SlateString, isStandalone: true, selector: "span[slateString]", inputs: { context: "context", viewContext: "viewContext" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: SlateString, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'span[slateString]',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
+                }]
+        }], propDecorators: { context: [{
+                type: Input
+            }], viewContext: [{
+                type: Input
+            }] } });
+
 class SlateModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: SlateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.12", ngImport: i0, type: SlateModule, imports: [CommonModule, SlateEditable, SlateChildrenOutlet], exports: [SlateEditable, SlateChildrenOutlet] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.12", ngImport: i0, type: SlateModule, imports: [CommonModule, SlateEditable, SlateChildrenOutlet, SlateString], exports: [SlateEditable, SlateChildrenOutlet, SlateString] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: SlateModule, imports: [CommonModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: SlateModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, SlateEditable, SlateChildrenOutlet],
-                    exports: [SlateEditable, SlateChildrenOutlet],
+                    imports: [CommonModule, SlateEditable, SlateChildrenOutlet, SlateString],
+                    exports: [SlateEditable, SlateChildrenOutlet, SlateString],
                     providers: []
                 }]
         }] });
@@ -4510,6 +5009,7 @@ class BaseElementComponent extends BaseComponent {
         if (ELEMENT_TO_COMPONENT.get(this.element) === this) {
             ELEMENT_TO_COMPONENT.delete(this.element);
         }
+        this.listRender.destroy();
     }
     onContextChange() {
         this.childrenContext = this.getChildrenContext();
@@ -4597,6 +5097,7 @@ class BaseTextComponent extends BaseComponent {
             NODE_TO_ELEMENT.delete(this.text);
         }
         ELEMENT_TO_NODE.delete(this.nativeElement);
+        this.leavesRender.destroy();
     }
     onContextChange() {
         this.updateWeakMap();
@@ -4622,6 +5123,9 @@ class BaseLeafComponent extends BaseComponent {
         super(...arguments);
         this.stringRender = null;
         this.isSlateLeaf = true;
+        this.getOutletParent = () => {
+            return this.elementRef.nativeElement;
+        };
     }
     get text() {
         return this.context && this.context.text;
@@ -4636,7 +5140,7 @@ class BaseLeafComponent extends BaseComponent {
         if (!this.initialized) {
             this.stringRender = new SlateStringRender(this.context, this.viewContext);
             const stringNode = this.stringRender.render();
-            this.nativeElement.appendChild(stringNode);
+            this.getOutletParent().appendChild(stringNode);
         }
         else {
             this.stringRender?.update(this.context, this.viewContext);
@@ -4708,5 +5212,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AngularEditor, BaseComponent, BaseElementComponent, BaseElementFlavour, BaseFlavour, BaseLeafComponent, BaseLeafFlavour, BaseTextComponent, BaseTextFlavour, BlockCardRef, DEFAULT_ELEMENT_HEIGHT, DefaultTextFlavour, EDITOR_TO_AFTER_VIEW_INIT_QUEUE, ELEMENT_TO_COMPONENT, FAKE_LEFT_BLOCK_CARD_OFFSET, FAKE_RIGHT_BLOCK_CARD_OFFSET, FlavourRef, HAS_BEFORE_INPUT_SUPPORT, IS_ANDROID, IS_APPLE, IS_CHROME, IS_CHROME_LEGACY, IS_EDGE_LEGACY, IS_FIREFOX, IS_FIREFOX_LEGACY, IS_IOS, IS_QQBROWSER, IS_SAFARI, IS_UC_MOBILE, IS_WECHATBROWSER, JUST_NOW_UPDATED_VIRTUAL_VIEW, PLACEHOLDER_SYMBOL, SLATE_BLOCK_CARD_CLASS_NAME, SLATE_DEBUG_KEY, SlateBlockCard, SlateChildrenOutlet, SlateEditable, SlateErrorCode, SlateFragmentAttributeKey, SlateModule, VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT, VIRTUAL_SCROLL_DEFAULT_BUFFER_COUNT, VoidTextFlavour, blobAsString, buildHTMLText, check, completeTable, createClipboardData, createText, createThrottleRAF, defaultScrollSelectionIntoView, fallbackCopyText, getBlockCardByNativeElement, getCardTargetAttribute, getClipboardData, getClipboardFromHTMLText, getContentHeight, getDataTransferClipboard, getDataTransferClipboardText, getNavigatorClipboard, getPlainText, getSelection, getSlateFragmentAttribute, getZeroTextNode, hasAfterContextChange, hasBeforeContextChange, hasBlockCard, hasBlockCardWithNode, hotkeys, isCardCenterByTargetAttr, isCardLeft, isCardLeftByTargetAttr, isCardRightByTargetAttr, isClipboardFile, isClipboardReadSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isComponentType, isDOMText, isDecoratorRangeListEqual, isFlavourType, isInvalidTable, isTemplateRef, isValid, normalize, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setNavigatorClipboard, shallowCompare, stripHtml, withAngular };
+export { AngularEditor, BaseComponent, BaseElementComponent, BaseElementFlavour, BaseFlavour, BaseLeafComponent, BaseLeafFlavour, BaseTextComponent, BaseTextFlavour, BlockCardRef, DEFAULT_ELEMENT_HEIGHT, DefaultTextFlavour, EDITOR_TO_AFTER_VIEW_INIT_QUEUE, EDITOR_TO_BUSINESS_TOP, EDITOR_TO_ROOT_NODE_WIDTH, 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, calculateVirtualTopHeight, 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