@meowdown/react 0.20.0 → 0.21.0

package/README.md

@@ -42,7 +42,7 @@ The Markdown editor component. Renders inside a `div.meowdown` wrapper that fill
 - `initialMarkdown?: string`: first render only.
 - `onDocChange?: VoidFunction`: called on every user-driven document change. Programmatic `setMarkdown` / `setState` on the handle do not fire it.
 - `onTagSearch?: (query: string) => TagItem[] | Promise<TagItem[]>`: enables the tag menu, which opens when typing `#` followed by text in a rich mode. Returns ranked rows `{ tag, label?, detail?, onSelect? }` (the menu does not re-sort). Selecting a row inserts `#tag ` then runs its `onSelect`. Omit to disable.
-- `onWikilinkSearch?: (query: string) => WikilinkItem[] | Promise<WikilinkItem[]>`: enables the wikilink menu, which opens as soon as `[[` or `@` is typed in a rich mode. Returns ranked rows `{ target, label?, detail?, onSelect? }` (the menu does not re-sort). Selecting a row inserts `[[target]]` then runs its `onSelect`. Omit to disable.
+- `onWikilinkSearch?: (query: string) => WikilinkItem[] | Promise<WikilinkItem[]>`: enables the wikilink menu, which opens as soon as `[[` or `@` is typed, or `Mod-Shift-k` is pressed, in a rich mode; the shortcut seeds the query from any selected text. Returns ranked rows `{ target, label?, detail?, onSelect? }` (the menu does not re-sort). Selecting a row inserts `[[target]]` then runs its `onSelect`. Omit to disable.
 - `onWikilinkClick?: (payload: { target: string; event: MouseEvent }) => void`: called when a rendered wiki link is clicked. A plain click inside a link the caret already sits in just places the caret; `Mod`-click always fires. Pass a stable function (e.g. from `useCallback`). Ignored in source mode.
 - `onLinkClick?: (payload: { href: string; event: MouseEvent }) => void`: called with its `href` when a rendered Markdown link (`[text](url)`) is clicked. A plain click inside a link the caret already sits in just places the caret; `Mod`-click always fires. Pass a stable function (e.g. from `useCallback`). Ignored in source mode.
 - `resolveImageUrl?: (src: string) => string | undefined`: maps an image `src` to a displayable URL (or `undefined` to skip). Enables inline image rendering: `![alt](src)` stays literal text and the image renders beneath its line. Pass a stable function. Ignored in source mode.
@@ -60,6 +60,27 @@ The Markdown editor component. Renders inside a `div.meowdown` wrapper that fill
 - `handleRef?: Ref<EditorHandle>`
 - `children?: ReactNode`: rendered inside the editor's ProseKit context, so children can call `useEditor()`. Only rendered in the rich modes; source mode ignores them.
 
+### `<MarkdownView>`
+
+A read-only renderer that turns Markdown into a React tree styled exactly like `<MeowdownEditor>` in `hide` mode: inline marks, wiki-link chips, images, tweet/YouTube embeds, and syntax-highlighted code. It mounts no editor and holds no ProseMirror view, so it is cheap to render many times (backlink lists, search results, previews). Import `@meowdown/core/style.css` for the theme; the root carries the `ProseMirror` and `meowdown-content` classes plus `data-mark-mode`, so the editor stylesheet applies unchanged.
+
+```tsx
+import '@meowdown/core/style.css'
+import { MarkdownView } from '@meowdown/react'
+;<MarkdownView
+  markdown="See [[Some Note]] and **bold**."
+  onWikilinkClick={({ target }) => open(target)}
+/>
+```
+
+- `markdown: string`: the Markdown to render. Live: changing it re-renders.
+- `markMode?: 'hide' | 'focus' | 'show'`: defaults to `'hide'`.
+- `frontmatter?: boolean`: peel a leading YAML frontmatter block first. Off by default.
+- `resolveImageUrl?`, `onWikilinkClick?`, `onLinkClick?`, `onImageClick?`: the same shapes as the matching `<MeowdownEditor>` props. Pass stable functions.
+- `className?: string`: extra class on the content root.
+
+Code blocks render their content and syntax highlighting (the same `tok-*` classes as the editor) but without the editor's language picker / copy toolbar. `<MarkdownView>` requires a DOM environment; it is not a server-side HTML-string renderer.
+
 ### `useEditor`
 
 Re-exported from `@prosekit/react`. Call it from a component passed as `children` to read the live editor instance.

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, Ref } from "react";
+import { ReactElement, ReactNode, Ref } from "react";
 import { ImageClickHandler, ImageOptions, LinkClickHandler, MarkMode, PlaceholderOptions, TypedEditor, WikilinkClickHandler } from "@meowdown/core";
 import { SelectionJSON, SelectionJSON as SelectionJSON$1 } from "@prosekit/core";
 import { useEditor, useExtension, useKeymap } from "@prosekit/react";
@@ -211,4 +211,45 @@ declare function MeowdownEditor({
   children
 }: EditorProps): import("react").JSX.Element;
 //#endregion
-export { type EditorHandle, type EditorMode, type EditorProps, type EditorStateSnapshot, MeowdownEditor, type SelectionHint, type SelectionJSON, type TagItem, type TagSearchHandler, type WikilinkItem, type WikilinkSearchHandler, useEditor, useExtension, useKeymap };
+//#region src/components/markdown-view.d.ts
+interface MarkdownViewProps {
+  /** The Markdown to render. Live: changing it re-renders the content. */
+  markdown: string;
+  /** Mark mode for the read-only view. Defaults to `'hide'`. */
+  markMode?: MarkMode;
+  /** Peel a leading YAML frontmatter block before rendering. Off by default. */
+  frontmatter?: boolean;
+  /** Map an image `src` to a displayable URL, or `undefined` to skip it. */
+  resolveImageUrl?: (src: string) => string | undefined;
+  /** Called when a rendered wiki link is clicked. Pass a stable function. */
+  onWikilinkClick?: WikilinkClickHandler;
+  /** Called when a rendered Markdown link is clicked. Pass a stable function. */
+  onLinkClick?: LinkClickHandler;
+  /** Called when a rendered image is clicked. Pass a stable function. */
+  onImageClick?: ImageClickHandler;
+  /** Extra class on the content root (alongside `ProseMirror meowdown-content`). */
+  className?: string;
+}
+/**
+ * Render Markdown to a read-only React tree that looks exactly like the editor
+ * in `hide` mark mode: inline marks, wiki-link chips, images, tweet/YouTube
+ * embeds, and syntax-highlighted code. No editor, no ProseMirror view; just a
+ * walk over `markdownToDoc`'s document reusing meowdown's own parse, mark logic,
+ * and CSS (the root carries `ProseMirror` + `data-mark-mode` so the existing
+ * stylesheet applies). Requires a DOM environment.
+ *
+ * Callbacks (`onWikilinkClick`, etc.) should be stable; pass them via
+ * `useCallback` to avoid re-rendering the whole tree.
+ */
+declare function MarkdownView({
+  markdown,
+  markMode,
+  frontmatter,
+  resolveImageUrl,
+  onWikilinkClick,
+  onLinkClick,
+  onImageClick,
+  className
+}: MarkdownViewProps): ReactElement;
+//#endregion
+export { type EditorHandle, type EditorMode, type EditorProps, type EditorStateSnapshot, MarkdownView, type MarkdownViewProps, MeowdownEditor, type SelectionHint, type SelectionJSON, type TagItem, type TagSearchHandler, type WikilinkItem, type WikilinkSearchHandler, useEditor, useExtension, useKeymap };

package/dist/index.js

@@ -1,5 +1,5 @@
 import { clsx } from "clsx/lite";
-import { useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment, createElement, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
 import { markdown, markdownLanguage } from "@codemirror/lang-markdown";
 import { defaultHighlightStyle, syntaxHighlighting } from "@codemirror/language";
@@ -7,7 +7,7 @@ import { Compartment, EditorSelection, EditorState } from "@codemirror/state";
 import { EditorView, keymap } from "@codemirror/view";
 import { clamp } from "@ocavue/utils";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { codeBlockLanguages, defineBulletAfterHeading, defineEditorExtension, defineEmbedPaste, defineHTMLPaste, defineImage, defineImageClickHandler, defineLinkClickHandler, defineMarkMode, defineMarkdownCopy, definePlaceholder, defineReadonly, defineWikilinkClickHandler, docToMarkdown, markdownToDoc } from "@meowdown/core";
+import { codeBlockLanguages, defaultResolveImageUrl, defineBulletAfterHeading, defineEditorExtension, defineEmbedPaste, defineHTMLPaste, defineImage, defineImageClickHandler, defineLinkClickHandler, defineMarkMode, defineMarkdownCopy, definePlaceholder, defineReadonly, defineWikilinkClickHandler, defineWikilinkTrigger, docToMarkdown, getCodeTokens, getMarkBuilders, inlineTextToMarkChunks, listenForTweetHeight, markdownToDoc, matchEmbed } from "@meowdown/core";
 import { canUseRegexLookbehind, createEditor, defineDocChangeHandler, 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";
@@ -18,6 +18,7 @@ import { DropIndicator } from "@prosekit/react/drop-indicator";
 import { AutocompleteEmpty, AutocompleteItem, AutocompletePopup, AutocompletePositioner, AutocompleteRoot } from "@prosekit/react/autocomplete";
 import { MenuItem, MenuPopup, MenuPositioner } from "@prosekit/react/menu";
 import { TableHandleColumnMenuRoot, TableHandleColumnMenuTrigger, TableHandleColumnPopup, TableHandleColumnPositioner, TableHandleDragPreview, TableHandleDropIndicator, TableHandleRoot, TableHandleRowMenuRoot, TableHandleRowMenuTrigger, TableHandleRowPopup, TableHandleRowPositioner } from "@prosekit/react/table-handle";
+import { Mark } from "@prosekit/pm/model";
 
 //#region src/components/codemirror-editor.tsx
 function resolveSelection$1(selection, docLength) {
@@ -319,7 +320,7 @@ function DropIndicator$1() {
 
 //#endregion
 //#region src/components/editor-extensions.tsx
-function EditorExtensions({ markMode, onDocChange, onWikilinkClick, onLinkClick, resolveImageUrl, onImagePaste, onImageSaveError, onImageClick, embedPaste, bulletAfterHeading, placeholder, readOnly }) {
+function EditorExtensions({ markMode, onDocChange, onWikilinkClick, onLinkClick, resolveImageUrl, onImagePaste, onImageSaveError, onImageClick, embedPaste, bulletAfterHeading, placeholder, readOnly, wikilinkEnabled }) {
 	useExtension$1(useMemo(() => {
 		return defineMarkMode(markMode);
 	}, [markMode]));
@@ -363,6 +364,9 @@ function EditorExtensions({ markMode, onDocChange, onWikilinkClick, onLinkClick,
 			strategy: "doc"
 		}) : null;
 	}, [placeholder]));
+	useExtension$1(useMemo(() => {
+		return wikilinkEnabled ? defineWikilinkTrigger() : null;
+	}, [wikilinkEnabled]));
 	return null;
 }
 
@@ -859,7 +863,8 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onTa
 				embedPaste,
 				bulletAfterHeading,
 				placeholder,
-				readOnly
+				readOnly,
+				wikilinkEnabled: !!onWikilinkSearch
 			}),
 			blockHandle && !readOnly && /* @__PURE__ */ jsx(BlockHandle, {}),
 			!readOnly && /* @__PURE__ */ jsx(TableHandle, {}),
@@ -958,4 +963,306 @@ function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onTagSea
 }
 
 //#endregion
-export { MeowdownEditor, useEditor, useExtension, useKeymap };
+//#region src/components/dom-output-spec.tsx
+const ATTR_NAME_MAP = {
+	class: "className",
+	contenteditable: "contentEditable",
+	colspan: "colSpan",
+	rowspan: "rowSpan",
+	for: "htmlFor",
+	tabindex: "tabIndex",
+	viewbox: "viewBox"
+};
+function toReactProps(attrs, key) {
+	const props = { key };
+	if (!attrs) return props;
+	for (const [name, value] of Object.entries(attrs)) {
+		if (name === "style") continue;
+		props[ATTR_NAME_MAP[name] ?? name] = value;
+	}
+	return props;
+}
+/**
+* Convert a ProseMirror `DOMOutputSpec` into a React node, substituting `content`
+* for the spec's content hole (`0`). Reused for every node/mark spec the static
+* walker does not special-case, so blocks and plain marks render off their real
+* `toDOM`, exactly as the editor serializes them.
+*/
+function outputSpecToReact(spec, content, key = 0) {
+	if (typeof spec === "string") return spec;
+	if (!Array.isArray(spec)) return null;
+	const array = spec;
+	const tag = array[0];
+	let childStart = 1;
+	let attrs;
+	const second = array[1];
+	if (second != null && second !== 0 && typeof second === "object" && !Array.isArray(second)) {
+		attrs = second;
+		childStart = 2;
+	}
+	const props = toReactProps(attrs, key);
+	const rest = array.slice(childStart);
+	if (rest.length === 0) return createElement(tag, props);
+	return createElement(tag, props, ...rest.map((child, index) => child === 0 ? /* @__PURE__ */ jsx(Fragment, { children: content }, index) : outputSpecToReact(child, content, index)));
+}
+
+//#endregion
+//#region src/components/markdown-view.tsx
+function WikilinkChip(props) {
+	const { target, display, onWikilinkClick, children } = props;
+	return /* @__PURE__ */ jsxs("span", {
+		className: "md-wikilink-view",
+		children: [/* @__PURE__ */ jsx("span", { children }), /* @__PURE__ */ jsx("span", {
+			className: "md-wikilink-label",
+			"data-testid": "wikilink",
+			contentEditable: false,
+			onClick: onWikilinkClick ? (event) => onWikilinkClick({
+				target,
+				event: event.nativeEvent
+			}) : void 0,
+			children: display || target
+		})]
+	});
+}
+function EmbedFrame({ embed }) {
+	const iframeRef = useRef(null);
+	useEffect(() => {
+		if (embed.kind !== "tweet") return;
+		const iframe = iframeRef.current;
+		if (!iframe) return;
+		return listenForTweetHeight(iframe);
+	}, [embed.kind, embed.key]);
+	return /* @__PURE__ */ jsx("span", {
+		className: "md-image-preview md-image-preview-embed",
+		contentEditable: false,
+		children: /* @__PURE__ */ jsx("iframe", {
+			ref: iframeRef,
+			src: embed.src,
+			title: embed.title,
+			className: embed.className,
+			"data-testid": embed.testid,
+			loading: "lazy",
+			referrerPolicy: "strict-origin-when-cross-origin",
+			frameBorder: "0",
+			allow: embed.allow,
+			allowFullScreen: embed.allowFullscreen
+		}, embed.key)
+	});
+}
+function ImagePreview(props) {
+	const { src, alt, resolveImageUrl, onImageClick } = props;
+	const embed = matchEmbed(src);
+	if (embed) return /* @__PURE__ */ jsx(EmbedFrame, { embed });
+	const url = (resolveImageUrl ?? defaultResolveImageUrl)(src);
+	if (!url) return null;
+	return /* @__PURE__ */ jsx("span", {
+		className: "md-image-preview md-image-preview-img",
+		"data-testid": "image-preview",
+		contentEditable: false,
+		children: /* @__PURE__ */ jsx("img", {
+			src: url,
+			alt,
+			draggable: false,
+			onClick: onImageClick ? (event) => onImageClick({
+				src,
+				alt,
+				event: event.nativeEvent
+			}) : void 0
+		})
+	});
+}
+function ImageView(props) {
+	const { src, alt, context, children } = props;
+	return /* @__PURE__ */ jsxs("span", {
+		className: "md-image-view",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "md-image-view-content",
+			children
+		}), /* @__PURE__ */ jsx(ImagePreview, {
+			src,
+			alt,
+			resolveImageUrl: context.resolveImageUrl,
+			onImageClick: context.onImageClick
+		})]
+	});
+}
+function renderTokens(code, tokens) {
+	const out = [];
+	let pos = 0;
+	let index = 0;
+	for (const [from, to, classes] of tokens) {
+		if (from > pos) out.push(/* @__PURE__ */ jsx(Fragment, { children: code.slice(pos, from) }, `gap-${index}`));
+		out.push(/* @__PURE__ */ jsx("span", {
+			className: classes,
+			children: code.slice(from, to)
+		}, index));
+		pos = to;
+		index++;
+	}
+	if (pos < code.length) out.push(/* @__PURE__ */ jsx(Fragment, { children: code.slice(pos) }, "tail"));
+	return out;
+}
+function CodeBlock({ code, language }) {
+	const syncTokens = useMemo(() => {
+		const result = getCodeTokens(code, language);
+		return Array.isArray(result) ? result : null;
+	}, [code, language]);
+	const [asyncTokens, setAsyncTokens] = useState(null);
+	useEffect(() => {
+		if (syncTokens) return;
+		let active = true;
+		const result = getCodeTokens(code, language);
+		if (!Array.isArray(result)) result.then((loaded) => {
+			if (active) setAsyncTokens(loaded);
+		});
+		return () => {
+			active = false;
+		};
+	}, [
+		code,
+		language,
+		syncTokens
+	]);
+	const tokens = syncTokens ?? asyncTokens ?? [];
+	return /* @__PURE__ */ jsx("pre", {
+		"data-language": language || void 0,
+		children: /* @__PURE__ */ jsx("code", { children: tokens.length > 0 ? renderTokens(code, tokens) : code })
+	});
+}
+/** Wrap inline `children` in one mark, special-casing the view/link marks. */
+function wrapMark(mark, children, context) {
+	switch (mark.type.name) {
+		case "mdWikilinkView": {
+			const attrs = mark.attrs;
+			return /* @__PURE__ */ jsx(WikilinkChip, {
+				target: attrs.target,
+				display: attrs.display,
+				onWikilinkClick: context.onWikilinkClick,
+				children
+			});
+		}
+		case "mdImageView": {
+			const attrs = mark.attrs;
+			return /* @__PURE__ */ jsx(ImageView, {
+				src: attrs.src,
+				alt: attrs.alt,
+				context,
+				children
+			});
+		}
+		case "mdLinkText": {
+			const attrs = mark.attrs;
+			const handleClick = context.onLinkClick ? (event) => context.onLinkClick?.({
+				href: attrs.href,
+				event: event.nativeEvent
+			}) : void 0;
+			return /* @__PURE__ */ jsx("a", {
+				className: "md-link",
+				href: attrs.href,
+				onClick: handleClick,
+				children
+			});
+		}
+		default: {
+			const toDOM = mark.type.spec.toDOM;
+			if (!toDOM) return children;
+			return outputSpecToReact(toDOM(mark, true), children);
+		}
+	}
+}
+/**
+* Render a run of inline pieces, sharing a parent element across adjacent pieces
+* that have the same mark at `depth`. This mirrors ProseMirror's DOM
+* serialization, which keeps a mark element open across consecutive content (so
+* `**bold**` is one `<strong>` wrapping `**`, `bold`, `**`, not three).
+*/
+function renderRuns(runs, depth, context) {
+	const out = [];
+	let index = 0;
+	let key = 0;
+	while (index < runs.length) {
+		const run = runs[index];
+		if (run.marks.length <= depth) {
+			out.push(/* @__PURE__ */ jsx(Fragment, { children: run.text }, key++));
+			index++;
+			continue;
+		}
+		const mark = run.marks[depth];
+		let end = index + 1;
+		while (end < runs.length && runs[end].marks.length > depth && runs[end].marks[depth].eq(mark)) end++;
+		const inner = renderRuns(runs.slice(index, end), depth + 1, context);
+		out.push(/* @__PURE__ */ jsx(Fragment, { children: wrapMark(mark, inner, context) }, key++));
+		index = end;
+	}
+	return out;
+}
+function renderInline(node, context) {
+	const text = node.textContent;
+	if (!text) return null;
+	return renderRuns(inlineTextToMarkChunks(getMarkBuilders(), text).map(([from, to, marks]) => ({
+		text: text.slice(from, to),
+		marks: Mark.setFrom(marks)
+	})), 0, context);
+}
+function renderBlock(node, key, context) {
+	if (node.type.name === "codeBlock") {
+		const attrs = node.attrs;
+		const language = typeof attrs.language === "string" ? attrs.language : "";
+		return /* @__PURE__ */ jsx(CodeBlock, {
+			code: node.textContent,
+			language
+		}, key);
+	}
+	const toDOM = node.type.spec.toDOM;
+	if (node.isTextblock) {
+		const inline = renderInline(node, context);
+		return toDOM ? outputSpecToReact(toDOM(node), inline, key) : /* @__PURE__ */ jsx(Fragment, { children: inline }, key);
+	}
+	const children = [];
+	node.forEach((child, _offset, index) => {
+		children.push(renderBlock(child, index, context));
+	});
+	return toDOM ? outputSpecToReact(toDOM(node), children, key) : /* @__PURE__ */ jsx(Fragment, { children }, key);
+}
+/**
+* Render Markdown to a read-only React tree that looks exactly like the editor
+* in `hide` mark mode: inline marks, wiki-link chips, images, tweet/YouTube
+* embeds, and syntax-highlighted code. No editor, no ProseMirror view; just a
+* walk over `markdownToDoc`'s document reusing meowdown's own parse, mark logic,
+* and CSS (the root carries `ProseMirror` + `data-mark-mode` so the existing
+* stylesheet applies). Requires a DOM environment.
+*
+* Callbacks (`onWikilinkClick`, etc.) should be stable; pass them via
+* `useCallback` to avoid re-rendering the whole tree.
+*/
+function MarkdownView({ markdown, markMode = "hide", frontmatter = false, resolveImageUrl, onWikilinkClick, onLinkClick, onImageClick, className }) {
+	const content = useMemo(() => {
+		const doc = markdownToDoc(markdown, { frontmatter });
+		const context = {
+			resolveImageUrl,
+			onWikilinkClick,
+			onLinkClick,
+			onImageClick
+		};
+		const blocks = [];
+		doc.forEach((node, _offset, index) => {
+			blocks.push(renderBlock(node, index, context));
+		});
+		return blocks;
+	}, [
+		markdown,
+		frontmatter,
+		resolveImageUrl,
+		onWikilinkClick,
+		onLinkClick,
+		onImageClick
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("ProseMirror", "meowdown-content", className),
+		"data-mark-mode": markMode,
+		children: content
+	});
+}
+
+//#endregion
+export { MarkdownView, MeowdownEditor, useEditor, useExtension, useKeymap };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meowdown/react",
   "type": "module",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -27,10 +27,10 @@
     "@ocavue/utils": "^1.7.0",
     "@prosekit/core": "^0.13.0-beta.3",
     "@prosekit/pm": "^0.1.19-beta.0",
-    "@prosekit/react": "^0.8.0-beta.9",
+    "@prosekit/react": "^0.8.0-beta.10",
     "clsx": "^2.1.1",
     "lucide-react": "^1.21.0",
-    "@meowdown/core": "0.20.0"
+    "@meowdown/core": "0.21.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",