Merge pull request #1496 from aloisklink/fix/stop-parsing-syntax-error-as-html

Use `<output>` and `<pre>` to format mermaid errors

package.json

@@ -29,7 +29,6 @@
     "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/svelte": "^5.2.4",
-    "@types/dompurify": "^3.0.5",
     "@types/lodash-es": "^4.17.12",
     "@types/pako": "2.0.3",
     "@types/uuid": "9.0.8",
@@ -76,7 +75,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": "^11.3.0",

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';
@@ -140,10 +139,9 @@
         <i class="fa fa-exclamation-circle w-4" aria-hidden="true"></i>
         <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 sanitizeText($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>

src/lib/util/sanitize.ts

@@ -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'
-    ]
-  });
-};

yarn.lock

@@ -979,13 +979,6 @@
     "@types/d3-transition" "*"
     "@types/d3-zoom" "*"
 
-"@types/dompurify@^3.0.5":
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/@types/dompurify/-/dompurify-3.2.0.tgz#56610bf3e4250df57744d61fbd95422e07dfb840"
-  integrity sha512-Fgg31wv9QbLDA0SpTOXO3MaxySc4DKGLi8sna4/Utjo4r3ZRPdCt4UQee8BWr+Q5z21yifghREPJGYaEOEIACg==
-  dependencies:
-    dompurify "*"
-
 "@types/estree@1.0.6", "@types/estree@^1.0.0", "@types/estree@^1.0.5", "@types/estree@^1.0.6":
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.6.tgz#628effeeae2064a1b4e79f78e81d87b7e5fc7b50"
@@ -2910,18 +2903,18 @@ domhandler@^5.0.2, domhandler@^5.0.3:
   dependencies:
     domelementtype "^2.3.0"
 
-dompurify@*, dompurify@^3.1.6, dompurify@^3.2.1:
+dompurify@^3.1.5:
+  version "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.2.1:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.2.4.tgz#af5a5a11407524431456cf18836c55d13441cd8e"
   integrity sha512-ysFSFEDVduQpyhzAob/kkuJjf5zWkZD8/A9ywSp1byueyuCfHamrCBa14/Oc2iiB0e51B+NpxSl5gmzn+Ms/mg==
   optionalDependencies:
     "@types/trusted-types" "^2.0.7"
 
-dompurify@^3.1.5:
-  version "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==
-
 domutils@^3.0.1:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.1.0.tgz#c47f551278d3dc4b0b1ab8cbb42d751a6f0d824e"