refactor(mermaid): move mermaid config to service

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.

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;
 

src/public/app/widgets/type_widgets/mermaid.ts

@@ -1,5 +1,4 @@
-import type { MermaidConfig } from "mermaid";
+import { getMermaidConfig, loadElkIfNeeded, postprocessMermaidSvg } from "../../services/mermaid.js";
-import { 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 }
-    };
-}

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">