@meowdown/react 0.74.0 → 0.75.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps, 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, XPostMediaClickHandler, XPostResolver, XPostResolver as XPostResolver$1, YouTubeVideoClickHandler, YouTubeVideoResolver, YouTubeVideoResolver as YouTubeVideoResolver$1 } from "@meowdown/core";
+import { AcceptPendingReplacementOptions, ExitBoundaryHandler, FileClickHandler, FileInfoResolver, FileLinkResolver, FilePasteOptions, FileViewOptions, ImageClickHandler, ImageOptions, ImageUrlResolver, LinkClickHandler, LinkCopyHandler, LinkPreview, LinkPreviewResolver, LinkPreviewResolver as LinkPreviewResolver$1, ListMarker, MarkMode, PendingReplacement, PendingReplacementOutcome, PlaceholderOptions, SearchStatusHandler, StartPendingReplacementOptions, TagClickHandler, TypedEditor, WikiEmbedResolver, WikilinkClickHandler, WikilinkHoverHit, WikilinkResolver, XPostMediaClickHandler, XPostResolver, XPostResolver as XPostResolver$1, YouTubeVideoClickHandler, YouTubeVideoResolver, YouTubeVideoResolver as YouTubeVideoResolver$1 } from "@meowdown/core";
 import { SelectionJSON, SelectionJSON as SelectionJSON$1 } from "@prosekit/core";
 import { ReactNodeViewComponent, ReactNodeViewComponent as ReactNodeViewComponent$1, useEditor, useExtension, useKeymap } from "@prosekit/react";
 //#region src/utils/date-format.d.ts
@@ -372,8 +372,10 @@ interface EditorProps {
   onExitBoundary?: ExitBoundaryHandler;
   /**
    * Maps an image `src` to a displayable URL, or `undefined` to skip that image.
-   * Defaults to showing http(s) URLs as-is. Pass a stable function (e.g. from
-   * `useCallback`).
+   * May return a `Promise` when the answer depends on data that has not loaded
+   * yet; the image appears once it resolves, in a box of its persisted size
+   * when one exists. Defaults to showing http(s) URLs as-is. Pass a stable
+   * function (e.g. from `useCallback`).
    */
   resolveImageUrl?: ImageOptions['resolveImageUrl'];
   /**
@@ -631,9 +633,11 @@ interface MarkdownViewProps {
    */
   expandCollapsed?: boolean;
   /**
-   * Map an image `src` to a displayable URL, or `undefined` to skip it.
+   * Map an image `src` to a displayable URL, or `undefined` to skip it. May
+   * return a `Promise`; the image appears once it resolves, in a box of its
+   * persisted size when both dimensions are known.
    */
-  resolveImageUrl?: (src: string) => string | undefined;
+  resolveImageUrl?: ImageUrlResolver;
   /**
    * Claim a `[label](url)` link as a file pill instead of a regular link.
    * Must be pure; return `false` for links that should render normally.

package/dist/index.js

@@ -12,6 +12,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { BlockHandleDraggable, BlockHandlePopup, BlockHandlePositioner, BlockHandleRoot } from "@prosekit/react/block-handle";
 import { DropIndicator } from "@prosekit/react/drop-indicator";
 import { Popover } from "@base-ui/react/popover";
+import { queueExtension } from "@prosekit/web";
 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";
@@ -781,7 +782,7 @@ function LinkMenu({ onLinkClick, onLinkCopy, resolveLinkPreview, readOnly = fals
 			type: "hover",
 			link: hit?.payload
 		}), { canLeave });
-		return editor.use(linkHoverExtension);
+		return queueExtension(editor, linkHoverExtension);
 	}, [editor]);
 	useEffect(() => {
 		if (readOnly) return;
@@ -789,7 +790,7 @@ function LinkMenu({ onLinkClick, onLinkCopy, resolveLinkPreview, readOnly = fals
 			type: "edit",
 			edit
 		}));
-		return editor.use(linkEditExtension);
+		return queueExtension(editor, linkEditExtension);
 	}, [editor, readOnly]);
 	const handlePointerHover = useCallback((over) => {
 		isPointerOverPopupRef.current = over;
@@ -2297,6 +2298,37 @@ function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onSlashM
 	});
 }
 
+//#endregion
+//#region src/hooks/use-maybe-promise.ts
+/**
+* The settled value of `input`: `input` itself when it is not a `Promise`,
+* otherwise `undefined` until it resolves. A rejection stays `undefined` and is
+* reported with `console.warn`, since the caller has no other way to see it. A
+* new `input` discards the previous `Promise`'s result at once, so a stale
+* value never shows for a newer input. Callers memoize `input`, or a fresh
+* `Promise` on every render never settles.
+*/
+function useMaybePromise(input) {
+	const [settled, setSettled] = useState(null);
+	useEffect(() => {
+		if (!(input instanceof Promise)) return;
+		let active = true;
+		input.then((value) => {
+			if (active) setSettled({
+				input,
+				value
+			});
+		}, (error) => {
+			if (active) console.warn("[meowdown] useMaybePromise input rejected:", error);
+		});
+		return () => {
+			active = false;
+		};
+	}, [input]);
+	if (!(input instanceof Promise)) return input;
+	return settled?.input === input ? settled.value : void 0;
+}
+
 //#endregion
 //#region src/components/attributes-to-props.ts
 const UNCONTROLLED_COMPONENT_ATTRIBUTES = ["checked", "value"];
@@ -2453,8 +2485,14 @@ function PostEmbed(props) {
 	});
 }
 function ImagePreview(props) {
-	const { src, alt, width, snapshot, resolveImageUrl, resolveXPost, mediaUrlProtocols, resolveYouTubeVideo, onImageClick, interactive } = props;
+	const { src, alt, width, height, snapshot, resolveImageUrl, resolveXPost, mediaUrlProtocols, resolveYouTubeVideo, onImageClick, interactive } = props;
 	const kind = matchEmbed(src);
+	const resolved = useMemo(() => kind ? void 0 : (resolveImageUrl ?? defaultResolveImageUrl)(src), [
+		kind,
+		resolveImageUrl,
+		src
+	]);
+	const url = useMaybePromise(resolved);
 	if (kind) {
 		if (!interactive) return null;
 		return /* @__PURE__ */ jsx(PostEmbed, {
@@ -2467,8 +2505,23 @@ function ImagePreview(props) {
 			resolveYouTubeVideo: resolveYouTubeVideo ?? defaultResolveYouTubeVideo
 		}, src);
 	}
-	const url = (resolveImageUrl ?? defaultResolveImageUrl)(src);
-	if (!url) return null;
+	if (!url) {
+		if (resolved instanceof Promise && width != null && height != null) return /* @__PURE__ */ jsx("span", {
+			className: "md-image-view-preview md-atom-view-preview",
+			"data-testid": "image-preview",
+			contentEditable: false,
+			children: /* @__PURE__ */ jsx("span", {
+				className: "md-image-resizable",
+				"data-testid": "image-resizable",
+				"data-loading": "",
+				style: {
+					width: `${width}px`,
+					height: `${height}px`
+				}
+			})
+		});
+		return null;
+	}
 	return /* @__PURE__ */ jsx("span", {
 		className: "md-image-view-preview md-atom-view-preview",
 		"data-testid": "image-preview",
@@ -2491,13 +2544,14 @@ function ImagePreview(props) {
 	});
 }
 function ImageView(props) {
-	const { src, alt, width, snapshot, context, children } = props;
+	const { src, alt, width, height, 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,
@@ -2599,27 +2653,8 @@ function renderTokens(code, tokens) {
 	return out;
 }
 function CodeBlock({ code, language }) {
-	const syncTokens = useMemo(() => {
-		const result = getCodeTokens(code, language);
-		return Array.isArray(result) ? result : null;
-	}, [code, language]);
-	const [asyncTokens, setAsyncTokens] = useState(null);
-	useEffect(() => {
-		if (syncTokens) return;
-		let active = true;
-		const result = getCodeTokens(code, language);
-		if (!Array.isArray(result)) result.then((loaded) => {
-			if (active) setAsyncTokens(loaded);
-		});
-		return () => {
-			active = false;
-		};
-	}, [
-		code,
-		language,
-		syncTokens
-	]);
-	const tokens = syncTokens ?? asyncTokens ?? [];
+	const result = useMemo(() => getCodeTokens(code, language), [code, language]);
+	const tokens = useMaybePromise(result) ?? [];
 	return /* @__PURE__ */ jsx("pre", {
 		"data-language": language || void 0,
 		children: /* @__PURE__ */ jsx("code", { children: tokens.length > 0 ? renderTokens(code, tokens) : code })
@@ -2698,6 +2733,7 @@ function wrapMark(mark, children, context) {
 				src: attrs.src,
 				alt: attrs.alt,
 				width: attrs.width,
+				height: attrs.height,
 				snapshot: attrs.snapshot,
 				context,
 				children

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meowdown/react",
   "type": "module",
-  "version": "0.74.0",
+  "version": "0.75.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -22,7 +22,7 @@
   ],
   "dependencies": {
     "@base-ui/react": "^1.8.0",
-    "@meowdown/core": "0.74.2",
+    "@meowdown/core": "0.75.0",
     "@meowdown/embed": "0.2.0",
     "@meowdown/markdown": "0.72.0",
     "@ocavue/utils": "^1.8.0",
@@ -30,6 +30,7 @@
     "@prosekit/core": "^0.13.3",
     "@prosekit/pm": "^0.1.20",
     "@prosekit/react": "^0.8.3",
+    "@prosekit/web": "^0.9.3",
     "beautiful-mermaid": "^1.1.3",
     "clsx": "^2.1.1",
     "github-slugger": "^2.0.0",