@meowdown/react 0.24.1 → 0.25.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement, ReactNode, Ref } from "react";
-import { ExitBoundaryHandler, ImageClickHandler, ImageOptions, LinkClickHandler, MarkMode, PlaceholderOptions, TagClickHandler, TypedEditor, WikilinkClickHandler } from "@meowdown/core";
+import { ExitBoundaryHandler, ImageClickHandler, ImageOptions, LinkClickHandler, LinkCopyHandler, MarkMode, PlaceholderOptions, TagClickHandler, TypedEditor, WikilinkClickHandler } from "@meowdown/core";
 import { SelectionJSON, SelectionJSON as SelectionJSON$1 } from "@prosekit/core";
 import { useEditor, useExtension, useKeymap } from "@prosekit/react";
 
@@ -124,6 +124,12 @@ interface EditorProps {
    * in source mode.
    */
   onLinkClick?: LinkClickHandler;
+  /**
+   * Called after a link is copied from the link menu, with its `href`. Useful
+   * for a toast. Pass a stable function (e.g. from `useCallback`). Ignored in
+   * source mode.
+   */
+  onLinkCopy?: LinkCopyHandler;
   /**
    * Called with the tag name (without the leading `#`) on click of a rendered
    * `#tag`. Pass a stable function (e.g. from `useCallback`). Ignored in source
@@ -209,6 +215,7 @@ declare function MeowdownEditor({
   onWikilinkSearch,
   onWikilinkClick,
   onLinkClick,
+  onLinkCopy,
   onTagClick,
   onExitBoundary,
   resolveImageUrl,

package/dist/index.js

@@ -7,14 +7,15 @@ import { Compartment, EditorSelection, EditorState } from "@codemirror/state";
 import { EditorView, keymap } from "@codemirror/view";
 import { clamp } from "@ocavue/utils";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { codeBlockLanguages, defaultResolveImageUrl, defineBulletAfterHeading, defineEditorExtension, defineEmbedPaste, defineExitBoundaryHandler, defineHTMLPaste, defineImage, defineImageClickHandler, defineLinkClickHandler, defineMarkMode, defineMarkdownCopy, definePlaceholder, defineReadonly, defineTagClickHandler, defineWikilinkClickHandler, defineWikilinkTrigger, docToMarkdown, getCodeTokens, getMarkBuilders, inlineTextToMarkChunks, listenForTweetHeight, markdownToDoc, matchEmbed } from "@meowdown/core";
+import { codeBlockLanguages, defaultResolveImageUrl, defineBulletAfterHeading, defineEditorExtension, defineEmbedPaste, defineExitBoundaryHandler, defineHTMLPaste, defineImage, defineImageClickHandler, defineLinkClickHandler, defineLinkEditKeymap, defineLinkHoverHandler, defineMarkMode, defineMarkdownCopy, definePlaceholder, defineReadonly, defineTagClickHandler, defineWikilinkClickHandler, defineWikilinkTrigger, docToMarkdown, getCodeTokens, getMarkBuilders, getVirtualElementFromRange, inlineTextToMarkChunks, listenForTweetHeight, markdownToDoc, matchEmbed } from "@meowdown/core";
 import { canUseRegexLookbehind, createEditor, defineDocChangeHandler, 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 { Combobox } from "@base-ui/react/combobox";
-import { CheckIcon, ChevronsUpDownIcon, CopyIcon, GripHorizontalIcon, GripVerticalIcon } from "lucide-react";
+import { CheckIcon, ChevronsUpDownIcon, CopyIcon, GripHorizontalIcon, GripVerticalIcon, PencilIcon, UnlinkIcon } from "lucide-react";
 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 { 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";
@@ -155,8 +156,41 @@ var code_block_view_module_default = {
 };
 
 //#endregion
-//#region src/components/code-block-view.tsx
+//#region src/components/copy-button.tsx
 const COPIED_RESET_MS = 1500;
+/**
+* A copy-to-clipboard button with "copied" feedback. Shared by the code block
+* toolbar and the link popover.
+*/
+function CopyButton({ getText, label, onCopy, className, ...rest }) {
+	const [copied, setCopied] = useState(false);
+	const resetTimerRef = useRef(void 0);
+	const copy = async () => {
+		try {
+			await navigator.clipboard.writeText(getText());
+			setCopied(true);
+			clearTimeout(resetTimerRef.current);
+			resetTimerRef.current = setTimeout(() => setCopied(false), COPIED_RESET_MS);
+			onCopy?.();
+		} catch (error) {
+			console.warn("[meowdown] Failed to copy:", error);
+		}
+	};
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className,
+		"data-copied": copied ? "" : void 0,
+		"aria-label": copied ? "Copied" : label,
+		title: copied ? "Copied" : label,
+		onMouseDown: (event) => event.preventDefault(),
+		onClick: copy,
+		...rest,
+		children: copied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {})
+	});
+}
+
+//#endregion
+//#region src/components/code-block-view.tsx
 function CodeBlockView(props) {
 	const language = props.node.attrs.language || "";
 	const selected = useMemo(() => {
@@ -179,18 +213,6 @@ function CodeBlockView(props) {
 	const setLanguage = (item) => {
 		props.setAttrs({ language: item?.value ?? "" });
 	};
-	const [copied, setCopied] = useState(false);
-	const resetTimerRef = useRef(void 0);
-	const copy = async () => {
-		try {
-			await navigator.clipboard.writeText(props.node.textContent);
-			setCopied(true);
-			clearTimeout(resetTimerRef.current);
-			resetTimerRef.current = setTimeout(() => setCopied(false), COPIED_RESET_MS);
-		} catch (error) {
-			console.warn("[meowdown] Failed to copy code block:", error);
-		}
-	};
 	return /* @__PURE__ */ jsxs("div", {
 		className: code_block_view_module_default.Root,
 		children: [/* @__PURE__ */ jsxs("div", {
@@ -252,16 +274,11 @@ function CodeBlockView(props) {
 						]
 					})
 				}) })]
-			}), /* @__PURE__ */ jsx("button", {
-				type: "button",
+			}), /* @__PURE__ */ jsx(CopyButton, {
+				getText: () => props.node.textContent,
+				label: "Copy code",
 				className: code_block_view_module_default.CopyButton,
-				"data-testid": "code-block-copy",
-				"data-copied": copied ? "" : void 0,
-				"aria-label": copied ? "Copied" : "Copy code",
-				title: copied ? "Copied" : "Copy code",
-				onMouseDown: (event) => event.preventDefault(),
-				onClick: copy,
-				children: copied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyIcon, {})
+				"data-testid": "code-block-copy"
 			})]
 		}), /* @__PURE__ */ jsx("pre", {
 			ref: props.contentRef,
@@ -376,6 +393,269 @@ 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 = 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 = 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, closeDelay = CLOSE_DELAY) {
+	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 = {
+	"Button": "meow_Button_IjcqKG",
+	"Form": "meow_Form_IjcqKG",
+	"Input": "meow_Input_IjcqKG",
+	"Popup": "meow_Popup_IjcqKG",
+	"Positioner": "meow_Positioner_IjcqKG",
+	"Row": "meow_Row_IjcqKG",
+	"SrOnly": "meow_SrOnly_IjcqKG",
+	"Url": "meow_Url_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 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 }) {
+	return /* @__PURE__ */ jsx(Popover.Root, {
+		open: true,
+		onOpenChange: (open) => {
+			if (!open) onClose();
+		},
+		children: /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+			anchor,
+			side: "bottom",
+			sideOffset: 8,
+			className: link_menu_module_default.Positioner,
+			children: /* @__PURE__ */ jsx(Popover.Popup, {
+				className: link_menu_module_default.Popup,
+				"data-testid": "link-popover",
+				initialFocus: false,
+				finalFocus: false,
+				onMouseEnter: () => onPopupHover?.(true),
+				onMouseLeave: () => onPopupHover?.(false),
+				children
+			})
+		}) })
+	});
+}
+/** The hover preview: the url plus copy, edit, and remove actions. */
+function LinkInfoContent({ href, onLinkClick, onLinkCopy, onEdit, onRemove }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: link_menu_module_default.Row,
+		"data-testid": "link-popover-read",
+		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
+					});
+				},
+				children: href
+			}),
+			/* @__PURE__ */ jsx(CopyButton, {
+				getText: () => href,
+				label: "Copy link",
+				className: link_menu_module_default.Button,
+				onCopy: () => onLinkCopy?.({ href })
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: link_menu_module_default.Button,
+				title: "Edit link",
+				"aria-label": "Edit link",
+				onClick: onEdit,
+				children: /* @__PURE__ */ jsx(PencilIcon, {})
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: link_menu_module_default.Button,
+				title: "Remove link",
+				"aria-label": "Remove link",
+				onClick: onRemove,
+				children: /* @__PURE__ */ jsx(UnlinkIcon, {})
+			})
+		]
+	});
+}
+/** 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 : "";
+	useEffect(() => {
+		hrefInputRef.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 || "");
+		},
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				ref: hrefInputRef,
+				className: link_menu_module_default.Input,
+				defaultValue: href,
+				placeholder: "Paste link...",
+				"data-testid": "link-popover-input"
+			}),
+			/* @__PURE__ */ jsx("input", {
+				ref: titleInputRef,
+				className: link_menu_module_default.Input,
+				defaultValue: title,
+				placeholder: "Title (optional)"
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "submit",
+				className: link_menu_module_default.SrOnly,
+				"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 }) {
+	const editor = useEditor$1();
+	const [hover, setHover] = useState();
+	const [onLink, setOnLink] = useState(false);
+	const [overPopup, setOverPopup] = useState(false);
+	const [edit, setEdit] = useState();
+	const hoverOpen = useDelayedFlag(onLink || overPopup);
+	useExtension$1(useMemo(() => {
+		return defineLinkHoverHandler((hit) => {
+			setOnLink(!!hit);
+			if (hit) setHover(hit.payload);
+		});
+	}, []));
+	useExtension$1(useMemo(() => {
+		return defineLinkEditKeymap((options) => {
+			setEdit(options);
+		});
+	}, []));
+	const closeHover = useCallback(() => {
+		setOnLink(false);
+		setOverPopup(false);
+		setHover(void 0);
+	}, []);
+	const closeEdit = useCallback(() => {
+		setEdit(void 0);
+		closeHover();
+		editor.focus();
+	}, [editor, closeHover]);
+	let rangeFrom;
+	let rangeTo;
+	if (edit) {
+		rangeFrom = edit.from;
+		rangeTo = edit.to;
+	} else if (hover) {
+		rangeFrom = hover.unit.from;
+		rangeTo = hover.unit.to;
+	}
+	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, {
+		anchor,
+		onClose: closeEdit,
+		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({
+					href,
+					title
+				});
+				closeEdit();
+			}
+		})
+	});
+	if (hoverOpen && hover) {
+		const link = hover;
+		return /* @__PURE__ */ jsx(LinkPopover, {
+			anchor,
+			onClose: closeHover,
+			onPopupHover: setOverPopup,
+			children: /* @__PURE__ */ jsx(LinkInfoContent, {
+				href: link.href,
+				onLinkClick,
+				onLinkCopy,
+				onEdit: () => {
+					selectLinkUnit(editor, link);
+					setEdit({
+						from: link.unit.from,
+						to: link.unit.to,
+						link
+					});
+					closeHover();
+				},
+				onRemove: () => {
+					selectLinkUnit(editor, link);
+					editor.commands.removeLink();
+					closeHover();
+				}
+			})
+		});
+	}
+	return null;
+}
+
 //#endregion
 //#region src/components/autocomplete-menu.module.css
 var autocomplete_menu_module_default = {
@@ -780,7 +1060,7 @@ function resolveSelection(doc, selection) {
 		return TextSelection.between(doc.resolve(anchor), doc.resolve(head));
 	}
 }
-function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onTagSearch, onWikilinkSearch, onWikilinkClick, onLinkClick, onTagClick, onExitBoundary, resolveImageUrl, onImagePaste, onImageSaveError, onImageClick, embedPaste, bulletAfterHeading, frontmatter = false, blockHandle = true, placeholder, readOnly, spellCheck, editorClassName, ref, children }) {
+function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onTagSearch, onWikilinkSearch, onWikilinkClick, onLinkClick, onLinkCopy, onTagClick, onExitBoundary, resolveImageUrl, onImagePaste, onImageSaveError, onImageClick, embedPaste, bulletAfterHeading, frontmatter = false, blockHandle = true, placeholder, readOnly, spellCheck, editorClassName, ref, children }) {
 	const [editor] = useState(() => {
 		const editor = createEditor({ extension: union(defineEditorExtension(), defineCodeBlockView()) });
 		if (initialMarkdown) editor.setContent(markdownToDoc(initialMarkdown, {
@@ -878,6 +1158,10 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onTa
 			!readOnly && /* @__PURE__ */ jsx(TableHandle, {}),
 			blockHandle && !readOnly && /* @__PURE__ */ jsx(DropIndicator$1, {}),
 			/* @__PURE__ */ jsx(SlashMenu, {}),
+			!readOnly && /* @__PURE__ */ jsx(LinkMenu, {
+				onLinkClick,
+				onLinkCopy
+			}),
 			onTagSearch && /* @__PURE__ */ jsx(TagMenu, { onTagSearch }),
 			onWikilinkSearch && /* @__PURE__ */ jsx(WikilinkMenu, { onWikilinkSearch }),
 			children
@@ -887,7 +1171,7 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onTa
 
 //#endregion
 //#region src/components/editor.tsx
-function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onTagSearch, onWikilinkSearch, onWikilinkClick, onLinkClick, onTagClick, onExitBoundary, resolveImageUrl, onImagePaste, onImageSaveError, onImageClick, embedPaste = true, bulletAfterHeading = false, frontmatter = false, blockHandle = true, placeholder, readOnly, spellCheck, editorClassName, wrapperClassName, handleRef, children }) {
+function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onTagSearch, onWikilinkSearch, onWikilinkClick, onLinkClick, onLinkCopy, onTagClick, onExitBoundary, resolveImageUrl, onImagePaste, onImageSaveError, onImageClick, embedPaste = true, bulletAfterHeading = false, frontmatter = false, blockHandle = true, placeholder, readOnly, spellCheck, editorClassName, wrapperClassName, handleRef, children }) {
 	const childRef = useRef(null);
 	useImperativeHandle(handleRef, () => {
 		function getMarkdown() {
@@ -953,6 +1237,7 @@ function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onTagSea
 			onWikilinkSearch,
 			onWikilinkClick,
 			onLinkClick,
+			onLinkCopy,
 			onTagClick,
 			onExitBoundary,
 			resolveImageUrl,

package/dist/style.css

@@ -255,6 +255,95 @@
   background: var(--meowdown-accent);
   transition: all .15s;
 }
+.meow_Positioner_IjcqKG {
+  z-index: 50;
+  width: min(20rem, 100vw - 1rem);
+  display: block;
+}
+
+.meow_Popup_IjcqKG {
+  box-sizing: border-box;
+  border: 1px solid var(--meowdown-border);
+  background: var(--meowdown-link-popover-bg, light-dark(#fff, #18181b));
+  border-radius: .75rem;
+  flex-direction: column;
+  width: 100%;
+  padding: .25rem;
+  font-size: .875rem;
+  display: flex;
+  box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
+}
+
+.meow_Row_IjcqKG {
+  align-items: center;
+  gap: .125rem;
+  display: flex;
+}
+
+.meow_Url_IjcqKG {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  min-width: 0;
+  color: var(--meowdown-accent);
+  cursor: pointer;
+  flex: 1;
+  padding: .25rem .5rem;
+  overflow: hidden;
+}
+
+.meow_Button_IjcqKG {
+  color: var(--meowdown-text);
+  cursor: pointer;
+  border-radius: .5rem;
+  flex: none;
+  justify-content: center;
+  align-items: center;
+  padding: .375rem;
+  display: inline-flex;
+
+  &:hover {
+    background: var(--meowdown-link-popover-hover-bg, light-dark(#f4f4f5, #27272a));
+  }
+
+  & svg {
+    width: 1rem;
+    height: 1rem;
+  }
+}
+
+.meow_Form_IjcqKG {
+  flex-direction: column;
+  gap: .25rem;
+  padding: .25rem;
+  display: flex;
+}
+
+.meow_SrOnly_IjcqKG {
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+
+.meow_Input_IjcqKG {
+  box-sizing: border-box;
+  width: 100%;
+  font: inherit;
+  color: var(--meowdown-text);
+  border: 1px solid var(--meowdown-border);
+  background: none;
+  border-radius: .5rem;
+  padding: .375rem .5rem;
+
+  &:focus {
+    outline: 2px solid var(--meowdown-accent);
+    outline-offset: -1px;
+  }
+}
 .meow_Positioner_Dqll0G {
   z-index: 50;
   width: min(24rem, 100vw - 1rem);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meowdown/react",
   "type": "module",
-  "version": "0.24.1",
+  "version": "0.25.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -30,7 +30,7 @@
     "@prosekit/react": "^0.8.0-beta.11",
     "clsx": "^2.1.1",
     "lucide-react": "^1.21.0",
-    "@meowdown/core": "0.24.1"
+    "@meowdown/core": "0.25.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",