fix eferenceError: require is not defined in ES module scope.

packages/ui/package.json

@@ -21,12 +21,12 @@
     "@tailwindcss/cli": "^4.1.18",
     "@tailwindcss/typography": "^0.5.18",
     "@types/dompurify": "^3.2.0",
+    "@types/sanitize-html": "^2.16.1",
     "@zxcvbn-ts/core": "^3.0.4",
     "@zxcvbn-ts/language-common": "^3.0.4",
     "@zxcvbn-ts/language-en": "^3.0.2",
     "bits-ui": "^2.16.1",
     "clsx": "^2.1.1",
-    "isomorphic-dompurify": "2.25.0",
     "jsrepo": "^3.5.1",
     "layerchart": "2.0.0-next.27",
     "mode-watcher": "^1.1.0",
@@ -69,6 +69,7 @@
     "katex": "^0.16.25",
     "lowlight": "^3.3.0",
     "plyr": "^3.7.8",
+    "sanitize-html": "^2.17.2",
     "simple-icons": "^16.9.0",
     "svelte-dnd-action": "^0.9.68",
     "svelte-tiptap": "^2.2.0",

packages/ui/src/custom/code/code-utils.svelte.ts

@@ -2,8 +2,59 @@ import { Context } from 'runed';
 import type { ReadableBoxedValues, WritableBoxedValues } from 'svelte-toolbelt';
 import type { CodeRootProps } from './types';
 import { highlighter } from './shiki';
-import DOMPurify from 'isomorphic-dompurify';
 import type { HighlighterCore } from 'shiki';
+import sanitizeHtml from 'sanitize-html';
+import type { IOptions as SanitizeHtmlOptions } from 'sanitize-html';
+
+/** Shiki HTML only; avoids isomorphic-dompurify/jsdom (CommonJS `require` breaks Vite ESM SSR). */
+const SHIKI_HIGHLIGHT_SANITIZE: SanitizeHtmlOptions = {
+  allowedTags: ['pre', 'code', 'span', 'div', 'br'],
+  allowedAttributes: {
+    pre: ['class', 'style', 'tabindex'],
+    code: ['class', 'style'],
+    span: ['class', 'style'],
+    div: ['class', 'style'],
+    br: ['class', 'style']
+  },
+  allowedStyles: {
+    '*': {
+      color: [
+        /^#[0-9a-f]{3,8}$/i,
+        /^rgb\(/i,
+        /^rgba\(/i,
+        /^hsl\(/i,
+        /^hsla\(/i,
+        /^var\(/,
+        /^inherit$/i,
+        /^initial$/i,
+        /^currentColor$/i,
+        /^transparent$/i,
+        /^unset$/i,
+        /^color-mix\(/i
+      ],
+      'background-color': [
+        /^#[0-9a-f]{3,8}$/i,
+        /^rgb\(/i,
+        /^rgba\(/i,
+        /^hsl\(/i,
+        /^hsla\(/i,
+        /^var\(/,
+        /^inherit$/i,
+        /^initial$/i,
+        /^transparent$/i,
+        /^unset$/i,
+        /^color-mix\(/i
+      ],
+      'font-style': [/^[\w-]+$/, /^var\(/],
+      'font-weight': [/^\d+$/, /^[\w-]+$/, /^var\(/],
+      'text-decoration': [/^[\w\s-]+$/, /^var\(/]
+    }
+  }
+};
+
+function sanitizeShikiHtml(html: string): string {
+  return sanitizeHtml(html, SHIKI_HIGHLIGHT_SANITIZE);
+}
 
 type CodeOverflowStateProps = WritableBoxedValues<{
   collapsed: boolean;
@@ -74,7 +125,7 @@ class CodeRootState {
     return this.opts.code.current;
   }
 
-  highlighted = $derived(DOMPurify.sanitize(this.highlight(this.code) ?? ''));
+  highlighted = $derived(sanitizeShikiHtml(this.highlight(this.code) ?? ''));
 }
 
 function within(num: number, range: CodeRootProps['highlight']) {