@meowdown/react 0.58.2 → 0.59.0

package/README.md

@@ -101,6 +101,31 @@ 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. 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, 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,16 @@ 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 }) {
+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(() => {
 		editor.commands.setMarkMode(markMode);
 	}, [editor, markMode]);
+	const deferredSearchQuery = useDeferredValue(searchQuery);
+	useEffect(() => {
+		editor.commands.setSearchQuery(deferredSearchQuery);
+	}, [editor, deferredSearchQuery]);
+	useExtension$1(useMemo(() => onSearchChange ? defineSearchStatusHandler(onSearchChange) : null, [onSearchChange]));
 	useExtension$1(useMemo(() => {
 		return readOnly ? defineReadonly() : null;
 	}, [readOnly]));
@@ -469,6 +474,9 @@ 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;
 }
 
@@ -905,7 +913,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 {
@@ -1678,7 +1686,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,
@@ -1788,6 +1796,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,
@@ -1806,6 +1820,8 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onSl
 			appendPendingReplacementText,
 			acceptPendingReplacement,
 			discardPendingReplacement,
+			findNext,
+			findPrevious,
 			editor
 		};
 	}, [
@@ -1824,10 +1840,7 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onSl
 	return /* @__PURE__ */ jsxs(ProseKit, {
 		editor,
 		children: [
-			/* @__PURE__ */ jsx("div", {
-				ref: editor.mount,
-				className: clsx("meowdown-content", editorClassName)
-			}),
+			/* @__PURE__ */ jsx("div", { ref: editor.mount }),
 			/* @__PURE__ */ jsx(EditorExtensions, {
 				markMode,
 				onDocChange: handleDocChange,
@@ -1848,7 +1861,10 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onSl
 				placeholder,
 				readOnly,
 				wikilinkEnabled: !!onWikilinkSearch,
-				spellCheck
+				spellCheck,
+				searchQuery,
+				onSearchChange,
+				editorClassName
 			}),
 			blockHandle && !readOnly && /* @__PURE__ */ jsx(BlockHandle, {}),
 			!readOnly && /* @__PURE__ */ jsx(TableHandle, {}),
@@ -1890,7 +1906,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() {
@@ -1952,6 +1968,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,
@@ -1970,6 +1992,8 @@ function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onSlashM
 			appendPendingReplacementText,
 			acceptPendingReplacement,
 			discardPendingReplacement,
+			findNext,
+			findPrevious,
 			get editor() {
 				return childRef.current?.editor;
 			}
@@ -2012,6 +2036,8 @@ function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onSlashM
 			placeholder,
 			readOnly,
 			spellCheck,
+			searchQuery,
+			onSearchChange,
 			timeFormat,
 			editorClassName,
 			children
@@ -2477,48 +2503,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.2",
+  "version": "0.59.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -31,7 +31,7 @@
     "github-slugger": "^2.0.0",
     "lucide-react": "^1.24.0",
     "react-property": "^2.0.2",
-    "@meowdown/core": "0.58.2"
+    "@meowdown/core": "0.59.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",