@meowdown/react 0.83.2 → 0.84.0

package/dist/index.js

@@ -3,12 +3,13 @@ import { clsx } from "clsx/lite";
 import { Fragment, ViewTransition, cloneElement, createContext, createElement, memo, startTransition, use, useDeferredValue, useEffect, useId, useImperativeHandle, useLayoutEffect, useReducer, useRef, useState } from "react";
 import { buildFileMarkdown, codeBlockLanguages, collectReferenceDefinitions, defaultResolveImageUrl, defaultResolveXPost, defaultResolveYouTubeVideo, defineCodeBlockPreviewPlugin, defineEditorExtension, defineLinkEditKeymap, defineLinkHoverHandler, definePendingReplacementHandler, defineSearchStatusHandler, defineVirtualCaret, defineWikilinkHoverHandler, dismissLinkHover, docToMarkdown, docToParagraphMarkdown, formatFileSize, getCodeTokens, getFileKind, getLinkText, getMarkBuilders, getPendingReplacement, getSearchStatus, getSelectedText, getTableColumnAlign, getTextblockDisplayText, getVirtualElementFromRange, inlineTextToMarkChunksWithContext, isCodeBlockPreviewHiddenDecoration, isLinkTextForHref, isModEvent, isNodeOfType, isReferenceDefinitionNode, isSelectionInTableCell, loadKaTeX, markdownToDoc, normalizeHref, paragraphMarkdownToDoc, parsePostEmbedSnapshot, renderMathInto, updateEditorConfig } from "@meowdown/core";
 import { clamp } from "@ocavue/utils";
-import { canUseRegexLookbehind, createEditor, defineDocChangeHandler, defineUpdateHandler, isTextSelection, union } from "@prosekit/core";
+import { canUseRegexLookbehind, createEditor, defineDocChangeHandler, defineKeymap, defineUpdateHandler, isApple, isTextSelection, 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 GithubSlugger from "github-slugger";
 import { Combobox } from "@base-ui/react/combobox";
-import { CheckIcon, ChevronsUpDownIcon, CopyIcon, Globe2Icon, GripHorizontalIcon, GripVerticalIcon, PencilIcon, SparklesIcon, UnlinkIcon } from "lucide-react";
+import { Menu } from "@base-ui/react/menu";
+import { BracesIcon, CheckIcon, ChevronsUpDownIcon, CopyIcon, EllipsisIcon, Globe2Icon, GripHorizontalIcon, GripVerticalIcon, PencilIcon, SparklesIcon, UnlinkIcon } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { BlockHandleDraggable, BlockHandlePopup, BlockHandlePositioner, BlockHandleRoot } from "@prosekit/react/block-handle";
 import { DropIndicator } from "@prosekit/react/drop-indicator";
@@ -24,6 +25,33 @@ import { Mark } from "@prosekit/pm/model";
 import { BOOLEAN, OVERLOADED_BOOLEAN, getPropertyInfo, possibleStandardNames } from "react-property";
 import { PreviewCard } from "@base-ui/react/preview-card";
 
+// src/extensions/block-menu.ts
+const caretMenuOpeners = /* @__PURE__ */ new WeakMap();
+/**
+* Sets the function that opens the menu of the code block that holds the
+* caret, so that `Mod-/` can open it. Returns a function that clears it.
+*/
+function setCaretCodeBlockMenu(view, open) {
+	caretMenuOpeners.set(view, open);
+	return () => {
+		if (caretMenuOpeners.get(view) === open) caretMenuOpeners.delete(view);
+	};
+}
+const openCodeBlockMenu = (state, dispatch, view) => {
+	const { $from, $to } = state.selection;
+	if (!isNodeOfType($from.parent, "codeBlock") || !$from.sameParent($to) || view == null) return false;
+	const open = caretMenuOpeners.get(view);
+	if (open == null) return false;
+	if (dispatch) open();
+	return true;
+};
+/**
+* Opens the menu of the code block that holds the selection with `Mod-/`.
+*/
+function defineCodeBlockMenuKeymap() {
+	return defineKeymap({ "Mod-/": openCodeBlockMenu });
+}
+
 // src/hooks/use-katex.ts
 /**
 * The lazily loaded KaTeX render function, or `undefined` while it loads (or when
@@ -104,14 +132,74 @@ const NON_PROSE_PROPS = {
 	writingsuggestions: "false"
 };
 
+// src/utils/write-clipboard-text.ts
+/**
+* Writes `text` to the clipboard. Returns whether the write succeeded.
+*/
+async function writeClipboardText(text) {
+	try {
+		await navigator.clipboard.writeText(text);
+		return true;
+	} catch (error) {
+		console.warn("[meowdown] Failed to copy:", error);
+		return false;
+	}
+}
+
+// src/components/code-block-toolbar-state.ts
+const CODE_BLOCK_TOOLBAR_IDLE = {
+	open: void 0,
+	closing: [],
+	focusReturn: "trigger"
+};
+function switchPopup(state, popup, focusReturn) {
+	const closing = state.closing.filter((item) => item !== popup);
+	if (state.open != null && state.open !== popup) closing.push(state.open);
+	return {
+		open: popup,
+		closing,
+		focusReturn
+	};
+}
+function reduceCodeBlockToolbar(state, event) {
+	switch (event.type) {
+		case "open": return switchPopup(state, event.popup, event.focusReturn);
+		case "handOver": return state.open === "menu" ? switchPopup(state, "language", state.focusReturn) : state;
+		case "close": return state.open === event.popup ? {
+			...state,
+			open: void 0,
+			closing: [...state.closing, event.popup]
+		} : state;
+		case "closed": return state.closing.includes(event.popup) ? {
+			...state,
+			closing: state.closing.filter((item) => item !== event.popup)
+		} : state;
+	}
+}
+/**
+* Whether the toolbar stays shown: a popup is open or plays its exit animation.
+*/
+function isCodeBlockToolbarActive(state) {
+	return state.open != null || state.closing.length > 0;
+}
+/**
+* Where a closing popup sends the focus. `undefined` when another popup is
+* open and owns the focus.
+*/
+function getCodeBlockToolbarFinalFocus(state) {
+	return state.open == null ? state.focusReturn : void 0;
+}
+
 // src/components/code-block-view.module.css
 var code_block_view_module_default = {
-	"CopyButton": "meow_CopyButton_D3j_9q",
 	"Empty": "meow_Empty_D3j_9q",
+	"IconButton": "meow_IconButton_D3j_9q",
 	"Item": "meow_Item_D3j_9q",
 	"ItemIndicator": "meow_ItemIndicator_D3j_9q",
 	"ItemText": "meow_ItemText_D3j_9q",
 	"List": "meow_List_D3j_9q",
+	"Menu": "meow_Menu_D3j_9q",
+	"MenuItem": "meow_MenuItem_D3j_9q",
 	"MermaidPreview": "meow_MermaidPreview_D3j_9q",
 	"Popup": "meow_Popup_D3j_9q",
 	"Positioner": "meow_Positioner_D3j_9q",
@@ -170,12 +258,7 @@ function CopyButton(t0) {
 	let t1;
 	if ($[6] !== getText || $[7] !== onCopy) {
 		t1 = async () => {
-			try {
-				await navigator.clipboard.writeText(getText());
-			} catch (t2) {
-				console.warn("[meowdown] Failed to copy:", t2);
-				return;
-			}
+			if (!await writeClipboardText(getText())) return;
 			setCopied(true);
 			clearTimeout(resetTimerRef.current);
 			resetTimerRef.current = setTimeout(() => setCopied(false), COPIED_RESET_MS);
@@ -383,7 +466,7 @@ function MermaidRender(props) {
 
 // src/components/code-block-view.tsx
 function CodeBlockView(props) {
-	const $ = c(36);
+	const $ = c(38);
 	const { node, view, getPos, decorations, selected, setAttrs, contentRef } = props;
 	const language = node.attrs.language || "";
 	const isMath = language === "math";
@@ -450,20 +533,24 @@ function CodeBlockView(props) {
 		$[13] = t6;
 	} else t6 = $[13];
 	let t7;
-	if ($[14] !== code || $[15] !== language || $[16] !== selected || $[17] !== setLanguage) {
+	if ($[14] !== caretInside || $[15] !== code || $[16] !== language || $[17] !== selected || $[18] !== setLanguage || $[19] !== view) {
 		t7 = selected ? null : /* @__PURE__ */ jsx(CodeBlockToolbar, {
 			code,
 			language,
-			setLanguage
+			setLanguage,
+			view,
+			caretInside
 		});
-		$[14] = code;
-		$[15] = language;
-		$[16] = selected;
-		$[17] = setLanguage;
-		$[18] = t7;
-	} else t7 = $[18];
+		$[14] = caretInside;
+		$[15] = code;
+		$[16] = language;
+		$[17] = selected;
+		$[18] = setLanguage;
+		$[19] = view;
+		$[20] = t7;
+	} else t7 = $[20];
 	let t8;
-	if ($[19] !== focusSource || $[20] !== katex || $[21] !== previewCode || $[22] !== showMathPreview) {
+	if ($[21] !== focusSource || $[22] !== katex || $[23] !== previewCode || $[24] !== showMathPreview) {
 		t8 = showMathPreview && /* @__PURE__ */ jsx(MathRender, {
 			katex,
 			formula: previewCode,
@@ -473,30 +560,30 @@ function CodeBlockView(props) {
 			"data-scroll-x": true,
 			onMouseDown: focusSource
 		});
-		$[19] = focusSource;
-		$[20] = katex;
-		$[21] = previewCode;
-		$[22] = showMathPreview;
-		$[23] = t8;
-	} else t8 = $[23];
+		$[21] = focusSource;
+		$[22] = katex;
+		$[23] = previewCode;
+		$[24] = showMathPreview;
+		$[25] = t8;
+	} else t8 = $[25];
 	let t9;
-	if ($[24] !== focusSource || $[25] !== mermaid || $[26] !== previewCode || $[27] !== showMermaidPreview) {
+	if ($[26] !== focusSource || $[27] !== mermaid || $[28] !== previewCode || $[29] !== showMermaidPreview) {
 		t9 = showMermaidPreview && /* @__PURE__ */ jsx(MermaidRender, {
 			renderer: mermaid,
 			source: previewCode,
-			className: `${code_block_view_module_default.Preview} ${code_block_view_module_default.MermaidPreview}`,
+			className: clsx(code_block_view_module_default.Preview, code_block_view_module_default.MermaidPreview),
 			"data-testid": "code-block-mermaid-preview",
 			"data-scroll-x": true,
 			onMouseDown: focusSource
 		});
-		$[24] = focusSource;
-		$[25] = mermaid;
-		$[26] = previewCode;
-		$[27] = showMermaidPreview;
-		$[28] = t9;
-	} else t9 = $[28];
+		$[26] = focusSource;
+		$[27] = mermaid;
+		$[28] = previewCode;
+		$[29] = showMermaidPreview;
+		$[30] = t9;
+	} else t9 = $[30];
 	let t10;
-	if ($[29] !== t4 || $[30] !== t5 || $[31] !== t6 || $[32] !== t7 || $[33] !== t8 || $[34] !== t9) {
+	if ($[31] !== t4 || $[32] !== t5 || $[33] !== t6 || $[34] !== t7 || $[35] !== t8 || $[36] !== t9) {
 		t10 = /* @__PURE__ */ jsxs("div", {
 			className: code_block_view_module_default.Root,
 			"data-preview": t4,
@@ -509,61 +596,327 @@ function CodeBlockView(props) {
 				t9
 			]
 		});
-		$[29] = t4;
-		$[30] = t5;
-		$[31] = t6;
-		$[32] = t7;
-		$[33] = t8;
-		$[34] = t9;
-		$[35] = t10;
-	} else t10 = $[35];
+		$[31] = t4;
+		$[32] = t5;
+		$[33] = t6;
+		$[34] = t7;
+		$[35] = t8;
+		$[36] = t9;
+		$[37] = t10;
+	} else t10 = $[37];
 	return t10;
 }
+const MENU_SHORTCUT = isApple ? "⌘/" : "Ctrl+/";
 function CodeBlockToolbar(t0) {
-	const $ = c(9);
-	const { code, language, setLanguage } = t0;
-	const [comboboxOpen, setComboboxOpen] = useState(false);
-	const t1 = comboboxOpen || void 0;
+	const $ = c(34);
+	const { code, language, setLanguage, view, caretInside } = t0;
+	const [state, dispatch] = useReducer(reduceCodeBlockToolbar, CODE_BLOCK_TOOLBAR_IDLE);
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = (open) => {
+			dispatch(open ? {
+				type: "open",
+				popup: "menu",
+				focusReturn: "trigger"
+			} : {
+				type: "close",
+				popup: "menu"
+			});
+		};
+		$[0] = t1;
+	} else t1 = $[0];
+	const changeMenuOpen = t1;
 	let t2;
-	if ($[0] !== language || $[1] !== setLanguage) {
-		t2 = /* @__PURE__ */ jsx(CodeBlockLanguagePickerMemo, {
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = (open_0) => {
+			if (!open_0) dispatch({
+				type: "closed",
+				popup: "menu"
+			});
+		};
+		$[1] = t2;
+	} else t2 = $[1];
+	const completeMenuOpenChange = t2;
+	let t3;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = (open_1) => {
+			dispatch(open_1 ? {
+				type: "open",
+				popup: "language",
+				focusReturn: "trigger"
+			} : {
+				type: "close",
+				popup: "language"
+			});
+		};
+		$[2] = t3;
+	} else t3 = $[2];
+	const changeLanguageOpen = t3;
+	let t4;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = (open_2) => {
+			if (!open_2) dispatch({
+				type: "closed",
+				popup: "language"
+			});
+		};
+		$[3] = t4;
+	} else t4 = $[3];
+	const completeLanguageOpenChange = t4;
+	let t5;
+	let t6;
+	if ($[4] !== caretInside || $[5] !== view) {
+		t5 = () => {
+			if (!caretInside) return;
+			return setCaretCodeBlockMenu(view, () => {
+				dispatch({
+					type: "open",
+					popup: "menu",
+					focusReturn: "editor"
+				});
+			});
+		};
+		t6 = [caretInside, view];
+		$[4] = caretInside;
+		$[5] = view;
+		$[6] = t5;
+		$[7] = t6;
+	} else {
+		t5 = $[6];
+		t6 = $[7];
+	}
+	useEffect(t5, t6);
+	let t7;
+	if ($[8] !== state) {
+		t7 = getCodeBlockToolbarFinalFocus(state);
+		$[8] = state;
+		$[9] = t7;
+	} else t7 = $[9];
+	const finalFocus = t7;
+	let t8;
+	if ($[10] !== finalFocus || $[11] !== view) {
+		t8 = () => {
+			if (finalFocus !== "editor") return finalFocus === "trigger";
+			view.focus();
+			return false;
+		};
+		$[10] = finalFocus;
+		$[11] = view;
+		$[12] = t8;
+	} else t8 = $[12];
+	const getFinalFocus = t8;
+	let t9;
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = () => {
+			dispatch({ type: "handOver" });
+		};
+		$[13] = t9;
+	} else t9 = $[13];
+	const handOverToLanguagePicker = t9;
+	let t10;
+	if ($[14] !== code) {
+		t10 = () => {
+			writeClipboardText(code);
+		};
+		$[14] = code;
+		$[15] = t10;
+	} else t10 = $[15];
+	const copyCode = t10;
+	let t11;
+	if ($[16] !== state) {
+		t11 = isCodeBlockToolbarActive(state) || void 0;
+		$[16] = state;
+		$[17] = t11;
+	} else t11 = $[17];
+	const t12 = state.open === "language";
+	let t13;
+	if ($[18] !== getFinalFocus || $[19] !== language || $[20] !== setLanguage || $[21] !== t12) {
+		t13 = /* @__PURE__ */ jsx(CodeBlockLanguagePickerMemo, {
 			language,
 			setLanguage,
-			onShownChange: setComboboxOpen
+			open: t12,
+			onOpenChange: changeLanguageOpen,
+			onOpenChangeComplete: completeLanguageOpenChange,
+			getFinalFocus
 		});
-		$[0] = language;
-		$[1] = setLanguage;
-		$[2] = t2;
-	} else t2 = $[2];
-	let t3;
-	if ($[3] !== code) {
-		t3 = /* @__PURE__ */ jsx(CopyButton, {
+		$[18] = getFinalFocus;
+		$[19] = language;
+		$[20] = setLanguage;
+		$[21] = t12;
+		$[22] = t13;
+	} else t13 = $[22];
+	let t14;
+	if ($[23] !== code) {
+		t14 = /* @__PURE__ */ jsx(CopyButton, {
 			getText: () => code,
 			label: "Copy code",
-			className: code_block_view_module_default.CopyButton,
+			className: code_block_view_module_default.IconButton,
 			"data-testid": "code-block-copy"
 		});
-		$[3] = code;
-		$[4] = t3;
-	} else t3 = $[4];
-	let t4;
-	if ($[5] !== t1 || $[6] !== t2 || $[7] !== t3) {
-		t4 = /* @__PURE__ */ jsxs("div", {
+		$[23] = code;
+		$[24] = t14;
+	} else t14 = $[24];
+	const t15 = state.open === "menu";
+	let t16;
+	if ($[25] !== copyCode || $[26] !== getFinalFocus || $[27] !== t15) {
+		t16 = /* @__PURE__ */ jsx(CodeBlockMenu, {
+			open: t15,
+			onOpenChange: changeMenuOpen,
+			onOpenChangeComplete: completeMenuOpenChange,
+			getFinalFocus,
+			onChangeLanguage: handOverToLanguagePicker,
+			onCopyCode: copyCode
+		});
+		$[25] = copyCode;
+		$[26] = getFinalFocus;
+		$[27] = t15;
+		$[28] = t16;
+	} else t16 = $[28];
+	let t17;
+	if ($[29] !== t11 || $[30] !== t13 || $[31] !== t14 || $[32] !== t16) {
+		t17 = /* @__PURE__ */ jsxs("div", {
 			className: code_block_view_module_default.Toolbar,
 			contentEditable: false,
-			"data-open": t1,
+			"data-open": t11,
+			children: [
+				t13,
+				t14,
+				t16
+			]
+		});
+		$[29] = t11;
+		$[30] = t13;
+		$[31] = t14;
+		$[32] = t16;
+		$[33] = t17;
+	} else t17 = $[33];
+	return t17;
+}
+function CodeBlockMenu(t0) {
+	const $ = c(10);
+	const { open, onOpenChange, onOpenChangeComplete, getFinalFocus, onChangeLanguage, onCopyCode } = t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(Menu.Trigger, {
+			className: code_block_view_module_default.IconButton,
+			"aria-label": "More",
+			title: `More (${MENU_SHORTCUT})`,
+			"data-testid": "code-block-menu",
+			children: /* @__PURE__ */ jsx(EllipsisIcon, {})
+		});
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	if ($[1] !== getFinalFocus || $[2] !== onChangeLanguage || $[3] !== onCopyCode) {
+		t2 = /* @__PURE__ */ jsx(CodeBlockMenuPopup, {
+			getFinalFocus,
+			onChangeLanguage,
+			onCopyCode
+		});
+		$[1] = getFinalFocus;
+		$[2] = onChangeLanguage;
+		$[3] = onCopyCode;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== onOpenChange || $[6] !== onOpenChangeComplete || $[7] !== open || $[8] !== t2) {
+		t3 = /* @__PURE__ */ jsxs(Menu.Root, {
+			open,
+			onOpenChange,
+			onOpenChangeComplete,
+			children: [t1, t2]
+		});
+		$[5] = onOpenChange;
+		$[6] = onOpenChangeComplete;
+		$[7] = open;
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
+	return t3;
+}
+function CodeBlockMenuPopup(t0) {
+	const $ = c(16);
+	const { getFinalFocus, onChangeLanguage, onCopyCode } = t0;
+	const collisionBoundary = use(CollisionBoundaryContext);
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = clsx(code_block_view_module_default.Popup, code_block_view_module_default.Menu);
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	let t3;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(BracesIcon, {});
+		t3 = /* @__PURE__ */ jsx("span", { children: "Change language" });
+		$[1] = t2;
+		$[2] = t3;
+	} else {
+		t2 = $[1];
+		t3 = $[2];
+	}
+	let t4;
+	if ($[3] !== onChangeLanguage) {
+		t4 = /* @__PURE__ */ jsxs(Menu.Item, {
+			className: code_block_view_module_default.MenuItem,
+			onClick: onChangeLanguage,
+			"data-testid": "code-block-menu-language",
 			children: [t2, t3]
 		});
-		$[5] = t1;
-		$[6] = t2;
-		$[7] = t3;
-		$[8] = t4;
-	} else t4 = $[8];
-	return t4;
+		$[3] = onChangeLanguage;
+		$[4] = t4;
+	} else t4 = $[4];
+	let t5;
+	let t6;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(CopyIcon, {});
+		t6 = /* @__PURE__ */ jsx("span", { children: "Copy code" });
+		$[5] = t5;
+		$[6] = t6;
+	} else {
+		t5 = $[5];
+		t6 = $[6];
+	}
+	let t7;
+	if ($[7] !== onCopyCode) {
+		t7 = /* @__PURE__ */ jsxs(Menu.Item, {
+			className: code_block_view_module_default.MenuItem,
+			onClick: onCopyCode,
+			"data-testid": "code-block-menu-copy",
+			children: [t5, t6]
+		});
+		$[7] = onCopyCode;
+		$[8] = t7;
+	} else t7 = $[8];
+	let t8;
+	if ($[9] !== getFinalFocus || $[10] !== t4 || $[11] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(Menu.Popup, {
+			className: t1,
+			finalFocus: getFinalFocus,
+			children: [t4, t7]
+		});
+		$[9] = getFinalFocus;
+		$[10] = t4;
+		$[11] = t7;
+		$[12] = t8;
+	} else t8 = $[12];
+	let t9;
+	if ($[13] !== collisionBoundary || $[14] !== t8) {
+		t9 = /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
+			className: code_block_view_module_default.Positioner,
+			sideOffset: 4,
+			align: "end",
+			collisionBoundary,
+			children: t8
+		}) });
+		$[13] = collisionBoundary;
+		$[14] = t8;
+		$[15] = t9;
+	} else t9 = $[15];
+	return t9;
 }
 function CodeBlockLanguagePicker(t0) {
-	const $ = c(22);
-	const { language, setLanguage, onShownChange } = t0;
+	const $ = c(27);
+	const { language, setLanguage, open, onOpenChange, onOpenChangeComplete, getFinalFocus } = t0;
 	const collisionBoundary = use(CollisionBoundaryContext);
 	let t1;
 	if ($[0] !== language) {
@@ -601,97 +954,110 @@ function CodeBlockLanguagePicker(t0) {
 		$[5] = t3;
 	} else t3 = $[5];
 	let t4;
-	let t5;
-	if ($[6] !== onShownChange) {
-		t4 = (open) => {
-			if (open) onShownChange(true);
-			else setQuery("");
-		};
-		t5 = (open_0) => {
-			if (!open_0) onShownChange(false);
+	if ($[6] !== onOpenChangeComplete) {
+		t4 = (open_0) => {
+			onOpenChangeComplete(open_0);
+			if (!open_0) setQuery("");
 		};
-		$[6] = onShownChange;
+		$[6] = onOpenChangeComplete;
 		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(Combobox.Value, { placeholder: "Plain Text" });
 		$[8] = t5;
-	} else {
-		t4 = $[7];
-		t5 = $[8];
-	}
+	} else t5 = $[8];
 	let t6;
 	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = /* @__PURE__ */ jsx(Combobox.Value, { placeholder: "Plain Text" });
-		$[9] = t6;
-	} else t6 = $[9];
-	let t7;
-	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-		t7 = /* @__PURE__ */ jsxs(Combobox.Trigger, {
+		t6 = /* @__PURE__ */ jsxs(Combobox.Trigger, {
 			className: code_block_view_module_default.Trigger,
 			"data-testid": "code-block-language",
-			children: [t6, /* @__PURE__ */ jsx(Combobox.Icon, {
+			children: [t5, /* @__PURE__ */ jsx(Combobox.Icon, {
 				className: code_block_view_module_default.TriggerIcon,
 				children: /* @__PURE__ */ jsx(ChevronsUpDownIcon, {})
 			})]
 		});
-		$[10] = t7;
-	} else t7 = $[10];
+		$[9] = t6;
+	} else t6 = $[9];
+	let t7;
 	let t8;
-	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
-		t8 = /* @__PURE__ */ jsxs(Combobox.Popup, {
+	let t9;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx("div", {
+			className: code_block_view_module_default.SearchRow,
+			children: /* @__PURE__ */ jsx(Combobox.Input, {
+				className: code_block_view_module_default.Search,
+				placeholder: "Search or type a language",
+				"data-testid": "code-block-language-search"
+			})
+		});
+		t8 = /* @__PURE__ */ jsx(Combobox.Empty, {
+			className: code_block_view_module_default.Empty,
+			children: "No languages found."
+		});
+		t9 = /* @__PURE__ */ jsx(Combobox.List, {
+			className: code_block_view_module_default.List,
+			children: _temp$3
+		});
+		$[10] = t7;
+		$[11] = t8;
+		$[12] = t9;
+	} else {
+		t7 = $[10];
+		t8 = $[11];
+		t9 = $[12];
+	}
+	let t10;
+	if ($[13] !== getFinalFocus) {
+		t10 = /* @__PURE__ */ jsxs(Combobox.Popup, {
 			className: code_block_view_module_default.Popup,
+			finalFocus: getFinalFocus,
 			children: [
-				/* @__PURE__ */ jsx("div", {
-					className: code_block_view_module_default.SearchRow,
-					children: /* @__PURE__ */ jsx(Combobox.Input, {
-						className: code_block_view_module_default.Search,
-						placeholder: "Search or type a language",
-						"data-testid": "code-block-language-search"
-					})
-				}),
-				/* @__PURE__ */ jsx(Combobox.Empty, {
-					className: code_block_view_module_default.Empty,
-					children: "No languages found."
-				}),
-				/* @__PURE__ */ jsx(Combobox.List, {
-					className: code_block_view_module_default.List,
-					children: _temp$3
-				})
+				t7,
+				t8,
+				t9
 			]
 		});
-		$[11] = t8;
-	} else t8 = $[11];
-	let t9;
-	if ($[12] !== collisionBoundary) {
-		t9 = /* @__PURE__ */ jsx(Combobox.Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, {
+		$[13] = getFinalFocus;
+		$[14] = t10;
+	} else t10 = $[14];
+	let t11;
+	if ($[15] !== collisionBoundary || $[16] !== t10) {
+		t11 = /* @__PURE__ */ jsx(Combobox.Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, {
 			className: code_block_view_module_default.Positioner,
 			sideOffset: 4,
 			collisionBoundary,
-			children: t8
+			children: t10
 		}) });
-		$[12] = collisionBoundary;
-		$[13] = t9;
-	} else t9 = $[13];
-	let t10;
-	if ($[14] !== itemsForView || $[15] !== query || $[16] !== selected || $[17] !== t3 || $[18] !== t4 || $[19] !== t5 || $[20] !== t9) {
-		t10 = /* @__PURE__ */ jsxs(Combobox.Root, {
+		$[15] = collisionBoundary;
+		$[16] = t10;
+		$[17] = t11;
+	} else t11 = $[17];
+	let t12;
+	if ($[18] !== itemsForView || $[19] !== onOpenChange || $[20] !== open || $[21] !== query || $[22] !== selected || $[23] !== t11 || $[24] !== t3 || $[25] !== t4) {
+		t12 = /* @__PURE__ */ jsxs(Combobox.Root, {
 			items: itemsForView,
+			autoHighlight: true,
 			value: selected,
 			onValueChange: t3,
 			inputValue: query,
 			onInputValueChange: setQuery,
-			onOpenChange: t4,
-			onOpenChangeComplete: t5,
-			children: [t7, t9]
+			open,
+			onOpenChange,
+			onOpenChangeComplete: t4,
+			children: [t6, t11]
 		});
-		$[14] = itemsForView;
-		$[15] = query;
-		$[16] = selected;
-		$[17] = t3;
-		$[18] = t4;
-		$[19] = t5;
-		$[20] = t9;
-		$[21] = t10;
-	} else t10 = $[21];
-	return t10;
+		$[18] = itemsForView;
+		$[19] = onOpenChange;
+		$[20] = open;
+		$[21] = query;
+		$[22] = selected;
+		$[23] = t11;
+		$[24] = t3;
+		$[25] = t4;
+		$[26] = t12;
+	} else t12 = $[26];
+	return t12;
 }
 function _temp$3(item_2) {
 	return /* @__PURE__ */ jsxs(Combobox.Item, {
@@ -715,7 +1081,7 @@ function defineCodeBlockView(component = CodeBlockView) {
 		as: createCodeBlockRoot,
 		contentAs: "code",
 		component
-	}), defineCodeBlockPreviewPlugin());
+	}), defineCodeBlockPreviewPlugin(), defineCodeBlockMenuKeymap());
 }
 function createCodeBlockRoot() {
 	const element = document.createElement("div");
@@ -5359,7 +5725,7 @@ function MathCodeBlock(t0) {
 	return t1;
 }
 function MermaidCodeBlock(t0) {
-	const $ = c(5);
+	const $ = c(6);
 	const { code } = t0;
 	const renderer = usePele(true);
 	if (!renderer || code.trim() === "") {
@@ -5375,19 +5741,24 @@ function MermaidCodeBlock(t0) {
 		return t1;
 	}
 	let t1;
-	if ($[2] !== code || $[3] !== renderer) {
-		t1 = /* @__PURE__ */ jsx(MermaidRender, {
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = clsx(code_block_view_module_default.Preview, code_block_view_module_default.MermaidPreview);
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== code || $[4] !== renderer) {
+		t2 = /* @__PURE__ */ jsx(MermaidRender, {
 			renderer,
 			source: code,
-			className: `${code_block_view_module_default.Preview} ${code_block_view_module_default.MermaidPreview}`,
+			className: t1,
 			"data-testid": "code-block-mermaid-preview",
 			"data-scroll-x": true
 		});
-		$[2] = code;
-		$[3] = renderer;
-		$[4] = t1;
-	} else t1 = $[4];
-	return t1;
+		$[3] = code;
+		$[4] = renderer;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
 }
 /**
 * Wrap inline `children` in one mark, special-casing the view/link marks.

package/dist/style.css

@@ -103,7 +103,7 @@
   }
 }
 
-.meow_CopyButton_D3j_9q {
+.meow_IconButton_D3j_9q {
   box-sizing: border-box;
   border: 1px solid var(--meowdown-border);
   background: var(--meowdown-popover-bg);
@@ -117,7 +117,7 @@
   padding: 0;
   display: flex;
 
-  &:hover {
+  &:hover, &[data-popup-open] {
     color: var(--meowdown-heading);
   }
 
@@ -163,6 +163,35 @@
   }
 }
 
+.meow_Menu_D3j_9q {
+  outline: none;
+  width: auto;
+  min-width: 10rem;
+  padding: .25rem;
+}
+
+.meow_MenuItem_D3j_9q {
+  cursor: pointer;
+  border-radius: .35rem;
+  outline: none;
+  align-items: center;
+  gap: .5rem;
+  padding: .3rem .5rem;
+  display: flex;
+
+  &[data-highlighted] {
+    background: color-mix(in oklab, var(--meowdown-accent) 14%, transparent);
+    color: var(--meowdown-heading);
+  }
+
+  & svg {
+    width: .9rem;
+    height: .9rem;
+    color: var(--meowdown-muted);
+    display: block;
+  }
+}
+
 .meow_SearchRow_D3j_9q {
   border-bottom: 1px solid var(--meowdown-border);
   padding: .35rem;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@meowdown/react",
   "type": "module",
-  "version": "0.83.2",
+  "version": "0.84.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -22,8 +22,8 @@
   ],
   "dependencies": {
     "@base-ui/react": "^1.9.0",
-    "@meowdown/core": "0.83.2",
-    "@meowdown/embed": "0.3.1",
+    "@meowdown/core": "0.83.3",
+    "@meowdown/embed": "0.3.2",
     "@meowdown/markdown": "0.78.0",
     "@ocavue/utils": "^1.11.0",
     "@post-embed/types": "^0.5.0",