slate-angular 20.1.0 → 20.2.0-next.1

package/fesm2022/slate-angular.mjs

@@ -470,6 +470,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 SLATE_DEBUG_KEY = '__SLATE_DEBUG__';
 
 /**
  * Hotkey mappings for each platform.
@@ -1683,6 +1686,50 @@ class BaseFlavour {
     }
 }
 
+const SLATE_BLOCK_CARD_CLASS_NAME = 'slate-block-card';
+class SlateBlockCard {
+    onInit() {
+        const nativeElement = document.createElement('div');
+        nativeElement.classList.add(SLATE_BLOCK_CARD_CLASS_NAME);
+        this.nativeElement = nativeElement;
+        this.createContent();
+    }
+    createContent() {
+        const leftCaret = document.createElement('span');
+        leftCaret.setAttribute(`card-target`, 'card-left');
+        leftCaret.classList.add('card-left');
+        leftCaret.appendChild(getZeroTextNode());
+        const rightCaret = document.createElement('span');
+        rightCaret.setAttribute(`card-target`, 'card-right');
+        rightCaret.classList.add('card-right');
+        rightCaret.appendChild(getZeroTextNode());
+        const center = document.createElement('div');
+        center.setAttribute(`card-target`, 'card-center');
+        this.nativeElement.appendChild(leftCaret);
+        this.nativeElement.appendChild(center);
+        this.nativeElement.appendChild(rightCaret);
+        this.centerContainer = center;
+    }
+    append() {
+        this.centerRootNodes.forEach(rootNode => !this.centerContainer.contains(rootNode) && this.centerContainer.appendChild(rootNode));
+    }
+    initializeCenter(rootNodes) {
+        this.centerRootNodes = rootNodes;
+        this.append();
+    }
+    onDestroy() {
+        this.nativeElement.remove();
+    }
+}
+const getBlockCardByNativeElement = (nativeElement) => {
+    const blockCardElement = nativeElement?.parentElement?.parentElement;
+    if (blockCardElement && blockCardElement.classList.contains(SLATE_BLOCK_CARD_CLASS_NAME)) {
+        return blockCardElement;
+    }
+    return null;
+};
+
+const DEFAULT_ELEMENT_HEIGHT = 24;
 class BaseElementFlavour extends BaseFlavour {
     constructor() {
         super(...arguments);
@@ -1777,6 +1824,12 @@ class BaseElementFlavour extends BaseFlavour {
             readonly: this._context.readonly
         };
     }
+    getRealHeight() {
+        const blockCard = getBlockCardByNativeElement(this.nativeElement);
+        const target = blockCard || this.nativeElement;
+        const computedStyle = getComputedStyle(target);
+        return Promise.resolve(target.offsetHeight + parseFloat(computedStyle.marginTop) + parseFloat(computedStyle.marginBottom));
+    }
 }
 
 class DefaultElementFlavour extends BaseElementFlavour {
@@ -2203,49 +2256,6 @@ const createText = (text) => {
     return { nativeElement };
 };
 
-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;
-};
-
 class ListRender {
     constructor(viewContext, viewContainerRef, getOutletParent, getOutletElement) {
         this.viewContext = viewContext;
@@ -2262,11 +2272,13 @@ class ListRender {
     initialize(children, parent, childrenContext) {
         this.initialized = true;
         this.children = children;
+        const isRoot = parent === this.viewContext.editor;
+        const firstIndex = isRoot ? this.viewContext.editor.children.indexOf(children[0]) : 0;
         const parentPath = AngularEditor.findPath(this.viewContext.editor, parent);
-        children.forEach((descendant, index) => {
-            NODE_TO_INDEX.set(descendant, index);
+        children.forEach((descendant, _index) => {
+            NODE_TO_INDEX.set(descendant, firstIndex + _index);
             NODE_TO_PARENT.set(descendant, parent);
-            const context = getContext(index, descendant, parentPath, childrenContext, this.viewContext);
+            const context = getContext(firstIndex + _index, descendant, parentPath, childrenContext, this.viewContext);
             const viewType = getViewType(descendant, parent, this.viewContext);
             const view = createEmbeddedViewOrComponentOrFlavour(viewType, context, this.viewContext, this.viewContainerRef);
             const blockCard = createBlockCard(descendant, view, this.viewContext);
@@ -2294,6 +2306,8 @@ class ListRender {
         const outletParent = this.getOutletParent();
         const diffResult = this.differ.diff(children);
         const parentPath = AngularEditor.findPath(this.viewContext.editor, parent);
+        const isRoot = parent === this.viewContext.editor;
+        const firstIndex = isRoot ? this.viewContext.editor.children.indexOf(children[0]) : 0;
         if (diffResult) {
             let firstRootNode = getRootNodes(this.views[0], this.blockCards[0])[0];
             const newContexts = [];
@@ -2301,9 +2315,10 @@ class ListRender {
             const newViews = [];
             const newBlockCards = [];
             diffResult.forEachItem(record => {
-                NODE_TO_INDEX.set(record.item, record.currentIndex);
+                const currentIndex = firstIndex + record.currentIndex;
+                NODE_TO_INDEX.set(record.item, currentIndex);
                 NODE_TO_PARENT.set(record.item, parent);
-                let context = getContext(record.currentIndex, record.item, parentPath, childrenContext, this.viewContext);
+                let context = getContext(currentIndex, record.item, parentPath, childrenContext, this.viewContext);
                 const viewType = getViewType(record.item, parent, this.viewContext);
                 newViewTypes.push(viewType);
                 let view;
@@ -2371,16 +2386,16 @@ class ListRender {
         }
         else {
             const newContexts = [];
-            this.children.forEach((child, index) => {
-                NODE_TO_INDEX.set(child, index);
+            this.children.forEach((child, _index) => {
+                NODE_TO_INDEX.set(child, firstIndex + _index);
                 NODE_TO_PARENT.set(child, parent);
-                let context = getContext(index, child, parentPath, childrenContext, this.viewContext);
-                const previousContext = this.contexts[index];
+                let context = getContext(firstIndex + _index, child, parentPath, childrenContext, this.viewContext);
+                const previousContext = this.contexts[_index];
                 if (memoizedContext(this.viewContext, child, previousContext, context)) {
                     context = previousContext;
                 }
                 else {
-                    updateContext(this.views[index], context, this.viewContext);
+                    updateContext(this.views[_index], context, this.viewContext);
                 }
                 newContexts.push(context);
             });
@@ -2538,9 +2553,25 @@ function executeAfterViewInit(editor) {
     clearAfterViewInitQueue(editor);
 }
 
+const JUST_NOW_UPDATED_VIRTUAL_VIEW = new WeakMap();
 // not correctly clipboardData on beforeinput
 const forceOnDOMPaste = IS_SAFARI;
 class SlateEditable {
+    set virtualScroll(config) {
+        this.virtualConfig = config;
+        this.refreshVirtualViewAnimId && cancelAnimationFrame(this.refreshVirtualViewAnimId);
+        this.refreshVirtualViewAnimId = requestAnimationFrame(() => {
+            const virtualView = this.refreshVirtualView();
+            const diff = this.diffVirtualView(virtualView);
+            if (diff) {
+                this.applyVirtualView(virtualView);
+                if (this.listRender.initialized) {
+                    this.listRender.update(virtualView.renderedChildren, this.editor, this.context);
+                }
+                this.scheduleMeasureVisibleHeights();
+            }
+        });
+    }
     get hasBeforeInputSupport() {
         return HAS_BEFORE_INPUT_SUPPORT;
     }
@@ -2576,6 +2607,24 @@ class SlateEditable {
         this.getOutletParent = () => {
             return this.elementRef.nativeElement;
         };
+        this.getOutletElement = () => {
+            if (this.virtualScrollInitialized) {
+                return this.virtualCenterOutlet;
+            }
+            else {
+                return null;
+            }
+        };
+        this.virtualConfig = {
+            enabled: false,
+            scrollTop: 0,
+            viewportHeight: 0
+        };
+        this.renderedChildren = [];
+        this.virtualVisibleIndexes = new Set();
+        this.measuredHeights = new Map();
+        this.measurePending = false;
+        this.virtualScrollInitialized = false;
     }
     ngOnInit() {
         this.editor.injector = this.injector;
@@ -2599,7 +2648,8 @@ class SlateEditable {
         // add browser class
         let browserClass = IS_FIREFOX ? 'firefox' : IS_SAFARI ? 'safari' : '';
         browserClass && this.elementRef.nativeElement.classList.add(browserClass);
-        this.listRender = new ListRender(this.viewContext, this.viewContainerRef, this.getOutletParent, () => null);
+        this.initializeVirtualScrolling();
+        this.listRender = new ListRender(this.viewContext, this.viewContainerRef, this.getOutletParent, this.getOutletElement);
     }
     ngOnChanges(simpleChanges) {
         if (!this.initialized) {
@@ -2630,12 +2680,16 @@ 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(this.editor.children, this.editor, this.context);
+                this.listRender.initialize(childrenForRender, this.editor, this.context);
             }
             else {
-                this.listRender.update(this.editor.children, this.editor, this.context);
+                this.listRender.update(childrenForRender, this.editor, this.context);
             }
+            this.scheduleMeasureVisibleHeights();
             this.cdr.markForCheck();
         }
     }
@@ -2756,7 +2810,10 @@ class SlateEditable {
     ngDoCheck() { }
     forceRender() {
         this.updateContext();
-        this.listRender.update(this.editor.children, this.editor, this.context);
+        const virtualView = this.refreshVirtualView();
+        this.applyVirtualView(virtualView);
+        this.listRender.update(virtualView.renderedChildren, this.editor, this.context);
+        this.scheduleMeasureVisibleHeights();
         // 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
@@ -2795,7 +2852,10 @@ class SlateEditable {
     render() {
         const changed = this.updateContext();
         if (changed) {
-            this.listRender.update(this.editor.children, this.editor, this.context);
+            const virtualView = this.refreshVirtualView();
+            this.applyVirtualView(virtualView);
+            this.listRender.update(virtualView.renderedChildren, this.editor, this.context);
+            this.scheduleMeasureVisibleHeights();
         }
     }
     updateContext() {
@@ -2858,6 +2918,234 @@ class SlateEditable {
         decorations.push(...placeholderDecorations);
         return decorations;
     }
+    shouldUseVirtual() {
+        return !!(this.virtualConfig && this.virtualConfig.enabled);
+    }
+    initializeVirtualScrolling() {
+        if (this.virtualScrollInitialized) {
+            return;
+        }
+        if (this.virtualConfig && this.virtualConfig.enabled) {
+            this.virtualScrollInitialized = true;
+            this.virtualTopHeightElement = document.createElement('div');
+            this.virtualTopHeightElement.classList.add('virtual-top-height');
+            this.virtualBottomHeightElement = document.createElement('div');
+            this.virtualBottomHeightElement.classList.add('virtual-bottom-height');
+            this.virtualCenterOutlet = document.createElement('div');
+            this.virtualCenterOutlet.classList.add('virtual-center-outlet');
+            this.elementRef.nativeElement.appendChild(this.virtualTopHeightElement);
+            this.elementRef.nativeElement.appendChild(this.virtualCenterOutlet);
+            this.elementRef.nativeElement.appendChild(this.virtualBottomHeightElement);
+        }
+    }
+    changeVirtualHeight(topHeight, bottomHeight) {
+        if (!this.virtualScrollInitialized) {
+            return;
+        }
+        this.virtualTopHeightElement.style.height = `${topHeight}px`;
+        this.virtualBottomHeightElement.style.height = `${bottomHeight}px`;
+    }
+    refreshVirtualView() {
+        const children = (this.editor.children || []);
+        if (!children.length || !this.shouldUseVirtual()) {
+            return {
+                renderedChildren: children,
+                visibleIndexes: new Set(),
+                top: 0,
+                bottom: 0,
+                heights: []
+            };
+        }
+        const scrollTop = this.virtualConfig.scrollTop ?? 0;
+        const viewportHeight = this.virtualConfig.viewportHeight ?? 0;
+        if (!viewportHeight) {
+            // 已经启用虚拟滚动，但可视区域高度还未获取到，先置空不渲染
+            return {
+                renderedChildren: [],
+                visibleIndexes: new Set(),
+                top: 0,
+                bottom: 0,
+                heights: []
+            };
+        }
+        const bufferCount = this.virtualConfig.bufferCount ?? VIRTUAL_SCROLL_DEFAULT_BUFFER_COUNT;
+        const heights = children.map((_, idx) => this.getBlockHeight(idx));
+        const accumulatedHeights = this.buildAccumulatedHeight(heights);
+        let visibleStart = 0;
+        // 按真实或估算高度往后累加，找到滚动起点所在块
+        while (visibleStart < heights.length && accumulatedHeights[visibleStart + 1] <= scrollTop) {
+            visibleStart++;
+        }
+        // 向上预留 bufferCount 块
+        const startIndex = Math.max(0, visibleStart - bufferCount);
+        const top = accumulatedHeights[startIndex];
+        const bufferBelowHeight = this.getBufferBelowHeight(viewportHeight, visibleStart, bufferCount);
+        const targetHeight = accumulatedHeights[visibleStart] - top + viewportHeight + bufferBelowHeight;
+        const visible = [];
+        const visibleIndexes = [];
+        let accumulated = 0;
+        let cursor = startIndex;
+        // 循环累计高度超出目标高度（可视高度 + 上下 buffer）
+        while (cursor < children.length && accumulated < targetHeight) {
+            visible.push(children[cursor]);
+            visibleIndexes.push(cursor);
+            accumulated += this.getBlockHeight(cursor);
+            cursor++;
+        }
+        const bottom = heights.slice(cursor).reduce((acc, height) => acc + height, 0);
+        const renderedChildren = visible.length ? visible : children;
+        const visibleIndexesSet = new Set(visibleIndexes);
+        return {
+            renderedChildren,
+            visibleIndexes: visibleIndexesSet,
+            top,
+            bottom,
+            heights
+        };
+    }
+    applyVirtualView(virtualView) {
+        this.renderedChildren = virtualView.renderedChildren;
+        this.changeVirtualHeight(virtualView.top, virtualView.bottom);
+        this.virtualVisibleIndexes = virtualView.visibleIndexes;
+    }
+    diffVirtualView(virtualView) {
+        if (!this.renderedChildren.length) {
+            return true;
+        }
+        const oldVisibleIndexes = [...this.virtualVisibleIndexes];
+        const newVisibleIndexes = [...virtualView.visibleIndexes];
+        if (newVisibleIndexes[0] !== oldVisibleIndexes[0] ||
+            newVisibleIndexes[newVisibleIndexes.length - 1] !== oldVisibleIndexes[oldVisibleIndexes.length - 1]) {
+            if (localStorage.getItem(SLATE_DEBUG_KEY) === 'true') {
+                const diffTopRenderedIndexes = [];
+                const diffBottomRenderedIndexes = [];
+                let direction = '';
+                if (newVisibleIndexes[0] > oldVisibleIndexes[0]) {
+                    // 向下
+                    direction = 'down';
+                    for (let index = 0; index < oldVisibleIndexes.length; index++) {
+                        const element = oldVisibleIndexes[index];
+                        if (!newVisibleIndexes.includes(element)) {
+                            diffTopRenderedIndexes.push(element);
+                        }
+                        else {
+                            break;
+                        }
+                    }
+                    for (let index = newVisibleIndexes.length - 1; index >= 0; index--) {
+                        const element = newVisibleIndexes[index];
+                        if (!oldVisibleIndexes.includes(element)) {
+                            diffBottomRenderedIndexes.push(element);
+                        }
+                        else {
+                            break;
+                        }
+                    }
+                }
+                else {
+                    // 向上
+                    direction = 'up';
+                    for (let index = 0; index < newVisibleIndexes.length; index++) {
+                        const element = newVisibleIndexes[index];
+                        if (!oldVisibleIndexes.includes(element)) {
+                            diffTopRenderedIndexes.push(element);
+                        }
+                        else {
+                            break;
+                        }
+                    }
+                    for (let index = oldVisibleIndexes.length - 1; index >= 0; index--) {
+                        const element = oldVisibleIndexes[index];
+                        if (!newVisibleIndexes.includes(element)) {
+                            diffBottomRenderedIndexes.push(element);
+                        }
+                        else {
+                            break;
+                        }
+                    }
+                }
+                console.log('oldVisibleIndexes:', oldVisibleIndexes);
+                console.log('newVisibleIndexes:', newVisibleIndexes);
+                const directionStr = direction === 'down' ? '+' : '-';
+                console.log('diffTopRenderedIndexes:', directionStr, diffTopRenderedIndexes, diffTopRenderedIndexes.map(index => virtualView.heights[index]));
+                console.log('diffBottomRenderedIndexes:', directionStr, diffBottomRenderedIndexes, diffBottomRenderedIndexes.map(index => virtualView.heights[index]));
+                const needTop = virtualView.heights.slice(0, newVisibleIndexes[0]).reduce((acc, height) => acc + height, 0);
+                const needBottom = virtualView.heights
+                    .slice(newVisibleIndexes[newVisibleIndexes.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 ===========');
+            }
+            return true;
+        }
+        return false;
+    }
+    getBlockHeight(index) {
+        const node = this.editor.children[index];
+        if (!node) {
+            return VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT;
+        }
+        const key = AngularEditor.findKey(this.editor, node);
+        return this.measuredHeights.get(key.id) ?? VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT;
+    }
+    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;
+    }
+    getBufferBelowHeight(viewportHeight, visibleStart, bufferCount) {
+        let blockHeight = 0;
+        let start = visibleStart;
+        // 循环累计高度超出视图高度代表找到向下缓冲区的起始位置
+        while (blockHeight < viewportHeight) {
+            blockHeight += this.getBlockHeight(start);
+            start++;
+        }
+        let bufferHeight = 0;
+        for (let i = start; i < start + bufferCount; i++) {
+            bufferHeight += this.getBlockHeight(i);
+        }
+        return bufferHeight;
+    }
+    scheduleMeasureVisibleHeights() {
+        if (!this.shouldUseVirtual()) {
+            return;
+        }
+        if (this.measurePending) {
+            return;
+        }
+        this.measurePending = true;
+        this.measureVisibleHeightsAnimId && cancelAnimationFrame(this.measureVisibleHeightsAnimId);
+        this.measureVisibleHeightsAnimId = requestAnimationFrame(() => {
+            this.measureVisibleHeights();
+            this.measurePending = false;
+        });
+    }
+    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;
+            }
+            view.getRealHeight()?.then(height => {
+                this.measuredHeights.set(key.id, height);
+            });
+        });
+    }
     //#region event proxy
     addEventListener(eventName, listener, target = this.elementRef.nativeElement) {
         this.manualListeners.push(this.renderer2.listen(target, eventName, (event) => {
@@ -3557,7 +3845,7 @@ class SlateEditable {
         EDITOR_TO_ON_CHANGE.delete(this.editor);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: SlateEditable, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: SlateEditable, isStandalone: true, selector: "slate-editable", inputs: { editor: "editor", renderElement: "renderElement", renderLeaf: "renderLeaf", renderText: "renderText", decorate: "decorate", placeholderDecorate: "placeholderDecorate", scrollSelectionIntoView: "scrollSelectionIntoView", isStrictDecorate: "isStrictDecorate", trackBy: "trackBy", readonly: "readonly", placeholder: "placeholder", beforeInput: "beforeInput", blur: "blur", click: "click", compositionEnd: "compositionEnd", compositionUpdate: "compositionUpdate", compositionStart: "compositionStart", copy: "copy", cut: "cut", dragOver: "dragOver", dragStart: "dragStart", dragEnd: "dragEnd", drop: "drop", focus: "focus", keydown: "keydown", paste: "paste", spellCheck: "spellCheck", autoCorrect: "autoCorrect", autoCapitalize: "autoCapitalize" }, host: { properties: { "attr.contenteditable": "readonly ? undefined : true", "attr.role": "readonly ? undefined : 'textbox'", "attr.spellCheck": "!hasBeforeInputSupport ? false : spellCheck", "attr.autoCorrect": "!hasBeforeInputSupport ? 'false' : autoCorrect", "attr.autoCapitalize": "!hasBeforeInputSupport ? 'false' : autoCapitalize", "attr.data-slate-editor": "this.dataSlateEditor", "attr.data-slate-node": "this.dataSlateNode", "attr.data-gramm": "this.dataGramm" }, classAttribute: "slate-editable-container" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: SlateEditable, isStandalone: true, selector: "slate-editable", inputs: { editor: "editor", renderElement: "renderElement", renderLeaf: "renderLeaf", renderText: "renderText", decorate: "decorate", placeholderDecorate: "placeholderDecorate", scrollSelectionIntoView: "scrollSelectionIntoView", isStrictDecorate: "isStrictDecorate", trackBy: "trackBy", readonly: "readonly", placeholder: "placeholder", virtualScroll: "virtualScroll", beforeInput: "beforeInput", blur: "blur", click: "click", compositionEnd: "compositionEnd", compositionUpdate: "compositionUpdate", compositionStart: "compositionStart", copy: "copy", cut: "cut", dragOver: "dragOver", dragStart: "dragStart", dragEnd: "dragEnd", drop: "drop", focus: "focus", keydown: "keydown", paste: "paste", spellCheck: "spellCheck", autoCorrect: "autoCorrect", autoCapitalize: "autoCapitalize" }, host: { properties: { "attr.contenteditable": "readonly ? undefined : true", "attr.role": "readonly ? undefined : 'textbox'", "attr.spellCheck": "!hasBeforeInputSupport ? false : spellCheck", "attr.autoCorrect": "!hasBeforeInputSupport ? 'false' : autoCorrect", "attr.autoCapitalize": "!hasBeforeInputSupport ? 'false' : autoCapitalize", "attr.data-slate-editor": "this.dataSlateEditor", "attr.data-slate-node": "this.dataSlateNode", "attr.data-gramm": "this.dataGramm" }, classAttribute: "slate-editable-container" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SlateEditable),
@@ -3610,6 +3898,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                 type: Input
             }], placeholder: [{
                 type: Input
+            }], virtualScroll: [{
+                type: Input
             }], beforeInput: [{
                 type: Input
             }], blur: [{
@@ -3887,6 +4177,12 @@ class BaseElementComponent extends BaseComponent {
             readonly: this._context.readonly
         };
     }
+    getRealHeight() {
+        const blockCard = getBlockCardByNativeElement(this.nativeElement);
+        const target = blockCard || this.nativeElement;
+        const computedStyle = getComputedStyle(target);
+        return Promise.resolve(target.offsetHeight + parseFloat(computedStyle.marginTop) + parseFloat(computedStyle.marginBottom));
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: BaseElementComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.12", type: BaseElementComponent, isStandalone: true, viewQueries: [{ propertyName: "childrenOutletInstance", first: true, predicate: SlateChildrenOutlet, descendants: true, static: true }], usesInheritance: true, ngImport: i0 }); }
 }
@@ -4041,5 +4337,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, 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, PLACEHOLDER_SYMBOL, SLATE_BLOCK_CARD_CLASS_NAME, SlateBlockCard, SlateChildrenOutlet, SlateEditable, SlateErrorCode, SlateFragmentAttributeKey, SlateModule, 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, 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 };
 //# sourceMappingURL=slate-angular.mjs.map