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 | 27 |
1 files changed, 25 insertions, 2 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 11cc85c659d..e4ad0bf8e76 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 @@ -36,6 +36,8 @@ const setupDomElement = ({ injectToEl = null } = {}) => { return previewEl; }; +let dimResize = false; + export class EditorMarkdownPreviewExtension { static get extensionName() { return 'EditorMarkdownPreview'; @@ -50,6 +52,7 @@ export class EditorMarkdownPreviewExtension { }, shown: false, modelChangeListener: undefined, + layoutChangeListener: undefined, path: setupOptions.previewMarkdownPath, actionShowPreviewCondition: instance.createContextKey('toggleLivePreview', true), }; @@ -59,6 +62,14 @@ export class EditorMarkdownPreviewExtension { if (instance.toolbar) { 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); + } + }); } onBeforeUnuse(instance) { @@ -70,6 +81,9 @@ export class EditorMarkdownPreviewExtension { } cleanup(instance) { + if (this.preview.layoutChangeListener) { + this.preview.layoutChangeListener.dispose(); + } if (this.preview.modelChangeListener) { this.preview.modelChangeListener.dispose(); } @@ -82,6 +96,15 @@ export class EditorMarkdownPreviewExtension { this.preview.shown = false; } + static resizePreviewLayout(instance, width) { + const { height } = instance.getLayoutInfo(); + dimResize = true; + instance.layout({ width, height }); + window.requestAnimationFrame(() => { + dimResize = false; + }); + } + setupToolbar(instance) { this.toolbarButtons = [ { @@ -99,11 +122,11 @@ export class EditorMarkdownPreviewExtension { } togglePreviewLayout(instance) { - const { width, height } = instance.getLayoutInfo(); + const { width } = instance.getLayoutInfo(); const newWidth = this.preview.shown ? width / EXTENSION_MARKDOWN_PREVIEW_PANEL_WIDTH : width * EXTENSION_MARKDOWN_PREVIEW_PANEL_WIDTH; - instance.layout({ width: newWidth, height }); + EditorMarkdownPreviewExtension.resizePreviewLayout(instance, newWidth); } togglePreviewPanel(instance) { |