From 28975d0dbff051f7cb952e4e03854940e3422c5d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Weber?= <mail@soeren-weber.de>
Date: Thu, 29 Aug 2024 11:36:44 +0200
Subject: [PATCH] mermaid: classDiagram breaks when using <<interface>> #895

---
 static/js/theme.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/static/js/theme.js b/static/js/theme.js
index 9535906d8d..77cea128b9 100644
--- a/static/js/theme.js
+++ b/static/js/theme.js
@@ -157,6 +157,11 @@ function initMermaid( update, attrs ) {
         txt.innerHTML = html;
         return txt.value;
     };
+    var encodeHTML = function( text ){
+        var html = document.createElement( 'textarea' );
+        html.textContent = text;
+        return html.innerHTML;
+    };
 
     var parseGraph = function( graph ){
         // See https://github.com/mermaid-js/mermaid/blob/9a080bb975b03b2b1d4ef6b7927d09e6b6b62760/packages/mermaid/src/diagram-api/frontmatter.ts#L10
@@ -207,7 +212,7 @@ function initMermaid( update, attrs ) {
             }
             is_initialized = true;
 
-            var graph = serializeGraph( parse );
+            var graph = encodeHTML( serializeGraph( parse ) );
             var new_element = document.createElement( 'div' );
             Array.from( element.attributes ).forEach( function( attr ){
                 new_element.setAttribute( attr.name, attr.value );
@@ -253,7 +258,7 @@ function initMermaid( update, attrs ) {
             is_initialized = true;
 
             parse.yaml.theme = theme;
-            var graph = serializeGraph( parse );
+            var graph = encodeHTML( serializeGraph( parse ) );
             element.removeAttribute('data-processed');
             element.innerHTML = graph;
             code.innerHTML = graph;