slate-angular 20.2.0-next.0 → 20.2.0-next.2

package/fesm2022/slate-angular.mjs

@@ -472,6 +472,7 @@ const HAS_BEFORE_INPUT_SUPPORT = !IS_CHROME_LEGACY &&
     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.
@@ -1685,6 +1686,49 @@ 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() {
@@ -1781,7 +1825,10 @@ class BaseElementFlavour extends BaseFlavour {
         };
     }
     getRealHeight() {
-        return Promise.resolve(this.nativeElement.offsetHeight);
+        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));
     }
 }
 
@@ -2209,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;
@@ -2549,18 +2553,38 @@ function executeAfterViewInit(editor) {
     clearAfterViewInitQueue(editor);
 }
 
+const JUST_NOW_UPDATED_VIRTUAL_VIEW = new WeakMap();
 // not correctly clipboardData on beforeinput
 const forceOnDOMPaste = IS_SAFARI;
+const isDebug = localStorage.getItem(SLATE_DEBUG_KEY) === 'true';
 class SlateEditable {
     set virtualScroll(config) {
         this.virtualConfig = config;
         this.refreshVirtualViewAnimId && cancelAnimationFrame(this.refreshVirtualViewAnimId);
         this.refreshVirtualViewAnimId = requestAnimationFrame(() => {
-            this.refreshVirtualView();
-            if (this.listRender.initialized) {
-                this.listRender.update(this.renderedChildren, this.editor, this.context);
+            const virtualView = this.refreshVirtualView();
+            const diff = this.diffVirtualView(virtualView);
+            if (diff.isDiff) {
+                if (diff.isMissingTop || diff.isMissingBottom) {
+                    this.measureHeightByIndexes([...diff.diffTopRenderedIndexes, ...diff.diffBottomRenderedIndexes], true).then(result => {
+                        if (isDebug) {
+                            console.log('async measureHeightByIndexes:', result);
+                        }
+                        this.applyVirtualView(result || virtualView);
+                        if (this.listRender.initialized) {
+                            this.listRender.update(this.renderedChildren, this.editor, this.context);
+                        }
+                        this.scheduleMeasureVisibleHeights();
+                    });
+                }
+                else {
+                    this.applyVirtualView(virtualView);
+                    if (this.listRender.initialized) {
+                        this.listRender.update(virtualView.renderedChildren, this.editor, this.context);
+                    }
+                    this.scheduleMeasureVisibleHeights();
+                }
             }
-            this.scheduleMeasureVisibleHeights();
         });
     }
     get hasBeforeInputSupport() {
@@ -2585,8 +2609,6 @@ class SlateEditable {
         this.isStrictDecorate = true;
         this.trackBy = () => null;
         this.readonly = false;
-        this.virtualTopPadding = 0;
-        this.virtualBottomPadding = 0;
         //#endregion
         //#region DOM attr
         this.spellCheck = false;
@@ -2600,6 +2622,14 @@ 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,
@@ -2609,6 +2639,7 @@ class SlateEditable {
         this.virtualVisibleIndexes = new Set();
         this.measuredHeights = new Map();
         this.measurePending = false;
+        this.virtualScrollInitialized = false;
     }
     ngOnInit() {
         this.editor.injector = this.injector;
@@ -2632,7 +2663,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) {
@@ -2663,8 +2695,9 @@ class SlateEditable {
         if (value && value.length) {
             this.editor.children = value;
             this.initializeContext();
-            this.refreshVirtualView();
-            const childrenForRender = this.renderedChildren;
+            const virtualView = this.refreshVirtualView();
+            this.applyVirtualView(virtualView);
+            const childrenForRender = virtualView.renderedChildren;
             if (!this.listRender.initialized) {
                 this.listRender.initialize(childrenForRender, this.editor, this.context);
             }
@@ -2792,8 +2825,9 @@ class SlateEditable {
     ngDoCheck() { }
     forceRender() {
         this.updateContext();
-        this.refreshVirtualView();
-        this.listRender.update(this.renderedChildren, 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
@@ -2833,8 +2867,9 @@ class SlateEditable {
     render() {
         const changed = this.updateContext();
         if (changed) {
-            this.refreshVirtualView();
-            this.listRender.update(this.renderedChildren, this.editor, this.context);
+            const virtualView = this.refreshVirtualView();
+            this.applyVirtualView(virtualView);
+            this.listRender.update(virtualView.renderedChildren, this.editor, this.context);
             this.scheduleMeasureVisibleHeights();
         }
     }
@@ -2901,29 +2936,56 @@ class SlateEditable {
     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()) {
-            this.renderedChildren = children;
-            this.virtualTopPadding = 0;
-            this.virtualBottomPadding = 0;
-            this.virtualVisibleIndexes.clear();
-            return;
+            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) {
             // 已经启用虚拟滚动，但可视区域高度还未获取到，先置空不渲染
-            this.renderedChildren = [];
-            this.virtualTopPadding = 0;
-            this.virtualBottomPadding = 0;
-            this.virtualVisibleIndexes.clear();
-            return;
+            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);
-        const total = accumulatedHeights[accumulatedHeights.length - 1] || 0;
         let visibleStart = 0;
         // 按真实或估算高度往后累加，找到滚动起点所在块
         while (visibleStart < heights.length && accumulatedHeights[visibleStart + 1] <= scrollTop) {
@@ -2945,20 +3007,121 @@ class SlateEditable {
             accumulated += this.getBlockHeight(cursor);
             cursor++;
         }
-        const bottom = Math.max(total - top - accumulated, 0); // 下占位高度
-        this.renderedChildren = visible.length ? visible : children;
-        // padding 占位
-        this.virtualTopPadding = this.renderedChildren === visible ? Math.round(top) : 0;
-        this.virtualBottomPadding = this.renderedChildren === visible ? Math.round(bottom) : 0;
-        this.virtualVisibleIndexes = new Set(visibleIndexes);
+        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 {
+                isDiff: true,
+                diffTopRenderedIndexes: [],
+                diffBottomRenderedIndexes: []
+            };
+        }
+        const oldVisibleIndexes = [...this.virtualVisibleIndexes];
+        const newVisibleIndexes = [...virtualView.visibleIndexes];
+        const firstNewIndex = newVisibleIndexes[0];
+        const lastNewIndex = newVisibleIndexes[newVisibleIndexes.length - 1];
+        const firstOldIndex = oldVisibleIndexes[0];
+        const lastOldIndex = oldVisibleIndexes[oldVisibleIndexes.length - 1];
+        if (firstNewIndex !== firstOldIndex || lastNewIndex !== lastOldIndex) {
+            const diffTopRenderedIndexes = [];
+            const diffBottomRenderedIndexes = [];
+            const isMissingTop = firstNewIndex !== firstOldIndex && firstNewIndex > firstOldIndex;
+            const isAddedTop = firstNewIndex !== firstOldIndex && firstNewIndex < firstOldIndex;
+            const isMissingBottom = lastNewIndex !== lastOldIndex && lastOldIndex > lastNewIndex;
+            const isAddedBottom = lastNewIndex !== lastOldIndex && lastOldIndex < lastNewIndex;
+            if (isMissingTop || isAddedBottom) {
+                // 向下
+                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 if (isAddedTop || isMissingBottom) {
+                // 向上
+                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;
+                    }
+                }
+            }
+            if (isDebug) {
+                console.log('oldVisibleIndexes:', oldVisibleIndexes);
+                console.log('newVisibleIndexes:', newVisibleIndexes);
+                console.log('diffTopRenderedIndexes:', isMissingTop ? '-' : isAddedTop ? '+' : '-', diffTopRenderedIndexes, diffTopRenderedIndexes.map(index => this.getBlockHeight(index, 0)));
+                console.log('diffBottomRenderedIndexes:', isAddedBottom ? '+' : isMissingBottom ? '-' : '+', diffBottomRenderedIndexes, diffBottomRenderedIndexes.map(index => this.getBlockHeight(index, 0)));
+                const needTop = virtualView.heights.slice(0, newVisibleIndexes[0]).reduce((acc, height) => acc + height, 0);
+                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 {
+                isDiff: true,
+                isMissingTop,
+                isAddedTop,
+                isMissingBottom,
+                isAddedBottom,
+                diffTopRenderedIndexes,
+                diffBottomRenderedIndexes
+            };
+        }
+        return {
+            isDiff: false,
+            diffTopRenderedIndexes: [],
+            diffBottomRenderedIndexes: []
+        };
     }
-    getBlockHeight(index) {
+    getBlockHeight(index, defaultHeight = VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT) {
         const node = this.editor.children[index];
         if (!node) {
-            return VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT;
+            return defaultHeight;
         }
         const key = AngularEditor.findKey(this.editor, node);
-        return this.measuredHeights.get(key.id) ?? VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT;
+        return this.measuredHeights.get(key.id) ?? defaultHeight;
     }
     buildAccumulatedHeight(heights) {
         const accumulatedHeights = new Array(heights.length + 1).fill(0);
@@ -3013,13 +3176,46 @@ class SlateEditable {
                 return;
             }
             view.getRealHeight()?.then(height => {
-                const actualHeight = height +
-                    parseFloat(getComputedStyle(view.nativeElement).marginTop) +
-                    parseFloat(getComputedStyle(view.nativeElement).marginBottom);
-                this.measuredHeights.set(key.id, actualHeight);
+                this.measuredHeights.set(key.id, height);
             });
         });
     }
+    async measureHeightByIndexes(indexes, isRefresh = false) {
+        const children = (this.editor.children || []);
+        let isHeightChanged = false;
+        const promises = [];
+        indexes.forEach(index => {
+            const node = children[index];
+            if (!node) {
+                return;
+            }
+            const key = AngularEditor.findKey(this.editor, node);
+            const view = ELEMENT_TO_COMPONENT.get(node);
+            if (!view) {
+                return;
+            }
+            const promise = view.getRealHeight()?.then(height => {
+                const prevHeight = this.measuredHeights.get(key.id);
+                if (isDebug) {
+                    console.log('measureHeightByIndexes: get index:', index, 'prevHeight:', prevHeight, 'newHeight:', height);
+                }
+                if (prevHeight && height !== prevHeight) {
+                    this.measuredHeights.set(key.id, height);
+                    isHeightChanged = true;
+                }
+            });
+            if (promise) {
+                promises.push(promise);
+            }
+        });
+        if (promises.length > 0) {
+            await Promise.all(promises);
+            if (isHeightChanged && isRefresh) {
+                return this.refreshVirtualView();
+            }
+        }
+        return null;
+    }
     //#region event proxy
     addEventListener(eventName, listener, target = this.elementRef.nativeElement) {
         this.manualListeners.push(this.renderer2.listen(target, eventName, (event) => {
@@ -3719,7 +3915,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", 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", "style.--virtual-top-padding.px": "this.virtualTopPadding", "style.--virtual-bottom-padding.px": "this.virtualBottomPadding", "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),
@@ -3774,12 +3970,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                 type: Input
             }], virtualScroll: [{
                 type: Input
-            }], virtualTopPadding: [{
-                type: HostBinding,
-                args: ['style.--virtual-top-padding.px']
-            }], virtualBottomPadding: [{
-                type: HostBinding,
-                args: ['style.--virtual-bottom-padding.px']
             }], beforeInput: [{
                 type: Input
             }], blur: [{
@@ -4058,7 +4248,10 @@ class BaseElementComponent extends BaseComponent {
         };
     }
     getRealHeight() {
-        return Promise.resolve(this.nativeElement.offsetHeight);
+        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 }); }
@@ -4214,5 +4407,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AngularEditor, BaseComponent, BaseElementComponent, BaseElementFlavour, BaseFlavour, BaseLeafComponent, BaseLeafFlavour, BaseTextComponent, BaseTextFlavour, BlockCardRef, DEFAULT_ELEMENT_HEIGHT, DefaultTextFlavour, EDITOR_TO_AFTER_VIEW_INIT_QUEUE, ELEMENT_TO_COMPONENT, FAKE_LEFT_BLOCK_CARD_OFFSET, FAKE_RIGHT_BLOCK_CARD_OFFSET, FlavourRef, HAS_BEFORE_INPUT_SUPPORT, IS_ANDROID, IS_APPLE, IS_CHROME, IS_CHROME_LEGACY, IS_EDGE_LEGACY, IS_FIREFOX, IS_FIREFOX_LEGACY, IS_IOS, IS_QQBROWSER, IS_SAFARI, IS_UC_MOBILE, IS_WECHATBROWSER, PLACEHOLDER_SYMBOL, SLATE_BLOCK_CARD_CLASS_NAME, SlateBlockCard, SlateChildrenOutlet, SlateEditable, SlateErrorCode, SlateFragmentAttributeKey, SlateModule, VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT, VIRTUAL_SCROLL_DEFAULT_BUFFER_COUNT, VoidTextFlavour, blobAsString, buildHTMLText, check, completeTable, createClipboardData, createText, createThrottleRAF, defaultScrollSelectionIntoView, fallbackCopyText, getBlockCardByNativeElement, getCardTargetAttribute, getClipboardData, getClipboardFromHTMLText, getContentHeight, getDataTransferClipboard, getDataTransferClipboardText, getNavigatorClipboard, getPlainText, getSelection, getSlateFragmentAttribute, getZeroTextNode, hasAfterContextChange, hasBeforeContextChange, hasBlockCard, hasBlockCardWithNode, hotkeys, isCardCenterByTargetAttr, isCardLeft, isCardLeftByTargetAttr, isCardRightByTargetAttr, isClipboardFile, isClipboardReadSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isComponentType, isDOMText, isDecoratorRangeListEqual, isFlavourType, isInvalidTable, isTemplateRef, isValid, normalize, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setNavigatorClipboard, shallowCompare, stripHtml, withAngular };
+export { AngularEditor, BaseComponent, BaseElementComponent, BaseElementFlavour, BaseFlavour, BaseLeafComponent, BaseLeafFlavour, BaseTextComponent, BaseTextFlavour, BlockCardRef, DEFAULT_ELEMENT_HEIGHT, DefaultTextFlavour, EDITOR_TO_AFTER_VIEW_INIT_QUEUE, 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