@meowdown/react 0.68.3 → 0.69.0

package/README.md

@@ -66,6 +66,7 @@ Common `MeowdownEditor` props:
 | `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                                                                   |
+| `CodeBlockView`                                                                                               | Custom React node view component for code blocks                                   |
 
 Every prop, callback, and `EditorHandle` method is documented in the [API reference](https://npmx.dev/package-docs/@meowdown%2Freact/).
 

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { ReactElement, ReactNode, Ref } from "react";
 import { AcceptPendingReplacementOptions, ExitBoundaryHandler, FileClickHandler, FileInfoResolver, FileLinkResolver, FilePasteOptions, FileViewOptions, ImageClickHandler, ImageOptions, LinkClickHandler, LinkCopyHandler, LinkPreview, LinkPreviewResolver, LinkPreviewResolver as LinkPreviewResolver$1, ListMarker, MarkMode, PendingReplacement, PendingReplacementOutcome, PlaceholderOptions, SearchStatusHandler, StartPendingReplacementOptions, TagClickHandler, TypedEditor, WikiEmbedResolver, WikilinkClickHandler, WikilinkHoverHit, WikilinkResolver } from "@meowdown/core";
 import { SelectionJSON, SelectionJSON as SelectionJSON$1 } from "@prosekit/core";
-import { useEditor, useExtension, useKeymap } from "@prosekit/react";
+import { ReactNodeViewComponent, ReactNodeViewComponent as ReactNodeViewComponent$1, useEditor, useExtension, useKeymap } from "@prosekit/react";
 //#region src/utils/date-format.d.ts
 type TimeFormat = '12' | '24';
 //#endregion
@@ -509,6 +509,11 @@ interface EditorProps {
    * Class on the outer `.meowdown` wrapper div.
    */
   wrapperClassName?: string;
+  /**
+   * React component that renders code blocks in place of the built-in one.
+   * `false` disables the React code block view.
+   */
+  CodeBlockView?: ReactNodeViewComponent$1 | false | undefined;
   /**
    * Imperative handle for the editor.
    */
@@ -524,7 +529,7 @@ interface EditorProps {
  *
  * Callbacks and resolvers should be stable; pass them via `useCallback`.
  */
-export declare function MeowdownEditor({ mode, initialMarkdown, onDocChange, onSlashMenuSearch, onTagSearch, onWikilinkSearch, onSelectionMenuSearch, selectionMenuAffordance, pendingReplacementActions, onPendingReplacementResolve, onWikilinkClick, onLinkClick, onLinkCopy, resolveLinkPreview, onTagClick, onExitBoundary, resolveImageUrl, resolveFileLink, resolveWikiEmbed, resolveWikilink, resolveFileInfo, onFileClick, onFilePaste, onFileSaveError, onImageClick, embedPaste, linkPaste, bulletAfterHeading, substitution, frontmatter, blockHandle, caretGlide, placeholder, readOnly, spellCheck, searchQuery, onSearchChange, timeFormat, editorClassName, wrapperClassName, handleRef, children }: EditorProps): ReactElement;
+export declare function MeowdownEditor({ mode, initialMarkdown, onDocChange, onSlashMenuSearch, onTagSearch, onWikilinkSearch, onSelectionMenuSearch, selectionMenuAffordance, pendingReplacementActions, onPendingReplacementResolve, onWikilinkClick, onLinkClick, onLinkCopy, resolveLinkPreview, onTagClick, onExitBoundary, resolveImageUrl, resolveFileLink, resolveWikiEmbed, resolveWikilink, resolveFileInfo, onFileClick, onFilePaste, onFileSaveError, onImageClick, embedPaste, linkPaste, bulletAfterHeading, substitution, frontmatter, blockHandle, caretGlide, placeholder, readOnly, spellCheck, searchQuery, onSearchChange, timeFormat, editorClassName, wrapperClassName, CodeBlockView, handleRef, children }: EditorProps): ReactElement;
 //#endregion
 //#region src/components/markdown-view.d.ts
 /**
@@ -675,4 +680,4 @@ interface WikilinkHoverCardProps {
  */
 export declare function WikilinkHoverCard({ children, className }: WikilinkHoverCardProps): ReactNode;
 //#endregion
-export { type EditorHandle, type EditorMode, type EditorProps, type EditorStateSnapshot, type LinkPreview, type LinkPreviewResolver, type MarkdownViewProps, 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 WikilinkHoverCardProps, type WikilinkItem, type WikilinkSearchHandler, useEditor, useExtension, useKeymap };
+export { type EditorHandle, type EditorMode, type EditorProps, type EditorStateSnapshot, type LinkPreview, type LinkPreviewResolver, type MarkdownViewProps, type PendingReplacementResolveHandler, type ReactNodeViewComponent, 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 WikilinkHoverCardProps, type WikilinkItem, type WikilinkSearchHandler, useEditor, useExtension, useKeymap };

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, defineSearchStatusHandler, defineSubstitution, defineTagClickHandler, defineViewAttributes, defineVirtualCaret, defineWikilinkClickHandler, defineWikilinkHoverHandler, defineWikilinkTrigger, docToMarkdown, formatFileSize, getCodeTokens, getFileKind, getLinkText, getMarkBuilders, getPendingReplacement, getSearchStatus, getSelectedText, getTableColumnAlign, getTextblockDisplayText, getVirtualElementFromRange, inlineTextToMarkChunksWithContext, isCodeBlockPreviewHiddenDecoration, isLinkTextForHref, isModEvent, isNodeOfType, isSelectionInTableCell, listenForTweetHeight, loadKaTeX, markdownToDoc, matchEmbed, normalizeHref, renderMathInto } from "@meowdown/core";
+import { Fragment, cloneElement, createElement, memo, 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, defineSearchStatusHandler, defineSubstitution, defineTagClickHandler, defineViewAttributes, defineVirtualCaret, defineWikilinkClickHandler, defineWikilinkHoverHandler, defineWikilinkTrigger, docToMarkdown, formatFileSize, getCodeTokens, getFileKind, getLinkText, getMarkBuilders, getPendingReplacement, getSearchStatus, getSelectedText, getTableColumnAlign, getTextblockDisplayText, getVirtualElementFromRange, inlineTextToMarkChunksWithContext, isCodeBlockPreviewHiddenDecoration, isLinkTextForHref, isModEvent, isNodeOfType, isReferenceDefinitionNode, isSelectionInTableCell, listenForTweetHeight, loadKaTeX, markdownToDoc, matchEmbed, normalizeHref, 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";
@@ -353,11 +353,11 @@ function CodeBlockToolbar({ code, language, setLanguage }) {
 
 //#endregion
 //#region src/extensions/code-block-view.ts
-function defineCodeBlockView() {
+function defineCodeBlockView(component = CodeBlockView) {
 	return union(defineReactNodeView({
 		name: "codeBlock",
 		contentAs: "code",
-		component: CodeBlockView
+		component
 	}), defineCodeBlockPreviewPlugin());
 }
 
@@ -1925,7 +1925,7 @@ function findHeadingPosition(doc, fragment) {
 	});
 	return match;
 }
-function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onSlashMenuSearch, onTagSearch, onWikilinkSearch, onSelectionMenuSearch, selectionMenuAffordance = true, pendingReplacementActions, onPendingReplacementResolve, onWikilinkClick, onLinkClick, onLinkCopy, resolveLinkPreview, onTagClick, onExitBoundary, resolveImageUrl, resolveFileLink, resolveWikiEmbed, resolveWikilink, resolveFileInfo, onFileClick, onFilePaste, onFileSaveError, onImageClick, embedPaste, linkPaste, bulletAfterHeading, substitution = true, frontmatter = false, blockHandle = true, placeholder, readOnly, spellCheck, searchQuery = "", onSearchChange, timeFormat, editorClassName, ref, children }) {
+function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onSlashMenuSearch, onTagSearch, onWikilinkSearch, onSelectionMenuSearch, selectionMenuAffordance = true, pendingReplacementActions, onPendingReplacementResolve, onWikilinkClick, onLinkClick, onLinkCopy, resolveLinkPreview, onTagClick, onExitBoundary, resolveImageUrl, resolveFileLink, resolveWikiEmbed, resolveWikilink, resolveFileInfo, onFileClick, onFilePaste, onFileSaveError, onImageClick, embedPaste, linkPaste, bulletAfterHeading, substitution = true, frontmatter = false, blockHandle = true, placeholder, readOnly, spellCheck, searchQuery = "", onSearchChange, timeFormat, editorClassName, CodeBlockView, ref, children }) {
 	const [editor] = useState(() => {
 		const baseExtension = defineEditorExtension({
 			resolveFileLink,
@@ -1933,7 +1933,7 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onSl
 			resolveWikilink,
 			markMode
 		});
-		const extension = union(baseExtension, defineCodeBlockView());
+		const extension = CodeBlockView === false ? baseExtension : union(baseExtension, defineCodeBlockView(CodeBlockView));
 		const editor = createEditor({ extension });
 		if (initialMarkdown) editor.setContent(markdownToDoc(initialMarkdown, {
 			nodes: editor.nodes,
@@ -2150,7 +2150,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, resolveLinkPreview, onTagClick, onExitBoundary, resolveImageUrl, resolveFileLink, resolveWikiEmbed, resolveWikilink, 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 }) {
+function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onSlashMenuSearch, onTagSearch, onWikilinkSearch, onSelectionMenuSearch, selectionMenuAffordance = true, pendingReplacementActions, onPendingReplacementResolve, onWikilinkClick, onLinkClick, onLinkCopy, resolveLinkPreview, onTagClick, onExitBoundary, resolveImageUrl, resolveFileLink, resolveWikiEmbed, resolveWikilink, 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, CodeBlockView, handleRef, children }) {
 	const childRef = useRef(null);
 	useImperativeHandle(handleRef, () => {
 		function getMarkdown() {
@@ -2286,6 +2286,7 @@ function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onSlashM
 			onSearchChange,
 			timeFormat,
 			editorClassName,
+			CodeBlockView,
 			children
 		})
 	});
@@ -2766,10 +2767,7 @@ function renderInline(node, context) {
 		resolveFileLink: context.resolveFileLink,
 		resolveWikiEmbed: context.resolveWikiEmbed,
 		resolveWikilink: context.resolveWikilink
-	}, {
-		referenceDefinitions: context.referenceDefinitions,
-		isReferenceDefinition: context.referenceDefinitionNodes.has(node)
-	}).map(([from, to, marks]) => ({
+	}, { referenceDefinitions: context.referenceDefinitions }).map(([from, to, marks]) => ({
 		text: text.slice(from, to),
 		marks: Mark.setFrom(marks)
 	})), 0, context);
@@ -2814,8 +2812,8 @@ function renderCodeBlock(node, key) {
 		language
 	}, key);
 }
-function renderBlock(node, context) {
-	if (context.referenceDefinitionNodes.has(node)) return null;
+function renderBlock(node, context, parent, index) {
+	if (isReferenceDefinitionNode(node, parent, index)) return null;
 	const key = context.keyCounter.value++;
 	const typeName = node.type.name;
 	let handleTaskClick;
@@ -2829,11 +2827,64 @@ function renderBlock(node, context) {
 		const inline = renderInline(node, context);
 		return toDOM ? outputSpecToReact(toDOM(node), inline, context) : /* @__PURE__ */ jsx(Fragment, { children: inline }, key);
 	}
-	const children = node.content.content.map((child) => renderBlock(child, context));
+	const children = node.content.content.map((child, childIndex) => {
+		return renderBlock(child, context, node, childIndex);
+	});
 	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;
 }
+function isTaskList(node) {
+	return isNodeOfType(node, "list") && node.attrs.kind === "task";
+}
+/**
+* Checkboxes a block renders, in the same pre-order `renderBlock` walks, so a
+* block's first checkbox index is the sum over the blocks before it.
+*/
+function countTaskItems(node) {
+	let count = isTaskList(node) ? 1 : 0;
+	node.descendants((child) => {
+		if (isTaskList(child)) count++;
+		return true;
+	});
+	return count;
+}
+/**
+* The effective definitions as one string, so blocks can compare them by
+* content: `collectReferenceDefinitions` builds a new map on every parse.
+*/
+function definitionsSignature(definitions) {
+	let signature = "";
+	for (const { key, href, title } of definitions.values()) signature += `${key}\0${href}\0${title}\n`;
+	return signature;
+}
+function splitBlocks(doc) {
+	const blocks = [];
+	let taskBase = 0;
+	for (const node of doc.content.content) {
+		blocks.push({
+			node,
+			taskBase
+		});
+		taskBase += countTaskItems(node);
+	}
+	return blocks;
+}
+/**
+* One top-level block. Memoized on the block's own content (`Node.eq`), its
+* first checkbox index, the shared props object, and the definitions'
+* content, so a growing document re-renders only the block that changed.
+*/
+const MarkdownBlock = memo(function MarkdownBlock({ node, taskBase, context, referenceDefinitions }) {
+	return renderBlock(node, {
+		...context,
+		referenceDefinitions,
+		taskCounter: { value: taskBase },
+		keyCounter: { value: 0 }
+	}, null, 0);
+}, (previous, next) => {
+	return previous.taskBase === next.taskBase && previous.context === next.context && previous.definitionsKey === next.definitionsKey && (previous.node === next.node || previous.node.eq(next.node));
+});
 /**
 * Render Markdown to a read-only React tree that looks exactly like the editor
 * in `hide` mark mode: inline marks, wikilink chips, images, tweet/YouTube
@@ -2846,31 +2897,20 @@ function renderBlock(node, context) {
 * `useCallback` to avoid re-rendering the whole tree.
 */
 function MarkdownView({ markdown, markMode = "hide", frontmatter = false, interactive = true, expandCollapsed = false, resolveImageUrl, resolveFileLink, resolveWikiEmbed, resolveWikilink, resolveFileInfo, onWikilinkClick, onLinkClick, onImageClick, onFileClick, onTaskClick, className }) {
-	const content = useMemo(() => {
-		const doc = markdownToDoc(markdown, { frontmatter });
-		const referenceIndex = collectReferenceDefinitions(doc);
-		const context = {
-			interactive,
-			expandCollapsed,
-			resolveImageUrl,
-			resolveFileLink,
-			resolveWikiEmbed,
-			resolveWikilink,
-			resolveFileInfo,
-			onWikilinkClick: interactive ? onWikilinkClick : void 0,
-			onLinkClick: interactive ? onLinkClick : void 0,
-			onImageClick: interactive ? onImageClick : void 0,
-			onFileClick: interactive ? onFileClick : void 0,
-			onTaskClick: interactive ? onTaskClick : void 0,
-			referenceDefinitions: referenceIndex.definitions,
-			referenceDefinitionNodes: referenceIndex.nodes,
-			taskCounter: { value: 0 },
-			keyCounter: { value: 0 }
-		};
-		return doc.content.content.map((node) => renderBlock(node, context));
-	}, [
-		markdown,
-		frontmatter,
+	const context = useMemo(() => ({
+		interactive,
+		expandCollapsed,
+		resolveImageUrl,
+		resolveFileLink,
+		resolveWikiEmbed,
+		resolveWikilink,
+		resolveFileInfo,
+		onWikilinkClick: interactive ? onWikilinkClick : void 0,
+		onLinkClick: interactive ? onLinkClick : void 0,
+		onImageClick: interactive ? onImageClick : void 0,
+		onFileClick: interactive ? onFileClick : void 0,
+		onTaskClick: interactive ? onTaskClick : void 0
+	}), [
 		interactive,
 		expandCollapsed,
 		resolveImageUrl,
@@ -2884,10 +2924,25 @@ function MarkdownView({ markdown, markMode = "hide", frontmatter = false, intera
 		onFileClick,
 		onTaskClick
 	]);
+	const { blocks, referenceDefinitions, definitionsKey } = useMemo(() => {
+		const doc = markdownToDoc(markdown, { frontmatter });
+		const referenceDefinitions = collectReferenceDefinitions(doc).definitions;
+		return {
+			blocks: splitBlocks(doc),
+			referenceDefinitions,
+			definitionsKey: definitionsSignature(referenceDefinitions)
+		};
+	}, [markdown, frontmatter]);
 	return /* @__PURE__ */ jsx("div", {
 		className: clsx("ProseMirror", "meowdown-content", className),
 		"data-mark-mode": markMode,
-		children: content
+		children: blocks.map(({ node, taskBase }, index) => /* @__PURE__ */ jsx(MarkdownBlock, {
+			node,
+			taskBase,
+			context,
+			referenceDefinitions,
+			definitionsKey
+		}, index))
 	});
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meowdown/react",
   "type": "module",
-  "version": "0.68.3",
+  "version": "0.69.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -31,7 +31,7 @@
     "github-slugger": "^2.0.0",
     "lucide-react": "^1.38.0",
     "react-property": "^2.0.2",
-    "@meowdown/core": "0.68.3"
+    "@meowdown/core": "0.69.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -49,12 +49,12 @@
     "@css-modules-kit/codegen": "^1.4.0",
     "@ocavue/tsconfig": "^0.7.1",
     "@tsdown/css": "^0.23.0-rc.1",
-    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.5",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
     "@vitest/browser-playwright": "^5.0.0",
     "dedent": "^1.7.2",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
     "tsdown": "^0.23.0-rc.1",
     "vitest": "^5.0.0",
     "vitest-browser-commands": "^0.4.1",