From 9814a461f30f93ddb4ca341e2d899fab93bcf236 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonatan=20K=C5=82osko?= <jonatanklosko@gmail.com>
Date: Tue, 25 Jan 2022 15:13:33 +0100
Subject: [PATCH] Fix line break support in Mermaid graph definition

---
 assets/js/cell/markdown.js         |  3 ++-
 assets/js/cell/markdown/mermaid.js |  8 ++++----
 assets/js/lib/utils.js             | 15 +++++++++++++++
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/assets/js/cell/markdown.js b/assets/js/cell/markdown.js
index 7e79008b4ae..80dbe4a6965 100644
--- a/assets/js/cell/markdown.js
+++ b/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>`;
       }
     });
   };
diff --git a/assets/js/cell/markdown/mermaid.js b/assets/js/cell/markdown/mermaid.js
index 81f145b8fcb..4dd107d32fb 100644
--- a/assets/js/cell/markdown/mermaid.js
+++ b/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>`;
     }
   });
 }
diff --git a/assets/js/lib/utils.js b/assets/js/lib/utils.js
index da9648696dc..dae2f6ae56e 100644
--- a/assets/js/lib/utils.js
+++ b/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 = {
+  "&": "&amp;",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+  "'": "&#39",
+};
+
+/**
+ * Transforms the given string to a HTML-safe value.
+ */
+export function escapeHtml(string) {
+  return (string || "").replace(/[&<>"']/g, (char) => htmlEscapes[char]);
+}