fix(virtual): #WIK-19556 there is a blank space below the scroll when the page switches to widescreen

.changeset/witty-horses-fix.md

@@ -0,0 +1,5 @@
+---
+'slate-angular': patch
+---
+
+there is a blank space below the scroll when the page switches to widescreen

packages/src/components/editable/editable.component.ts

@@ -139,32 +139,7 @@ export class SlateEditable implements OnInit, OnChanges, OnDestroy, AfterViewChe
     @Input()
     set virtualScroll(config: SlateVirtualScrollConfig) {
         this.virtualConfig = config;
-        this.refreshVirtualViewAnimId && cancelAnimationFrame(this.refreshVirtualViewAnimId);
-        this.refreshVirtualViewAnimId = requestAnimationFrame(() => {
-            let virtualView = this.refreshVirtualView();
-            let diff = this.diffVirtualView(virtualView);
-            if (!diff.isDiff) {
-                return;
-            }
-            if (diff.isMissingTop) {
-                const result = this.remeasureHeightByIndics(diff.diffTopRenderedIndexes);
-                if (result) {
-                    virtualView = this.refreshVirtualView();
-                    diff = this.diffVirtualView(virtualView, 'second');
-                    if (!diff.isDiff) {
-                        return;
-                    }
-                }
-            }
-            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();
-        });
+        this.doVirtualScroll();
     }
 
     //#region input event handler
@@ -225,6 +200,7 @@ export class SlateEditable implements OnInit, OnChanges, OnDestroy, AfterViewChe
     private measuredHeights = new Map<string, number>();
     private refreshVirtualViewAnimId: number;
     private measureVisibleHeightsAnimId: number;
+    private editorResizeObserver?: ResizeObserver;
 
     constructor(
         public elementRef: ElementRef,
@@ -620,6 +596,16 @@ export class SlateEditable implements OnInit, OnChanges, OnDestroy, AfterViewChe
             this.elementRef.nativeElement.appendChild(this.virtualCenterOutlet);
             this.elementRef.nativeElement.appendChild(this.virtualBottomHeightElement);
             this.businessHeight = this.virtualTopHeightElement.getBoundingClientRect()?.top ?? 0;
+
+            let editorResizeObserverRectWidth = this.elementRef.nativeElement.getBoundingClientRect()?.width ?? 0;
+            this.editorResizeObserver = new ResizeObserver(entries => {
+                if (entries.length > 0 && entries[0].contentRect.width !== editorResizeObserverRectWidth) {
+                    editorResizeObserverRectWidth = entries[0].contentRect.width;
+                    this.measuredHeights.clear();
+                    this.doVirtualScroll();
+                }
+            });
+            this.editorResizeObserver.observe(this.elementRef.nativeElement);
         }
     }
 
@@ -631,6 +617,35 @@ export class SlateEditable implements OnInit, OnChanges, OnDestroy, AfterViewChe
         this.virtualBottomHeightElement.style.height = `${bottomHeight}px`;
     }
 
+    private doVirtualScroll() {
+        this.refreshVirtualViewAnimId && cancelAnimationFrame(this.refreshVirtualViewAnimId);
+        this.refreshVirtualViewAnimId = requestAnimationFrame(() => {
+            let virtualView = this.refreshVirtualView();
+            let diff = this.diffVirtualView(virtualView);
+            if (!diff.isDiff) {
+                return;
+            }
+            if (diff.isMissingTop) {
+                const result = this.remeasureHeightByIndics(diff.diffTopRenderedIndexes);
+                if (result) {
+                    virtualView = this.refreshVirtualView();
+                    diff = this.diffVirtualView(virtualView, 'second');
+                    if (!diff.isDiff) {
+                        return;
+                    }
+                }
+            }
+            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();
+        });
+    }
+
     private refreshVirtualView() {
         const children = (this.editor.children || []) as Element[];
         if (!children.length || !this.shouldUseVirtual()) {
@@ -1714,6 +1729,7 @@ export class SlateEditable implements OnInit, OnChanges, OnDestroy, AfterViewChe
     //#endregion
 
     ngOnDestroy() {
+        this.editorResizeObserver?.disconnect();
         NODE_TO_ELEMENT.delete(this.editor);
         this.manualListeners.forEach(manualListener => {
             manualListener();