@meowdown/react 0.38.0 → 0.40.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement, ReactNode, Ref } from "react";
-import { AcceptPendingReplacementOptions, ExitBoundaryHandler, FileClickHandler, FileLinkResolver, FilePasteOptions, FileViewOptions, ImageClickHandler, ImageOptions, LinkClickHandler, LinkCopyHandler, MarkMode, PendingReplacement, PendingReplacementOutcome, PlaceholderOptions, StartPendingReplacementOptions, TagClickHandler, TypedEditor, WikilinkClickHandler } from "@meowdown/core";
+import { AcceptPendingReplacementOptions, ExitBoundaryHandler, FileClickHandler, FileLinkResolver, FilePasteOptions, FileViewOptions, ImageClickHandler, ImageOptions, LinkClickHandler, LinkCopyHandler, ListMarker, MarkMode, PendingReplacement, PendingReplacementOutcome, PlaceholderOptions, StartPendingReplacementOptions, TagClickHandler, TypedEditor, WikilinkClickHandler } from "@meowdown/core";
 import { SelectionJSON, SelectionJSON as SelectionJSON$1 } from "@prosekit/core";
 import { useEditor, useExtension, useKeymap } from "@prosekit/react";
 
@@ -404,6 +404,35 @@ declare function MeowdownEditor({
 }: EditorProps): import("react").JSX.Element;
 //#endregion
 //#region src/components/markdown-view.d.ts
+/** Payload for {@link TaskClickHandler}. */
+interface TaskClickPayload {
+  /**
+   * Zero-based position of the clicked checkbox among all the checkboxes this
+   * view renders, in document order. Stable for a given `markdown`, so a host
+   * can map it back to the corresponding task item in its own parse of the
+   * same source.
+   */
+  index: number;
+  /** The checkbox's rendered state. The view never flips it — see the handler doc. */
+  checked: boolean;
+  /** The item's list marker as written (`+` renders a circle checkbox, `-`/`*` a square). */
+  marker: ListMarker;
+  /**
+   * First line of the item's own inline content, exactly as it appears in the
+   * source after the `[ ]`/`[x]` marker and one space. A host locating the task
+   * by {@link index} can cross-check this against its own parse and refuse a
+   * mismatch instead of toggling the wrong item.
+   */
+  text: string;
+  /** The originating click. Read modifier keys or position a popover from it. */
+  event: globalThis.MouseEvent;
+}
+/**
+ * Called when a rendered task checkbox is clicked. The view is a pure render
+ * of `markdown` and never flips the box itself: apply the toggle to the
+ * source and re-render, exactly like the other click handlers.
+ */
+type TaskClickHandler = (payload: TaskClickPayload) => void;
 interface MarkdownViewProps {
   /** The Markdown to render. Live: changing it re-renders the content. */
   markdown: string;
@@ -419,6 +448,8 @@ interface MarkdownViewProps {
   onLinkClick?: LinkClickHandler;
   /** Called when a rendered image is clicked. Pass a stable function. */
   onImageClick?: ImageClickHandler;
+  /** Called when a rendered task checkbox is clicked. Pass a stable function. */
+  onTaskClick?: TaskClickHandler;
   /** Extra class on the content root (alongside `ProseMirror meowdown-content`). */
   className?: string;
 }
@@ -441,7 +472,8 @@ declare function MarkdownView({
   onWikilinkClick,
   onLinkClick,
   onImageClick,
+  onTaskClick,
   className
 }: MarkdownViewProps): ReactElement;
 //#endregion
-export { type EditorHandle, type EditorMode, type EditorProps, type EditorStateSnapshot, MarkdownView, type MarkdownViewProps, MeowdownEditor, type PendingReplacementResolveHandler, type SelectionHint, type SelectionJSON, type SelectionMenuContext, type SelectionMenuItem, type SelectionMenuSearchHandler, type SlashMenuItem, type SlashMenuSearchHandler, type TagItem, type TagSearchHandler, type TimeFormat, type WikilinkItem, type WikilinkSearchHandler, useEditor, useExtension, useKeymap };
+export { type EditorHandle, type EditorMode, type EditorProps, type EditorStateSnapshot, MarkdownView, type MarkdownViewProps, MeowdownEditor, type PendingReplacementResolveHandler, type SelectionHint, type SelectionJSON, type SelectionMenuContext, type SelectionMenuItem, type SelectionMenuSearchHandler, type SlashMenuItem, type SlashMenuSearchHandler, type TagItem, type TagSearchHandler, type TaskClickHandler, type TaskClickPayload, type TimeFormat, type WikilinkItem, type WikilinkSearchHandler, useEditor, useExtension, useKeymap };

package/dist/index.js

@@ -1,6 +1,6 @@
 import { clsx } from "clsx/lite";
-import { Fragment, createElement, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { codeBlockLanguages, defaultResolveImageUrl, defineBulletAfterHeading, defineCodeBlockPreviewPlugin, defineEditorExtension, defineEmbedPaste, defineExitBoundaryHandler, defineFileClickHandler, defineFilePaste, defineFileView, defineFollowLinkHandler, defineHTMLPaste, defineImage, defineImageClickHandler, defineLinkClickHandler, defineLinkEditKeymap, defineLinkHoverHandler, defineLinkPaste, defineMarkdownCopy, definePendingReplacementHandler, definePlaceholder, defineReadonly, defineSpellCheckPlugin, defineTagClickHandler, defineWikilinkClickHandler, defineWikilinkTrigger, docToMarkdown, getCodeTokens, getMarkBuilders, getPendingReplacement, getSelectedText, getTableColumnAlign, getVirtualElementFromRange, inlineTextToMarkChunks, isCodeBlockPreviewHiddenDecoration, isSelectionInTableCell, listenForTweetHeight, loadKaTeX, markdownToDoc, matchEmbed, renderMathInto } from "@meowdown/core";
+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, defineHTMLPaste, defineImage, defineImageClickHandler, defineLinkClickHandler, defineLinkEditKeymap, defineLinkHoverHandler, defineLinkPaste, defineMarkdownCopy, definePendingReplacementHandler, definePlaceholder, defineReadonly, defineSpellCheckPlugin, defineTagClickHandler, defineWikilinkClickHandler, defineWikilinkTrigger, docToMarkdown, getCodeTokens, getMarkBuilders, getPendingReplacement, getSelectedText, getTableColumnAlign, getVirtualElementFromRange, inlineTextToMarkChunks, isCodeBlockPreviewHiddenDecoration, 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";
@@ -15,6 +15,7 @@ import { AutocompleteEmpty, AutocompleteItem, AutocompletePopup, AutocompletePos
 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";
+import { BOOLEAN, OVERLOADED_BOOLEAN, getPropertyInfo, possibleStandardNames } from "react-property";
 
 //#region src/hooks/use-katex.ts
 /**
@@ -998,6 +999,9 @@ var autocomplete_menu_module_default = {
 //#endregion
 //#region src/components/slash-menu.tsx
 const regex$2 = canUseRegexLookbehind() ? /(?<!\S)\/(\S.*)?$/u : /\/(\S.*)?$/u;
+const defaultOnFileSaveError = (error) => {
+	console.error("[meowdown] failed to save attached file:", error);
+};
 function SlashMenuItem({ label, keywords, detail, kbd, onSelect }) {
 	return /* @__PURE__ */ jsxs(AutocompleteItem, {
 		value: [label, ...keywords ?? []].join(" "),
@@ -1019,8 +1023,9 @@ function SlashMenuItem({ label, keywords, detail, kbd, onSelect }) {
 function selectionInTableCell(editor) {
 	return isSelectionInTableCell(editor.state);
 }
-function SlashMenu({ timeFormat = "12", onSlashMenuSearch }) {
+function SlashMenu({ timeFormat = "12", onSlashMenuSearch, onFilePaste, onFileSaveError }) {
 	const editor = useEditor$1();
+	const fileInputRef = useRef(null);
 	const inTableCell = useEditorDerivedValue(selectionInTableCell);
 	const [open, setOpen] = useState(false);
 	const [query, setQuery] = useState("");
@@ -1045,11 +1050,42 @@ function SlashMenu({ timeFormat = "12", onSlashMenuSearch }) {
 		query,
 		fetchHostItems
 	]);
-	return /* @__PURE__ */ jsx(AutocompleteRoot, {
+	const openFilePicker = useCallback(() => {
+		fileInputRef.current?.click();
+	}, []);
+	const handleFileInputChange = useCallback(async (event) => {
+		const input = event.currentTarget;
+		const files = Array.from(input.files ?? []);
+		input.value = "";
+		if (!onFilePaste || files.length === 0) return;
+		const onSaveError = onFileSaveError ?? defaultOnFileSaveError;
+		const markdown = [];
+		for (const file of files) try {
+			const destination = await onFilePaste(file);
+			if (destination) markdown.push(buildFileMarkdown(file, destination));
+		} catch (error) {
+			onSaveError(error, file);
+		}
+		if (markdown.length === 0) return;
+		editor.focus();
+		editor.commands.insertText({ text: markdown.join("\n") });
+	}, [
+		editor,
+		onFilePaste,
+		onFileSaveError
+	]);
+	return /* @__PURE__ */ jsxs(AutocompleteRoot, {
 		regex: regex$2,
 		onOpenChange: (event) => setOpen(event.detail),
 		onQueryChange: (event) => setQuery(event.detail),
-		children: /* @__PURE__ */ jsx(AutocompletePositioner, {
+		children: [onFilePaste ? /* @__PURE__ */ jsx("input", {
+			ref: fileInputRef,
+			"data-testid": "slash-menu-file-input",
+			type: "file",
+			multiple: true,
+			hidden: true,
+			onChange: handleFileInputChange
+		}) : null, /* @__PURE__ */ jsx(AutocompletePositioner, {
 			className: autocomplete_menu_module_default.Positioner,
 			children: /* @__PURE__ */ jsxs(AutocompletePopup, {
 				className: autocomplete_menu_module_default.Popup,
@@ -1125,6 +1161,15 @@ function SlashMenu({ timeFormat = "12", onSlashMenuSearch }) {
 						label: "Now",
 						onSelect: () => editor.commands.insertText({ text: formatNowTime(timeFormat) })
 					}),
+					onFilePaste ? /* @__PURE__ */ jsx(SlashMenuItem, {
+						label: "Attach file",
+						keywords: [
+							"attachment",
+							"file",
+							"upload"
+						],
+						onSelect: openFilePicker
+					}) : null,
 					hostItems.map((item) => /* @__PURE__ */ jsx(SlashMenuItem, {
 						label: item.label,
 						keywords: item.keywords,
@@ -1137,7 +1182,7 @@ function SlashMenu({ timeFormat = "12", onSlashMenuSearch }) {
 					})
 				]
 			})
-		})
+		})]
 	});
 }
 
@@ -1643,7 +1688,9 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onSl
 			blockHandle && !readOnly && /* @__PURE__ */ jsx(DropIndicator$1, {}),
 			/* @__PURE__ */ jsx(SlashMenu, {
 				timeFormat,
-				onSlashMenuSearch
+				onSlashMenuSearch,
+				onFilePaste,
+				onFileSaveError
 			}),
 			!readOnly && /* @__PURE__ */ jsx(LinkMenu, {
 				onLinkClick,
@@ -1788,51 +1835,102 @@ function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onSlashM
 }
 
 //#endregion
-//#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;
+//#region src/components/attributes-to-props.ts
+const UNCONTROLLED_COMPONENT_ATTRIBUTES = ["checked", "value"];
+const UNCONTROLLED_COMPONENT_NAMES = [
+	"input",
+	"select",
+	"textarea"
+];
+/**
+* Converts HTML/SVG DOM attributes to React props.
+*
+* @param attributes - HTML/SVG DOM attributes.
+* @param nodeName - DOM node name.
+* @returns - React props.
+*/
+function attributesToProps(attributes = {}, nodeName) {
+	const props = {};
+	const isInputValueOnly = nodeName === "input" || !!attributes["reset"] || !!attributes["submit"];
+	for (const [attributeName, attributeValue] of Object.entries(attributes)) {
+		if (attributeValue === void 0) continue;
+		const attributeNameLowerCased = attributeName.toLowerCase();
+		if (attributeNameLowerCased === "style") continue;
+		if (attributeNameLowerCased === "contenteditable") continue;
+		if (attributeNameLowerCased.startsWith("aria-") || attributeNameLowerCased.startsWith("data-")) {
+			props[attributeName] = attributeValue;
+			continue;
+		}
+		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);
+			props[propName] = attributeValue;
+			switch (propertyInfo?.type) {
+				case BOOLEAN:
+					props[propName] = true;
+					break;
+				case OVERLOADED_BOOLEAN:
+					if (attributeValue === "") props[propName] = true;
+					break;
+			}
+			continue;
+		}
+		props[attributeName] = attributeValue;
 	}
 	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.
+* Gets prop name from lowercased attribute name.
+*
+* @param attributeName - Lowercased attribute name.
+* @returns - Prop name.
 */
-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];
+function getPropName(attributeName) {
+	return possibleStandardNames[attributeName];
+}
+
+//#endregion
+//#region src/components/dom-output-spec.tsx
+function normalizeDOMOutputSpec(domSpec) {
+	const spec = domSpec;
+	if (!spec || !Array.isArray(spec)) return;
+	const tag = spec[0];
 	let childStart = 1;
 	let attrs;
-	const second = array[1];
+	const second = spec[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)));
+	const rest = spec.slice(childStart);
+	return [
+		tag,
+		attrs,
+		rest
+	];
 }
 
 //#endregion
 //#region src/components/markdown-view.tsx
+/**
+* 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, context) {
+	const key = context.keyCounter.value++;
+	if (typeof spec === "string") return spec;
+	if (spec === 0) return /* @__PURE__ */ jsx(Fragment, { children: content }, key);
+	const normalized = normalizeDOMOutputSpec(spec);
+	if (!normalized) return null;
+	const [tag, attrs, rest] = normalized;
+	const reactProps = { ...attributesToProps(attrs, tag) };
+	reactProps.key = `${key} ${JSON.stringify(attrs)}`;
+	if (tag === "input" && attrs?.["type"] === "checkbox") reactProps.readOnly = true;
+	return createElement(tag, reactProps, ...rest.map((child) => outputSpecToReact(child, content, context)));
+}
 function WikilinkChip(props) {
 	const { target, display, onWikilinkClick, children } = props;
 	return /* @__PURE__ */ jsxs("span", {
@@ -2044,7 +2142,7 @@ function wrapMark(mark, children, context) {
 		default: {
 			const toDOM = mark.type.spec.toDOM;
 			if (!toDOM) return children;
-			return outputSpecToReact(toDOM(mark, true), children);
+			return outputSpecToReact(toDOM(mark, true), children, context);
 		}
 	}
 }
@@ -2082,8 +2180,31 @@ function renderInline(node, context) {
 		marks: Mark.setFrom(marks)
 	})), 0, context);
 }
-function renderBlock(node, key, context) {
-	if (node.type.name === "codeBlock") {
+function renderBlock(node, context) {
+	const key = context.keyCounter.value++;
+	const typeName = node.type.name;
+	let handleTaskClick;
+	if (typeName === "list") {
+		const attrs = node.attrs;
+		const { onTaskClick } = context;
+		if (attrs.kind === "task" && onTaskClick) {
+			const index = context.taskCounter.value++;
+			const checked = attrs.checked === true;
+			const marker = attrs.marker ?? null;
+			const text = node.firstChild?.isTextblock ? node.firstChild.textContent.split("\n", 1)[0] ?? "" : "";
+			handleTaskClick = (event) => {
+				event.preventDefault();
+				onTaskClick({
+					index,
+					checked,
+					marker,
+					text,
+					event: event.nativeEvent
+				});
+			};
+		}
+	}
+	if (typeName === "codeBlock") {
 		const attrs = node.attrs;
 		const language = typeof attrs.language === "string" ? attrs.language : "";
 		if (language === "math") return /* @__PURE__ */ jsx(MathCodeBlock, { code: node.textContent }, key);
@@ -2095,13 +2216,12 @@ function renderBlock(node, key, context) {
 	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);
+		return toDOM ? outputSpecToReact(toDOM(node), inline, context) : /* @__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);
+	const children = node.content.content.map((child) => renderBlock(child, context));
+	const reactNode = toDOM ? outputSpecToReact(toDOM(node), children, context) : /* @__PURE__ */ jsx(Fragment, { children }, key);
+	if (typeName === "list" && handleTaskClick && typeof reactNode !== "string" && reactNode != null) return cloneElement(reactNode, { onClick: handleTaskClick });
+	return reactNode;
 }
 /**
 * Render Markdown to a read-only React tree that looks exactly like the editor
@@ -2114,27 +2234,27 @@ function renderBlock(node, key, context) {
 * 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 }) {
+function MarkdownView({ markdown, markMode = "hide", frontmatter = false, resolveImageUrl, onWikilinkClick, onLinkClick, onImageClick, onTaskClick, className }) {
 	const content = useMemo(() => {
 		const doc = markdownToDoc(markdown, { frontmatter });
 		const context = {
 			resolveImageUrl,
 			onWikilinkClick,
 			onLinkClick,
-			onImageClick
+			onImageClick,
+			onTaskClick,
+			taskCounter: { value: 0 },
+			keyCounter: { value: 0 }
 		};
-		const blocks = [];
-		doc.forEach((node, _offset, index) => {
-			blocks.push(renderBlock(node, index, context));
-		});
-		return blocks;
+		return doc.content.content.map((node) => renderBlock(node, context));
 	}, [
 		markdown,
 		frontmatter,
 		resolveImageUrl,
 		onWikilinkClick,
 		onLinkClick,
-		onImageClick
+		onImageClick,
+		onTaskClick
 	]);
 	return /* @__PURE__ */ jsx("div", {
 		className: clsx("ProseMirror", "meowdown-content", className),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meowdown/react",
   "type": "module",
-  "version": "0.38.0",
+  "version": "0.40.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -25,7 +25,8 @@
     "@prosekit/react": "^0.8.0-beta.19",
     "clsx": "^2.1.1",
     "lucide-react": "^1.21.0",
-    "@meowdown/core": "0.38.0"
+    "react-property": "^2.0.2",
+    "@meowdown/core": "0.40.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",