From 0671a9b2f1cdc4bc591261311bfbfa8291f82846 Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@aloisklink.com>
Date: Fri, 26 Jul 2024 17:20:15 +0900
Subject: [PATCH 1/2] Revert "feat: Sanitize error message"

This reverts commit 996a20d90eb5cf33eec3d1ed37da825273748147.

A better way to do fix this bug would be to not parse the syntax error
as HTML in the first place.
---
 package.json                     |  2 --
 src/lib/components/Editor.svelte |  3 +--
 src/lib/util/sanitize.ts         | 23 -----------------------
 yarn.lock                        | 17 -----------------
 4 files changed, 1 insertion(+), 44 deletions(-)
 delete mode 100644 src/lib/util/sanitize.ts

diff --git a/package.json b/package.json
index cf8131e5..98e4397b 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,6 @@
     "@sveltejs/kit": "2.5.18",
     "@sveltejs/vite-plugin-svelte": "^3.0.1",
     "@testing-library/svelte": "4.2.3",
-    "@types/dompurify": "^3.0.5",
     "@types/lodash-es": "^4.17.12",
     "@types/pako": "2.0.3",
     "@types/uuid": "9.0.8",
@@ -74,7 +73,6 @@
     "@mermaid-js/mermaid-zenuml": "^0.2.0",
     "daisyui": "2.52.0",
     "dayjs": "^1.11.7",
-    "dompurify": "^3.1.6",
     "js-base64": "3.7.7",
     "lodash-es": "^4.17.21",
     "mermaid": "10.9.1",
diff --git a/src/lib/components/Editor.svelte b/src/lib/components/Editor.svelte
index eef1d1ef..edae039f 100644
--- a/src/lib/components/Editor.svelte
+++ b/src/lib/components/Editor.svelte
@@ -10,7 +10,6 @@
 <script lang="ts">
   import type { EditorMode } from '$lib/types';
   import { initEditor } from '$lib/util/monacoExtra';
-  import { sanitizeText } from '$lib/util/sanitize';
   import { stateStore, updateCode, updateConfig } from '$lib/util/state';
   import { logEvent } from '$lib/util/stats';
   import { themeStore } from '$lib/util/theme';
@@ -142,7 +141,7 @@
       </div>
       <div class="max-h-32 overflow-auto bg-red-600 p-2 font-mono">
         <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-        {@html sanitizeText($stateStore.error?.toString().replaceAll('\n', '<br />'))}
+        {@html $stateStore.error?.toString().replaceAll('\n', '<br />')}
       </div>
     </div>
   {/if}
diff --git a/src/lib/util/sanitize.ts b/src/lib/util/sanitize.ts
deleted file mode 100644
index aa5d1c55..00000000
--- a/src/lib/util/sanitize.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import DOMPurify from 'dompurify';
-
-export const sanitizeText = (text?: string): string => {
-  return DOMPurify.sanitize(text ?? '', {
-    ALLOWED_TAGS: [
-      'b',
-      'i',
-      'u',
-      'a',
-      'p',
-      's',
-      'br',
-      'span',
-      'strong',
-      'em',
-      'code',
-      'pre',
-      'ul',
-      'ol',
-      'li'
-    ]
-  });
-};
diff --git a/yarn.lock b/yarn.lock
index d2e0079c..9f88efbe 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -678,13 +678,6 @@
   dependencies:
     "@types/ms" "*"
 
-"@types/dompurify@^3.0.5":
-  version "3.0.5"
-  resolved "https://registry.yarnpkg.com/@types/dompurify/-/dompurify-3.0.5.tgz#02069a2fcb89a163bacf1a788f73cb415dd75cb7"
-  integrity sha512-1Wg0g3BtQF7sSb27fJQAKck1HECM6zV1EB66j8JH9i3LCjYabJa0FSdiSgsD5K/RbrsR0SiraKacLB+T8ZVYAg==
-  dependencies:
-    "@types/trusted-types" "*"
-
 "@types/estree@*", "@types/estree@1.0.5", "@types/estree@^1.0.0", "@types/estree@^1.0.1":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
@@ -773,11 +766,6 @@
   resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.3.tgz#ff5e2f1902969d305225a047c8a0fd5c915cebef"
   integrity sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==
 
-"@types/trusted-types@*":
-  version "2.0.7"
-  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.7.tgz#baccb07a970b91707df3a3e8ba6896c57ead2d11"
-  integrity sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==
-
 "@types/unist@^2", "@types/unist@^2.0.0":
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.7.tgz#5b06ad6894b236a1d2bd6b2f07850ca5c59cf4d6"
@@ -2654,11 +2642,6 @@ dompurify@^3.1.5:
   resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.1.5.tgz#2c6a113fc728682a0f55684b1388c58ddb79dc38"
   integrity sha512-lwG+n5h8QNpxtyrJW/gJWckL+1/DQiYMX8f7t8Z2AZTPw1esVrqjI63i7Zc2Gz0aKzLVMYC1V1PL/ky+aY/NgA==
 
-dompurify@^3.1.6:
-  version "3.1.6"
-  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.1.6.tgz#43c714a94c6a7b8801850f82e756685300a027e2"
-  integrity sha512-cTOAhc36AalkjtBpfG6O8JimdTMWNXjiePT2xQH/ppBGi/4uIpmj8eKyIkMJErXWARyINV/sB38yf8JCLF5pbQ==
-
 domutils@^3.0.1:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.1.0.tgz#c47f551278d3dc4b0b1ab8cbb42d751a6f0d824e"

From b58577b72db686ec73a6abc0c5763c71d26f2caa Mon Sep 17 00:00:00 2001
From: Alois Klink <alois@mermaidchart.com>
Date: Fri, 26 Jul 2024 17:30:39 +0900
Subject: [PATCH 2/2] fix: use `<output>` and `<pre>` to format errors

Use the `<output>` and `<pre>` HTML elements to format mermaid errors,
instead just adding the error message as HTML.

Using `<pre>` avoids the need for sanitizing any HTML (or using a
`monospace` font in CSS, since `<pre>` does this automatically).

Using `<output>` means that users using screenreaders should have a
better experience when using the mermaid live editor.

on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
---
 src/lib/components/Editor.svelte | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/Editor.svelte b/src/lib/components/Editor.svelte
index edae039f..f38604b0 100644
--- a/src/lib/components/Editor.svelte
+++ b/src/lib/components/Editor.svelte
@@ -139,10 +139,9 @@
         <i class="fa fa-exclamation-circle w-4" aria-hidden="true" />
         <p>Diagram syntax error</p>
       </div>
-      <div class="max-h-32 overflow-auto bg-red-600 p-2 font-mono">
-        <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-        {@html $stateStore.error?.toString().replaceAll('\n', '<br />')}
-      </div>
+      <output class="max-h-32 overflow-auto bg-red-600 p-2" name="mermaid-error" for="editor">
+        <pre>{$stateStore.error?.toString()}</pre>
+      </output>
     </div>
   {/if}
 </div>