From ff41c24855757e68f42b0c1cd9b72f35aa58df47 Mon Sep 17 00:00:00 2001 From: Marta Motyczynska Date: Thu, 24 Nov 2022 13:05:39 +0100 Subject: [PATCH] Postpone rendering the diagram until DOM element is visible. --- src/mermaidediting.js | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/mermaidediting.js b/src/mermaidediting.js index dc6acb5..b29b8ae 100644 --- a/src/mermaidediting.js +++ b/src/mermaidediting.js @@ -194,10 +194,19 @@ export default class MermaidEditing extends Plugin { domElement.innerHTML = mermaidSource; - window.setTimeout( () => { - // @todo: by the looks of it the domElement needs to be hooked to tree in order to allow for rendering. + // Rendering mermaid diagram won't be successful if the domElement is invisible. + // Instead of rendering it right away (or with a fixed timeout), let's postpone rendering until the domElement is visible. + // https://github.com/ckeditor/github-writer/issues/379 + if ( !domElement.getBoundingClientRect().height ) { + const resizeObserver = new window.ResizeObserver( () => { + that._renderMermaid( domElement ); + resizeObserver.unobserve( domElement ); + } ); + + resizeObserver.observe( domElement ); + } else { that._renderMermaid( domElement ); - }, 100 ); + } return domElement; }