feat(mermaid): add basic syntax highlight

apps/client/src/widgets/type_widgets/abstract_split_type_widget.ts

@@ -8,6 +8,7 @@ import options from "../../services/options.js";
 import type SwitchSplitOrientationButton from "../floating_buttons/switch_layout_button.js";
 import type { EventData } from "../../components/app_context.js";
 import type OnClickButtonWidget from "../buttons/onclick_button.js";
+import type { EditorConfig } from "@triliumnext/codemirror";
 
 const TPL = /*html*/`\
 <div class="note-detail-split note-detail-printable">
@@ -242,7 +243,7 @@ export default abstract class AbstractSplitTypeWidget extends TypeWidget {
     /**
      * Called upon when the code editor is being initialized. Can be used to add additional options to the editor.
      */
-    buildEditorExtraOptions(): Partial<CodeMirrorOpts> {
+    buildEditorExtraOptions(): Partial<EditorConfig> {
         return {
             lineWrapping: false
         };

apps/client/src/widgets/type_widgets/mermaid.ts

@@ -1,3 +1,4 @@
+import type { EditorConfig } from "@triliumnext/codemirror";
 import { getMermaidConfig, loadElkIfNeeded, postprocessMermaidSvg } from "../../services/mermaid.js";
 import AbstractSvgSplitTypeWidget from "./abstract_svg_split_type_widget.js";
 

docs/Release Notes/Release Notes/v0.94.0.md

@@ -26,6 +26,7 @@
 *   [Make it show which node triggered the event when right-clicking on tree](https://github.com/TriliumNext/Notes/pull/1861) by @SiriusXT
 *   [Only expand/collapse the left pane of the focused window](https://github.com/TriliumNext/Notes/pull/1905) by @SiriusXT
 *   Code notes now have support for GDScript (Godot).
+*   Mermaid diagrams: basic syntax highlight (not all diagram types are supported) and code folding.
 
 ## 📖 Documentation
 

packages/codemirror/package.json

@@ -35,6 +35,7 @@
     "@ssddanbrown/codemirror-lang-smarty": "1.0.0",
     "@ssddanbrown/codemirror-lang-twig": "1.0.0",
     "codemirror-lang-hcl": "0.1.0",
+    "codemirror-lang-mermaid": "0.5.0",
     "eslint-linter-browserify": "9.26.0"
   }
 }

packages/codemirror/src/syntax_highlighting.ts

@@ -17,6 +17,11 @@ async function buildJavaScript(mimeType: string) {
     return extensions;
 }
 
+async function buildMermaid() {
+    const { mermaid, foldByIndent } = (await import('codemirror-lang-mermaid'));
+    return [ mermaid(), foldByIndent() ];
+}
+
 const byMimeType: Record<string, (() => Promise<StreamParser<unknown> | LanguageSupport | Extension[]>) | null> = {
     "text/plain": null,
 
@@ -55,6 +60,8 @@ const byMimeType: Record<string, (() => Promise<StreamParser<unknown> | Language
     "text/typescript-jsx": async () => (await import('@codemirror/lang-javascript')).javascript({ typescript: true, jsx: true }),
     "text/vbscript": async () => (await import('@codemirror/legacy-modes/mode/vbscript')).vbScript,
     "text/velocity": async () => (await import('@codemirror/legacy-modes/mode/velocity')).velocity,
+    "text/vnd.mermaid": async () => buildMermaid(),
+    "text/mermaid": async () => buildMermaid(),
     "text/x-asm-mips": null,
     "text/x-asterisk": async () => (await import('@codemirror/legacy-modes/mode/asterisk')).asterisk,
     "text/x-brainfuck": async () => (await import('@codemirror/legacy-modes/mode/brainfuck')).brainfuck,

pnpm-lock.yaml

@@ -1199,6 +1199,9 @@ importers:
       codemirror-lang-hcl:
         specifier: 0.1.0
         version: 0.1.0
+      codemirror-lang-mermaid:
+        specifier: 0.5.0
+        version: 0.5.0
       eslint-linter-browserify:
         specifier: 9.26.0
         version: 9.26.0
@@ -6441,6 +6444,9 @@ packages:
   codemirror-lang-hcl@0.1.0:
     resolution: {integrity: sha512-duwKEaQDhkJWad4YQ9pv4282BS6hCdR+gS/qTAj3f9bypXNNZ42bIN43h9WK3DjyZRENtVlUQdrQM1sA44wHmA==}
 
+  codemirror-lang-mermaid@0.5.0:
+    resolution: {integrity: sha512-Taw/2gPCyNArQJCxIP/HSUif+3zrvD+6Ugt7KJZ2dUKou/8r3ZhcfG8krNTZfV2iu8AuGnymKuo7bLPFyqsh/A==}
+
   codemirror@5.65.19:
     resolution: {integrity: sha512-+aFkvqhaAVr1gferNMuN8vkTSrWIFvzlMV9I2KBLCWS2WpZ2+UAkZjlMZmEuT+gcXTi6RrGQCkWq1/bDtGqhIA==}
 
@@ -22058,6 +22064,12 @@ snapshots:
       '@lezer/highlight': 1.2.1
       '@lezer/lr': 1.4.2
 
+  codemirror-lang-mermaid@0.5.0:
+    dependencies:
+      '@codemirror/language': 6.11.0
+      '@lezer/highlight': 1.2.1
+      '@lezer/lr': 1.4.2
+
   codemirror@5.65.19: {}
 
   collect-v8-coverage@1.0.2: {}