@meowdown/react 0.30.0 → 0.31.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement, ReactNode, Ref } from "react";
-import { ExitBoundaryHandler, ImageClickHandler, ImageOptions, LinkClickHandler, LinkCopyHandler, MarkMode, PlaceholderOptions, TagClickHandler, TypedEditor, WikilinkClickHandler } from "@meowdown/core";
+import { ExitBoundaryHandler, FilePasteOptions, ImageClickHandler, ImageOptions, LinkClickHandler, LinkCopyHandler, MarkMode, PlaceholderOptions, TagClickHandler, TypedEditor, WikilinkClickHandler } from "@meowdown/core";
 import { SelectionJSON, SelectionJSON as SelectionJSON$1 } from "@prosekit/core";
 import { useEditor, useExtension, useKeymap } from "@prosekit/react";
 
@@ -22,6 +22,15 @@ interface EditorHandle {
   getMarkdown: () => string;
   /** Replaces the whole document as a single undoable edit. */
   setMarkdown: (markdown: string) => void;
+  /**
+   * Parses `markdown` and inserts it at the current selection as a single
+   * undoable edit, replacing any selected content. A lone paragraph is
+   * inserted inline at the cursor; anything else is inserted as blocks. The
+   * cursor lands at the end of the inserted content. An empty or
+   * whitespace-only string is a no-op. Unlike `setMarkdown`, it fires
+   * `onDocChange`: the host cannot know the resulting document.
+   */
+  insertMarkdown: (markdown: string) => void;
   /** Returns the current Markdown and selection. */
   getState: () => EditorStateSnapshot;
   /**
@@ -45,7 +54,23 @@ interface EditorHandle {
    */
   readonly editor: TypedEditor | undefined;
 }
+/** One row of host items in the slash menu. The host ranks the rows; the menu does not re-sort. */
+interface SlashMenuItem {
+  /** Stable row key; defaults to `label`. */
+  id?: string;
+  /** Display text, matched against the typed query like the built-in items. */
+  label: string;
+  /** Secondary text shown beside the label. */
+  detail?: string;
+  /** Runs after the menu closes and the typed `/query` text is removed. */
+  onSelect: () => void;
+}
 /**
+ * Searches host items for the slash menu. Receives the query typed after `/`
+ * (lowercased, punctuation stripped; may be empty) and returns the rows to
+ * show after the built-in items, either synchronously or as a promise.
+ */
+type SlashMenuSearchHandler = (query: string) => SlashMenuItem[] | Promise<SlashMenuItem[]>;
 /** One row in the tag menu. The host ranks the rows; the menu does not re-sort. */
 interface TagItem {
   /** Inserted as `#tag `. */
@@ -100,6 +125,16 @@ interface EditorProps {
    * `setState` on the handle do not fire it.
    */
   onDocChange?: VoidFunction;
+  /**
+   * Searches host items for the slash menu, which opens when typing `/`.
+   * Receives the query (lowercased, punctuation stripped, may be empty) and
+   * returns the items to show after the built-in ones, synchronously or as a
+   * promise. Selecting an item removes the typed `/query` text before its
+   * `onSelect` runs, so `onSelect` can insert at the cursor (e.g. via the
+   * handle's `insertMarkdown`). Pass a stable function (e.g. from
+   * `useCallback`). Omit to show only the built-in items.
+   */
+  onSlashMenuSearch?: SlashMenuSearchHandler;
   /**
    * Searches tags for the tag menu, which opens when typing `#` followed by
    * text. Receives the query (lowercased, punctuation stripped) and returns the
@@ -152,12 +187,13 @@ interface EditorProps {
    */
   resolveImageUrl?: ImageOptions['resolveImageUrl'];
   /**
-   * Persists a pasted/dropped image file and returns its markdown `src`. Pass a
-   * stable function.
+   * Persists a pasted/dropped file and returns its markdown destination,
+   * inserted as `![](src)` for an image and as a `[name](src)` link for any
+   * other file. Return `undefined` to decline. Pass a stable function.
    */
-  onImagePaste?: ImageOptions['onImagePaste'];
-  /** Called when persisting a pasted/dropped image throws. */
-  onImageSaveError?: ImageOptions['onImageSaveError'];
+  onFilePaste?: FilePasteOptions['onFilePaste'];
+  /** Called when persisting a pasted/dropped file throws. */
+  onFileSaveError?: FilePasteOptions['onFileSaveError'];
   /**
    * Called when the user clicks a rendered image, with its markdown `src`,
    * `alt`, and the originating `MouseEvent`. Pass a stable function (e.g. from
@@ -215,6 +251,7 @@ declare function MeowdownEditor({
   mode,
   initialMarkdown,
   onDocChange,
+  onSlashMenuSearch,
   onTagSearch,
   onWikilinkSearch,
   onWikilinkClick,
@@ -223,8 +260,8 @@ declare function MeowdownEditor({
   onTagClick,
   onExitBoundary,
   resolveImageUrl,
-  onImagePaste,
-  onImageSaveError,
+  onFilePaste,
+  onFileSaveError,
   onImageClick,
   embedPaste,
   bulletAfterHeading,
@@ -281,4 +318,4 @@ declare function MarkdownView({
   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 TimeFormat, type WikilinkItem, type WikilinkSearchHandler, useEditor, useExtension, useKeymap };
+export { type EditorHandle, type EditorMode, type EditorProps, type EditorStateSnapshot, MarkdownView, type MarkdownViewProps, MeowdownEditor, type SelectionHint, type SelectionJSON, type SlashMenuItem, type SlashMenuSearchHandler, type TagItem, type TagSearchHandler, 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, useMemo, useRef, useState } from "react";
-import { codeBlockLanguages, defaultResolveImageUrl, defineBulletAfterHeading, defineEditorExtension, defineEmbedPaste, defineExitBoundaryHandler, defineHTMLPaste, defineImage, defineImageClickHandler, defineLinkClickHandler, defineLinkEditKeymap, defineLinkHoverHandler, defineMarkMode, defineMarkdownCopy, definePlaceholder, defineReadonly, defineTagClickHandler, defineWikilinkClickHandler, defineWikilinkTrigger, docToMarkdown, getCodeTokens, getMarkBuilders, getVirtualElementFromRange, inlineTextToMarkChunks, isSelectionInTableCell, listenForTweetHeight, markdownToDoc, matchEmbed } from "@meowdown/core";
+import { codeBlockLanguages, defaultResolveImageUrl, defineBulletAfterHeading, defineEditorExtension, defineEmbedPaste, defineExitBoundaryHandler, defineFilePaste, defineHTMLPaste, defineImage, defineImageClickHandler, defineLinkClickHandler, defineLinkEditKeymap, defineLinkHoverHandler, defineMarkMode, defineMarkdownCopy, definePlaceholder, defineReadonly, defineSpellCheckPlugin, defineTagClickHandler, defineWikilinkClickHandler, defineWikilinkTrigger, docToMarkdown, getCodeTokens, getMarkBuilders, getVirtualElementFromRange, inlineTextToMarkChunks, isSelectionInTableCell, listenForTweetHeight, markdownToDoc, matchEmbed } from "@meowdown/core";
 import { clamp } from "@ocavue/utils";
 import { canUseRegexLookbehind, createEditor, defineDocChangeHandler, union } from "@prosekit/core";
 import { Selection, TextSelection } from "@prosekit/pm/state";
@@ -216,7 +216,7 @@ function DropIndicator$1() {
 
 //#endregion
 //#region src/components/editor-extensions.tsx
-function EditorExtensions({ markMode, onDocChange, onWikilinkClick, onLinkClick, onTagClick, onExitBoundary, resolveImageUrl, onImagePaste, onImageSaveError, onImageClick, embedPaste, bulletAfterHeading, placeholder, readOnly, wikilinkEnabled }) {
+function EditorExtensions({ markMode, onDocChange, onWikilinkClick, onLinkClick, onTagClick, onExitBoundary, resolveImageUrl, onFilePaste, onFileSaveError, onImageClick, embedPaste, bulletAfterHeading, placeholder, readOnly, wikilinkEnabled, spellCheck }) {
 	useExtension$1(useMemo(() => {
 		return defineMarkMode(markMode);
 	}, [markMode]));
@@ -239,24 +239,26 @@ function EditorExtensions({ markMode, onDocChange, onWikilinkClick, onLinkClick,
 		return onExitBoundary ? defineExitBoundaryHandler(onExitBoundary) : null;
 	}, [onExitBoundary]));
 	useExtension$1(useMemo(() => {
-		return defineImage({
-			resolveImageUrl,
-			onImagePaste,
-			onImageSaveError
-		});
-	}, [
-		resolveImageUrl,
-		onImagePaste,
-		onImageSaveError
-	]));
+		return defineImage({ resolveImageUrl });
+	}, [resolveImageUrl]));
+	useExtension$1(useMemo(() => {
+		return onFilePaste ? defineFilePaste({
+			onFilePaste,
+			onFileSaveError
+		}) : null;
+	}, [onFilePaste, onFileSaveError]));
 	useExtension$1(useMemo(() => {
 		return onImageClick ? defineImageClickHandler(onImageClick) : null;
 	}, [onImageClick]));
 	useExtension$1(useMemo(() => {
 		return embedPaste ? defineEmbedPaste() : null;
 	}, [embedPaste]));
-	useExtension$1(useMemo(() => defineHTMLPaste(), []));
-	useExtension$1(useMemo(() => defineMarkdownCopy(), []));
+	useExtension$1(useMemo(() => {
+		return defineHTMLPaste();
+	}, []));
+	useExtension$1(useMemo(() => {
+		return defineMarkdownCopy();
+	}, []));
 	useExtension$1(useMemo(() => {
 		return bulletAfterHeading ? defineBulletAfterHeading() : null;
 	}, [bulletAfterHeading]));
@@ -269,6 +271,9 @@ function EditorExtensions({ markMode, onDocChange, onWikilinkClick, onLinkClick,
 	useExtension$1(useMemo(() => {
 		return wikilinkEnabled ? defineWikilinkTrigger() : null;
 	}, [wikilinkEnabled]));
+	useExtension$1(useMemo(() => {
+		return spellCheck == null ? null : defineSpellCheckPlugin(spellCheck);
+	}, [spellCheck]));
 	return null;
 }
 
@@ -565,21 +570,57 @@ var autocomplete_menu_module_default = {
 //#endregion
 //#region src/components/slash-menu.tsx
 const regex$2 = canUseRegexLookbehind() ? /(?<!\S)\/(\S.*)?$/u : /\/(\S.*)?$/u;
-function SlashMenuItem({ label, kbd, onSelect }) {
+function SlashMenuItem({ label, detail, kbd, onSelect }) {
 	return /* @__PURE__ */ jsxs(AutocompleteItem, {
+		value: label,
 		className: autocomplete_menu_module_default.Item,
 		onSelect,
-		children: [/* @__PURE__ */ jsx("span", { children: label }), kbd && /* @__PURE__ */ jsx("kbd", { children: kbd })]
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: detail ? autocomplete_menu_module_default.Label : void 0,
+				children: label
+			}),
+			detail ? /* @__PURE__ */ jsx("span", {
+				className: autocomplete_menu_module_default.Detail,
+				children: detail
+			}) : null,
+			kbd && /* @__PURE__ */ jsx("kbd", { children: kbd })
+		]
 	});
 }
 function selectionInTableCell(editor) {
 	return isSelectionInTableCell(editor.state);
 }
-function SlashMenu({ timeFormat = "12" }) {
+function SlashMenu({ timeFormat = "12", onSlashMenuSearch }) {
 	const editor = useEditor$1();
 	const inTableCell = useEditorDerivedValue(selectionInTableCell);
+	const [open, setOpen] = useState(false);
+	const [query, setQuery] = useState("");
+	const [hostItems, setHostItems] = useState([]);
+	const fetchHostItems = useCallback(async (query, signal) => {
+		if (!onSlashMenuSearch || signal.aborted) return;
+		const result = await onSlashMenuSearch(query);
+		if (signal.aborted) return;
+		setHostItems(result);
+	}, [onSlashMenuSearch]);
+	useEffect(() => {
+		if (!open) return;
+		const controller = new AbortController();
+		queueMicrotask(() => {
+			fetchHostItems(query, controller.signal);
+		});
+		return () => {
+			controller.abort();
+		};
+	}, [
+		open,
+		query,
+		fetchHostItems
+	]);
 	return /* @__PURE__ */ jsx(AutocompleteRoot, {
 		regex: regex$2,
+		onOpenChange: (event) => setOpen(event.detail),
+		onQueryChange: (event) => setQuery(event.detail),
 		children: /* @__PURE__ */ jsx(AutocompletePositioner, {
 			className: autocomplete_menu_module_default.Positioner,
 			children: /* @__PURE__ */ jsxs(AutocompletePopup, {
@@ -650,6 +691,11 @@ function SlashMenu({ timeFormat = "12" }) {
 						label: "Now",
 						onSelect: () => editor.commands.insertText({ text: formatNowTime(timeFormat) })
 					}),
+					hostItems.map((item) => /* @__PURE__ */ jsx(SlashMenuItem, {
+						label: item.label,
+						detail: item.detail,
+						onSelect: item.onSelect
+					}, item.id ?? item.label)),
 					/* @__PURE__ */ jsx(AutocompleteEmpty, {
 						className: autocomplete_menu_module_default.Item,
 						children: "No results"
@@ -970,7 +1016,7 @@ function resolveSelection(doc, selection) {
 		return TextSelection.between(doc.resolve(anchor), doc.resolve(head));
 	}
 }
-function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onTagSearch, onWikilinkSearch, onWikilinkClick, onLinkClick, onLinkCopy, onTagClick, onExitBoundary, resolveImageUrl, onImagePaste, onImageSaveError, onImageClick, embedPaste, bulletAfterHeading, frontmatter = false, blockHandle = true, placeholder, readOnly, spellCheck, timeFormat, editorClassName, ref, children }) {
+function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onSlashMenuSearch, onTagSearch, onWikilinkSearch, onWikilinkClick, onLinkClick, onLinkCopy, onTagClick, onExitBoundary, resolveImageUrl, onFilePaste, onFileSaveError, onImageClick, embedPaste, bulletAfterHeading, frontmatter = false, blockHandle = true, placeholder, readOnly, spellCheck, timeFormat, editorClassName, ref, children }) {
 	const [editor] = useState(() => {
 		const editor = createEditor({ extension: union(defineEditorExtension(), defineCodeBlockView()) });
 		if (initialMarkdown) editor.setContent(markdownToDoc(initialMarkdown, {
@@ -1011,6 +1057,9 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onTa
 		function setMarkdown(markdown) {
 			setState(markdown);
 		}
+		function insertMarkdown(markdown) {
+			editor.commands.insertMarkdown(markdown);
+		}
 		function setSelection(selection) {
 			setState(void 0, selection);
 		}
@@ -1023,6 +1072,7 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onTa
 		return {
 			getMarkdown,
 			setMarkdown,
+			insertMarkdown,
 			getState,
 			setState,
 			getSelection,
@@ -1044,7 +1094,6 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onTa
 		children: [
 			/* @__PURE__ */ jsx("div", {
 				ref: editor.mount,
-				spellCheck,
 				className: clsx("meowdown-content", editorClassName)
 			}),
 			/* @__PURE__ */ jsx(EditorExtensions, {
@@ -1055,19 +1104,23 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onTa
 				onTagClick,
 				onExitBoundary,
 				resolveImageUrl,
-				onImagePaste,
-				onImageSaveError,
+				onFilePaste,
+				onFileSaveError,
 				onImageClick,
 				embedPaste,
 				bulletAfterHeading,
 				placeholder,
 				readOnly,
-				wikilinkEnabled: !!onWikilinkSearch
+				wikilinkEnabled: !!onWikilinkSearch,
+				spellCheck
 			}),
 			blockHandle && !readOnly && /* @__PURE__ */ jsx(BlockHandle, {}),
 			!readOnly && /* @__PURE__ */ jsx(TableHandle, {}),
 			blockHandle && !readOnly && /* @__PURE__ */ jsx(DropIndicator$1, {}),
-			/* @__PURE__ */ jsx(SlashMenu, { timeFormat }),
+			/* @__PURE__ */ jsx(SlashMenu, {
+				timeFormat,
+				onSlashMenuSearch
+			}),
 			!readOnly && /* @__PURE__ */ jsx(LinkMenu, {
 				onLinkClick,
 				onLinkCopy
@@ -1081,7 +1134,7 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onTa
 
 //#endregion
 //#region src/components/editor.tsx
-function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onTagSearch, onWikilinkSearch, onWikilinkClick, onLinkClick, onLinkCopy, onTagClick, onExitBoundary, resolveImageUrl, onImagePaste, onImageSaveError, onImageClick, embedPaste = true, bulletAfterHeading = false, frontmatter = false, blockHandle = true, placeholder, readOnly, spellCheck, timeFormat, editorClassName, wrapperClassName, handleRef, children }) {
+function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onSlashMenuSearch, onTagSearch, onWikilinkSearch, onWikilinkClick, onLinkClick, onLinkCopy, onTagClick, onExitBoundary, resolveImageUrl, onFilePaste, onFileSaveError, onImageClick, embedPaste = true, bulletAfterHeading = false, frontmatter = false, blockHandle = true, placeholder, readOnly, spellCheck, timeFormat, editorClassName, wrapperClassName, handleRef, children }) {
 	const childRef = useRef(null);
 	useImperativeHandle(handleRef, () => {
 		function getMarkdown() {
@@ -1090,6 +1143,9 @@ function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onTagSea
 		function setMarkdown(markdown) {
 			childRef.current?.setMarkdown(markdown);
 		}
+		function insertMarkdown(markdown) {
+			childRef.current?.insertMarkdown(markdown);
+		}
 		function getState() {
 			return childRef.current?.getState() ?? ["", {
 				type: "text",
@@ -1119,6 +1175,7 @@ function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onTagSea
 		return {
 			getMarkdown,
 			setMarkdown,
+			insertMarkdown,
 			getState,
 			setState,
 			getSelection,
@@ -1137,6 +1194,7 @@ function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onTagSea
 			markMode: mode,
 			initialMarkdown,
 			onDocChange,
+			onSlashMenuSearch,
 			onTagSearch,
 			onWikilinkSearch,
 			onWikilinkClick,
@@ -1145,8 +1203,8 @@ function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onTagSea
 			onTagClick,
 			onExitBoundary,
 			resolveImageUrl,
-			onImagePaste,
-			onImageSaveError,
+			onFilePaste,
+			onFileSaveError,
 			onImageClick,
 			embedPaste,
 			bulletAfterHeading,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meowdown/react",
   "type": "module",
-  "version": "0.30.0",
+  "version": "0.31.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -25,7 +25,7 @@
     "@prosekit/react": "^0.8.0-beta.15",
     "clsx": "^2.1.1",
     "lucide-react": "^1.21.0",
-    "@meowdown/core": "0.30.0"
+    "@meowdown/core": "0.31.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",