From f42a89a54847e05388e0cc96427241e5d6e7ab0b Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 22 Mar 2025 01:56:30 +0200
Subject: [PATCH] feat(mermaid): add an error display continer

---
 .../abstract_split_type_widget.ts             | 42 +++++++++++++++++--
 .../abstract_svg_split_type_widget.ts         | 13 +++++-
 .../app/widgets/type_widgets/mermaid.ts       |  9 +---
 3 files changed, 52 insertions(+), 12 deletions(-)

diff --git a/src/public/app/widgets/type_widgets/abstract_split_type_widget.ts b/src/public/app/widgets/type_widgets/abstract_split_type_widget.ts
index c62bf3ca0..26f6766d4 100644
--- a/src/public/app/widgets/type_widgets/abstract_split_type_widget.ts
+++ b/src/public/app/widgets/type_widgets/abstract_split_type_widget.ts
@@ -7,8 +7,13 @@ import { DEFAULT_GUTTER_SIZE } from "../../services/resizer.js";
 
 const TPL = `\
 <div class="note-detail-split note-detail-printable split-horizontal">
-    <div class="note-detail-split-editor"></div>
-    <div class="note-detail-split-preview"></div>
+    <div class="note-detail-split-first-col">
+        <div class="note-detail-split-editor"></div>
+        <div class="note-detail-error-container alert alert-warning hidden-ext"></div>
+    </div>
+    <div class="note-detail-split-second-col">
+        <div class="note-detail-split-preview"></div>
+    </div>
 
     <style>
         .note-detail-split {
@@ -16,13 +21,23 @@ const TPL = `\
             height: 100%;
         }
 
+        .note-detail-split-first-col {
+            display: flex;
+        }
+
         .note-detail-split .note-detail-split-editor {
             width: 100%;
+            flex-grow: 1;
+        }
+
+        .note-detail-split .note-detail-error-container {
+            font-family: var(--monospace-font-family);
+            margin: 0.1em;
         }
 
         /* Horizontal layout */
 
-        .note-detail-split.split-horizontal > .note-detail-split-preview {
+        .note-detail-split.split-horizontal > .note-detail-split-second-col {
             border-left: 1px solid var(--main-border-color);
         }
 
@@ -31,6 +46,14 @@ const TPL = `\
             width: 50%;
         }
 
+        .note-detail-split.split-horizontal .note-detail-split-preview {
+            height: 100%;
+        }
+
+        .note-detail-split-first-col {
+            flex-direction: column;
+        }
+
         /* Vertical layout */
 
 
@@ -50,7 +73,10 @@ export default abstract class AbstractSplitTypeWidget extends TypeWidget {
     private splitInstance?: Split.Instance;
 
     protected $preview!: JQuery<HTMLElement>;
+    private $firstCol!: JQuery<HTMLElement>;
+    private $secondCol!: JQuery<HTMLElement>;
     private $editor!: JQuery<HTMLElement>;
+    private $errorContainer!: JQuery<HTMLElement>;
     private editorTypeWidget: EditableCodeTypeWidget;
 
     constructor() {
@@ -62,9 +88,12 @@ export default abstract class AbstractSplitTypeWidget extends TypeWidget {
     doRender(): void {
         this.$widget = $(TPL);
 
+        this.$firstCol = this.$widget.find(".note-detail-split-first-col");
+        this.$secondCol = this.$widget.find(".note-detail-split-second-col");
         this.$preview = this.$widget.find(".note-detail-split-preview");
         this.$editor = this.$widget.find(".note-detail-split-editor");
         this.$editor.append(this.editorTypeWidget.render());
+        this.$errorContainer = this.$widget.find(".note-detail-error-container");
         this.#setupResizer();
 
         super.doRender();
@@ -91,7 +120,7 @@ export default abstract class AbstractSplitTypeWidget extends TypeWidget {
         }
 
         this.splitInstance?.destroy();
-        this.splitInstance = Split([ this.$preview[0], this.$editor[0] ], {
+        this.splitInstance = Split([ this.$firstCol[0], this.$secondCol[0] ], {
             sizes: [ 50, 50 ],
             direction: "horizontal",
             gutterSize: DEFAULT_GUTTER_SIZE,
@@ -108,6 +137,11 @@ export default abstract class AbstractSplitTypeWidget extends TypeWidget {
         return {};
     }
 
+    setError(message: string | null | undefined) {
+        this.$errorContainer.toggleClass("hidden-ext", !message);
+        this.$errorContainer.text(message ?? "");
+    }
+
     getData() {
         return this.editorTypeWidget.getData();
     }
diff --git a/src/public/app/widgets/type_widgets/abstract_svg_split_type_widget.ts b/src/public/app/widgets/type_widgets/abstract_svg_split_type_widget.ts
index 83ed9509d..6b716178d 100644
--- a/src/public/app/widgets/type_widgets/abstract_svg_split_type_widget.ts
+++ b/src/public/app/widgets/type_widgets/abstract_svg_split_type_widget.ts
@@ -65,7 +65,18 @@ export default abstract class AbstractSvgSplitTypeWidget extends AbstractSplitTy
             return;
         }
 
-        const svg = await this.renderSvg(content);
+        let svg: string = "";
+        try {
+            svg = await this.renderSvg(content);
+        } catch (e: unknown) {
+            // Rendering failed.
+            this.setError((e as Error)?.message);
+            return;
+        }
+
+        // Rendering was succesful.
+        this.setError(null);
+
         if (svg === this.svg) {
             return;
         }
diff --git a/src/public/app/widgets/type_widgets/mermaid.ts b/src/public/app/widgets/type_widgets/mermaid.ts
index 7d6f00f1b..f62d27582 100644
--- a/src/public/app/widgets/type_widgets/mermaid.ts
+++ b/src/public/app/widgets/type_widgets/mermaid.ts
@@ -25,13 +25,8 @@ export class MermaidTypeWidget extends AbstractSvgSplitTypeWidget {
         });
 
         idCounter++;
-        try {
-            const { svg } = await mermaid.render(`mermaid-graph-${idCounter}`, content);
-            return postprocessMermaidSvg(svg);
-        } catch (e) {
-            console.warn(JSON.stringify(e));
-            return "";
-        }
+        const { svg } = await mermaid.render(`mermaid-graph-${idCounter}`, content);
+        return postprocessMermaidSvg(svg);
     }
 
 }