@meowdown/react 0.58.3 → 0.59.1

package/README.md

@@ -101,6 +101,32 @@ file embeds; return `false` to keep it as a normal link.
 />
 ```
 
+### Find in document
+
+`searchQuery` highlights every match and selects the first one at or after the
+caret; changing it re-anchors from wherever the selection is, so refining a
+query keeps the match the user is looking at. A query that matches nothing
+collapses the previous match selection to a caret, and an empty string (the
+default) clears the highlights and leaves the selection alone. `onSearchChange` reports
+`{ total, active }` for a match counter (`active` is one-based; `0` means the
+selection is not on a match), and `EditorHandle.findNext()` /
+`EditorHandle.findPrevious()` walk the matches and wrap at the document edges.
+The query is applied through `useDeferredValue`, so fast typing may skip
+intermediate values on a slow device.
+
+```tsx
+const [query, setQuery] = useState('')
+const [status, setStatus] = useState({ total: 0, active: 0 })
+
+<input value={query} onChange={(event) => setQuery(event.target.value)} />
+<span>{status.active} / {status.total}</span>
+<MeowdownEditor
+  handleRef={editorRef}
+  searchQuery={query}
+  onSearchChange={setStatus}
+/>
+```
+
 ### Wiki-link hover cards
 
 Mount `WikilinkHoverCard` inside `MeowdownEditor` and render host-owned preview

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement, ReactNode, Ref } from "react";
-import { AcceptPendingReplacementOptions, ExitBoundaryHandler, FileClickHandler, FileInfoResolver, FileLinkResolver, FilePasteOptions, FileViewOptions, ImageClickHandler, ImageOptions, LinkClickHandler, LinkCopyHandler, ListMarker, MarkMode, PendingReplacement, PendingReplacementOutcome, PlaceholderOptions, StartPendingReplacementOptions, TagClickHandler, TypedEditor, WikiEmbedResolver, WikilinkClickHandler, WikilinkHoverHit } from "@meowdown/core";
+import { AcceptPendingReplacementOptions, ExitBoundaryHandler, FileClickHandler, FileInfoResolver, FileLinkResolver, FilePasteOptions, FileViewOptions, ImageClickHandler, ImageOptions, LinkClickHandler, LinkCopyHandler, ListMarker, MarkMode, PendingReplacement, PendingReplacementOutcome, PlaceholderOptions, SearchStatusHandler, StartPendingReplacementOptions, TagClickHandler, TypedEditor, WikiEmbedResolver, WikilinkClickHandler, WikilinkHoverHit } from "@meowdown/core";
 import { SelectionJSON, SelectionJSON as SelectionJSON$1 } from "@prosekit/core";
 import { useEditor, useExtension, useKeymap } from "@prosekit/react";
 //#region src/utils/date-format.d.ts
@@ -97,6 +97,10 @@ interface EditorHandle {
   acceptPendingReplacement: (options?: AcceptPendingReplacementOptions) => void;
   /** Clears the staged replacement without touching the document. */
   discardPendingReplacement: () => void;
+  /** Selects the next match of the current search query, wrapping at the document end. */
+  findNext: () => void;
+  /** Selects the previous match of the current search query, wrapping at the document start. */
+  findPrevious: () => void;
   /**
    * Escape hatch: the underlying ProseKit editor, or `undefined` when the
    * handle does not wrap one.
@@ -389,6 +393,18 @@ interface EditorProps {
    * behavior.
    */
   spellCheck?: boolean;
+  /**
+   * The search query. Every match is highlighted, and the first match at or
+   * after the caret is selected whenever the query changes. An empty string
+   * (the default) clears the highlights and leaves the selection alone. A match
+   * that the current mode hides reveals itself while it is the selected one.
+   */
+  searchQuery?: string;
+  /**
+   * Called when the number of matches or the selected match changes. Pass a
+   * stable function (e.g. from `useCallback`).
+   */
+  onSearchChange?: SearchStatusHandler;
   /**
    * Clock format the `/now` slash command inserts: '12' for "3:45pm" or '24'
    * for "15:45". Defaults to '12'.
@@ -409,7 +425,7 @@ interface EditorProps {
  *
  * Callbacks and resolvers should be stable; pass them via `useCallback`.
  */
-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): ReactElement;
+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, searchQuery, onSearchChange, timeFormat, editorClassName, wrapperClassName, handleRef, children }: EditorProps): ReactElement;
 //#endregion
 //#region src/components/markdown-view.d.ts
 /** Payload for {@link TaskClickHandler}. */

package/dist/index.js

@@ -1,6 +1,6 @@
 import { clsx } from "clsx/lite";
 import { Fragment, cloneElement, createElement, useCallback, useDeferredValue, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { buildFileMarkdown, codeBlockLanguages, collectReferenceDefinitions, defaultResolveImageUrl, defineBulletAfterHeading, defineCodeBlockPreviewPlugin, defineEditorExtension, defineEmbedPaste, defineExitBoundaryHandler, defineFileClickHandler, defineFilePaste, defineFileView, defineFollowLinkHandler, defineImage, defineImageClickHandler, defineLinkClickHandler, defineLinkEditKeymap, defineLinkHoverHandler, defineLinkPaste, definePendingReplacementHandler, definePlaceholder, defineReadonly, defineSpellCheckPlugin, defineSubstitution, defineTagClickHandler, defineViewAttributes, defineWikilinkClickHandler, defineWikilinkHoverHandler, defineWikilinkTrigger, docToMarkdown, formatFileSize, getCodeTokens, getFileKind, getMarkBuilders, getPendingReplacement, getSelectedText, getTableColumnAlign, getTextblockDisplayText, getVirtualElementFromRange, inlineTextToMarkChunksWithContext, isCodeBlockPreviewHiddenDecoration, isNodeOfType, isSelectionInTableCell, listenForTweetHeight, loadKaTeX, markdownToDoc, matchEmbed, renderMathInto } from "@meowdown/core";
+import { buildFileMarkdown, codeBlockLanguages, collectReferenceDefinitions, defaultResolveImageUrl, defineBulletAfterHeading, defineCodeBlockPreviewPlugin, defineEditorExtension, defineEmbedPaste, defineExitBoundaryHandler, defineFileClickHandler, defineFilePaste, defineFileView, defineFollowLinkHandler, defineImage, defineImageClickHandler, defineLinkClickHandler, defineLinkEditKeymap, defineLinkHoverHandler, defineLinkPaste, definePendingReplacementHandler, definePlaceholder, defineReadonly, defineSearchStatusHandler, defineSpellCheckPlugin, defineSubstitution, defineTagClickHandler, defineViewAttributes, defineWikilinkClickHandler, defineWikilinkHoverHandler, defineWikilinkTrigger, docToMarkdown, formatFileSize, getCodeTokens, getFileKind, getMarkBuilders, getPendingReplacement, getSearchStatus, getSelectedText, getTableColumnAlign, getTextblockDisplayText, getVirtualElementFromRange, inlineTextToMarkChunksWithContext, 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";
@@ -391,11 +391,24 @@ function DropIndicator$1() {
 
 //#endregion
 //#region src/components/editor-extensions.tsx
-function EditorExtensions({ markMode, onDocChange, onWikilinkClick, onLinkClick, onTagClick, onExitBoundary, resolveImageUrl, resolveFileInfo, onFileClick, onFilePaste, onFileSaveError, onImageClick, embedPaste, linkPaste, bulletAfterHeading, substitution, placeholder, readOnly, wikilinkEnabled, spellCheck, editorClassName }) {
+function EditorExtensions({ markMode, onDocChange, onWikilinkClick, onLinkClick, onTagClick, onExitBoundary, resolveImageUrl, resolveFileInfo, onFileClick, onFilePaste, onFileSaveError, onImageClick, embedPaste, linkPaste, bulletAfterHeading, substitution, placeholder, readOnly, wikilinkEnabled, spellCheck, searchQuery, onSearchChange, editorClassName }) {
 	const editor = useEditor$1();
-	useEffect(() => {
+	useLayoutEffect(() => {
 		editor.commands.setMarkMode(markMode);
 	}, [editor, markMode]);
+	useLayoutEffect(() => {
+		if (!editorClassName) return;
+		const extension = defineViewAttributes({ class: editorClassName });
+		return editor.use(extension);
+	}, [editor, editorClassName]);
+	const deferredSearchQuery = useDeferredValue(searchQuery);
+	useEffect(() => {
+		editor.commands.setSearchQuery({
+			search: deferredSearchQuery,
+			literal: true
+		});
+	}, [editor, deferredSearchQuery]);
+	useExtension$1(useMemo(() => onSearchChange ? defineSearchStatusHandler(onSearchChange) : null, [onSearchChange]));
 	useExtension$1(useMemo(() => {
 		return readOnly ? defineReadonly() : null;
 	}, [readOnly]));
@@ -469,9 +482,6 @@ function EditorExtensions({ markMode, onDocChange, onWikilinkClick, onLinkClick,
 	useExtension$1(useMemo(() => {
 		return spellCheck == null ? null : defineSpellCheckPlugin(spellCheck);
 	}, [spellCheck]));
-	useExtension$1(useMemo(() => {
-		return editorClassName ? defineViewAttributes({ class: editorClassName }) : null;
-	}, [editorClassName]));
 	return null;
 }
 
@@ -908,7 +918,7 @@ function SelectionMenu({ onSelectionMenuSearch, context, onOpen, onClose, afford
 	useExtension$1(useMemo(() => {
 		return defineUpdateHandler((view) => {
 			const { from, to, empty } = view.state.selection;
-			const anchorable = !empty && isTextSelection(view.state.selection) && !getPendingReplacement(view.state);
+			const anchorable = !empty && isTextSelection(view.state.selection) && !getPendingReplacement(view.state) && getSearchStatus(view.state).active === 0;
 			setSelection((previous) => {
 				if (previous?.from === from && previous?.to === to && previous?.anchorable === anchorable) return previous;
 				return {
@@ -1681,7 +1691,7 @@ function findHeadingPosition(doc, fragment) {
 	});
 	return match;
 }
-function ProseKitEditor({ markMode = "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, linkPaste, bulletAfterHeading, substitution = true, frontmatter = false, blockHandle = true, placeholder, readOnly, spellCheck, timeFormat, editorClassName, ref, children }) {
+function ProseKitEditor({ markMode = "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, linkPaste, bulletAfterHeading, substitution = true, frontmatter = false, blockHandle = true, placeholder, readOnly, spellCheck, searchQuery = "", onSearchChange, timeFormat, editorClassName, ref, children }) {
 	const [editor] = useState(() => {
 		const editor = createEditor({ extension: union(defineEditorExtension({
 			resolveFileLink,
@@ -1791,6 +1801,12 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onSl
 		function discardPendingReplacement() {
 			editor.commands.discardPendingReplacement();
 		}
+		function findNext() {
+			editor.commands.findNext();
+		}
+		function findPrevious() {
+			editor.commands.findPrev();
+		}
 		return {
 			getMarkdown,
 			setMarkdown,
@@ -1809,6 +1825,8 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onSl
 			appendPendingReplacementText,
 			acceptPendingReplacement,
 			discardPendingReplacement,
+			findNext,
+			findPrevious,
 			editor
 		};
 	}, [
@@ -1849,6 +1867,8 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onSl
 				readOnly,
 				wikilinkEnabled: !!onWikilinkSearch,
 				spellCheck,
+				searchQuery,
+				onSearchChange,
 				editorClassName
 			}),
 			blockHandle && !readOnly && /* @__PURE__ */ jsx(BlockHandle, {}),
@@ -1891,7 +1911,7 @@ const CARET_GLIDE_OFF = { "--meowdown-caret-glide": "0ms" };
 *
 * Callbacks and resolvers should be stable; pass them via `useCallback`.
 */
-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 }) {
+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, searchQuery, onSearchChange, timeFormat, editorClassName, wrapperClassName, handleRef, children }) {
 	const childRef = useRef(null);
 	useImperativeHandle(handleRef, () => {
 		function getMarkdown() {
@@ -1953,6 +1973,12 @@ function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onSlashM
 		function discardPendingReplacement() {
 			childRef.current?.discardPendingReplacement();
 		}
+		function findNext() {
+			childRef.current?.findNext();
+		}
+		function findPrevious() {
+			childRef.current?.findPrevious();
+		}
 		return {
 			getMarkdown,
 			setMarkdown,
@@ -1971,6 +1997,8 @@ function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onSlashM
 			appendPendingReplacementText,
 			acceptPendingReplacement,
 			discardPendingReplacement,
+			findNext,
+			findPrevious,
 			get editor() {
 				return childRef.current?.editor;
 			}
@@ -2013,6 +2041,8 @@ function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onSlashM
 			placeholder,
 			readOnly,
 			spellCheck,
+			searchQuery,
+			onSearchChange,
 			timeFormat,
 			editorClassName,
 			children
@@ -2478,48 +2508,54 @@ function renderInline(node, context) {
 		marks: Mark.setFrom(marks)
 	})), 0, context);
 }
+/** A collapsed list renders as an expanded one */
+function expandCollapsedList(node) {
+	const attrs = node.attrs;
+	if (!attrs.collapsed) return node;
+	return node.type.create({
+		...attrs,
+		collapsed: false
+	}, node.content, node.marks);
+}
+function createTaskClickHandler(node, context) {
+	const attrs = node.attrs;
+	const { onTaskClick } = context;
+	if (attrs.kind !== "task" || !onTaskClick) return void 0;
+	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] ?? "" : "";
+	return (event) => {
+		event.preventDefault();
+		onTaskClick({
+			index,
+			checked,
+			marker,
+			text,
+			event: event.nativeEvent
+		});
+	};
+}
+function renderCodeBlock(node, key) {
+	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
+	}, key);
+}
 function renderBlock(node, context) {
 	if (context.referenceDefinitionNodes.has(node)) return null;
 	const key = context.keyCounter.value++;
 	const typeName = node.type.name;
 	let handleTaskClick;
 	if (typeName === "list") {
-		let attrs = node.attrs;
-		if (context.expandCollapsed && attrs.collapsed) {
-			attrs = {
-				...attrs,
-				collapsed: false
-			};
-			node = node.type.create(attrs, node.content, node.marks);
-		}
-		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);
-		if (language === "mermaid") return /* @__PURE__ */ jsx(MermaidCodeBlock, { code: node.textContent }, key);
-		return /* @__PURE__ */ jsx(CodeBlock, {
-			code: node.textContent,
-			language
-		}, key);
+		if (context.expandCollapsed) node = expandCollapsedList(node);
+		handleTaskClick = createTaskClickHandler(node, context);
 	}
+	if (typeName === "codeBlock") return renderCodeBlock(node, key);
 	const toDOM = node.type.spec.toDOM;
 	if (node.isTextblock) {
 		const inline = renderInline(node, context);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meowdown/react",
   "type": "module",
-  "version": "0.58.3",
+  "version": "0.59.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -25,13 +25,13 @@
     "@ocavue/utils": "^1.7.0",
     "@prosekit/core": "^0.13.0-beta.7",
     "@prosekit/pm": "^0.1.19-beta.4",
-    "@prosekit/react": "^0.8.0-beta.23",
+    "@prosekit/react": "^0.8.0-beta.24",
     "beautiful-mermaid": "^1.1.3",
     "clsx": "^2.1.1",
     "github-slugger": "^2.0.0",
-    "lucide-react": "^1.24.0",
+    "lucide-react": "^1.27.0",
     "react-property": "^2.0.2",
-    "@meowdown/core": "0.58.3"
+    "@meowdown/core": "0.59.1"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -48,14 +48,14 @@
   "devDependencies": {
     "@css-modules-kit/codegen": "^1.4.0",
     "@ocavue/tsconfig": "^0.7.1",
-    "@tsdown/css": "^0.22.8",
+    "@tsdown/css": "^0.22.14",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@vitest/browser-playwright": "^4.1.10",
     "dedent": "^1.7.2",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
-    "tsdown": "^0.22.8",
+    "tsdown": "^0.22.14",
     "vitest": "^4.1.10",
     "vitest-browser-commands": "^0.2.1",
     "vitest-browser-react": "^2.2.0",