slate-angular 20.1.0 → 20.2.0-next.0

package/fesm2022/slate-angular.mjs

@@ -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.
@@ -1683,6 +1685,7 @@ class BaseFlavour {
     }
 }
 
+const DEFAULT_ELEMENT_HEIGHT = 24;
 class BaseElementFlavour extends BaseFlavour {
     constructor() {
         super(...arguments);
@@ -1777,6 +1780,9 @@ class BaseElementFlavour extends BaseFlavour {
             readonly: this._context.readonly
         };
     }
+    getRealHeight() {
+        return Promise.resolve(this.nativeElement.offsetHeight);
+    }
 }
 
 class DefaultElementFlavour extends BaseElementFlavour {
@@ -2262,11 +2268,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 +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 = [];
@@ -2301,9 +2311,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 +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);
             });
@@ -2541,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;
     }
@@ -2563,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;
@@ -2576,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;
@@ -2630,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();
         }
     }
@@ -2756,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
@@ -2795,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() {
@@ -2858,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) => {
@@ -3557,7 +3719,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", "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),
@@ -3610,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: [{
@@ -3887,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 }); }
 }
@@ -4041,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, 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, 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