diff options
Diffstat (limited to 'app/assets/javascripts/editor/extensions/source_editor_markdown_livepreview_ext.js')
-rw-r--r-- | app/assets/javascripts/editor/extensions/source_editor_markdown_livepreview_ext.js | 40 |
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); } |