From c9a0b245dab80d551364a544fe89560648cc1ece Mon Sep 17 00:00:00 2001
From: MaoShizhong <122839503+MaoShizhong@users.noreply.github.com>
Date: Wed, 28 Aug 2024 21:52:03 +0100
Subject: [PATCH] Prevent rendering mermaid diagrams until not hidden
---
app/javascript/controllers/diagramming_controller.js | 7 +++++--
app/views/lessons/previews/show.html.erb | 4 ++--
2 files changed, 7 insertions(+), 4 deletions(-)
diff --git a/app/javascript/controllers/diagramming_controller.js b/app/javascript/controllers/diagramming_controller.js
index 45fd6d7c94..2c46103424 100644
--- a/app/javascript/controllers/diagramming_controller.js
+++ b/app/javascript/controllers/diagramming_controller.js
@@ -2,8 +2,11 @@ import { Controller } from '@hotwired/stimulus'
import mermaid from 'mermaid'
export default class DiagrammingController extends Controller {
- connect () {
+ async connect () {
+ const isMarkdownPreview = Boolean(document.querySelector('#preview-container'))
+ const querySelector = isMarkdownPreview ? ':not(.hidden) > #preview-container .mermaid' : '.mermaid'
+
mermaid.initialize({ startOnLoad: false, theme: 'dark' })
- mermaid.init()
+ await mermaid.run({ querySelector })
}
}
diff --git a/app/views/lessons/previews/show.html.erb b/app/views/lessons/previews/show.html.erb
index dc2457f0c7..d20b1d5aa8 100644
--- a/app/views/lessons/previews/show.html.erb
+++ b/app/views/lessons/previews/show.html.erb
@@ -7,13 +7,13 @@
Paste markdown here to check how it will look on the website!