@meowdown/react 0.63.1 → 0.64.0

package/README.md

@@ -27,9 +27,6 @@ export function App() {
 ## Usage
 
 ```tsx
-import '@meowdown/core/style.css'
-import '@meowdown/react/style.css'
-
 import { MeowdownEditor, type EditorHandle } from '@meowdown/react'
 import { useRef, useCallback } from 'react'
 
@@ -50,125 +47,27 @@ export function App() {
 }
 ```
 
-## API
-
-See the full API reference [here](https://npmx.dev/package-docs/@meowdown%2Freact/).
-
-Slash menu host items can include `keywords` to match hidden terms without changing the displayed label.
-
-The caret glides between positions by default; pass `caretGlide={false}` to move it instantly (hosts can also tune the duration via the `--meowdown-caret-glide` CSS variable).
-
-`MarkdownView` folds collapsed (`+`) bullets like the editor; pass `expandCollapsed` to render them expanded at every depth, for views that show slices of a note (e.g. a backlinks panel) where the source's fold state must not hide the content the view exists to show.
-
-Both `MeowdownEditor` and `MarkdownView` resolve CommonMark full, collapsed,
-and shortcut reference links and images. The editor keeps reference definitions
-visible as editable source and preserves them through `getMarkdown()`.
-`MarkdownView` uses the same first-definition-wins resolution but omits
-definition paragraphs from its rendered output. Reference links are read-only
-in the editor's link menu; edit their definition source to change the target.
-
-### Wiki embeds
-
-Obsidian-style wiki embeds (`![[path]]`, with optional `|width` or
-`|widthxheight`) stay literal and editable unless the host classifies them.
-`resolveWikiEmbed` is a pure, creation-time resolver: return an image, file, or
-note result to reuse the corresponding Meowdown atom and its existing click
-hook; return `undefined` for missing or ambiguous targets.
-
-```tsx
-<MeowdownEditor
-  initialMarkdown="![[assets/photo.png|320]]"
-  resolveWikiEmbed={({ target }) => (target.endsWith('.png') ? { kind: 'image' } : undefined)}
-  resolveImageUrl={resolveLocalImageUrl}
-  onImageClick={openLightbox}
-/>
-```
-
-Use `EditorHandle.revealHeading('#Section%20name')` to move the selection to a
-matching heading and scroll it into view after following a heading link.
+## Components
 
-Both `MeowdownEditor` and the read-only `MarkdownView` accept
-`resolveFileLink`. Return `true` to render a standard `[label](path)` Markdown
-link with the same file pill, metadata resolver, and click hook used by wiki
-file embeds; return `false` to keep it as a normal link.
-
-```tsx
-<MarkdownView
-  markdown="[Quarterly report](docs/report.pdf)"
-  resolveFileLink={({ href }) => href.startsWith('docs/')}
-  resolveFileInfo={resolveLocalFileInfo}
-  onFileClick={openLocalFile}
-/>
-```
-
-### 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
-content from the hovered wiki link's `target`. Returning `null` renders no
-card. The render function may also return a promise: the card stays closed
-until it resolves, resolving to `null` (or rejecting) renders no card, and a
-result that lands after the pointer moved on is discarded, so a host can look
-up local content without ever flashing an empty card.
-
-```tsx
-<MeowdownEditor initialMarkdown="See [[Project plan]]">
-  <WikilinkHoverCard>
-    {async (hit) => {
-      const note = await readLocalNote(hit.target)
-      return note == null ? null : <LocalNotePreview note={note} />
-    }}
-  </WikilinkHoverCard>
-</MeowdownEditor>
-```
-
-For local-only passive preview content, render Markdown with interaction
-disabled: the tree contains no anchors or focusable controls, and recognized
-tweet and YouTube embeds are omitted before any image resolver runs. Supply a
-resolver that accepts only trusted local image sources.
-
-```tsx
-<MarkdownView markdown={markdown} interactive={false} resolveImageUrl={resolveLocalImageUrl} />
-```
+| Component           | Description                                                                                                                |
+| ------------------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `MeowdownEditor`    | The editor. Callbacks and resolvers must be stable; pass them via `useCallback`.                                           |
+| `MarkdownView`      | Read-only Markdown renderer. `interactive={false}` renders passive content for previews.                                   |
+| `WikilinkHoverCard` | Mount inside `MeowdownEditor`; renders host content for the hovered wiki link's `target`. Return `null` to render no card. |
 
-### Mermaid code blocks
+Common `MeowdownEditor` props:
 
-Fenced `mermaid` code blocks render as diagrams in both `MeowdownEditor` and
-`MarkdownView`. The editor shows only the preview while the caret is outside
-the block, then shows source and a live preview while editing it.
+| Prop                                                                                                          | What it does                                                                       |
+| ------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
+| `mode`                                                                                                        | `'focus'` (default), `'show'`, or `'hide'`: how much Markdown syntax stays in view |
+| `searchQuery` / `onSearchChange`                                                                              | Find in document, with `EditorHandle.findNext()` / `findPrevious()`                |
+| `onWikilinkClick` / `onLinkClick` / `onTagClick` / `onImageClick` / `onFileClick`                             | Click handling for the rendered atoms                                              |
+| `resolveImageUrl` / `resolveWikiEmbed` / `resolveFileLink` / `resolveFileInfo`                                | Resolve and classify local content                                                 |
+| `onFilePaste`                                                                                                 | Persist pasted or dropped files                                                    |
+| `onSlashMenuSearch` / `onTagSearch` / `onWikilinkSearch` / `onSelectionMenuSearch`                            | Search menus for `/`, `#`, `[[`, and selection commands                            |
+| `readOnly` / `placeholder` / `blockHandle` / `caretGlide` / `embedPaste` / `linkPaste` / `bulletAfterHeading` | Behavior toggles                                                                   |
 
-Rendering uses `beautiful-mermaid`, which currently supports Flowchart, State,
-Sequence, Class, ER, and XY Chart diagrams. Unsupported syntax renders an error
-instead of an empty preview. Override `--meowdown-mermaid-bg`,
-`--meowdown-mermaid-fg`, `--meowdown-mermaid-line`,
-`--meowdown-mermaid-accent`, `--meowdown-mermaid-muted`,
-`--meowdown-mermaid-surface`, `--meowdown-mermaid-border`, or
-`--meowdown-mermaid-error` to customize the diagram palette.
+Every prop, callback, and `EditorHandle` method is documented in the [API reference](https://npmx.dev/package-docs/@meowdown%2Freact/).
 
 ## Styling
 

package/dist/index.js

@@ -658,17 +658,19 @@ function LinkMenu({ onLinkClick, onLinkCopy }) {
 	const [overPopup, setOverPopup] = useState(false);
 	const [edit, setEdit] = useState();
 	const hoverOpen = useDelayedFlag(onLink || overPopup);
-	useExtension$1(useMemo(() => {
+	const linkHoverExtension = useMemo(() => {
 		return defineLinkHoverHandler((hit) => {
 			setOnLink(!!hit);
 			if (hit) setHover(hit.payload);
 		});
-	}, []));
-	useExtension$1(useMemo(() => {
+	}, []);
+	useExtension$1(linkHoverExtension);
+	const linkEditExtension = useMemo(() => {
 		return defineLinkEditKeymap((options) => {
 			setEdit(options);
 		});
-	}, []));
+	}, []);
+	useExtension$1(linkEditExtension);
 	const closeHover = useCallback(() => {
 		setOnLink(false);
 		setOverPopup(false);
@@ -1689,11 +1691,13 @@ function findHeadingPosition(doc, fragment) {
 }
 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({
+		const baseExtension = defineEditorExtension({
 			resolveFileLink,
 			resolveWikiEmbed,
 			markMode
-		}), defineCodeBlockView()) });
+		});
+		const extension = union(baseExtension, defineCodeBlockView());
+		const editor = createEditor({ extension });
 		if (initialMarkdown) editor.setContent(markdownToDoc(initialMarkdown, {
 			nodes: editor.nodes,
 			frontmatter
@@ -2082,9 +2086,7 @@ function attributesToProps(attributes = {}, nodeName) {
 				case BOOLEAN:
 					props[propName] = true;
 					break;
-				case OVERLOADED_BOOLEAN:
-					if (attributeValue === "") props[propName] = true;
-					break;
+				case OVERLOADED_BOOLEAN: if (attributeValue === "") props[propName] = true;
 			}
 			continue;
 		}
@@ -2147,7 +2149,8 @@ function outputSpecToReact(spec, content, context) {
 			reactProps.tabIndex = -1;
 		}
 	}
-	return createElement(tag, reactProps, ...rest.map((child) => outputSpecToReact(child, content, context)));
+	const reactChildren = rest.map((child) => outputSpecToReact(child, content, context));
+	return createElement(tag, reactProps, ...reactChildren);
 }
 function WikilinkChip(props) {
 	const { target, display, onWikilinkClick, children } = props;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meowdown/react",
   "type": "module",
-  "version": "0.63.1",
+  "version": "0.64.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -29,9 +29,9 @@
     "beautiful-mermaid": "^1.1.3",
     "clsx": "^2.1.1",
     "github-slugger": "^2.0.0",
-    "lucide-react": "^1.27.0",
+    "lucide-react": "^1.28.0",
     "react-property": "^2.0.2",
-    "@meowdown/core": "0.63.1"
+    "@meowdown/core": "0.64.0"
   },
   "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.14",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
+    "@tsdown/css": "^0.23.0-beta.2",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
     "@vitest/browser-playwright": "^4.1.10",
     "dedent": "^1.7.2",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
-    "tsdown": "^0.22.14",
+    "tsdown": "^0.23.0-beta.2",
     "vitest": "^4.1.10",
     "vitest-browser-commands": "^0.2.1",
     "vitest-browser-react": "^2.2.0",