slate-angular 20.2.17 → 20.2.19

package/fesm2022/slate-angular.mjs

@@ -1,5 +1,5 @@
 import { Editor, Range, Element, Transforms, Text as Text$1, Node, Path } from 'slate';
-import { EDITOR_TO_ELEMENT, NODE_TO_ELEMENT, DOMEditor, normalizeDOMPoint, isDOMSelection, IS_CHROME as IS_CHROME$1, hasShadowRoot, isDOMElement, NODE_TO_PARENT, NODE_TO_INDEX, IS_FOCUSED, isDOMNode, withDOM, NODE_TO_KEY, ELEMENT_TO_NODE, getDefaultView, EDITOR_TO_WINDOW, IS_READ_ONLY, EDITOR_TO_ON_CHANGE, TRIPLE_CLICK, isPlainTextOnlyPaste } from 'slate-dom';
+import { EDITOR_TO_ELEMENT, NODE_TO_ELEMENT, DOMEditor, normalizeDOMPoint, isDOMSelection, IS_CHROME as IS_CHROME$1, hasShadowRoot, isDOMElement, NODE_TO_PARENT, NODE_TO_INDEX, isDOMNode, IS_FOCUSED, withDOM, NODE_TO_KEY, ELEMENT_TO_NODE, getDefaultView, EDITOR_TO_WINDOW, IS_READ_ONLY, EDITOR_TO_ON_CHANGE, TRIPLE_CLICK, isPlainTextOnlyPaste } from 'slate-dom';
 import { isKeyHotkey } from 'is-hotkey';
 import * as i0 from '@angular/core';
 import { TemplateRef, ComponentRef, IterableDiffers, inject, ViewContainerRef, forwardRef, HostBinding, Input, ChangeDetectionStrategy, Component, NgModule, ElementRef, ChangeDetectorRef, Directive, ViewChild } from '@angular/core';
@@ -353,95 +353,6 @@ 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,
-    /**
-     * handle editor error.
-     */
-    onError(errorData) {
-        if (errorData.nativeError) {
-            throw errorData.nativeError;
-        }
-    },
-    /**
-     * onKeydown hook.
-     */
-    onKeydown(editor, data) {
-        editor.onKeydown(data);
-    },
-    /**
-     * onClick hook.
-     */
-    onClick(editor, data) {
-        editor.onClick(data);
-    },
-    deleteCutData(editor) {
-        editor.deleteCutData();
-    },
-    isLeafBlock(editor, node) {
-        return Element.isElement(node) && !editor.isInline(node) && Editor.hasInlines(editor, node);
-    },
-    /**
-     * move native selection to card-left or card-right
-     * @param editor
-     * @param blockCardNode
-     * @param options
-     */
-    moveBlockCard(editor, blockCardNode, options) {
-        const cursorNode = AngularEditor.getCardCursorNode(editor, blockCardNode, options);
-        const window = AngularEditor.getWindow(editor);
-        const domSelection = window.getSelection();
-        domSelection.setBaseAndExtent(cursorNode, 1, cursorNode, 1);
-    },
-    /**
-     * move slate selection to card-left or card-right
-     * @param editor
-     * @param path
-     * @param options
-     */
-    moveBlockCardCursor(editor, path, options) {
-        const cursor = {
-            path,
-            offset: options.direction === 'left' ? FAKE_LEFT_BLOCK_CARD_OFFSET : FAKE_RIGHT_BLOCK_CARD_OFFSET
-        };
-        Transforms.select(editor, { anchor: cursor, focus: cursor });
-    },
-    focus: (editor, options = { retries: 5 }) => {
-        // Return if already focused
-        if (IS_FOCUSED.get(editor)) {
-            return;
-        }
-        // Return if no dom node is associated with the editor, which means the editor is not yet mounted
-        // or has been unmounted. This can happen especially, while retrying to focus the editor.
-        if (!EDITOR_TO_ELEMENT.get(editor)) {
-            return;
-        }
-        IS_FOCUSED.set(editor, true);
-        const el = DOMEditor.toDOMNode(editor, editor);
-        const root = DOMEditor.findDocumentOrShadowRoot(editor);
-        if (root.activeElement !== el) {
-            // IS_FOCUSED should be set before calling el.focus() to ensure that
-            // FocusedContext is updated to the correct value
-            el.focus({ preventScroll: true });
-        }
-    },
-    isEnabledVirtualScroll(editor) {
-        return IS_ENABLED_VIRTUAL_SCROLL.get(editor);
-    }
-};
-
 const IS_IOS = typeof navigator !== 'undefined' &&
     typeof window !== 'undefined' &&
     /iPad|iPhone|iPod/.test(navigator.userAgent) &&
@@ -480,493 +391,28 @@ const SLATE_DEBUG_KEY = '__SLATE_DEBUG__';
 const SLATE_DEBUG_KEY_SCROLL_TOP = '__SLATE_DEBUG_SCROLL_TOP__';
 
 /**
- * Hotkey mappings for each platform.
- */
-const HOTKEYS = {
-    bold: 'mod+b',
-    compose: ['down', 'left', 'right', 'up', 'backspace', 'enter'],
-    moveBackward: 'left',
-    moveForward: 'right',
-    moveUp: 'up',
-    moveDown: 'down',
-    moveWordBackward: 'ctrl+left',
-    moveWordForward: 'ctrl+right',
-    deleteBackward: 'shift?+backspace',
-    deleteForward: 'shift?+delete',
-    extendBackward: 'shift+left',
-    extendForward: 'shift+right',
-    italic: 'mod+i',
-    splitBlock: 'shift?+enter',
-    undo: 'mod+z'
-};
-const APPLE_HOTKEYS = {
-    moveLineBackward: 'opt+up',
-    moveLineForward: 'opt+down',
-    moveWordBackward: 'opt+left',
-    moveWordForward: 'opt+right',
-    deleteBackward: ['ctrl+backspace', 'ctrl+h'],
-    deleteForward: ['ctrl+delete', 'ctrl+d'],
-    deleteLineBackward: 'cmd+shift?+backspace',
-    deleteLineForward: ['cmd+shift?+delete', 'ctrl+k'],
-    deleteWordBackward: 'opt+shift?+backspace',
-    deleteWordForward: 'opt+shift?+delete',
-    extendLineBackward: 'opt+shift+up',
-    extendLineForward: 'opt+shift+down',
-    redo: 'cmd+shift+z',
-    transposeCharacter: 'ctrl+t'
-};
-const WINDOWS_HOTKEYS = {
-    deleteWordBackward: 'ctrl+shift?+backspace',
-    deleteWordForward: 'ctrl+shift?+delete',
-    redo: ['ctrl+y', 'ctrl+shift+z']
-};
-/**
- * Create a platform-aware hotkey checker.
+ * Symbols.
  */
-const create = (key) => {
-    const generic = HOTKEYS[key];
-    const apple = APPLE_HOTKEYS[key];
-    const windows = WINDOWS_HOTKEYS[key];
-    const isGeneric = generic && isKeyHotkey(generic);
-    const isApple = apple && isKeyHotkey(apple);
-    const isWindows = windows && isKeyHotkey(windows);
-    return (event) => {
-        if (isGeneric && isGeneric(event)) {
-            return true;
-        }
-        if (IS_APPLE && isApple && isApple(event)) {
-            return true;
-        }
-        if (!IS_APPLE && isWindows && isWindows(event)) {
-            return true;
-        }
-        return false;
-    };
-};
+const PLACEHOLDER_SYMBOL = Symbol('placeholder');
 /**
- * Hotkeys.
+ * Weak map for associating the html element with the component.
  */
-const hotkeys = {
-    isBold: create('bold'),
-    isCompose: create('compose'),
-    isMoveBackward: create('moveBackward'),
-    isMoveForward: create('moveForward'),
-    isMoveUp: create('moveUp'),
-    isMoveDown: create('moveDown'),
-    isDeleteBackward: create('deleteBackward'),
-    isDeleteForward: create('deleteForward'),
-    isDeleteLineBackward: create('deleteLineBackward'),
-    isDeleteLineForward: create('deleteLineForward'),
-    isDeleteWordBackward: create('deleteWordBackward'),
-    isDeleteWordForward: create('deleteWordForward'),
-    isExtendBackward: create('extendBackward'),
-    isExtendForward: create('extendForward'),
-    isExtendLineBackward: create('extendLineBackward'),
-    isExtendLineForward: create('extendLineForward'),
-    isItalic: create('italic'),
-    isMoveLineBackward: create('moveLineBackward'),
-    isMoveLineForward: create('moveLineForward'),
-    isMoveWordBackward: create('moveWordBackward'),
-    isMoveWordForward: create('moveWordForward'),
-    isRedo: create('redo'),
-    isSplitBlock: create('splitBlock'),
-    isTransposeCharacter: create('transposeCharacter'),
-    isUndo: create('undo')
-};
-
-function isTemplateRef(value) {
-    return value && value instanceof TemplateRef;
-}
-function isComponentType(value) {
-    return !isTemplateRef(value);
-}
-function isFlavourType(value) {
-    return value && value.isFlavour === true;
-}
+const ELEMENT_TO_COMPONENT = new WeakMap();
+const EDITOR_TO_VIRTUAL_SCROLL_SELECTION = new WeakMap();
+const EDITOR_TO_AFTER_VIEW_INIT_QUEUE = new WeakMap();
 
-const shallowCompare = (obj1, obj2) => Object.keys(obj1).length === Object.keys(obj2).length &&
-    Object.keys(obj1).every(key => obj2.hasOwnProperty(key) && obj1[key] === obj2[key]);
-/**
- * Check if a list of decorator ranges are equal to another.
- *
- * PERF: this requires the two lists to also have the ranges inside them in the
- * same order, but this is an okay constraint for us since decorations are
- * kept in order, and the odd case where they aren't is okay to re-render for.
- */
-const isDecoratorRangeListEqual = (list, another) => {
-    if (list.length !== another.length) {
-        return false;
-    }
-    for (let i = 0; i < list.length; i++) {
-        const range = list[i];
-        const other = another[i];
-        const { anchor: rangeAnchor, focus: rangeFocus, ...rangeOwnProps } = range;
-        const { anchor: otherAnchor, focus: otherFocus, ...otherOwnProps } = other;
-        if (!Range.equals(range, other) ||
-            range[PLACEHOLDER_SYMBOL] !== other[PLACEHOLDER_SYMBOL] ||
-            !shallowCompare(rangeOwnProps, otherOwnProps)) {
-            return false;
+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);
         }
-    }
-    return true;
-};
-
-const isValid = (value) => (Element.isElement(value) && value.children.length > 0 && value.children.every(child => isValid(child))) ||
-    Text$1.isText(value);
-const check = (document) => {
-    return document.every(value => Element.isElement(value) && isValid(value));
-};
-function normalize(document) {
-    return document.filter(value => Element.isElement(value) && isValid(value));
-}
-
-const createThrottleRAF = () => {
-    let timerId = null;
-    const throttleRAF = (fn) => {
-        const scheduleFunc = () => {
-            timerId = requestAnimationFrame(() => {
-                timerId = null;
-                fn();
-            });
-        };
-        if (timerId !== null) {
-            cancelAnimationFrame(timerId);
-            timerId = null;
-        }
-        scheduleFunc();
-    };
-    return throttleRAF;
-};
-
-const isClipboardReadSupported = () => {
-    return 'clipboard' in navigator && 'read' in navigator.clipboard;
-};
-const isClipboardWriteSupported = () => {
-    return 'clipboard' in navigator && 'write' in navigator.clipboard;
-};
-const isClipboardWriteTextSupported = () => {
-    return 'clipboard' in navigator && 'writeText' in navigator.clipboard;
-};
-const isClipboardFile = (item) => {
-    return item.types.find(i => i.match(/^image\//));
-};
-const isInvalidTable = (nodes = []) => {
-    return nodes.some(node => node.tagName.toLowerCase() === 'tr');
-};
-const stripHtml = (html) => {
-    // See <https://github.com/developit/preact-markup/blob/4788b8d61b4e24f83688710746ee36e7464f7bbc/src/parse-markup.js#L60-L69>
-    const doc = document.implementation.createHTMLDocument('');
-    doc.documentElement.innerHTML = html.trim();
-    return doc.body.textContent || doc.body.innerText || '';
-};
-const blobAsString = (blob) => {
-    return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.addEventListener('loadend', () => {
-            const text = reader.result;
-            resolve(text);
-        });
-        reader.addEventListener('error', () => {
-            reject(reader.error);
-        });
-        reader.readAsText(blob);
-    });
-};
-const completeTable = (fragment) => {
-    const result = document.createDocumentFragment();
-    const table = document.createElement('table');
-    result.appendChild(table);
-    table.appendChild(fragment);
-    return result;
-};
-
-const setDataTransferClipboard = (dataTransfer, htmlText) => {
-    dataTransfer?.setData(`text/html`, htmlText);
-};
-const setDataTransferClipboardText = (data, text) => {
-    data?.setData(`text/plain`, text);
-};
-const getDataTransferClipboard = (data) => {
-    const html = data?.getData(`text/html`);
-    if (html) {
-        const htmlClipboardData = getClipboardFromHTMLText(html);
-        if (htmlClipboardData) {
-            return htmlClipboardData;
-        }
-        const textData = getDataTransferClipboardText(data);
-        if (textData) {
-            return {
-                html,
-                ...textData
-            };
-        }
-        else {
-            return { html };
-        }
-    }
-    else {
-        const textData = getDataTransferClipboardText(data);
-        return textData;
-    }
-};
-const getDataTransferClipboardText = (data) => {
-    if (!data) {
-        return null;
-    }
-    const text = data?.getData(`text/plain`);
-    if (text) {
-        const htmlClipboardData = getClipboardFromHTMLText(text);
-        if (htmlClipboardData) {
-            return htmlClipboardData;
-        }
-    }
-    return { text };
-};
-
-const setNavigatorClipboard = async (htmlText, data, text = '') => {
-    let textClipboard = text;
-    if (isClipboardWriteSupported()) {
-        await navigator.clipboard.write([
-            new ClipboardItem({
-                'text/html': new Blob([htmlText], {
-                    type: 'text/html'
-                }),
-                'text/plain': new Blob([textClipboard ?? JSON.stringify(data)], { type: 'text/plain' })
-            })
-        ]);
-    }
-};
-const getNavigatorClipboard = async () => {
-    if (!isClipboardReadSupported()) {
-        return null;
-    }
-    const clipboardItems = await navigator.clipboard.read();
-    let clipboardData = {};
-    if (Array.isArray(clipboardItems) && clipboardItems[0] instanceof ClipboardItem) {
-        for (const item of clipboardItems) {
-            if (isClipboardFile(item)) {
-                const clipboardFiles = item.types.filter(type => type.match(/^image\//));
-                const fileBlobs = await Promise.all(clipboardFiles.map(type => item.getType(type)));
-                const urls = fileBlobs.filter(Boolean).map(blob => URL.createObjectURL(blob));
-                const files = await Promise.all(urls.map(async (url) => {
-                    const blob = await (await fetch(url)).blob();
-                    return new File([blob], 'file', { type: blob.type });
-                }));
-                clipboardData = {
-                    ...clipboardData,
-                    files
-                };
-            }
-            if (item.types.includes('text/html')) {
-                const htmlContent = await blobAsString(await item.getType('text/html'));
-                const htmlClipboardData = getClipboardFromHTMLText(htmlContent);
-                if (htmlClipboardData) {
-                    clipboardData = { ...clipboardData, ...htmlClipboardData };
-                    return clipboardData;
-                }
-                if (htmlContent && htmlContent.trim()) {
-                    clipboardData = { ...clipboardData, html: htmlContent };
-                }
-            }
-            if (item.types.includes('text/plain')) {
-                const textContent = await blobAsString(await item.getType('text/plain'));
-                clipboardData = {
-                    ...clipboardData,
-                    text: stripHtml(textContent)
-                };
-            }
-        }
-    }
-    return clipboardData;
-};
-
-const SlateFragmentAttributeKey = 'data-slate-angular-fragment';
-/**
- * Get x-slate-fragment attribute from data-slate-angular-fragment
- */
-const catchSlateFragment = /data-slate-angular-fragment="(.+?)"/m;
-const getSlateFragmentAttribute = (htmlData) => {
-    const [, fragment] = htmlData.match(catchSlateFragment) || [];
-    return fragment;
-};
-/**
- * Check if a DOM node is an element node.
- */
-const isDOMText = (value) => {
-    return isDOMNode(value) && value.nodeType === 3;
-};
-/**
- * Get a plaintext representation of the content of a node, accounting for block
- * elements which get a newline appended.
- *
- * The domNode must be attached to the DOM.
- */
-const getPlainText = (domNode) => {
-    let text = '';
-    if (isDOMText(domNode) && domNode.nodeValue) {
-        return domNode.nodeValue;
-    }
-    if (isDOMElement(domNode)) {
-        for (const childNode of Array.from(domNode.childNodes)) {
-            text += getPlainText(childNode);
-        }
-        const display = getComputedStyle(domNode).getPropertyValue('display');
-        if (display === 'block' || display === 'list' || domNode.tagName === 'BR') {
-            text += '\n';
-        }
-    }
-    return text;
-};
-/**
- * Get the dom selection from Shadow Root if possible, otherwise from the document
- */
-const getSelection = (root) => {
-    if (root.getSelection != null) {
-        return root.getSelection();
-    }
-    return document.getSelection();
-};
-const getContentHeight = (element) => {
-    if (!element)
-        return 0;
-    const style = window.getComputedStyle(element);
-    const boxSizing = style.boxSizing;
-    const height = parseFloat(style.height) || 0;
-    const paddingTop = parseFloat(style.paddingTop) || 0;
-    const paddingBottom = parseFloat(style.paddingBottom) || 0;
-    const totalPadding = paddingTop + paddingBottom;
-    const borderTop = parseFloat(style.borderTopWidth) || 0;
-    const borderBottom = parseFloat(style.borderBottomWidth) || 0;
-    const totalBorder = borderTop + borderBottom;
-    let contentHeight;
-    if (boxSizing === 'border-box') {
-        contentHeight = height - totalPadding - totalBorder;
-    }
-    else {
-        contentHeight = height;
-    }
-    return Math.max(contentHeight, 0);
-};
-const getZeroTextNode = () => {
-    return document.createTextNode('\uFEFF');
-};
-
-const buildHTMLText = (wrapper, attach, data) => {
-    const stringObj = JSON.stringify(data);
-    const encoded = window.btoa(encodeURIComponent(stringObj));
-    attach.setAttribute(SlateFragmentAttributeKey, encoded);
-    return wrapper.innerHTML;
-};
-const getClipboardFromHTMLText = (html) => {
-    const fragmentAttribute = getSlateFragmentAttribute(html);
-    if (fragmentAttribute) {
-        try {
-            const decoded = decodeURIComponent(window.atob(fragmentAttribute));
-            const result = JSON.parse(decoded);
-            if (result && Array.isArray(result) && result.length > 0) {
-                return {
-                    elements: result
-                };
-            }
-        }
-        catch (error) {
-            console.error(error);
-            return null;
-        }
-    }
-    return null;
-};
-const createClipboardData = (html, elements, text, files) => {
-    const data = { elements, text, html, files };
-    return data;
-};
-const getClipboardData = async (dataTransfer) => {
-    let clipboardData = null;
-    if (dataTransfer) {
-        let filesData = {};
-        if (dataTransfer.files.length) {
-            filesData = { ...filesData, files: Array.from(dataTransfer.files) };
-        }
-        clipboardData = getDataTransferClipboard(dataTransfer);
-        return { ...clipboardData, ...filesData };
-    }
-    if (isClipboardReadSupported()) {
-        return await getNavigatorClipboard();
-    }
-    return clipboardData;
-};
-/**
- * @param wrapper get wrapper.innerHTML string which will be written in clipboard
- * @param attach attach must be child element of wrapper which will be attached json data
- * @returns void
- */
-const setClipboardData = async (clipboardData, wrapper, attach, dataTransfer) => {
-    if (!clipboardData) {
-        return;
-    }
-    const { elements, text } = clipboardData;
-    if (isClipboardWriteSupported()) {
-        const htmlText = buildHTMLText(wrapper, attach, elements);
-        // TODO
-        // maybe fail to write when copy some cell in table
-        return await setNavigatorClipboard(htmlText, elements, text);
-    }
-    if (dataTransfer) {
-        const htmlText = buildHTMLText(wrapper, attach, elements);
-        setDataTransferClipboard(dataTransfer, htmlText);
-        setDataTransferClipboardText(dataTransfer, text);
-        return;
-    }
-    const htmlText = buildHTMLText(wrapper, attach, elements);
-    // Compatible with situations where navigator.clipboard.write is not supported and dataTransfer is empty
-    // Such as contextmenu copy in Firefox.
-    if (isClipboardWriteTextSupported()) {
-        return await navigator.clipboard.writeText(htmlText);
-    }
-    else {
-        return await fallbackCopyText(htmlText);
-    }
-};
-const fallbackCopyText = async (text) => {
-    return new Promise((resolve, reject) => {
-        const textArea = document.createElement('textarea');
-        textArea.value = text;
-        textArea.style.position = 'fixed';
-        textArea.style.left = '-999999px';
-        textArea.style.top = '-999999px';
-        textArea.style.opacity = '0';
-        document.body.appendChild(textArea);
-        textArea.focus();
-        textArea.select();
-        try {
-            const successful = document.execCommand('copy');
-            document.body.removeChild(textArea);
-            if (successful) {
-                resolve();
-            }
-            else {
-                reject(new Error('execCommand error'));
-            }
-        }
-        catch (err) {
-            document.body.removeChild(textArea);
-            reject(err);
-        }
-    });
-};
-
-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;
+        this.instance.init();
+        return this.instance;
     }
     static log(doc, type, ...args) {
         this.getInstance(doc).log(type, ...args);
@@ -1276,365 +722,958 @@ class VirtualScrollDebugOverlay {
         this.resizeHandle = resizeHandle;
         this.applyState();
     }
-    startDrag(event) {
-        if (event.button !== 0) {
-            return;
+    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;
         }
-        if (!this.container) {
-            return;
+        try {
+            return JSON.stringify(value);
         }
-        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();
+        catch (error) {
+            return String(value);
         }
     }
-    startResize(event) {
-        if (event.button !== 0 || this.state.collapsed) {
-            return;
-        }
-        if (!this.container) {
-            return;
+    setScrollTopValue(value) {
+        if (this.distanceInput) {
+            this.distanceInput.value = String(value ?? 0);
         }
-        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;
+}
+
+const SlateFragmentAttributeKey = 'data-slate-angular-fragment';
+/**
+ * Get x-slate-fragment attribute from data-slate-angular-fragment
+ */
+const catchSlateFragment = /data-slate-angular-fragment="(.+?)"/m;
+const getSlateFragmentAttribute = (htmlData) => {
+    const [, fragment] = htmlData.match(catchSlateFragment) || [];
+    return fragment;
+};
+/**
+ * Check if a DOM node is an element node.
+ */
+const isDOMText = (value) => {
+    return isDOMNode(value) && value.nodeType === 3;
+};
+/**
+ * Get a plaintext representation of the content of a node, accounting for block
+ * elements which get a newline appended.
+ *
+ * The domNode must be attached to the DOM.
+ */
+const getPlainText = (domNode) => {
+    let text = '';
+    if (isDOMText(domNode) && domNode.nodeValue) {
+        return domNode.nodeValue;
+    }
+    if (isDOMElement(domNode)) {
+        for (const childNode of Array.from(domNode.childNodes)) {
+            text += getPlainText(childNode);
+        }
+        const display = getComputedStyle(domNode).getPropertyValue('display');
+        if (display === 'block' || display === 'list' || domNode.tagName === 'BR') {
+            text += '\n';
         }
-        this.container.style.left = `${this.state.left}px`;
-        this.container.style.top = `${this.state.top}px`;
     }
-    applySize() {
-        if (!this.container) {
-            return;
+    return text;
+};
+/**
+ * Get the dom selection from Shadow Root if possible, otherwise from the document
+ */
+const getSelection = (root) => {
+    if (root.getSelection != null) {
+        return root.getSelection();
+    }
+    return document.getSelection();
+};
+const getContentHeight = (element) => {
+    if (!element)
+        return 0;
+    const style = window.getComputedStyle(element);
+    const boxSizing = style.boxSizing;
+    const height = parseFloat(style.height) || 0;
+    const paddingTop = parseFloat(style.paddingTop) || 0;
+    const paddingBottom = parseFloat(style.paddingBottom) || 0;
+    const totalPadding = paddingTop + paddingBottom;
+    const borderTop = parseFloat(style.borderTopWidth) || 0;
+    const borderBottom = parseFloat(style.borderBottomWidth) || 0;
+    const totalBorder = borderTop + borderBottom;
+    let contentHeight;
+    if (boxSizing === 'border-box') {
+        contentHeight = height - totalPadding - totalBorder;
+    }
+    else {
+        contentHeight = height;
+    }
+    return Math.max(contentHeight, 0);
+};
+const getZeroTextNode = () => {
+    return document.createTextNode('\uFEFF');
+};
+
+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 roundTo = (value, precision = 2) => {
+    const factor = 10 ** precision;
+    const n = Math.round(value * factor) / factor;
+    return Object.is(n, -0) ? 0 : n;
+};
+
+const VIRTUAL_TOP_HEIGHT_CLASS_NAME = 'virtual-top-height';
+const VIRTUAL_BOTTOM_HEIGHT_CLASS_NAME = 'virtual-bottom-height';
+const VIRTUAL_CENTER_OUTLET_CLASS_NAME = 'virtual-center-outlet';
+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_VIRTUAL_SCROLL_CONFIG = new WeakMap();
+const EDITOR_TO_VIEWPORT_HEIGHT = new WeakMap();
+const EDITOR_TO_ROOT_NODE_WIDTH = new WeakMap();
+const EDITOR_TO_IS_FROM_SCROLL_TO = new WeakMap();
+const isValidNumber = (value) => {
+    return typeof value === 'number' && !Number.isNaN(value);
+};
+const debugLog = (type, ...args) => {
+    const doc = document;
+    VirtualScrollDebugOverlay.log(doc, type, ...args);
+};
+const cacheHeightByElement = (editor, element, height) => {
+    if (!AngularEditor.isEnabledVirtualScroll(editor)) {
+        return;
+    }
+    if (!isValidNumber(height)) {
+        console.error('cacheHeightByElement: height must be number', height);
+        return;
+    }
+    const key = AngularEditor.findKey(editor, element);
+    const heights = ELEMENT_KEY_TO_HEIGHTS.get(editor);
+    heights.set(key.id, height);
+};
+const setMinHeightByElement = (editor, element, rootElementMarginBottom) => {
+    if (!AngularEditor.isEnabledVirtualScroll(editor)) {
+        return;
+    }
+    const realHeight = getCachedHeightByElement(editor, element);
+    if (realHeight) {
+        const nativeElement = AngularEditor.toDOMNode(editor, element);
+        const blockCard = getBlockCardByNativeElement(nativeElement);
+        if (blockCard) {
+            const minHeight = realHeight - rootElementMarginBottom;
+            blockCard.style.minHeight = minHeight + 'px';
         }
-        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) {
+};
+const clearMinHeightByElement = (editor, element) => {
+    if (!AngularEditor.isEnabledVirtualScroll(editor)) {
+        return;
+    }
+    const nativeElement = AngularEditor.toDOMNode(editor, element);
+    const blockCard = getBlockCardByNativeElement(nativeElement);
+    if (blockCard && blockCard.style.minHeight) {
+        blockCard.style.minHeight = '';
+        return true;
+    }
+    else {
+        return false;
+    }
+};
+const calcHeightByElement = (editor, element) => {
+    const view = ELEMENT_TO_COMPONENT.get(element);
+    if (!view) {
+        return;
+    }
+    const height = view.calcHeight();
+    cacheHeightByElement(editor, element, height);
+    return height;
+};
+const measureHeightByIndics = (editor, indics, force = false) => {
+    let hasChanged = false;
+    indics.forEach((index, i) => {
+        const element = editor.children[index];
+        const preHeight = getCachedHeightByElement(editor, element);
+        if (preHeight && !force) {
+            if (isDebug) {
+                const height = calcHeightByElement(editor, element);
+                if (height !== preHeight) {
+                    debugLog('warn', 'calcHeightByElement: height not equal, index: ', index, 'preHeight: ', preHeight, 'height: ', height);
+                }
+            }
             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';
+        const currentHeight = calcHeightByElement(editor, element);
+        if (isValidNumber(currentHeight) && currentHeight !== preHeight) {
+            hasChanged = true;
         }
-        else {
-            this.applySize();
-            this.container.style.padding = '12px';
-            this.container.style.borderRadius = '10px';
-            this.container.style.display = 'flex';
-            this.container.style.flexDirection = 'column';
-            this.container.style.gap = '10px';
-            this.container.style.cursor = 'default';
-            this.contentWrapper.style.display = 'flex';
-            this.bubble.style.display = 'none';
-            this.collapseToggle.textContent = '折叠';
-            this.resizeHandle.style.display = 'block';
+        if (isDebug && isValidNumber(currentHeight)) {
+            debugLog('log', 'measureHeightByIndics: index: ', index, 'preHeight: ', preHeight, 'height: ', currentHeight);
         }
+    });
+    return hasChanged;
+};
+const getBusinessTop = (editor) => {
+    return EDITOR_TO_BUSINESS_TOP.get(editor) ?? 0;
+};
+const getViewportHeight = (editor) => {
+    return EDITOR_TO_VIEWPORT_HEIGHT.get(editor) ?? window.innerHeight;
+};
+const getScrollContainer = (editor) => {
+    const config = EDITOR_TO_VIRTUAL_SCROLL_CONFIG.get(editor);
+    return config?.scrollContainer || document.body;
+};
+const getCachedHeightByElement = (editor, element) => {
+    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;
     }
-    setCollapsed(collapsed) {
-        this.state.collapsed = collapsed;
-        this.applyCollapsedState();
-        this.persistState();
-    }
-    applyState() {
-        this.applyPosition();
-        this.applyCollapsedState();
+    if (heights?.has(key.id)) {
+        console.error('getBlockHeight: invalid height value', key.id, height);
     }
-    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;
-                }
+    return null;
+};
+const buildHeightsAndAccumulatedHeights = (editor, visibleStates) => {
+    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 isVisible = visibleStates[i];
+        let height = isVisible ? getCachedHeightByElement(editor, children[i]) : 0;
+        if (height === null) {
+            try {
+                height = editor.getRoughHeight(children[i]);
+            }
+            catch (error) {
+                console.error('buildHeightsAndAccumulatedHeights: getRoughHeight error', error);
             }
         }
-        catch {
-            // ignore storage errors
-        }
+        heights[i] = height;
+        accumulatedHeights[i + 1] = accumulatedHeights[i] + height;
     }
-    persistState() {
-        try {
-            this.doc.defaultView?.localStorage?.setItem(VirtualScrollDebugOverlay.storageKey, JSON.stringify(this.state));
+    return { heights, accumulatedHeights };
+};
+const calculateVirtualTopHeight = (editor, startIndex, visibleStates) => {
+    const { accumulatedHeights } = buildHeightsAndAccumulatedHeights(editor, visibleStates);
+    const virtualTopHeight = roundTo(accumulatedHeights[startIndex] ?? 0, 1);
+    return virtualTopHeight;
+};
+const calcBusinessTop = (editor) => {
+    const editable = AngularEditor.toDOMNode(editor, editor);
+    const virtualTopElement = editable.querySelector(`.${VIRTUAL_TOP_HEIGHT_CLASS_NAME}`);
+    const virtualTopBoundingTop = virtualTopElement?.getBoundingClientRect()?.top ?? 0;
+    const virtualScrollConfig = EDITOR_TO_VIRTUAL_SCROLL_CONFIG.get(editor);
+    const scrollContainer = virtualScrollConfig?.scrollContainer;
+    const viewportBoundingTop = scrollContainer?.getBoundingClientRect()?.top ?? 0;
+    const businessTop = Math.ceil(virtualTopBoundingTop) + Math.ceil(virtualScrollConfig.scrollTop) - Math.floor(viewportBoundingTop);
+    EDITOR_TO_BUSINESS_TOP.set(editor, businessTop);
+    if (isDebug) {
+        debugLog('log', 'calcBusinessTop: ', businessTop);
+        virtualTopElement.setAttribute('data-business-top', businessTop.toString());
+    }
+    console.log('virtualTopBoundingTop: ', virtualTopBoundingTop, 'virtualScrollConfig.scrollTop: ', virtualScrollConfig.scrollTop, 'viewportBoundingTop: ', viewportBoundingTop);
+    return businessTop;
+};
+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 visibleStates = editor.getAllVisibleStates();
+    const { accumulatedHeights } = buildHeightsAndAccumulatedHeights(editor, visibleStates);
+    let businessTop = getBusinessTop(editor);
+    if (businessTop === 0) {
+        businessTop = calcBusinessTop(editor);
+    }
+    scrollTo((accumulatedHeights[anchorIndex] ?? 0) + businessTop);
+    EDITOR_TO_IS_FROM_SCROLL_TO.set(editor, true);
+    setTimeout(() => {
+        console.log('scrollToElement: end scroll');
+        EDITOR_TO_IS_FROM_SCROLL_TO.set(editor, false);
+    }, 0);
+};
+
+const AngularEditor = {
+    ...CustomDOMEditor,
+    /**
+     * handle editor error.
+     */
+    onError(errorData) {
+        if (errorData.nativeError) {
+            throw errorData.nativeError;
         }
-        catch {
-            // ignore storage errors
+    },
+    /**
+     * onKeydown hook.
+     */
+    onKeydown(editor, data) {
+        editor.onKeydown(data);
+    },
+    /**
+     * onClick hook.
+     */
+    onClick(editor, data) {
+        editor.onClick(data);
+    },
+    deleteCutData(editor) {
+        editor.deleteCutData();
+    },
+    isLeafBlock(editor, node) {
+        return Element.isElement(node) && !editor.isInline(node) && Editor.hasInlines(editor, node);
+    },
+    /**
+     * move native selection to card-left or card-right
+     * @param editor
+     * @param blockCardNode
+     * @param options
+     */
+    moveBlockCard(editor, blockCardNode, options) {
+        const cursorNode = AngularEditor.getCardCursorNode(editor, blockCardNode, options);
+        const window = AngularEditor.getWindow(editor);
+        const domSelection = window.getSelection();
+        domSelection.setBaseAndExtent(cursorNode, 1, cursorNode, 1);
+    },
+    /**
+     * move slate selection to card-left or card-right
+     * @param editor
+     * @param path
+     * @param options
+     */
+    moveBlockCardCursor(editor, path, options) {
+        const cursor = {
+            path,
+            offset: options.direction === 'left' ? FAKE_LEFT_BLOCK_CARD_OFFSET : FAKE_RIGHT_BLOCK_CARD_OFFSET
+        };
+        Transforms.select(editor, { anchor: cursor, focus: cursor });
+    },
+    focus: (editor, options = { retries: 5 }) => {
+        // Return if already focused
+        if (IS_FOCUSED.get(editor)) {
+            return;
         }
-    }
-    appendLog(type, ...args) {
-        if (!this.logList) {
+        // Return if no dom node is associated with the editor, which means the editor is not yet mounted
+        // or has been unmounted. This can happen especially, while retrying to focus the editor.
+        if (!EDITOR_TO_ELEMENT.get(editor)) {
             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;
+        IS_FOCUSED.set(editor, true);
+        const el = DOMEditor.toDOMNode(editor, editor);
+        const root = DOMEditor.findDocumentOrShadowRoot(editor);
+        if (root.activeElement !== el) {
+            // IS_FOCUSED should be set before calling el.focus() to ensure that
+            // FocusedContext is updated to the correct value
+            el.focus({ preventScroll: true });
         }
-        try {
-            return JSON.stringify(value);
+    },
+    isEnabledVirtualScroll(editor) {
+        const config = EDITOR_TO_VIRTUAL_SCROLL_CONFIG.get(editor);
+        return config?.enabled || false;
+    }
+};
+
+/**
+ * Hotkey mappings for each platform.
+ */
+const HOTKEYS = {
+    bold: 'mod+b',
+    compose: ['down', 'left', 'right', 'up', 'backspace', 'enter'],
+    moveBackward: 'left',
+    moveForward: 'right',
+    moveUp: 'up',
+    moveDown: 'down',
+    moveWordBackward: 'ctrl+left',
+    moveWordForward: 'ctrl+right',
+    deleteBackward: 'shift?+backspace',
+    deleteForward: 'shift?+delete',
+    extendBackward: 'shift+left',
+    extendForward: 'shift+right',
+    italic: 'mod+i',
+    splitBlock: 'shift?+enter',
+    undo: 'mod+z'
+};
+const APPLE_HOTKEYS = {
+    moveLineBackward: 'opt+up',
+    moveLineForward: 'opt+down',
+    moveWordBackward: 'opt+left',
+    moveWordForward: 'opt+right',
+    deleteBackward: ['ctrl+backspace', 'ctrl+h'],
+    deleteForward: ['ctrl+delete', 'ctrl+d'],
+    deleteLineBackward: 'cmd+shift?+backspace',
+    deleteLineForward: ['cmd+shift?+delete', 'ctrl+k'],
+    deleteWordBackward: 'opt+shift?+backspace',
+    deleteWordForward: 'opt+shift?+delete',
+    extendLineBackward: 'opt+shift+up',
+    extendLineForward: 'opt+shift+down',
+    redo: 'cmd+shift+z',
+    transposeCharacter: 'ctrl+t'
+};
+const WINDOWS_HOTKEYS = {
+    deleteWordBackward: 'ctrl+shift?+backspace',
+    deleteWordForward: 'ctrl+shift?+delete',
+    redo: ['ctrl+y', 'ctrl+shift+z']
+};
+/**
+ * Create a platform-aware hotkey checker.
+ */
+const create = (key) => {
+    const generic = HOTKEYS[key];
+    const apple = APPLE_HOTKEYS[key];
+    const windows = WINDOWS_HOTKEYS[key];
+    const isGeneric = generic && isKeyHotkey(generic);
+    const isApple = apple && isKeyHotkey(apple);
+    const isWindows = windows && isKeyHotkey(windows);
+    return (event) => {
+        if (isGeneric && isGeneric(event)) {
+            return true;
         }
-        catch (error) {
-            return String(value);
+        if (IS_APPLE && isApple && isApple(event)) {
+            return true;
         }
-    }
-    setScrollTopValue(value) {
-        if (this.distanceInput) {
-            this.distanceInput.value = String(value ?? 0);
+        if (!IS_APPLE && isWindows && isWindows(event)) {
+            return true;
         }
-    }
+        return false;
+    };
+};
+/**
+ * Hotkeys.
+ */
+const hotkeys = {
+    isBold: create('bold'),
+    isCompose: create('compose'),
+    isMoveBackward: create('moveBackward'),
+    isMoveForward: create('moveForward'),
+    isMoveUp: create('moveUp'),
+    isMoveDown: create('moveDown'),
+    isDeleteBackward: create('deleteBackward'),
+    isDeleteForward: create('deleteForward'),
+    isDeleteLineBackward: create('deleteLineBackward'),
+    isDeleteLineForward: create('deleteLineForward'),
+    isDeleteWordBackward: create('deleteWordBackward'),
+    isDeleteWordForward: create('deleteWordForward'),
+    isExtendBackward: create('extendBackward'),
+    isExtendForward: create('extendForward'),
+    isExtendLineBackward: create('extendLineBackward'),
+    isExtendLineForward: create('extendLineForward'),
+    isItalic: create('italic'),
+    isMoveLineBackward: create('moveLineBackward'),
+    isMoveLineForward: create('moveLineForward'),
+    isMoveWordBackward: create('moveWordBackward'),
+    isMoveWordForward: create('moveWordForward'),
+    isRedo: create('redo'),
+    isSplitBlock: create('splitBlock'),
+    isTransposeCharacter: create('transposeCharacter'),
+    isUndo: create('undo')
+};
+
+function isTemplateRef(value) {
+    return value && value instanceof TemplateRef;
+}
+function isComponentType(value) {
+    return !isTemplateRef(value);
+}
+function isFlavourType(value) {
+    return value && value.isFlavour === true;
 }
 
-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();
+const shallowCompare = (obj1, obj2) => Object.keys(obj1).length === Object.keys(obj2).length &&
+    Object.keys(obj1).every(key => obj2.hasOwnProperty(key) && obj1[key] === obj2[key]);
+/**
+ * Check if a list of decorator ranges are equal to another.
+ *
+ * PERF: this requires the two lists to also have the ranges inside them in the
+ * same order, but this is an okay constraint for us since decorations are
+ * kept in order, and the odd case where they aren't is okay to re-render for.
+ */
+const isDecoratorRangeListEqual = (list, another) => {
+    if (list.length !== another.length) {
+        return false;
     }
-    onDestroy() {
-        this.nativeElement.remove();
+    for (let i = 0; i < list.length; i++) {
+        const range = list[i];
+        const other = another[i];
+        const { anchor: rangeAnchor, focus: rangeFocus, ...rangeOwnProps } = range;
+        const { anchor: otherAnchor, focus: otherFocus, ...otherOwnProps } = other;
+        if (!Range.equals(range, other) ||
+            range[PLACEHOLDER_SYMBOL] !== other[PLACEHOLDER_SYMBOL] ||
+            !shallowCompare(rangeOwnProps, otherOwnProps)) {
+            return false;
+        }
     }
+    return true;
+};
+
+const isValid = (value) => (Element.isElement(value) && value.children.length > 0 && value.children.every(child => isValid(child))) ||
+    Text$1.isText(value);
+const check = (document) => {
+    return document.every(value => Element.isElement(value) && isValid(value));
+};
+function normalize(document) {
+    return document.filter(value => Element.isElement(value) && isValid(value));
 }
-const getBlockCardByNativeElement = (nativeElement) => {
-    const blockCardElement = nativeElement?.parentElement?.parentElement;
-    if (blockCardElement && blockCardElement.classList.contains(SLATE_BLOCK_CARD_CLASS_NAME)) {
-        return blockCardElement;
-    }
-    return null;
+
+const createThrottleRAF = () => {
+    let timerId = null;
+    const throttleRAF = (fn) => {
+        const scheduleFunc = () => {
+            timerId = requestAnimationFrame(() => {
+                timerId = null;
+                fn();
+            });
+        };
+        if (timerId !== null) {
+            cancelAnimationFrame(timerId);
+            timerId = null;
+        }
+        scheduleFunc();
+    };
+    return throttleRAF;
 };
 
-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 EDITOR_TO_IS_FROM_SCROLL_TO = new WeakMap();
-const isValidNumber = (value) => {
-    return typeof value === 'number' && !Number.isNaN(value);
+const isClipboardReadSupported = () => {
+    return 'clipboard' in navigator && 'read' in navigator.clipboard;
 };
-const debugLog = (type, ...args) => {
-    const doc = document;
-    VirtualScrollDebugOverlay.log(doc, type, ...args);
+const isClipboardWriteSupported = () => {
+    return 'clipboard' in navigator && 'write' in navigator.clipboard;
 };
-const cacheHeightByElement = (editor, element, height) => {
-    if (!AngularEditor.isEnabledVirtualScroll(editor)) {
-        return;
-    }
-    if (!isValidNumber(height)) {
-        console.error('cacheHeightByElement: height must be number', height);
-        return;
-    }
-    const key = AngularEditor.findKey(editor, element);
-    const heights = ELEMENT_KEY_TO_HEIGHTS.get(editor);
-    heights.set(key.id, height);
+const isClipboardWriteTextSupported = () => {
+    return 'clipboard' in navigator && 'writeText' in navigator.clipboard;
 };
-const setMinHeightByElement = (editor, element, rootElementMarginBottom) => {
-    if (!AngularEditor.isEnabledVirtualScroll(editor)) {
-        return;
-    }
-    const realHeight = getCachedHeightByElement(editor, element);
-    if (realHeight) {
-        const nativeElement = AngularEditor.toDOMNode(editor, element);
-        const blockCard = getBlockCardByNativeElement(nativeElement);
-        if (blockCard) {
-            const minHeight = realHeight - rootElementMarginBottom;
-            blockCard.style.minHeight = minHeight + 'px';
+const isClipboardFile = (item) => {
+    return item.types.find(i => i.match(/^image\//));
+};
+const isInvalidTable = (nodes = []) => {
+    return nodes.some(node => node.tagName.toLowerCase() === 'tr');
+};
+const stripHtml = (html) => {
+    // See <https://github.com/developit/preact-markup/blob/4788b8d61b4e24f83688710746ee36e7464f7bbc/src/parse-markup.js#L60-L69>
+    const doc = document.implementation.createHTMLDocument('');
+    doc.documentElement.innerHTML = html.trim();
+    return doc.body.textContent || doc.body.innerText || '';
+};
+const blobAsString = (blob) => {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.addEventListener('loadend', () => {
+            const text = reader.result;
+            resolve(text);
+        });
+        reader.addEventListener('error', () => {
+            reject(reader.error);
+        });
+        reader.readAsText(blob);
+    });
+};
+const completeTable = (fragment) => {
+    const result = document.createDocumentFragment();
+    const table = document.createElement('table');
+    result.appendChild(table);
+    table.appendChild(fragment);
+    return result;
+};
+
+const setDataTransferClipboard = (dataTransfer, htmlText) => {
+    dataTransfer?.setData(`text/html`, htmlText);
+};
+const setDataTransferClipboardText = (data, text) => {
+    data?.setData(`text/plain`, text);
+};
+const getDataTransferClipboard = (data) => {
+    const html = data?.getData(`text/html`);
+    if (html) {
+        const htmlClipboardData = getClipboardFromHTMLText(html);
+        if (htmlClipboardData) {
+            return htmlClipboardData;
+        }
+        const textData = getDataTransferClipboardText(data);
+        if (textData) {
+            return {
+                html,
+                ...textData
+            };
+        }
+        else {
+            return { html };
         }
     }
-};
-const clearMinHeightByElement = (editor, element) => {
-    if (!AngularEditor.isEnabledVirtualScroll(editor)) {
-        return;
+    else {
+        const textData = getDataTransferClipboardText(data);
+        return textData;
     }
-    const nativeElement = AngularEditor.toDOMNode(editor, element);
-    const blockCard = getBlockCardByNativeElement(nativeElement);
-    if (blockCard && blockCard.style.minHeight) {
-        blockCard.style.minHeight = '';
-        return true;
+};
+const getDataTransferClipboardText = (data) => {
+    if (!data) {
+        return null;
     }
-    else {
-        return false;
+    const text = data?.getData(`text/plain`);
+    if (text) {
+        const htmlClipboardData = getClipboardFromHTMLText(text);
+        if (htmlClipboardData) {
+            return htmlClipboardData;
+        }
     }
+    return { text };
 };
-const calcHeightByElement = (editor, element) => {
-    const view = ELEMENT_TO_COMPONENT.get(element);
-    if (!view) {
-        return;
+
+const setNavigatorClipboard = async (htmlText, data, text = '') => {
+    let textClipboard = text;
+    if (isClipboardWriteSupported()) {
+        await navigator.clipboard.write([
+            new ClipboardItem({
+                'text/html': new Blob([htmlText], {
+                    type: 'text/html'
+                }),
+                'text/plain': new Blob([textClipboard ?? JSON.stringify(data)], { type: 'text/plain' })
+            })
+        ]);
     }
-    const height = view.calcHeight();
-    cacheHeightByElement(editor, element, height);
-    return height;
 };
-const measureHeightByIndics = (editor, indics, force = false) => {
-    let hasChanged = false;
-    indics.forEach((index, i) => {
-        const element = editor.children[index];
-        const preHeight = getCachedHeightByElement(editor, element);
-        if (preHeight && !force) {
-            if (isDebug) {
-                const height = calcHeightByElement(editor, element);
-                if (height !== preHeight) {
-                    debugLog('warn', 'calcHeightByElement: height not equal, index: ', index, 'preHeight: ', preHeight, 'height: ', height);
+const getNavigatorClipboard = async () => {
+    if (!isClipboardReadSupported()) {
+        return null;
+    }
+    const clipboardItems = await navigator.clipboard.read();
+    let clipboardData = {};
+    if (Array.isArray(clipboardItems) && clipboardItems[0] instanceof ClipboardItem) {
+        for (const item of clipboardItems) {
+            if (isClipboardFile(item)) {
+                const clipboardFiles = item.types.filter(type => type.match(/^image\//));
+                const fileBlobs = await Promise.all(clipboardFiles.map(type => item.getType(type)));
+                const urls = fileBlobs.filter(Boolean).map(blob => URL.createObjectURL(blob));
+                const files = await Promise.all(urls.map(async (url) => {
+                    const blob = await (await fetch(url)).blob();
+                    return new File([blob], 'file', { type: blob.type });
+                }));
+                clipboardData = {
+                    ...clipboardData,
+                    files
+                };
+            }
+            if (item.types.includes('text/html')) {
+                const htmlContent = await blobAsString(await item.getType('text/html'));
+                const htmlClipboardData = getClipboardFromHTMLText(htmlContent);
+                if (htmlClipboardData) {
+                    clipboardData = { ...clipboardData, ...htmlClipboardData };
+                    return clipboardData;
+                }
+                if (htmlContent && htmlContent.trim()) {
+                    clipboardData = { ...clipboardData, html: htmlContent };
                 }
             }
-            return;
-        }
-        const currentHeight = calcHeightByElement(editor, element);
-        if (isValidNumber(currentHeight) && currentHeight !== preHeight) {
-            hasChanged = true;
-        }
-        if (isDebug && isValidNumber(currentHeight)) {
-            debugLog('log', 'measureHeightByIndics: height not equal, index: ', index, 'preHeight: ', preHeight, 'height: ', currentHeight);
+            if (item.types.includes('text/plain')) {
+                const textContent = await blobAsString(await item.getType('text/plain'));
+                clipboardData = {
+                    ...clipboardData,
+                    text: stripHtml(textContent)
+                };
+            }
         }
-    });
-    return hasChanged;
+    }
+    return clipboardData;
 };
-const getBusinessTop = (editor) => {
-    return EDITOR_TO_BUSINESS_TOP.get(editor) ?? 0;
+
+const buildHTMLText = (wrapper, attach, data) => {
+    const stringObj = JSON.stringify(data);
+    const encoded = window.btoa(encodeURIComponent(stringObj));
+    attach.setAttribute(SlateFragmentAttributeKey, encoded);
+    return wrapper.innerHTML;
 };
-const getCachedHeightByElement = (editor, element) => {
-    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);
+const getClipboardFromHTMLText = (html) => {
+    const fragmentAttribute = getSlateFragmentAttribute(html);
+    if (fragmentAttribute) {
+        try {
+            const decoded = decodeURIComponent(window.atob(fragmentAttribute));
+            const result = JSON.parse(decoded);
+            if (result && Array.isArray(result) && result.length > 0) {
+                return {
+                    elements: result
+                };
+            }
+        }
+        catch (error) {
+            console.error(error);
+            return null;
+        }
     }
     return null;
 };
-const buildHeightsAndAccumulatedHeights = (editor, visibleStates) => {
-    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 isVisible = visibleStates[i];
-        let height = isVisible ? getCachedHeightByElement(editor, children[i]) : 0;
-        if (height === null) {
-            try {
-                height = editor.getRoughHeight(children[i]);
-            }
-            catch (error) {
-                console.error('buildHeightsAndAccumulatedHeights: getRoughHeight error', error);
-            }
+const createClipboardData = (html, elements, text, files) => {
+    const data = { elements, text, html, files };
+    return data;
+};
+const getClipboardData = async (dataTransfer) => {
+    let clipboardData = null;
+    if (dataTransfer) {
+        let filesData = {};
+        if (dataTransfer.files.length) {
+            filesData = { ...filesData, files: Array.from(dataTransfer.files) };
         }
-        heights[i] = height;
-        accumulatedHeights[i + 1] = accumulatedHeights[i] + height;
+        clipboardData = getDataTransferClipboard(dataTransfer);
+        return { ...clipboardData, ...filesData };
     }
-    return { heights, accumulatedHeights };
-};
-const calculateVirtualTopHeight = (editor, startIndex, visibleStates) => {
-    const { accumulatedHeights } = buildHeightsAndAccumulatedHeights(editor, visibleStates);
-    return accumulatedHeights[startIndex] ?? 0;
+    if (isClipboardReadSupported()) {
+        return await getNavigatorClipboard();
+    }
+    return clipboardData;
 };
-const scrollToElement = (editor, element, scrollTo) => {
-    const children = editor.children;
-    if (!children.length) {
+/**
+ * @param wrapper get wrapper.innerHTML string which will be written in clipboard
+ * @param attach attach must be child element of wrapper which will be attached json data
+ * @returns void
+ */
+const setClipboardData = async (clipboardData, wrapper, attach, dataTransfer) => {
+    if (!clipboardData) {
         return;
     }
-    const anchorIndex = children.findIndex(item => item === element);
-    if (anchorIndex < 0) {
+    const { elements, text } = clipboardData;
+    if (isClipboardWriteSupported()) {
+        const htmlText = buildHTMLText(wrapper, attach, elements);
+        // TODO
+        // maybe fail to write when copy some cell in table
+        return await setNavigatorClipboard(htmlText, elements, text);
+    }
+    if (dataTransfer) {
+        const htmlText = buildHTMLText(wrapper, attach, elements);
+        setDataTransferClipboard(dataTransfer, htmlText);
+        setDataTransferClipboardText(dataTransfer, text);
         return;
     }
-    const visibleStates = editor.getAllVisibleStates();
-    const { accumulatedHeights } = buildHeightsAndAccumulatedHeights(editor, visibleStates);
-    scrollTo((accumulatedHeights[anchorIndex] ?? 0) + getBusinessTop(editor));
-    EDITOR_TO_IS_FROM_SCROLL_TO.set(editor, true);
-    setTimeout(() => {
-        console.log('scrollToElement: end scroll');
-        EDITOR_TO_IS_FROM_SCROLL_TO.set(editor, false);
-    }, 0);
+    const htmlText = buildHTMLText(wrapper, attach, elements);
+    // Compatible with situations where navigator.clipboard.write is not supported and dataTransfer is empty
+    // Such as contextmenu copy in Firefox.
+    if (isClipboardWriteTextSupported()) {
+        return await navigator.clipboard.writeText(htmlText);
+    }
+    else {
+        return await fallbackCopyText(htmlText);
+    }
+};
+const fallbackCopyText = async (text) => {
+    return new Promise((resolve, reject) => {
+        const textArea = document.createElement('textarea');
+        textArea.value = text;
+        textArea.style.position = 'fixed';
+        textArea.style.left = '-999999px';
+        textArea.style.top = '-999999px';
+        textArea.style.opacity = '0';
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+        try {
+            const successful = document.execCommand('copy');
+            document.body.removeChild(textArea);
+            if (successful) {
+                resolve();
+            }
+            else {
+                reject(new Error('execCommand error'));
+            }
+        }
+        catch (err) {
+            document.body.removeChild(textArea);
+            reject(err);
+        }
+    });
 };
 
 const withAngular = (editor, clipboardFormatKey = 'x-slate-fragment') => {
@@ -3330,10 +3369,10 @@ const forceOnDOMPaste = IS_SAFARI;
 class SlateEditable {
     set virtualScroll(config) {
         this.virtualScrollConfig = config;
+        EDITOR_TO_VIRTUAL_SCROLL_CONFIG.set(this.editor, config);
         if (isDebugScrollTop) {
             debugLog('log', 'virtualScrollConfig scrollTop:', config.scrollTop);
         }
-        IS_ENABLED_VIRTUAL_SCROLL.set(this.editor, config.enabled);
         if (this.isEnabledVirtualScroll()) {
             this.tryUpdateVirtualViewport();
         }
@@ -3384,8 +3423,6 @@ class SlateEditable {
         this.virtualScrollConfig = {
             enabled: false,
             scrollTop: 0,
-            viewportHeight: 0,
-            viewportBoundingTop: 0,
             scrollContainer: null
         };
         this.inViewportChildren = [];
@@ -3518,13 +3555,13 @@ class SlateEditable {
         if (this.isEnabledVirtualScroll()) {
             this.virtualScrollInitialized = true;
             this.virtualTopHeightElement = document.createElement('div');
-            this.virtualTopHeightElement.classList.add('virtual-top-height');
+            this.virtualTopHeightElement.classList.add(VIRTUAL_TOP_HEIGHT_CLASS_NAME);
             this.virtualTopHeightElement.contentEditable = 'false';
             this.virtualBottomHeightElement = document.createElement('div');
-            this.virtualBottomHeightElement.classList.add('virtual-bottom-height');
+            this.virtualBottomHeightElement.classList.add(VIRTUAL_BOTTOM_HEIGHT_CLASS_NAME);
             this.virtualBottomHeightElement.contentEditable = 'false';
             this.virtualCenterOutlet = document.createElement('div');
-            this.virtualCenterOutlet.classList.add('virtual-center-outlet');
+            this.virtualCenterOutlet.classList.add(VIRTUAL_CENTER_OUTLET_CLASS_NAME);
             this.elementRef.nativeElement.appendChild(this.virtualTopHeightElement);
             this.elementRef.nativeElement.appendChild(this.virtualCenterOutlet);
             this.elementRef.nativeElement.appendChild(this.virtualBottomHeightElement);
@@ -3548,6 +3585,17 @@ class SlateEditable {
                 }
             });
             this.editorResizeObserver.observe(this.elementRef.nativeElement);
+            if (this.virtualScrollConfig.scrollContainer) {
+                this.editorScrollContainerResizeObserver = new ResizeObserver(entries => {
+                    const height = this.virtualScrollConfig.scrollContainer.getBoundingClientRect().height;
+                    EDITOR_TO_VIEWPORT_HEIGHT.set(this.editor, height);
+                    if (isDebug) {
+                        debugLog('log', 'editorScrollContainerResizeObserver calc viewport height: ', height);
+                        this.virtualTopHeightElement.setAttribute('viewport-height', height.toString());
+                    }
+                });
+                this.editorScrollContainerResizeObserver.observe(this.virtualScrollConfig.scrollContainer);
+            }
             let pendingRemeasureIndics = [];
             this.indicsOfNeedBeMeasured$
                 .pipe(tap((previousValue) => {
@@ -3582,9 +3630,9 @@ class SlateEditable {
         if (!this.virtualScrollInitialized) {
             return;
         }
-        this.virtualTopHeightElement.style.height = `${topHeight}px`;
+        this.virtualTopHeightElement.style.height = `${roundTo(topHeight, 1)}px`;
         if (bottomHeight !== undefined) {
-            this.virtualBottomHeightElement.style.height = `${bottomHeight}px`;
+            this.virtualBottomHeightElement.style.height = `${roundTo(bottomHeight, 1)}px`;
         }
     }
     getActualVirtualTopHeight() {
@@ -3629,7 +3677,7 @@ class SlateEditable {
             const refreshVirtualTopHeight = calculateVirtualTopHeight(this.editor, this.inViewportIndics[0], visibleStates);
             if (topHeight !== refreshVirtualTopHeight) {
                 if (isDebug) {
-                    debugLog('log', 'update top height since dirty state（正数减去高度，负数代表增加高度）: ', topHeight - refreshVirtualTopHeight);
+                    debugLog('log', 'update top height since dirty state，增加高度: ', refreshVirtualTopHeight - topHeight);
                 }
                 this.setVirtualSpaceHeight(refreshVirtualTopHeight);
                 return;
@@ -3668,9 +3716,11 @@ class SlateEditable {
                             const newHeights = buildHeightsAndAccumulatedHeights(this.editor, visibleStates);
                             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 (topHeightBeforeAdd !== actualTopHeightAfterAdd) {
+                                this.setVirtualSpaceHeight(newTopHeight);
+                                if (isDebug) {
+                                    debugLog('log', `update top height since will add element in top，减去高度: ${topHeightBeforeAdd - actualTopHeightAfterAdd}`);
+                                }
                             }
                         }
                     }
@@ -3696,32 +3746,12 @@ class SlateEditable {
             };
         }
         const scrollTop = this.virtualScrollConfig.scrollTop;
-        let viewportHeight = this.virtualScrollConfig.viewportHeight ?? 0;
-        if (!viewportHeight) {
-            return {
-                inViewportChildren: [],
-                inViewportIndics: [],
-                top: 0,
-                bottom: 0,
-                heights: []
-            };
-        }
+        let viewportHeight = getViewportHeight(this.editor);
         const elementLength = children.length;
-        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);
-                    this.virtualTopHeightElement.setAttribute('data-business-top', businessTop.toString());
-                }
-            }, 100);
+        let businessTop = getBusinessTop(this.editor);
+        if (businessTop === 0 && this.virtualScrollConfig.scrollTop > 0) {
+            businessTop = calcBusinessTop(this.editor);
         }
-        const businessTop = getBusinessTop(this.editor);
         const { heights, accumulatedHeights } = buildHeightsAndAccumulatedHeights(this.editor, visibleStates);
         const totalHeight = accumulatedHeights[elementLength] + businessTop;
         let startPosition = Math.max(scrollTop - businessTop, 0);
@@ -3955,6 +3985,9 @@ class SlateEditable {
             if (!hasDomSelectionInEditor && !AngularEditor.isFocused(this.editor)) {
                 return;
             }
+            if (AngularEditor.isReadOnly(this.editor) && (!selection || Range.isCollapsed(selection))) {
+                return;
+            }
             // If the DOM selection is in the editor and the editor selection is already correct, we're done.
             if (hasDomSelection && hasDomSelectionInEditor && selection && hasStringTarget(domSelection)) {
                 const rangeFromDOMSelection = AngularEditor.toSlateRange(this.editor, domSelection, {
@@ -4900,6 +4933,7 @@ class SlateEditable {
     //#endregion
     ngOnDestroy() {
         this.editorResizeObserver?.disconnect();
+        this.editorScrollContainerResizeObserver?.disconnect();
         NODE_TO_ELEMENT.delete(this.editor);
         this.manualListeners.forEach(manualListener => {
             manualListener();
@@ -5425,5 +5459,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_IS_FROM_SCROLL_TO, 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, cacheHeightByElement, calcHeightByElement, calculateVirtualTopHeight, check, clearMinHeightByElement, completeTable, createClipboardData, createText, createThrottleRAF, debugLog, defaultScrollSelectionIntoView, fallbackCopyText, getBlockCardByNativeElement, getBusinessTop, getCachedHeightByElement, 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, isDebug, isDebugScrollTop, isDecoratorRangeListEqual, isFlavourType, isInvalidTable, isTemplateRef, isValid, isValidNumber, measureHeightByIndics, normalize, scrollToElement, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setMinHeightByElement, 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_IS_FROM_SCROLL_TO, EDITOR_TO_ROOT_NODE_WIDTH, EDITOR_TO_VIEWPORT_HEIGHT, EDITOR_TO_VIRTUAL_SCROLL_CONFIG, 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_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_BOTTOM_HEIGHT_CLASS_NAME, VIRTUAL_CENTER_OUTLET_CLASS_NAME, VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT, VIRTUAL_TOP_HEIGHT_CLASS_NAME, VoidTextFlavour, blobAsString, buildHTMLText, buildHeightsAndAccumulatedHeights, cacheHeightByElement, calcBusinessTop, calcHeightByElement, calculateVirtualTopHeight, check, clearMinHeightByElement, completeTable, createClipboardData, createText, createThrottleRAF, debugLog, defaultScrollSelectionIntoView, fallbackCopyText, getBlockCardByNativeElement, getBusinessTop, getCachedHeightByElement, getCardTargetAttribute, getClipboardData, getClipboardFromHTMLText, getContentHeight, getDataTransferClipboard, getDataTransferClipboardText, getNavigatorClipboard, getPlainText, getScrollContainer, getSelection, getSlateFragmentAttribute, getViewportHeight, getZeroTextNode, hasAfterContextChange, hasBeforeContextChange, hasBlockCard, hasBlockCardWithNode, hotkeys, isCardCenterByTargetAttr, isCardLeft, isCardLeftByTargetAttr, isCardRightByTargetAttr, isClipboardFile, isClipboardReadSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isComponentType, isDOMText, isDebug, isDebugScrollTop, isDecoratorRangeListEqual, isFlavourType, isInvalidTable, isTemplateRef, isValid, isValidNumber, measureHeightByIndics, normalize, roundTo, scrollToElement, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setMinHeightByElement, setNavigatorClipboard, shallowCompare, stripHtml, withAngular };
 //# sourceMappingURL=slate-angular.mjs.map