slate-angular 20.2.0-next.4 → 20.2.0-next.6

package/fesm2022/slate-angular.mjs

@@ -1135,6 +1135,9 @@ const withAngular = (editor, clipboardFormatKey = 'x-slate-fragment') => {
             NODE_TO_KEY.set(node, key);
         }
     };
+    e.selectAll = () => {
+        Transforms.select(e, []);
+    };
     return e;
 };
 
@@ -1835,7 +1838,7 @@ class BaseElementFlavour extends BaseFlavour {
         const blockCard = getBlockCardByNativeElement(this.nativeElement);
         const target = blockCard || this.nativeElement;
         const computedStyle = getComputedStyle(target);
-        const height = target.offsetHeight + parseFloat(computedStyle.marginTop) + parseFloat(computedStyle.marginBottom);
+        const height = Math.ceil(target.getBoundingClientRect().height) + parseFloat(computedStyle.marginTop) + parseFloat(computedStyle.marginBottom);
         if (this.isStableHeight()) {
             this.stableHeight = height;
         }
@@ -2579,7 +2582,7 @@ class SlateEditable {
                 return;
             }
             if (diff.isMissingTop) {
-                const result = this.remeasureHeightByIndics([...diff.diffTopRenderedIndexes]);
+                const result = this.remeasureHeightByIndics(diff.diffTopRenderedIndexes);
                 if (result) {
                     virtualView = this.refreshVirtualView();
                     diff = this.diffVirtualView(virtualView, 'second');
@@ -2591,6 +2594,9 @@ class SlateEditable {
             this.applyVirtualView(virtualView);
             if (this.listRender.initialized) {
                 this.listRender.update(virtualView.renderedChildren, this.editor, this.context);
+                if (!AngularEditor.isReadOnly(this.editor) && this.editor.selection) {
+                    this.toNativeSelection();
+                }
             }
             this.scheduleMeasureVisibleHeights();
         });
@@ -2646,7 +2652,6 @@ class SlateEditable {
         this.renderedChildren = [];
         this.virtualVisibleIndexes = new Set();
         this.measuredHeights = new Map();
-        this.measurePending = false;
         // the height from scroll container top to editor top height element
         this.businessHeight = 0;
         this.virtualScrollInitialized = false;
@@ -2747,7 +2752,23 @@ class SlateEditable {
     }
     toNativeSelection() {
         try {
-            const { selection } = this.editor;
+            let { selection: currentSelection } = this.editor;
+            let selection = currentSelection;
+            if (this.virtualConfig?.enabled) {
+                const indics = Array.from(this.virtualVisibleIndexes.values());
+                if (indics.length > 0) {
+                    const currentVisibleRange = {
+                        anchor: Editor.start(this.editor, [indics[0]]),
+                        focus: Editor.end(this.editor, [indics[indics.length - 1]])
+                    };
+                    selection = Range.intersection(selection, currentVisibleRange);
+                    if ((!selection && currentSelection) || (selection && !Range.equals(selection, currentSelection))) {
+                        if (isDebug) {
+                            console.log(`selection is not in visible range, selection: ${JSON.stringify(currentSelection)}, intersection selection: ${JSON.stringify(selection)}`);
+                        }
+                    }
+                }
+            }
             const root = AngularEditor.findDocumentOrShadowRoot(this.editor);
             const { activeElement } = root;
             const domSelection = root.getSelection();
@@ -2954,8 +2975,10 @@ class SlateEditable {
             this.virtualScrollInitialized = true;
             this.virtualTopHeightElement = document.createElement('div');
             this.virtualTopHeightElement.classList.add('virtual-top-height');
+            this.virtualTopHeightElement.contentEditable = 'false';
             this.virtualBottomHeightElement = document.createElement('div');
             this.virtualBottomHeightElement.classList.add('virtual-bottom-height');
+            this.virtualBottomHeightElement.contentEditable = 'false';
             this.virtualCenterOutlet = document.createElement('div');
             this.virtualCenterOutlet.classList.add('virtual-center-outlet');
             this.elementRef.nativeElement.appendChild(this.virtualTopHeightElement);
@@ -2995,16 +3018,21 @@ class SlateEditable {
         }
         const elementLength = children.length;
         const adjustedScrollTop = Math.max(0, scrollTop - this.businessHeight);
-        const viewBottom = scrollTop + viewportHeight;
+        const heights = children.map((_, idx) => this.getBlockHeight(idx));
+        const accumulatedHeights = this.buildAccumulatedHeight(heights);
+        const totalHeight = accumulatedHeights[elementLength];
+        const maxScrollTop = Math.max(0, totalHeight - viewportHeight);
+        const limitedScrollTop = Math.min(adjustedScrollTop, maxScrollTop);
+        const viewBottom = limitedScrollTop + viewportHeight + this.businessHeight;
         let accumulatedOffset = 0;
         let visibleStartIndex = -1;
         const visible = [];
         const visibleIndexes = [];
         for (let i = 0; i < elementLength && accumulatedOffset < viewBottom; i++) {
-            const currentHeight = this.getBlockHeight(i);
+            const currentHeight = heights[i];
             const nextOffset = accumulatedOffset + currentHeight;
             // 可视区域有交集，加入渲染
-            if (nextOffset > adjustedScrollTop && accumulatedOffset < viewBottom) {
+            if (nextOffset > limitedScrollTop && accumulatedOffset < viewBottom) {
                 if (visibleStartIndex === -1)
                     visibleStartIndex = i; // 第一个相交起始位置
                 visible.push(children[i]);
@@ -3012,11 +3040,14 @@ class SlateEditable {
             }
             accumulatedOffset = nextOffset;
         }
-        const visibleEndIndex = visibleStartIndex === -1 ? elementLength - 1 : visibleIndexes.length - 1;
-        const heights = children.map((_, idx) => this.getBlockHeight(idx));
-        const accumulatedHeights = this.buildAccumulatedHeight(heights);
+        if (visibleStartIndex === -1 && elementLength) {
+            visibleStartIndex = elementLength - 1;
+            visible.push(children[visibleStartIndex]);
+            visibleIndexes.push(visibleStartIndex);
+        }
+        const visibleEndIndex = visibleStartIndex === -1 ? elementLength - 1 : (visibleIndexes[visibleIndexes.length - 1] ?? visibleStartIndex);
         const top = visibleStartIndex === -1 ? 0 : accumulatedHeights[visibleStartIndex];
-        const bottom = accumulatedHeights[elementLength] - accumulatedHeights[visibleEndIndex];
+        const bottom = totalHeight - accumulatedHeights[visibleEndIndex + 1];
         return {
             renderedChildren: visible.length ? visible : children,
             visibleIndexes: new Set(visibleIndexes),
@@ -3139,20 +3170,6 @@ class SlateEditable {
         }
         return accumulatedHeights;
     }
-    getBufferBelowHeight(viewportHeight, visibleStart, bufferCount) {
-        let blockHeight = 0;
-        let start = visibleStart;
-        // 循环累计高度超出视图高度代表找到向下缓冲区的起始位置
-        while (blockHeight < viewportHeight) {
-            blockHeight += this.getBlockHeight(start);
-            start++;
-        }
-        let bufferHeight = 0;
-        for (let i = start; i < start + bufferCount; i++) {
-            bufferHeight += this.getBlockHeight(i);
-        }
-        return bufferHeight;
-    }
     scheduleMeasureVisibleHeights() {
         if (!this.shouldUseVirtual()) {
             return;
@@ -3751,6 +3768,11 @@ class SlateEditable {
                     Transforms.move(editor, { unit: 'word', reverse: isRTL });
                     return;
                 }
+                if (isKeyHotkey('mod+a', event)) {
+                    this.editor.selectAll();
+                    event.preventDefault();
+                    return;
+                }
                 // COMPAT: Certain browsers don't support the `beforeinput` event, so we
                 // fall back to guessing at the input intention for hotkeys.
                 // COMPAT: In iOS, some of these hotkeys are handled in the
@@ -4269,7 +4291,7 @@ class BaseElementComponent extends BaseComponent {
         const blockCard = getBlockCardByNativeElement(this.nativeElement);
         const target = blockCard || this.nativeElement;
         const computedStyle = getComputedStyle(target);
-        const height = target.offsetHeight + parseFloat(computedStyle.marginTop) + parseFloat(computedStyle.marginBottom);
+        const height = Math.ceil(target.getBoundingClientRect().height) + parseFloat(computedStyle.marginTop) + parseFloat(computedStyle.marginBottom);
         if (this.isStableHeight()) {
             this.stableHeight = height;
         }