@meowdown/react 0.67.0 → 0.67.2

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,134 @@ 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 linkHoverExtension = useMemo(() => defineLinkHoverHandler((nextHit) => {
-		setHit(nextHit?.payload);
-		if (nextHit) setDisplayedRead(nextHit.payload);
-	}, { canLeave: () => !overPopupRef.current }), []);
+	const [link, setLink] = useState();
+	const [edit, setEdit] = useState();
+	const isPointerOverPopupRef = useRef(false);
+	const linkHoverExtension = useMemo(() => {
+		return defineLinkHoverHandler((nextHit) => {
+			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);
-	}), [readOnly]);
+	const linkEditExtension = useMemo(() => {
+		return readOnly ? null : defineLinkEditKeymap((options) => {
+			setEdit(options);
+			setEditOpen(true);
+			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
@@ -1528,7 +1550,9 @@ function getTableHandleState(editor) {
 		columnAlign,
 		setTableColumnAlign: {
 			canExec: commands.setTableColumnAlign.canExec("left"),
-			command: (align) => commands.setTableColumnAlign(columnAlign === align ? null : align)
+			command: (align) => {
+				return commands.setTableColumnAlign(columnAlign === align ? null : align);
+			}
 		},
 		addTableColumnBefore: {
 			canExec: commands.addTableColumnBefore.canExec(),
@@ -2369,11 +2393,13 @@ function WikilinkChip(props) {
 			className: "md-wikilink-view-preview md-atom-view-preview",
 			"data-testid": "wikilink",
 			contentEditable: false,
-			onClick: onWikilinkClick ? (event) => onWikilinkClick({
-				target,
-				event: event.nativeEvent,
-				mod: isModEvent(event)
-			}) : void 0,
+			onClick: onWikilinkClick ? (event) => {
+				return onWikilinkClick({
+					target,
+					event: event.nativeEvent,
+					mod: isModEvent(event)
+				});
+			} : void 0,
 			children: /* @__PURE__ */ jsx("span", {
 				className: "md-wikilink-view-label",
 				contentEditable: false,
@@ -2433,12 +2459,14 @@ function ImagePreview(props) {
 			src: url,
 			alt,
 			draggable: false,
-			onClick: onImageClick ? (event) => onImageClick({
-				src,
-				alt,
-				event: event.nativeEvent,
-				mod: isModEvent(event)
-			}) : void 0,
+			onClick: onImageClick ? (event) => {
+				return onImageClick({
+					src,
+					alt,
+					event: event.nativeEvent,
+					mod: isModEvent(event)
+				});
+			} : void 0,
 			style: width == null ? void 0 : { width: `${width}px` }
 		})
 	});

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.2",
   "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.2"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -57,7 +57,7 @@
     "react-dom": "^19.2.8",
     "tsdown": "^0.23.0-beta.2",
     "vitest": "^4.1.11",
-    "vitest-browser-commands": "^0.2.1",
+    "vitest-browser-commands": "^0.4.1",
     "vitest-browser-react": "^2.2.0",
     "@meowdown/vitest": "0.0.0"
   },