@meowdown/react 0.68.3 → 0.70.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 { 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, XPostResolver, XPostResolver as XPostResolver$1, YouTubeVideoResolver, YouTubeVideoResolver as YouTubeVideoResolver$1 } 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
@@ -408,6 +408,20 @@ interface EditorProps {
    * (e.g. from `useCallback`).
    */
   resolveFileInfo?: FileViewOptions['resolveFileInfo'];
+  /**
+   * Resolves the data behind an X post URL, directly or as a promise; the post
+   * renders as a `post-embed-x-post` card. Defaults to `defaultResolveXPost`,
+   * which fetches through react-tweet's hosted proxy. Pass a stable function
+   * (e.g. from `useCallback`).
+   */
+  resolveXPost?: XPostResolver$1;
+  /**
+   * Resolves the data behind a YouTube video URL, directly or as a promise;
+   * the video renders as a `post-embed-youtube-video` card. Defaults to
+   * `defaultResolveYouTubeVideo`, which reads YouTube's oEmbed endpoint. Pass
+   * a stable function (e.g. from `useCallback`).
+   */
+  resolveYouTubeVideo?: YouTubeVideoResolver$1;
   /**
    * Called when the user clicks a rendered file pill (or presses `Mod-Enter`
    * with the caret on one), with its `href`, `name`, and the originating
@@ -509,6 +523,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 +543,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, resolveXPost, resolveYouTubeVideo, 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
 /**
@@ -613,6 +632,16 @@ interface MarkdownViewProps {
    * Resolve metadata shown on a file pill.
    */
   resolveFileInfo?: FileInfoResolver;
+  /**
+   * Resolve the data behind an X post URL, rendered as a `post-embed-x-post`
+   * card. Defaults to `defaultResolveXPost`.
+   */
+  resolveXPost?: XPostResolver$1;
+  /**
+   * Resolve the data behind a YouTube video URL, rendered as a
+   * `post-embed-youtube-video` card. Defaults to `defaultResolveYouTubeVideo`.
+   */
+  resolveYouTubeVideo?: YouTubeVideoResolver$1;
   /**
    * Called when a rendered wikilink is clicked. Pass a stable function.
    */
@@ -649,7 +678,7 @@ interface MarkdownViewProps {
  * Callbacks (`onWikilinkClick`, etc.) and resolvers should be stable; pass them via
  * `useCallback` to avoid re-rendering the whole tree.
  */
-export declare function MarkdownView({ markdown, markMode, frontmatter, interactive, expandCollapsed, resolveImageUrl, resolveFileLink, resolveWikiEmbed, resolveWikilink, resolveFileInfo, onWikilinkClick, onLinkClick, onImageClick, onFileClick, onTaskClick, className }: MarkdownViewProps): ReactElement;
+export declare function MarkdownView({ markdown, markMode, frontmatter, interactive, expandCollapsed, resolveImageUrl, resolveFileLink, resolveWikiEmbed, resolveWikilink, resolveFileInfo, resolveXPost, resolveYouTubeVideo, onWikilinkClick, onLinkClick, onImageClick, onFileClick, onTaskClick, className }: MarkdownViewProps): ReactElement;
 //#endregion
 //#region src/components/wikilink-hover-card.d.ts
 /**
@@ -675,4 +704,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, type XPostResolver, type YouTubeVideoResolver, 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, defaultResolveXPost, defaultResolveYouTubeVideo, 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, loadKaTeX, markdownToDoc, matchPostEmbed, normalizeHref, parsePostEmbedSnapshot, 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";
@@ -15,6 +15,8 @@ import { Popover } from "@base-ui/react/popover";
 import { AutocompleteEmpty, AutocompleteItem, AutocompletePopup, AutocompletePositioner, AutocompleteRoot } from "@prosekit/react/autocomplete";
 import { MenuItem, MenuPopup, MenuPositioner } from "@prosekit/react/menu";
 import { TableHandleColumnMenuRoot, TableHandleColumnMenuTrigger, TableHandleColumnPopup, TableHandleColumnPositioner, TableHandleDragPreview, TableHandleDropIndicator, TableHandleRoot, TableHandleRowMenuRoot, TableHandleRowMenuTrigger, TableHandleRowPopup, TableHandleRowPositioner } from "@prosekit/react/table-handle";
+import { registerXPost } from "@post-embed/elements/x";
+import { registerYouTubeVideo } from "@post-embed/elements/youtube";
 import { Mark } from "@prosekit/pm/model";
 import { BOOLEAN, OVERLOADED_BOOLEAN, getPropertyInfo, possibleStandardNames } from "react-property";
 import { PreviewCard } from "@base-ui/react/preview-card";
@@ -353,11 +355,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());
 }
 
@@ -401,7 +403,7 @@ 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, searchQuery, onSearchChange, editorClassName }) {
+function EditorExtensions({ markMode, onDocChange, onWikilinkClick, onLinkClick, onTagClick, onExitBoundary, resolveImageUrl, resolveFileInfo, resolveXPost, resolveYouTubeVideo, onFileClick, onFilePaste, onFileSaveError, onImageClick, embedPaste, linkPaste, bulletAfterHeading, substitution, placeholder, readOnly, wikilinkEnabled, spellCheck, searchQuery, onSearchChange, editorClassName }) {
 	const editor = useEditor$1();
 	useLayoutEffect(() => {
 		editor.commands.setMarkMode(markMode);
@@ -458,8 +460,16 @@ function EditorExtensions({ markMode, onDocChange, onWikilinkClick, onLinkClick,
 		return onExitBoundary ? defineExitBoundaryHandler(onExitBoundary) : null;
 	}, [onExitBoundary]));
 	useExtension$1(useMemo(() => {
-		return defineImage({ resolveImageUrl });
-	}, [resolveImageUrl]));
+		return defineImage({
+			resolveImageUrl,
+			resolveXPost,
+			resolveYouTubeVideo
+		});
+	}, [
+		resolveImageUrl,
+		resolveXPost,
+		resolveYouTubeVideo
+	]));
 	useExtension$1(useMemo(() => {
 		return defineFileView({ resolveFileInfo });
 	}, [resolveFileInfo]));
@@ -1925,7 +1935,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, resolveXPost, resolveYouTubeVideo, 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 +1943,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,
@@ -2092,6 +2102,8 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onSl
 				onExitBoundary,
 				resolveImageUrl,
 				resolveFileInfo,
+				resolveXPost,
+				resolveYouTubeVideo,
 				onFileClick,
 				onFilePaste,
 				onFileSaveError,
@@ -2150,7 +2162,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, resolveXPost, resolveYouTubeVideo, 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() {
@@ -2269,6 +2281,8 @@ function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onSlashM
 			resolveWikiEmbed,
 			resolveWikilink,
 			resolveFileInfo,
+			resolveXPost,
+			resolveYouTubeVideo,
 			onFileClick,
 			onFilePaste,
 			onFileSaveError,
@@ -2286,6 +2300,7 @@ function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onSlashM
 			onSearchChange,
 			timeFormat,
 			editorClassName,
+			CodeBlockView,
 			children
 		})
 	});
@@ -2419,44 +2434,45 @@ function WikilinkChip(props) {
 		})]
 	});
 }
-function EmbedFrame(props) {
-	const { embed, width, height } = props;
-	const iframeRef = useRef(null);
-	useEffect(() => {
-		if (embed.kind !== "tweet") return;
-		const iframe = iframeRef.current;
-		if (!iframe) return;
-		return listenForTweetHeight(iframe);
-	}, [embed.kind, embed.key]);
-	const youtubeWidth = embed.kind === "youtube" ? width : null;
-	const tweetHeight = embed.kind === "tweet" ? height : null;
+function PostEmbed(props) {
+	const { kind, src, width, snapshot, resolveXPost, resolveYouTubeVideo } = props;
+	registerXPost();
+	registerYouTubeVideo();
+	const saved = snapshot == null ? void 0 : parsePostEmbedSnapshot(snapshot);
 	return /* @__PURE__ */ jsx("span", {
 		className: "md-image-view-preview md-atom-view-preview",
 		contentEditable: false,
-		children: /* @__PURE__ */ jsx("iframe", {
-			ref: iframeRef,
-			src: embed.src,
-			title: embed.title,
-			className: embed.className,
-			"data-testid": embed.testid,
-			loading: "lazy",
-			referrerPolicy: "strict-origin-when-cross-origin",
-			frameBorder: "0",
-			allow: embed.allow,
-			allowFullScreen: embed.allowFullscreen,
-			style: youtubeWidth != null ? { width: youtubeWidth } : tweetHeight != null ? { height: tweetHeight } : void 0,
-			"data-sized": tweetHeight == null ? void 0 : ""
-		}, embed.key)
+		"data-testid": `${kind}-embed`,
+		children: kind === "x-post" ? createElement("post-embed-x-post", {
+			data: saved?.kind === "x-post" ? saved.data : null,
+			url: src,
+			resolver: resolveXPost
+		}) : createElement("post-embed-youtube-video", {
+			data: saved?.kind === "youtube-video" ? saved.data : null,
+			url: src,
+			resolver: resolveYouTubeVideo,
+			playback: "inline",
+			style: width == null ? void 0 : {
+				width,
+				maxWidth: "none"
+			}
+		})
 	});
 }
 function ImagePreview(props) {
-	const { src, alt, width, height, resolveImageUrl, onImageClick, interactive } = props;
-	const embed = matchEmbed(src);
-	if (embed) return interactive ? /* @__PURE__ */ jsx(EmbedFrame, {
-		embed,
-		width,
-		height
-	}) : null;
+	const { src, alt, width, snapshot, resolveImageUrl, resolveXPost, resolveYouTubeVideo, onImageClick, interactive } = props;
+	const kind = matchPostEmbed(src);
+	if (kind) {
+		if (!interactive) return null;
+		return /* @__PURE__ */ jsx(PostEmbed, {
+			kind,
+			src,
+			width,
+			snapshot,
+			resolveXPost: resolveXPost ?? defaultResolveXPost,
+			resolveYouTubeVideo: resolveYouTubeVideo ?? defaultResolveYouTubeVideo
+		}, src);
+	}
 	const url = (resolveImageUrl ?? defaultResolveImageUrl)(src);
 	if (!url) return null;
 	return /* @__PURE__ */ jsx("span", {
@@ -2480,15 +2496,17 @@ function ImagePreview(props) {
 	});
 }
 function ImageView(props) {
-	const { src, alt, width, height, context, children } = props;
+	const { src, alt, width, snapshot, context, children } = props;
 	return /* @__PURE__ */ jsxs("span", {
 		className: "md-image-view md-atom-view",
 		children: [/* @__PURE__ */ jsx(ImagePreview, {
 			src,
 			alt,
 			width,
-			height,
+			snapshot,
 			resolveImageUrl: context.resolveImageUrl,
+			resolveXPost: context.resolveXPost,
+			resolveYouTubeVideo: context.resolveYouTubeVideo,
 			onImageClick: context.onImageClick,
 			interactive: context.interactive
 		}), /* @__PURE__ */ jsx("span", {
@@ -2684,7 +2702,7 @@ function wrapMark(mark, children, context) {
 				src: attrs.src,
 				alt: attrs.alt,
 				width: attrs.width,
-				height: attrs.height,
+				snapshot: attrs.snapshot,
 				context,
 				children
 			});
@@ -2766,10 +2784,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 +2829,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 +2844,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
@@ -2845,32 +2913,8 @@ function renderBlock(node, context) {
 * Callbacks (`onWikilinkClick`, etc.) and resolvers should be stable; pass them via
 * `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,
+function MarkdownView({ markdown, markMode = "hide", frontmatter = false, interactive = true, expandCollapsed = false, resolveImageUrl, resolveFileLink, resolveWikiEmbed, resolveWikilink, resolveFileInfo, resolveXPost, resolveYouTubeVideo, onWikilinkClick, onLinkClick, onImageClick, onFileClick, onTaskClick, className }) {
+	const context = useMemo(() => ({
 		interactive,
 		expandCollapsed,
 		resolveImageUrl,
@@ -2878,16 +2922,48 @@ function MarkdownView({ markdown, markMode = "hide", frontmatter = false, intera
 		resolveWikiEmbed,
 		resolveWikilink,
 		resolveFileInfo,
+		resolveXPost,
+		resolveYouTubeVideo,
+		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,
+		resolveFileLink,
+		resolveWikiEmbed,
+		resolveWikilink,
+		resolveFileInfo,
+		resolveXPost,
+		resolveYouTubeVideo,
 		onWikilinkClick,
 		onLinkClick,
 		onImageClick,
 		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.70.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -23,6 +23,8 @@
   "dependencies": {
     "@base-ui/react": "^1.7.0",
     "@ocavue/utils": "^1.8.0",
+    "@post-embed/elements": "^0.2.0",
+    "@post-embed/types": "^0.2.0",
     "@prosekit/core": "^0.13.2",
     "@prosekit/pm": "^0.1.19",
     "@prosekit/react": "^0.8.2",
@@ -31,7 +33,7 @@
     "github-slugger": "^2.0.0",
     "lucide-react": "^1.38.0",
     "react-property": "^2.0.2",
-    "@meowdown/core": "0.68.3"
+    "@meowdown/core": "0.70.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -49,12 +51,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",