slate-angular 20.2.0-next.26 → 20.2.0-next.28

package/fesm2022/slate-angular.mjs

@@ -955,2237 +955,2247 @@ const fallbackCopyText = async (text) => {
     });
 };
 
-const ELEMENT_KEY_TO_HEIGHTS = new WeakMap();
-const EDITOR_TO_BUSINESS_TOP = new WeakMap();
-const measureHeightByElement = (editor, element) => {
-    const key = AngularEditor.findKey(editor, element);
-    const view = ELEMENT_TO_COMPONENT.get(element);
-    if (!view) {
-        return;
-    }
-    const ret = view.getRealHeight();
-    const heights = ELEMENT_KEY_TO_HEIGHTS.get(editor);
-    heights.set(key.id, ret);
-    return ret;
-};
-const measureHeightByIndics = (editor, indics, force = false) => {
-    let hasChanged = false;
-    indics.forEach((index, i) => {
-        const element = editor.children[index];
-        const preHeight = getRealHeightByElement(editor, element, 0);
-        if (preHeight && !force) {
-            return;
+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);
         }
-        hasChanged = true;
-        measureHeightByElement(editor, element);
-    });
-    return hasChanged;
-};
-const getBusinessTop = (editor) => {
-    return EDITOR_TO_BUSINESS_TOP.get(editor) ?? 0;
-};
-const getRealHeightByElement = (editor, element, defaultHeight = VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT) => {
-    const isVisible = editor.isVisible(element);
-    if (!isVisible) {
-        return 0;
-    }
-    const heights = ELEMENT_KEY_TO_HEIGHTS.get(editor);
-    const key = AngularEditor.findKey(editor, element);
-    const height = heights?.get(key.id);
-    if (typeof height === 'number') {
-        return height;
-    }
-    if (heights?.has(key.id)) {
-        console.error('getBlockHeight: invalid height value', key.id, height);
-    }
-    return defaultHeight;
-};
-const buildHeightsAndAccumulatedHeights = (editor) => {
-    const children = (editor.children || []);
-    const heights = new Array(children.length);
-    const accumulatedHeights = new Array(children.length + 1);
-    accumulatedHeights[0] = 0;
-    for (let i = 0; i < children.length; i++) {
-        const height = getRealHeightByElement(editor, children[i]);
-        heights[i] = height;
-        accumulatedHeights[i + 1] = accumulatedHeights[i] + height;
+        this.instance.init();
+        return this.instance;
     }
-    return { heights, accumulatedHeights };
-};
-const scrollToElement = (editor, element, scrollTo) => {
-    const children = editor.children;
-    if (!children.length) {
-        return;
+    static log(doc, type, ...args) {
+        this.getInstance(doc).log(type, ...args);
     }
-    const anchorIndex = children.findIndex(item => item === element);
-    if (anchorIndex < 0) {
-        return;
+    static syncScrollTop(doc, value) {
+        const instance = this.getInstance(doc);
+        instance.setScrollTopValue(value);
     }
-    const { accumulatedHeights } = buildHeightsAndAccumulatedHeights(editor);
-    scrollTo((accumulatedHeights[anchorIndex] ?? 0) + getBusinessTop(editor));
-};
-
-const withAngular = (editor, clipboardFormatKey = 'x-slate-fragment') => {
-    let e = editor;
-    let { apply } = e;
-    e = withDOM(e, clipboardFormatKey);
-    e.setFragmentData = (dataTransfer, originEvent) => {
-        const { selection } = e;
-        if (!selection) {
-            return;
-        }
-        const [start, end] = Range.edges(selection);
-        const startVoid = Editor.void(e, { at: start.path });
-        const endVoid = Editor.void(e, { at: end.path });
-        if (Range.isCollapsed(selection) && !startVoid) {
-            return;
-        }
-        // Create a fake selection so that we can add a Base64-encoded copy of the
-        // fragment to the HTML, to decode on future pastes.
-        let domRange;
-        if (AngularEditor.isEnabledVirtualScroll(e)) {
-            const virtualScrollSelection = EDITOR_TO_VIRTUAL_SCROLL_SELECTION.get(e);
-            if (virtualScrollSelection) {
-                domRange = AngularEditor.toDOMRange(e, virtualScrollSelection);
+    constructor(doc) {
+        this.doc = doc;
+        this.state = {
+            left: 16,
+            top: 16,
+            collapsed: false,
+            width: VirtualScrollDebugOverlay.defaultWidth,
+            height: VirtualScrollDebugOverlay.defaultHeight
+        };
+        this.originalConsoleLog = console.log.bind(console);
+        this.originalConsoleWarn = console.warn.bind(console);
+        this.dragOffsetX = 0;
+        this.dragOffsetY = 0;
+        this.isDragging = false;
+        this.isResizing = false;
+        this.resizeStartX = 0;
+        this.resizeStartY = 0;
+        this.resizeStartWidth = 0;
+        this.resizeStartHeight = 0;
+        this.dragMoved = false;
+        this.wasDragged = false;
+        this.onDragging = (event) => {
+            if (!this.isDragging || !this.container) {
+                return;
             }
-        }
-        domRange = domRange ?? AngularEditor.toDOMRange(e, selection);
-        let contents = domRange.cloneContents();
-        let attach = contents.childNodes[0];
-        // Make sure attach is non-empty, since empty nodes will not get copied.
-        const contentsArray = Array.from(contents.children);
-        contentsArray.forEach(node => {
-            if (node.textContent && node.textContent.trim() !== '') {
-                attach = node;
+            this.dragMoved = true;
+            const nextLeft = event.clientX - this.dragOffsetX;
+            const nextTop = event.clientY - this.dragOffsetY;
+            this.container.style.left = `${nextLeft}px`;
+            this.container.style.top = `${nextTop}px`;
+            this.container.style.right = 'auto';
+            this.container.style.bottom = 'auto';
+        };
+        this.onDragEnd = () => {
+            if (!this.isDragging) {
+                return;
             }
-        });
-        // COMPAT: If the end node is a void node, we need to move the end of the
-        // range from the void node's spacer span, to the end of the void node's
-        // content, since the spacer is before void's content in the DOM.
-        if (endVoid) {
-            const [voidNode] = endVoid;
-            const r = domRange.cloneRange();
-            const domNode = AngularEditor.toDOMNode(e, voidNode);
-            r.setEndAfter(domNode);
-            contents = r.cloneContents();
-        }
-        // COMPAT: If the start node is a void node, we need to attach the encoded
-        // fragment to the void node's content node instead of the spacer, because
-        // attaching it to empty `<div>/<span>` nodes will end up having it erased by
-        // most browsers. (2018/04/27)
-        if (startVoid) {
-            attach = contents.querySelector('[data-slate-spacer]');
-        }
-        // Remove any zero-width space spans from the cloned DOM so that they don't
-        // show up elsewhere when pasted.
-        Array.from(contents.querySelectorAll('[data-slate-zero-width]')).forEach(zw => {
-            const isNewline = zw.getAttribute('data-slate-zero-width') === 'n';
-            zw.textContent = isNewline ? '\n' : '';
-        });
-        // Set a `data-slate-fragment` attribute on a non-empty node, so it shows up
-        // in the HTML, and can be used for intra-Slate pasting. If it's a text
-        // node, wrap it in a `<span>` so we have something to set an attribute on.
-        if (isDOMText(attach)) {
-            const span = attach.ownerDocument.createElement('span');
-            // COMPAT: In Chrome and Safari, if we don't add the `white-space` style
-            // then leading and trailing spaces will be ignored. (2017/09/21)
-            span.style.whiteSpace = 'pre';
-            span.appendChild(attach);
-            contents.appendChild(span);
-            attach = span;
-        }
-        const fragment = e.getFragment();
-        // Add the content to a <div> so that we can get its inner HTML.
-        const div = contents.ownerDocument.createElement('div');
-        const attachWrapper = document.createElement('div');
-        const elements = Array.from(contents.children);
-        if (isInvalidTable(elements)) {
-            contents = completeTable(contents.cloneNode(true));
-        }
-        attachWrapper.appendChild(contents);
-        div.appendChild(attachWrapper);
-        div.setAttribute('hidden', 'true');
-        contents.ownerDocument.body.appendChild(div);
-        setClipboardData({ text: getPlainText(div), elements: fragment }, div, attachWrapper, dataTransfer);
-        contents.ownerDocument.body.removeChild(div);
-    };
-    e.deleteCutData = () => {
-        const { selection } = editor;
-        if (selection) {
-            if (Range.isExpanded(selection)) {
-                Editor.deleteFragment(editor);
+            this.isDragging = false;
+            this.wasDragged = this.dragMoved;
+            this.dragMoved = false;
+            this.doc.removeEventListener('mousemove', this.onDragging);
+            this.doc.removeEventListener('mouseup', this.onDragEnd);
+            if (this.container) {
+                const rect = this.container.getBoundingClientRect();
+                this.state.left = rect.left;
+                this.state.top = rect.top;
+                this.persistState();
+                this.container.style.transition = '';
             }
-            else {
-                const node = Node.parent(editor, selection.anchor.path);
-                if (Element.isElement(node) && Editor.isVoid(editor, node)) {
-                    Transforms.delete(editor);
-                }
+        };
+        this.onResizing = (event) => {
+            if (!this.isResizing || !this.container) {
+                return;
             }
+            const deltaX = event.clientX - this.resizeStartX;
+            const deltaY = event.clientY - this.resizeStartY;
+            const nextWidth = Math.max(VirtualScrollDebugOverlay.minWidth, this.resizeStartWidth + deltaX);
+            const nextHeight = Math.max(VirtualScrollDebugOverlay.minHeight, this.resizeStartHeight + deltaY);
+            this.state.width = nextWidth;
+            this.state.height = nextHeight;
+            this.applySize();
+        };
+        this.onResizeEnd = () => {
+            if (!this.isResizing) {
+                return;
+            }
+            this.isResizing = false;
+            this.doc.removeEventListener('mousemove', this.onResizing);
+            this.doc.removeEventListener('mouseup', this.onResizeEnd);
+            this.persistState();
+        };
+    }
+    init() {
+        if (!this.container) {
+            this.createContainer();
         }
-    };
-    e.insertData = async (data) => {
-        if (!(await e.customInsertFragmentData(data, null))) {
-            e.insertTextData(data);
+        else {
+            this.applyState();
         }
-    };
-    e.customInsertFragmentData = async (data, contextClipboardData) => {
-        /**
-         * Checking copied fragment from application/x-slate-fragment or data-slate-fragment
-         */
-        const clipboardData = contextClipboardData || (await getClipboardData(data));
-        if (clipboardData && clipboardData.elements) {
-            e.insertFragment(clipboardData.elements);
-            return true;
-        }
-        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);
+    }
+    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;
+        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 '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;
+        });
+        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 = '';
             }
-            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;
+        });
+        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;
             }
-        }
-        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 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;
+            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();
     }
-    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;
+    startDrag(event) {
+        if (event.button !== 0) {
+            return;
         }
-    }
-    const minEnd = startLength - start;
-    for (end = 1; end <= minEnd; end++) {
-        if (startValue[startLength - end] !== endValue[endLength - end]) {
-            break;
+        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();
         }
     }
-    const sliceTail = end > 1 ? 1 - end : undefined;
-    fallbackText = endValue.slice(start, sliceTail);
-    return fallbackText;
-}
-function getText() {
-    if ('value' in root) {
-        return root.value;
-    }
-    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]
+    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();
     }
-};
-// 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;
+    applyPosition() {
+        if (!this.container) {
+            return;
+        }
+        this.container.style.left = `${this.state.left}px`;
+        this.container.style.top = `${this.state.top}px`;
     }
-}
-/**
- * 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;
+    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`;
     }
-    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;
+    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';
         }
-        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;
+    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;
                 }
-                else if (nativeEvent.which) {
-                    return String.fromCharCode(nativeEvent.which);
+                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;
                 }
             }
-            return null;
-        case TOP_COMPOSITION_END:
-            return useFallbackCompositionData && !isUsingKoreanIME(nativeEvent) ? null : nativeEvent.data;
-        default:
-            return null;
+        }
+        catch {
+            // ignore storage errors
+        }
     }
-}
-/**
- * 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);
+    persistState() {
+        try {
+            this.doc.defaultView?.localStorage?.setItem(VirtualScrollDebugOverlay.storageKey, JSON.stringify(this.state));
+        }
+        catch {
+            // ignore storage errors
+        }
     }
-    else {
-        chars = getFallbackBeforeInputChars(topLevelType, nativeEvent);
+    appendLog(type, ...args) {
+        if (!this.logList) {
+            return;
+        }
+        const item = this.doc.createElement('div');
+        item.style.display = 'flex';
+        item.style.gap = '6px';
+        item.style.alignItems = 'flex-start';
+        item.style.wordBreak = 'break-all';
+        item.style.color = type === 'warn' ? '#fbbf24' : '#9ca3af';
+        const time = this.doc.createElement('span');
+        time.textContent = new Date().toLocaleTimeString();
+        time.style.color = '#6b7280';
+        time.style.flexShrink = '0';
+        time.style.width = '72px';
+        const text = this.doc.createElement('span');
+        text.textContent = `[${type}] ${args.map(arg => this.formatValue(arg)).join(' ')}`;
+        item.appendChild(time);
+        item.appendChild(text);
+        this.logList.appendChild(item);
+        this.logList.scrollTop = this.logList.scrollHeight;
     }
-    // If no characters are being inserted, no BeforeInput event should
-    // be fired.
-    if (!chars) {
-        return null;
+    formatValue(value) {
+        if (typeof value === 'string') {
+            return value;
+        }
+        try {
+            return JSON.stringify(value);
+        }
+        catch (error) {
+            return String(value);
+        }
     }
-    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);
+    setScrollTopValue(value) {
+        if (this.distanceInput) {
+            this.distanceInput.value = String(value ?? 0);
+        }
     }
-};
-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 isDebug = localStorage.getItem(SLATE_DEBUG_KEY) === 'true';
+const isDebugScrollTop = localStorage.getItem(SLATE_DEBUG_KEY_SCROLL_TOP) === 'true';
+const ELEMENT_KEY_TO_HEIGHTS = new WeakMap();
+const EDITOR_TO_BUSINESS_TOP = new WeakMap();
+const debugLog = (type, ...args) => {
+    const doc = document;
+    VirtualScrollDebugOverlay.log(doc, type, ...args);
+};
+const measureHeightByElement = (editor, element) => {
+    const key = AngularEditor.findKey(editor, element);
+    const view = ELEMENT_TO_COMPONENT.get(element);
+    if (!view) {
+        return;
+    }
+    const ret = view.getRealHeight();
+    const heights = ELEMENT_KEY_TO_HEIGHTS.get(editor);
+    heights.set(key.id, ret);
+    return ret;
+};
+const measureHeightByIndics = (editor, indics, force = false) => {
+    let hasChanged = false;
+    indics.forEach((index, i) => {
+        const element = editor.children[index];
+        const preHeight = getRealHeightByElement(editor, element, 0);
+        if (preHeight && !force) {
+            if (isDebug) {
+                const height = measureHeightByElement(editor, element);
+                if (height !== preHeight) {
+                    debugLog('warn', 'measureHeightByElement: height not equal, index: ', index, 'preHeight: ', preHeight, 'height: ', height);
+                }
             }
-            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();
+            return;
         }
-    }, 0);
-}
-
-class FlavourRef {
-    destroy() {
-        this.instance.onDestroy();
-    }
-}
-class BlockCardRef {
-    destroy() {
-        this.instance.onDestroy();
+        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;
     }
-}
-
-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;
+    const heights = ELEMENT_KEY_TO_HEIGHTS.get(editor);
+    const key = AngularEditor.findKey(editor, element);
+    const height = heights?.get(key.id);
+    if (typeof height === 'number') {
+        return height;
     }
-    if (isTemplateRef(viewType)) {
-        const embeddedViewContext = {
-            context,
-            viewContext
-        };
-        const embeddedViewRef = viewContainerRef.createEmbeddedView(viewType, embeddedViewContext);
-        embeddedViewRef.detectChanges();
-        return embeddedViewRef;
+    if (heights?.has(key.id)) {
+        console.error('getBlockHeight: invalid height value', key.id, height);
     }
-    if (isComponentType(viewType)) {
-        const componentRef = viewContainerRef.createComponent(viewType, {
-            injector: viewContainerRef.injector
-        });
-        componentRef.instance.viewContext = viewContext;
-        componentRef.instance.context = context;
-        componentRef.changeDetectorRef.detectChanges();
-        return componentRef;
+    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;
     }
-}
-function updateContext(view, newContext, viewContext) {
-    if (view instanceof FlavourRef) {
-        view.instance.context = newContext;
+    return { heights, accumulatedHeights };
+};
+const scrollToElement = (editor, element, scrollTo) => {
+    const children = editor.children;
+    if (!children.length) {
         return;
     }
-    if (view instanceof ComponentRef) {
-        view.instance.context = newContext;
-    }
-    else {
-        view.context.context = newContext;
-        view.context.viewContext = viewContext;
-        view.detectChanges();
+    const anchorIndex = children.findIndex(item => item === element);
+    if (anchorIndex < 0) {
+        return;
     }
-}
-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();
+    const { accumulatedHeights } = buildHeightsAndAccumulatedHeights(editor);
+    scrollTo((accumulatedHeights[anchorIndex] ?? 0) + getBusinessTop(editor));
+};
+
+const withAngular = (editor, clipboardFormatKey = 'x-slate-fragment') => {
+    let e = editor;
+    let { apply } = e;
+    e = withDOM(e, clipboardFormatKey);
+    e.setFragmentData = (dataTransfer, originEvent) => {
+        const { selection } = e;
+        if (!selection) {
+            return;
         }
-        else {
-            outletParent.prepend(fragment);
+        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;
         }
-    }
-}
-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);
+        // 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);
             }
-            if (!isHTMLElement) {
-                rootNode.remove();
+        }
+        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;
             }
         });
-        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];
+        // 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();
         }
-    }
-    if (index === 0) {
-        if (firstRootNode) {
-            rootNodes.forEach(rootNode => {
-                firstRootNode.insertAdjacentElement('beforebegin', rootNode);
-            });
-        }
-        else {
-            outletParent.prepend(...rootNodes);
+        // 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]');
         }
-    }
-    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;
+        // 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' : '';
         });
-    }
-}
-
-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);
+        // 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;
         }
-        this._context = value;
-        this.onContextChange();
-        if (hasAfterContextChange(this)) {
-            this.afterContextChange();
+        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));
         }
-    }
-    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;
-    }
-    get readonly() {
-        return this._context && this._context.readonly;
-    }
-    onInit() {
-        this.initialized = true;
-        this.render();
-        for (const key in this._context.attributes) {
-            this.nativeElement.setAttribute(key, this._context.attributes[key]);
+        attachWrapper.appendChild(contents);
+        div.appendChild(attachWrapper);
+        div.setAttribute('hidden', 'true');
+        contents.ownerDocument.body.appendChild(div);
+        setClipboardData({ text: getPlainText(div), elements: fragment }, div, attachWrapper, dataTransfer);
+        contents.ownerDocument.body.removeChild(div);
+    };
+    e.deleteCutData = () => {
+        const { selection } = editor;
+        if (selection) {
+            if (Range.isExpanded(selection)) {
+                Editor.deleteFragment(editor);
+            }
+            else {
+                const node = Node.parent(editor, selection.anchor.path);
+                if (Element.isElement(node) && Editor.isVoid(editor, node)) {
+                    Transforms.delete(editor);
+                }
+            }
         }
-        this.updateWeakMap();
-        this.listRender = new ListRender(this.viewContext, this.viewContainerRef, this.getOutletParent, this.getOutletElement);
-        if (this.editor.isExpanded(this.element)) {
-            this.listRender.initialize(this.children, this.element, this.childrenContext);
+    };
+    e.insertData = async (data) => {
+        if (!(await e.customInsertFragmentData(data, null))) {
+            e.insertTextData(data);
         }
-        addAfterViewInitQueue(this.editor, () => {
-            this.afterViewInit();
-        });
-    }
-    afterViewInit() {
-        if (this._context.contentEditable !== undefined) {
-            this.nativeElement.setAttribute('contenteditable', this._context.contentEditable + '');
+    };
+    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;
         }
-    }
-    updateWeakMap() {
-        NODE_TO_ELEMENT.set(this.element, this.nativeElement);
-        ELEMENT_TO_NODE.set(this.nativeElement, this.element);
-        ELEMENT_TO_COMPONENT.set(this.element, this);
-    }
-    onDestroy() {
-        if (NODE_TO_ELEMENT.get(this.element) === this.nativeElement) {
-            NODE_TO_ELEMENT.delete(this.element);
+        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;
         }
-        ELEMENT_TO_NODE.delete(this.nativeElement);
-        if (ELEMENT_TO_COMPONENT.get(this.element) === this) {
-            ELEMENT_TO_COMPONENT.delete(this.element);
+        return false;
+    };
+    e.onKeydown = () => { };
+    e.onClick = () => { };
+    e.isBlockCard = element => false;
+    e.isExpanded = element => true;
+    e.onError = (errorData) => {
+        if (errorData.nativeError) {
+            console.error(errorData.nativeError);
         }
-        this.listRender.destroy();
-        this.nativeElement?.remove();
-    }
-    onContextChange() {
-        this.childrenContext = this.getChildrenContext();
-        if (!this.initialized) {
-            return;
+        else {
+            console.error(errorData);
         }
-        this.rerender();
-        this.updateWeakMap();
-        this.updateChildrenView();
-    }
-    updateChildrenView() {
-        if (this.editor.isExpanded(this.element)) {
-            this.listRender.update(this.children, this.element, this.childrenContext);
-        }
-        else {
-            if (this.listRender.initialized) {
-                this.listRender.destroy();
+    };
+    // 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;
             }
         }
-    }
-    getChildrenContext() {
-        return {
-            parent: this._context.element,
-            selection: this._context.selection,
-            decorations: this._context.decorations,
-            decorate: this._context.decorate,
-            readonly: this._context.readonly
-        };
-    }
-    isStableHeight() {
-        return false;
-    }
-    getRealHeight() {
-        if (this.isStableHeight() && this.stableHeight !== null) {
-            return this.stableHeight;
-        }
-        const blockCard = getBlockCardByNativeElement(this.nativeElement);
-        const target = blockCard || this.nativeElement;
-        const computedStyle = getComputedStyle(target);
-        const height = Math.ceil(target.getBoundingClientRect().height) + parseFloat(computedStyle.marginTop) + parseFloat(computedStyle.marginBottom);
-        if (this.isStableHeight()) {
-            this.stableHeight = height;
+        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);
         }
-        return height;
-    }
-}
+    };
+    e.selectAll = () => {
+        Transforms.select(e, []);
+    };
+    e.isVisible = element => {
+        return true;
+    };
+    return e;
+};
 
-class DefaultElementFlavour extends BaseElementFlavour {
-    render() {
-        const nativeElement = document.createElement('div');
-        this.nativeElement = nativeElement;
-    }
-    rerender() {
-        // No-op
-    }
-}
+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';
 
-class BaseLeafFlavour extends BaseFlavour {
-    get text() {
-        return this.context && this.context.text;
-    }
-    get leaf() {
-        return this.context && this.context.leaf;
-    }
-    onInit() {
-        this.render();
-        this.renderPlaceholder();
-        this.initialized = true;
-    }
-    onContextChange() {
-        if (!this.initialized) {
-            return;
-        }
-        this.rerender();
-        this.renderPlaceholder();
-    }
-    renderPlaceholder() {
-        // issue-1: IME input was interrupted
-        // issue-2: IME input focus jumping
-        // Issue occurs when the span node of the placeholder is before the slateString span node
-        if (this.context.leaf['placeholder']) {
-            if (!this.placeholderElement) {
-                this.createPlaceholder();
-            }
-            this.updatePlaceholder();
-        }
-        else {
-            this.destroyPlaceholder();
-        }
-    }
-    createPlaceholder() {
-        const placeholderElement = document.createElement('span');
-        placeholderElement.innerText = this.context.leaf['placeholder'];
-        placeholderElement.contentEditable = 'false';
-        placeholderElement.setAttribute('data-slate-placeholder', 'true');
-        this.placeholderElement = placeholderElement;
-        this.nativeElement.classList.add('leaf-with-placeholder');
-        this.nativeElement.appendChild(placeholderElement);
-        setTimeout(() => {
-            const editorElement = this.nativeElement.closest('.the-editor-typo');
-            const editorContentHeight = getContentHeight(editorElement);
-            if (editorContentHeight > 0) {
-                // Not supported webkitLineClamp exceeds height hiding
-                placeholderElement.style.maxHeight = `${editorContentHeight}px`;
-            }
-            const lineClamp = Math.floor(editorContentHeight / this.nativeElement.offsetHeight) || 0;
-            placeholderElement.style.webkitLineClamp = `${Math.max(lineClamp, 1)}`;
-        });
+/**
+ * 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;
     }
-    updatePlaceholder() {
-        if (this.placeholderElement.innerText !== this.context.leaf['placeholder']) {
-            this.placeholderElement.innerText = this.context.leaf['placeholder'];
+    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;
         }
     }
-    destroyPlaceholder() {
-        if (this.placeholderElement) {
-            this.placeholderElement.remove();
-            this.placeholderElement = null;
-            this.nativeElement.classList.remove('leaf-with-placeholder');
+    const minEnd = startLength - start;
+    for (end = 1; end <= minEnd; end++) {
+        if (startValue[startLength - end] !== endValue[endLength - end]) {
+            break;
         }
     }
-    onDestroy() {
-        this.nativeElement?.remove();
+    const sliceTail = end > 1 ? 1 - end : undefined;
+    fallbackText = endValue.slice(start, sliceTail);
+    return fallbackText;
+}
+function getText() {
+    if ('value' in root) {
+        return root.value;
     }
+    return root.textContent;
 }
 
-var StringType;
-(function (StringType) {
-    StringType["normalString"] = "normalString";
-    StringType["lineBreakEmptyString"] = "lineBreakEmptyString";
-    StringType["normalEmptyText"] = "normalEmptyText";
-    StringType["compatibleString"] = "compatibleString";
-    StringType["voidString"] = "voidString";
-})(StringType || (StringType = {}));
-class SlateStringRender {
-    constructor(context, viewContext) {
-        this.context = context;
-        this.viewContext = viewContext;
-    }
-    // COMPAT: If the text is empty, it's because it's on the edge of an inline
-    // node, so we render a zero-width space so that the selection can be
-    // inserted next to it still.
-    isEmptyText() {
-        return this.context.leaf.text === '';
-    }
-    // COMPAT: Browsers will collapse trailing new lines at the end of blocks,
-    // so we need to add an extra trailing new lines to prevent that.
-    isCompatibleString() {
-        return this.context.isLast && this.context.leaf.text.slice(-1) === '\n';
-    }
-    // COMPAT: Render text inside void nodes with a zero-width space.
-    // So the node can contain selection but the text is not visible.
-    isVoid() {
-        return this.viewContext.editor.isVoid(this.context.parent);
-    }
-    get leaf() {
-        return this.context && this.context.leaf;
-    }
-    // COMPAT: If this is the last text node in an empty block, render a zero-
-    // width space that will convert into a line break when copying and pasting
-    // to support expected plain text.
-    isLineBreakEmptyString() {
-        return (this.context.leaf.text === '' &&
-            this.context.parent.children[this.context.parent.children.length - 1] === this.context.text &&
-            !this.viewContext.editor.isInline(this.context.parent) &&
-            // [list-render] performance optimization: reduce the number of calls to the `Editor.string(editor, path)` method
-            isEmpty(this.viewContext.editor, this.context.parent));
+/**
+ * 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]
     }
-    createStringNode(type) {
-        let newNativeElement;
-        switch (type) {
-            case StringType.lineBreakEmptyString:
-                newNativeElement = createLineBreakEmptyStringDOM(this.getElementStringLength());
-                break;
-            case StringType.voidString:
-            case StringType.normalEmptyText:
-                newNativeElement = createEmptyOrVoidStringNode();
-                break;
-            case StringType.compatibleString:
-                newNativeElement = createCompatibleStringNode(this.leaf.text);
-                break;
-            case StringType.normalString:
-                newNativeElement = createDefaultStringNode(this.leaf.text);
-                break;
-            default:
-                newNativeElement = createDefaultStringNode(this.leaf.text);
-        }
-        return newNativeElement;
+};
+// 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;
     }
-    render() {
-        this.type = this.getType();
-        this.nativeElement = this.createStringNode(this.type);
-        return this.nativeElement;
+}
+/**
+ * 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;
     }
-    getType() {
-        if (this.isLineBreakEmptyString()) {
-            return StringType.lineBreakEmptyString;
-        }
-        if (this.isVoid()) {
-            return StringType.voidString;
-        }
-        if (this.isEmptyText()) {
-            return StringType.normalEmptyText;
-        }
-        if (this.isCompatibleString()) {
-            return StringType.compatibleString;
-        }
-        return StringType.normalString;
+    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;
     }
-    update(context, viewContext) {
-        this.context = context;
-        this.viewContext = viewContext;
-        const type = this.getType();
-        if (type !== this.type) {
-            const newNativeElement = this.createStringNode(type);
-            this.nativeElement.replaceWith(newNativeElement);
-            this.nativeElement = newNativeElement;
-            this.type = type;
-            return;
-        }
-        if (this.type === StringType.normalString) {
-            this.nativeElement.textContent = this.leaf.text;
+}
+/**
+ * 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;
     }
-    getElementStringLength() {
-        return Node.string(this.context.parent).length;
+    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;
     }
 }
-const createDefaultStringNode = (text) => {
-    const stringNode = document.createElement('span');
-    stringNode.textContent = text;
-    stringNode.setAttribute('data-slate-string', 'true');
-    stringNode.setAttribute('editable-text', '');
-    return stringNode;
-};
-const createEmptyOrVoidStringNode = () => {
-    const stringNode = document.createElement('span');
-    stringNode.setAttribute('data-slate-string', 'true');
-    stringNode.setAttribute('data-slate-zero-width', 'z');
-    stringNode.setAttribute('data-slate-length', '0');
-    const zeroWidthSpace = getZeroTextNode();
-    stringNode.appendChild(zeroWidthSpace);
-    stringNode.setAttribute('editable-text', '');
-    return stringNode;
-};
-const createCompatibleStringNode = (text) => {
-    const stringNode = document.createElement('span');
-    stringNode.setAttribute('data-slate-string', 'true');
-    stringNode.textContent = text;
-    stringNode.setAttribute('editable-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
+ * Extract a SyntheticInputEvent for `beforeInput`, based on either native
+ * `textInput` or fallback behavior.
+ *
  */
-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;
+function extractBeforeInputEvent(topLevelType, targetInst, nativeEvent, nativeEventTarget) {
+    let chars;
+    if (canUseTextInputEvent) {
+        chars = getNativeBeforeInputChars(topLevelType, nativeEvent);
     }
-    render() {
-        const leafNode = createDefaultLeafNode();
-        this.stringRender = new SlateStringRender(this.context, this.viewContext);
-        const stringNode = this.stringRender.render();
-        leafNode.appendChild(stringNode);
-        this.nativeElement = leafNode;
+    else {
+        chars = getFallbackBeforeInputChars(topLevelType, nativeEvent);
     }
-    rerender() {
-        this.stringRender?.update(this.context, this.viewContext);
+    // 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;
 }
-const createDefaultLeafNode = () => {
-    const span = document.createElement('span');
-    span.setAttribute('data-slate-leaf', 'true');
-    return span;
+/**
+ * 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 {
+}
 
-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();
+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);
             });
-            diffResult.forEachMovedItem(record => {
-                mountOnItemChange(record.currentIndex, record.item, newViews, null, outletParent, firstRootNode, this.viewContext);
+            mutation.addedNodes.forEach(node => {
+                mutation.target.removeChild(node);
             });
-            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 };
-    }
+        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.views.forEach(view => view.destroy());
+        this.instance.onDestroy();
     }
 }
-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 BlockCardRef {
+    destroy() {
+        this.instance.onDestroy();
+    }
 }
 
-class BaseTextFlavour extends BaseFlavour {
-    constructor() {
-        super(...arguments);
-        this.getOutletParent = () => {
-            return this.nativeElement;
-        };
-        this.getOutletElement = () => {
-            return this.nativeElement.querySelector('.children-outlet');
+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;
     }
-    get text() {
-        return this._context && this._context.text;
+    if (isComponentType(viewType)) {
+        const componentRef = viewContainerRef.createComponent(viewType, {
+            injector: viewContainerRef.injector
+        });
+        componentRef.instance.viewContext = viewContext;
+        componentRef.instance.context = context;
+        componentRef.changeDetectorRef.detectChanges();
+        return componentRef;
     }
-    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);
+}
+function updateContext(view, newContext, viewContext) {
+    if (view instanceof FlavourRef) {
+        view.instance.context = newContext;
+        return;
     }
-    updateWeakMap() {
-        ELEMENT_TO_NODE.set(this.nativeElement, this.text);
-        NODE_TO_ELEMENT.set(this.text, this.nativeElement);
+    if (view instanceof ComponentRef) {
+        view.instance.context = newContext;
     }
-    onDestroy() {
-        if (NODE_TO_ELEMENT.get(this.text) === this.nativeElement) {
-            NODE_TO_ELEMENT.delete(this.text);
+    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);
         }
-        ELEMENT_TO_NODE.delete(this.nativeElement);
-        this.leavesRender.destroy();
-        this.nativeElement?.remove();
     }
-    onContextChange() {
-        if (!this.initialized) {
-            return;
+}
+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];
         }
-        this.rerender();
-        this.updateWeakMap();
-        this.leavesRender.update(this.context);
+    }
+    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;
+        });
     }
 }
 
-class DefaultTextFlavour extends BaseTextFlavour {
-    render() {
-        const { nativeElement } = createText(this.text.text);
-        this.nativeElement = nativeElement;
+function hasBeforeContextChange(value) {
+    if (value.beforeContextChange) {
+        return true;
     }
-    rerender() { }
+    return false;
 }
-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');
+function hasAfterContextChange(value) {
+    if (value.afterContextChange) {
+        return true;
     }
-    rerender() { }
+    return false;
 }
-const createText = (text) => {
-    const nativeElement = document.createElement('span');
-    nativeElement.setAttribute('data-slate-node', 'text');
-    return { nativeElement };
-};
 
-class ListRender {
-    constructor(viewContext, viewContainerRef, getOutletParent, getOutletElement) {
-        this.viewContext = viewContext;
-        this.viewContainerRef = viewContainerRef;
-        this.getOutletParent = getOutletParent;
-        this.getOutletElement = getOutletElement;
-        this.children = [];
-        this.views = [];
-        this.blockCards = [];
-        this.contexts = [];
-        this.viewTypes = [];
-        this.differ = null;
+class BaseFlavour {
+    constructor() {
         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 ');
+    static { this.isFlavour = true; }
+    set context(value) {
+        if (hasBeforeContextChange(this)) {
+            this.beforeContextChange(value);
         }
-        const outletParent = this.getOutletParent();
-        if (this.preRenderingHTMLElement.length > 0) {
-            const preRenderingElement = [...this.preRenderingHTMLElement];
-            preRenderingElement.forEach((rootNodes, index) => {
-                rootNodes.forEach(rootNode => {
-                    rootNode.style.position = '';
-                    rootNode.style.top = '';
-                    rootNode.style.width = '';
-                });
-            });
-            this.preRenderingHTMLElement = [];
+        this._context = value;
+        this.onContextChange();
+        if (hasAfterContextChange(this)) {
+            this.afterContextChange();
         }
-        const diffResult = this.differ.diff(children);
-        const parentPath = AngularEditor.findPath(this.viewContext.editor, parent);
-        const isRoot = parent === this.viewContext.editor;
-        const firstIndex = isRoot ? this.viewContext.editor.children.indexOf(children[0]) : 0;
-        if (diffResult) {
-            let firstRootNode = getRootNodes(this.views[0], this.blockCards[0])[0];
-            const newContexts = [];
-            const newViewTypes = [];
-            const newViews = [];
-            const newBlockCards = [];
-            diffResult.forEachItem(record => {
-                const currentIndex = firstIndex + record.currentIndex;
-                NODE_TO_INDEX.set(record.item, currentIndex);
-                NODE_TO_PARENT.set(record.item, parent);
-                let context = getContext(currentIndex, record.item, parentPath, childrenContext, this.viewContext);
-                const viewType = getViewType(record.item, parent, this.viewContext);
-                newViewTypes.push(viewType);
-                let view;
-                let blockCard;
-                if (record.previousIndex === null) {
-                    view = createEmbeddedViewOrComponentOrFlavour(viewType, context, this.viewContext, this.viewContainerRef);
-                    blockCard = createBlockCard(record.item, view, this.viewContext);
-                    newContexts.push(context);
-                    newViews.push(view);
-                    newBlockCards.push(blockCard);
-                    mountOnItemChange(record.currentIndex, record.item, newViews, newBlockCards, outletParent, firstRootNode, this.viewContext);
-                }
-                else {
-                    const previousView = this.views[record.previousIndex];
-                    const previousViewType = this.viewTypes[record.previousIndex];
-                    const previousContext = this.contexts[record.previousIndex];
-                    const previousBlockCard = this.blockCards[record.previousIndex];
-                    if (previousViewType !== viewType) {
-                        view = createEmbeddedViewOrComponentOrFlavour(viewType, context, this.viewContext, this.viewContainerRef);
-                        blockCard = createBlockCard(record.item, view, this.viewContext);
-                        const firstRootNode = getRootNodes(previousView, previousBlockCard)[0];
-                        const newRootNodes = getRootNodes(view, blockCard);
-                        firstRootNode.replaceWith(...newRootNodes);
-                        previousView.destroy();
-                        previousBlockCard?.destroy();
-                    }
-                    else {
-                        view = previousView;
-                        blockCard = previousBlockCard;
-                        if (memoizedContext(this.viewContext, record.item, previousContext, context)) {
-                            context = previousContext;
-                        }
-                        else {
-                            updateContext(previousView, context, this.viewContext);
-                        }
-                    }
-                    newContexts.push(context);
-                    newViews.push(view);
-                    newBlockCards.push(blockCard);
-                }
-            });
-            diffResult.forEachOperation(record => {
-                // removed
-                if (record.currentIndex === null) {
-                    const view = this.views[record.previousIndex];
-                    const blockCard = this.blockCards[record.previousIndex];
-                    view.destroy();
-                    blockCard?.destroy();
-                }
-                // moved
-                if (record.previousIndex !== null && record.currentIndex !== null) {
-                    mountOnItemChange(record.currentIndex, record.item, newViews, newBlockCards, outletParent, firstRootNode, this.viewContext);
-                    // Solve the block-card DOMElement loss when moving nodes
-                    newBlockCards[record.currentIndex]?.instance.append();
-                }
-            });
-            this.viewTypes = newViewTypes;
-            this.views = newViews;
-            this.contexts = newContexts;
-            this.children = children;
-            this.blockCards = newBlockCards;
-            if (parent === this.viewContext.editor) {
-                executeAfterViewInit(this.viewContext.editor);
-            }
-        }
-        else {
-            const newContexts = [];
-            this.children.forEach((child, _index) => {
-                NODE_TO_INDEX.set(child, firstIndex + _index);
-                NODE_TO_PARENT.set(child, parent);
-                let context = getContext(firstIndex + _index, child, parentPath, childrenContext, this.viewContext);
-                const previousContext = this.contexts[_index];
-                if (memoizedContext(this.viewContext, child, previousContext, context)) {
-                    context = previousContext;
-                }
-                else {
-                    updateContext(this.views[_index], context, this.viewContext);
-                }
-                newContexts.push(context);
-            });
-            this.contexts = newContexts;
-        }
-        if (preRenderingCount > 0) {
-            for (let i = 0; i < preRenderingCount; i++) {
-                const rootNodes = [...getRootNodes(this.views[i], this.blockCards[i])];
-                rootNodes.forEach(rootNode => {
-                    rootNode.style = `position: absolute;top: -100%;`;
-                });
-                this.preRenderingHTMLElement.push(rootNodes);
-            }
-        }
-    }
-    destroy() {
-        this.children.forEach((element, index) => {
-            if (this.views[index]) {
-                this.views[index].destroy();
-            }
-            if (this.blockCards[index]) {
-                this.blockCards[index].destroy();
-            }
-        });
-        this.children = [];
-        this.views = [];
-        this.blockCards = [];
-        this.contexts = [];
-        this.viewTypes = [];
-        this.initialized = false;
-        this.differ = null;
     }
-}
-function getContext(index, item, parentPath, childrenContext, viewContext) {
-    if (Element.isElement(item)) {
-        const computedContext = getCommonContext(index, item, parentPath, viewContext, childrenContext);
-        const key = AngularEditor.findKey(viewContext.editor, item);
-        const isInline = viewContext.editor.isInline(item);
-        const isVoid = viewContext.editor.isVoid(item);
-        const elementContext = {
-            element: item,
-            ...computedContext,
-            attributes: {
-                'data-slate-node': 'element',
-                'data-slate-key': key.id
-            },
-            decorate: childrenContext.decorate,
-            readonly: childrenContext.readonly
-        };
-        if (isInline) {
-            elementContext.attributes['data-slate-inline'] = true;
-        }
-        if (isVoid) {
-            elementContext.attributes['data-slate-void'] = true;
-        }
-        // add contentEditable for block element only to avoid chinese input be broken
-        if (isVoid && !isInline) {
-            elementContext.contentEditable = false;
-        }
-        return elementContext;
+    get context() {
+        return this._context;
     }
-    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;
+    get editor() {
+        return this.viewContext && this.viewContext.editor;
     }
 }
-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 };
-        }
+
+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();
     }
-    catch (error) {
-        viewContext.editor.onError({
-            code: SlateErrorCode.GetStartPointError,
-            nativeError: error
-        });
-        return { selection: null, decorations: [] };
+    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;
     }
-}
-function getViewType(item, parent, viewContext) {
-    if (Element.isElement(item)) {
-        return (viewContext.renderElement && viewContext.renderElement(item)) || DefaultElementFlavour;
+    append() {
+        this.centerRootNodes.forEach(rootNode => !this.centerContainer.contains(rootNode) && this.centerContainer.appendChild(rootNode));
     }
-    else {
-        const isVoid = viewContext.editor.isVoid(parent);
-        return isVoid ? VoidTextFlavour : (viewContext.renderText && viewContext.renderText(item)) || DefaultTextFlavour;
+    initializeCenter(rootNodes) {
+        this.centerRootNodes = rootNodes;
+        this.append();
+    }
+    onDestroy() {
+        this.nativeElement.remove();
     }
 }
-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;
+const getBlockCardByNativeElement = (nativeElement) => {
+    const blockCardElement = nativeElement?.parentElement?.parentElement;
+    if (blockCardElement && blockCardElement.classList.contains(SLATE_BLOCK_CARD_CLASS_NAME)) {
+        return blockCardElement;
     }
-    else {
-        return null;
+    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;
     }
-}
-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);
+    get element() {
+        return this._context && this._context.element;
     }
-    else {
-        return memoizedTextContext(prev, next);
+    get selection() {
+        return this._context && this._context.selection;
     }
-}
-function memoizedElementContext(viewContext, prev, next) {
-    return (prev.element === next.element &&
-        (!viewContext.isStrictDecorate || prev.decorate === next.decorate) &&
-        prev.readonly === next.readonly &&
-        isDecoratorRangeListEqual(prev.decorations, next.decorations) &&
-        (prev.selection === next.selection || (!!prev.selection && !!next.selection && Range.equals(prev.selection, next.selection))));
-}
-function memoizedTextContext(prev, next) {
-    return (next.parent === prev.parent &&
-        next.isLast === prev.isLast &&
-        next.text === prev.text &&
-        isDecoratorRangeListEqual(next.decorations, prev.decorations));
-}
-function addAfterViewInitQueue(editor, afterViewInitCallback) {
-    const queue = getAfterViewInitQueue(editor);
-    queue.push(afterViewInitCallback);
-    EDITOR_TO_AFTER_VIEW_INIT_QUEUE.set(editor, queue);
-}
-function getAfterViewInitQueue(editor) {
-    return EDITOR_TO_AFTER_VIEW_INIT_QUEUE.get(editor) || [];
-}
-function clearAfterViewInitQueue(editor) {
-    EDITOR_TO_AFTER_VIEW_INIT_QUEUE.set(editor, []);
-}
-function executeAfterViewInit(editor) {
-    const queue = getAfterViewInitQueue(editor);
-    queue.forEach(callback => callback());
-    clearAfterViewInitQueue(editor);
-}
-
-class VirtualScrollDebugOverlay {
-    static { this.storageKey = 'slate_virtual_scroll_debug_overlay_state'; }
-    static { this.minWidth = 320; }
-    static { this.minHeight = 240; }
-    static { this.defaultWidth = 410; }
-    static { this.defaultHeight = 480; }
-    static getInstance(doc) {
-        if (!this.instance) {
-            this.instance = new VirtualScrollDebugOverlay(doc);
+    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;
+    }
+    get readonly() {
+        return this._context && this._context.readonly;
+    }
+    onInit() {
+        this.initialized = true;
+        this.render();
+        for (const key in this._context.attributes) {
+            this.nativeElement.setAttribute(key, this._context.attributes[key]);
         }
-        this.instance.init();
-        return this.instance;
+        this.updateWeakMap();
+        this.listRender = new ListRender(this.viewContext, this.viewContainerRef, this.getOutletParent, this.getOutletElement);
+        if (this.editor.isExpanded(this.element)) {
+            this.listRender.initialize(this.children, this.element, this.childrenContext);
+        }
+        addAfterViewInitQueue(this.editor, () => {
+            this.afterViewInit();
+        });
     }
-    static log(doc, type, ...args) {
-        this.getInstance(doc).log(type, ...args);
+    afterViewInit() {
+        if (this._context.contentEditable !== undefined) {
+            this.nativeElement.setAttribute('contenteditable', this._context.contentEditable + '');
+        }
     }
-    static syncScrollTop(doc, value) {
-        const instance = this.getInstance(doc);
-        instance.setScrollTopValue(value);
+    updateWeakMap() {
+        NODE_TO_ELEMENT.set(this.element, this.nativeElement);
+        ELEMENT_TO_NODE.set(this.nativeElement, this.element);
+        ELEMENT_TO_COMPONENT.set(this.element, this);
     }
-    constructor(doc) {
-        this.doc = doc;
-        this.state = {
-            left: 16,
-            top: 16,
-            collapsed: false,
-            width: VirtualScrollDebugOverlay.defaultWidth,
-            height: VirtualScrollDebugOverlay.defaultHeight
-        };
-        this.originalConsoleLog = console.log.bind(console);
-        this.originalConsoleWarn = console.warn.bind(console);
-        this.dragOffsetX = 0;
-        this.dragOffsetY = 0;
-        this.isDragging = false;
-        this.isResizing = false;
-        this.resizeStartX = 0;
-        this.resizeStartY = 0;
-        this.resizeStartWidth = 0;
-        this.resizeStartHeight = 0;
-        this.dragMoved = false;
-        this.wasDragged = false;
-        this.onDragging = (event) => {
-            if (!this.isDragging || !this.container) {
-                return;
-            }
-            this.dragMoved = true;
-            const nextLeft = event.clientX - this.dragOffsetX;
-            const nextTop = event.clientY - this.dragOffsetY;
-            this.container.style.left = `${nextLeft}px`;
-            this.container.style.top = `${nextTop}px`;
-            this.container.style.right = 'auto';
-            this.container.style.bottom = 'auto';
-        };
-        this.onDragEnd = () => {
-            if (!this.isDragging) {
-                return;
-            }
-            this.isDragging = false;
-            this.wasDragged = this.dragMoved;
-            this.dragMoved = false;
-            this.doc.removeEventListener('mousemove', this.onDragging);
-            this.doc.removeEventListener('mouseup', this.onDragEnd);
-            if (this.container) {
-                const rect = this.container.getBoundingClientRect();
-                this.state.left = rect.left;
-                this.state.top = rect.top;
-                this.persistState();
-                this.container.style.transition = '';
-            }
-        };
-        this.onResizing = (event) => {
-            if (!this.isResizing || !this.container) {
-                return;
-            }
-            const deltaX = event.clientX - this.resizeStartX;
-            const deltaY = event.clientY - this.resizeStartY;
-            const nextWidth = Math.max(VirtualScrollDebugOverlay.minWidth, this.resizeStartWidth + deltaX);
-            const nextHeight = Math.max(VirtualScrollDebugOverlay.minHeight, this.resizeStartHeight + deltaY);
-            this.state.width = nextWidth;
-            this.state.height = nextHeight;
-            this.applySize();
-        };
-        this.onResizeEnd = () => {
-            if (!this.isResizing) {
-                return;
+    onDestroy() {
+        if (NODE_TO_ELEMENT.get(this.element) === this.nativeElement) {
+            NODE_TO_ELEMENT.delete(this.element);
+        }
+        ELEMENT_TO_NODE.delete(this.nativeElement);
+        if (ELEMENT_TO_COMPONENT.get(this.element) === this) {
+            ELEMENT_TO_COMPONENT.delete(this.element);
+        }
+        this.listRender.destroy();
+        this.nativeElement?.remove();
+    }
+    onContextChange() {
+        this.childrenContext = this.getChildrenContext();
+        if (!this.initialized) {
+            return;
+        }
+        this.rerender();
+        this.updateWeakMap();
+        this.updateChildrenView();
+    }
+    updateChildrenView() {
+        if (this.editor.isExpanded(this.element)) {
+            this.listRender.update(this.children, this.element, this.childrenContext);
+        }
+        else {
+            if (this.listRender.initialized) {
+                this.listRender.destroy();
             }
-            this.isResizing = false;
-            this.doc.removeEventListener('mousemove', this.onResizing);
-            this.doc.removeEventListener('mouseup', this.onResizeEnd);
-            this.persistState();
+        }
+    }
+    getChildrenContext() {
+        return {
+            parent: this._context.element,
+            selection: this._context.selection,
+            decorations: this._context.decorations,
+            decorate: this._context.decorate,
+            readonly: this._context.readonly
         };
     }
-    init() {
-        if (!this.container) {
-            this.createContainer();
+    isStableHeight() {
+        return false;
+    }
+    getRealHeight() {
+        if (this.isStableHeight() && this.stableHeight !== null) {
+            return this.stableHeight;
         }
-        else {
-            this.applyState();
+        const blockCard = getBlockCardByNativeElement(this.nativeElement);
+        const target = blockCard || this.nativeElement;
+        const computedStyle = getComputedStyle(target);
+        const height = Math.ceil(target.getBoundingClientRect().height) + parseFloat(computedStyle.marginTop) + parseFloat(computedStyle.marginBottom);
+        if (this.isStableHeight()) {
+            this.stableHeight = height;
         }
+        return height;
     }
-    log(type, ...args) {
-        this.init();
-        if (type === 'warn') {
-            this.originalConsoleWarn(...args);
+}
+
+class DefaultElementFlavour extends BaseElementFlavour {
+    render() {
+        const nativeElement = document.createElement('div');
+        this.nativeElement = nativeElement;
+    }
+    rerender() {
+        // No-op
+    }
+}
+
+class BaseLeafFlavour extends BaseFlavour {
+    get text() {
+        return this.context && this.context.text;
+    }
+    get leaf() {
+        return this.context && this.context.leaf;
+    }
+    onInit() {
+        this.render();
+        this.renderPlaceholder();
+        this.initialized = true;
+    }
+    onContextChange() {
+        if (!this.initialized) {
+            return;
+        }
+        this.rerender();
+        this.renderPlaceholder();
+    }
+    renderPlaceholder() {
+        // issue-1: IME input was interrupted
+        // issue-2: IME input focus jumping
+        // Issue occurs when the span node of the placeholder is before the slateString span node
+        if (this.context.leaf['placeholder']) {
+            if (!this.placeholderElement) {
+                this.createPlaceholder();
+            }
+            this.updatePlaceholder();
         }
         else {
-            this.originalConsoleLog(...args);
+            this.destroyPlaceholder();
         }
-        this.appendLog(type, ...args);
     }
-    dispose() {
-        this.container?.remove();
-        this.container = undefined;
-        this.contentWrapper = undefined;
-        this.bubble = undefined;
-        this.logList = undefined;
-        this.selectorInput = undefined;
-        this.distanceInput = undefined;
-        this.collapseToggle = undefined;
-        this.resizeHandle = undefined;
-        this.doc.removeEventListener('mousemove', this.onDragging);
-        this.doc.removeEventListener('mouseup', this.onDragEnd);
-        this.doc.removeEventListener('mousemove', this.onResizing);
-        this.doc.removeEventListener('mouseup', this.onResizeEnd);
-        this.isDragging = false;
-        this.isResizing = false;
-    }
-    createContainer() {
-        this.loadState();
-        const doc = this.doc;
-        const container = doc.createElement('div');
-        container.style.position = 'fixed';
-        container.style.right = 'auto';
-        container.style.bottom = 'auto';
-        container.style.boxSizing = 'border-box';
-        container.style.background = 'rgba(17, 24, 39, 0.95)';
-        container.style.color = '#e5e7eb';
-        container.style.fontSize = '12px';
-        container.style.border = '1px solid #1f2937';
-        container.style.borderRadius = '10px';
-        container.style.fontFamily = 'Menlo, Consolas, monospace';
-        container.style.boxShadow = '0 10px 30px rgba(0, 0, 0, 0.35)';
-        container.style.zIndex = '9999';
-        container.style.display = 'flex';
-        container.style.flexDirection = 'column';
-        container.style.gap = '10px';
-        container.style.minWidth = `${VirtualScrollDebugOverlay.minWidth}px`;
-        container.style.minHeight = `${VirtualScrollDebugOverlay.minHeight}px`;
-        container.style.maxHeight = '80vh';
-        container.style.cursor = 'default';
-        container.addEventListener('mousedown', event => {
-            if (this.state.collapsed) {
-                this.startDrag(event);
-            }
-        });
-        const header = doc.createElement('div');
-        header.style.display = 'flex';
-        header.style.alignItems = 'center';
-        header.style.justifyContent = 'space-between';
-        header.style.cursor = 'move';
-        header.addEventListener('mousedown', event => {
-            this.startDrag(event);
-        });
-        const title = doc.createElement('div');
-        title.textContent = 'Virtual Scroll Debug';
-        title.style.fontWeight = '600';
-        title.style.letterSpacing = '0.3px';
-        const actions = doc.createElement('div');
-        actions.style.display = 'flex';
-        actions.style.gap = '6px';
-        const collapseButton = doc.createElement('button');
-        collapseButton.type = 'button';
-        collapseButton.textContent = '折叠';
-        collapseButton.style.background = '#1f2937';
-        collapseButton.style.color = '#e5e7eb';
-        collapseButton.style.border = '1px solid #374151';
-        collapseButton.style.borderRadius = '6px';
-        collapseButton.style.padding = '4px 8px';
-        collapseButton.style.cursor = 'pointer';
-        collapseButton.addEventListener('click', () => {
-            this.setCollapsed(!this.state.collapsed);
-        });
-        const clearButton = doc.createElement('button');
-        clearButton.type = 'button';
-        clearButton.textContent = '清除日志';
-        clearButton.style.background = '#374151';
-        clearButton.style.color = '#e5e7eb';
-        clearButton.style.border = '1px solid #4b5563';
-        clearButton.style.borderRadius = '6px';
-        clearButton.style.padding = '4px 10px';
-        clearButton.style.cursor = 'pointer';
-        clearButton.addEventListener('click', () => {
-            if (this.logList) {
-                this.logList.innerHTML = '';
-            }
-        });
-        actions.appendChild(collapseButton);
-        actions.appendChild(clearButton);
-        header.appendChild(title);
-        header.appendChild(actions);
-        const scrollForm = doc.createElement('div');
-        scrollForm.style.display = 'grid';
-        scrollForm.style.gridTemplateColumns = '1fr 110px 50px';
-        scrollForm.style.gap = '6px';
-        scrollForm.style.alignItems = 'center';
-        const selectorInput = doc.createElement('input');
-        selectorInput.placeholder = '滚动容器 selector';
-        selectorInput.style.padding = '6px 8px';
-        selectorInput.style.borderRadius = '6px';
-        selectorInput.style.border = '1px solid #4b5563';
-        selectorInput.style.background = '#111827';
-        selectorInput.style.color = '#e5e7eb';
-        selectorInput.autocomplete = 'off';
-        const distanceInput = doc.createElement('input');
-        distanceInput.placeholder = '滚动距离(px)';
-        distanceInput.type = 'number';
-        distanceInput.style.padding = '6px 8px';
-        distanceInput.style.borderRadius = '6px';
-        distanceInput.style.border = '1px solid #4b5563';
-        distanceInput.style.background = '#111827';
-        distanceInput.style.color = '#e5e7eb';
-        const scrollButton = doc.createElement('button');
-        scrollButton.type = 'button';
-        scrollButton.textContent = '滚动';
-        scrollButton.style.background = '#10b981';
-        scrollButton.style.color = '#0b1c15';
-        scrollButton.style.border = 'none';
-        scrollButton.style.borderRadius = '6px';
-        scrollButton.style.padding = '6px 10px';
-        scrollButton.style.cursor = 'pointer';
-        scrollButton.addEventListener('click', () => {
-            const selector = selectorInput.value.trim();
-            const distanceValue = Number(distanceInput.value ?? 0);
-            const distance = Number.isFinite(distanceValue) ? distanceValue : 0;
-            if (!selector) {
-                this.log('warn', '请先填写滚动容器 selector');
-                return;
-            }
-            const target = doc.querySelector(selector);
-            if (!target) {
-                this.log('warn', `未找到滚动容器: ${selector}`);
-                return;
-            }
-            if (typeof target.scrollTo === 'function') {
-                target.scrollTo({ top: distance, behavior: 'auto' });
-            }
-            else if (Object.prototype.hasOwnProperty.call(target, 'scrollTop')) {
-                target.scrollTop = distance;
-            }
-            else {
-                this.log('warn', '目标元素不支持滚动:', selector);
-                return;
+    createPlaceholder() {
+        const placeholderElement = document.createElement('span');
+        placeholderElement.innerText = this.context.leaf['placeholder'];
+        placeholderElement.contentEditable = 'false';
+        placeholderElement.setAttribute('data-slate-placeholder', 'true');
+        this.placeholderElement = placeholderElement;
+        this.nativeElement.classList.add('leaf-with-placeholder');
+        this.nativeElement.appendChild(placeholderElement);
+        setTimeout(() => {
+            const editorElement = this.nativeElement.closest('.the-editor-typo');
+            const editorContentHeight = getContentHeight(editorElement);
+            if (editorContentHeight > 0) {
+                // Not supported webkitLineClamp exceeds height hiding
+                placeholderElement.style.maxHeight = `${editorContentHeight}px`;
             }
-            this.log('log', `已将 ${selector} 滚动到`, distance);
+            const lineClamp = Math.floor(editorContentHeight / this.nativeElement.offsetHeight) || 0;
+            placeholderElement.style.webkitLineClamp = `${Math.max(lineClamp, 1)}`;
         });
-        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);
+    }
+    updatePlaceholder() {
+        if (this.placeholderElement.innerText !== this.context.leaf['placeholder']) {
+            this.placeholderElement.innerText = this.context.leaf['placeholder'];
+        }
+    }
+    destroyPlaceholder() {
+        if (this.placeholderElement) {
+            this.placeholderElement.remove();
+            this.placeholderElement = null;
+            this.nativeElement.classList.remove('leaf-with-placeholder');
+        }
+    }
+    onDestroy() {
+        this.nativeElement?.remove();
+    }
+}
+
+var StringType;
+(function (StringType) {
+    StringType["normalString"] = "normalString";
+    StringType["lineBreakEmptyString"] = "lineBreakEmptyString";
+    StringType["normalEmptyText"] = "normalEmptyText";
+    StringType["compatibleString"] = "compatibleString";
+    StringType["voidString"] = "voidString";
+})(StringType || (StringType = {}));
+class SlateStringRender {
+    constructor(context, viewContext) {
+        this.context = context;
+        this.viewContext = viewContext;
+    }
+    // COMPAT: If the text is empty, it's because it's on the edge of an inline
+    // node, so we render a zero-width space so that the selection can be
+    // inserted next to it still.
+    isEmptyText() {
+        return this.context.leaf.text === '';
+    }
+    // COMPAT: Browsers will collapse trailing new lines at the end of blocks,
+    // so we need to add an extra trailing new lines to prevent that.
+    isCompatibleString() {
+        return this.context.isLast && this.context.leaf.text.slice(-1) === '\n';
+    }
+    // COMPAT: Render text inside void nodes with a zero-width space.
+    // So the node can contain selection but the text is not visible.
+    isVoid() {
+        return this.viewContext.editor.isVoid(this.context.parent);
+    }
+    get leaf() {
+        return this.context && this.context.leaf;
+    }
+    // COMPAT: If this is the last text node in an empty block, render a zero-
+    // width space that will convert into a line break when copying and pasting
+    // to support expected plain text.
+    isLineBreakEmptyString() {
+        return (this.context.leaf.text === '' &&
+            this.context.parent.children[this.context.parent.children.length - 1] === this.context.text &&
+            !this.viewContext.editor.isInline(this.context.parent) &&
+            // [list-render] performance optimization: reduce the number of calls to the `Editor.string(editor, path)` method
+            isEmpty(this.viewContext.editor, this.context.parent));
+    }
+    createStringNode(type) {
+        let newNativeElement;
+        switch (type) {
+            case StringType.lineBreakEmptyString:
+                newNativeElement = createLineBreakEmptyStringDOM(this.getElementStringLength());
+                break;
+            case StringType.voidString:
+            case StringType.normalEmptyText:
+                newNativeElement = createEmptyOrVoidStringNode();
+                break;
+            case StringType.compatibleString:
+                newNativeElement = createCompatibleStringNode(this.leaf.text);
+                break;
+            case StringType.normalString:
+                newNativeElement = createDefaultStringNode(this.leaf.text);
+                break;
+            default:
+                newNativeElement = createDefaultStringNode(this.leaf.text);
+        }
+        return newNativeElement;
+    }
+    render() {
+        this.type = this.getType();
+        this.nativeElement = this.createStringNode(this.type);
+        return this.nativeElement;
+    }
+    getType() {
+        if (this.isLineBreakEmptyString()) {
+            return StringType.lineBreakEmptyString;
+        }
+        if (this.isVoid()) {
+            return StringType.voidString;
+        }
+        if (this.isEmptyText()) {
+            return StringType.normalEmptyText;
+        }
+        if (this.isCompatibleString()) {
+            return StringType.compatibleString;
+        }
+        return StringType.normalString;
+    }
+    update(context, viewContext) {
+        this.context = context;
+        this.viewContext = viewContext;
+        const type = this.getType();
+        if (type !== this.type) {
+            const newNativeElement = this.createStringNode(type);
+            this.nativeElement.replaceWith(newNativeElement);
+            this.nativeElement = newNativeElement;
+            this.type = type;
+            return;
+        }
+        if (this.type === StringType.normalString) {
+            this.nativeElement.textContent = this.leaf.text;
+        }
+    }
+    getElementStringLength() {
+        return Node.string(this.context.parent).length;
+    }
+}
+const createDefaultStringNode = (text) => {
+    const stringNode = document.createElement('span');
+    stringNode.textContent = text;
+    stringNode.setAttribute('data-slate-string', 'true');
+    stringNode.setAttribute('editable-text', '');
+    return stringNode;
+};
+const createEmptyOrVoidStringNode = () => {
+    const stringNode = document.createElement('span');
+    stringNode.setAttribute('data-slate-string', 'true');
+    stringNode.setAttribute('data-slate-zero-width', 'z');
+    stringNode.setAttribute('data-slate-length', '0');
+    const zeroWidthSpace = getZeroTextNode();
+    stringNode.appendChild(zeroWidthSpace);
+    stringNode.setAttribute('editable-text', '');
+    return stringNode;
+};
+const createCompatibleStringNode = (text) => {
+    const stringNode = document.createElement('span');
+    stringNode.setAttribute('data-slate-string', 'true');
+    stringNode.textContent = text;
+    stringNode.setAttribute('editable-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);
         });
-        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);
+        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
+            };
         });
-        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();
+        return { decoratedLeaves, contexts };
+    }
+    destroy() {
+        this.views.forEach(view => view.destroy());
+    }
+}
+function getContext$1(index, leafContexts) {
+    return leafContexts[index];
+}
+function getViewType$1(leafContext, viewContext) {
+    return (viewContext.renderLeaf && viewContext.renderLeaf(leafContext.leaf)) || DefaultLeafFlavour;
+}
+function trackBy$1(viewContext) {
+    return (index, node) => {
+        return index;
+    };
+}
+
+class BaseTextFlavour extends BaseFlavour {
+    constructor() {
+        super(...arguments);
+        this.getOutletParent = () => {
+            return this.nativeElement;
+        };
+        this.getOutletElement = () => {
+            return this.nativeElement.querySelector('.children-outlet');
+        };
     }
-    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();
-        }
+    get text() {
+        return this._context && this._context.text;
     }
-    startResize(event) {
-        if (event.button !== 0 || this.state.collapsed) {
-            return;
-        }
-        if (!this.container) {
-            return;
+    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);
         }
-        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();
+        ELEMENT_TO_NODE.delete(this.nativeElement);
+        this.leavesRender.destroy();
+        this.nativeElement?.remove();
     }
-    applyPosition() {
-        if (!this.container) {
+    onContextChange() {
+        if (!this.initialized) {
             return;
         }
-        this.container.style.left = `${this.state.left}px`;
-        this.container.style.top = `${this.state.top}px`;
+        this.rerender();
+        this.updateWeakMap();
+        this.leavesRender.update(this.context);
     }
-    applySize() {
-        if (!this.container) {
-            return;
+}
+
+class DefaultTextFlavour extends BaseTextFlavour {
+    render() {
+        const { nativeElement } = createText(this.text.text);
+        this.nativeElement = nativeElement;
+    }
+    rerender() { }
+}
+class VoidTextFlavour extends BaseTextFlavour {
+    render() {
+        const { nativeElement } = createText(this.text.text);
+        this.nativeElement = nativeElement;
+        this.nativeElement.setAttribute('data-slate-spacer', 'true');
+        this.nativeElement.classList.add('slate-spacer');
+    }
+    rerender() { }
+}
+const createText = (text) => {
+    const nativeElement = document.createElement('span');
+    nativeElement.setAttribute('data-slate-node', 'text');
+    return { nativeElement };
+};
+
+class ListRender {
+    constructor(viewContext, viewContainerRef, getOutletParent, getOutletElement) {
+        this.viewContext = viewContext;
+        this.viewContainerRef = viewContainerRef;
+        this.getOutletParent = getOutletParent;
+        this.getOutletElement = getOutletElement;
+        this.children = [];
+        this.views = [];
+        this.blockCards = [];
+        this.contexts = [];
+        this.viewTypes = [];
+        this.differ = null;
+        this.initialized = false;
+        this.preRenderingHTMLElement = [];
+    }
+    initialize(children, parent, childrenContext, preRenderingCount = 0) {
+        this.initialized = true;
+        this.children = children;
+        const isRoot = parent === this.viewContext.editor;
+        const firstIndex = isRoot ? this.viewContext.editor.children.indexOf(children[0]) : 0;
+        const parentPath = AngularEditor.findPath(this.viewContext.editor, parent);
+        children.forEach((descendant, _index) => {
+            NODE_TO_INDEX.set(descendant, firstIndex + _index);
+            NODE_TO_PARENT.set(descendant, parent);
+            const context = getContext(firstIndex + _index, descendant, parentPath, childrenContext, this.viewContext);
+            const viewType = getViewType(descendant, parent, this.viewContext);
+            const view = createEmbeddedViewOrComponentOrFlavour(viewType, context, this.viewContext, this.viewContainerRef);
+            const blockCard = createBlockCard(descendant, view, this.viewContext);
+            this.views.push(view);
+            this.contexts.push(context);
+            this.viewTypes.push(viewType);
+            this.blockCards.push(blockCard);
+        });
+        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);
         }
-        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) {
+    update(children, parent, childrenContext, preRenderingCount = 0) {
+        if (!this.initialized || this.children.length === 0) {
+            this.initialize(children, parent, childrenContext, preRenderingCount);
             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';
+        if (!this.differ) {
+            throw new Error('Exception: Can not find differ ');
         }
-        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';
+        const outletParent = this.getOutletParent();
+        if (this.preRenderingHTMLElement.length > 0) {
+            const preRenderingElement = [...this.preRenderingHTMLElement];
+            preRenderingElement.forEach((rootNodes, index) => {
+                rootNodes.forEach(rootNode => {
+                    rootNode.style.position = '';
+                    rootNode.style.top = '';
+                });
+            });
+            this.preRenderingHTMLElement = [];
         }
-    }
-    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;
+        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);
                 }
-                if (typeof parsed.top === 'number') {
-                    this.state.top = parsed.top;
+            });
+            diffResult.forEachOperation(record => {
+                // removed
+                if (record.currentIndex === null) {
+                    const view = this.views[record.previousIndex];
+                    const blockCard = this.blockCards[record.previousIndex];
+                    view.destroy();
+                    blockCard?.destroy();
                 }
-                if (typeof parsed.collapsed === 'boolean') {
-                    this.state.collapsed = parsed.collapsed;
+                // 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();
                 }
-                if (typeof parsed.width === 'number') {
-                    this.state.width = parsed.width;
+            });
+            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;
                 }
-                if (typeof parsed.height === 'number') {
-                    this.state.height = parsed.height;
+                else {
+                    updateContext(this.views[_index], context, this.viewContext);
                 }
-            }
+                newContexts.push(context);
+            });
+            this.contexts = newContexts;
         }
-        catch {
-            // ignore storage errors
+        if (preRenderingCount > 0) {
+            for (let i = 0; i < preRenderingCount; i++) {
+                const rootNodes = [...getRootNodes(this.views[i], this.blockCards[i])];
+                rootNodes.forEach(rootNode => {
+                    rootNode.style.top = '-100%';
+                    rootNode.style.position = 'absolute';
+                });
+                this.preRenderingHTMLElement.push(rootNodes);
+            }
         }
     }
-    persistState() {
-        try {
-            this.doc.defaultView?.localStorage?.setItem(VirtualScrollDebugOverlay.storageKey, JSON.stringify(this.state));
+    destroy() {
+        this.children.forEach((element, index) => {
+            if (this.views[index]) {
+                this.views[index].destroy();
+            }
+            if (this.blockCards[index]) {
+                this.blockCards[index].destroy();
+            }
+        });
+        this.children = [];
+        this.views = [];
+        this.blockCards = [];
+        this.contexts = [];
+        this.viewTypes = [];
+        this.initialized = false;
+        this.differ = null;
+    }
+}
+function getContext(index, item, parentPath, childrenContext, viewContext) {
+    if (Element.isElement(item)) {
+        const computedContext = getCommonContext(index, item, parentPath, viewContext, childrenContext);
+        const key = AngularEditor.findKey(viewContext.editor, item);
+        const isInline = viewContext.editor.isInline(item);
+        const isVoid = viewContext.editor.isVoid(item);
+        const elementContext = {
+            element: item,
+            ...computedContext,
+            attributes: {
+                'data-slate-node': 'element',
+                'data-slate-key': key.id
+            },
+            decorate: childrenContext.decorate,
+            readonly: childrenContext.readonly
+        };
+        if (isInline) {
+            elementContext.attributes['data-slate-inline'] = true;
         }
-        catch {
-            // ignore storage errors
+        if (isVoid) {
+            elementContext.attributes['data-slate-void'] = true;
         }
-    }
-    appendLog(type, ...args) {
-        if (!this.logList) {
-            return;
+        // 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 };
         }
     }
-    setScrollTopValue(value) {
-        if (this.distanceInput) {
-            this.distanceInput.value = String(value ?? 0);
-        }
+    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);
+}
 
 // not correctly clipboardData on beforeinput
 const forceOnDOMPaste = IS_SAFARI;
-const isDebug = localStorage.getItem(SLATE_DEBUG_KEY) === 'true';
-const isDebugScrollTop = localStorage.getItem(SLATE_DEBUG_KEY_SCROLL_TOP) === 'true';
 class SlateEditable {
     set virtualScroll(config) {
         this.virtualScrollConfig = config;
         if (isDebugScrollTop) {
-            this.debugLog('log', 'virtualScrollConfig scrollTop:', config.scrollTop);
+            debugLog('log', 'virtualScrollConfig scrollTop:', config.scrollTop);
         }
         IS_ENABLED_VIRTUAL_SCROLL.set(this.editor, config.enabled);
         if (this.isEnabledVirtualScroll()) {
@@ -3239,7 +3249,8 @@ class SlateEditable {
             enabled: false,
             scrollTop: 0,
             viewportHeight: 0,
-            viewportBoundingTop: 0
+            viewportBoundingTop: 0,
+            scrollContainer: null
         };
         this.inViewportChildren = [];
         this.inViewportIndics = [];
@@ -3353,6 +3364,7 @@ class SlateEditable {
     }
     calculateVirtualScrollSelection(selection) {
         if (selection) {
+            const isBlockCardCursor = AngularEditor.isBlockCardLeftCursor(this.editor) || AngularEditor.isBlockCardRightCursor(this.editor);
             const indics = this.inViewportIndics;
             if (indics.length > 0) {
                 const currentVisibleRange = {
@@ -3360,12 +3372,21 @@ class SlateEditable {
                     focus: Editor.end(this.editor, [indics[indics.length - 1]])
                 };
                 const [start, end] = Range.edges(selection);
-                const forwardSelection = { anchor: start, focus: end };
+                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) {
-                        this.debugLog('log', `selection is not in visible range, selection: ${JSON.stringify(selection)}, intersectedSelection: ${JSON.stringify(intersectedSelection)}`);
+                        debugLog('log', `selection is not in visible range, selection: ${JSON.stringify(selection)}, currentVisibleRange: ${JSON.stringify(currentVisibleRange)}, intersectedSelection: ${JSON.stringify(intersectedSelection)}`);
                     }
                     return intersectedSelection;
                 }
@@ -3375,7 +3396,7 @@ class SlateEditable {
         EDITOR_TO_VIRTUAL_SCROLL_SELECTION.set(this.editor, null);
         return selection;
     }
-    toNativeSelection() {
+    toNativeSelection(autoScroll = true) {
         try {
             let { selection } = this.editor;
             if (this.isEnabledVirtualScroll()) {
@@ -3441,13 +3462,23 @@ 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;
+                    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;
             });
@@ -3624,14 +3655,10 @@ class SlateEditable {
                     editorResizeObserverRectWidth = entries[0].contentRect.width;
                     this.keyHeightMap.clear();
                     const remeasureIndics = this.inViewportIndics;
-                    measureHeightByIndics(this.editor, remeasureIndics);
+                    measureHeightByIndics(this.editor, remeasureIndics, true);
                 }
             });
             this.editorResizeObserver.observe(this.elementRef.nativeElement);
-            if (isDebug) {
-                const doc = this.elementRef?.nativeElement?.ownerDocument ?? document;
-                VirtualScrollDebugOverlay.getInstance(doc);
-            }
         }
     }
     setVirtualSpaceHeight(topHeight, bottomHeight) {
@@ -3649,10 +3676,6 @@ class SlateEditable {
         }
         return parseFloat(this.virtualTopHeightElement.style.height.replace('px', ''));
     }
-    debugLog(type, ...args) {
-        const doc = this.elementRef?.nativeElement?.ownerDocument ?? document;
-        VirtualScrollDebugOverlay.log(doc, type, ...args);
-    }
     handlePreRendering() {
         let preRenderingCount = 1;
         const childrenWithPreRendering = [...this.inViewportChildren];
@@ -3670,12 +3693,12 @@ class SlateEditable {
     }
     tryUpdateVirtualViewport() {
         if (isDebug) {
-            this.debugLog('log', 'tryUpdateVirtualViewport');
+            debugLog('log', 'tryUpdateVirtualViewport');
         }
         this.tryUpdateVirtualViewportAnimId && cancelAnimationFrame(this.tryUpdateVirtualViewportAnimId);
         this.tryUpdateVirtualViewportAnimId = requestAnimationFrame(() => {
             if (isDebug) {
-                this.debugLog('log', 'tryUpdateVirtualViewport Anim start');
+                debugLog('log', 'tryUpdateVirtualViewport Anim start');
             }
             let virtualView = this.calculateVirtualViewport();
             let diff = this.diffVirtualViewport(virtualView);
@@ -3695,35 +3718,37 @@ class SlateEditable {
                     if (diff.needAddOnTop) {
                         const remeasureAddedIndics = diff.changedIndexesOfTop;
                         if (isDebug) {
-                            this.debugLog('log', 'needAddOnTop to remeasure heights: ', remeasureAddedIndics);
+                            debugLog('log', 'needAddOnTop to remeasure heights: ', remeasureAddedIndics);
                         }
                         const startIndexBeforeAdd = diff.changedIndexesOfTop[diff.changedIndexesOfTop.length - 1] + 1;
                         const topHeightBeforeAdd = virtualView.accumulatedHeights[startIndexBeforeAdd];
-                        const result = measureHeightByIndics(this.editor, remeasureAddedIndics);
-                        if (result) {
+                        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) {
-                                this.debugLog('log', `update top height since will add element in top（正数减去高度，负数代表增加高度）: ${actualTopHeightAfterAdd - topHeightBeforeAdd}`);
+                                debugLog('log', `update top height since will add element in top（正数减去高度，负数代表增加高度）: ${actualTopHeightAfterAdd - topHeightBeforeAdd}`);
                             }
                         }
                     }
                     if (!AngularEditor.isReadOnly(this.editor) && this.editor.selection) {
-                        this.toNativeSelection();
+                        this.toNativeSelection(false);
                     }
                 }
             }
             else {
                 const topHeight = this.getVirtualTopHeight();
                 if (virtualView.top !== topHeight) {
-                    this.debugLog('log', 'update top height since invalid status（正数减去高度，负数代表增加高度）: ', topHeight - virtualView.top);
+                    if (isDebug) {
+                        debugLog('log', 'update top height since invalid status（正数减去高度，负数代表增加高度）: ', topHeight - virtualView.top);
+                    }
                     this.setVirtualSpaceHeight(virtualView.top);
                 }
             }
             if (isDebug) {
-                this.debugLog('log', 'tryUpdateVirtualViewport Anim end');
+                debugLog('log', 'tryUpdateVirtualViewport Anim end');
             }
         });
     }
@@ -3763,7 +3788,7 @@ class SlateEditable {
                     Math.floor(this.virtualScrollConfig.viewportBoundingTop);
                 EDITOR_TO_BUSINESS_TOP.set(this.editor, businessTop);
                 if (isDebug) {
-                    this.debugLog('log', 'businessTop', businessTop);
+                    debugLog('log', 'businessTop', businessTop);
                 }
             }, 100);
         }
@@ -3875,18 +3900,18 @@ class SlateEditable {
                 }
             }
             if (isDebug) {
-                this.debugLog('log', `====== diffVirtualViewport stage: ${stage} ======`);
-                this.debugLog('log', 'oldIndexesInViewport:', oldIndexesInViewport);
-                this.debugLog('log', 'newIndexesInViewport:', newIndexesInViewport);
-                this.debugLog('log', 'changedIndexesOfTop:', needRemoveOnTop ? '-' : needAddOnTop ? '+' : '-', changedIndexesOfTop, changedIndexesOfTop.map(index => getRealHeightByElement(this.editor, this.editor.children[index], 0)));
-                this.debugLog('log', 'changedIndexesOfBottom:', needAddOnBottom ? '+' : needRemoveOnBottom ? '-' : '+', changedIndexesOfBottom, changedIndexesOfBottom.map(index => getRealHeightByElement(this.editor, this.editor.children[index], 0)));
+                debugLog('log', `====== diffVirtualViewport stage: ${stage} ======`);
+                debugLog('log', 'oldIndexesInViewport:', oldIndexesInViewport);
+                debugLog('log', 'newIndexesInViewport:', newIndexesInViewport);
+                debugLog('log', 'changedIndexesOfTop:', needRemoveOnTop ? '-' : needAddOnTop ? '+' : '-', changedIndexesOfTop, changedIndexesOfTop.map(index => getRealHeightByElement(this.editor, this.editor.children[index], 0)));
+                debugLog('log', 'changedIndexesOfBottom:', needAddOnBottom ? '+' : needRemoveOnBottom ? '-' : '+', changedIndexesOfBottom, changedIndexesOfBottom.map(index => getRealHeightByElement(this.editor, this.editor.children[index], 0)));
                 const needTop = virtualView.heights.slice(0, newIndexesInViewport[0]).reduce((acc, height) => acc + height, 0);
                 const needBottom = virtualView.heights
                     .slice(newIndexesInViewport[newIndexesInViewport.length - 1] + 1)
                     .reduce((acc, height) => acc + height, 0);
-                this.debugLog('log', needTop - parseFloat(this.virtualTopHeightElement.style.height), 'newTopHeight:', needTop, 'prevTopHeight:', parseFloat(this.virtualTopHeightElement.style.height));
-                this.debugLog('log', 'newBottomHeight:', needBottom, 'prevBottomHeight:', parseFloat(this.virtualBottomHeightElement.style.height));
-                this.debugLog('warn', '=========== Dividing line ===========');
+                debugLog('log', needTop - parseFloat(this.virtualTopHeightElement.style.height), 'newTopHeight:', needTop, 'prevTopHeight:', parseFloat(this.virtualTopHeightElement.style.height));
+                debugLog('log', 'newBottomHeight:', needBottom, 'prevBottomHeight:', parseFloat(this.virtualBottomHeightElement.style.height));
+                debugLog('warn', '=========== Dividing line ===========');
             }
             return {
                 isDifferent: true,
@@ -3944,7 +3969,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 {
@@ -5136,5 +5161,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AngularEditor, BaseComponent, BaseElementComponent, BaseElementFlavour, BaseFlavour, BaseLeafComponent, BaseLeafFlavour, BaseTextComponent, BaseTextFlavour, BlockCardRef, DEFAULT_ELEMENT_HEIGHT, DefaultTextFlavour, EDITOR_TO_AFTER_VIEW_INIT_QUEUE, EDITOR_TO_BUSINESS_TOP, EDITOR_TO_VIRTUAL_SCROLL_SELECTION, ELEMENT_KEY_TO_HEIGHTS, ELEMENT_TO_COMPONENT, FAKE_LEFT_BLOCK_CARD_OFFSET, FAKE_RIGHT_BLOCK_CARD_OFFSET, FlavourRef, HAS_BEFORE_INPUT_SUPPORT, IS_ANDROID, IS_APPLE, IS_CHROME, IS_CHROME_LEGACY, IS_EDGE_LEGACY, IS_ENABLED_VIRTUAL_SCROLL, IS_FIREFOX, IS_FIREFOX_LEGACY, IS_IOS, IS_QQBROWSER, IS_SAFARI, IS_UC_MOBILE, IS_WECHATBROWSER, PLACEHOLDER_SYMBOL, SLATE_BLOCK_CARD_CLASS_NAME, SLATE_DEBUG_KEY, SLATE_DEBUG_KEY_SCROLL_TOP, SlateBlockCard, SlateChildrenOutlet, SlateEditable, SlateErrorCode, SlateFragmentAttributeKey, SlateModule, SlateString, VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT, VoidTextFlavour, blobAsString, buildHTMLText, buildHeightsAndAccumulatedHeights, check, completeTable, createClipboardData, createText, createThrottleRAF, defaultScrollSelectionIntoView, fallbackCopyText, getBlockCardByNativeElement, getBusinessTop, getCardTargetAttribute, getClipboardData, getClipboardFromHTMLText, getContentHeight, getDataTransferClipboard, getDataTransferClipboardText, getNavigatorClipboard, getPlainText, getRealHeightByElement, getSelection, getSlateFragmentAttribute, getZeroTextNode, hasAfterContextChange, hasBeforeContextChange, hasBlockCard, hasBlockCardWithNode, hotkeys, isCardCenterByTargetAttr, isCardLeft, isCardLeftByTargetAttr, isCardRightByTargetAttr, isClipboardFile, isClipboardReadSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isComponentType, isDOMText, isDecoratorRangeListEqual, isFlavourType, isInvalidTable, isTemplateRef, isValid, measureHeightByElement, measureHeightByIndics, normalize, scrollToElement, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setNavigatorClipboard, shallowCompare, stripHtml, withAngular };
+export { AngularEditor, BaseComponent, BaseElementComponent, BaseElementFlavour, BaseFlavour, BaseLeafComponent, BaseLeafFlavour, BaseTextComponent, BaseTextFlavour, BlockCardRef, DEFAULT_ELEMENT_HEIGHT, DefaultTextFlavour, EDITOR_TO_AFTER_VIEW_INIT_QUEUE, EDITOR_TO_BUSINESS_TOP, EDITOR_TO_VIRTUAL_SCROLL_SELECTION, ELEMENT_KEY_TO_HEIGHTS, ELEMENT_TO_COMPONENT, FAKE_LEFT_BLOCK_CARD_OFFSET, FAKE_RIGHT_BLOCK_CARD_OFFSET, FlavourRef, HAS_BEFORE_INPUT_SUPPORT, IS_ANDROID, IS_APPLE, IS_CHROME, IS_CHROME_LEGACY, IS_EDGE_LEGACY, IS_ENABLED_VIRTUAL_SCROLL, IS_FIREFOX, IS_FIREFOX_LEGACY, IS_IOS, IS_QQBROWSER, IS_SAFARI, IS_UC_MOBILE, IS_WECHATBROWSER, PLACEHOLDER_SYMBOL, SLATE_BLOCK_CARD_CLASS_NAME, SLATE_DEBUG_KEY, SLATE_DEBUG_KEY_SCROLL_TOP, SlateBlockCard, SlateChildrenOutlet, SlateEditable, SlateErrorCode, SlateFragmentAttributeKey, SlateModule, SlateString, VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT, VoidTextFlavour, blobAsString, buildHTMLText, buildHeightsAndAccumulatedHeights, check, completeTable, createClipboardData, createText, createThrottleRAF, debugLog, defaultScrollSelectionIntoView, fallbackCopyText, getBlockCardByNativeElement, getBusinessTop, getCardTargetAttribute, getClipboardData, getClipboardFromHTMLText, getContentHeight, getDataTransferClipboard, getDataTransferClipboardText, getNavigatorClipboard, getPlainText, getRealHeightByElement, getSelection, getSlateFragmentAttribute, getZeroTextNode, hasAfterContextChange, hasBeforeContextChange, hasBlockCard, hasBlockCardWithNode, hotkeys, isCardCenterByTargetAttr, isCardLeft, isCardLeftByTargetAttr, isCardRightByTargetAttr, isClipboardFile, isClipboardReadSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isComponentType, isDOMText, isDebug, isDebugScrollTop, isDecoratorRangeListEqual, isFlavourType, isInvalidTable, isTemplateRef, isValid, measureHeightByElement, measureHeightByIndics, normalize, scrollToElement, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setNavigatorClipboard, shallowCompare, stripHtml, withAngular };
 //# sourceMappingURL=slate-angular.mjs.map