slate-angular 20.2.0-next.17 → 20.2.0-next.18

package/fesm2022/slate-angular.mjs

@@ -954,6 +954,17 @@ const fallbackCopyText = async (text) => {
     });
 };
 
+const ELEMENT_KEY_TO_HEIGHTS = new WeakMap();
+// 可以完全替换 getBlockHeight
+const getRealHeightByElement = (editor, element) => {
+    const heights = ELEMENT_KEY_TO_HEIGHTS.get(editor);
+    const key = AngularEditor.findKey(editor, element);
+    return heights?.get(key.id) || 0;
+};
+// 滚动到元素位置
+const scrollToElement = (editor, element, scrollTo) => {
+};
+
 const withAngular = (editor, clipboardFormatKey = 'x-slate-fragment') => {
     let e = editor;
     let { apply } = e;
@@ -3085,8 +3096,6 @@ class VirtualScrollDebugOverlay {
     }
 }
 
-const JUST_NOW_UPDATED_VIRTUAL_VIEW = new WeakMap();
-const ELEMENT_KEY_TO_HEIGHTS = new WeakMap();
 // not correctly clipboardData on beforeinput
 const forceOnDOMPaste = IS_SAFARI;
 const isDebug = localStorage.getItem(SLATE_DEBUG_KEY) === 'true';
@@ -3218,7 +3227,7 @@ class SlateEditable {
                 else {
                     this.listRender.update(childrenForRender, this.editor, this.context);
                 }
-                this.scheduleMeasureVisibleHeights();
+                this.tryMeasureInViewportChildrenHeights();
             }
             else {
                 if (!this.listRender.initialized) {
@@ -3376,11 +3385,7 @@ class SlateEditable {
     forceRender() {
         this.updateContext();
         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);
+            this.updateListRenderAndRemeasureHeights();
         }
         else {
             this.listRender.update(this.editor.children, this.editor, this.context);
@@ -3424,16 +3429,31 @@ class SlateEditable {
         const changed = this.updateContext();
         if (changed) {
             if (this.isEnabledVirtualScroll()) {
-                const virtualView = this.calculateVirtualViewport();
-                this.applyVirtualView(virtualView);
-                this.listRender.update(virtualView.inViewportChildren, this.editor, this.context);
-                this.scheduleMeasureVisibleHeights();
+                this.updateListRenderAndRemeasureHeights();
             }
             else {
                 this.listRender.update(this.editor.children, this.editor, this.context);
             }
         }
     }
+    updateListRenderAndRemeasureHeights() {
+        const virtualView = this.calculateVirtualViewport();
+        const oldInViewportChildren = this.inViewportChildren;
+        this.applyVirtualView(virtualView);
+        this.listRender.update(this.inViewportChildren, this.editor, this.context);
+        // 新增或者修改的才需要重算，计算出这个结果
+        const remeasureIndics = [];
+        const newInViewportIndics = Array.from(this.inViewportIndics);
+        this.inViewportChildren.forEach((child, index) => {
+            if (oldInViewportChildren.indexOf(child) === -1) {
+                remeasureIndics.push(newInViewportIndics[index]);
+            }
+        });
+        if (isDebug && remeasureIndics.length > 0) {
+            console.log('remeasure height by indics: ', remeasureIndics);
+        }
+        this.remeasureHeightByIndics(remeasureIndics);
+    }
     updateContext() {
         const decorations = this.generateDecorations();
         if (this.context.selection !== this.editor.selection ||
@@ -3519,7 +3539,8 @@ 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.inViewportIndics));
+                    const remeasureIndics = Array.from(this.inViewportIndics);
+                    this.remeasureHeightByIndics(remeasureIndics);
                 }
             });
             this.editorResizeObserver.observe(this.elementRef.nativeElement);
@@ -3541,15 +3562,16 @@ class SlateEditable {
         VirtualScrollDebugOverlay.log(doc, type, ...args);
     }
     tryUpdateVirtualViewport() {
-        this.refreshVirtualViewAnimId && cancelAnimationFrame(this.refreshVirtualViewAnimId);
-        this.refreshVirtualViewAnimId = requestAnimationFrame(() => {
+        this.tryUpdateVirtualViewportAnimId && cancelAnimationFrame(this.tryUpdateVirtualViewportAnimId);
+        this.tryUpdateVirtualViewportAnimId = requestAnimationFrame(() => {
             let virtualView = this.calculateVirtualViewport();
             let diff = this.diffVirtualViewport(virtualView);
             if (!diff.isDiff) {
                 return;
             }
             if (diff.isMissingTop) {
-                const result = this.remeasureHeightByIndics(diff.diffTopRenderedIndexes);
+                const remeasureIndics = diff.diffTopRenderedIndexes;
+                const result = this.remeasureHeightByIndics(remeasureIndics);
                 if (result) {
                     virtualView = this.calculateVirtualViewport();
                     diff = this.diffVirtualViewport(virtualView, 'second');
@@ -3565,7 +3587,7 @@ class SlateEditable {
                     this.toNativeSelection();
                 }
             }
-            this.scheduleMeasureVisibleHeights();
+            this.tryMeasureInViewportChildrenHeights();
         });
     }
     calculateVirtualViewport() {
@@ -3759,12 +3781,12 @@ class SlateEditable {
         }
         return accumulatedHeights;
     }
-    scheduleMeasureVisibleHeights() {
+    tryMeasureInViewportChildrenHeights() {
         if (!this.isEnabledVirtualScroll()) {
             return;
         }
-        this.measureVisibleHeightsAnimId && cancelAnimationFrame(this.measureVisibleHeightsAnimId);
-        this.measureVisibleHeightsAnimId = requestAnimationFrame(() => {
+        this.tryMeasureInViewportChildrenHeightsAnimId && cancelAnimationFrame(this.tryMeasureInViewportChildrenHeightsAnimId);
+        this.tryMeasureInViewportChildrenHeightsAnimId = requestAnimationFrame(() => {
             this.measureVisibleHeights();
         });
     }
@@ -3798,7 +3820,7 @@ class SlateEditable {
     remeasureHeightByIndics(indics) {
         const children = (this.editor.children || []);
         let isHeightChanged = false;
-        indics.forEach(index => {
+        indics.forEach((index, i) => {
             const node = children[index];
             if (!node) {
                 return;
@@ -3812,21 +3834,21 @@ class SlateEditable {
             const ret = view.getRealHeight();
             if (ret instanceof Promise) {
                 ret.then(height => {
+                    this.keyHeightMap.set(key.id, height);
                     if (height !== prevHeight) {
-                        this.keyHeightMap.set(key.id, height);
                         isHeightChanged = true;
                         if (isDebug) {
-                            this.debugLog('log', `remeasureHeightByIndics, index: ${index} prevHeight: ${prevHeight} newHeight: ${height}`);
+                            this.debugLog('log', `remeasure element height, index: ${index} prevHeight: ${prevHeight} newHeight: ${height}`);
                         }
                     }
                 });
             }
             else {
+                this.keyHeightMap.set(key.id, ret);
                 if (ret !== prevHeight) {
-                    this.keyHeightMap.set(key.id, ret);
                     isHeightChanged = true;
                     if (isDebug) {
-                        this.debugLog('log', `remeasureHeightByIndics, index: ${index} prevHeight: ${prevHeight} newHeight: ${ret}`);
+                        this.debugLog('log', `remeasure element height, index: ${index} prevHeight: ${prevHeight} newHeight: ${ret}`);
                     }
                 }
             }
@@ -5046,5 +5068,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, EDITOR_TO_VIRTUAL_SCROLL_SELECTION, ELEMENT_KEY_TO_HEIGHTS, 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_ENABLED_VIRTUAL_SCROLL, 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, 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, EDITOR_TO_VIRTUAL_SCROLL_SELECTION, ELEMENT_KEY_TO_HEIGHTS, 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_ENABLED_VIRTUAL_SCROLL, IS_FIREFOX, IS_FIREFOX_LEGACY, IS_IOS, IS_QQBROWSER, IS_SAFARI, IS_UC_MOBILE, IS_WECHATBROWSER, PLACEHOLDER_SYMBOL, SLATE_BLOCK_CARD_CLASS_NAME, SLATE_DEBUG_KEY, SlateBlockCard, SlateChildrenOutlet, SlateEditable, SlateErrorCode, SlateFragmentAttributeKey, SlateModule, VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT, VoidTextFlavour, blobAsString, buildHTMLText, check, completeTable, createClipboardData, createText, createThrottleRAF, defaultScrollSelectionIntoView, fallbackCopyText, getBlockCardByNativeElement, getCardTargetAttribute, getClipboardData, getClipboardFromHTMLText, getContentHeight, getDataTransferClipboard, getDataTransferClipboardText, getNavigatorClipboard, getPlainText, getRealHeightByElement, getSelection, getSlateFragmentAttribute, getZeroTextNode, hasAfterContextChange, hasBeforeContextChange, hasBlockCard, hasBlockCardWithNode, hotkeys, isCardCenterByTargetAttr, isCardLeft, isCardLeftByTargetAttr, isCardRightByTargetAttr, isClipboardFile, isClipboardReadSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isComponentType, isDOMText, isDecoratorRangeListEqual, isFlavourType, isInvalidTable, isTemplateRef, isValid, normalize, scrollToElement, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setNavigatorClipboard, shallowCompare, stripHtml, withAngular };
 //# sourceMappingURL=slate-angular.mjs.map