@meowdown/react 0.11.0 → 0.12.0

package/README.md

@@ -44,9 +44,11 @@ The Markdown editor component. Renders inside a `div.meowdown` wrapper that fill
 - `onTagSearch?: (query: string) => TagItem[] | Promise<TagItem[]>`: enables the tag menu, which opens when typing `#` followed by text in a rich mode. Returns ranked rows `{ tag, label?, detail?, onSelect? }` (the menu does not re-sort). Selecting a row inserts `#tag ` then runs its `onSelect`. Omit to disable.
 - `onWikilinkSearch?: (query: string) => WikilinkItem[] | Promise<WikilinkItem[]>`: enables the wikilink menu, which opens as soon as `[[` is typed in a rich mode. Returns ranked rows `{ target, label?, detail?, onSelect? }` (the menu does not re-sort). Selecting a row inserts `[[target]]` then runs its `onSelect`. Omit to disable.
 - `onWikilinkClick?: (payload: { target: string; event: MouseEvent }) => void`: called when a rendered wiki link is clicked. A plain click inside a link the caret already sits in just places the caret; `Mod`-click always fires. Pass a stable function (e.g. from `useCallback`). Ignored in source mode.
+- `onLinkClick?: (payload: { href: string; event: MouseEvent }) => void`: called with its `href` when a rendered Markdown link (`[text](url)`) is clicked. A plain click inside a link the caret already sits in just places the caret; `Mod`-click always fires. Pass a stable function (e.g. from `useCallback`). Ignored in source mode.
 - `resolveImageUrl?: (src: string) => string | undefined`: maps an image `src` to a displayable URL (or `undefined` to skip). Enables inline image rendering: `![alt](src)` stays literal text and the image renders beneath its line. Pass a stable function. Ignored in source mode.
 - `onImagePaste?: (file: File) => string | undefined | Promise<string | undefined>`: persists a pasted or dropped image file and returns its markdown `src` (or `undefined` to decline), synchronously or as a promise. Pass a stable function. Ignored in source mode.
 - `onImageSaveError?: (error: unknown, file: File) => void`: called when `onImagePaste` throws. Defaults to `console.error`. Ignored in source mode.
+- `onImageClick?: (payload: { src: string; alt: string; event: MouseEvent }) => void`: called when a rendered image is clicked, with its markdown `src`, `alt`, and the originating `MouseEvent`. Pass a stable function (e.g. from `useCallback`). Ignored in source mode.
 - `embedPaste?: boolean`: auto-embeds a pasted tweet or YouTube link as a rich embed; one undo turns the embed back into the raw link. On by default; set `false` to disable. Only takes effect when `resolveImageUrl` is set, since embeds render through the image pipeline. Ignored in source mode.
 - `bulletAfterHeading?: boolean`: pressing Enter at the end of the document's first heading (the title line) starts a fresh empty bullet on the next line instead of a plain paragraph. Off by default. Ignored in source mode.
 - `blockHandle?: boolean`: shows the per-block gutter handle in the rich modes (a drag grip for reordering blocks and a `+` add button, plus the drop indicator). On by default; set `false` to hide the gutter affordance entirely, e.g. when the host does not want block reordering. Ignored in source mode and when `readOnly` is set.

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode, Ref } from "react";
-import { ImageOptions, MarkMode, PlaceholderOptions, TypedEditor, WikilinkClickHandler } from "@meowdown/core";
+import { ImageClickHandler, ImageOptions, LinkClickHandler, MarkMode, PlaceholderOptions, TypedEditor, WikilinkClickHandler } from "@meowdown/core";
 import { SelectionJSON, SelectionJSON as SelectionJSON$1 } from "@prosekit/core";
 import { useEditor, useExtension, useKeymap } from "@prosekit/react";
 
@@ -119,8 +119,16 @@ interface EditorProps {
    */
   onWikilinkClick?: WikilinkClickHandler;
   /**
-   * Maps an image `src` to a displayable URL (or `undefined` to skip). Enables
-   * inline image rendering. Pass a stable function. Ignored in source mode.
+   * Called with the link `href` on click of a rendered Markdown link
+   * (`[text](url)`). A plain click inside a link the caret already sits in just
+   * places the caret; `Mod`-click always fires. Pass a stable function (e.g.
+   * from `useCallback`). Ignored in source mode.
+   */
+  onLinkClick?: LinkClickHandler;
+  /**
+   * Maps an image `src` to a displayable URL, or `undefined` to skip that image.
+   * Defaults to showing http(s) URLs as-is. Pass a stable function (e.g. from
+   * `useCallback`). Ignored in source mode.
    */
   resolveImageUrl?: ImageOptions['resolveImageUrl'];
   /**
@@ -130,11 +138,15 @@ interface EditorProps {
   onImagePaste?: ImageOptions['onImagePaste'];
   /** Called when persisting a pasted/dropped image throws. Ignored in source mode. */
   onImageSaveError?: ImageOptions['onImageSaveError'];
+  /**
+   * Called when the user clicks a rendered image, with its markdown `src`,
+   * `alt`, and the originating `MouseEvent`. Pass a stable function (e.g. from
+   * `useCallback`). Ignored in source mode.
+   */
+  onImageClick?: ImageClickHandler;
   /**
    * Auto-embeds a pasted tweet or YouTube link as a rich embed; one undo turns
-   * the embed back into the raw link. On by default. Ignored in source mode, and
-   * only takes effect when `resolveImageUrl` is set, since embeds render through
-   * the same image pipeline.
+   * the embed back into the raw link. On by default. Ignored in source mode.
    */
   embedPaste?: boolean;
   /**
@@ -179,9 +191,11 @@ declare function MeowdownEditor({
   onTagSearch,
   onWikilinkSearch,
   onWikilinkClick,
+  onLinkClick,
   resolveImageUrl,
   onImagePaste,
   onImageSaveError,
+  onImageClick,
   embedPaste,
   bulletAfterHeading,
   blockHandle,

package/dist/index.js

@@ -7,7 +7,7 @@ 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, defineBulletAfterHeading, defineEditorExtension, defineEmbedPaste, defineImages, defineMarkMode, definePlaceholder, defineReadonly, defineWikilinkClickHandler, docToMarkdown, markdownToDoc } from "@meowdown/core";
+import { codeBlockLanguages, defineBulletAfterHeading, defineEditorExtension, defineEmbedPaste, defineImage, defineImageClickHandler, defineLinkClickHandler, defineMarkMode, definePlaceholder, defineReadonly, defineWikilinkClickHandler, docToMarkdown, markdownToDoc } 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";
@@ -436,7 +436,7 @@ function DropIndicator$1() {
 
 //#endregion
 //#region src/components/editor-extensions.tsx
-function EditorExtensions({ markMode, onDocChange, onWikilinkClick, resolveImageUrl, onImagePaste, onImageSaveError, embedPaste, bulletAfterHeading, placeholder, readOnly }) {
+function EditorExtensions({ markMode, onDocChange, onWikilinkClick, onLinkClick, resolveImageUrl, onImagePaste, onImageSaveError, onImageClick, embedPaste, bulletAfterHeading, placeholder, readOnly }) {
 	useExtension$1(useMemo(() => {
 		return defineMarkMode(markMode);
 	}, [markMode]));
@@ -450,19 +450,25 @@ function EditorExtensions({ markMode, onDocChange, onWikilinkClick, resolveImage
 		return onWikilinkClick ? defineWikilinkClickHandler(onWikilinkClick) : null;
 	}, [onWikilinkClick]));
 	useExtension$1(useMemo(() => {
-		return resolveImageUrl ? defineImages({
+		return onLinkClick ? defineLinkClickHandler(onLinkClick) : null;
+	}, [onLinkClick]));
+	useExtension$1(useMemo(() => {
+		return defineImage({
 			resolveImageUrl,
 			onImagePaste,
 			onImageSaveError
-		}) : null;
+		});
 	}, [
 		resolveImageUrl,
 		onImagePaste,
 		onImageSaveError
 	]));
 	useExtension$1(useMemo(() => {
-		return embedPaste && resolveImageUrl ? defineEmbedPaste() : null;
-	}, [embedPaste, resolveImageUrl]));
+		return onImageClick ? defineImageClickHandler(onImageClick) : null;
+	}, [onImageClick]));
+	useExtension$1(useMemo(() => {
+		return embedPaste ? defineEmbedPaste() : null;
+	}, [embedPaste]));
 	useExtension$1(useMemo(() => {
 		return bulletAfterHeading ? defineBulletAfterHeading() : null;
 	}, [bulletAfterHeading]));
@@ -480,6 +486,7 @@ function EditorExtensions({ markMode, onDocChange, onWikilinkClick, resolveImage
 var autocomplete_menu_module_default = {
 	"Detail": "meow_Detail_Dqll0G",
 	"Item": "meow_Item_Dqll0G",
+	"Label": "meow_Label_Dqll0G",
 	"Popup": "meow_Popup_Dqll0G",
 	"Positioner": "meow_Positioner_Dqll0G"
 };
@@ -826,7 +833,10 @@ function TagMenu({ onTagSearch }) {
 						editor.commands.insertText({ text: `#${item.tag} ` });
 						item.onSelect?.();
 					},
-					children: [/* @__PURE__ */ jsx("span", { children: item.label ?? `#${item.tag}` }), item.detail ? /* @__PURE__ */ jsx("span", {
+					children: [/* @__PURE__ */ jsx("span", {
+						className: autocomplete_menu_module_default.Label,
+						children: item.label ?? `#${item.tag}`
+					}), item.detail ? /* @__PURE__ */ jsx("span", {
 						className: autocomplete_menu_module_default.Detail,
 						children: item.detail
 					}) : null]
@@ -886,7 +896,10 @@ function WikilinkMenu({ onWikilinkSearch }) {
 						editor.commands.insertText({ text: `[[${item.target}]]` });
 						item.onSelect?.();
 					},
-					children: [/* @__PURE__ */ jsx("span", { children: item.label ?? item.target }), item.detail ? /* @__PURE__ */ jsx("span", {
+					children: [/* @__PURE__ */ jsx("span", {
+						className: autocomplete_menu_module_default.Label,
+						children: item.label ?? item.target
+					}), item.detail ? /* @__PURE__ */ jsx("span", {
 						className: autocomplete_menu_module_default.Detail,
 						children: item.detail
 					}) : null]
@@ -913,7 +926,7 @@ function resolveSelection(doc, selection) {
 		return TextSelection.between(doc.resolve(anchor), doc.resolve(head));
 	}
 }
-function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onTagSearch, onWikilinkSearch, onWikilinkClick, resolveImageUrl, onImagePaste, onImageSaveError, embedPaste, bulletAfterHeading, blockHandle = true, placeholder, readOnly, spellCheck, editorClassName, ref, children }) {
+function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onTagSearch, onWikilinkSearch, onWikilinkClick, onLinkClick, resolveImageUrl, onImagePaste, onImageSaveError, onImageClick, embedPaste, bulletAfterHeading, blockHandle = true, placeholder, readOnly, spellCheck, editorClassName, ref, children }) {
 	const [editor] = useState(() => {
 		const editor = createEditor({ extension: union(defineEditorExtension(), defineCodeBlockView()) });
 		if (initialMarkdown) editor.setContent(markdownToDoc(initialMarkdown, editor.nodes));
@@ -970,7 +983,7 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onTa
 		};
 	}, [editor]);
 	const handleDocChange = useMemo(() => {
-		if (!onDocChange) return void 0;
+		if (!onDocChange) return;
 		return () => {
 			if (suppressDocChangeRef.current) return;
 			onDocChange();
@@ -988,9 +1001,11 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onTa
 				markMode,
 				onDocChange: handleDocChange,
 				onWikilinkClick,
+				onLinkClick,
 				resolveImageUrl,
 				onImagePaste,
 				onImageSaveError,
+				onImageClick,
 				embedPaste,
 				bulletAfterHeading,
 				placeholder,
@@ -1009,7 +1024,7 @@ function ProseKitEditor({ markMode = "focus", initialMarkdown, onDocChange, onTa
 
 //#endregion
 //#region src/components/editor.tsx
-function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onTagSearch, onWikilinkSearch, onWikilinkClick, resolveImageUrl, onImagePaste, onImageSaveError, embedPaste = true, bulletAfterHeading = false, blockHandle = true, placeholder, readOnly, spellCheck, editorClassName, wrapperClassName, handleRef, children }) {
+function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onTagSearch, onWikilinkSearch, onWikilinkClick, onLinkClick, resolveImageUrl, onImagePaste, onImageSaveError, onImageClick, embedPaste = true, bulletAfterHeading = false, blockHandle = true, placeholder, readOnly, spellCheck, editorClassName, wrapperClassName, handleRef, children }) {
 	const childRef = useRef(null);
 	useImperativeHandle(handleRef, () => {
 		function getMarkdown() {
@@ -1074,9 +1089,11 @@ function MeowdownEditor({ mode = "focus", initialMarkdown, onDocChange, onTagSea
 			onTagSearch,
 			onWikilinkSearch,
 			onWikilinkClick,
+			onLinkClick,
 			resolveImageUrl,
 			onImagePaste,
 			onImageSaveError,
+			onImageClick,
 			embedPaste,
 			bulletAfterHeading,
 			blockHandle,

package/dist/style.css

@@ -264,7 +264,7 @@
 }
 .meow_Positioner_Dqll0G {
   z-index: 50;
-  width: min-content;
+  width: min(24rem, 100vw - 1rem);
   height: min-content;
   display: block;
   overflow: visible;
@@ -279,11 +279,13 @@
   background: light-dark(#fff, #18181b);
   border-radius: .75rem;
   flex-direction: column;
-  min-width: 15rem;
+  width: 100%;
+  min-width: min(15rem, 100%);
+  max-width: 100%;
   max-height: 25rem;
   padding: .25rem;
   display: flex;
-  overflow-y: auto;
+  overflow: hidden auto;
   box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
 }
 
@@ -297,6 +299,7 @@
   justify-content: space-between;
   align-items: center;
   gap: 1.5rem;
+  min-width: 0;
   padding: .375rem .75rem;
   scroll-margin: .25rem;
   font-size: .875rem;
@@ -318,10 +321,19 @@
   }
 }
 
+.meow_Label_Dqll0G {
+  text-overflow: ellipsis;
+  min-width: 0;
+  overflow: hidden;
+}
+
 .meow_Detail_Dqll0G {
+  text-overflow: ellipsis;
+  max-width: 40%;
   color: var(--meowdown-muted);
   flex-shrink: 0;
   font-size: .8125rem;
+  overflow: hidden;
 }
 .meow_Positioner_hpZLgq, .meow_MenuPositioner_hpZLgq {
   z-index: 50;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meowdown/react",
   "type": "module",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -24,11 +24,11 @@
     "@codemirror/state": "^6.6.0",
     "@codemirror/view": "^6.43.1",
     "@ocavue/utils": "^1.7.0",
-    "@prosekit/core": "^0.13.0-beta.1",
-    "@prosekit/pm": "^0.1.18",
-    "@prosekit/react": "^0.8.0-beta.2",
+    "@prosekit/core": "^0.13.0-beta.3",
+    "@prosekit/pm": "^0.1.19-beta.0",
+    "@prosekit/react": "^0.8.0-beta.4",
     "clsx": "^2.1.1",
-    "@meowdown/core": "0.11.0"
+    "@meowdown/core": "0.12.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -45,14 +45,14 @@
   "devDependencies": {
     "@css-modules-kit/codegen": "^1.3.0",
     "@ocavue/tsconfig": "^0.7.1",
-    "@tsdown/css": "^0.22.2",
+    "@tsdown/css": "^0.22.3",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@vitest/browser-playwright": "^4.1.9",
     "dedent": "^1.7.2",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
-    "tsdown": "^0.22.2",
+    "tsdown": "^0.22.3",
     "vitest": "^4.1.9",
     "vitest-browser-commands": "^0.2.1",
     "vitest-browser-react": "^2.2.0"