slate-angular 20.2.21 → 20.2.23

package/fesm2022/slate-angular.mjs

@@ -389,6 +389,7 @@ const HAS_BEFORE_INPUT_SUPPORT = !IS_CHROME_LEGACY &&
 const VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT = 32;
 const SLATE_DEBUG_KEY = '__SLATE_DEBUG__';
 const SLATE_DEBUG_KEY_SCROLL_TOP = '__SLATE_DEBUG_SCROLL_TOP__';
+const SLATE_DEBUG_KEY_UPDATE = '__SLATE_DEBUG_UPDATE__';
 
 /**
  * Symbols.
@@ -1009,7 +1010,7 @@ const getBlockCardByNativeElement = (nativeElement) => {
     return null;
 };
 
-const roundTo = (value, precision = 2) => {
+const roundTo = (value, precision = 1) => {
     const factor = 10 ** precision;
     const n = Math.round(value * factor) / factor;
     return Object.is(n, -0) ? 0 : n;
@@ -1020,6 +1021,7 @@ const VIRTUAL_BOTTOM_HEIGHT_CLASS_NAME = 'virtual-bottom-height';
 const VIRTUAL_CENTER_OUTLET_CLASS_NAME = 'virtual-center-outlet';
 const isDebug = localStorage.getItem(SLATE_DEBUG_KEY) === 'true';
 const isDebugScrollTop = localStorage.getItem(SLATE_DEBUG_KEY_SCROLL_TOP) === 'true';
+const isDebugUpdate = localStorage.getItem(SLATE_DEBUG_KEY_UPDATE) === 'true';
 const ELEMENT_KEY_TO_HEIGHTS = new WeakMap();
 const EDITOR_TO_BUSINESS_TOP = new WeakMap();
 const EDITOR_TO_VIRTUAL_SCROLL_CONFIG = new WeakMap();
@@ -1082,26 +1084,17 @@ const calcHeightByElement = (editor, element) => {
     cacheHeightByElement(editor, element, height);
     return height;
 };
-const measureHeightByIndics = (editor, indics, force = false) => {
+const measureHeightByIndics = (editor, indics, source) => {
     let hasChanged = false;
     indics.forEach((index, i) => {
         const element = editor.children[index];
         const preHeight = getCachedHeightByElement(editor, element);
-        if (preHeight && !force) {
-            if (isDebug) {
-                const height = calcHeightByElement(editor, element);
-                if (height !== preHeight) {
-                    debugLog('warn', 'calcHeightByElement: height not equal, index: ', index, 'preHeight: ', preHeight, 'height: ', height);
-                }
-            }
-            return;
-        }
         const currentHeight = calcHeightByElement(editor, element);
         if (isValidNumber(currentHeight) && currentHeight !== preHeight) {
             hasChanged = true;
         }
         if (isDebug && isValidNumber(currentHeight)) {
-            debugLog('log', 'measureHeightByIndics: index: ', index, 'preHeight: ', preHeight, 'height: ', currentHeight);
+            debugLog('log', `measureHeightByIndics（${source}）, index: `, index, 'preHeight: ', preHeight, 'height: ', currentHeight);
         }
     });
     return hasChanged;
@@ -3513,6 +3506,9 @@ class SlateEditable {
                 }
                 else {
                     const { preRenderingCount, childrenWithPreRendering, childrenWithPreRenderingIndics } = this.appendPreRenderingToViewport(visibleStates);
+                    if (isDebugUpdate) {
+                        debugLog('log', 'writeValue update list render');
+                    }
                     this.listRender.update(childrenWithPreRendering, this.editor, this.context, preRenderingCount, childrenWithPreRenderingIndics);
                 }
                 const remeasureIndics = this.getChangedIndics(previousInViewportChildren);
@@ -3619,7 +3615,7 @@ class SlateEditable {
                 });
             }), debounceTime(500), filter(() => pendingRemeasureIndics.length > 0))
                 .subscribe((previousValue) => {
-                const changed = measureHeightByIndics(this.editor, pendingRemeasureIndics, true);
+                const changed = measureHeightByIndics(this.editor, pendingRemeasureIndics, 'data-changed');
                 if (changed) {
                     if (previousValue.tryUpdateViewport) {
                         this.tryUpdateVirtualViewport();
@@ -3650,11 +3646,18 @@ class SlateEditable {
             this.virtualBottomHeightElement.style.height = `${roundTo(bottomHeight, 1)}px`;
         }
     }
+    setTopHeightDebugInfo(accumulatedHeight, accumulatedEndIndex) {
+        if (isDebug) {
+            this.virtualTopHeightElement.setAttribute('accumulated-height', accumulatedHeight.toString());
+            this.virtualTopHeightElement.setAttribute('accumulated-height-end-index', accumulatedEndIndex.toString());
+        }
+    }
     getActualVirtualTopHeight() {
         if (!this.virtualScrollInitialized) {
             return 0;
         }
-        return parseFloat(this.virtualTopHeightElement.style.height.replace('px', ''));
+        const rect = this.virtualTopHeightElement.getBoundingClientRect();
+        return roundTo(rect.height, 1);
     }
     appendPreRenderingToViewport(visibleStates) {
         let preRenderingCount = 0;
@@ -3711,7 +3714,8 @@ class SlateEditable {
             const realTopHeight = this.getActualVirtualTopHeight();
             const visibleStates = this.editor.getAllVisibleStates();
             const accumulateTopHeigh = calculateAccumulatedTopHeight(this.editor, this.inViewportIndics[0], visibleStates);
-            if (realTopHeight !== accumulateTopHeigh) {
+            this.setTopHeightDebugInfo(accumulateTopHeigh, this.inViewportIndics[0] - 1);
+            if (realTopHeight !== accumulateTopHeigh && Math.abs(realTopHeight - accumulateTopHeigh) > 1) {
                 if (isDebug) {
                     debugLog('log', 'update top height since dirty state，增加高度: ', accumulateTopHeigh - realTopHeight);
                 }
@@ -3729,33 +3733,40 @@ class SlateEditable {
             let diff = this.diffVirtualViewport(virtualView);
             if (diff.isDifferent && diff.needRemoveOnTop && !isFromScrollTo) {
                 const remeasureIndics = diff.changedIndexesOfTop;
-                const changed = measureHeightByIndics(this.editor, remeasureIndics);
+                const changed = measureHeightByIndics(this.editor, remeasureIndics, 'need-remove-from-top');
                 if (changed) {
                     virtualView = this.calculateVirtualViewport(visibleStates);
                     diff = this.diffVirtualViewport(virtualView, 'second');
+                    if (!diff.isDifferent && isDebug) {
+                        debugLog('log', 'viewport need not change after remeasure');
+                    }
                 }
             }
             if (diff.isDifferent) {
                 this.applyVirtualView(virtualView);
                 if (this.listRender.initialized) {
                     const { preRenderingCount, childrenWithPreRendering, childrenWithPreRenderingIndics } = this.appendPreRenderingToViewport(visibleStates);
+                    if (isDebugUpdate) {
+                        debugLog('log', 'tryUpdateVirtualViewport update list render');
+                    }
                     this.listRender.update(childrenWithPreRendering, this.editor, this.context, preRenderingCount, childrenWithPreRenderingIndics);
-                    if (diff.needAddOnTop && !isFromScrollTo) {
+                    if (diff.needAddOnTop && !isFromScrollTo && diff.changedIndexesOfTop.length === 1) {
                         const remeasureAddedIndics = diff.changedIndexesOfTop;
                         if (isDebug) {
                             debugLog('log', 'needAddOnTop to remeasure heights: ', remeasureAddedIndics);
                         }
                         const startIndexBeforeAdd = diff.changedIndexesOfTop[diff.changedIndexesOfTop.length - 1] + 1;
                         const topHeightBeforeAdd = virtualView.accumulatedHeights[startIndexBeforeAdd];
-                        const changed = measureHeightByIndics(this.editor, remeasureAddedIndics);
+                        const changed = measureHeightByIndics(this.editor, remeasureAddedIndics, 'need-add-from-top');
                         if (changed) {
                             const newHeights = buildHeightsAndAccumulatedHeights(this.editor, visibleStates);
                             const actualTopHeightAfterAdd = newHeights.accumulatedHeights[startIndexBeforeAdd];
                             const newTopHeight = virtualView.top - (actualTopHeightAfterAdd - topHeightBeforeAdd);
+                            this.setTopHeightDebugInfo(newHeights.accumulatedHeights[this.inViewportIndics[0]], this.inViewportIndics[0] - 1);
                             if (topHeightBeforeAdd !== actualTopHeightAfterAdd) {
                                 this.setVirtualSpaceHeight(newTopHeight);
                                 if (isDebug) {
-                                    debugLog('log', `update top height since will add element in top，减去高度: ${topHeightBeforeAdd - actualTopHeightAfterAdd}`);
+                                    debugLog('log', `update top height since will add element in top，减去高度: ${actualTopHeightAfterAdd - topHeightBeforeAdd}`);
                                 }
                             }
                         }
@@ -3789,7 +3800,6 @@ class SlateEditable {
             businessTop = calcBusinessTop(this.editor);
         }
         const { heights, accumulatedHeights } = buildHeightsAndAccumulatedHeights(this.editor, visibleStates);
-        const totalHeight = accumulatedHeights[elementLength] + businessTop;
         let startPosition = Math.max(scrollTop - businessTop, 0);
         let endPosition = startPosition + viewportHeight;
         if (scrollTop < businessTop) {
@@ -3830,8 +3840,7 @@ class SlateEditable {
         const inViewportStartIndex = inViewportIndics[0];
         const inViewportEndIndex = inViewportIndics[inViewportIndics.length - 1];
         const top = accumulatedHeights[inViewportStartIndex];
-        // todo: toggleHeight: toggleHeight 逻辑需要优化
-        const bottom = totalHeight - accumulatedHeights[inViewportEndIndex + 1];
+        const bottom = accumulatedHeights[elementLength] - accumulatedHeights[inViewportEndIndex + 1];
         return {
             inViewportChildren,
             inViewportIndics,
@@ -3845,6 +3854,7 @@ class SlateEditable {
         this.inViewportChildren = virtualView.inViewportChildren;
         this.setVirtualSpaceHeight(virtualView.top, virtualView.bottom);
         this.inViewportIndics = virtualView.inViewportIndics;
+        this.setTopHeightDebugInfo(virtualView.top, this.inViewportIndics[0] - 1);
     }
     diffVirtualViewport(virtualView, stage = 'first') {
         if (!this.inViewportChildren.length) {
@@ -4118,7 +4128,7 @@ class SlateEditable {
     forceRender() {
         this.updateContext();
         if (this.isEnabledVirtualScroll()) {
-            this.updateListRenderAndRemeasureHeights();
+            this.updateListRenderAndRemeasureHeights('forceRender');
         }
         else {
             this.listRender.update(this.editor.children, this.editor, this.context);
@@ -4168,14 +4178,14 @@ class SlateEditable {
         const changed = this.updateContext();
         if (changed) {
             if (this.isEnabledVirtualScroll()) {
-                this.updateListRenderAndRemeasureHeights();
+                this.updateListRenderAndRemeasureHeights('render');
             }
             else {
                 this.listRender.update(this.editor.children, this.editor, this.context);
             }
         }
     }
-    updateListRenderAndRemeasureHeights() {
+    updateListRenderAndRemeasureHeights(origin) {
         const operations = this.editor.operations;
         const firstIndex = this.inViewportIndics[0];
         const operationsOfFirstElementMerged = operations.filter(op => op.type === 'merge_node' && op.path.length === 1 && firstIndex === op.path[0] - 1);
@@ -4211,16 +4221,13 @@ class SlateEditable {
             }
             this.inViewportIndics = newInViewportIndics;
             this.inViewportChildren = newInViewportChildren;
-            if (isDebug) {
-                debugLog('log', 'updateListRenderAndRemeasureHeights', 'mutationOfFirstElementHeight', 'newInViewportIndics', newInViewportIndics);
-            }
         }
         else {
             let virtualView = this.calculateVirtualViewport(visibleStates);
             let diff = this.diffVirtualViewport(virtualView, 'onChange');
             if (diff.isDifferent && diff.needRemoveOnTop) {
                 const remeasureIndics = diff.changedIndexesOfTop;
-                const changed = measureHeightByIndics(this.editor, remeasureIndics);
+                const changed = measureHeightByIndics(this.editor, remeasureIndics, 'need-remove-from-top');
                 if (changed) {
                     virtualView = this.calculateVirtualViewport(visibleStates);
                     diff = this.diffVirtualViewport(virtualView, 'second');
@@ -4229,6 +4236,9 @@ class SlateEditable {
             this.applyVirtualView(virtualView);
         }
         const { preRenderingCount, childrenWithPreRendering, childrenWithPreRenderingIndics } = this.appendPreRenderingToViewport(visibleStates);
+        if (isDebugUpdate) {
+            debugLog('log', 'updateListRenderAndRemeasureHeights update list render', 'origin', origin);
+        }
         this.listRender.update(childrenWithPreRendering, this.editor, this.context, preRenderingCount, childrenWithPreRenderingIndics);
         const remeasureIndics = this.getChangedIndics(previousInViewportChildren);
         if (remeasureIndics.length) {
@@ -5520,5 +5530,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_BUSINESS_TOP, EDITOR_TO_IS_FROM_SCROLL_TO, EDITOR_TO_ROOT_NODE_WIDTH, EDITOR_TO_VIEWPORT_HEIGHT, EDITOR_TO_VIRTUAL_SCROLL_CONFIG, 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_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, SLATE_DEBUG_KEY_SCROLL_TOP, SlateBlockCard, SlateChildrenOutlet, SlateEditable, SlateErrorCode, SlateFragmentAttributeKey, SlateModule, SlateString, VIRTUAL_BOTTOM_HEIGHT_CLASS_NAME, VIRTUAL_CENTER_OUTLET_CLASS_NAME, VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT, VIRTUAL_TOP_HEIGHT_CLASS_NAME, VoidTextFlavour, blobAsString, buildHTMLText, buildHeightsAndAccumulatedHeights, cacheHeightByElement, calcBusinessTop, calcHeightByElement, calculateAccumulatedTopHeight, check, clearMinHeightByElement, completeTable, createClipboardData, createText, createThrottleRAF, debugLog, defaultScrollSelectionIntoView, fallbackCopyText, getBlockCardByNativeElement, getBusinessTop, getCachedHeightByElement, getCardTargetAttribute, getClipboardData, getClipboardFromHTMLText, getContentHeight, getDataTransferClipboard, getDataTransferClipboardText, getNavigatorClipboard, getPlainText, getScrollContainer, getSelection, getSlateFragmentAttribute, getViewportHeight, getZeroTextNode, hasAfterContextChange, hasBeforeContextChange, hasBlockCard, hasBlockCardWithNode, hotkeys, isCardCenterByTargetAttr, isCardLeft, isCardLeftByTargetAttr, isCardRightByTargetAttr, isClipboardFile, isClipboardReadSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isComponentType, isDOMText, isDebug, isDebugScrollTop, isDecoratorRangeListEqual, isFlavourType, isInvalidTable, isSelectionInsideVoid, isTemplateRef, isValid, isValidNumber, measureHeightByIndics, normalize, roundTo, scrollToElement, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setMinHeightByElement, 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_BUSINESS_TOP, EDITOR_TO_IS_FROM_SCROLL_TO, EDITOR_TO_ROOT_NODE_WIDTH, EDITOR_TO_VIEWPORT_HEIGHT, EDITOR_TO_VIRTUAL_SCROLL_CONFIG, 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_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, SLATE_DEBUG_KEY_SCROLL_TOP, SLATE_DEBUG_KEY_UPDATE, SlateBlockCard, SlateChildrenOutlet, SlateEditable, SlateErrorCode, SlateFragmentAttributeKey, SlateModule, SlateString, VIRTUAL_BOTTOM_HEIGHT_CLASS_NAME, VIRTUAL_CENTER_OUTLET_CLASS_NAME, VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT, VIRTUAL_TOP_HEIGHT_CLASS_NAME, VoidTextFlavour, blobAsString, buildHTMLText, buildHeightsAndAccumulatedHeights, cacheHeightByElement, calcBusinessTop, calcHeightByElement, calculateAccumulatedTopHeight, check, clearMinHeightByElement, completeTable, createClipboardData, createText, createThrottleRAF, debugLog, defaultScrollSelectionIntoView, fallbackCopyText, getBlockCardByNativeElement, getBusinessTop, getCachedHeightByElement, getCardTargetAttribute, getClipboardData, getClipboardFromHTMLText, getContentHeight, getDataTransferClipboard, getDataTransferClipboardText, getNavigatorClipboard, getPlainText, getScrollContainer, getSelection, getSlateFragmentAttribute, getViewportHeight, getZeroTextNode, hasAfterContextChange, hasBeforeContextChange, hasBlockCard, hasBlockCardWithNode, hotkeys, isCardCenterByTargetAttr, isCardLeft, isCardLeftByTargetAttr, isCardRightByTargetAttr, isClipboardFile, isClipboardReadSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isComponentType, isDOMText, isDebug, isDebugScrollTop, isDebugUpdate, isDecoratorRangeListEqual, isFlavourType, isInvalidTable, isSelectionInsideVoid, isTemplateRef, isValid, isValidNumber, measureHeightByIndics, normalize, roundTo, scrollToElement, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setMinHeightByElement, setNavigatorClipboard, shallowCompare, stripHtml, withAngular };
 //# sourceMappingURL=slate-angular.mjs.map