slate-angular 20.2.0-next.12 → 20.2.0-next.14

package/fesm2022/slate-angular.mjs

@@ -1801,6 +1801,7 @@ class BaseElementFlavour extends BaseFlavour {
         if (ELEMENT_TO_COMPONENT.get(this.element) === this) {
             ELEMENT_TO_COMPONENT.delete(this.element);
         }
+        this.listRender.destroy();
         this.nativeElement?.remove();
     }
     onContextChange() {
@@ -2197,6 +2198,9 @@ class LeavesRender {
         });
         return { decoratedLeaves, contexts };
     }
+    destroy() {
+        this.views.forEach(view => view.destroy());
+    }
 }
 function getContext$1(index, leafContexts) {
     return leafContexts[index];
@@ -2239,6 +2243,7 @@ class BaseTextFlavour extends BaseFlavour {
             NODE_TO_ELEMENT.delete(this.text);
         }
         ELEMENT_TO_NODE.delete(this.nativeElement);
+        this.leavesRender.destroy();
         this.nativeElement?.remove();
     }
     onContextChange() {
@@ -3074,8 +3079,10 @@ const forceOnDOMPaste = IS_SAFARI;
 const isDebug = localStorage.getItem(SLATE_DEBUG_KEY) === 'true';
 class SlateEditable {
     set virtualScroll(config) {
-        this.virtualConfig = config;
-        this.doVirtualScroll();
+        this.virtualScrollConfig = config;
+        if (this.isEnabledVirtualScroll()) {
+            this.tryUpdateVirtualViewport();
+        }
     }
     get hasBeforeInputSupport() {
         return HAS_BEFORE_INPUT_SUPPORT;
@@ -3120,14 +3127,14 @@ class SlateEditable {
                 return null;
             }
         };
-        this.virtualConfig = {
+        this.virtualScrollConfig = {
             enabled: false,
             scrollTop: 0,
             viewportHeight: 0
         };
-        this.renderedChildren = [];
-        this.virtualVisibleIndexes = new Set();
-        this.measuredHeights = new Map();
+        this.inViewportChildren = [];
+        this.inViewportIndics = new Set();
+        this.keyHeightMap = new Map();
         // the height from scroll container top to editor top height element
         this.businessHeight = 0;
         this.virtualScrollInitialized = false;
@@ -3141,7 +3148,7 @@ class SlateEditable {
         NODE_TO_ELEMENT.set(this.editor, this.elementRef.nativeElement);
         ELEMENT_TO_NODE.set(this.elementRef.nativeElement, this.editor);
         IS_READ_ONLY.set(this.editor, this.readonly);
-        ELEMENT_KEY_TO_HEIGHTS.set(this.editor, this.measuredHeights);
+        ELEMENT_KEY_TO_HEIGHTS.set(this.editor, this.keyHeightMap);
         EDITOR_TO_ON_CHANGE.set(this.editor, () => {
             this.ngZone.run(() => {
                 this.onChange();
@@ -3155,7 +3162,7 @@ class SlateEditable {
         // add browser class
         let browserClass = IS_FIREFOX ? 'firefox' : IS_SAFARI ? 'safari' : '';
         browserClass && this.elementRef.nativeElement.classList.add(browserClass);
-        this.initializeVirtualScrolling();
+        this.initializeVirtualScroll();
         this.listRender = new ListRender(this.viewContext, this.viewContainerRef, this.getOutletParent, this.getOutletElement);
     }
     ngOnChanges(simpleChanges) {
@@ -3187,16 +3194,26 @@ 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(childrenForRender, this.editor, this.context);
+            if (this.isEnabledVirtualScroll()) {
+                const virtualView = this.calculateVirtualViewport();
+                this.applyVirtualView(virtualView);
+                const childrenForRender = virtualView.inViewportChildren;
+                if (!this.listRender.initialized) {
+                    this.listRender.initialize(childrenForRender, this.editor, this.context);
+                }
+                else {
+                    this.listRender.update(childrenForRender, this.editor, this.context);
+                }
+                this.scheduleMeasureVisibleHeights();
             }
             else {
-                this.listRender.update(childrenForRender, this.editor, this.context);
+                if (!this.listRender.initialized) {
+                    this.listRender.initialize(this.editor.children, this.editor, this.context);
+                }
+                else {
+                    this.listRender.update(this.editor.children, this.editor, this.context);
+                }
             }
-            this.scheduleMeasureVisibleHeights();
             this.cdr.markForCheck();
         }
     }
@@ -3230,8 +3247,8 @@ class SlateEditable {
     toNativeSelection() {
         try {
             let { selection } = this.editor;
-            if (this.virtualConfig?.enabled && selection) {
-                const indics = Array.from(this.virtualVisibleIndexes.values());
+            if (this.isEnabledVirtualScroll() && selection) {
+                const indics = Array.from(this.inViewportIndics.values());
                 if (indics.length > 0) {
                     const currentVisibleRange = {
                         anchor: Editor.start(this.editor, [indics[0]]),
@@ -3335,11 +3352,16 @@ class SlateEditable {
     ngDoCheck() { }
     forceRender() {
         this.updateContext();
-        const virtualView = this.refreshVirtualView();
-        this.applyVirtualView(virtualView);
-        const visibleIndexes = Array.from(this.virtualVisibleIndexes);
-        this.listRender.update(this.renderedChildren, this.editor, this.context);
-        this.remeasureHeightByIndics(visibleIndexes);
+        if (this.isEnabledVirtualScroll()) {
+            const virtualView = this.calculateVirtualViewport();
+            this.applyVirtualView(virtualView);
+            this.listRender.update(this.inViewportChildren, this.editor, this.context);
+            const visibleIndexes = Array.from(this.inViewportIndics);
+            this.remeasureHeightByIndics(visibleIndexes);
+        }
+        else {
+            this.listRender.update(this.editor.children, this.editor, this.context);
+        }
         // 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
@@ -3378,10 +3400,15 @@ class SlateEditable {
     render() {
         const changed = this.updateContext();
         if (changed) {
-            const virtualView = this.refreshVirtualView();
-            this.applyVirtualView(virtualView);
-            this.listRender.update(virtualView.renderedChildren, this.editor, this.context);
-            this.scheduleMeasureVisibleHeights();
+            if (this.isEnabledVirtualScroll()) {
+                const virtualView = this.calculateVirtualViewport();
+                this.applyVirtualView(virtualView);
+                this.listRender.update(virtualView.inViewportChildren, this.editor, this.context);
+                this.scheduleMeasureVisibleHeights();
+            }
+            else {
+                this.listRender.update(this.editor.children, this.editor, this.context);
+            }
         }
     }
     updateContext() {
@@ -3444,14 +3471,14 @@ class SlateEditable {
         decorations.push(...placeholderDecorations);
         return decorations;
     }
-    shouldUseVirtual() {
-        return !!(this.virtualConfig && this.virtualConfig.enabled);
+    isEnabledVirtualScroll() {
+        return !!(this.virtualScrollConfig && this.virtualScrollConfig.enabled);
     }
-    initializeVirtualScrolling() {
+    initializeVirtualScroll() {
         if (this.virtualScrollInitialized) {
             return;
         }
-        if (this.virtualConfig && this.virtualConfig.enabled) {
+        if (this.isEnabledVirtualScroll()) {
             this.virtualScrollInitialized = true;
             this.virtualTopHeightElement = document.createElement('div');
             this.virtualTopHeightElement.classList.add('virtual-top-height');
@@ -3469,7 +3496,7 @@ class SlateEditable {
             this.editorResizeObserver = new ResizeObserver(entries => {
                 if (entries.length > 0 && entries[0].contentRect.width !== editorResizeObserverRectWidth) {
                     editorResizeObserverRectWidth = entries[0].contentRect.width;
-                    this.remeasureHeightByIndics(Array.from(this.virtualVisibleIndexes));
+                    this.remeasureHeightByIndics(Array.from(this.inViewportIndics));
                 }
             });
             this.editorResizeObserver.observe(this.elementRef.nativeElement);
@@ -3479,7 +3506,7 @@ class SlateEditable {
             }
         }
     }
-    changeVirtualHeight(topHeight, bottomHeight) {
+    setVirtualSpaceHeight(topHeight, bottomHeight) {
         if (!this.virtualScrollInitialized) {
             return;
         }
@@ -3490,19 +3517,19 @@ class SlateEditable {
         const doc = this.elementRef?.nativeElement?.ownerDocument ?? document;
         VirtualScrollDebugOverlay.log(doc, type, ...args);
     }
-    doVirtualScroll() {
+    tryUpdateVirtualViewport() {
         this.refreshVirtualViewAnimId && cancelAnimationFrame(this.refreshVirtualViewAnimId);
         this.refreshVirtualViewAnimId = requestAnimationFrame(() => {
-            let virtualView = this.refreshVirtualView();
-            let diff = this.diffVirtualView(virtualView);
+            let virtualView = this.calculateVirtualViewport();
+            let diff = this.diffVirtualViewport(virtualView);
             if (!diff.isDiff) {
                 return;
             }
             if (diff.isMissingTop) {
                 const result = this.remeasureHeightByIndics(diff.diffTopRenderedIndexes);
                 if (result) {
-                    virtualView = this.refreshVirtualView();
-                    diff = this.diffVirtualView(virtualView, 'second');
+                    virtualView = this.calculateVirtualViewport();
+                    diff = this.diffVirtualViewport(virtualView, 'second');
                     if (!diff.isDiff) {
                         return;
                     }
@@ -3510,7 +3537,7 @@ class SlateEditable {
             }
             this.applyVirtualView(virtualView);
             if (this.listRender.initialized) {
-                this.listRender.update(virtualView.renderedChildren, this.editor, this.context);
+                this.listRender.update(virtualView.inViewportChildren, this.editor, this.context);
                 if (!AngularEditor.isReadOnly(this.editor) && this.editor.selection) {
                     this.toNativeSelection();
                 }
@@ -3518,26 +3545,26 @@ class SlateEditable {
             this.scheduleMeasureVisibleHeights();
         });
     }
-    refreshVirtualView() {
+    calculateVirtualViewport() {
         const children = (this.editor.children || []);
-        if (!children.length || !this.shouldUseVirtual()) {
+        if (!children.length || !this.isEnabledVirtualScroll()) {
             return {
-                renderedChildren: children,
+                inViewportChildren: children,
                 visibleIndexes: new Set(),
                 top: 0,
                 bottom: 0,
                 heights: []
             };
         }
-        const scrollTop = this.virtualConfig.scrollTop;
+        const scrollTop = this.virtualScrollConfig.scrollTop;
         if (isDebug) {
             const doc = this.elementRef?.nativeElement?.ownerDocument ?? document;
             VirtualScrollDebugOverlay.syncScrollTop(doc, Number.isFinite(scrollTop) ? scrollTop : 0);
         }
-        const viewportHeight = this.virtualConfig.viewportHeight ?? 0;
+        const viewportHeight = this.virtualScrollConfig.viewportHeight ?? 0;
         if (!viewportHeight) {
             return {
-                renderedChildren: [],
+                inViewportChildren: [],
                 visibleIndexes: new Set(),
                 top: 0,
                 bottom: 0,
@@ -3577,7 +3604,7 @@ class SlateEditable {
         const top = visibleStartIndex === -1 ? 0 : accumulatedHeights[visibleStartIndex];
         const bottom = totalHeight - accumulatedHeights[visibleEndIndex + 1];
         return {
-            renderedChildren: visible.length ? visible : children,
+            inViewportChildren: visible.length ? visible : children,
             visibleIndexes: new Set(visibleIndexes),
             top,
             bottom,
@@ -3585,19 +3612,19 @@ class SlateEditable {
         };
     }
     applyVirtualView(virtualView) {
-        this.renderedChildren = virtualView.renderedChildren;
-        this.changeVirtualHeight(virtualView.top, virtualView.bottom);
-        this.virtualVisibleIndexes = virtualView.visibleIndexes;
+        this.inViewportChildren = virtualView.inViewportChildren;
+        this.setVirtualSpaceHeight(virtualView.top, virtualView.bottom);
+        this.inViewportIndics = virtualView.visibleIndexes;
     }
-    diffVirtualView(virtualView, stage = 'first') {
-        if (!this.renderedChildren.length) {
+    diffVirtualViewport(virtualView, stage = 'first') {
+        if (!this.inViewportChildren.length) {
             return {
                 isDiff: true,
                 diffTopRenderedIndexes: [],
                 diffBottomRenderedIndexes: []
             };
         }
-        const oldVisibleIndexes = [...this.virtualVisibleIndexes];
+        const oldVisibleIndexes = [...this.inViewportIndics];
         const newVisibleIndexes = [...virtualView.visibleIndexes];
         const firstNewIndex = newVisibleIndexes[0];
         const lastNewIndex = newVisibleIndexes[newVisibleIndexes.length - 1];
@@ -3653,7 +3680,7 @@ class SlateEditable {
                 }
             }
             if (isDebug) {
-                this.debugLog('log', `====== diffVirtualView stage: ${stage} ======`);
+                this.debugLog('log', `====== diffVirtualViewport stage: ${stage} ======`);
                 this.debugLog('log', 'oldVisibleIndexes:', oldVisibleIndexes);
                 this.debugLog('log', 'newVisibleIndexes:', newVisibleIndexes);
                 this.debugLog('log', 'diffTopRenderedIndexes:', isMissingTop ? '-' : isAddedTop ? '+' : '-', diffTopRenderedIndexes, diffTopRenderedIndexes.map(index => this.getBlockHeight(index, 0)));
@@ -3692,11 +3719,11 @@ class SlateEditable {
             return defaultHeight;
         }
         const key = AngularEditor.findKey(this.editor, node);
-        const height = this.measuredHeights.get(key.id);
+        const height = this.keyHeightMap.get(key.id);
         if (typeof height === 'number') {
             return height;
         }
-        if (this.measuredHeights.has(key.id)) {
+        if (this.keyHeightMap.has(key.id)) {
             console.error('getBlockHeight: invalid height value', key.id, height);
         }
         return defaultHeight;
@@ -3710,7 +3737,7 @@ class SlateEditable {
         return accumulatedHeights;
     }
     scheduleMeasureVisibleHeights() {
-        if (!this.shouldUseVirtual()) {
+        if (!this.isEnabledVirtualScroll()) {
             return;
         }
         this.measureVisibleHeightsAnimId && cancelAnimationFrame(this.measureVisibleHeightsAnimId);
@@ -3720,14 +3747,14 @@ class SlateEditable {
     }
     measureVisibleHeights() {
         const children = (this.editor.children || []);
-        this.virtualVisibleIndexes.forEach(index => {
+        this.inViewportIndics.forEach(index => {
             const node = children[index];
             if (!node) {
                 return;
             }
             const key = AngularEditor.findKey(this.editor, node);
             // 跳过已测过的块，除非强制测量
-            if (this.measuredHeights.has(key.id)) {
+            if (this.keyHeightMap.has(key.id)) {
                 return;
             }
             const view = ELEMENT_TO_COMPONENT.get(node);
@@ -3737,11 +3764,11 @@ class SlateEditable {
             const ret = view.getRealHeight();
             if (ret instanceof Promise) {
                 ret.then(height => {
-                    this.measuredHeights.set(key.id, height);
+                    this.keyHeightMap.set(key.id, height);
                 });
             }
             else {
-                this.measuredHeights.set(key.id, ret);
+                this.keyHeightMap.set(key.id, ret);
             }
         });
     }
@@ -3758,12 +3785,12 @@ class SlateEditable {
             if (!view) {
                 return;
             }
-            const prevHeight = this.measuredHeights.get(key.id);
+            const prevHeight = this.keyHeightMap.get(key.id);
             const ret = view.getRealHeight();
             if (ret instanceof Promise) {
                 ret.then(height => {
                     if (height !== prevHeight) {
-                        this.measuredHeights.set(key.id, height);
+                        this.keyHeightMap.set(key.id, height);
                         isHeightChanged = true;
                         if (isDebug) {
                             this.debugLog('log', `remeasureHeightByIndics, index: ${index} prevHeight: ${prevHeight} newHeight: ${height}`);
@@ -3773,7 +3800,7 @@ class SlateEditable {
             }
             else {
                 if (ret !== prevHeight) {
-                    this.measuredHeights.set(key.id, ret);
+                    this.keyHeightMap.set(key.id, ret);
                     isHeightChanged = true;
                     if (isDebug) {
                         this.debugLog('log', `remeasureHeightByIndics, index: ${index} prevHeight: ${prevHeight} newHeight: ${ret}`);
@@ -4793,6 +4820,7 @@ class BaseElementComponent extends BaseComponent {
         if (ELEMENT_TO_COMPONENT.get(this.element) === this) {
             ELEMENT_TO_COMPONENT.delete(this.element);
         }
+        this.listRender.destroy();
     }
     onContextChange() {
         this.childrenContext = this.getChildrenContext();
@@ -4880,6 +4908,7 @@ class BaseTextComponent extends BaseComponent {
             NODE_TO_ELEMENT.delete(this.text);
         }
         ELEMENT_TO_NODE.delete(this.nativeElement);
+        this.leavesRender.destroy();
     }
     onContextChange() {
         this.updateWeakMap();