@meowdown/react 0.68.1 → 0.68.3

package/dist/index.js

@@ -741,32 +741,33 @@ 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 hrefInputRef = useRef(null);
 	const previewHref = normalizeHref(debouncedHref);
 	const previewState = useLinkPreview(previewHref || void 0, resolveLinkPreview);
 	const canUseTitle = !!edit.link && debouncedHref === href.trim() && isLinkTextForHref(text, previewHref);
+	const canSave = text.trim() !== "" && href.trim() !== "";
 	useEffect(() => {
 		const timer = window.setTimeout(() => setDebouncedHref(href.trim()), 400);
 		return () => window.clearTimeout(timer);
 	}, [href]);
 	useEffect(() => {
-		textInputRef.current?.focus();
+		hrefInputRef.current?.focus();
+		hrefInputRef.current?.select();
 	}, []);
 	return /* @__PURE__ */ jsxs("form", {
 		className: link_menu_module_default.Form,
 		"data-testid": "link-popover-edit",
+		noValidate: true,
 		onSubmit: (event) => {
 			event.preventDefault();
-			if (text.trim() && href.trim()) onSubmit(text, href);
+			if (canSave) onSubmit(text, href);
 		},
 		children: [
 			/* @__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)
 				})]
@@ -774,10 +775,10 @@ function LinkEditContent({ edit, resolveLinkPreview, onSubmit, onRemove }) {
 			/* @__PURE__ */ jsxs("label", {
 				className: link_menu_module_default.Field,
 				children: [/* @__PURE__ */ jsx("span", { children: "Link" }), /* @__PURE__ */ jsx("input", {
+					ref: hrefInputRef,
 					className: link_menu_module_default.Input,
 					value: href,
-					required: true,
-					placeholder: "Paste link...",
+					placeholder: "Paste link…",
 					"data-testid": "link-popover-input",
 					onChange: (event) => setHref(event.target.value)
 				})]
@@ -800,6 +801,7 @@ function LinkEditContent({ edit, resolveLinkPreview, onSubmit, onRemove }) {
 					/* @__PURE__ */ jsx("button", {
 						type: "submit",
 						className: link_menu_module_default.SaveButton,
+						disabled: !canSave,
 						"data-testid": "link-popover-submit",
 						children: "Save"
 					})
@@ -926,7 +928,7 @@ function LinkMenu({ onLinkClick, onLinkCopy, resolveLinkPreview, readOnly = fals
 		children: editing ? /* @__PURE__ */ jsx(LinkEditContent, {
 			edit,
 			resolveLinkPreview,
-			onRemove: handleEditRemove,
+			onRemove: edit.link ? handleEditRemove : void 0,
 			onSubmit: handleEditSubmit
 		}) : link ? /* @__PURE__ */ jsx(LinkInfoContent, {
 			href: link.href,
@@ -1437,21 +1439,25 @@ function SlashMenu({ timeFormat = "12", onSlashMenuSearch, onFilePaste, onFileSa
 						}),
 						/* @__PURE__ */ jsx(SlashMenuItem, {
 							label: "Heading 1",
+							keywords: ["h1"],
 							kbd: "#",
 							onSelect: () => editor.commands.setHeading({ level: 1 })
 						}),
 						/* @__PURE__ */ jsx(SlashMenuItem, {
 							label: "Heading 2",
+							keywords: ["h2"],
 							kbd: "##",
 							onSelect: () => editor.commands.setHeading({ level: 2 })
 						}),
 						/* @__PURE__ */ jsx(SlashMenuItem, {
 							label: "Heading 3",
+							keywords: ["h3"],
 							kbd: "###",
 							onSelect: () => editor.commands.setHeading({ level: 3 })
 						}),
 						/* @__PURE__ */ jsx(SlashMenuItem, {
 							label: "Heading 4",
+							keywords: ["h4"],
 							kbd: "####",
 							onSelect: () => editor.commands.setHeading({ level: 4 })
 						}),

package/dist/style.css

@@ -533,28 +533,44 @@
 
   & > span {
     color: var(--meowdown-muted);
-    font-size: .75rem;
-    font-weight: 600;
+    font-size: .8125rem;
+    font-weight: 500;
   }
 }
 
 .meow_Input_IjcqKG {
   box-sizing: border-box;
   width: 100%;
+  height: 2rem;
   font: inherit;
   color: var(--meowdown-text);
-  border: 1px solid var(--meowdown-border);
+  border: 1px solid var(--meowdown-input-border);
   background: none;
   border-radius: .5rem;
-  padding: .5rem .625rem;
+  padding: 0 .625rem;
+  transition: border-color .1s, box-shadow .1s;
+
+  &::placeholder {
+    color: var(--meowdown-placeholder);
+  }
 
   &:focus {
-    outline: 2px solid var(--meowdown-accent);
-    outline-offset: -1px;
+    border-color: var(--meowdown-focus-ring);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--meowdown-focus-ring) 50%, transparent);
+    outline: none;
+  }
+
+  @media (pointer: coarse) {
+    height: 2.75rem;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
   }
 }
 
 .meow_FormActions_IjcqKG {
+  justify-content: flex-end;
   align-items: center;
   gap: .375rem;
   padding-top: .125rem;
@@ -569,19 +585,64 @@
   border: 0;
   border-radius: .5rem;
   padding: .375rem .625rem;
+  font-weight: 500;
+  transition: background-color .1s;
+
+  &:focus-visible {
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--meowdown-focus-ring) 50%, transparent);
+    outline: none;
+  }
 
   @media (pointer: coarse) {
     min-height: 2.75rem;
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 }
 
 .meow_RemoveButton_IjcqKG {
-  color: var(--meowdown-danger, #c33);
+  color: var(--meowdown-danger);
+  margin-right: auto;
+
+  &:hover {
+    background: color-mix(in oklab, var(--meowdown-danger) 10%, transparent);
+  }
 }
 
 .meow_UseTitleButton_IjcqKG {
   color: var(--meowdown-accent);
-  margin-left: auto;
+
+  &:hover {
+    background: var(--meowdown-popover-hover-bg);
+  }
+}
+
+.meow_SaveButton_IjcqKG {
+  transition: background-color .1s, transform .1s ease-out;
+
+  &:hover:not(:disabled) {
+    background: color-mix(in oklab, var(--meowdown-accent) 80%, transparent);
+  }
+
+  &:active:not(:disabled) {
+    transform: translateY(1px);
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--meowdown-focus-ring) 50%, transparent);
+    outline: none;
+  }
+
+  &:disabled {
+    opacity: .5;
+    cursor: default;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
 }
 .meow_Positioner_DPJ5ia {
   z-index: 50;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meowdown/react",
   "type": "module",
-  "version": "0.68.1",
+  "version": "0.68.3",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -22,7 +22,7 @@
   ],
   "dependencies": {
     "@base-ui/react": "^1.7.0",
-    "@ocavue/utils": "^1.7.0",
+    "@ocavue/utils": "^1.8.0",
     "@prosekit/core": "^0.13.2",
     "@prosekit/pm": "^0.1.19",
     "@prosekit/react": "^0.8.2",
@@ -31,7 +31,7 @@
     "github-slugger": "^2.0.0",
     "lucide-react": "^1.38.0",
     "react-property": "^2.0.2",
-    "@meowdown/core": "0.68.1"
+    "@meowdown/core": "0.68.3"
   },
   "peerDependencies": {
     "react": "^19.0.0",