@meowdown/react 0.50.0 → 0.52.0

package/README.md

@@ -56,6 +56,8 @@ See the full API reference [here](https://npmx.dev/package-docs/@meowdown%2Freac
 
 Slash menu host items can include `keywords` to match hidden terms without changing the displayed label.
 
+The caret glides between positions by default; pass `caretGlide={false}` to move it instantly (hosts can also tune the duration via the `--meowdown-caret-glide` CSS variable).
+
 ### Wiki embeds
 
 Obsidian-style wiki embeds (`![[path]]`, with optional `|width` or
@@ -119,6 +121,18 @@ resolver that accepts only trusted local image sources.
 <MarkdownView markdown={markdown} interactive={false} resolveImageUrl={resolveLocalImageUrl} />
 ```
 
+### Mermaid code blocks
+
+Fenced `mermaid` code blocks render as diagrams in both `MeowdownEditor` and
+`MarkdownView`. The editor shows only the preview while the caret is outside
+the block, then shows source and a live preview while editing it.
+
+Rendering uses `beautiful-mermaid`, which currently supports Flowchart, State,
+Sequence, Class, ER, and XY Chart diagrams. Unsupported syntax renders an error
+instead of an empty preview. Override `--meowdown-mermaid-bg`,
+`--meowdown-mermaid-fg`, or `--meowdown-mermaid-error` to customize the
+diagram surface.
+
 ## Styling
 
 Import both stylesheets: `@meowdown/core/style.css` (the editor theme and variables) and `@meowdown/react/style.css` (the component layout). The core theme is documented in [`@meowdown/core`](https://www.npmjs.com/package/@meowdown/core).

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

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

package/dist/index.d.ts

@@ -366,6 +366,12 @@ interface EditorProps {
    * Ignored when `readOnly` is set.
    */
   blockHandle?: boolean;
+  /**
+   * Glides the caret between positions instead of jumping instantly. On by
+   * default. Set to `false` to disable the movement animation; equivalent to
+   * setting the `--meowdown-caret-glide` CSS variable to `0ms`.
+   */
+  caretGlide?: boolean;
   /**
    * Placeholder text shown when the whole document is empty. A function
    * receives the editor state. Pass a stable function.
@@ -392,7 +398,7 @@ interface EditorProps {
   /** Nodes rendered inside the editor's ProseKit context. */
   children?: ReactNode;
 }
-declare function MeowdownEditor({ mode, initialMarkdown, onDocChange, onSlashMenuSearch, onTagSearch, onWikilinkSearch, onSelectionMenuSearch, selectionMenuAffordance, pendingReplacementActions, onPendingReplacementResolve, onWikilinkClick, onLinkClick, onLinkCopy, onTagClick, onExitBoundary, resolveImageUrl, resolveFileLink, resolveWikiEmbed, resolveFileInfo, onFileClick, onFilePaste, onFileSaveError, onImageClick, embedPaste, linkPaste, bulletAfterHeading, substitution, frontmatter, blockHandle, placeholder, readOnly, spellCheck, timeFormat, editorClassName, wrapperClassName, handleRef, children }: EditorProps): import("react").JSX.Element;
+declare function MeowdownEditor({ mode, initialMarkdown, onDocChange, onSlashMenuSearch, onTagSearch, onWikilinkSearch, onSelectionMenuSearch, selectionMenuAffordance, pendingReplacementActions, onPendingReplacementResolve, onWikilinkClick, onLinkClick, onLinkCopy, onTagClick, onExitBoundary, resolveImageUrl, resolveFileLink, resolveWikiEmbed, resolveFileInfo, onFileClick, onFilePaste, onFileSaveError, onImageClick, embedPaste, linkPaste, bulletAfterHeading, substitution, frontmatter, blockHandle, caretGlide, placeholder, readOnly, spellCheck, timeFormat, editorClassName, wrapperClassName, handleRef, children }: EditorProps): import("react").JSX.Element;
 //#endregion
 //#region src/components/markdown-view.d.ts
 /** Payload for {@link TaskClickHandler}. */

package/dist/index.js

@@ -1,10 +1,11 @@
 import { clsx } from "clsx/lite";
 import { Fragment, cloneElement, createElement, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { buildFileMarkdown, codeBlockLanguages, defaultResolveImageUrl, defineBulletAfterHeading, defineCodeBlockPreviewPlugin, defineEditorExtension, defineEmbedPaste, defineExitBoundaryHandler, defineFileClickHandler, defineFilePaste, defineFileView, defineFollowLinkHandler, defineImage, defineImageClickHandler, defineLinkClickHandler, defineLinkEditKeymap, defineLinkHoverHandler, defineLinkPaste, definePendingReplacementHandler, definePlaceholder, defineReadonly, defineSpellCheckPlugin, defineSubstitution, defineTagClickHandler, defineWikilinkClickHandler, defineWikilinkHoverHandler, defineWikilinkTrigger, docToMarkdown, formatFileSize, getCodeTokens, getFileKind, getMarkBuilders, getPendingReplacement, getSelectedText, getTableColumnAlign, getVirtualElementFromRange, inlineTextToMarkChunks, isCodeBlockPreviewHiddenDecoration, isSelectionInTableCell, listenForTweetHeight, loadKaTeX, markdownToDoc, matchEmbed, renderMathInto } from "@meowdown/core";
+import { buildFileMarkdown, codeBlockLanguages, defaultResolveImageUrl, defineBulletAfterHeading, defineCodeBlockPreviewPlugin, defineEditorExtension, defineEmbedPaste, defineExitBoundaryHandler, defineFileClickHandler, defineFilePaste, defineFileView, defineFollowLinkHandler, defineImage, defineImageClickHandler, defineLinkClickHandler, defineLinkEditKeymap, defineLinkHoverHandler, defineLinkPaste, definePendingReplacementHandler, definePlaceholder, defineReadonly, defineSpellCheckPlugin, defineSubstitution, defineTagClickHandler, defineWikilinkClickHandler, defineWikilinkHoverHandler, defineWikilinkTrigger, docToMarkdown, formatFileSize, getCodeTokens, getFileKind, getMarkBuilders, getPendingReplacement, getSelectedText, getTableColumnAlign, getTextblockDisplayText, getVirtualElementFromRange, inlineTextToMarkChunks, isCodeBlockPreviewHiddenDecoration, isNodeOfType, isSelectionInTableCell, listenForTweetHeight, loadKaTeX, markdownToDoc, matchEmbed, renderMathInto } from "@meowdown/core";
 import { clamp } from "@ocavue/utils";
 import { canUseRegexLookbehind, createEditor, defineDocChangeHandler, defineUpdateHandler, isTextSelection, union } from "@prosekit/core";
 import { Selection, TextSelection } from "@prosekit/pm/state";
 import { ProseKit, defineReactNodeView, useEditor, useEditor as useEditor$1, useEditorDerivedValue, useExtension, useExtension as useExtension$1, useKeymap } from "@prosekit/react";
+import GithubSlugger from "github-slugger";
 import { Combobox } from "@base-ui/react/combobox";
 import { CheckIcon, ChevronsUpDownIcon, CopyIcon, GripHorizontalIcon, GripVerticalIcon, PencilIcon, SparklesIcon, UnlinkIcon } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -18,6 +19,31 @@ import { Mark } from "@prosekit/pm/model";
 import { BOOLEAN, OVERLOADED_BOOLEAN, getPropertyInfo, possibleStandardNames } from "react-property";
 import { PreviewCard } from "@base-ui/react/preview-card";
 
+//#region 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) {
+	const [renderer, setRenderer] = useState(void 0);
+	useEffect(() => {
+		if (!enabled || renderer) return;
+		let cancelled = false;
+		loadBeautifulMermaid().then((loadedRenderer) => {
+			if (!cancelled) setRenderer(() => loadedRenderer);
+		}).catch(() => {});
+		return () => {
+			cancelled = true;
+		};
+	}, [enabled, renderer]);
+	return renderer;
+}
+
+//#endregion
 //#region src/hooks/use-katex.ts
 /**
 * The lazily loaded KaTeX render function, or `undefined` while it loads (or when
@@ -47,6 +73,7 @@ var code_block_view_module_default = {
 	"ItemIndicator": "meow_ItemIndicator_D3j_9q",
 	"ItemText": "meow_ItemText_D3j_9q",
 	"List": "meow_List_D3j_9q",
+	"MermaidPreview": "meow_MermaidPreview_D3j_9q",
 	"Popup": "meow_Popup_D3j_9q",
 	"Positioner": "meow_Positioner_D3j_9q",
 	"Preview": "meow_Preview_D3j_9q",
@@ -120,16 +147,64 @@ function MathRender(props) {
 	});
 }
 
+//#endregion
+//#region src/components/mermaid-render.tsx
+const MERMAID_OPTIONS = {
+	bg: "var(--meowdown-mermaid-bg)",
+	fg: "var(--meowdown-mermaid-fg)",
+	transparent: true,
+	interactive: false
+};
+function renderMermaid(renderer, source) {
+	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 };
+	} catch (error) {
+		return { error: error instanceof Error ? error.message : String(error) };
+	}
+}
+function MermaidRender(props) {
+	const { renderer, source, className, onMouseDown } = props;
+	const output = useMemo(() => renderMermaid(renderer, source), [renderer, source]);
+	const ref = useRef(null);
+	useLayoutEffect(() => {
+		const host = ref.current;
+		if (!host || !output.element) return;
+		host.replaceChildren(window.document.importNode(output.element, true));
+	}, [output]);
+	if (output.error) return /* @__PURE__ */ jsx("span", {
+		className,
+		contentEditable: false,
+		"data-error": true,
+		"data-testid": props["data-testid"],
+		onMouseDown,
+		children: output.error
+	}, "error");
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		className,
+		contentEditable: false,
+		"data-testid": props["data-testid"],
+		onMouseDown
+	}, "svg");
+}
+
 //#endregion
 //#region src/components/code-block-view.tsx
 function CodeBlockView(props) {
 	const language = props.node.attrs.language || "";
 	const isMath = language === "math";
+	const isMermaid = language === "mermaid";
 	const code = props.node.textContent;
 	const caretInside = props.decorations.some(isCodeBlockPreviewHiddenDecoration);
 	const katex = useKaTeX(isMath);
+	const mermaid = useBeautifulMermaid(isMermaid);
 	const showMathPreview = isMath && katex != null;
-	const previewOnly = showMathPreview && !caretInside && code.trim() !== "";
+	const showMermaidPreview = isMermaid && mermaid != null;
+	const previewOnly = (showMathPreview || showMermaidPreview) && !caretInside && code.trim() !== "";
 	const focusSource = (event) => {
 		event.preventDefault();
 		const pos = props.getPos();
@@ -240,6 +315,13 @@ function CodeBlockView(props) {
 				className: code_block_view_module_default.Preview,
 				"data-testid": "code-block-math-preview",
 				onMouseDown: focusSource
+			}),
+			showMermaidPreview && /* @__PURE__ */ jsx(MermaidRender, {
+				renderer: mermaid,
+				source: code,
+				className: `${code_block_view_module_default.Preview} ${code_block_view_module_default.MermaidPreview}`,
+				"data-testid": "code-block-mermaid-preview",
+				onMouseDown: focusSource
 			})
 		]
 	});
@@ -1561,54 +1643,19 @@ function decodeHeadingFragment(fragment) {
 function headingLookupKey(value) {
 	return value.normalize("NFKC").trim().replaceAll(/\s+/g, " ").toLowerCase();
 }
-const HEADING_HIDDEN_MARKS = /* @__PURE__ */ new Set([
-	"mdMark",
-	"mdLinkUri",
-	"mdLinkTitle"
-]);
-const HEADING_ATOM_MARKS = /* @__PURE__ */ new Set([
-	"mdWikilink",
-	"mdImage",
-	"mdFile",
-	"mdMath"
-]);
-function headingAtomText(mark) {
-	const attrs = mark.attrs;
-	const stringAttr = (name) => {
-		const value = attrs[name];
-		return typeof value === "string" ? value : "";
-	};
-	if (mark.type.name === "mdWikilink") return stringAttr("display") || stringAttr("target");
-	if (mark.type.name === "mdImage") return stringAttr("alt");
-	if (mark.type.name === "mdFile") return stringAttr("name");
-	if (mark.type.name === "mdMath") return stringAttr("formula");
-	return "";
-}
-/** The heading as its live-preview marks display it, with syntax runs omitted. */
-function headingDisplayText(heading) {
-	let output = "";
-	let previousAtom;
-	heading.forEach((child) => {
-		if (!child.isText || !child.text) return;
-		const atom = child.marks.find((mark) => HEADING_ATOM_MARKS.has(mark.type.name));
-		if (atom) {
-			if (!previousAtom?.eq(atom)) output += headingAtomText(atom);
-			previousAtom = atom;
-			return;
-		}
-		previousAtom = void 0;
-		if (child.marks.some((mark) => HEADING_HIDDEN_MARKS.has(mark.type.name))) return;
-		output += child.text;
-	});
-	return output;
-}
 function findHeadingPosition(doc, fragment) {
-	const target = headingLookupKey(decodeHeadingFragment(fragment));
+	const decodedTarget = decodeHeadingFragment(fragment);
+	const target = headingLookupKey(decodedTarget);
 	if (!target) return;
+	const slugTarget = decodedTarget.normalize("NFKC").toLowerCase();
+	const slugger = new GithubSlugger();
 	let match;
 	doc.descendants((node, pos) => {
 		if (match != null) return false;
-		if (node.type.name === "heading" && (headingLookupKey(node.textContent) === target || headingLookupKey(headingDisplayText(node)) === target)) {
+		if (!isNodeOfType(node, "heading")) return true;
+		const displayText = getTextblockDisplayText(node);
+		const slug = slugger.slug(displayText);
+		if (headingLookupKey(node.textContent) === target || headingLookupKey(displayText) === target || slug === slugTarget) {
 			match = pos + 1;
 			return false;
 		}
@@ -1818,7 +1865,8 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onSl
 
 //#endregion
 //#region src/components/editor.tsx
-function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onSlashMenuSearch, onTagSearch, onWikilinkSearch, onSelectionMenuSearch, selectionMenuAffordance = true, pendingReplacementActions, onPendingReplacementResolve, onWikilinkClick, onLinkClick, onLinkCopy, onTagClick, onExitBoundary, resolveImageUrl, resolveFileLink, resolveWikiEmbed, resolveFileInfo, onFileClick, onFilePaste, onFileSaveError, onImageClick, embedPaste = true, linkPaste = true, bulletAfterHeading = false, substitution = true, frontmatter = false, blockHandle = true, placeholder, readOnly, spellCheck, timeFormat, editorClassName, wrapperClassName, handleRef, children }) {
+const CARET_GLIDE_OFF = { "--meowdown-caret-glide": "0ms" };
+function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onSlashMenuSearch, onTagSearch, onWikilinkSearch, onSelectionMenuSearch, selectionMenuAffordance = true, pendingReplacementActions, onPendingReplacementResolve, onWikilinkClick, onLinkClick, onLinkCopy, onTagClick, onExitBoundary, resolveImageUrl, resolveFileLink, resolveWikiEmbed, resolveFileInfo, onFileClick, onFilePaste, onFileSaveError, onImageClick, embedPaste = true, linkPaste = true, bulletAfterHeading = false, substitution = true, frontmatter = false, blockHandle = true, caretGlide = true, placeholder, readOnly, spellCheck, timeFormat, editorClassName, wrapperClassName, handleRef, children }) {
 	const childRef = useRef(null);
 	useImperativeHandle(handleRef, () => {
 		function getMarkdown() {
@@ -1905,6 +1953,7 @@ function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onSlashM
 	}, []);
 	return /* @__PURE__ */ jsx("div", {
 		className: clsx("meowdown", wrapperClassName),
+		style: caretGlide ? void 0 : CARET_GLIDE_OFF,
 		children: /* @__PURE__ */ jsx(ProseKitEditor, {
 			ref: childRef,
 			markMode: mode,
@@ -1976,7 +2025,7 @@ function attributesToProps(attributes = {}, nodeName) {
 		let propName = getPropName(attributeNameLowerCased);
 		if (propName) {
 			const propertyInfo = getPropertyInfo(propName);
-			if (UNCONTROLLED_COMPONENT_ATTRIBUTES.includes(propName) && UNCONTROLLED_COMPONENT_NAMES.includes(nodeName) && !isInputValueOnly) propName = getPropName("default" + attributeNameLowerCased);
+			if (!isInputValueOnly && UNCONTROLLED_COMPONENT_ATTRIBUTES.includes(propName) && UNCONTROLLED_COMPONENT_NAMES.includes(nodeName)) propName = getPropName("default" + attributeNameLowerCased);
 			props[propName] = attributeValue;
 			switch (propertyInfo?.type) {
 				case BOOLEAN:
@@ -2284,6 +2333,19 @@ function MathCodeBlock({ code }) {
 		"data-testid": "code-block-math-preview"
 	});
 }
+function MermaidCodeBlock({ code }) {
+	const renderer = useBeautifulMermaid(true);
+	if (!renderer || code.trim() === "") return /* @__PURE__ */ jsx(CodeBlock, {
+		code,
+		language: "mermaid"
+	});
+	return /* @__PURE__ */ jsx(MermaidRender, {
+		renderer,
+		source: code,
+		className: `${code_block_view_module_default.Preview} ${code_block_view_module_default.MermaidPreview}`,
+		"data-testid": "code-block-mermaid-preview"
+	});
+}
 /** Wrap inline `children` in one mark, special-casing the view/link marks. */
 function wrapMark(mark, children, context) {
 	switch (mark.type.name) {
@@ -2411,6 +2473,7 @@ function renderBlock(node, context) {
 		const attrs = node.attrs;
 		const language = typeof attrs.language === "string" ? attrs.language : "";
 		if (language === "math") return /* @__PURE__ */ jsx(MathCodeBlock, { code: node.textContent }, key);
+		if (language === "mermaid") return /* @__PURE__ */ jsx(MermaidCodeBlock, { code: node.textContent }, key);
 		return /* @__PURE__ */ jsx(CodeBlock, {
 			code: node.textContent,
 			language

package/dist/style.css

@@ -16,6 +16,23 @@
   overflow-x: auto;
 }
 
+.meow_MermaidPreview_D3j_9q {
+  text-align: initial;
+
+  &[data-error] {
+    color: var(--meowdown-mermaid-error);
+    font-family: var(--meowdown-font-mono);
+    white-space: pre-wrap;
+  }
+
+  & svg {
+    max-width: 100%;
+    height: auto;
+    margin-inline: auto;
+    display: block;
+  }
+}
+
 .meow_Toolbar_D3j_9q {
   z-index: 1;
   user-select: none;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meowdown/react",
   "type": "module",
-  "version": "0.50.0",
+  "version": "0.52.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -23,10 +23,12 @@
     "@prosekit/core": "^0.13.0-beta.6",
     "@prosekit/pm": "^0.1.19-beta.3",
     "@prosekit/react": "^0.8.0-beta.21",
+    "beautiful-mermaid": "^1.1.3",
     "clsx": "^2.1.1",
+    "github-slugger": "^2.0.0",
     "lucide-react": "^1.24.0",
     "react-property": "^2.0.2",
-    "@meowdown/core": "0.50.0"
+    "@meowdown/core": "0.52.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -43,14 +45,14 @@
   "devDependencies": {
     "@css-modules-kit/codegen": "^1.4.0",
     "@ocavue/tsconfig": "^0.7.1",
-    "@tsdown/css": "^0.22.7",
+    "@tsdown/css": "^0.22.8",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@vitest/browser-playwright": "^4.1.10",
     "dedent": "^1.7.2",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
-    "tsdown": "^0.22.7",
+    "tsdown": "^0.22.8",
     "vitest": "^4.1.10",
     "vitest-browser-commands": "^0.2.1",
     "vitest-browser-react": "^2.2.0",