@meowdown/react 0.67.0 → 0.67.1

package/dist/index.js

@@ -663,7 +663,7 @@ function LinkInfoContent({ href, previewState, onLinkClick, onLinkCopy, onEdit,
 	if (previewState.status === "resolved") {
 		const { preview } = previewState;
 		return /* @__PURE__ */ jsxs("div", {
-			"data-testid": "link-popover-read",
+			"data-testid": "link-popover-info",
 			children: [
 				/* @__PURE__ */ jsxs("div", {
 					className: link_menu_module_default.Preview,
@@ -714,7 +714,7 @@ function LinkInfoContent({ href, previewState, onLinkClick, onLinkCopy, onEdit,
 		});
 	}
 	return /* @__PURE__ */ jsxs("div", {
-		"data-testid": "link-popover-read",
+		"data-testid": "link-popover-info",
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: link_menu_module_default.Row,
 			children: [/* @__PURE__ */ jsx(LinkAnchor, {
@@ -810,112 +810,130 @@ function LinkEditContent({ edit, resolveLinkPreview, onSubmit, onRemove }) {
 }
 function LinkMenu({ onLinkClick, onLinkCopy, resolveLinkPreview, readOnly = false }) {
 	const editor = useEditor$1();
-	const [hit, setHit] = useState();
-	const [edit, setEdit] = useState();
+	const [infoOpen, setInfoOpen] = useState(false);
 	const [editOpen, setEditOpen] = useState(false);
-	const [displayedRead, setDisplayedRead] = useState();
-	const overPopupRef = useRef(false);
+	const [link, setLink] = useState();
+	const [edit, setEdit] = useState();
+	const isPointerOverPopupRef = useRef(false);
 	const linkHoverExtension = useMemo(() => defineLinkHoverHandler((nextHit) => {
-		setHit(nextHit?.payload);
-		if (nextHit) setDisplayedRead(nextHit.payload);
-	}, { canLeave: () => !overPopupRef.current }), []);
+		setInfoOpen(nextHit != null);
+		if (nextHit) setLink(nextHit.payload);
+	}, { canLeave: () => !isPointerOverPopupRef.current }), []);
 	useExtension$1(linkHoverExtension);
 	const linkEditExtension = useMemo(() => readOnly ? null : defineLinkEditKeymap((options) => {
 		setEdit(options);
 		setEditOpen(true);
-		setHit(void 0);
+		setInfoOpen(false);
 	}), [readOnly]);
 	useExtension$1(linkEditExtension);
-	const closeRead = useCallback(() => {
-		overPopupRef.current = false;
-		setHit(void 0);
+	const handlePointerHover = useCallback((over) => {
+		isPointerOverPopupRef.current = over;
+	}, []);
+	const closeInfo = useCallback(() => {
+		isPointerOverPopupRef.current = false;
+		setInfoOpen(false);
 	}, []);
 	const closeEdit = useCallback(() => {
 		setEditOpen(false);
-		closeRead();
-	}, [closeRead]);
-	const requestedRead = hit;
-	const previewState = useLinkPreview(displayedRead?.href, resolveLinkPreview);
-	const range = edit ? edit.link?.text ?? edit : displayedRead?.text;
+		closeInfo();
+	}, [closeInfo]);
+	const handleEditRemove = useCallback(() => {
+		editor.commands.removeLink();
+		closeEdit();
+	}, [editor, closeEdit]);
+	const handleEditSubmit = useCallback((text, href) => {
+		if (!edit) return;
+		if (edit.link) editor.commands.updateLink({
+			text: text === edit.text ? void 0 : text,
+			href,
+			title: edit.link.title
+		});
+		else editor.commands.insertLink({
+			text,
+			href
+		});
+		closeEdit();
+	}, [
+		edit,
+		editor,
+		closeEdit
+	]);
+	const mutable = link != null && !readOnly && link.form !== "reference";
+	const linkText = useMemo(() => link ? getLinkText(link) : "", [link]);
+	const editLink = useCallback(() => {
+		if (!link) return;
+		selectLinkUnit(editor, link);
+		setEdit({
+			from: link.unit.from,
+			to: link.unit.to,
+			link,
+			text: linkText
+		});
+		setEditOpen(true);
+		closeInfo();
+	}, [
+		link,
+		editor,
+		linkText,
+		closeInfo
+	]);
+	const removeLink = useCallback(() => {
+		if (!link) return;
+		selectLinkUnit(editor, link);
+		editor.commands.removeLink();
+		closeInfo();
+	}, [
+		link,
+		editor,
+		closeInfo
+	]);
+	const handleUseTitle = useMemo(() => {
+		if (!link || !mutable || !isLinkTextForHref(linkText, link.href)) return;
+		return (title) => {
+			selectLinkUnit(editor, link);
+			editor.commands.updateLink({ text: title });
+			closeInfo();
+		};
+	}, [
+		link,
+		editor,
+		closeInfo,
+		linkText,
+		mutable
+	]);
+	const previewState = useLinkPreview(link?.href, resolveLinkPreview);
+	const range = edit ? edit.link?.text ?? edit : link?.text;
 	const anchor = useMemo(() => {
 		if (!range) return;
 		return getVirtualElementFromRange(editor.view, range);
 	}, [range, editor]);
-	if (edit && !readOnly) return /* @__PURE__ */ jsx(LinkPopover, {
+	const editing = edit != null && !readOnly;
+	return /* @__PURE__ */ jsx(LinkPopover, {
 		anchor,
-		open: editOpen,
-		onClose: closeEdit,
+		open: editing ? editOpen : infoOpen,
+		onClose: editing ? closeEdit : closeInfo,
 		onCloseComplete: () => {
-			setEdit(void 0);
-			editor.focus();
+			if (editing) {
+				setEdit(void 0);
+				editor.focus();
+			} else if (!infoOpen) setLink(void 0);
 		},
-		children: /* @__PURE__ */ jsx(LinkEditContent, {
+		onPopupHover: handlePointerHover,
+		children: editing ? /* @__PURE__ */ jsx(LinkEditContent, {
 			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: edit.link.title
-				});
-				else editor.commands.insertLink({
-					text,
-					href
-				});
-				closeEdit();
-			}
-		})
+			onRemove: handleEditRemove,
+			onSubmit: handleEditSubmit
+		}) : link ? /* @__PURE__ */ jsx(LinkInfoContent, {
+			href: link.href,
+			previewState,
+			onLinkClick,
+			onLinkCopy,
+			onEdit: mutable ? editLink : void 0,
+			onRemove: mutable ? removeLink : void 0,
+			onUseTitle: handleUseTitle
+		}) : void 0
 	});
-	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,
-			open: requestedRead !== void 0,
-			onClose: closeRead,
-			onCloseComplete: () => {
-				if (!requestedRead) setDisplayedRead(void 0);
-			},
-			onPopupHover: (over) => {
-				overPopupRef.current = over;
-			},
-			children: /* @__PURE__ */ jsx(LinkInfoContent, {
-				href: displayedRead.href,
-				previewState,
-				onLinkClick,
-				onLinkCopy,
-				onEdit: mutable ? editLink : void 0,
-				onRemove: mutable ? removeLink : void 0,
-				onUseTitle: canUseTitle ? (title) => {
-					selectLinkUnit(editor, displayedRead);
-					editor.commands.updateLink({ text: title });
-					closeRead();
-				} : void 0
-			})
-		});
-	}
-	return null;
 }
 
 //#endregion

package/dist/style.css

@@ -344,6 +344,7 @@
   cursor: pointer;
   flex: 1;
   padding: .25rem .375rem;
+  text-decoration: none;
   overflow: hidden;
 }
 
@@ -352,6 +353,8 @@
   height: 2rem;
   color: var(--meowdown-text);
   cursor: pointer;
+  background: none;
+  border: 0;
   border-radius: .5rem;
   flex: none;
   justify-content: center;
@@ -405,6 +408,7 @@
   color: var(--meowdown-accent);
   font-weight: 500;
   line-height: 1.3;
+  text-decoration: none;
   overflow: hidden;
 }
 
@@ -560,6 +564,8 @@
   min-height: 2rem;
   font: inherit;
   cursor: pointer;
+  background: none;
+  border: 0;
   border-radius: .5rem;
   padding: .375rem .625rem;
 
@@ -621,9 +627,12 @@
 }
 
 .meow_Button_DPJ5ia {
+  font: inherit;
   color: var(--meowdown-text);
   white-space: nowrap;
   cursor: pointer;
+  background: none;
+  border: 0;
   border-radius: .5rem;
   align-items: center;
   padding: .25rem .625rem;
@@ -635,10 +644,12 @@
 }
 
 .meow_AcceptButton_DPJ5ia {
+  font: inherit;
   color: var(--meowdown-popover-bg);
   background: var(--meowdown-accent);
   white-space: nowrap;
   cursor: pointer;
+  border: 0;
   border-radius: .5rem;
   align-items: center;
   padding: .25rem .625rem;
@@ -698,8 +709,11 @@
 
 .meow_Item_2_4Zjq {
   text-align: left;
+  font: inherit;
   color: var(--meowdown-text);
   cursor: pointer;
+  background: none;
+  border: 0;
   border-radius: .5rem;
   align-items: baseline;
   gap: .5rem;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meowdown/react",
   "type": "module",
-  "version": "0.67.0",
+  "version": "0.67.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -31,7 +31,7 @@
     "github-slugger": "^2.0.0",
     "lucide-react": "^1.28.0",
     "react-property": "^2.0.2",
-    "@meowdown/core": "0.67.0"
+    "@meowdown/core": "0.67.1"
   },
   "peerDependencies": {
     "react": "^19.0.0",