Fix line break support in Mermaid graph definition

assets/js/cell/markdown.js

@@ -17,6 +17,7 @@ import { removePosition } from "unist-util-remove-position";
 
 import { highlight } from "./live_editor/monaco";
 import { renderMermaid } from "./markdown/mermaid";
+import { escapeHtml } from "../lib/utils";
 
 /**
  * Renders markdown content in the given container.
@@ -163,7 +164,7 @@ function remarkPrepareMermaid(options) {
     visit(ast, "code", (node, index, parent) => {
       if (node.lang === "mermaid") {
         node.type = "html";
-        node.value = `<div class="mermaid">${node.value}</div>`;
+        node.value = `<div class="mermaid">${escapeHtml(node.value)}</div>`;
       }
     });
   };

assets/js/cell/markdown/mermaid.js

@@ -34,13 +34,13 @@ const maybeInjectFontAwesome = (value) => {
 
 export function renderMermaid(value) {
   return importMermaid().then((mermaid) => {
-    try {
-      // Inject font-awesome when fa: prefix is used
-      maybeInjectFontAwesome(value);
+    // Inject font-awesome when fa: prefix is used
+    maybeInjectFontAwesome(value);
 
+    try {
       return mermaid.render(getId(), value);
     } catch (e) {
-      return `<pre><code>${e.message}</code></pre>`;
+      return `<div class="error-box whitespace-pre-wrap"><span class="font-semibold">Mermaid</span>\n${e.message}</div>`;
     }
   });
 }

assets/js/lib/utils.js

@@ -144,3 +144,18 @@ export function cancelEvent(event) {
   // Stop event propagation (e.g. so it doesn't reach the editor).
   event.stopPropagation();
 }
+
+const htmlEscapes = {
+  "&": "&",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+  "'": "&#39",
+};
+
+/**
+ * Transforms the given string to a HTML-safe value.
+ */
+export function escapeHtml(string) {
+  return (string || "").replace(/[&<>"']/g, (char) => htmlEscapes[char]);
+}