1 files changed, 21 insertions, 19 deletions

diff --git a/app/assets/javascripts/editor/extensions/source_editor_markdown_livepreview_ext.js b/app/assets/javascripts/editor/extensions/source_editor_markdown_livepreview_ext.js
index f8ff533f53f..9ec1a97ba1a 100644
--- a/app/assets/javascripts/editor/extensions/source_editor_markdown_livepreview_ext.js
+++ b/app/assets/javascripts/editor/extensions/source_editor_markdown_livepreview_ext.js
@@ -37,8 +37,6 @@ const setupDomElement = ({ injectToEl = null } = {}) => {
   return previewEl;
 };
 
-let dimResize = false;
-
 export class EditorMarkdownPreviewExtension {
   static get extensionName() {
     return 'EditorMarkdownPreview';
@@ -53,7 +51,6 @@ export class EditorMarkdownPreviewExtension {
       },
       shown: false,
       modelChangeListener: undefined,
-      layoutChangeListener: undefined,
       path: setupOptions.previewMarkdownPath,
       actionShowPreviewCondition: instance.createContextKey('toggleLivePreview', true),
       eventEmitter: new Emitter(),
@@ -65,13 +62,17 @@ export class EditorMarkdownPreviewExtension {
       this.setupToolbar(instance);
     }
 
-    this.preview.layoutChangeListener = instance.onDidLayoutChange(() => {
-      if (instance.markdownPreview?.shown && !dimResize) {
-        const { width } = instance.getLayoutInfo();
-        const newWidth = width * EXTENSION_MARKDOWN_PREVIEW_PANEL_WIDTH;
-        EditorMarkdownPreviewExtension.resizePreviewLayout(instance, newWidth);
+    const debouncedResizeHandler = debounce((entries) => {
+      for (const entry of entries) {
+        const { width: newInstanceWidth } = entry.contentRect;
+        if (instance.markdownPreview?.shown) {
+          const newWidth = newInstanceWidth * EXTENSION_MARKDOWN_PREVIEW_PANEL_WIDTH;
+          EditorMarkdownPreviewExtension.resizePreviewLayout(instance, newWidth);
+        }
       }
-    });
+    }, 50);
+
+    this.resizeObserver = new ResizeObserver(debouncedResizeHandler);
 
     this.preview.eventEmitter.event(this.togglePreview.bind(this, instance));
   }
@@ -85,9 +86,7 @@ export class EditorMarkdownPreviewExtension {
   }
 
   cleanup(instance) {
-    if (this.preview.layoutChangeListener) {
-      this.preview.layoutChangeListener.dispose();
-    }
+    this.resizeObserver.disconnect();
     if (this.preview.modelChangeListener) {
       this.preview.modelChangeListener.dispose();
     }
@@ -102,11 +101,7 @@ export class EditorMarkdownPreviewExtension {
 
   static resizePreviewLayout(instance, width) {
     const { height } = instance.getLayoutInfo();
-    dimResize = true;
     instance.layout({ width, height });
-    window.requestAnimationFrame(() => {
-      dimResize = false;
-    });
   }
 
   setupToolbar(instance) {
@@ -130,9 +125,16 @@ export class EditorMarkdownPreviewExtension {
 
   togglePreviewLayout(instance) {
     const { width } = instance.getLayoutInfo();
-    const newWidth = this.preview.shown
-      ? width / EXTENSION_MARKDOWN_PREVIEW_PANEL_WIDTH
-      : width * EXTENSION_MARKDOWN_PREVIEW_PANEL_WIDTH;
+    let newWidth;
+    if (this.preview.shown) {
+      // This means the preview is to be closed at the next step
+      newWidth = width / EXTENSION_MARKDOWN_PREVIEW_PANEL_WIDTH;
+      this.resizeObserver.disconnect();
+    } else {
+      // The preview is hidden, but is in the process to be opened
+      newWidth = width * EXTENSION_MARKDOWN_PREVIEW_PANEL_WIDTH;
+      this.resizeObserver.observe(instance.getContainerDomNode());
+    }
     EditorMarkdownPreviewExtension.resizePreviewLayout(instance, newWidth);
   }