slate-angular 20.0.0 → 20.2.0-next.0

package/fesm2022/slate-angular.mjs

@@ -2,7 +2,7 @@ import { Editor, Range, Element, Transforms, Text as Text$1, Node, Path } from '
 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 { isKeyHotkey } from 'is-hotkey';
 import * as i0 from '@angular/core';
-import { TemplateRef, ViewChild, Component, ComponentRef, IterableDiffers, inject, ViewContainerRef, forwardRef, HostBinding, Input, ChangeDetectionStrategy, NgModule, ElementRef, ChangeDetectorRef, Directive } from '@angular/core';
+import { TemplateRef, ComponentRef, IterableDiffers, inject, ViewContainerRef, forwardRef, HostBinding, Input, ChangeDetectionStrategy, Component, NgModule, ElementRef, ChangeDetectorRef, Directive, ViewChild } from '@angular/core';
 import { direction } from 'direction';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import { Subject } from 'rxjs';
@@ -470,6 +470,8 @@ 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;
 
 /**
  * Hotkey mappings for each platform.
@@ -839,6 +841,9 @@ const getContentHeight = (element) => {
     }
     return Math.max(contentHeight, 0);
 };
+const getZeroTextNode = () => {
+    return document.createTextNode('\uFEFF');
+};
 
 const buildHTMLText = (wrapper, attach, data) => {
     const stringObj = JSON.stringify(data);
@@ -1512,38 +1517,12 @@ function restoreDom(editor, execute) {
     }, 0);
 }
 
-class SlateBlockCard {
-    get nativeElement() {
-        return this.elementRef.nativeElement;
-    }
-    get centerContainerElement() {
-        return this.centerContainer.nativeElement;
-    }
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-    }
-    ngOnInit() {
-        this.nativeElement.classList.add(`slate-block-card`);
-    }
-    append() {
-        this.centerRootNodes.forEach(rootNode => !this.centerContainerElement.contains(rootNode) && this.centerContainerElement.appendChild(rootNode));
-    }
-    initializeCenter(rootNodes) {
-        this.centerRootNodes = rootNodes;
-        this.append();
+class FlavourRef {
+    destroy() {
+        this.instance.onDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: SlateBlockCard, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: SlateBlockCard, isStandalone: true, selector: "slate-block-card, [slateBlockCard]", viewQueries: [{ propertyName: "centerContainer", first: true, predicate: ["centerContainer"], descendants: true, static: true }], ngImport: i0, template: "<span card-target=\"card-left\" class=\"card-left\">{{ '\\uFEFF' }}</span>\n<div card-target=\"card-center\" #centerContainer></div>\n<span card-target=\"card-right\" class=\"card-right\">{{ '\\uFEFF' }}</span>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: SlateBlockCard, decorators: [{
-            type: Component,
-            args: [{ selector: 'slate-block-card, [slateBlockCard]', standalone: true, template: "<span card-target=\"card-left\" class=\"card-left\">{{ '\\uFEFF' }}</span>\n<div card-target=\"card-center\" #centerContainer></div>\n<span card-target=\"card-right\" class=\"card-right\">{{ '\\uFEFF' }}</span>\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { centerContainer: [{
-                type: ViewChild,
-                args: ['centerContainer', { static: true }]
-            }] } });
-
-class FlavourRef {
+class BlockCardRef {
     destroy() {
         this.instance.onDestroy();
     }
@@ -1706,6 +1685,7 @@ class BaseFlavour {
     }
 }
 
+const DEFAULT_ELEMENT_HEIGHT = 24;
 class BaseElementFlavour extends BaseFlavour {
     constructor() {
         super(...arguments);
@@ -1800,6 +1780,9 @@ class BaseElementFlavour extends BaseFlavour {
             readonly: this._context.readonly
         };
     }
+    getRealHeight() {
+        return Promise.resolve(this.nativeElement.offsetHeight);
+    }
 }
 
 class DefaultElementFlavour extends BaseElementFlavour {
@@ -1995,7 +1978,7 @@ const createEmptyOrVoidStringNode = () => {
     stringNode.setAttribute('data-slate-string', 'true');
     stringNode.setAttribute('data-slate-zero-width', 'z');
     stringNode.setAttribute('data-slate-length', '0');
-    const zeroWidthSpace = document.createTextNode('\uFEFF');
+    const zeroWidthSpace = getZeroTextNode();
     stringNode.appendChild(zeroWidthSpace);
     stringNode.setAttribute('editable-text', '');
     return stringNode;
@@ -2006,7 +1989,7 @@ const createCompatibleStringNode = (text) => {
     stringNode.textContent = text;
     stringNode.setAttribute('editable-text', '');
     const zeroWidthSpan = document.createElement('span');
-    const zeroWidthSpace = document.createTextNode('\uFEFF');
+    const zeroWidthSpace = getZeroTextNode();
     zeroWidthSpan.setAttribute('data-slate-zero-width', '');
     zeroWidthSpan.appendChild(zeroWidthSpace);
     stringNode.appendChild(zeroWidthSpan);
@@ -2016,7 +1999,7 @@ const createLineBreakEmptyStringDOM = (elementStringLength) => {
     const stringNode = document.createElement('span');
     stringNode.setAttribute('data-slate-zero-width', 'n');
     stringNode.setAttribute('data-slate-length', `${elementStringLength}`);
-    const zeroWidthSpace = document.createTextNode(`\uFEFF`);
+    const zeroWidthSpace = getZeroTextNode();
     stringNode.appendChild(zeroWidthSpace);
     const brNode = document.createElement('br');
     stringNode.appendChild(brNode);
@@ -2226,6 +2209,49 @@ 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;
@@ -2242,14 +2268,16 @@ 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.viewContainerRef, this.viewContext);
+            const blockCard = createBlockCard(descendant, view, this.viewContext);
             this.views.push(view);
             this.contexts.push(context);
             this.viewTypes.push(viewType);
@@ -2274,6 +2302,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 = [];
@@ -2281,16 +2311,17 @@ 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;
                 let blockCard;
                 if (record.previousIndex === null) {
                     view = createEmbeddedViewOrComponentOrFlavour(viewType, context, this.viewContext, this.viewContainerRef);
-                    blockCard = createBlockCard(record.item, view, this.viewContainerRef, this.viewContext);
+                    blockCard = createBlockCard(record.item, view, this.viewContext);
                     newContexts.push(context);
                     newViews.push(view);
                     newBlockCards.push(blockCard);
@@ -2303,7 +2334,7 @@ class ListRender {
                     const previousBlockCard = this.blockCards[record.previousIndex];
                     if (previousViewType !== viewType) {
                         view = createEmbeddedViewOrComponentOrFlavour(viewType, context, this.viewContext, this.viewContainerRef);
-                        blockCard = createBlockCard(record.item, view, this.viewContainerRef, this.viewContext);
+                        blockCard = createBlockCard(record.item, view, this.viewContext);
                         const firstRootNode = getRootNodes(previousView, previousBlockCard)[0];
                         const newRootNodes = getRootNodes(view, blockCard);
                         firstRootNode.replaceWith(...newRootNodes);
@@ -2351,16 +2382,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);
             });
@@ -2461,16 +2492,15 @@ function getViewType(item, parent, viewContext) {
         return isVoid ? VoidTextFlavour : (viewContext.renderText && viewContext.renderText(item)) || DefaultTextFlavour;
     }
 }
-function createBlockCard(item, view, viewContainerRef, viewContext) {
+function createBlockCard(item, view, viewContext) {
     const isBlockCard = viewContext.editor.isBlockCard(item);
     if (isBlockCard) {
         const rootNodes = getRootNodes(view);
-        const blockCardComponentRef = viewContainerRef.createComponent(SlateBlockCard, {
-            injector: viewContainerRef.injector
-        });
-        blockCardComponentRef.instance.initializeCenter(rootNodes);
-        blockCardComponentRef.changeDetectorRef.detectChanges();
-        return blockCardComponentRef;
+        const blockCardRef = new BlockCardRef();
+        blockCardRef.instance = new SlateBlockCard();
+        blockCardRef.instance.onInit();
+        blockCardRef.instance.initializeCenter(rootNodes);
+        return blockCardRef;
     }
     else {
         return null;
@@ -2522,6 +2552,17 @@ function executeAfterViewInit(editor) {
 // 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(() => {
+            this.refreshVirtualView();
+            if (this.listRender.initialized) {
+                this.listRender.update(this.renderedChildren, this.editor, this.context);
+            }
+            this.scheduleMeasureVisibleHeights();
+        });
+    }
     get hasBeforeInputSupport() {
         return HAS_BEFORE_INPUT_SUPPORT;
     }
@@ -2544,6 +2585,8 @@ class SlateEditable {
         this.isStrictDecorate = true;
         this.trackBy = () => null;
         this.readonly = false;
+        this.virtualTopPadding = 0;
+        this.virtualBottomPadding = 0;
         //#endregion
         //#region DOM attr
         this.spellCheck = false;
@@ -2557,6 +2600,15 @@ class SlateEditable {
         this.getOutletParent = () => {
             return this.elementRef.nativeElement;
         };
+        this.virtualConfig = {
+            enabled: false,
+            scrollTop: 0,
+            viewportHeight: 0
+        };
+        this.renderedChildren = [];
+        this.virtualVisibleIndexes = new Set();
+        this.measuredHeights = new Map();
+        this.measurePending = false;
     }
     ngOnInit() {
         this.editor.injector = this.injector;
@@ -2611,12 +2663,15 @@ class SlateEditable {
         if (value && value.length) {
             this.editor.children = value;
             this.initializeContext();
+            this.refreshVirtualView();
+            const childrenForRender = this.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();
         }
     }
@@ -2737,7 +2792,9 @@ class SlateEditable {
     ngDoCheck() { }
     forceRender() {
         this.updateContext();
-        this.listRender.update(this.editor.children, this.editor, this.context);
+        this.refreshVirtualView();
+        this.listRender.update(this.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
@@ -2776,7 +2833,9 @@ class SlateEditable {
     render() {
         const changed = this.updateContext();
         if (changed) {
-            this.listRender.update(this.editor.children, this.editor, this.context);
+            this.refreshVirtualView();
+            this.listRender.update(this.renderedChildren, this.editor, this.context);
+            this.scheduleMeasureVisibleHeights();
         }
     }
     updateContext() {
@@ -2839,6 +2898,128 @@ class SlateEditable {
         decorations.push(...placeholderDecorations);
         return decorations;
     }
+    shouldUseVirtual() {
+        return !!(this.virtualConfig && this.virtualConfig.enabled);
+    }
+    refreshVirtualView() {
+        const children = (this.editor.children || []);
+        if (!children.length || !this.shouldUseVirtual()) {
+            this.renderedChildren = children;
+            this.virtualTopPadding = 0;
+            this.virtualBottomPadding = 0;
+            this.virtualVisibleIndexes.clear();
+            return;
+        }
+        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;
+        }
+        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) {
+            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 = 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);
+    }
+    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 => {
+                const actualHeight = height +
+                    parseFloat(getComputedStyle(view.nativeElement).marginTop) +
+                    parseFloat(getComputedStyle(view.nativeElement).marginBottom);
+                this.measuredHeights.set(key.id, actualHeight);
+            });
+        });
+    }
     //#region event proxy
     addEventListener(eventName, listener, target = this.elementRef.nativeElement) {
         this.manualListeners.push(this.renderer2.listen(target, eventName, (event) => {
@@ -3538,30 +3719,37 @@ 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", "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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SlateEditable),
                 multi: true
             }
-        ], usesOnChanges: true, ngImport: i0, template: "", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: SlateEditable, decorators: [{
             type: Component,
-            args: [{ selector: 'slate-editable', host: {
+            args: [{
+                    selector: 'slate-editable',
+                    host: {
                         class: 'slate-editable-container',
                         '[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`
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                    },
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => SlateEditable),
                             multi: true
                         }
-                    ], imports: [], template: "" }]
+                    ],
+                    imports: []
+                }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Injector }], propDecorators: { editor: [{
                 type: Input
             }], renderElement: [{
@@ -3584,6 +3772,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                 type: Input
             }], placeholder: [{
                 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: [{
@@ -3709,35 +3905,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }] });
 
-class SlateString {
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: SlateString, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: SlateString, isStandalone: true, selector: "span[slateString]", inputs: { context: "context", viewContext: "viewContext" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: SlateString, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'span[slateString]',
-                    template: '',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true
-                }]
-        }], propDecorators: { context: [{
-                type: Input
-            }], viewContext: [{
-                type: Input
-            }] } });
-
 class SlateModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: SlateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.12", ngImport: i0, type: SlateModule, imports: [CommonModule, SlateEditable, SlateBlockCard, SlateChildrenOutlet, SlateString], exports: [SlateEditable, SlateChildrenOutlet, SlateString] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.12", ngImport: i0, type: SlateModule, imports: [CommonModule, SlateEditable, SlateChildrenOutlet], exports: [SlateEditable, SlateChildrenOutlet] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: SlateModule, imports: [CommonModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: SlateModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, SlateEditable, SlateBlockCard, SlateChildrenOutlet, SlateString],
-                    exports: [SlateEditable, SlateChildrenOutlet, SlateString],
+                    imports: [CommonModule, SlateEditable, SlateChildrenOutlet],
+                    exports: [SlateEditable, SlateChildrenOutlet],
                     providers: []
                 }]
         }] });
@@ -3880,6 +4057,9 @@ class BaseElementComponent extends BaseComponent {
             readonly: this._context.readonly
         };
     }
+    getRealHeight() {
+        return Promise.resolve(this.nativeElement.offsetHeight);
+    }
     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 }); }
 }
@@ -4034,5 +4214,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, 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, SlateChildrenOutlet, SlateEditable, SlateErrorCode, SlateFragmentAttributeKey, SlateModule, SlateString, VoidTextFlavour, blobAsString, buildHTMLText, check, completeTable, createClipboardData, createText, createThrottleRAF, defaultScrollSelectionIntoView, fallbackCopyText, getCardTargetAttribute, getClipboardData, getClipboardFromHTMLText, getContentHeight, getDataTransferClipboard, getDataTransferClipboardText, getNavigatorClipboard, getPlainText, getSelection, getSlateFragmentAttribute, 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, 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 };
 //# sourceMappingURL=slate-angular.mjs.map