slate-angular 20.2.16 → 20.2.18

package/fesm2022/slate-angular.mjs

@@ -1492,10 +1492,17 @@ const getBlockCardByNativeElement = (nativeElement) => {
     return null;
 };
 
+const roundTo = (value, precision = 2) => {
+    const factor = 10 ** precision;
+    const n = Math.round(value * factor) / factor;
+    return Object.is(n, -0) ? 0 : n;
+};
+
 const isDebug = localStorage.getItem(SLATE_DEBUG_KEY) === 'true';
 const isDebugScrollTop = localStorage.getItem(SLATE_DEBUG_KEY_SCROLL_TOP) === 'true';
 const ELEMENT_KEY_TO_HEIGHTS = new WeakMap();
 const EDITOR_TO_BUSINESS_TOP = new WeakMap();
+const EDITOR_TO_VIEWPORT_HEIGHT = new WeakMap();
 const EDITOR_TO_ROOT_NODE_WIDTH = new WeakMap();
 const EDITOR_TO_IS_FROM_SCROLL_TO = new WeakMap();
 const isValidNumber = (value) => {
@@ -1573,7 +1580,7 @@ const measureHeightByIndics = (editor, indics, force = false) => {
             hasChanged = true;
         }
         if (isDebug && isValidNumber(currentHeight)) {
-            debugLog('log', 'measureHeightByIndics: height not equal, index: ', index, 'preHeight: ', preHeight, 'height: ', currentHeight);
+            debugLog('log', 'measureHeightByIndics: index: ', index, 'preHeight: ', preHeight, 'height: ', currentHeight);
         }
     });
     return hasChanged;
@@ -1581,6 +1588,9 @@ const measureHeightByIndics = (editor, indics, force = false) => {
 const getBusinessTop = (editor) => {
     return EDITOR_TO_BUSINESS_TOP.get(editor) ?? 0;
 };
+const getViewportHeight = (editor) => {
+    return EDITOR_TO_VIEWPORT_HEIGHT.get(editor) ?? window.innerHeight;
+};
 const getCachedHeightByElement = (editor, element) => {
     const heights = ELEMENT_KEY_TO_HEIGHTS.get(editor);
     const key = AngularEditor.findKey(editor, element);
@@ -1616,7 +1626,8 @@ const buildHeightsAndAccumulatedHeights = (editor, visibleStates) => {
 };
 const calculateVirtualTopHeight = (editor, startIndex, visibleStates) => {
     const { accumulatedHeights } = buildHeightsAndAccumulatedHeights(editor, visibleStates);
-    return accumulatedHeights[startIndex] ?? 0;
+    const virtualTopHeight = roundTo(accumulatedHeights[startIndex] ?? 0, 1);
+    return virtualTopHeight;
 };
 const scrollToElement = (editor, element, scrollTo) => {
     const children = editor.children;
@@ -3384,8 +3395,6 @@ class SlateEditable {
         this.virtualScrollConfig = {
             enabled: false,
             scrollTop: 0,
-            viewportHeight: 0,
-            viewportBoundingTop: 0,
             scrollContainer: null
         };
         this.inViewportChildren = [];
@@ -3548,6 +3557,17 @@ class SlateEditable {
                 }
             });
             this.editorResizeObserver.observe(this.elementRef.nativeElement);
+            if (this.virtualScrollConfig.scrollContainer) {
+                this.editorScrollContainerResizeObserver = new ResizeObserver(entries => {
+                    const height = this.virtualScrollConfig.scrollContainer.getBoundingClientRect().height;
+                    EDITOR_TO_VIEWPORT_HEIGHT.set(this.editor, height);
+                    if (isDebug) {
+                        debugLog('log', 'editorScrollContainerResizeObserver calc viewport height: ', height);
+                        this.virtualTopHeightElement.setAttribute('viewport-height', height.toString());
+                    }
+                });
+                this.editorScrollContainerResizeObserver.observe(this.virtualScrollConfig.scrollContainer);
+            }
             let pendingRemeasureIndics = [];
             this.indicsOfNeedBeMeasured$
                 .pipe(tap((previousValue) => {
@@ -3569,6 +3589,17 @@ class SlateEditable {
             });
         }
     }
+    calcBusinessTop() {
+        const virtualTopBoundingTop = this.virtualTopHeightElement.getBoundingClientRect()?.top ?? 0;
+        const viewportBoundingTop = this.virtualScrollConfig.scrollContainer?.getBoundingClientRect()?.top ?? 0;
+        const businessTop = Math.ceil(virtualTopBoundingTop) + Math.ceil(this.virtualScrollConfig.scrollTop) - Math.floor(viewportBoundingTop);
+        EDITOR_TO_BUSINESS_TOP.set(this.editor, businessTop);
+        if (isDebug) {
+            debugLog('log', 'calcBusinessTop: ', businessTop);
+            this.virtualTopHeightElement.setAttribute('data-business-top', businessTop.toString());
+        }
+        return businessTop;
+    }
     getChangedIndics(previousValue) {
         const remeasureIndics = [];
         this.inViewportChildren.forEach((child, index) => {
@@ -3582,9 +3613,9 @@ class SlateEditable {
         if (!this.virtualScrollInitialized) {
             return;
         }
-        this.virtualTopHeightElement.style.height = `${topHeight}px`;
+        this.virtualTopHeightElement.style.height = `${roundTo(topHeight, 1)}px`;
         if (bottomHeight !== undefined) {
-            this.virtualBottomHeightElement.style.height = `${bottomHeight}px`;
+            this.virtualBottomHeightElement.style.height = `${roundTo(bottomHeight, 1)}px`;
         }
     }
     getActualVirtualTopHeight() {
@@ -3629,7 +3660,7 @@ class SlateEditable {
             const refreshVirtualTopHeight = calculateVirtualTopHeight(this.editor, this.inViewportIndics[0], visibleStates);
             if (topHeight !== refreshVirtualTopHeight) {
                 if (isDebug) {
-                    debugLog('log', 'update top height since dirty state（正数减去高度，负数代表增加高度）: ', topHeight - refreshVirtualTopHeight);
+                    debugLog('log', 'update top height since dirty state，增加高度: ', refreshVirtualTopHeight - topHeight);
                 }
                 this.setVirtualSpaceHeight(refreshVirtualTopHeight);
                 return;
@@ -3668,9 +3699,11 @@ class SlateEditable {
                             const newHeights = buildHeightsAndAccumulatedHeights(this.editor, visibleStates);
                             const actualTopHeightAfterAdd = newHeights.accumulatedHeights[startIndexBeforeAdd];
                             const newTopHeight = virtualView.top - (actualTopHeightAfterAdd - topHeightBeforeAdd);
-                            this.setVirtualSpaceHeight(newTopHeight);
-                            if (isDebug) {
-                                debugLog('log', `update top height since will add element in top（正数减去高度，负数代表增加高度）: ${actualTopHeightAfterAdd - topHeightBeforeAdd}`);
+                            if (topHeightBeforeAdd !== actualTopHeightAfterAdd) {
+                                this.setVirtualSpaceHeight(newTopHeight);
+                                if (isDebug) {
+                                    debugLog('log', `update top height since will add element in top，减去高度: ${topHeightBeforeAdd - actualTopHeightAfterAdd}`);
+                                }
                             }
                         }
                     }
@@ -3696,32 +3729,12 @@ class SlateEditable {
             };
         }
         const scrollTop = this.virtualScrollConfig.scrollTop;
-        let viewportHeight = this.virtualScrollConfig.viewportHeight ?? 0;
-        if (!viewportHeight) {
-            return {
-                inViewportChildren: [],
-                inViewportIndics: [],
-                top: 0,
-                bottom: 0,
-                heights: []
-            };
-        }
+        let viewportHeight = getViewportHeight(this.editor);
         const elementLength = children.length;
-        if (!EDITOR_TO_BUSINESS_TOP.has(this.editor)) {
-            EDITOR_TO_BUSINESS_TOP.set(this.editor, 0);
-            setTimeout(() => {
-                const virtualTopBoundingTop = this.virtualTopHeightElement.getBoundingClientRect()?.top ?? 0;
-                const businessTop = Math.ceil(virtualTopBoundingTop) +
-                    Math.ceil(this.virtualScrollConfig.scrollTop) -
-                    Math.floor(this.virtualScrollConfig.viewportBoundingTop);
-                EDITOR_TO_BUSINESS_TOP.set(this.editor, businessTop);
-                if (isDebug) {
-                    debugLog('log', 'businessTop', businessTop);
-                    this.virtualTopHeightElement.setAttribute('data-business-top', businessTop.toString());
-                }
-            }, 100);
+        let businessTop = getBusinessTop(this.editor);
+        if (businessTop === 0 && this.virtualScrollConfig.scrollTop > 0) {
+            businessTop = this.calcBusinessTop();
         }
-        const businessTop = getBusinessTop(this.editor);
         const { heights, accumulatedHeights } = buildHeightsAndAccumulatedHeights(this.editor, visibleStates);
         const totalHeight = accumulatedHeights[elementLength] + businessTop;
         let startPosition = Math.max(scrollTop - businessTop, 0);
@@ -3952,6 +3965,12 @@ class SlateEditable {
             if (editorElement.contains(domSelection.anchorNode) && editorElement.contains(domSelection.focusNode)) {
                 hasDomSelectionInEditor = true;
             }
+            if (!hasDomSelectionInEditor && !AngularEditor.isFocused(this.editor)) {
+                return;
+            }
+            if (AngularEditor.isReadOnly(this.editor) && (!selection || Range.isCollapsed(selection))) {
+                return;
+            }
             // If the DOM selection is in the editor and the editor selection is already correct, we're done.
             if (hasDomSelection && hasDomSelectionInEditor && selection && hasStringTarget(domSelection)) {
                 const rangeFromDOMSelection = AngularEditor.toSlateRange(this.editor, domSelection, {
@@ -4897,6 +4916,7 @@ class SlateEditable {
     //#endregion
     ngOnDestroy() {
         this.editorResizeObserver?.disconnect();
+        this.editorScrollContainerResizeObserver?.disconnect();
         NODE_TO_ELEMENT.delete(this.editor);
         this.manualListeners.forEach(manualListener => {
             manualListener();
@@ -5422,5 +5442,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_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, SLATE_DEBUG_KEY_SCROLL_TOP, SlateBlockCard, SlateChildrenOutlet, SlateEditable, SlateErrorCode, SlateFragmentAttributeKey, SlateModule, SlateString, VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT, VoidTextFlavour, blobAsString, buildHTMLText, buildHeightsAndAccumulatedHeights, cacheHeightByElement, calcHeightByElement, calculateVirtualTopHeight, check, clearMinHeightByElement, completeTable, createClipboardData, createText, createThrottleRAF, debugLog, defaultScrollSelectionIntoView, fallbackCopyText, getBlockCardByNativeElement, getBusinessTop, getCachedHeightByElement, 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, isDebug, isDebugScrollTop, isDecoratorRangeListEqual, isFlavourType, isInvalidTable, isTemplateRef, isValid, isValidNumber, measureHeightByIndics, normalize, 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_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, SLATE_DEBUG_KEY_SCROLL_TOP, SlateBlockCard, SlateChildrenOutlet, SlateEditable, SlateErrorCode, SlateFragmentAttributeKey, SlateModule, SlateString, VIRTUAL_SCROLL_DEFAULT_BLOCK_HEIGHT, VoidTextFlavour, blobAsString, buildHTMLText, buildHeightsAndAccumulatedHeights, cacheHeightByElement, calcHeightByElement, calculateVirtualTopHeight, check, clearMinHeightByElement, completeTable, createClipboardData, createText, createThrottleRAF, debugLog, defaultScrollSelectionIntoView, fallbackCopyText, getBlockCardByNativeElement, getBusinessTop, getCachedHeightByElement, getCardTargetAttribute, getClipboardData, getClipboardFromHTMLText, getContentHeight, getDataTransferClipboard, getDataTransferClipboardText, getNavigatorClipboard, getPlainText, getSelection, getSlateFragmentAttribute, getViewportHeight, getZeroTextNode, hasAfterContextChange, hasBeforeContextChange, hasBlockCard, hasBlockCardWithNode, hotkeys, isCardCenterByTargetAttr, isCardLeft, isCardLeftByTargetAttr, isCardRightByTargetAttr, isClipboardFile, isClipboardReadSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isComponentType, isDOMText, isDebug, isDebugScrollTop, isDecoratorRangeListEqual, isFlavourType, isInvalidTable, isTemplateRef, isValid, isValidNumber, measureHeightByIndics, normalize, roundTo, scrollToElement, setClipboardData, setDataTransferClipboard, setDataTransferClipboardText, setMinHeightByElement, setNavigatorClipboard, shallowCompare, stripHtml, withAngular };
 //# sourceMappingURL=slate-angular.mjs.map