slate-angular 20.2.0-next.7 → 20.2.0

package/fesm2022/slate-angular.mjs

@@ -353,6 +353,18 @@ const CustomDOMEditor = {
     }
 };
 
+/**
+ * Symbols.
+ */
+const PLACEHOLDER_SYMBOL = Symbol('placeholder');
+/**
+ * Weak map for associating the html element with the component.
+ */
+const ELEMENT_TO_COMPONENT = new WeakMap();
+const IS_ENABLED_VIRTUAL_SCROLL = new WeakMap();
+const EDITOR_TO_VIRTUAL_SCROLL_SELECTION = new WeakMap();
+const EDITOR_TO_AFTER_VIEW_INIT_QUEUE = new WeakMap();
+
 const AngularEditor = {
     ...CustomDOMEditor,
     /**
@@ -424,19 +436,12 @@ const AngularEditor = {
             // FocusedContext is updated to the correct value
             el.focus({ preventScroll: true });
         }
+    },
+    isEnabledVirtualScroll(editor) {
+        return IS_ENABLED_VIRTUAL_SCROLL.get(editor);
     }
 };
 
-/**
- * Symbols.
- */
-const PLACEHOLDER_SYMBOL = Symbol('placeholder');
-/**
- * Weak map for associating the html element with the component.
- */
-const ELEMENT_TO_COMPONENT = new WeakMap();
-const EDITOR_TO_AFTER_VIEW_INIT_QUEUE = new WeakMap();
-
 const IS_IOS = typeof navigator !== 'undefined' &&
     typeof window !== 'undefined' &&
     /iPad|iPhone|iPod/.test(navigator.userAgent) &&
@@ -470,9 +475,9 @@ const HAS_BEFORE_INPUT_SUPPORT = !IS_CHROME_LEGACY &&
     globalThis.InputEvent &&
     // @ts-ignore The `getTargetRanges` property isn't recognized.
     typeof globalThis.InputEvent.prototype.getTargetRanges === 'function';
-const VIRTUAL_SCROLL_DEFAULT_BUFFER_COUNT = 3;
-const VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT = 40;
+const VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT = 30;
 const SLATE_DEBUG_KEY = '__SLATE_DEBUG__';
+const SLATE_DEBUG_KEY_SCROLL_TOP = '__SLATE_DEBUG_SCROLL_TOP__';
 
 /**
  * Hotkey mappings for each platform.
@@ -950,6 +955,587 @@ const fallbackCopyText = async (text) => {
     });
 };
 
+class VirtualScrollDebugOverlay {
+    static { this.storageKey = 'slate_virtual_scroll_debug_overlay_state'; }
+    static { this.minWidth = 320; }
+    static { this.minHeight = 240; }
+    static { this.defaultWidth = 410; }
+    static { this.defaultHeight = 480; }
+    static getInstance(doc) {
+        if (!this.instance) {
+            this.instance = new VirtualScrollDebugOverlay(doc);
+        }
+        this.instance.init();
+        return this.instance;
+    }
+    static log(doc, type, ...args) {
+        this.getInstance(doc).log(type, ...args);
+    }
+    // will trigger selectionchange and clear editor's selection
+    static syncScrollTop(doc, value) {
+        const instance = this.getInstance(doc);
+        instance.setScrollTopValue(value);
+    }
+    constructor(doc) {
+        this.doc = doc;
+        this.state = {
+            left: 16,
+            top: 16,
+            collapsed: false,
+            width: VirtualScrollDebugOverlay.defaultWidth,
+            height: VirtualScrollDebugOverlay.defaultHeight
+        };
+        this.originalConsoleLog = console.log.bind(console);
+        this.originalConsoleWarn = console.warn.bind(console);
+        this.dragOffsetX = 0;
+        this.dragOffsetY = 0;
+        this.isDragging = false;
+        this.isResizing = false;
+        this.resizeStartX = 0;
+        this.resizeStartY = 0;
+        this.resizeStartWidth = 0;
+        this.resizeStartHeight = 0;
+        this.dragMoved = false;
+        this.wasDragged = false;
+        this.onDragging = (event) => {
+            if (!this.isDragging || !this.container) {
+                return;
+            }
+            this.dragMoved = true;
+            const nextLeft = event.clientX - this.dragOffsetX;
+            const nextTop = event.clientY - this.dragOffsetY;
+            this.container.style.left = `${nextLeft}px`;
+            this.container.style.top = `${nextTop}px`;
+            this.container.style.right = 'auto';
+            this.container.style.bottom = 'auto';
+        };
+        this.onDragEnd = () => {
+            if (!this.isDragging) {
+                return;
+            }
+            this.isDragging = false;
+            this.wasDragged = this.dragMoved;
+            this.dragMoved = false;
+            this.doc.removeEventListener('mousemove', this.onDragging);
+            this.doc.removeEventListener('mouseup', this.onDragEnd);
+            if (this.container) {
+                const rect = this.container.getBoundingClientRect();
+                this.state.left = rect.left;
+                this.state.top = rect.top;
+                this.persistState();
+                this.container.style.transition = '';
+            }
+        };
+        this.onResizing = (event) => {
+            if (!this.isResizing || !this.container) {
+                return;
+            }
+            const deltaX = event.clientX - this.resizeStartX;
+            const deltaY = event.clientY - this.resizeStartY;
+            const nextWidth = Math.max(VirtualScrollDebugOverlay.minWidth, this.resizeStartWidth + deltaX);
+            const nextHeight = Math.max(VirtualScrollDebugOverlay.minHeight, this.resizeStartHeight + deltaY);
+            this.state.width = nextWidth;
+            this.state.height = nextHeight;
+            this.applySize();
+        };
+        this.onResizeEnd = () => {
+            if (!this.isResizing) {
+                return;
+            }
+            this.isResizing = false;
+            this.doc.removeEventListener('mousemove', this.onResizing);
+            this.doc.removeEventListener('mouseup', this.onResizeEnd);
+            this.persistState();
+        };
+    }
+    init() {
+        if (!this.container) {
+            this.createContainer();
+        }
+    }
+    log(type, ...args) {
+        this.init();
+        if (type === 'warn') {
+            this.originalConsoleWarn(...args);
+        }
+        else {
+            this.originalConsoleLog(...args);
+        }
+        this.appendLog(type, ...args);
+    }
+    dispose() {
+        this.container?.remove();
+        this.container = undefined;
+        this.contentWrapper = undefined;
+        this.bubble = undefined;
+        this.logList = undefined;
+        this.selectorInput = undefined;
+        this.distanceInput = undefined;
+        this.collapseToggle = undefined;
+        this.resizeHandle = undefined;
+        this.doc.removeEventListener('mousemove', this.onDragging);
+        this.doc.removeEventListener('mouseup', this.onDragEnd);
+        this.doc.removeEventListener('mousemove', this.onResizing);
+        this.doc.removeEventListener('mouseup', this.onResizeEnd);
+        this.isDragging = false;
+        this.isResizing = false;
+    }
+    createContainer() {
+        this.loadState();
+        const doc = this.doc;
+        const container = doc.createElement('div');
+        container.style.position = 'fixed';
+        container.style.right = 'auto';
+        container.style.bottom = 'auto';
+        container.style.boxSizing = 'border-box';
+        container.style.background = 'rgba(17, 24, 39, 0.95)';
+        container.style.color = '#e5e7eb';
+        container.style.fontSize = '12px';
+        container.style.border = '1px solid #1f2937';
+        container.style.borderRadius = '10px';
+        container.style.fontFamily = 'Menlo, Consolas, monospace';
+        container.style.boxShadow = '0 10px 30px rgba(0, 0, 0, 0.35)';
+        container.style.zIndex = '9999';
+        container.style.display = 'flex';
+        container.style.flexDirection = 'column';
+        container.style.gap = '10px';
+        container.style.minWidth = `${VirtualScrollDebugOverlay.minWidth}px`;
+        container.style.minHeight = `${VirtualScrollDebugOverlay.minHeight}px`;
+        container.style.maxHeight = '80vh';
+        container.style.cursor = 'default';
+        container.addEventListener('mousedown', event => {
+            if (this.state.collapsed) {
+                this.startDrag(event);
+            }
+        });
+        const header = doc.createElement('div');
+        header.style.display = 'flex';
+        header.style.alignItems = 'center';
+        header.style.justifyContent = 'space-between';
+        header.style.cursor = 'move';
+        header.addEventListener('mousedown', event => {
+            this.startDrag(event);
+        });
+        const title = doc.createElement('div');
+        title.textContent = 'Virtual Scroll Debug';
+        title.style.fontWeight = '600';
+        title.style.letterSpacing = '0.3px';
+        const actions = doc.createElement('div');
+        actions.style.display = 'flex';
+        actions.style.gap = '6px';
+        const collapseButton = doc.createElement('button');
+        collapseButton.type = 'button';
+        collapseButton.textContent = '折叠';
+        collapseButton.style.background = '#1f2937';
+        collapseButton.style.color = '#e5e7eb';
+        collapseButton.style.border = '1px solid #374151';
+        collapseButton.style.borderRadius = '6px';
+        collapseButton.style.padding = '4px 8px';
+        collapseButton.style.cursor = 'pointer';
+        collapseButton.addEventListener('click', () => {
+            this.setCollapsed(!this.state.collapsed);
+        });
+        const clearButton = doc.createElement('button');
+        clearButton.type = 'button';
+        clearButton.textContent = '清除日志';
+        clearButton.style.background = '#374151';
+        clearButton.style.color = '#e5e7eb';
+        clearButton.style.border = '1px solid #4b5563';
+        clearButton.style.borderRadius = '6px';
+        clearButton.style.padding = '4px 10px';
+        clearButton.style.cursor = 'pointer';
+        clearButton.addEventListener('click', () => {
+            if (this.logList) {
+                this.logList.innerHTML = '';
+            }
+        });
+        actions.appendChild(collapseButton);
+        actions.appendChild(clearButton);
+        header.appendChild(title);
+        header.appendChild(actions);
+        const scrollForm = doc.createElement('div');
+        scrollForm.style.display = 'grid';
+        scrollForm.style.gridTemplateColumns = '1fr 110px 50px';
+        scrollForm.style.gap = '6px';
+        scrollForm.style.alignItems = 'center';
+        const selectorInput = doc.createElement('input');
+        selectorInput.placeholder = '滚动容器 selector';
+        selectorInput.style.padding = '6px 8px';
+        selectorInput.style.borderRadius = '6px';
+        selectorInput.style.border = '1px solid #4b5563';
+        selectorInput.style.background = '#111827';
+        selectorInput.style.color = '#e5e7eb';
+        selectorInput.autocomplete = 'off';
+        const distanceInput = doc.createElement('input');
+        distanceInput.placeholder = '滚动距离(px)';
+        distanceInput.type = 'number';
+        distanceInput.style.padding = '6px 8px';
+        distanceInput.style.borderRadius = '6px';
+        distanceInput.style.border = '1px solid #4b5563';
+        distanceInput.style.background = '#111827';
+        distanceInput.style.color = '#e5e7eb';
+        const scrollButton = doc.createElement('button');
+        scrollButton.type = 'button';
+        scrollButton.textContent = '滚动';
+        scrollButton.style.background = '#10b981';
+        scrollButton.style.color = '#0b1c15';
+        scrollButton.style.border = 'none';
+        scrollButton.style.borderRadius = '6px';
+        scrollButton.style.padding = '6px 10px';
+        scrollButton.style.cursor = 'pointer';
+        scrollButton.addEventListener('click', () => {
+            const selector = selectorInput.value.trim();
+            const distanceValue = Number(distanceInput.value ?? 0);
+            const distance = Number.isFinite(distanceValue) ? distanceValue : 0;
+            if (!selector) {
+                this.log('warn', '请先填写滚动容器 selector');
+                return;
+            }
+            const target = doc.querySelector(selector);
+            if (!target) {
+                this.log('warn', `未找到滚动容器: ${selector}`);
+                return;
+            }
+            if (typeof target.scrollTo === 'function') {
+                target.scrollTo({ top: distance, behavior: 'auto' });
+            }
+            else if (Object.prototype.hasOwnProperty.call(target, 'scrollTop')) {
+                target.scrollTop = distance;
+            }
+            else {
+                this.log('warn', '目标元素不支持滚动:', selector);
+                return;
+            }
+            this.log('log', `已将 ${selector} 滚动到`, distance);
+        });
+        scrollForm.appendChild(selectorInput);
+        scrollForm.appendChild(distanceInput);
+        scrollForm.appendChild(scrollButton);
+        const logList = doc.createElement('div');
+        logList.style.height = '260px';
+        logList.style.overflowY = 'auto';
+        logList.style.background = '#0b1220';
+        logList.style.border = '1px solid #1f2937';
+        logList.style.borderRadius = '8px';
+        logList.style.padding = '8px';
+        logList.style.display = 'flex';
+        logList.style.flexDirection = 'column';
+        logList.style.gap = '6px';
+        logList.style.flex = '1';
+        logList.style.minHeight = '160px';
+        const bubble = doc.createElement('div');
+        bubble.textContent = 'VS';
+        bubble.style.display = 'none';
+        bubble.style.alignItems = 'center';
+        bubble.style.justifyContent = 'center';
+        bubble.style.fontWeight = '700';
+        bubble.style.fontSize = '14px';
+        bubble.style.letterSpacing = '0.5px';
+        bubble.style.width = '100%';
+        bubble.style.height = '100%';
+        bubble.style.userSelect = 'none';
+        bubble.addEventListener('click', () => {
+            if (this.wasDragged) {
+                this.wasDragged = false;
+                return;
+            }
+            this.setCollapsed(false);
+        });
+        const contentWrapper = doc.createElement('div');
+        contentWrapper.style.display = 'flex';
+        contentWrapper.style.flexDirection = 'column';
+        contentWrapper.style.gap = '10px';
+        contentWrapper.style.width = '100%';
+        contentWrapper.style.height = '100%';
+        contentWrapper.appendChild(header);
+        contentWrapper.appendChild(scrollForm);
+        contentWrapper.appendChild(logList);
+        container.appendChild(contentWrapper);
+        container.appendChild(bubble);
+        const resizeHandle = doc.createElement('div');
+        resizeHandle.style.position = 'absolute';
+        resizeHandle.style.right = '6px';
+        resizeHandle.style.bottom = '6px';
+        resizeHandle.style.width = '14px';
+        resizeHandle.style.height = '14px';
+        resizeHandle.style.cursor = 'nwse-resize';
+        resizeHandle.style.borderRight = '2px solid #4b5563';
+        resizeHandle.style.borderBottom = '2px solid #4b5563';
+        resizeHandle.addEventListener('mousedown', event => {
+            this.startResize(event);
+        });
+        container.appendChild(resizeHandle);
+        doc.body.appendChild(container);
+        this.container = container;
+        this.contentWrapper = contentWrapper;
+        this.bubble = bubble;
+        this.logList = logList;
+        this.selectorInput = selectorInput;
+        this.distanceInput = distanceInput;
+        this.collapseToggle = collapseButton;
+        this.resizeHandle = resizeHandle;
+        this.applyState();
+    }
+    startDrag(event) {
+        if (event.button !== 0) {
+            return;
+        }
+        if (!this.container) {
+            return;
+        }
+        const rect = this.container.getBoundingClientRect();
+        this.isDragging = true;
+        this.wasDragged = false;
+        this.dragMoved = false;
+        this.dragOffsetX = event.clientX - rect.left;
+        this.dragOffsetY = event.clientY - rect.top;
+        this.container.style.transition = 'none';
+        this.doc.addEventListener('mousemove', this.onDragging);
+        this.doc.addEventListener('mouseup', this.onDragEnd);
+        if (!this.state.collapsed) {
+            event.preventDefault();
+        }
+    }
+    startResize(event) {
+        if (event.button !== 0 || this.state.collapsed) {
+            return;
+        }
+        if (!this.container) {
+            return;
+        }
+        const rect = this.container.getBoundingClientRect();
+        this.isResizing = true;
+        this.resizeStartX = event.clientX;
+        this.resizeStartY = event.clientY;
+        this.resizeStartWidth = rect.width;
+        this.resizeStartHeight = rect.height;
+        this.doc.addEventListener('mousemove', this.onResizing);
+        this.doc.addEventListener('mouseup', this.onResizeEnd);
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    applyPosition() {
+        if (!this.container) {
+            return;
+        }
+        this.container.style.left = `${this.state.left}px`;
+        this.container.style.top = `${this.state.top}px`;
+    }
+    applySize() {
+        if (!this.container) {
+            return;
+        }
+        const width = Math.max(VirtualScrollDebugOverlay.minWidth, this.state.width || VirtualScrollDebugOverlay.defaultWidth);
+        const height = Math.max(VirtualScrollDebugOverlay.minHeight, this.state.height || VirtualScrollDebugOverlay.defaultHeight);
+        this.state.width = width;
+        this.state.height = height;
+        this.container.style.width = `${width}px`;
+        this.container.style.height = `${height}px`;
+    }
+    applyCollapsedState() {
+        if (!this.container || !this.contentWrapper || !this.bubble || !this.collapseToggle) {
+            return;
+        }
+        if (this.state.collapsed) {
+            this.container.style.width = '36px';
+            this.container.style.height = '36px';
+            this.container.style.minWidth = '';
+            this.container.style.minHeight = '';
+            this.container.style.padding = '0';
+            this.container.style.borderRadius = '50%';
+            this.container.style.display = 'flex';
+            this.container.style.flexDirection = 'row';
+            this.container.style.alignItems = 'center';
+            this.container.style.justifyContent = 'center';
+            this.container.style.cursor = 'move';
+            this.contentWrapper.style.display = 'none';
+            this.bubble.style.display = 'flex';
+            this.collapseToggle.textContent = '展开';
+            this.resizeHandle.style.display = 'none';
+        }
+        else {
+            this.applySize();
+            this.container.style.padding = '12px';
+            this.container.style.borderRadius = '10px';
+            this.container.style.display = 'flex';
+            this.container.style.flexDirection = 'column';
+            this.container.style.gap = '10px';
+            this.container.style.cursor = 'default';
+            this.contentWrapper.style.display = 'flex';
+            this.bubble.style.display = 'none';
+            this.collapseToggle.textContent = '折叠';
+            this.resizeHandle.style.display = 'block';
+        }
+    }
+    setCollapsed(collapsed) {
+        this.state.collapsed = collapsed;
+        this.applyCollapsedState();
+        this.persistState();
+    }
+    applyState() {
+        this.applyPosition();
+        this.applyCollapsedState();
+    }
+    loadState() {
+        try {
+            const raw = this.doc.defaultView?.localStorage?.getItem(VirtualScrollDebugOverlay.storageKey);
+            if (raw) {
+                const parsed = JSON.parse(raw);
+                if (typeof parsed.left === 'number') {
+                    this.state.left = parsed.left;
+                }
+                if (typeof parsed.top === 'number') {
+                    this.state.top = parsed.top;
+                }
+                if (typeof parsed.collapsed === 'boolean') {
+                    this.state.collapsed = parsed.collapsed;
+                }
+                if (typeof parsed.width === 'number') {
+                    this.state.width = parsed.width;
+                }
+                if (typeof parsed.height === 'number') {
+                    this.state.height = parsed.height;
+                }
+            }
+        }
+        catch {
+            // ignore storage errors
+        }
+    }
+    persistState() {
+        try {
+            this.doc.defaultView?.localStorage?.setItem(VirtualScrollDebugOverlay.storageKey, JSON.stringify(this.state));
+        }
+        catch {
+            // ignore storage errors
+        }
+    }
+    appendLog(type, ...args) {
+        if (!this.logList) {
+            return;
+        }
+        const item = this.doc.createElement('div');
+        item.style.display = 'flex';
+        item.style.gap = '6px';
+        item.style.alignItems = 'flex-start';
+        item.style.wordBreak = 'break-all';
+        item.style.color = type === 'warn' ? '#fbbf24' : '#9ca3af';
+        const time = this.doc.createElement('span');
+        time.textContent = new Date().toLocaleTimeString();
+        time.style.color = '#6b7280';
+        time.style.flexShrink = '0';
+        time.style.width = '72px';
+        const text = this.doc.createElement('span');
+        text.textContent = `[${type}] ${args.map(arg => this.formatValue(arg)).join(' ')}`;
+        item.appendChild(time);
+        item.appendChild(text);
+        this.logList.appendChild(item);
+    }
+    formatValue(value) {
+        if (typeof value === 'string') {
+            return value;
+        }
+        try {
+            return JSON.stringify(value);
+        }
+        catch (error) {
+            return String(value);
+        }
+    }
+    setScrollTopValue(value) {
+        if (this.distanceInput) {
+            this.distanceInput.value = String(value ?? 0);
+        }
+    }
+}
+
+const isDebug = localStorage.getItem(SLATE_DEBUG_KEY) === 'true';
+const isDebugScrollTop = localStorage.getItem(SLATE_DEBUG_KEY_SCROLL_TOP) === 'true';
+const ELEMENT_KEY_TO_HEIGHTS = new WeakMap();
+const EDITOR_TO_BUSINESS_TOP = new WeakMap();
+const EDITOR_TO_ROOT_NODE_WIDTH = new WeakMap();
+const debugLog = (type, ...args) => {
+    const doc = document;
+    VirtualScrollDebugOverlay.log(doc, type, ...args);
+};
+const measureHeightByElement = (editor, element) => {
+    const key = AngularEditor.findKey(editor, element);
+    const view = ELEMENT_TO_COMPONENT.get(element);
+    if (!view) {
+        return;
+    }
+    const ret = view.getRealHeight();
+    const heights = ELEMENT_KEY_TO_HEIGHTS.get(editor);
+    heights.set(key.id, ret);
+    return ret;
+};
+const measureHeightByIndics = (editor, indics, force = false) => {
+    let hasChanged = false;
+    indics.forEach((index, i) => {
+        const element = editor.children[index];
+        const preHeight = getRealHeightByElement(editor, element, 0);
+        if (preHeight && !force) {
+            if (isDebug) {
+                const height = measureHeightByElement(editor, element);
+                if (height !== preHeight) {
+                    debugLog('warn', 'measureHeightByElement: height not equal, index: ', index, 'preHeight: ', preHeight, 'height: ', height);
+                }
+            }
+            return;
+        }
+        hasChanged = true;
+        measureHeightByElement(editor, element);
+    });
+    return hasChanged;
+};
+const getBusinessTop = (editor) => {
+    return EDITOR_TO_BUSINESS_TOP.get(editor) ?? 0;
+};
+const getRealHeightByElement = (editor, element, defaultHeight = VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT) => {
+    const isVisible = editor.isVisible(element);
+    if (!isVisible) {
+        return 0;
+    }
+    const heights = ELEMENT_KEY_TO_HEIGHTS.get(editor);
+    const key = AngularEditor.findKey(editor, element);
+    const height = heights?.get(key.id);
+    if (typeof height === 'number') {
+        return height;
+    }
+    if (heights?.has(key.id)) {
+        console.error('getBlockHeight: invalid height value', key.id, height);
+    }
+    return defaultHeight;
+};
+const buildHeightsAndAccumulatedHeights = (editor) => {
+    const children = (editor.children || []);
+    const heights = new Array(children.length);
+    const accumulatedHeights = new Array(children.length + 1);
+    accumulatedHeights[0] = 0;
+    for (let i = 0; i < children.length; i++) {
+        const height = getRealHeightByElement(editor, children[i]);
+        heights[i] = height;
+        accumulatedHeights[i + 1] = accumulatedHeights[i] + height;
+    }
+    return { heights, accumulatedHeights };
+};
+const calculateVirtualTopHeight = (editor, startIndex) => {
+    const { accumulatedHeights } = buildHeightsAndAccumulatedHeights(editor);
+    return accumulatedHeights[startIndex] ?? 0;
+};
+const scrollToElement = (editor, element, scrollTo) => {
+    const children = editor.children;
+    if (!children.length) {
+        return;
+    }
+    const anchorIndex = children.findIndex(item => item === element);
+    if (anchorIndex < 0) {
+        return;
+    }
+    const { accumulatedHeights } = buildHeightsAndAccumulatedHeights(editor);
+    scrollTo((accumulatedHeights[anchorIndex] ?? 0) + getBusinessTop(editor));
+};
+
 const withAngular = (editor, clipboardFormatKey = 'x-slate-fragment') => {
     let e = editor;
     let { apply } = e;
@@ -967,7 +1553,14 @@ const withAngular = (editor, clipboardFormatKey = 'x-slate-fragment') => {
         }
         // Create a fake selection so that we can add a Base64-encoded copy of the
         // fragment to the HTML, to decode on future pastes.
-        const domRange = AngularEditor.toDOMRange(e, selection);
+        let domRange;
+        if (AngularEditor.isEnabledVirtualScroll(e)) {
+            const virtualScrollSelection = EDITOR_TO_VIRTUAL_SCROLL_SELECTION.get(e);
+            if (virtualScrollSelection) {
+                domRange = AngularEditor.toDOMRange(e, virtualScrollSelection);
+            }
+        }
+        domRange = domRange ?? AngularEditor.toDOMRange(e, selection);
         let contents = domRange.cloneContents();
         let attach = contents.childNodes[0];
         // Make sure attach is non-empty, since empty nodes will not get copied.
@@ -1138,6 +1731,9 @@ const withAngular = (editor, clipboardFormatKey = 'x-slate-fragment') => {
     e.selectAll = () => {
         Transforms.select(e, []);
     };
+    e.isVisible = element => {
+        return true;
+    };
     return e;
 };
 
@@ -1798,6 +2394,7 @@ class BaseElementFlavour extends BaseFlavour {
         if (ELEMENT_TO_COMPONENT.get(this.element) === this) {
             ELEMENT_TO_COMPONENT.delete(this.element);
         }
+        this.listRender.destroy();
         this.nativeElement?.remove();
     }
     onContextChange() {
@@ -2194,6 +2791,9 @@ class LeavesRender {
         });
         return { decoratedLeaves, contexts };
     }
+    destroy() {
+        this.views.forEach(view => view.destroy());
+    }
 }
 function getContext$1(index, leafContexts) {
     return leafContexts[index];
@@ -2236,6 +2836,7 @@ class BaseTextFlavour extends BaseFlavour {
             NODE_TO_ELEMENT.delete(this.text);
         }
         ELEMENT_TO_NODE.delete(this.nativeElement);
+        this.leavesRender.destroy();
         this.nativeElement?.remove();
     }
     onContextChange() {
@@ -2270,20 +2871,39 @@ const createText = (text) => {
     return { nativeElement };
 };
 
+const setPreRenderingElementStyle = (editor, rootNode, isClear = false) => {
+    if (isClear) {
+        rootNode.style.top = '';
+        rootNode.style.width = '';
+        rootNode.style.position = '';
+        return;
+    }
+    const preRenderingWidth = EDITOR_TO_ROOT_NODE_WIDTH.get(editor) ?? 0;
+    rootNode.style.top = '-100%';
+    if (preRenderingWidth) {
+        rootNode.style.width = `${preRenderingWidth}px`;
+    }
+    else {
+        rootNode.style.width = '100%';
+    }
+    rootNode.style.position = 'absolute';
+};
 class ListRender {
     constructor(viewContext, viewContainerRef, getOutletParent, getOutletElement) {
         this.viewContext = viewContext;
         this.viewContainerRef = viewContainerRef;
         this.getOutletParent = getOutletParent;
         this.getOutletElement = getOutletElement;
+        this.children = [];
         this.views = [];
         this.blockCards = [];
         this.contexts = [];
         this.viewTypes = [];
         this.differ = null;
         this.initialized = false;
+        this.preRenderingHTMLElement = [];
     }
-    initialize(children, parent, childrenContext) {
+    initialize(children, parent, childrenContext, preRenderingCount = 0) {
         this.initialized = true;
         this.children = children;
         const isRoot = parent === this.viewContext.editor;
@@ -2309,15 +2929,35 @@ class ListRender {
             executeAfterViewInit(this.viewContext.editor);
         }
     }
-    update(children, parent, childrenContext) {
+    update(children, parent, childrenContext, preRenderingCount = 0) {
         if (!this.initialized || this.children.length === 0) {
-            this.initialize(children, parent, childrenContext);
+            this.initialize(children, parent, childrenContext, preRenderingCount);
             return;
         }
         if (!this.differ) {
             throw new Error('Exception: Can not find differ ');
         }
         const outletParent = this.getOutletParent();
+        if (this.preRenderingHTMLElement.length > 0) {
+            const preRenderingElement = [...this.preRenderingHTMLElement];
+            preRenderingElement.forEach((rootNodes, index) => {
+                const slateElement = this.children[index];
+                if (slateElement && children.indexOf(slateElement) >= 0) {
+                    rootNodes.forEach(rootNode => {
+                        setPreRenderingElementStyle(this.viewContext.editor, rootNode, true);
+                    });
+                    if (isDebug) {
+                        debugLog('log', 'preRenderingHTMLElement index: ', this.viewContext.editor.children.indexOf(this.children[index]), 'is clear true');
+                    }
+                }
+                else {
+                    if (isDebug) {
+                        debugLog('log', 'preRenderingHTMLElement index: ', this.viewContext.editor.children.indexOf(this.children[index]), 'do not clear since it would be removed soon');
+                    }
+                }
+            });
+            this.preRenderingHTMLElement = [];
+        }
         const diffResult = this.differ.diff(children);
         const parentPath = AngularEditor.findPath(this.viewContext.editor, parent);
         const isRoot = parent === this.viewContext.editor;
@@ -2415,6 +3055,29 @@ class ListRender {
             });
             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 => {
+                    setPreRenderingElementStyle(this.viewContext.editor, rootNode);
+                });
+                this.preRenderingHTMLElement.push(rootNodes);
+                if (isDebug) {
+                    debugLog('log', 'preRenderingHTMLElement index: ', this.viewContext.editor.children.indexOf(children[i]));
+                }
+            }
+        }
+        if (isDebug) {
+            for (let i = 0; i < children.length; i++) {
+                const rootNodes = [...getRootNodes(this.views[i], this.blockCards[i])];
+                const index = this.viewContext.editor.children.indexOf(children[i]);
+                const height = getRealHeightByElement(this.viewContext.editor, children[i]);
+                rootNodes.forEach(rootNode => {
+                    rootNode.setAttribute('debug-index', index.toString());
+                    rootNode.setAttribute('debug-height', height.toString());
+                });
+            }
+        }
     }
     destroy() {
         this.children.forEach((element, index) => {
@@ -2425,6 +3088,7 @@ class ListRender {
                 this.blockCards[index].destroy();
             }
         });
+        this.children = [];
         this.views = [];
         this.blockCards = [];
         this.contexts = [];
@@ -2567,39 +3231,18 @@ function executeAfterViewInit(editor) {
     clearAfterViewInitQueue(editor);
 }
 
-const JUST_NOW_UPDATED_VIRTUAL_VIEW = new WeakMap();
 // not correctly clipboardData on beforeinput
 const forceOnDOMPaste = IS_SAFARI;
-const isDebug = localStorage.getItem(SLATE_DEBUG_KEY) === 'true';
 class SlateEditable {
     set virtualScroll(config) {
-        this.virtualConfig = config;
-        this.refreshVirtualViewAnimId && cancelAnimationFrame(this.refreshVirtualViewAnimId);
-        this.refreshVirtualViewAnimId = requestAnimationFrame(() => {
-            let virtualView = this.refreshVirtualView();
-            let diff = this.diffVirtualView(virtualView);
-            if (!diff.isDiff) {
-                return;
-            }
-            if (diff.isMissingTop) {
-                const result = this.remeasureHeightByIndics(diff.diffTopRenderedIndexes);
-                if (result) {
-                    virtualView = this.refreshVirtualView();
-                    diff = this.diffVirtualView(virtualView, 'second');
-                    if (!diff.isDiff) {
-                        return;
-                    }
-                }
-            }
-            this.applyVirtualView(virtualView);
-            if (this.listRender.initialized) {
-                this.listRender.update(virtualView.renderedChildren, this.editor, this.context);
-                if (!AngularEditor.isReadOnly(this.editor) && this.editor.selection) {
-                    this.toNativeSelection();
-                }
-            }
-            this.scheduleMeasureVisibleHeights();
-        });
+        this.virtualScrollConfig = config;
+        if (isDebugScrollTop) {
+            debugLog('log', 'virtualScrollConfig scrollTop:', config.scrollTop);
+        }
+        IS_ENABLED_VIRTUAL_SCROLL.set(this.editor, config.enabled);
+        if (this.isEnabledVirtualScroll()) {
+            this.tryUpdateVirtualViewport();
+        }
     }
     get hasBeforeInputSupport() {
         return HAS_BEFORE_INPUT_SUPPORT;
@@ -2644,16 +3287,16 @@ class SlateEditable {
                 return null;
             }
         };
-        this.virtualConfig = {
+        this.virtualScrollConfig = {
             enabled: false,
             scrollTop: 0,
-            viewportHeight: 0
+            viewportHeight: 0,
+            viewportBoundingTop: 0,
+            scrollContainer: null
         };
-        this.renderedChildren = [];
-        this.virtualVisibleIndexes = new Set();
-        this.measuredHeights = new Map();
-        // the height from scroll container top to editor top height element
-        this.businessHeight = 0;
+        this.inViewportChildren = [];
+        this.inViewportIndics = [];
+        this.keyHeightMap = new Map();
         this.virtualScrollInitialized = false;
     }
     ngOnInit() {
@@ -2665,6 +3308,7 @@ class SlateEditable {
         NODE_TO_ELEMENT.set(this.editor, this.elementRef.nativeElement);
         ELEMENT_TO_NODE.set(this.elementRef.nativeElement, this.editor);
         IS_READ_ONLY.set(this.editor, this.readonly);
+        ELEMENT_KEY_TO_HEIGHTS.set(this.editor, this.keyHeightMap);
         EDITOR_TO_ON_CHANGE.set(this.editor, () => {
             this.ngZone.run(() => {
                 this.onChange();
@@ -2678,7 +3322,7 @@ class SlateEditable {
         // add browser class
         let browserClass = IS_FIREFOX ? 'firefox' : IS_SAFARI ? 'safari' : '';
         browserClass && this.elementRef.nativeElement.classList.add(browserClass);
-        this.initializeVirtualScrolling();
+        this.initializeVirtualScroll();
         this.listRender = new ListRender(this.viewContext, this.viewContainerRef, this.getOutletParent, this.getOutletElement);
     }
     ngOnChanges(simpleChanges) {
@@ -2710,16 +3354,29 @@ class SlateEditable {
         if (value && value.length) {
             this.editor.children = value;
             this.initializeContext();
-            const virtualView = this.refreshVirtualView();
-            this.applyVirtualView(virtualView);
-            const childrenForRender = virtualView.renderedChildren;
-            if (!this.listRender.initialized) {
-                this.listRender.initialize(childrenForRender, this.editor, this.context);
+            if (this.isEnabledVirtualScroll()) {
+                const virtualView = this.calculateVirtualViewport();
+                this.applyVirtualView(virtualView);
+                const childrenForRender = virtualView.inViewportChildren;
+                if (isDebug) {
+                    debugLog('log', 'writeValue calculate: ', virtualView.inViewportIndics, 'initialized: ', this.listRender.initialized);
+                }
+                if (!this.listRender.initialized) {
+                    this.listRender.initialize(childrenForRender, this.editor, this.context);
+                }
+                else {
+                    const { preRenderingCount, childrenWithPreRendering } = this.handlePreRendering();
+                    this.listRender.update(childrenWithPreRendering, this.editor, this.context, preRenderingCount);
+                }
             }
             else {
-                this.listRender.update(childrenForRender, this.editor, this.context);
+                if (!this.listRender.initialized) {
+                    this.listRender.initialize(this.editor.children, this.editor, this.context);
+                }
+                else {
+                    this.listRender.update(this.editor.children, this.editor, this.context);
+                }
             }
-            this.scheduleMeasureVisibleHeights();
             this.cdr.markForCheck();
         }
     }
@@ -2750,26 +3407,45 @@ class SlateEditable {
             this.addEventListener(event.name, () => { });
         });
     }
-    toNativeSelection() {
-        try {
-            let { selection } = this.editor;
-            if (this.virtualConfig?.enabled && selection) {
-                const indics = Array.from(this.virtualVisibleIndexes.values());
-                if (indics.length > 0) {
-                    const currentVisibleRange = {
-                        anchor: Editor.start(this.editor, [indics[0]]),
-                        focus: Editor.end(this.editor, [indics[indics.length - 1]])
-                    };
-                    const [start, end] = Range.edges(selection);
-                    const forwardSelection = { anchor: start, focus: end };
-                    const intersectedSelection = Range.intersection(forwardSelection, currentVisibleRange);
-                    if (!intersectedSelection || !Range.equals(intersectedSelection, forwardSelection)) {
-                        selection = intersectedSelection;
-                        if (isDebug) {
-                            console.log(`selection is not in visible range, selection: ${JSON.stringify(selection)}, intersectedSelection: ${JSON.stringify(intersectedSelection)}`);
-                        }
+    calculateVirtualScrollSelection(selection) {
+        if (selection) {
+            const isBlockCardCursor = AngularEditor.isBlockCardLeftCursor(this.editor) || AngularEditor.isBlockCardRightCursor(this.editor);
+            const indics = this.inViewportIndics;
+            if (indics.length > 0) {
+                const currentVisibleRange = {
+                    anchor: Editor.start(this.editor, [indics[0]]),
+                    focus: Editor.end(this.editor, [indics[indics.length - 1]])
+                };
+                const [start, end] = Range.edges(selection);
+                let forwardSelection = { anchor: start, focus: end };
+                if (!isBlockCardCursor) {
+                    forwardSelection = { anchor: start, focus: end };
+                }
+                else {
+                    forwardSelection = { anchor: { path: start.path, offset: 0 }, focus: { path: end.path, offset: 0 } };
+                }
+                const intersectedSelection = Range.intersection(forwardSelection, currentVisibleRange);
+                if (intersectedSelection && isBlockCardCursor) {
+                    return selection;
+                }
+                EDITOR_TO_VIRTUAL_SCROLL_SELECTION.set(this.editor, intersectedSelection);
+                if (!intersectedSelection || !Range.equals(intersectedSelection, forwardSelection)) {
+                    if (isDebug) {
+                        debugLog('log', `selection is not in visible range, selection: ${JSON.stringify(selection)}, currentVisibleRange: ${JSON.stringify(currentVisibleRange)}, intersectedSelection: ${JSON.stringify(intersectedSelection)}`);
                     }
+                    return intersectedSelection;
                 }
+                return selection;
+            }
+        }
+        EDITOR_TO_VIRTUAL_SCROLL_SELECTION.set(this.editor, null);
+        return selection;
+    }
+    toNativeSelection(autoScroll = true) {
+        try {
+            let { selection } = this.editor;
+            if (this.isEnabledVirtualScroll()) {
+                selection = this.calculateVirtualScrollSelection(selection);
             }
             const root = AngularEditor.findDocumentOrShadowRoot(this.editor);
             const { activeElement } = root;
@@ -2831,13 +3507,24 @@ class SlateEditable {
                 domSelection.removeAllRanges();
             }
             setTimeout(() => {
-                // handle scrolling in setTimeout because of
-                // dom should not have updated immediately after listRender's updating
-                newDomRange && this.scrollSelectionIntoView(this.editor, newDomRange);
-                // COMPAT: In Firefox, it's not enough to create a range, you also need
-                // to focus the contenteditable element too. (2016/11/16)
-                if (newDomRange && IS_FIREFOX) {
-                    el.focus();
+                if (this.isEnabledVirtualScroll() &&
+                    !selection &&
+                    this.editor.selection &&
+                    autoScroll &&
+                    this.virtualScrollConfig.scrollContainer) {
+                    this.virtualScrollConfig.scrollContainer.scrollTop = this.virtualScrollConfig.scrollContainer.scrollTop + 100;
+                    this.isUpdatingSelection = false;
+                    return;
+                }
+                else {
+                    // handle scrolling in setTimeout because of
+                    // dom should not have updated immediately after listRender's updating
+                    newDomRange && autoScroll && this.scrollSelectionIntoView(this.editor, newDomRange);
+                    // COMPAT: In Firefox, it's not enough to create a range, you also need
+                    // to focus the contenteditable element too. (2016/11/16)
+                    if (newDomRange && IS_FIREFOX) {
+                        el.focus();
+                    }
                 }
                 this.isUpdatingSelection = false;
             });
@@ -2858,10 +3545,12 @@ class SlateEditable {
     ngDoCheck() { }
     forceRender() {
         this.updateContext();
-        const virtualView = this.refreshVirtualView();
-        this.applyVirtualView(virtualView);
-        this.listRender.update(virtualView.renderedChildren, this.editor, this.context);
-        this.scheduleMeasureVisibleHeights();
+        if (this.isEnabledVirtualScroll()) {
+            this.updateListRenderAndRemeasureHeights();
+        }
+        else {
+            this.listRender.update(this.editor.children, this.editor, this.context);
+        }
         // repair collaborative editing when Chinese input is interrupted by other users' cursors
         // when the DOMElement where the selection is located is removed
         // the compositionupdate and compositionend events will no longer be fired
@@ -2900,10 +3589,29 @@ class SlateEditable {
     render() {
         const changed = this.updateContext();
         if (changed) {
-            const virtualView = this.refreshVirtualView();
-            this.applyVirtualView(virtualView);
-            this.listRender.update(virtualView.renderedChildren, this.editor, this.context);
-            this.scheduleMeasureVisibleHeights();
+            if (this.isEnabledVirtualScroll()) {
+                this.updateListRenderAndRemeasureHeights();
+            }
+            else {
+                this.listRender.update(this.editor.children, this.editor, this.context);
+            }
+        }
+    }
+    updateListRenderAndRemeasureHeights() {
+        const virtualView = this.calculateVirtualViewport();
+        const oldInViewportChildren = this.inViewportChildren;
+        this.applyVirtualView(virtualView);
+        const { preRenderingCount, childrenWithPreRendering } = this.handlePreRendering();
+        this.listRender.update(childrenWithPreRendering, this.editor, this.context, preRenderingCount);
+        // 新增或者修改的才需要重算，计算出这个结果
+        const remeasureIndics = [];
+        this.inViewportChildren.forEach((child, index) => {
+            if (oldInViewportChildren.indexOf(child) === -1) {
+                remeasureIndics.push(this.inViewportIndics[index]);
+            }
+        });
+        if (isDebug && remeasureIndics.length > 0) {
+            console.log('remeasure height by indics: ', remeasureIndics);
         }
     }
     updateContext() {
@@ -2966,14 +3674,14 @@ class SlateEditable {
         decorations.push(...placeholderDecorations);
         return decorations;
     }
-    shouldUseVirtual() {
-        return !!(this.virtualConfig && this.virtualConfig.enabled);
+    isEnabledVirtualScroll() {
+        return !!(this.virtualScrollConfig && this.virtualScrollConfig.enabled);
     }
-    initializeVirtualScrolling() {
+    initializeVirtualScroll() {
         if (this.virtualScrollInitialized) {
             return;
         }
-        if (this.virtualConfig && this.virtualConfig.enabled) {
+        if (this.isEnabledVirtualScroll()) {
             this.virtualScrollInitialized = true;
             this.virtualTopHeightElement = document.createElement('div');
             this.virtualTopHeightElement.classList.add('virtual-top-height');
@@ -2986,140 +3694,256 @@ class SlateEditable {
             this.elementRef.nativeElement.appendChild(this.virtualTopHeightElement);
             this.elementRef.nativeElement.appendChild(this.virtualCenterOutlet);
             this.elementRef.nativeElement.appendChild(this.virtualBottomHeightElement);
-            this.businessHeight = this.virtualTopHeightElement.getBoundingClientRect()?.top ?? 0;
+            let editorResizeObserverRectWidth = this.elementRef.nativeElement.getBoundingClientRect().width;
+            EDITOR_TO_ROOT_NODE_WIDTH.set(this.editor, this.virtualTopHeightElement.getBoundingClientRect().width);
+            this.editorResizeObserver = new ResizeObserver(entries => {
+                if (entries.length > 0 && entries[0].contentRect.width !== editorResizeObserverRectWidth) {
+                    editorResizeObserverRectWidth = entries[0].contentRect.width;
+                    this.keyHeightMap.clear();
+                    const remeasureIndics = this.inViewportIndics;
+                    measureHeightByIndics(this.editor, remeasureIndics, true);
+                    EDITOR_TO_ROOT_NODE_WIDTH.set(this.editor, this.virtualTopHeightElement.getBoundingClientRect().width);
+                    if (isDebug) {
+                        debugLog('log', 'editorResizeObserverRectWidth: ', editorResizeObserverRectWidth, 'EDITOR_TO_ROOT_NODE_WIDTH: ', EDITOR_TO_ROOT_NODE_WIDTH.get(this.editor));
+                    }
+                }
+            });
+            this.editorResizeObserver.observe(this.elementRef.nativeElement);
         }
     }
-    changeVirtualHeight(topHeight, bottomHeight) {
+    setVirtualSpaceHeight(topHeight, bottomHeight) {
         if (!this.virtualScrollInitialized) {
             return;
         }
         this.virtualTopHeightElement.style.height = `${topHeight}px`;
-        this.virtualBottomHeightElement.style.height = `${bottomHeight}px`;
+        if (bottomHeight !== undefined) {
+            this.virtualBottomHeightElement.style.height = `${bottomHeight}px`;
+        }
+    }
+    getActualVirtualTopHeight() {
+        if (!this.virtualScrollInitialized) {
+            return 0;
+        }
+        return parseFloat(this.virtualTopHeightElement.style.height.replace('px', ''));
+    }
+    handlePreRendering() {
+        let preRenderingCount = 1;
+        const childrenWithPreRendering = [...this.inViewportChildren];
+        if (this.inViewportIndics[0] !== 0) {
+            childrenWithPreRendering.unshift(this.editor.children[this.inViewportIndics[0] - 1]);
+        }
+        else {
+            preRenderingCount = 0;
+        }
+        const lastIndex = this.inViewportIndics[this.inViewportIndics.length - 1];
+        if (lastIndex !== this.editor.children.length - 1) {
+            childrenWithPreRendering.push(this.editor.children[lastIndex + 1]);
+        }
+        return { preRenderingCount, childrenWithPreRendering };
+    }
+    tryUpdateVirtualViewport() {
+        if (isDebug) {
+            debugLog('log', 'tryUpdateVirtualViewport');
+        }
+        if (this.inViewportIndics.length > 0) {
+            const topHeight = this.getActualVirtualTopHeight();
+            const refreshVirtualTopHeight = calculateVirtualTopHeight(this.editor, this.inViewportIndics[0]);
+            if (topHeight !== refreshVirtualTopHeight) {
+                if (isDebug) {
+                    debugLog('log', 'update top height since dirty state（正数减去高度，负数代表增加高度）: ', topHeight - refreshVirtualTopHeight);
+                }
+                this.setVirtualSpaceHeight(refreshVirtualTopHeight);
+                return;
+            }
+        }
+        this.tryUpdateVirtualViewportAnimId && cancelAnimationFrame(this.tryUpdateVirtualViewportAnimId);
+        this.tryUpdateVirtualViewportAnimId = requestAnimationFrame(() => {
+            if (isDebug) {
+                debugLog('log', 'tryUpdateVirtualViewport Anim start');
+            }
+            let virtualView = this.calculateVirtualViewport();
+            let diff = this.diffVirtualViewport(virtualView);
+            if (diff.isDifferent && diff.needRemoveOnTop) {
+                const remeasureIndics = diff.changedIndexesOfTop;
+                const changed = measureHeightByIndics(this.editor, remeasureIndics);
+                if (changed) {
+                    virtualView = this.calculateVirtualViewport();
+                    diff = this.diffVirtualViewport(virtualView, 'second');
+                }
+            }
+            if (diff.isDifferent) {
+                this.applyVirtualView(virtualView);
+                if (this.listRender.initialized) {
+                    const { preRenderingCount, childrenWithPreRendering } = this.handlePreRendering();
+                    this.listRender.update(childrenWithPreRendering, this.editor, this.context, preRenderingCount);
+                    if (diff.needAddOnTop) {
+                        const remeasureAddedIndics = diff.changedIndexesOfTop;
+                        if (isDebug) {
+                            debugLog('log', 'needAddOnTop to remeasure heights: ', remeasureAddedIndics);
+                        }
+                        const startIndexBeforeAdd = diff.changedIndexesOfTop[diff.changedIndexesOfTop.length - 1] + 1;
+                        const topHeightBeforeAdd = virtualView.accumulatedHeights[startIndexBeforeAdd];
+                        const changed = measureHeightByIndics(this.editor, remeasureAddedIndics);
+                        if (changed) {
+                            const newHeights = buildHeightsAndAccumulatedHeights(this.editor);
+                            const actualTopHeightAfterAdd = newHeights.accumulatedHeights[startIndexBeforeAdd];
+                            const newTopHeight = virtualView.top - (actualTopHeightAfterAdd - topHeightBeforeAdd);
+                            this.setVirtualSpaceHeight(newTopHeight);
+                            if (isDebug) {
+                                debugLog('log', `update top height since will add element in top（正数减去高度，负数代表增加高度）: ${actualTopHeightAfterAdd - topHeightBeforeAdd}`);
+                            }
+                        }
+                    }
+                    if (!AngularEditor.isReadOnly(this.editor) && this.editor.selection) {
+                        this.toNativeSelection(false);
+                    }
+                }
+            }
+            if (isDebug) {
+                debugLog('log', 'tryUpdateVirtualViewport Anim end');
+            }
+        });
     }
-    refreshVirtualView() {
+    calculateVirtualViewport() {
         const children = (this.editor.children || []);
-        if (!children.length || !this.shouldUseVirtual()) {
+        if (!children.length || !this.isEnabledVirtualScroll()) {
             return {
-                renderedChildren: children,
-                visibleIndexes: new Set(),
+                inViewportChildren: children,
+                inViewportIndics: [],
                 top: 0,
                 bottom: 0,
                 heights: []
             };
         }
-        const scrollTop = this.virtualConfig.scrollTop;
-        const viewportHeight = this.virtualConfig.viewportHeight ?? 0;
+        const scrollTop = this.virtualScrollConfig.scrollTop;
+        const viewportHeight = this.virtualScrollConfig.viewportHeight ?? 0;
         if (!viewportHeight) {
             return {
-                renderedChildren: [],
-                visibleIndexes: new Set(),
+                inViewportChildren: [],
+                inViewportIndics: [],
                 top: 0,
                 bottom: 0,
                 heights: []
             };
         }
         const elementLength = children.length;
-        const adjustedScrollTop = Math.max(0, scrollTop - this.businessHeight);
-        const heights = children.map((_, idx) => this.getBlockHeight(idx));
-        const accumulatedHeights = this.buildAccumulatedHeight(heights);
+        if (!EDITOR_TO_BUSINESS_TOP.has(this.editor)) {
+            EDITOR_TO_BUSINESS_TOP.set(this.editor, 0);
+            setTimeout(() => {
+                const virtualTopBoundingTop = this.virtualTopHeightElement.getBoundingClientRect()?.top ?? 0;
+                const businessTop = Math.ceil(virtualTopBoundingTop) +
+                    Math.ceil(this.virtualScrollConfig.scrollTop) -
+                    Math.floor(this.virtualScrollConfig.viewportBoundingTop);
+                EDITOR_TO_BUSINESS_TOP.set(this.editor, businessTop);
+                if (isDebug) {
+                    debugLog('log', 'businessTop', businessTop);
+                }
+            }, 100);
+        }
+        const adjustedScrollTop = Math.max(0, scrollTop - getBusinessTop(this.editor));
+        const { heights, accumulatedHeights } = buildHeightsAndAccumulatedHeights(this.editor);
         const totalHeight = accumulatedHeights[elementLength];
         const maxScrollTop = Math.max(0, totalHeight - viewportHeight);
         const limitedScrollTop = Math.min(adjustedScrollTop, maxScrollTop);
-        const viewBottom = limitedScrollTop + viewportHeight + this.businessHeight;
+        const viewBottom = limitedScrollTop + viewportHeight;
         let accumulatedOffset = 0;
-        let visibleStartIndex = -1;
+        let inViewportStartIndex = -1;
         const visible = [];
-        const visibleIndexes = [];
+        const inViewportIndics = [];
         for (let i = 0; i < elementLength && accumulatedOffset < viewBottom; i++) {
             const currentHeight = heights[i];
             const nextOffset = accumulatedOffset + currentHeight;
             // 可视区域有交集，加入渲染
             if (nextOffset > limitedScrollTop && accumulatedOffset < viewBottom) {
-                if (visibleStartIndex === -1)
-                    visibleStartIndex = i; // 第一个相交起始位置
+                if (inViewportStartIndex === -1)
+                    inViewportStartIndex = i; // 第一个相交起始位置
                 visible.push(children[i]);
-                visibleIndexes.push(i);
+                inViewportIndics.push(i);
             }
             accumulatedOffset = nextOffset;
         }
-        if (visibleStartIndex === -1 && elementLength) {
-            visibleStartIndex = elementLength - 1;
-            visible.push(children[visibleStartIndex]);
-            visibleIndexes.push(visibleStartIndex);
+        if (inViewportStartIndex === -1 && elementLength) {
+            inViewportStartIndex = elementLength - 1;
+            visible.push(children[inViewportStartIndex]);
+            inViewportIndics.push(inViewportStartIndex);
         }
-        const visibleEndIndex = visibleStartIndex === -1 ? elementLength - 1 : (visibleIndexes[visibleIndexes.length - 1] ?? visibleStartIndex);
-        const top = visibleStartIndex === -1 ? 0 : accumulatedHeights[visibleStartIndex];
-        const bottom = totalHeight - accumulatedHeights[visibleEndIndex + 1];
+        const inViewportEndIndex = inViewportStartIndex === -1 ? elementLength - 1 : (inViewportIndics[inViewportIndics.length - 1] ?? inViewportStartIndex);
+        const top = inViewportStartIndex === -1 ? 0 : accumulatedHeights[inViewportStartIndex];
+        const bottom = totalHeight - accumulatedHeights[inViewportEndIndex + 1];
         return {
-            renderedChildren: visible.length ? visible : children,
-            visibleIndexes: new Set(visibleIndexes),
+            inViewportChildren: visible.length ? visible : children,
+            inViewportIndics,
             top,
             bottom,
-            heights
+            heights,
+            accumulatedHeights
         };
     }
     applyVirtualView(virtualView) {
-        this.renderedChildren = virtualView.renderedChildren;
-        this.changeVirtualHeight(virtualView.top, virtualView.bottom);
-        this.virtualVisibleIndexes = virtualView.visibleIndexes;
+        this.inViewportChildren = virtualView.inViewportChildren;
+        this.setVirtualSpaceHeight(virtualView.top, virtualView.bottom);
+        this.inViewportIndics = virtualView.inViewportIndics;
     }
-    diffVirtualView(virtualView, stage = 'first') {
-        if (!this.renderedChildren.length) {
+    diffVirtualViewport(virtualView, stage = 'first') {
+        if (!this.inViewportChildren.length) {
+            if (isDebug) {
+                debugLog('log', 'diffVirtualViewport', stage, 'empty inViewportChildren', virtualView.inViewportIndics);
+            }
             return {
-                isDiff: true,
-                diffTopRenderedIndexes: [],
-                diffBottomRenderedIndexes: []
+                isDifferent: true,
+                changedIndexesOfTop: [],
+                changedIndexesOfBottom: []
             };
         }
-        const oldVisibleIndexes = [...this.virtualVisibleIndexes];
-        const newVisibleIndexes = [...virtualView.visibleIndexes];
-        const firstNewIndex = newVisibleIndexes[0];
-        const lastNewIndex = newVisibleIndexes[newVisibleIndexes.length - 1];
-        const firstOldIndex = oldVisibleIndexes[0];
-        const lastOldIndex = oldVisibleIndexes[oldVisibleIndexes.length - 1];
+        const oldIndexesInViewport = [...this.inViewportIndics];
+        const newIndexesInViewport = [...virtualView.inViewportIndics];
+        const firstNewIndex = newIndexesInViewport[0];
+        const lastNewIndex = newIndexesInViewport[newIndexesInViewport.length - 1];
+        const firstOldIndex = oldIndexesInViewport[0];
+        const lastOldIndex = oldIndexesInViewport[oldIndexesInViewport.length - 1];
         if (firstNewIndex !== firstOldIndex || lastNewIndex !== lastOldIndex) {
-            const diffTopRenderedIndexes = [];
-            const diffBottomRenderedIndexes = [];
-            const isMissingTop = firstNewIndex !== firstOldIndex && firstNewIndex > firstOldIndex;
-            const isAddedTop = firstNewIndex !== firstOldIndex && firstNewIndex < firstOldIndex;
-            const isMissingBottom = lastNewIndex !== lastOldIndex && lastOldIndex > lastNewIndex;
-            const isAddedBottom = lastNewIndex !== lastOldIndex && lastOldIndex < lastNewIndex;
-            if (isMissingTop || isAddedBottom) {
+            const changedIndexesOfTop = [];
+            const changedIndexesOfBottom = [];
+            const needRemoveOnTop = firstNewIndex !== firstOldIndex && firstNewIndex > firstOldIndex;
+            const needAddOnTop = firstNewIndex !== firstOldIndex && firstNewIndex < firstOldIndex;
+            const needRemoveOnBottom = lastNewIndex !== lastOldIndex && lastOldIndex > lastNewIndex;
+            const needAddOnBottom = lastNewIndex !== lastOldIndex && lastOldIndex < lastNewIndex;
+            if (needRemoveOnTop || needAddOnBottom) {
                 // 向下
-                for (let index = 0; index < oldVisibleIndexes.length; index++) {
-                    const element = oldVisibleIndexes[index];
-                    if (!newVisibleIndexes.includes(element)) {
-                        diffTopRenderedIndexes.push(element);
+                for (let index = 0; index < oldIndexesInViewport.length; index++) {
+                    const element = oldIndexesInViewport[index];
+                    if (!newIndexesInViewport.includes(element)) {
+                        changedIndexesOfTop.push(element);
                     }
                     else {
                         break;
                     }
                 }
-                for (let index = newVisibleIndexes.length - 1; index >= 0; index--) {
-                    const element = newVisibleIndexes[index];
-                    if (!oldVisibleIndexes.includes(element)) {
-                        diffBottomRenderedIndexes.push(element);
+                for (let index = newIndexesInViewport.length - 1; index >= 0; index--) {
+                    const element = newIndexesInViewport[index];
+                    if (!oldIndexesInViewport.includes(element)) {
+                        changedIndexesOfBottom.push(element);
                     }
                     else {
                         break;
                     }
                 }
             }
-            else if (isAddedTop || isMissingBottom) {
+            else if (needAddOnTop || needRemoveOnBottom) {
                 // 向上
-                for (let index = 0; index < newVisibleIndexes.length; index++) {
-                    const element = newVisibleIndexes[index];
-                    if (!oldVisibleIndexes.includes(element)) {
-                        diffTopRenderedIndexes.push(element);
+                for (let index = 0; index < newIndexesInViewport.length; index++) {
+                    const element = newIndexesInViewport[index];
+                    if (!oldIndexesInViewport.includes(element)) {
+                        changedIndexesOfTop.push(element);
                     }
                     else {
                         break;
                     }
                 }
-                for (let index = oldVisibleIndexes.length - 1; index >= 0; index--) {
-                    const element = oldVisibleIndexes[index];
-                    if (!newVisibleIndexes.includes(element)) {
-                        diffBottomRenderedIndexes.push(element);
+                for (let index = oldIndexesInViewport.length - 1; index >= 0; index--) {
+                    const element = oldIndexesInViewport[index];
+                    if (!newIndexesInViewport.includes(element)) {
+                        changedIndexesOfBottom.push(element);
                     }
                     else {
                         break;
@@ -3127,125 +3951,35 @@ class SlateEditable {
                 }
             }
             if (isDebug) {
-                console.log(`====== diffVirtualView stage: ${stage} ======`);
-                console.log('oldVisibleIndexes:', oldVisibleIndexes);
-                console.log('newVisibleIndexes:', newVisibleIndexes);
-                console.log('diffTopRenderedIndexes:', isMissingTop ? '-' : isAddedTop ? '+' : '-', diffTopRenderedIndexes, diffTopRenderedIndexes.map(index => this.getBlockHeight(index, 0)));
-                console.log('diffBottomRenderedIndexes:', isAddedBottom ? '+' : isMissingBottom ? '-' : '+', diffBottomRenderedIndexes, diffBottomRenderedIndexes.map(index => this.getBlockHeight(index, 0)));
-                const needTop = virtualView.heights.slice(0, newVisibleIndexes[0]).reduce((acc, height) => acc + height, 0);
+                debugLog('log', `====== diffVirtualViewport stage: ${stage} ======`);
+                debugLog('log', 'oldIndexesInViewport:', oldIndexesInViewport);
+                debugLog('log', 'newIndexesInViewport:', newIndexesInViewport);
+                debugLog('log', 'changedIndexesOfTop:', needRemoveOnTop ? '-' : needAddOnTop ? '+' : '-', changedIndexesOfTop, changedIndexesOfTop.map(index => getRealHeightByElement(this.editor, this.editor.children[index], 0)));
+                debugLog('log', 'changedIndexesOfBottom:', needAddOnBottom ? '+' : needRemoveOnBottom ? '-' : '+', changedIndexesOfBottom, changedIndexesOfBottom.map(index => getRealHeightByElement(this.editor, this.editor.children[index], 0)));
+                const needTop = virtualView.heights.slice(0, newIndexesInViewport[0]).reduce((acc, height) => acc + height, 0);
                 const needBottom = virtualView.heights
-                    .slice(newVisibleIndexes[newVisibleIndexes.length - 1] + 1)
+                    .slice(newIndexesInViewport[newIndexesInViewport.length - 1] + 1)
                     .reduce((acc, height) => acc + height, 0);
-                console.log('newTopHeight:', needTop, 'prevTopHeight:', parseFloat(this.virtualTopHeightElement.style.height));
-                console.log('newBottomHeight:', needBottom, 'prevBottomHeight:', parseFloat(this.virtualBottomHeightElement.style.height));
-                console.warn('=========== Dividing line ===========');
+                debugLog('log', needTop - parseFloat(this.virtualTopHeightElement.style.height), 'newTopHeight:', needTop, 'prevTopHeight:', parseFloat(this.virtualTopHeightElement.style.height));
+                debugLog('log', 'newBottomHeight:', needBottom, 'prevBottomHeight:', parseFloat(this.virtualBottomHeightElement.style.height));
+                debugLog('warn', '=========== Dividing line ===========');
             }
             return {
-                isDiff: true,
-                isMissingTop,
-                isAddedTop,
-                isMissingBottom,
-                isAddedBottom,
-                diffTopRenderedIndexes,
-                diffBottomRenderedIndexes
+                isDifferent: true,
+                needRemoveOnTop,
+                needAddOnTop,
+                needRemoveOnBottom,
+                needAddOnBottom,
+                changedIndexesOfTop,
+                changedIndexesOfBottom
             };
         }
         return {
-            isDiff: false,
-            diffTopRenderedIndexes: [],
-            diffBottomRenderedIndexes: []
+            isDifferent: false,
+            changedIndexesOfTop: [],
+            changedIndexesOfBottom: []
         };
     }
-    getBlockHeight(index, defaultHeight = VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT) {
-        const node = this.editor.children[index];
-        if (!node) {
-            return defaultHeight;
-        }
-        const key = AngularEditor.findKey(this.editor, node);
-        return this.measuredHeights.get(key.id) ?? defaultHeight;
-    }
-    buildAccumulatedHeight(heights) {
-        const accumulatedHeights = new Array(heights.length + 1).fill(0);
-        for (let i = 0; i < heights.length; i++) {
-            // 存储前 i 个的累计高度
-            accumulatedHeights[i + 1] = accumulatedHeights[i] + heights[i];
-        }
-        return accumulatedHeights;
-    }
-    scheduleMeasureVisibleHeights() {
-        if (!this.shouldUseVirtual()) {
-            return;
-        }
-        this.measureVisibleHeightsAnimId && cancelAnimationFrame(this.measureVisibleHeightsAnimId);
-        this.measureVisibleHeightsAnimId = requestAnimationFrame(() => {
-            this.measureVisibleHeights();
-        });
-    }
-    measureVisibleHeights() {
-        const children = (this.editor.children || []);
-        this.virtualVisibleIndexes.forEach(index => {
-            const node = children[index];
-            if (!node) {
-                return;
-            }
-            const key = AngularEditor.findKey(this.editor, node);
-            // 跳过已测过的块
-            if (this.measuredHeights.has(key.id)) {
-                return;
-            }
-            const view = ELEMENT_TO_COMPONENT.get(node);
-            if (!view) {
-                return;
-            }
-            const ret = view.getRealHeight();
-            if (ret instanceof Promise) {
-                ret.then(height => {
-                    this.measuredHeights.set(key.id, height);
-                });
-            }
-            else {
-                this.measuredHeights.set(key.id, ret);
-            }
-        });
-    }
-    remeasureHeightByIndics(indics) {
-        const children = (this.editor.children || []);
-        let isHeightChanged = false;
-        indics.forEach(index => {
-            const node = children[index];
-            if (!node) {
-                return;
-            }
-            const key = AngularEditor.findKey(this.editor, node);
-            const view = ELEMENT_TO_COMPONENT.get(node);
-            if (!view) {
-                return;
-            }
-            const prevHeight = this.measuredHeights.get(key.id);
-            const ret = view.getRealHeight();
-            if (ret instanceof Promise) {
-                ret.then(height => {
-                    if (height !== prevHeight) {
-                        this.measuredHeights.set(key.id, height);
-                        isHeightChanged = true;
-                        if (isDebug) {
-                            console.log(`remeasureHeightByIndics, index: ${index} prevHeight: ${prevHeight} newHeight: ${height}`);
-                        }
-                    }
-                });
-            }
-            else {
-                if (ret !== prevHeight) {
-                    this.measuredHeights.set(key.id, ret);
-                    isHeightChanged = true;
-                    if (isDebug) {
-                        console.log(`remeasureHeightByIndics, index: ${index} prevHeight: ${prevHeight} newHeight: ${ret}`);
-                    }
-                }
-            }
-        });
-        return isHeightChanged;
-    }
     //#region event proxy
     addEventListener(eventName, listener, target = this.elementRef.nativeElement) {
         this.manualListeners.push(this.renderer2.listen(target, eventName, (event) => {
@@ -3286,7 +4020,7 @@ class SlateEditable {
                     if (this.editor.selection && Range.equals(range, this.editor.selection) && !hasStringTarget(domSelection)) {
                         if (!isTargetInsideVoid(this.editor, activeElement)) {
                             // force adjust DOMSelection
-                            this.toNativeSelection();
+                            this.toNativeSelection(false);
                         }
                     }
                     else {
@@ -3942,6 +4676,7 @@ class SlateEditable {
     }
     //#endregion
     ngOnDestroy() {
+        this.editorResizeObserver?.disconnect();
         NODE_TO_ELEMENT.delete(this.editor);
         this.manualListeners.forEach(manualListener => {
             manualListener();
@@ -4130,16 +4865,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }] });
 
+class SlateString {
+    ngOnInit() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: SlateString, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: SlateString, isStandalone: true, selector: "span[slateString]", inputs: { context: "context", viewContext: "viewContext" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: SlateString, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'span[slateString]',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
+                }]
+        }], propDecorators: { context: [{
+                type: Input
+            }], viewContext: [{
+                type: Input
+            }] } });
+
 class SlateModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: SlateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.12", ngImport: i0, type: SlateModule, imports: [CommonModule, SlateEditable, SlateChildrenOutlet], exports: [SlateEditable, SlateChildrenOutlet] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.12", ngImport: i0, type: SlateModule, imports: [CommonModule, SlateEditable, SlateChildrenOutlet, SlateString], exports: [SlateEditable, SlateChildrenOutlet, SlateString] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: SlateModule, imports: [CommonModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: SlateModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, SlateEditable, SlateChildrenOutlet],
-                    exports: [SlateEditable, SlateChildrenOutlet],
+                    imports: [CommonModule, SlateEditable, SlateChildrenOutlet, SlateString],
+                    exports: [SlateEditable, SlateChildrenOutlet, SlateString],
                     providers: []
                 }]
         }] });
@@ -4255,6 +5009,7 @@ class BaseElementComponent extends BaseComponent {
         if (ELEMENT_TO_COMPONENT.get(this.element) === this) {
             ELEMENT_TO_COMPONENT.delete(this.element);
         }
+        this.listRender.destroy();
     }
     onContextChange() {
         this.childrenContext = this.getChildrenContext();
@@ -4342,6 +5097,7 @@ class BaseTextComponent extends BaseComponent {
             NODE_TO_ELEMENT.delete(this.text);
         }
         ELEMENT_TO_NODE.delete(this.nativeElement);
+        this.leavesRender.destroy();
     }
     onContextChange() {
         this.updateWeakMap();
@@ -4367,6 +5123,9 @@ class BaseLeafComponent extends BaseComponent {
         super(...arguments);
         this.stringRender = null;
         this.isSlateLeaf = true;
+        this.getOutletParent = () => {
+            return this.elementRef.nativeElement;
+        };
     }
     get text() {
         return this.context && this.context.text;
@@ -4381,7 +5140,7 @@ class BaseLeafComponent extends BaseComponent {
         if (!this.initialized) {
             this.stringRender = new SlateStringRender(this.context, this.viewContext);
             const stringNode = this.stringRender.render();
-            this.nativeElement.appendChild(stringNode);
+            this.getOutletParent().appendChild(stringNode);
         }
         else {
             this.stringRender?.update(this.context, this.viewContext);
@@ -4453,5 +5212,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AngularEditor, BaseComponent, BaseElementComponent, BaseElementFlavour, BaseFlavour, BaseLeafComponent, BaseLeafFlavour, BaseTextComponent, BaseTextFlavour, BlockCardRef, DEFAULT_ELEMENT_HEIGHT, DefaultTextFlavour, EDITOR_TO_AFTER_VIEW_INIT_QUEUE, ELEMENT_TO_COMPONENT, FAKE_LEFT_BLOCK_CARD_OFFSET, FAKE_RIGHT_BLOCK_CARD_OFFSET, FlavourRef, HAS_BEFORE_INPUT_SUPPORT, IS_ANDROID, IS_APPLE, IS_CHROME, IS_CHROME_LEGACY, IS_EDGE_LEGACY, IS_FIREFOX, IS_FIREFOX_LEGACY, IS_IOS, IS_QQBROWSER, IS_SAFARI, IS_UC_MOBILE, IS_WECHATBROWSER, JUST_NOW_UPDATED_VIRTUAL_VIEW, PLACEHOLDER_SYMBOL, SLATE_BLOCK_CARD_CLASS_NAME, SLATE_DEBUG_KEY, SlateBlockCard, SlateChildrenOutlet, SlateEditable, SlateErrorCode, SlateFragmentAttributeKey, SlateModule, VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT, VIRTUAL_SCROLL_DEFAULT_BUFFER_COUNT, VoidTextFlavour, blobAsString, buildHTMLText, check, completeTable, createClipboardData, createText, createThrottleRAF, defaultScrollSelectionIntoView, fallbackCopyText, getBlockCardByNativeElement, getCardTargetAttribute, getClipboardData, getClipboardFromHTMLText, getContentHeight, getDataTransferClipboard, getDataTransferClipboardText, getNavigatorClipboard, getPlainText, getSelection, getSlateFragmentAttribute, getZeroTextNode, hasAfterContextChange, hasBeforeContextChange, hasBlockCard, hasBlockCardWithNode, hotkeys, isCardCenterByTargetAttr, isCardLeft, isCardLeftByTargetAttr, isCardRightByTargetAttr, isClipboardFile, isClipboardReadSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isComponentType, isDOMText, isDecoratorRangeListEqual, isFlavourType, isInvalidTable, isTemplateRef, isValid, normalize, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setNavigatorClipboard, shallowCompare, stripHtml, withAngular };
+export { AngularEditor, BaseComponent, BaseElementComponent, BaseElementFlavour, BaseFlavour, BaseLeafComponent, BaseLeafFlavour, BaseTextComponent, BaseTextFlavour, BlockCardRef, DEFAULT_ELEMENT_HEIGHT, DefaultTextFlavour, EDITOR_TO_AFTER_VIEW_INIT_QUEUE, EDITOR_TO_BUSINESS_TOP, EDITOR_TO_ROOT_NODE_WIDTH, EDITOR_TO_VIRTUAL_SCROLL_SELECTION, ELEMENT_KEY_TO_HEIGHTS, ELEMENT_TO_COMPONENT, FAKE_LEFT_BLOCK_CARD_OFFSET, FAKE_RIGHT_BLOCK_CARD_OFFSET, FlavourRef, HAS_BEFORE_INPUT_SUPPORT, IS_ANDROID, IS_APPLE, IS_CHROME, IS_CHROME_LEGACY, IS_EDGE_LEGACY, IS_ENABLED_VIRTUAL_SCROLL, IS_FIREFOX, IS_FIREFOX_LEGACY, IS_IOS, IS_QQBROWSER, IS_SAFARI, IS_UC_MOBILE, IS_WECHATBROWSER, PLACEHOLDER_SYMBOL, SLATE_BLOCK_CARD_CLASS_NAME, SLATE_DEBUG_KEY, SLATE_DEBUG_KEY_SCROLL_TOP, SlateBlockCard, SlateChildrenOutlet, SlateEditable, SlateErrorCode, SlateFragmentAttributeKey, SlateModule, SlateString, VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT, VoidTextFlavour, blobAsString, buildHTMLText, buildHeightsAndAccumulatedHeights, calculateVirtualTopHeight, check, completeTable, createClipboardData, createText, createThrottleRAF, debugLog, defaultScrollSelectionIntoView, fallbackCopyText, getBlockCardByNativeElement, getBusinessTop, getCardTargetAttribute, getClipboardData, getClipboardFromHTMLText, getContentHeight, getDataTransferClipboard, getDataTransferClipboardText, getNavigatorClipboard, getPlainText, getRealHeightByElement, getSelection, getSlateFragmentAttribute, getZeroTextNode, hasAfterContextChange, hasBeforeContextChange, hasBlockCard, hasBlockCardWithNode, hotkeys, isCardCenterByTargetAttr, isCardLeft, isCardLeftByTargetAttr, isCardRightByTargetAttr, isClipboardFile, isClipboardReadSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isComponentType, isDOMText, isDebug, isDebugScrollTop, isDecoratorRangeListEqual, isFlavourType, isInvalidTable, isTemplateRef, isValid, measureHeightByElement, measureHeightByIndics, normalize, scrollToElement, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setNavigatorClipboard, shallowCompare, stripHtml, withAngular };
 //# sourceMappingURL=slate-angular.mjs.map