slate-angular 20.2.9 → 20.2.10

package/fesm2022/slate-angular.mjs

@@ -1591,7 +1591,8 @@ const buildHeightsAndAccumulatedHeights = (editor) => {
     const accumulatedHeights = new Array(children.length + 1);
     accumulatedHeights[0] = 0;
     for (let i = 0; i < children.length; i++) {
-        let height = getCachedHeightByElement(editor, children[i]);
+        const isVisible = editor.isVisible(children[i]);
+        let height = isVisible ? getCachedHeightByElement(editor, children[i]) : 0;
         if (height === null) {
             try {
                 height = editor.getRoughHeight(children[i]);
@@ -2921,11 +2922,13 @@ const createText = (text) => {
     return { nativeElement };
 };
 
+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;
@@ -2937,6 +2940,20 @@ const setPreRenderingElementStyle = (editor, rootNode, isClear = false) => {
         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);
+    const rootNodes = editorDom.querySelectorAll(`.${PRE_RENDERING_ELEMENT_ON_TOP_CLASS}`);
+    const preRenderingWidth = EDITOR_TO_ROOT_NODE_WIDTH.get(editor) ?? 0;
+    rootNodes.forEach(rootNode => {
+        if (preRenderingWidth) {
+            rootNode.style.width = `${preRenderingWidth}px`;
+        }
+        else {
+            rootNode.style.width = '100%';
+        }
+    });
 };
 class ListRender {
     constructor(viewContext, viewContainerRef, getOutletParent, getOutletElement) {
@@ -3782,12 +3799,16 @@ class SlateEditable {
             this.elementRef.nativeElement.appendChild(this.virtualCenterOutlet);
             this.elementRef.nativeElement.appendChild(this.virtualBottomHeightElement);
             let editorResizeObserverRectWidth = this.elementRef.nativeElement.getBoundingClientRect().width;
-            EDITOR_TO_ROOT_NODE_WIDTH.set(this.editor, this.virtualTopHeightElement.getBoundingClientRect().width);
+            EDITOR_TO_ROOT_NODE_WIDTH.set(this.editor, this.virtualTopHeightElement.offsetWidth);
             this.editorResizeObserver = new ResizeObserver(entries => {
                 if (entries.length > 0 && entries[0].contentRect.width !== editorResizeObserverRectWidth) {
                     editorResizeObserverRectWidth = entries[0].contentRect.width;
                     this.keyHeightMap.clear();
-                    EDITOR_TO_ROOT_NODE_WIDTH.set(this.editor, this.virtualTopHeightElement.getBoundingClientRect().width);
+                    const firstElement = this.inViewportChildren[0];
+                    const firstDomElement = AngularEditor.toDOMNode(this.editor, firstElement);
+                    const target = firstDomElement || this.virtualTopHeightElement;
+                    EDITOR_TO_ROOT_NODE_WIDTH.set(this.editor, target.offsetWidth);
+                    updatePreRenderingElementWidth(this.editor);
                     this.viewportRefresh$.next();
                     if (isDebug) {
                         debugLog('log', 'editorResizeObserverRectWidth: ', editorResizeObserverRectWidth, 'EDITOR_TO_ROOT_NODE_WIDTH: ', EDITOR_TO_ROOT_NODE_WIDTH.get(this.editor));