@meowdown/react 0.82.2 → 0.83.0

package/dist/index.js

@@ -1,6 +1,6 @@
 import { c } from "react/compiler-runtime";
 import { clsx } from "clsx/lite";
-import { Fragment, ViewTransition, cloneElement, createContext, createElement, memo, startTransition, use, useDeferredValue, useEffect, useImperativeHandle, useLayoutEffect, useReducer, useRef, useState } from "react";
+import { Fragment, ViewTransition, cloneElement, createContext, createElement, memo, startTransition, use, useDeferredValue, useEffect, useId, useImperativeHandle, useLayoutEffect, useReducer, useRef, useState } from "react";
 import { buildFileMarkdown, codeBlockLanguages, collectReferenceDefinitions, defaultResolveImageUrl, defaultResolveXPost, defaultResolveYouTubeVideo, defineCodeBlockPreviewPlugin, defineEditorExtension, defineLinkEditKeymap, defineLinkHoverHandler, definePendingReplacementHandler, defineSearchStatusHandler, defineVirtualCaret, defineWikilinkHoverHandler, dismissLinkHover, docToMarkdown, docToParagraphMarkdown, formatFileSize, getCodeTokens, getFileKind, getLinkText, getMarkBuilders, getPendingReplacement, getSearchStatus, getSelectedText, getTableColumnAlign, getTextblockDisplayText, getVirtualElementFromRange, inlineTextToMarkChunksWithContext, isCodeBlockPreviewHiddenDecoration, isLinkTextForHref, isModEvent, isNodeOfType, isReferenceDefinitionNode, isSelectionInTableCell, loadKaTeX, markdownToDoc, normalizeHref, paragraphMarkdownToDoc, parsePostEmbedSnapshot, renderMathInto, updateEditorConfig } from "@meowdown/core";
 import { clamp } from "@ocavue/utils";
 import { canUseRegexLookbehind, createEditor, defineDocChangeHandler, defineUpdateHandler, isTextSelection, union } from "@prosekit/core";
@@ -24,34 +24,30 @@ import { Mark } from "@prosekit/pm/model";
 import { BOOLEAN, OVERLOADED_BOOLEAN, getPropertyInfo, possibleStandardNames } from "react-property";
 import { PreviewCard } from "@base-ui/react/preview-card";
 
-// src/hooks/use-beautiful-mermaid.ts
-let beautifulMermaidPromise;
-function loadBeautifulMermaid() {
-	beautifulMermaidPromise ??= import("./beautiful-mermaid-chunk-Cc6FHgAa.js").then((module) => module.renderMermaidSVG).catch((error) => {
-		console.error("[meowdown] Failed to load beautiful-mermaid.", error);
-		throw error;
-	});
-	return beautifulMermaidPromise;
-}
-function useBeautifulMermaid(enabled) {
+// src/hooks/use-katex.ts
+/**
+* The lazily loaded KaTeX render function, or `undefined` while it loads (or when
+* `enabled` is false, so a document without math never loads it).
+*/
+function useKaTeX(enabled) {
 	const $ = c(4);
-	const [renderer, setRenderer] = useState(void 0);
+	const [katex, setKaTeX] = useState(void 0);
 	let t0;
 	let t1;
-	if ($[0] !== enabled || $[1] !== renderer) {
+	if ($[0] !== enabled || $[1] !== katex) {
 		t0 = () => {
-			if (!enabled || renderer) return;
+			if (!enabled || katex) return;
 			let cancelled = false;
-			loadBeautifulMermaid().then((loadedRenderer) => {
-				if (!cancelled) setRenderer(() => loadedRenderer);
+			loadKaTeX().then((render) => {
+				if (!cancelled) setKaTeX(() => render);
 			});
 			return () => {
 				cancelled = true;
 			};
 		};
-		t1 = [enabled, renderer];
+		t1 = [enabled, katex];
 		$[0] = enabled;
-		$[1] = renderer;
+		$[1] = katex;
 		$[2] = t0;
 		$[3] = t1;
 	} else {
@@ -59,33 +55,37 @@ function useBeautifulMermaid(enabled) {
 		t1 = $[3];
 	}
 	useEffect(t0, t1);
-	return renderer;
+	return katex;
 }
 
-// src/hooks/use-katex.ts
-/**
-* The lazily loaded KaTeX render function, or `undefined` while it loads (or when
-* `enabled` is false, so a document without math never loads it).
-*/
-function useKaTeX(enabled) {
+// src/hooks/use-pele.ts
+let pelePromise;
+function loadPele() {
+	pelePromise ??= import("./pele-chunk-Sqn5D2fk.js").then((module) => module.renderMermaid).catch((error) => {
+		console.error("[meowdown] Failed to load pele.", error);
+		throw error;
+	});
+	return pelePromise;
+}
+function usePele(enabled) {
 	const $ = c(4);
-	const [katex, setKaTeX] = useState(void 0);
+	const [renderer, setRenderer] = useState(void 0);
 	let t0;
 	let t1;
-	if ($[0] !== enabled || $[1] !== katex) {
+	if ($[0] !== enabled || $[1] !== renderer) {
 		t0 = () => {
-			if (!enabled || katex) return;
+			if (!enabled || renderer) return;
 			let cancelled = false;
-			loadKaTeX().then((render) => {
-				if (!cancelled) setKaTeX(() => render);
+			loadPele().then((loadedRenderer) => {
+				if (!cancelled) setRenderer(() => loadedRenderer);
 			});
 			return () => {
 				cancelled = true;
 			};
 		};
-		t1 = [enabled, katex];
+		t1 = [enabled, renderer];
 		$[0] = enabled;
-		$[1] = katex;
+		$[1] = renderer;
 		$[2] = t0;
 		$[3] = t1;
 	} else {
@@ -93,7 +93,7 @@ function useKaTeX(enabled) {
 		t1 = $[3];
 	}
 	useEffect(t0, t1);
-	return katex;
+	return renderer;
 }
 
 // src/utils/non-prose-props.ts
@@ -230,7 +230,7 @@ function _temp$4(event) {
 * mode emits a block-level `math[display="block"]` element.
 */
 function MathRender(props) {
-	const $ = c(9);
+	const $ = c(10);
 	const { katex, formula, displayMode, className, onMouseDown } = props;
 	const ref = useRef(null);
 	let t0;
@@ -257,111 +257,128 @@ function MathRender(props) {
 	}
 	useLayoutEffect(t0, t1);
 	const t2 = props["data-testid"];
-	let t3;
-	if ($[5] !== className || $[6] !== onMouseDown || $[7] !== t2) {
-		t3 = /* @__PURE__ */ jsx("span", {
+	const t3 = props["data-scroll-x"];
+	let t4;
+	if ($[5] !== className || $[6] !== onMouseDown || $[7] !== t2 || $[8] !== t3) {
+		t4 = /* @__PURE__ */ jsx("span", {
 			ref,
 			className,
 			contentEditable: false,
 			"data-testid": t2,
+			"data-scroll-x": t3,
 			onMouseDown
 		});
 		$[5] = className;
 		$[6] = onMouseDown;
 		$[7] = t2;
 		$[8] = t3;
-	} else t3 = $[8];
-	return t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	return t4;
 }
 
 // src/components/mermaid-render.tsx
-const MERMAID_OPTIONS = {
-	bg: "var(--meowdown-mermaid-bg)",
-	fg: "var(--meowdown-mermaid-fg)",
-	line: "var(--meowdown-mermaid-line)",
-	accent: "var(--meowdown-mermaid-accent)",
-	muted: "var(--meowdown-mermaid-muted)",
-	surface: "var(--meowdown-mermaid-surface)",
-	border: "var(--meowdown-mermaid-border)",
-	transparent: true,
-	interactive: false
+const PELE_OPTIONS = {
+	links: false,
+	images: false,
+	responsive: false,
+	autoDirection: false
 };
-function renderMermaid(renderer, source) {
+function getMermaidOutput(renderer, source, idPrefix) {
 	try {
-		const svg = renderer(source, MERMAID_OPTIONS);
-		const document = new DOMParser().parseFromString(svg, "image/svg+xml");
-		const element = document.documentElement;
-		if (document.querySelector("parsererror") || element.localName !== "svg" || element.namespaceURI !== "http://www.w3.org/2000/svg") return { error: "Invalid SVG output." };
-		return { element };
+		return { element: renderer(source, {
+			...PELE_OPTIONS,
+			idPrefix
+		}) };
 	} catch (error) {
 		return { error: error instanceof Error ? error.message : String(error) };
 	}
 }
 function MermaidRender(props) {
-	const $ = c(16);
+	const $ = c(22);
 	const { renderer, source, className, onMouseDown } = props;
-	let t0;
-	if ($[0] !== renderer || $[1] !== source) {
-		t0 = renderMermaid(renderer, source);
-		$[0] = renderer;
-		$[1] = source;
-		$[2] = t0;
-	} else t0 = $[2];
-	const output = t0;
-	const ref = useRef(null);
+	const t0 = useId();
 	let t1;
-	if ($[3] !== output.element) {
-		t1 = () => {
+	if ($[0] !== t0) {
+		let t2;
+		if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+			t2 = /[^\w-]/g;
+			$[2] = t2;
+		} else t2 = $[2];
+		t1 = t0.replaceAll(t2, "");
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	const idPrefix = `meowdown-mermaid-${t1}`;
+	let t2;
+	if ($[3] !== idPrefix || $[4] !== renderer || $[5] !== source) {
+		t2 = getMermaidOutput(renderer, source, idPrefix);
+		$[3] = idPrefix;
+		$[4] = renderer;
+		$[5] = source;
+		$[6] = t2;
+	} else t2 = $[6];
+	const output = t2;
+	const ref = useRef(null);
+	let t3;
+	if ($[7] !== output.element) {
+		t3 = () => {
 			const host = ref.current;
 			if (!host || !output.element) return;
 			host.replaceChildren(window.document.importNode(output.element, true));
 		};
-		$[3] = output.element;
-		$[4] = t1;
-	} else t1 = $[4];
-	let t2;
-	if ($[5] !== output) {
-		t2 = [output];
-		$[5] = output;
-		$[6] = t2;
-	} else t2 = $[6];
-	useLayoutEffect(t1, t2);
+		$[7] = output.element;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== output) {
+		t4 = [output];
+		$[9] = output;
+		$[10] = t4;
+	} else t4 = $[10];
+	useLayoutEffect(t3, t4);
 	if (output.error) {
-		const t3 = props["data-testid"];
-		let t4;
-		if ($[7] !== className || $[8] !== onMouseDown || $[9] !== output.error || $[10] !== t3) {
-			t4 = /* @__PURE__ */ jsx("span", {
+		const t5 = props["data-testid"];
+		const t6 = props["data-scroll-x"];
+		let t7;
+		if ($[11] !== className || $[12] !== onMouseDown || $[13] !== output.error || $[14] !== t5 || $[15] !== t6) {
+			t7 = /* @__PURE__ */ jsx("span", {
 				className,
 				contentEditable: false,
 				"data-error": true,
-				"data-testid": t3,
+				"data-testid": t5,
+				"data-scroll-x": t6,
 				onMouseDown,
 				children: output.error
 			}, "error");
-			$[7] = className;
-			$[8] = onMouseDown;
-			$[9] = output.error;
-			$[10] = t3;
-			$[11] = t4;
-		} else t4 = $[11];
-		return t4;
+			$[11] = className;
+			$[12] = onMouseDown;
+			$[13] = output.error;
+			$[14] = t5;
+			$[15] = t6;
+			$[16] = t7;
+		} else t7 = $[16];
+		return t7;
 	}
-	const t3 = props["data-testid"];
-	let t4;
-	if ($[12] !== className || $[13] !== onMouseDown || $[14] !== t3) {
-		t4 = /* @__PURE__ */ jsx("span", {
+	const t5 = props["data-testid"];
+	const t6 = props["data-scroll-x"];
+	let t7;
+	if ($[17] !== className || $[18] !== onMouseDown || $[19] !== t5 || $[20] !== t6) {
+		t7 = /* @__PURE__ */ jsx("span", {
 			ref,
 			className,
 			contentEditable: false,
-			"data-testid": t3,
+			"data-testid": t5,
+			"data-scroll-x": t6,
 			onMouseDown
 		}, "svg");
-		$[12] = className;
-		$[13] = onMouseDown;
-		$[14] = t3;
-		$[15] = t4;
-	} else t4 = $[15];
-	return t4;
+		$[17] = className;
+		$[18] = onMouseDown;
+		$[19] = t5;
+		$[20] = t6;
+		$[21] = t7;
+	} else t7 = $[21];
+	return t7;
 }
 
 // src/components/code-block-view.tsx
@@ -380,7 +397,7 @@ function CodeBlockView(props) {
 	} else t0 = $[1];
 	const caretInside = t0;
 	const katex = useKaTeX(isMath);
-	const mermaid = useBeautifulMermaid(isMermaid);
+	const mermaid = usePele(isMermaid);
 	const showMathPreview = isMath && katex != null;
 	const showMermaidPreview = isMermaid && mermaid != null;
 	const showPreview = showMathPreview || showMermaidPreview;
@@ -425,6 +442,7 @@ function CodeBlockView(props) {
 		t6 = /* @__PURE__ */ jsx("pre", {
 			ref: contentRef,
 			"data-language": language,
+			"data-scroll-x": true,
 			...NON_PROSE_PROPS
 		});
 		$[11] = contentRef;
@@ -452,6 +470,7 @@ function CodeBlockView(props) {
 			displayMode: true,
 			className: code_block_view_module_default.Preview,
 			"data-testid": "code-block-math-preview",
+			"data-scroll-x": true,
 			onMouseDown: focusSource
 		});
 		$[19] = focusSource;
@@ -467,6 +486,7 @@ function CodeBlockView(props) {
 			source: previewCode,
 			className: `${code_block_view_module_default.Preview} ${code_block_view_module_default.MermaidPreview}`,
 			"data-testid": "code-block-mermaid-preview",
+			"data-scroll-x": true,
 			onMouseDown: focusSource
 		});
 		$[24] = focusSource;
@@ -5211,6 +5231,7 @@ function CodeBlock(t0) {
 		t5 = /* @__PURE__ */ jsx("pre", {
 			"data-code-block": "",
 			"data-language": t2,
+			"data-scroll-x": true,
 			children: t4
 		});
 		$[8] = t2;
@@ -5297,7 +5318,8 @@ function MathCodeBlock(t0) {
 			formula: code,
 			displayMode: true,
 			className: code_block_view_module_default.Preview,
-			"data-testid": "code-block-math-preview"
+			"data-testid": "code-block-math-preview",
+			"data-scroll-x": true
 		});
 		$[2] = code;
 		$[3] = katex;
@@ -5308,7 +5330,7 @@ function MathCodeBlock(t0) {
 function MermaidCodeBlock(t0) {
 	const $ = c(5);
 	const { code } = t0;
-	const renderer = useBeautifulMermaid(true);
+	const renderer = usePele(true);
 	if (!renderer || code.trim() === "") {
 		let t1;
 		if ($[0] !== code) {
@@ -5327,7 +5349,8 @@ function MermaidCodeBlock(t0) {
 			renderer,
 			source: code,
 			className: `${code_block_view_module_default.Preview} ${code_block_view_module_default.MermaidPreview}`,
-			"data-testid": "code-block-mermaid-preview"
+			"data-testid": "code-block-mermaid-preview",
+			"data-scroll-x": true
 		});
 		$[2] = code;
 		$[3] = renderer;

package/dist/pele-chunk-Sqn5D2fk.js

@@ -0,0 +1,30 @@
+import { render } from "pele";
+import DOMPurify from "dompurify";
+
+// src/utils/sanitize-svg.ts
+/**
+* Parses an SVG string and removes anything that can run script. Returns
+* `undefined` when no single `<svg>` root remains.
+*/
+function sanitizeSvg(svg) {
+	const fragment = DOMPurify.sanitize(svg, {
+		USE_PROFILES: {
+			svg: true,
+			svgFilters: true
+		},
+		ADD_ATTR: ["role"],
+		RETURN_DOM_FRAGMENT: true
+	});
+	const element = fragment.firstElementChild;
+	if (fragment.childElementCount !== 1 || element?.localName !== "svg") return;
+	return element;
+}
+
+// src/hooks/pele-chunk.ts
+function renderMermaid(source, options) {
+	const element = sanitizeSvg(render(source, options).svg);
+	if (!element) throw new Error("Invalid SVG output.");
+	return element;
+}
+
+export { renderMermaid };

package/dist/style.css

@@ -27,6 +27,15 @@
 }
 
 .meow_MermaidPreview_D3j_9q {
+  --pele-bg: var(--meowdown-mermaid-bg);
+  --pele-fg: var(--meowdown-mermaid-fg);
+  --pele-muted: var(--meowdown-mermaid-muted);
+  --pele-line: var(--meowdown-mermaid-line);
+  --pele-surface: var(--meowdown-mermaid-surface);
+  --pele-surface-alt: var(--meowdown-mermaid-surface-alt);
+  --pele-border: var(--meowdown-mermaid-border);
+  --pele-accent: var(--meowdown-mermaid-accent);
+  --pele-critical: var(--meowdown-mermaid-critical);
   text-align: initial;
 
   &[data-error] {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meowdown/react",
   "type": "module",
-  "version": "0.82.2",
+  "version": "0.83.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -25,16 +25,17 @@
     "@meowdown/core": "0.83.0",
     "@meowdown/embed": "0.3.1",
     "@meowdown/markdown": "0.78.0",
-    "@ocavue/utils": "^1.9.0",
+    "@ocavue/utils": "^1.11.0",
     "@post-embed/types": "^0.5.0",
     "@prosekit/core": "^0.13.4",
     "@prosekit/pm": "^0.1.21",
     "@prosekit/react": "^0.9.0",
     "@prosekit/web": "^0.10.0",
-    "beautiful-mermaid": "^1.1.3",
     "clsx": "^2.1.1",
+    "dompurify": "^3.4.17",
     "github-slugger": "^2.0.0",
     "lucide-react": "^1.47.0",
+    "pele": "^1.13.0",
     "react-property": "^2.0.2"
   },
   "peerDependencies": {
@@ -50,7 +51,7 @@
     }
   },
   "devDependencies": {
-    "@css-modules-kit/codegen": "^1.4.0",
+    "@css-modules-kit/codegen": "^1.4.1",
     "@meowdown/vitest": "0.0.0",
     "@ocavue/tsconfig": "^0.7.1",
     "@tsdown/css": "^0.23.3",

package/dist/beautiful-mermaid-chunk-Cc6FHgAa.js

@@ -1,3 +0,0 @@
-import { renderMermaidSVG } from "beautiful-mermaid";
-
-export { renderMermaidSVG };