slate-angular 20.2.20 → 20.2.21

package/fesm2022/slate-angular.mjs

@@ -1149,7 +1149,7 @@ const buildHeightsAndAccumulatedHeights = (editor, visibleStates) => {
     }
     return { heights, accumulatedHeights };
 };
-const calculateVirtualTopHeight = (editor, startIndex, visibleStates) => {
+const calculateAccumulatedTopHeight = (editor, startIndex, visibleStates) => {
     const { accumulatedHeights } = buildHeightsAndAccumulatedHeights(editor, visibleStates);
     const virtualTopHeight = roundTo(accumulatedHeights[startIndex] ?? 0, 1);
     return virtualTopHeight;
@@ -2975,23 +2975,22 @@ const createText = (text) => {
 
 const PRE_RENDERING_ELEMENT_ON_TOP_CLASS = 'pre-rendering-element-on-top';
 const setPreRenderingElementStyle = (editor, rootNode, isClear = false) => {
-    if (isClear) {
-        rootNode.style.top = '';
-        rootNode.style.width = '';
-        rootNode.style.position = '';
-        rootNode.classList.remove(PRE_RENDERING_ELEMENT_ON_TOP_CLASS);
-        return;
-    }
-    const preRenderingWidth = EDITOR_TO_ROOT_NODE_WIDTH.get(editor) ?? 0;
-    rootNode.style.top = '-100%';
-    if (preRenderingWidth) {
-        rootNode.style.width = `${preRenderingWidth}px`;
-    }
-    else {
-        rootNode.style.width = '100%';
-    }
-    rootNode.style.position = 'absolute';
-    rootNode.classList.add(PRE_RENDERING_ELEMENT_ON_TOP_CLASS);
+    // if (isClear) {
+    //     rootNode.style.top = '';
+    //     rootNode.style.width = '';
+    //     rootNode.style.position = '';
+    //     rootNode.classList.remove(PRE_RENDERING_ELEMENT_ON_TOP_CLASS);
+    //     return;
+    // }
+    // const preRenderingWidth = EDITOR_TO_ROOT_NODE_WIDTH.get(editor) ?? 0;
+    // rootNode.style.top = '-100%';
+    // if (preRenderingWidth) {
+    //     rootNode.style.width = `${preRenderingWidth}px`;
+    // } else {
+    //     rootNode.style.width = '100%';
+    // }
+    // rootNode.style.position = 'absolute';
+    // rootNode.classList.add(PRE_RENDERING_ELEMENT_ON_TOP_CLASS);
 };
 const updatePreRenderingElementWidth = (editor) => {
     const editorDom = AngularEditor.toDOMNode(editor, editor);
@@ -3020,6 +3019,7 @@ class ListRender {
         this.differ = null;
         this.initialized = false;
         this.preRenderingHTMLElement = [];
+        this.virtualTopHeightElement = null;
     }
     initialize(children, parent, childrenContext, preRenderingCount = 0, childrenIndics) {
         this.initialized = true;
@@ -3065,21 +3065,28 @@ class ListRender {
         const outletParent = this.getOutletParent();
         if (this.preRenderingHTMLElement.length > 0) {
             const preRenderingElement = [...this.preRenderingHTMLElement];
+            let previousRootNode = this.virtualTopHeightElement;
             preRenderingElement.forEach((rootNodes, index) => {
-                const slateElement = this.children[index];
-                if (slateElement && children.indexOf(slateElement) >= 0) {
-                    rootNodes.forEach(rootNode => {
-                        setPreRenderingElementStyle(this.viewContext.editor, rootNode, true);
-                    });
-                    if (isDebug) {
-                        debugLog('log', 'preRenderingHTMLElement index: ', this.viewContext.editor.children.indexOf(this.children[index]), 'is clear true');
-                    }
-                }
-                else {
-                    if (isDebug) {
-                        debugLog('log', 'preRenderingHTMLElement index: ', this.viewContext.editor.children.indexOf(this.children[index]), 'do not clear since it would be removed soon');
-                    }
+                // const slateElement = this.children[index];
+                // if (slateElement && children.indexOf(slateElement) >= 0) {
+                rootNodes.forEach(rootNode => {
+                    setPreRenderingElementStyle(this.viewContext.editor, rootNode, true);
+                    previousRootNode.insertAdjacentElement('afterend', rootNode);
+                    previousRootNode = rootNode;
+                });
+                if (isDebug) {
+                    debugLog('log', 'preRenderingHTMLElement index: ', this.viewContext.editor.children.indexOf(this.children[index]), 'is clear true');
                 }
+                // } else {
+                //     if (isDebug) {
+                //         debugLog(
+                //             'log',
+                //             'preRenderingHTMLElement index: ',
+                //             this.viewContext.editor.children.indexOf(this.children[index]),
+                //             'do not clear since it would be removed soon'
+                //         );
+                //     }
+                // }
             });
             this.preRenderingHTMLElement = [];
         }
@@ -3194,6 +3201,10 @@ class ListRender {
                     setPreRenderingElementStyle(this.viewContext.editor, rootNode);
                 });
                 this.preRenderingHTMLElement.push(rootNodes);
+                if (!this.virtualTopHeightElement) {
+                    this.virtualTopHeightElement = rootNodes[0].parentElement.querySelector(`.${VIRTUAL_TOP_HEIGHT_CLASS_NAME}`);
+                }
+                this.virtualTopHeightElement.append(...rootNodes);
                 if (isDebug) {
                     debugLog('log', 'preRenderingHTMLElement index: ', this.viewContext.editor.children.indexOf(children[i]));
                 }
@@ -3366,6 +3377,8 @@ function executeAfterViewInit(editor) {
 
 // not correctly clipboardData on beforeinput
 const forceOnDOMPaste = IS_SAFARI;
+class RemeasureConfig {
+}
 class SlateEditable {
     set virtualScroll(config) {
         this.virtualScrollConfig = config;
@@ -3428,7 +3441,7 @@ class SlateEditable {
         this.inViewportChildren = [];
         this.inViewportIndics = [];
         this.keyHeightMap = new Map();
-        this.indicsOfNeedBeMeasured$ = new Subject();
+        this.indicsOfNeedRemeasured$ = new Subject();
         this.virtualScrollInitialized = false;
     }
     ngOnInit() {
@@ -3499,12 +3512,12 @@ class SlateEditable {
                     this.listRender.initialize(childrenForRender, this.editor, this.context, 0, virtualView.inViewportIndics);
                 }
                 else {
-                    const { preRenderingCount, childrenWithPreRendering, childrenWithPreRenderingIndics } = this.handlePreRendering(visibleStates);
+                    const { preRenderingCount, childrenWithPreRendering, childrenWithPreRenderingIndics } = this.appendPreRenderingToViewport(visibleStates);
                     this.listRender.update(childrenWithPreRendering, this.editor, this.context, preRenderingCount, childrenWithPreRenderingIndics);
                 }
                 const remeasureIndics = this.getChangedIndics(previousInViewportChildren);
                 if (remeasureIndics.length) {
-                    this.indicsOfNeedBeMeasured$.next(remeasureIndics);
+                    this.indicsOfNeedRemeasured$.next({ indics: remeasureIndics, tryUpdateViewport: true });
                 }
             }
             else {
@@ -3597,20 +3610,22 @@ class SlateEditable {
                 this.editorScrollContainerResizeObserver.observe(this.virtualScrollConfig.scrollContainer);
             }
             let pendingRemeasureIndics = [];
-            this.indicsOfNeedBeMeasured$
+            this.indicsOfNeedRemeasured$
                 .pipe(tap((previousValue) => {
-                previousValue.forEach((index) => {
+                previousValue.indics.forEach((index) => {
                     if (!pendingRemeasureIndics.includes(index)) {
                         pendingRemeasureIndics.push(index);
                     }
                 });
             }), debounceTime(500), filter(() => pendingRemeasureIndics.length > 0))
-                .subscribe(() => {
+                .subscribe((previousValue) => {
                 const changed = measureHeightByIndics(this.editor, pendingRemeasureIndics, true);
                 if (changed) {
-                    this.tryUpdateVirtualViewport();
-                    if (isDebug) {
-                        debugLog('log', 'exist pendingRemeasureIndics: ', pendingRemeasureIndics, 'will try to update virtual viewport');
+                    if (previousValue.tryUpdateViewport) {
+                        this.tryUpdateVirtualViewport();
+                        if (isDebug) {
+                            debugLog('log', 'exist pendingRemeasureIndics: ', pendingRemeasureIndics, 'will try to update virtual viewport');
+                        }
                     }
                 }
                 pendingRemeasureIndics = [];
@@ -3641,7 +3656,7 @@ class SlateEditable {
         }
         return parseFloat(this.virtualTopHeightElement.style.height.replace('px', ''));
     }
-    handlePreRendering(visibleStates) {
+    appendPreRenderingToViewport(visibleStates) {
         let preRenderingCount = 0;
         const childrenWithPreRendering = [...this.inViewportChildren];
         const childrenWithPreRenderingIndics = [...this.inViewportIndics];
@@ -3666,20 +3681,41 @@ class SlateEditable {
         }
         return { preRenderingCount, childrenWithPreRendering, childrenWithPreRenderingIndics };
     }
+    calculateIndicsStartAndEndBySelection() {
+        if (!this.editor.selection || Range.isCollapsed(this.editor.selection)) {
+            return;
+        }
+        const isBackward = Range.isBackward(this.editor.selection);
+        const anchorIndex = this.editor.selection.anchor.path[0];
+        const focusIndex = this.editor.selection.focus.path[0];
+        let minStartIndex = anchorIndex;
+        let minEndIndex = focusIndex;
+        if (isBackward) {
+            minStartIndex = focusIndex;
+            minEndIndex = anchorIndex;
+        }
+        if (minStartIndex < this.inViewportIndics[0]) {
+            minStartIndex = this.inViewportIndics[0];
+        }
+        if (minEndIndex > this.inViewportIndics[this.inViewportIndics.length - 1]) {
+            minEndIndex = this.inViewportIndics[this.inViewportIndics.length - 1];
+        }
+        return { minStartIndex, minEndIndex };
+    }
     tryUpdateVirtualViewport() {
         if (isDebug) {
             debugLog('log', 'tryUpdateVirtualViewport');
         }
         const isFromScrollTo = EDITOR_TO_IS_FROM_SCROLL_TO.get(this.editor);
         if (this.inViewportIndics.length > 0 && !isFromScrollTo) {
-            const topHeight = this.getActualVirtualTopHeight();
+            const realTopHeight = this.getActualVirtualTopHeight();
             const visibleStates = this.editor.getAllVisibleStates();
-            const refreshVirtualTopHeight = calculateVirtualTopHeight(this.editor, this.inViewportIndics[0], visibleStates);
-            if (topHeight !== refreshVirtualTopHeight) {
+            const accumulateTopHeigh = calculateAccumulatedTopHeight(this.editor, this.inViewportIndics[0], visibleStates);
+            if (realTopHeight !== accumulateTopHeigh) {
                 if (isDebug) {
-                    debugLog('log', 'update top height since dirty state，增加高度: ', refreshVirtualTopHeight - topHeight);
+                    debugLog('log', 'update top height since dirty state，增加高度: ', accumulateTopHeigh - realTopHeight);
                 }
-                this.setVirtualSpaceHeight(refreshVirtualTopHeight);
+                this.setVirtualSpaceHeight(accumulateTopHeigh);
                 return;
             }
         }
@@ -3702,7 +3738,7 @@ class SlateEditable {
             if (diff.isDifferent) {
                 this.applyVirtualView(virtualView);
                 if (this.listRender.initialized) {
-                    const { preRenderingCount, childrenWithPreRendering, childrenWithPreRenderingIndics } = this.handlePreRendering(visibleStates);
+                    const { preRenderingCount, childrenWithPreRendering, childrenWithPreRenderingIndics } = this.appendPreRenderingToViewport(visibleStates);
                     this.listRender.update(childrenWithPreRendering, this.editor, this.context, preRenderingCount, childrenWithPreRenderingIndics);
                     if (diff.needAddOnTop && !isFromScrollTo) {
                         const remeasureAddedIndics = diff.changedIndexesOfTop;
@@ -3760,10 +3796,13 @@ class SlateEditable {
             endPosition = startPosition + viewportHeight - (businessTop - scrollTop);
         }
         let accumulatedOffset = 0;
-        let inViewportStartIndex = -1;
-        const visible = [];
+        const inViewportChildren = [];
         const inViewportIndics = [];
-        for (let i = 0; i < elementLength && accumulatedOffset < endPosition; i++) {
+        const indicsBySelection = this.calculateIndicsStartAndEndBySelection();
+        if (isDebug) {
+            debugLog('log', 'indicsBySelection: ', indicsBySelection);
+        }
+        for (let i = 0; i < elementLength; i++) {
             const currentHeight = heights[i];
             const nextOffset = accumulatedOffset + currentHeight;
             const isVisible = visibleStates[i];
@@ -3771,20 +3810,30 @@ class SlateEditable {
                 accumulatedOffset = nextOffset;
                 continue;
             }
-            // 可视区域有交集，加入渲染
-            if (nextOffset > startPosition && accumulatedOffset < endPosition) {
-                if (inViewportStartIndex === -1)
-                    inViewportStartIndex = i; // 第一个相交起始位置
-                visible.push(children[i]);
-                inViewportIndics.push(i);
+            if ((indicsBySelection && i > indicsBySelection.minEndIndex && accumulatedOffset >= endPosition) ||
+                (!indicsBySelection && accumulatedOffset >= endPosition)) {
+                break;
+            }
+            if ((indicsBySelection && i < indicsBySelection.minStartIndex && nextOffset <= startPosition) ||
+                (!indicsBySelection && nextOffset <= startPosition)) {
+                accumulatedOffset = nextOffset;
+                continue;
             }
+            inViewportChildren.push(children[i]);
+            inViewportIndics.push(i);
             accumulatedOffset = nextOffset;
         }
-        const inViewportEndIndex = inViewportStartIndex === -1 ? elementLength - 1 : (inViewportIndics[inViewportIndics.length - 1] ?? inViewportStartIndex);
-        const top = inViewportStartIndex === -1 ? 0 : accumulatedHeights[inViewportStartIndex];
+        if (inViewportIndics.length === 0) {
+            inViewportChildren.push(...children);
+            inViewportIndics.push(...Array.from({ length: elementLength }, (_, i) => i));
+        }
+        const inViewportStartIndex = inViewportIndics[0];
+        const inViewportEndIndex = inViewportIndics[inViewportIndics.length - 1];
+        const top = accumulatedHeights[inViewportStartIndex];
+        // todo: toggleHeight: toggleHeight 逻辑需要优化
         const bottom = totalHeight - accumulatedHeights[inViewportEndIndex + 1];
         return {
-            inViewportChildren: visible.length ? visible : children,
+            inViewportChildren,
             inViewportIndics,
             top,
             bottom,
@@ -4179,11 +4228,11 @@ class SlateEditable {
             }
             this.applyVirtualView(virtualView);
         }
-        const { preRenderingCount, childrenWithPreRendering, childrenWithPreRenderingIndics } = this.handlePreRendering(visibleStates);
+        const { preRenderingCount, childrenWithPreRendering, childrenWithPreRenderingIndics } = this.appendPreRenderingToViewport(visibleStates);
         this.listRender.update(childrenWithPreRendering, this.editor, this.context, preRenderingCount, childrenWithPreRenderingIndics);
         const remeasureIndics = this.getChangedIndics(previousInViewportChildren);
         if (remeasureIndics.length) {
-            this.indicsOfNeedBeMeasured$.next(remeasureIndics);
+            this.indicsOfNeedRemeasured$.next({ indics: remeasureIndics, tryUpdateViewport: true });
         }
     }
     updateContext() {
@@ -5471,5 +5520,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, calculateVirtualTopHeight, 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, 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 };
 //# sourceMappingURL=slate-angular.mjs.map