From 7c9a7c9ff68a750934fd625cf0319e37b887e412 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 22 Mar 2025 15:02:04 +0200
Subject: [PATCH] refactor(mermaid): move mermaid config to service

---
 src/public/app/services/mermaid.ts            | 19 ++++++++++++++++
 .../app/widgets/type_widgets/editable_text.ts |  2 +-
 .../app/widgets/type_widgets/mermaid.ts       | 22 +------------------
 .../widgets/type_widgets/read_only_text.ts    |  2 +-
 4 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/src/public/app/services/mermaid.ts b/src/public/app/services/mermaid.ts
index a42a3716e..707401722 100644
--- a/src/public/app/services/mermaid.ts
+++ b/src/public/app/services/mermaid.ts
@@ -1,7 +1,26 @@
+import type { MermaidConfig } from "mermaid";
 import type { Mermaid } from "mermaid";
 
 let elkLoaded = false;
 
+export function getMermaidConfig(): MermaidConfig {
+    const documentStyle = window.getComputedStyle(document.documentElement);
+    const mermaidTheme = documentStyle.getPropertyValue("--mermaid-theme") as "default";
+
+    return {
+        theme: mermaidTheme.trim() as "default",
+        securityLevel: "antiscript",
+        flowchart: { useMaxWidth: false },
+        sequence: { useMaxWidth: false },
+        gantt: { useMaxWidth: false },
+        class: { useMaxWidth: false },
+        state: { useMaxWidth: false },
+        pie: { useMaxWidth: true },
+        journey: { useMaxWidth: false },
+        gitGraph: { useMaxWidth: false }
+    };
+}
+
 /**
  * Determines whether the ELK extension of Mermaid.js needs to be loaded (which is a relatively large library), based on the
  * front-matter of the diagram and loads the library if needed.
diff --git a/src/public/app/widgets/type_widgets/editable_text.ts b/src/public/app/widgets/type_widgets/editable_text.ts
index dacc85edf..d4c8e6aae 100644
--- a/src/public/app/widgets/type_widgets/editable_text.ts
+++ b/src/public/app/widgets/type_widgets/editable_text.ts
@@ -16,7 +16,7 @@ import toast from "../../services/toast.js";
 import { normalizeMimeTypeForCKEditor } from "../../services/mime_type_definitions.js";
 import { buildConfig, buildToolbarConfig } from "./ckeditor/config.js";
 import type FNote from "../../entities/fnote.js";
-import { getMermaidConfig } from "./mermaid.js";
+import { getMermaidConfig } from "../../services/mermaid.js";
 
 const ENABLE_INSPECTOR = false;
 
diff --git a/src/public/app/widgets/type_widgets/mermaid.ts b/src/public/app/widgets/type_widgets/mermaid.ts
index d311ee00b..50353e230 100644
--- a/src/public/app/widgets/type_widgets/mermaid.ts
+++ b/src/public/app/widgets/type_widgets/mermaid.ts
@@ -1,5 +1,4 @@
-import type { MermaidConfig } from "mermaid";
-import { loadElkIfNeeded, postprocessMermaidSvg } from "../../services/mermaid.js";
+import { getMermaidConfig, loadElkIfNeeded, postprocessMermaidSvg } from "../../services/mermaid.js";
 import AbstractSvgSplitTypeWidget from "./abstract_svg_split_type_widget.js";
 
 let idCounter = 1;
@@ -34,22 +33,3 @@ export class MermaidTypeWidget extends AbstractSvgSplitTypeWidget {
     }
 
 }
-
-
-export function getMermaidConfig(): MermaidConfig {
-    const documentStyle = window.getComputedStyle(document.documentElement);
-    const mermaidTheme = documentStyle.getPropertyValue("--mermaid-theme") as "default";
-
-    return {
-        theme: mermaidTheme.trim() as "default",
-        securityLevel: "antiscript",
-        flowchart: { useMaxWidth: false },
-        sequence: { useMaxWidth: false },
-        gantt: { useMaxWidth: false },
-        class: { useMaxWidth: false },
-        state: { useMaxWidth: false },
-        pie: { useMaxWidth: true },
-        journey: { useMaxWidth: false },
-        gitGraph: { useMaxWidth: false }
-    };
-}
diff --git a/src/public/app/widgets/type_widgets/read_only_text.ts b/src/public/app/widgets/type_widgets/read_only_text.ts
index 0d9fb49c5..bc78c7944 100644
--- a/src/public/app/widgets/type_widgets/read_only_text.ts
+++ b/src/public/app/widgets/type_widgets/read_only_text.ts
@@ -4,7 +4,7 @@ import { applySyntaxHighlight } from "../../services/syntax_highlight.js";
 import type FNote from "../../entities/fnote.js";
 import type { EventData } from "../../components/app_context.js";
 import { getLocaleById } from "../../services/i18n.js";
-import { getMermaidConfig } from "./mermaid.js";
+import { getMermaidConfig } from "../../services/mermaid.js";
 
 const TPL = `
 <div class="note-detail-readonly-text note-detail-printable">