@meowdown/react 0.66.0 → 0.67.0

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, SearchStatusHandler, StartPendingReplacementOptions, TagClickHandler, TypedEditor, WikiEmbedResolver, WikilinkClickHandler, WikilinkHoverHit } 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 } 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
@@ -347,6 +347,13 @@ interface EditorProps {
    * for a toast. Pass a stable function (e.g. from `useCallback`).
    */
   onLinkCopy?: LinkCopyHandler;
+  /**
+   * Resolves optional display metadata for the link popup. Failures should be
+   * represented by `undefined`; the popup keeps its URL and actions available.
+   * May be called repeatedly for the same `href`, so cache expensive work in
+   * the host. Pass a stable function (e.g. from `useCallback`).
+   */
+  resolveLinkPreview?: LinkPreviewResolver$1;
   /**
    * Called with the tag name (without the leading `#`) on click of a rendered
    * `#tag`, or on `Mod-Enter` with the caret on one. Pass a stable function
@@ -508,7 +515,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, 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;
+export declare function MeowdownEditor({ mode, initialMarkdown, onDocChange, onSlashMenuSearch, onTagSearch, onWikilinkSearch, onSelectionMenuSearch, selectionMenuAffordance, pendingReplacementActions, onPendingReplacementResolve, onWikilinkClick, onLinkClick, onLinkCopy, resolveLinkPreview, 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
 /**
@@ -654,4 +661,4 @@ interface WikilinkHoverCardProps {
  */
 export declare function WikilinkHoverCard({ children, className }: WikilinkHoverCardProps): ReactNode;
 //#endregion
-export { type EditorHandle, type EditorMode, type EditorProps, type EditorStateSnapshot, 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 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,13 +1,13 @@
 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, getMarkBuilders, getPendingReplacement, getSearchStatus, getSelectedText, getTableColumnAlign, getTextblockDisplayText, getVirtualElementFromRange, inlineTextToMarkChunksWithContext, isCodeBlockPreviewHiddenDecoration, isModEvent, 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, 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 { clamp } from "@ocavue/utils";
 import { canUseRegexLookbehind, createEditor, defineDocChangeHandler, defineUpdateHandler, isTextSelection, union } from "@prosekit/core";
 import { Selection, TextSelection } from "@prosekit/pm/state";
 import { ProseKit, defineReactNodeView, useEditor, useEditor as useEditor$1, useEditorDerivedValue, useExtension, useExtension as useExtension$1, useKeymap } from "@prosekit/react";
 import GithubSlugger from "github-slugger";
 import { Combobox } from "@base-ui/react/combobox";
-import { CheckIcon, ChevronsUpDownIcon, CopyIcon, GripHorizontalIcon, GripVerticalIcon, PencilIcon, SparklesIcon, UnlinkIcon } from "lucide-react";
+import { CheckIcon, ChevronsUpDownIcon, CopyIcon, Globe2Icon, GripHorizontalIcon, GripVerticalIcon, PencilIcon, SparklesIcon, UnlinkIcon } from "lucide-react";
 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";
@@ -499,70 +499,85 @@ function EditorExtensions({ markMode, onDocChange, onWikilinkClick, onLinkClick,
 	return null;
 }
 
-//#endregion
-//#region src/hooks/use-delayed-flag.ts
-/**
-* Delay before the flag opens, in ms.
-*/
-const OPEN_DELAY$1 = 400;
-/**
-* Grace before the flag closes, in ms. The window lets a pointer travel from
-*  the hovered link onto the popover it anchors.
-*/
-const CLOSE_DELAY$1 = 300;
-/**
-* Mirrors `value` into a boolean that flips true `openDelay`ms after `value`
-* becomes true and false `closeDelay`ms after it becomes false, cancelling any
-* pending flip on each change.
-*/
-function useDelayedFlag(value, openDelay = OPEN_DELAY$1, closeDelay = CLOSE_DELAY$1) {
-	const [flag, setFlag] = useState(false);
-	const timerRef = useRef(void 0);
-	useEffect(() => {
-		clearTimeout(timerRef.current);
-		timerRef.current = setTimeout(() => setFlag(value), value ? openDelay : closeDelay);
-		return () => clearTimeout(timerRef.current);
-	}, [
-		value,
-		openDelay,
-		closeDelay
-	]);
-	return flag;
-}
-
 //#endregion
 //#region src/components/link-menu.module.css
 var link_menu_module_default = {
+	"Actions": "meow_Actions_IjcqKG",
 	"Button": "meow_Button_IjcqKG",
+	"Description": "meow_Description_IjcqKG",
+	"Field": "meow_Field_IjcqKG",
 	"Form": "meow_Form_IjcqKG",
+	"FormActions": "meow_FormActions_IjcqKG",
+	"Host": "meow_Host_IjcqKG",
+	"Icon": "meow_Icon_IjcqKG",
 	"Input": "meow_Input_IjcqKG",
 	"Popup": "meow_Popup_IjcqKG",
 	"Positioner": "meow_Positioner_IjcqKG",
+	"Preview": "meow_Preview_IjcqKG",
+	"PreviewBody": "meow_PreviewBody_IjcqKG",
+	"pulse": "meow_pulse_IjcqKG",
+	"RemoveButton": "meow_RemoveButton_IjcqKG",
+	"ReplaceButton": "meow_ReplaceButton_IjcqKG",
+	"ReplaceRow": "meow_ReplaceRow_IjcqKG",
 	"Row": "meow_Row_IjcqKG",
-	"SrOnly": "meow_SrOnly_IjcqKG",
-	"Url": "meow_Url_IjcqKG"
+	"SaveButton": "meow_SaveButton_IjcqKG",
+	"Skeleton": "meow_Skeleton_IjcqKG",
+	"SkeletonLine": "meow_SkeletonLine_IjcqKG",
+	"SkeletonLineShort": "meow_SkeletonLineShort_IjcqKG",
+	"Title": "meow_Title_IjcqKG",
+	"Url": "meow_Url_IjcqKG",
+	"UseTitleButton": "meow_UseTitleButton_IjcqKG"
 };
 
 //#endregion
 //#region src/components/link-menu.tsx
-/**
-* Select the link unit so the text-backed commands target it, and keep the
-*  editor focused so its virtual selection stays visible behind the popover.
-*/
+function useLinkPreview(href, resolveLinkPreview) {
+	const [settled, setSettled] = useState();
+	useEffect(() => {
+		if (!href || !resolveLinkPreview || !isWebHref(href)) return;
+		let stale = false;
+		Promise.resolve().then(() => resolveLinkPreview(href)).then((preview) => {
+			if (!stale) setSettled({
+				href,
+				result: preview ? {
+					status: "resolved",
+					preview
+				} : { status: "failed" }
+			});
+		}).catch(() => {
+			if (!stale) setSettled({
+				href,
+				result: { status: "failed" }
+			});
+		});
+		return () => {
+			stale = true;
+		};
+	}, [href, resolveLinkPreview]);
+	if (!href || !resolveLinkPreview || !isWebHref(href)) return { status: "idle" };
+	return settled?.href === href ? settled.result : { status: "loading" };
+}
+function isWebHref(href) {
+	try {
+		const protocol = new URL(href).protocol;
+		return protocol === "https:" || protocol === "http:";
+	} catch {
+		return false;
+	}
+}
 function selectLinkUnit(editor, link) {
 	editor.commands.selectText(link.unit.from, link.unit.to);
 	editor.focus();
 }
-/**
-* A Base UI popover anchored at `anchor`. Base UI dismisses it on an outside
-*  press or Escape, both routed through `onClose`.
-*/
-function LinkPopover({ anchor, onClose, onPopupHover, children }) {
+function LinkPopover({ anchor, open, onClose, onCloseComplete, onPopupHover, children }) {
 	return /* @__PURE__ */ jsx(Popover.Root, {
-		open: true,
+		open,
 		onOpenChange: (open) => {
 			if (!open) onClose();
 		},
+		onOpenChangeComplete: (open) => {
+			if (!open) onCloseComplete?.();
+		},
 		children: /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
 			anchor,
 			side: "bottom",
@@ -580,31 +595,29 @@ function LinkPopover({ anchor, onClose, onPopupHover, children }) {
 		}) })
 	});
 }
-/**
-* The hover preview: the url plus copy, edit, and remove actions.
-*/
-function LinkInfoContent({ href, onLinkClick, onLinkCopy, onEdit, onRemove }) {
+function LinkAnchor({ href, className, onLinkClick, children }) {
+	return /* @__PURE__ */ jsx("a", {
+		className,
+		href,
+		title: href,
+		target: "_blank",
+		rel: "noopener noreferrer",
+		onClick: (event) => {
+			if (!onLinkClick) return;
+			event.preventDefault();
+			onLinkClick({
+				href,
+				event: event.nativeEvent,
+				mod: isModEvent(event)
+			});
+		},
+		children
+	});
+}
+function LinkActions({ href, onLinkCopy, onEdit, onRemove }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: link_menu_module_default.Row,
-		"data-testid": "link-popover-read",
+		className: link_menu_module_default.Actions,
 		children: [
-			/* @__PURE__ */ jsx("a", {
-				className: link_menu_module_default.Url,
-				href,
-				title: href,
-				target: "_blank",
-				rel: "noopener noreferrer",
-				onClick: (event) => {
-					if (!onLinkClick) return;
-					event.preventDefault();
-					onLinkClick({
-						href,
-						event: event.nativeEvent,
-						mod: isModEvent(event)
-					});
-				},
-				children: href
-			}),
 			/* @__PURE__ */ jsx(CopyButton, {
 				getText: () => href,
 				label: "Copy link",
@@ -630,150 +643,274 @@ function LinkInfoContent({ href, onLinkClick, onLinkCopy, onEdit, onRemove }) {
 		]
 	});
 }
-/**
-* The url and title form, opened by `Mod-k` or the preview's edit button.
-*/
-function LinkEditContent({ link, onSubmit }) {
-	const hrefInputRef = useRef(null);
-	const titleInputRef = useRef(null);
-	const href = link ? link.href : "";
-	const title = link ? link.title : "";
+function PreviewIcon({ preview }) {
+	const [failed, setFailed] = useState(false);
+	if (!preview.iconSrc || failed) return /* @__PURE__ */ jsx(Globe2Icon, { "aria-hidden": "true" });
+	return /* @__PURE__ */ jsx("img", {
+		src: preview.iconSrc,
+		alt: "",
+		onError: () => setFailed(true)
+	});
+}
+function getHostname(href) {
+	try {
+		return new URL(href).hostname;
+	} catch {
+		return href;
+	}
+}
+function LinkInfoContent({ href, previewState, onLinkClick, onLinkCopy, onEdit, onRemove, onUseTitle }) {
+	if (previewState.status === "resolved") {
+		const { preview } = previewState;
+		return /* @__PURE__ */ jsxs("div", {
+			"data-testid": "link-popover-read",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: link_menu_module_default.Preview,
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: link_menu_module_default.Icon,
+							children: /* @__PURE__ */ jsx(PreviewIcon, { preview }, preview.iconSrc)
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: link_menu_module_default.PreviewBody,
+							children: [/* @__PURE__ */ jsx(LinkAnchor, {
+								href,
+								className: link_menu_module_default.Title,
+								onLinkClick,
+								children: preview.title
+							}), /* @__PURE__ */ jsx("div", {
+								className: link_menu_module_default.Host,
+								children: getHostname(href)
+							})]
+						}),
+						/* @__PURE__ */ jsx(LinkActions, {
+							href,
+							onLinkCopy,
+							onEdit,
+							onRemove
+						})
+					]
+				}),
+				preview.description && /* @__PURE__ */ jsx("p", {
+					className: link_menu_module_default.Description,
+					children: preview.description
+				}),
+				onUseTitle && /* @__PURE__ */ jsxs("div", {
+					className: link_menu_module_default.ReplaceRow,
+					children: [
+						/* @__PURE__ */ jsx(SparklesIcon, { "aria-hidden": "true" }),
+						/* @__PURE__ */ jsx("span", { children: "Replace URL with its title?" }),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: link_menu_module_default.ReplaceButton,
+							"aria-label": "Replace URL with its title",
+							onClick: () => onUseTitle(preview.title),
+							children: "Yes"
+						})
+					]
+				})
+			]
+		});
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": "link-popover-read",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: link_menu_module_default.Row,
+			children: [/* @__PURE__ */ jsx(LinkAnchor, {
+				href,
+				className: link_menu_module_default.Url,
+				onLinkClick,
+				children: href
+			}), /* @__PURE__ */ jsx(LinkActions, {
+				href,
+				onLinkCopy,
+				onEdit,
+				onRemove
+			})]
+		}), previewState.status === "loading" && /* @__PURE__ */ jsxs("div", {
+			className: link_menu_module_default.Skeleton,
+			"data-testid": "link-popover-loading",
+			role: "status",
+			"aria-label": "Loading link preview",
+			children: [/* @__PURE__ */ jsx("div", { className: link_menu_module_default.SkeletonLine }), /* @__PURE__ */ jsx("div", { className: link_menu_module_default.SkeletonLineShort })]
+		})]
+	});
+}
+function LinkEditContent({ edit, resolveLinkPreview, onSubmit, onRemove }) {
+	const [text, setText] = useState(edit.text);
+	const [href, setHref] = useState(edit.link?.href ?? "");
+	const [debouncedHref, setDebouncedHref] = useState(href.trim());
+	const textInputRef = useRef(null);
+	const previewHref = normalizeHref(debouncedHref);
+	const previewState = useLinkPreview(previewHref || void 0, resolveLinkPreview);
+	const canUseTitle = !!edit.link && debouncedHref === href.trim() && isLinkTextForHref(text, previewHref);
 	useEffect(() => {
-		hrefInputRef.current?.focus();
+		const timer = window.setTimeout(() => setDebouncedHref(href.trim()), 400);
+		return () => window.clearTimeout(timer);
+	}, [href]);
+	useEffect(() => {
+		textInputRef.current?.focus();
 	}, []);
 	return /* @__PURE__ */ jsxs("form", {
 		className: link_menu_module_default.Form,
 		"data-testid": "link-popover-edit",
 		onSubmit: (event) => {
 			event.preventDefault();
-			onSubmit(hrefInputRef.current?.value || "", titleInputRef.current?.value || "");
+			if (text.trim() && href.trim()) onSubmit(text, href);
 		},
 		children: [
-			/* @__PURE__ */ jsx("input", {
-				ref: hrefInputRef,
-				className: link_menu_module_default.Input,
-				defaultValue: href,
-				placeholder: "Paste link...",
-				"data-testid": "link-popover-input"
+			/* @__PURE__ */ jsxs("label", {
+				className: link_menu_module_default.Field,
+				children: [/* @__PURE__ */ jsx("span", { children: "Text" }), /* @__PURE__ */ jsx("input", {
+					ref: textInputRef,
+					className: link_menu_module_default.Input,
+					value: text,
+					required: true,
+					"data-testid": "link-popover-text-input",
+					onChange: (event) => setText(event.target.value)
+				})]
 			}),
-			/* @__PURE__ */ jsx("input", {
-				ref: titleInputRef,
-				className: link_menu_module_default.Input,
-				defaultValue: title,
-				placeholder: "Title (optional)"
+			/* @__PURE__ */ jsxs("label", {
+				className: link_menu_module_default.Field,
+				children: [/* @__PURE__ */ jsx("span", { children: "Link" }), /* @__PURE__ */ jsx("input", {
+					className: link_menu_module_default.Input,
+					value: href,
+					required: true,
+					placeholder: "Paste link...",
+					"data-testid": "link-popover-input",
+					onChange: (event) => setHref(event.target.value)
+				})]
 			}),
-			/* @__PURE__ */ jsx("button", {
-				type: "submit",
-				className: link_menu_module_default.SrOnly,
-				"data-testid": "link-popover-submit",
-				children: "Save"
+			/* @__PURE__ */ jsxs("div", {
+				className: link_menu_module_default.FormActions,
+				children: [
+					onRemove && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: link_menu_module_default.RemoveButton,
+						onClick: onRemove,
+						children: "Remove link"
+					}),
+					canUseTitle && previewState.status === "resolved" && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: link_menu_module_default.UseTitleButton,
+						onClick: () => setText(previewState.preview.title),
+						children: "Use page title"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "submit",
+						className: link_menu_module_default.SaveButton,
+						"data-testid": "link-popover-submit",
+						children: "Save"
+					})
+				]
 			})
 		]
 	});
 }
-/**
-* Owns both link triggers and shows one popover at a time:
-*
-* - hovering a link opens a read-only preview that follows the pointer;
-* - `Mod-k` (or the preview's edit button) opens an edit form that stays until
-*   it is submitted, dismissed with Escape, or pressed outside.
-*/
-function LinkMenu({ onLinkClick, onLinkCopy }) {
+function LinkMenu({ onLinkClick, onLinkCopy, resolveLinkPreview, readOnly = false }) {
 	const editor = useEditor$1();
-	const [hover, setHover] = useState();
-	const [onLink, setOnLink] = useState(false);
-	const [overPopup, setOverPopup] = useState(false);
+	const [hit, setHit] = useState();
 	const [edit, setEdit] = useState();
-	const hoverOpen = useDelayedFlag(onLink || overPopup);
-	const linkHoverExtension = useMemo(() => {
-		return defineLinkHoverHandler((hit) => {
-			setOnLink(!!hit);
-			if (hit) setHover(hit.payload);
-		});
-	}, []);
+	const [editOpen, setEditOpen] = useState(false);
+	const [displayedRead, setDisplayedRead] = useState();
+	const overPopupRef = useRef(false);
+	const linkHoverExtension = useMemo(() => defineLinkHoverHandler((nextHit) => {
+		setHit(nextHit?.payload);
+		if (nextHit) setDisplayedRead(nextHit.payload);
+	}, { canLeave: () => !overPopupRef.current }), []);
 	useExtension$1(linkHoverExtension);
-	const linkEditExtension = useMemo(() => {
-		return defineLinkEditKeymap((options) => {
-			setEdit(options);
-		});
-	}, []);
+	const linkEditExtension = useMemo(() => readOnly ? null : defineLinkEditKeymap((options) => {
+		setEdit(options);
+		setEditOpen(true);
+		setHit(void 0);
+	}), [readOnly]);
 	useExtension$1(linkEditExtension);
-	const closeHover = useCallback(() => {
-		setOnLink(false);
-		setOverPopup(false);
-		setHover(void 0);
+	const closeRead = useCallback(() => {
+		overPopupRef.current = false;
+		setHit(void 0);
 	}, []);
 	const closeEdit = useCallback(() => {
-		setEdit(void 0);
-		closeHover();
-		editor.focus();
-	}, [editor, closeHover]);
-	let rangeFrom;
-	let rangeTo;
-	if (edit) {
-		const anchorRange = edit.link?.text ?? edit;
-		rangeFrom = anchorRange.from;
-		rangeTo = anchorRange.to;
-	} else if (hover) {
-		const anchorRange = hover.text;
-		rangeFrom = anchorRange.from;
-		rangeTo = anchorRange.to;
-	}
+		setEditOpen(false);
+		closeRead();
+	}, [closeRead]);
+	const requestedRead = hit;
+	const previewState = useLinkPreview(displayedRead?.href, resolveLinkPreview);
+	const range = edit ? edit.link?.text ?? edit : displayedRead?.text;
 	const anchor = useMemo(() => {
-		if (rangeFrom == null || rangeTo == null) return;
-		return getVirtualElementFromRange(editor.view, {
-			from: rangeFrom,
-			to: rangeTo
-		});
-	}, [
-		rangeFrom,
-		rangeTo,
-		editor
-	]);
-	if (edit) return /* @__PURE__ */ jsx(LinkPopover, {
+		if (!range) return;
+		return getVirtualElementFromRange(editor.view, range);
+	}, [range, editor]);
+	if (edit && !readOnly) return /* @__PURE__ */ jsx(LinkPopover, {
 		anchor,
+		open: editOpen,
 		onClose: closeEdit,
+		onCloseComplete: () => {
+			setEdit(void 0);
+			editor.focus();
+		},
 		children: /* @__PURE__ */ jsx(LinkEditContent, {
-			link: edit.link,
-			onSubmit: (href, title) => {
-				if (edit.link) {
-					if (href.trim()) editor.commands.updateLink({
-						href,
-						title
-					});
-					else editor.commands.removeLink();
-				} else if (href.trim()) editor.commands.insertLink({
+			edit,
+			resolveLinkPreview,
+			onRemove: edit.link ? () => {
+				editor.commands.removeLink();
+				closeEdit();
+			} : void 0,
+			onSubmit: (text, href) => {
+				if (edit.link) editor.commands.updateLink({
+					text: text === edit.text ? void 0 : text,
 					href,
-					title
+					title: edit.link.title
+				});
+				else editor.commands.insertLink({
+					text,
+					href
 				});
 				closeEdit();
 			}
 		})
 	});
-	if (hoverOpen && hover) {
-		const link = hover;
-		const editable = link.form === "inline";
+	if (displayedRead) {
+		const mutable = !readOnly && displayedRead.form !== "reference";
+		const text = getLinkText(editor.view.state, displayedRead);
+		const canUseTitle = mutable && isLinkTextForHref(text, displayedRead.href);
+		const editLink = () => {
+			selectLinkUnit(editor, displayedRead);
+			setEdit({
+				from: displayedRead.unit.from,
+				to: displayedRead.unit.to,
+				link: displayedRead,
+				text
+			});
+			setEditOpen(true);
+			closeRead();
+		};
+		const removeLink = () => {
+			selectLinkUnit(editor, displayedRead);
+			editor.commands.removeLink();
+			closeRead();
+		};
 		return /* @__PURE__ */ jsx(LinkPopover, {
 			anchor,
-			onClose: closeHover,
-			onPopupHover: setOverPopup,
+			open: requestedRead !== void 0,
+			onClose: closeRead,
+			onCloseComplete: () => {
+				if (!requestedRead) setDisplayedRead(void 0);
+			},
+			onPopupHover: (over) => {
+				overPopupRef.current = over;
+			},
 			children: /* @__PURE__ */ jsx(LinkInfoContent, {
-				href: link.href,
+				href: displayedRead.href,
+				previewState,
 				onLinkClick,
 				onLinkCopy,
-				onEdit: editable ? () => {
-					selectLinkUnit(editor, link);
-					setEdit({
-						from: link.unit.from,
-						to: link.unit.to,
-						link
-					});
-					closeHover();
-				} : void 0,
-				onRemove: editable ? () => {
-					selectLinkUnit(editor, link);
-					editor.commands.removeLink();
-					closeHover();
+				onEdit: mutable ? editLink : void 0,
+				onRemove: mutable ? removeLink : void 0,
+				onUseTitle: canUseTitle ? (title) => {
+					selectLinkUnit(editor, displayedRead);
+					editor.commands.updateLink({ text: title });
+					closeRead();
 				} : void 0
 			})
 		});
@@ -922,6 +1059,37 @@ function PendingReplacementPreview({ actions, onResolve }) {
 	});
 }
 
+//#endregion
+//#region src/hooks/use-delayed-flag.ts
+/**
+* Delay before the flag opens, in ms.
+*/
+const OPEN_DELAY$1 = 300;
+/**
+* Grace before the flag closes, in ms. The window lets a pointer travel from
+*  the hovered link onto the popover it anchors.
+*/
+const CLOSE_DELAY$1 = 100;
+/**
+* Mirrors `value` into a boolean that flips true `openDelay`ms after `value`
+* becomes true and false `closeDelay`ms after it becomes false, cancelling any
+* pending flip on each change.
+*/
+function useDelayedFlag(value, openDelay = OPEN_DELAY$1, closeDelay = CLOSE_DELAY$1) {
+	const [flag, setFlag] = useState(false);
+	const timerRef = useRef(void 0);
+	useEffect(() => {
+		clearTimeout(timerRef.current);
+		timerRef.current = setTimeout(() => setFlag(value), value ? openDelay : closeDelay);
+		return () => clearTimeout(timerRef.current);
+	}, [
+		value,
+		openDelay,
+		closeDelay
+	]);
+	return flag;
+}
+
 //#endregion
 //#region src/components/selection-menu.module.css
 var selection_menu_module_default = {
@@ -1727,7 +1895,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, 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, 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 baseExtension = defineEditorExtension({
 			resolveFileLink,
@@ -1918,9 +2086,11 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onSl
 				onFilePaste,
 				onFileSaveError
 			}),
-			!readOnly && /* @__PURE__ */ jsx(LinkMenu, {
+			/* @__PURE__ */ jsx(LinkMenu, {
 				onLinkClick,
-				onLinkCopy
+				onLinkCopy,
+				resolveLinkPreview,
+				readOnly
 			}),
 			onTagSearch && /* @__PURE__ */ jsx(TagMenu, { onTagSearch }),
 			onWikilinkSearch && /* @__PURE__ */ jsx(WikilinkMenu, { onWikilinkSearch }),
@@ -1949,7 +2119,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, 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, 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() {
@@ -2060,6 +2230,7 @@ function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onSlashM
 			onWikilinkClick,
 			onLinkClick,
 			onLinkCopy,
+			resolveLinkPreview,
 			onTagClick,
 			onExitBoundary,
 			resolveImageUrl,

package/dist/style.css

@@ -294,18 +294,43 @@
 
 .meow_Popup_IjcqKG {
   box-sizing: border-box;
-  border: 1px solid var(--meowdown-border);
+  width: 100%;
+  color: var(--meowdown-text);
+  border: 1px solid var(--meowdown-hover-card-border);
+  border-radius: var(--meowdown-hover-card-radius);
   background: var(--meowdown-popover-bg);
-  border-radius: .75rem;
+  box-shadow: var(--meowdown-hover-card-shadow);
+  transform-origin: var(--transform-origin);
+  outline: none;
   flex-direction: column;
-  width: 100%;
-  padding: .25rem;
   font-size: .875rem;
+  transition: opacity .15s, transform .15s;
+  display: flex;
+  overflow: hidden;
+
+  &[data-closed] {
+    transition: opacity .1s, transform .1s;
+  }
+
+  &[data-starting-style], &[data-ending-style] {
+    opacity: 0;
+    transform: scale(.96);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+.meow_Row_IjcqKG, .meow_Preview_IjcqKG {
+  align-items: center;
+  gap: .5rem;
+  padding: .5rem;
   display: flex;
-  box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
 }
 
-.meow_Row_IjcqKG {
+.meow_Actions_IjcqKG {
+  flex: none;
   align-items: center;
   gap: .125rem;
   display: flex;
@@ -318,18 +343,20 @@
   color: var(--meowdown-accent);
   cursor: pointer;
   flex: 1;
-  padding: .25rem .5rem;
+  padding: .25rem .375rem;
   overflow: hidden;
 }
 
 .meow_Button_IjcqKG {
+  width: 2rem;
+  height: 2rem;
   color: var(--meowdown-text);
   cursor: pointer;
   border-radius: .5rem;
   flex: none;
   justify-content: center;
   align-items: center;
-  padding: .375rem;
+  padding: 0;
   display: inline-flex;
 
   &:hover {
@@ -340,26 +367,172 @@
     width: 1rem;
     height: 1rem;
   }
+
+  @media (pointer: coarse) {
+    width: 2.75rem;
+    height: 2.75rem;
+  }
 }
 
-.meow_Form_IjcqKG {
+.meow_Icon_IjcqKG {
+  width: 2rem;
+  height: 2rem;
+  color: var(--meowdown-muted);
+  border-radius: .375rem;
+  flex: none;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  overflow: hidden;
+
+  & img, & svg {
+    object-fit: contain;
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+}
+
+.meow_PreviewBody_IjcqKG {
   flex-direction: column;
-  gap: .25rem;
-  padding: .25rem;
+  flex: 1;
+  min-width: 0;
   display: flex;
 }
 
-.meow_SrOnly_IjcqKG {
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  position: absolute;
+.meow_Title_IjcqKG {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: var(--meowdown-accent);
+  font-weight: 500;
+  line-height: 1.3;
   overflow: hidden;
 }
 
+.meow_Host_IjcqKG {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: var(--meowdown-muted);
+  font-size: .8125rem;
+  line-height: 1.3;
+  overflow: hidden;
+}
+
+.meow_Description_IjcqKG {
+  color: var(--meowdown-muted);
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  margin: 0;
+  padding: 0 .75rem .75rem 3rem;
+  line-height: 1.4;
+  display: -webkit-box;
+  overflow: hidden;
+}
+
+.meow_ReplaceRow_IjcqKG {
+  min-height: 2.5rem;
+  color: var(--meowdown-text);
+  border-top: 1px solid var(--meowdown-border);
+  align-items: center;
+  gap: .5rem;
+  padding: .375rem .5rem .375rem .75rem;
+  display: flex;
+
+  & > svg {
+    width: .875rem;
+    height: .875rem;
+    color: var(--meowdown-accent);
+  }
+
+  & > span {
+    flex: 1;
+    min-width: 0;
+    font-size: .8125rem;
+    font-weight: 500;
+  }
+}
+
+.meow_ReplaceButton_IjcqKG, .meow_SaveButton_IjcqKG {
+  min-height: 2rem;
+  font: inherit;
+  color: var(--meowdown-accent-contrast);
+  background: var(--meowdown-accent);
+  cursor: pointer;
+  border: 0;
+  border-radius: .5rem;
+  padding: .375rem .625rem;
+  font-weight: 500;
+
+  @media (pointer: coarse) {
+    min-height: 2.75rem;
+  }
+}
+
+.meow_ReplaceButton_IjcqKG {
+  flex: none;
+  min-height: 1.75rem;
+  padding: .25rem .625rem;
+  transition: filter .1s, transform .1s ease-out;
+
+  &:hover {
+    filter: brightness(1.05);
+  }
+
+  &:active {
+    transform: scale(.97);
+  }
+}
+
+.meow_Skeleton_IjcqKG {
+  flex-direction: column;
+  gap: .625rem;
+  padding: 0 .5rem .625rem;
+  display: flex;
+}
+
+.meow_SkeletonLine_IjcqKG, .meow_SkeletonLineShort_IjcqKG {
+  background: var(--meowdown-popover-hover-bg);
+  border-radius: 999px;
+  height: .75rem;
+  animation: 1.4s ease-in-out infinite meow_pulse_IjcqKG;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+}
+
+.meow_SkeletonLine_IjcqKG {
+  width: 90%;
+}
+
+.meow_SkeletonLineShort_IjcqKG {
+  width: 70%;
+}
+
+@keyframes meow_pulse_IjcqKG {
+  50% {
+    opacity: .45;
+  }
+}
+
+.meow_Form_IjcqKG {
+  flex-direction: column;
+  gap: .625rem;
+  padding: .75rem;
+  display: flex;
+}
+
+.meow_Field_IjcqKG {
+  flex-direction: column;
+  gap: .25rem;
+  display: flex;
+
+  & > span {
+    color: var(--meowdown-muted);
+    font-size: .75rem;
+    font-weight: 600;
+  }
+}
+
 .meow_Input_IjcqKG {
   box-sizing: border-box;
   width: 100%;
@@ -368,13 +541,41 @@
   border: 1px solid var(--meowdown-border);
   background: none;
   border-radius: .5rem;
-  padding: .375rem .5rem;
+  padding: .5rem .625rem;
 
   &:focus {
     outline: 2px solid var(--meowdown-accent);
     outline-offset: -1px;
   }
 }
+
+.meow_FormActions_IjcqKG {
+  align-items: center;
+  gap: .375rem;
+  padding-top: .125rem;
+  display: flex;
+}
+
+.meow_RemoveButton_IjcqKG, .meow_UseTitleButton_IjcqKG {
+  min-height: 2rem;
+  font: inherit;
+  cursor: pointer;
+  border-radius: .5rem;
+  padding: .375rem .625rem;
+
+  @media (pointer: coarse) {
+    min-height: 2.75rem;
+  }
+}
+
+.meow_RemoveButton_IjcqKG {
+  color: var(--meowdown-danger, #c33);
+}
+
+.meow_UseTitleButton_IjcqKG {
+  color: var(--meowdown-accent);
+  margin-left: auto;
+}
 .meow_Positioner_DPJ5ia {
   z-index: 50;
   width: min(30rem, 100vw - 1rem);
@@ -794,16 +995,16 @@
 .meow_Popup_HMEwgW {
   box-sizing: border-box;
   pointer-events: none;
-  border: 1px solid var(--meowdown-border);
+  border: 1px solid var(--meowdown-hover-card-border);
+  border-radius: var(--meowdown-hover-card-radius);
   background: var(--meowdown-popover-bg);
   width: min(20rem, 100vw - 1rem);
   max-height: min(12rem, 100vh - 1rem);
+  box-shadow: var(--meowdown-hover-card-shadow);
   transform-origin: var(--transform-origin);
-  border-radius: .75rem;
   outline: none;
   transition: opacity .15s, transform .15s;
   display: flex;
-  box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
 }
 
 .meow_Popup_HMEwgW[data-closed] {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meowdown/react",
   "type": "module",
-  "version": "0.66.0",
+  "version": "0.67.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -23,15 +23,15 @@
   "dependencies": {
     "@base-ui/react": "^1.7.0",
     "@ocavue/utils": "^1.7.0",
-    "@prosekit/core": "^0.13.0",
+    "@prosekit/core": "^0.13.1",
     "@prosekit/pm": "^0.1.19",
-    "@prosekit/react": "^0.8.0",
+    "@prosekit/react": "^0.8.1",
     "beautiful-mermaid": "^1.1.3",
     "clsx": "^2.1.1",
     "github-slugger": "^2.0.0",
     "lucide-react": "^1.28.0",
     "react-property": "^2.0.2",
-    "@meowdown/core": "0.66.0"
+    "@meowdown/core": "0.67.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -51,12 +51,12 @@
     "@tsdown/css": "^0.23.0-beta.2",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.4",
-    "@vitest/browser-playwright": "^4.1.10",
+    "@vitest/browser-playwright": "^4.1.11",
     "dedent": "^1.7.2",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "tsdown": "^0.23.0-beta.2",
-    "vitest": "^4.1.10",
+    "vitest": "^4.1.11",
     "vitest-browser-commands": "^0.2.1",
     "vitest-browser-react": "^2.2.0",
     "@meowdown/vitest": "0.0.0"