@wtfalch/design 0.3.1 → 0.3.2

package/dist/components/Markdown.d.ts

@@ -4,6 +4,14 @@ import DOMPurify from 'dompurify';
  *
  * Sanitised without exception: this is text produced by a model, which may be
  * echoing content it read from a file, so it is never trusted HTML.
+ *
+ * **On the server, the text itself.** DOMPurify sanitises through a DOM, and a
+ * server rendering React has none: `sanitize` is not even a function there,
+ * and the first app to server-render a comment found out. Rather than a second
+ * sanitiser for the server, which would be two behaviours for one string, the
+ * server (and the first client paint, so hydration agrees) renders the text
+ * escaped by React, and the sanitised HTML takes its place once mounted. What
+ * reaches a browser is never HTML that DOMPurify has not seen.
  */
 export default function Markdown({ text, sanitize, className, }: {
     text: string;

package/dist/components/Markdown.js

@@ -1,18 +1,28 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import DOMPurify from 'dompurify';
 import { marked } from 'marked';
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 marked.setOptions({ gfm: true, breaks: true });
 /**
  * Render model output as markdown.
  *
  * Sanitised without exception: this is text produced by a model, which may be
  * echoing content it read from a file, so it is never trusted HTML.
+ *
+ * **On the server, the text itself.** DOMPurify sanitises through a DOM, and a
+ * server rendering React has none: `sanitize` is not even a function there,
+ * and the first app to server-render a comment found out. Rather than a second
+ * sanitiser for the server, which would be two behaviours for one string, the
+ * server (and the first client paint, so hydration agrees) renders the text
+ * escaped by React, and the sanitised HTML takes its place once mounted. What
+ * reaches a browser is never HTML that DOMPurify has not seen.
  */
 export default function Markdown({ text, sanitize, className, }) {
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => setMounted(true), []);
     const html = useMemo(() => {
-        if (!text)
-            return '';
+        if (!text || !mounted)
+            return null;
         const raw = marked.parse(text, { async: false });
         return DOMPurify.sanitize(raw, {
             // No iframes, no forms, no event handlers -- prose, code and tables only.
@@ -20,10 +30,15 @@ export default function Markdown({ text, sanitize, className, }) {
             FORBID_ATTR: ['style', 'onerror', 'onload', 'onclick'],
             ...sanitize,
         });
-    }, [text, sanitize]);
+    }, [text, mounted, sanitize]);
     if (!text)
         return null;
-    return (_jsx("div", { className: `md${className ? ` ${className}` : ''}`, 
+    const classes = `md${className ? ` ${className}` : ''}`;
+    if (html === null) {
+        // The server, and the client until its first effect: the words, escaped.
+        return (_jsx("div", { className: classes, "data-md": "plain", children: _jsx("p", { children: text }) }));
+    }
+    return (_jsx("div", { className: classes, 
         // biome-ignore lint/security/noDangerouslySetInnerHtml: the string is DOMPurify output, with the config above.
         dangerouslySetInnerHTML: { __html: html } }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wtfalch/design",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "wtfalch's design system: themeable components on a fixed token vocabulary.",
   "keywords": [
     "design-system",