@meowdown/core 0.83.3 → 0.84.0

package/dist/index.js

@@ -1,4 +1,5 @@
-import { Priority, Priority as Priority$1, canUseRegexLookbehind, createMarkBuilders, createNodeBuilders, defaultBlockAt, defineBaseCommands, defineBaseKeymap, defineClipboardSerializer, defineCommands, defineHistory, defineKeymap, defineMarkSpec, defineMarkView, defineNodeAttr, defineNodeSpec, definePlugin, findMarkRange, getMarkRange, getMarkType, getNodeType, isAllSelection, isApple, isAtBlockStart, isNodeSelection, isTextSelection, setBlockType, toggleNode, union, unsetBlockType, withPriority, withPriority as withPriority$1, withSkipCodeBlock } from "@prosekit/core";
+import { ATOM_SELECTED_CLASS, ATOM_VIEW_CLASS, ATOM_VIEW_CONTENT_CLASS, ATOM_VIEW_PREVIEW_CLASS, CONTENT_CLASS, EMBED_MENU_BUTTON_CLASS, EMBED_RESIZABLE_CLASS, FILE_MARK_CLASS, FILE_VIEW_CLASS, FILE_VIEW_CONTENT_CLASS, FILE_VIEW_ICON_CLASS, FILE_VIEW_NAME_CLASS, FILE_VIEW_PREVIEW_CLASS, FILE_VIEW_SIZE_CLASS, ICON_BUTTON_CLASS, ICON_CLASS, IMAGE_MARK_CLASS, IMAGE_RESIZABLE_CLASS, IMAGE_RESIZE_HANDLE_CLASS, IMAGE_VIEW_CLASS, IMAGE_VIEW_CONTENT_CLASS, IMAGE_VIEW_PREVIEW_CLASS, LINK_TEXT_MARK_CLASS, LINK_TITLE_MARK_CLASS, LINK_URI_MARK_CLASS, MATH_MARK_CLASS, MATH_VIEW_CLASS, MATH_VIEW_CONTENT_CLASS, MATH_VIEW_PREVIEW_CLASS, PACK_MARK_CLASS, PENDING_REPLACEMENT_CLASS, SHOW_CLASS, SYNTAX_MARK_CLASS, TAG_MARK_CLASS, VIRTUAL_CARET_CLASS, VIRTUAL_CARET_LAYER_CLASS, WIKILINK_MARK_CLASS, WIKILINK_VIEW_CLASS, WIKILINK_VIEW_CONTENT_CLASS, WIKILINK_VIEW_LABEL_CLASS, WIKILINK_VIEW_PREVIEW_CLASS, getIconClass } from "./class-names.js";
+import { Priority, Priority as Priority$1, canUseRegexLookbehind, createMarkBuilders, createNodeBuilders, defaultBlockAt, defineBaseCommands, defineBaseKeymap, defineClipboardSerializer, defineCommands, defineDOMEventHandler, defineHistory, defineKeymap, defineMarkSpec, defineMarkView, defineNodeAttr, defineNodeSpec, definePlugin, findMarkRange, getMarkRange, getMarkType, getNodeType, isAllSelection, isApple, isAtBlockStart, isNodeSelection, isTextSelection, setBlockType, toggleNode, union, unsetBlockType, withPriority, withPriority as withPriority$1, withSkipCodeBlock } from "@prosekit/core";
 import { codeBlockEnterRule, codeBlockInputRule, defineCodeBlockCommands, defineCodeBlockHighlight, defineCodeBlockKeymap, defineCodeBlockPreviewPlugin, defineCodeBlockSpec, isCodeBlockPreviewHiddenDecoration } from "@prosekit/extensions/code-block";
 import { definePlaceholder, definePlaceholder as definePlaceholder$1 } from "@prosekit/extensions/placeholder";
 import { defineSearchCommands, defineSearchQuery, defineSearchStatusHandler, getSearchStatus, getSearchStatus as getSearchStatus$1 } from "@prosekit/extensions/search";
@@ -611,7 +612,6 @@ function createCaretSnapPlugin(marks) {
 		})
 	});
 }
-const SELECTED_CLASS = "md-atom-selected";
 function createSelectionPlugin(marks) {
 	return new Plugin({
 		key: new PluginKey("atom-mark-selection"),
@@ -620,12 +620,12 @@ function createSelectionPlugin(marks) {
 			if (markNames.length === 0) return;
 			if (isNodeSelection(state.selection)) return;
 			const range = getSelectedRange(state, markNames);
-			if (range) return DecorationSet.create(state.doc, [Decoration.inline(range.from, range.to, { class: SELECTED_CLASS })]);
+			if (range) return DecorationSet.create(state.doc, [Decoration.inline(range.from, range.to, { class: ATOM_SELECTED_CLASS })]);
 			const { from, to, empty } = state.selection;
 			if (empty) return null;
 			const decorations = [];
 			state.doc.nodesBetween(from, to, (node, pos) => {
-				if (node.marks.some((mark) => markNames.includes(mark.type.name))) decorations.push(Decoration.inline(pos, pos + node.nodeSize, { class: SELECTED_CLASS }));
+				if (node.marks.some((mark) => markNames.includes(mark.type.name))) decorations.push(Decoration.inline(pos, pos + node.nodeSize, { class: ATOM_SELECTED_CLASS }));
 			});
 			return DecorationSet.create(state.doc, decorations);
 		}) }
@@ -1990,6 +1990,7 @@ function defineCodeBlock() {
 }
 
 // src/extensions/commands.ts
+/** @internal */
 function selectText(anchor, head) {
 	return (state, dispatch) => {
 		if (dispatch) {
@@ -1999,6 +2000,7 @@ function selectText(anchor, head) {
 		return true;
 	};
 }
+/** @internal */
 function selectTextBetween($anchor, $head, bias) {
 	return (state, dispatch) => {
 		if (dispatch) {
@@ -2008,6 +2010,7 @@ function selectTextBetween($anchor, $head, bias) {
 		return true;
 	};
 }
+/** @internal */
 function insertMarkdown(markdown) {
 	return (state, dispatch) => {
 		if (!markdown.trim()) return false;
@@ -2032,6 +2035,8 @@ function insertMarkdown(markdown) {
 * `insertText`. When a non-space character sits right before the caret, a
 * space is inserted first so the trigger can match, like a user would type
 * it. In a code block, where no menu can open, the command does nothing.
+*
+* @internal
 */
 function insertTrigger(text) {
 	return (state, dispatch) => {
@@ -2053,16 +2058,40 @@ function insertTrigger(text) {
 * Turns the current block into plain text, peeling one layer per call: a
 * non-paragraph textblock becomes a paragraph, then a paragraph in a list
 * loses its marker, then a paragraph in a blockquote lifts out of it.
+*
+* @internal
 */
 function turnIntoText() {
 	return chainCommands(setBlockType({ type: "paragraph" }), unwrapList(), lift);
 }
+/** @internal */
 function scrollIntoView() {
 	return (state, dispatch) => {
 		if (dispatch) dispatch(state.tr.scrollIntoView());
 		return true;
 	};
 }
+/**
+* Deletes the block at `pos` and puts the caret where it was. A block that is
+* the only child of its parent gives way to an empty default block (usually a
+* paragraph), since the parent cannot be left empty.
+*
+* @internal
+*/
+function deleteBlock(pos) {
+	return (state, dispatch) => {
+		const $pos = state.doc.resolve(pos);
+		const node = $pos.nodeAfter;
+		if (!node) return false;
+		if (dispatch) {
+			const end = pos + node.nodeSize;
+			const tr = $pos.parent.childCount === 1 ? state.tr.replaceWith(pos, end, $pos.parent.type.contentMatch.defaultType?.createAndFill() ?? []) : state.tr.delete(pos, end);
+			tr.setSelection(TextSelection.near(tr.doc.resolve(Math.min(pos, tr.doc.content.size)), 1));
+			dispatch(tr.scrollIntoView());
+		}
+		return true;
+	};
+}
 function defineEditorCommands() {
 	return defineCommands({
 		insertMarkdown,
@@ -2282,6 +2311,32 @@ function defineExitBoundaryHandler(getExitBoundaryHandler) {
 	return withPriority$1(definePlugin(createExitBoundaryPlugin(getExitBoundaryHandler)), Priority$1.low);
 }
 
+// src/utils/atom-view.ts
+/**
+* The atom mark view (an image, file, or wiki link) whose source holds
+* `insidePos`, a position inside the unit rather than on its edges.
+*/
+function findAtomViewAt(view, insidePos) {
+	const { node } = view.domAtPos(insidePos, 0);
+	return (isElementLike(node) ? node : node.parentElement)?.closest(`.${ATOM_VIEW_CLASS}`);
+}
+/**
+* The rendered preview of the atom mark view whose source holds `insidePos`.
+*/
+function findAtomPreviewElement(view, insidePos) {
+	return findAtomViewAt(view, insidePos)?.querySelector(`.${ATOM_VIEW_PREVIEW_CLASS}`);
+}
+/**
+* The document position of the source of the atom mark view that holds
+* `element`. Read it from the hidden content holder, not from an event's
+* position: an event on the non-editable preview lands on the unit boundary,
+* where a mark lookup would pick the next adjacent unit.
+*/
+function getAtomViewSourcePos(view, element) {
+	const content = element.closest(`.${ATOM_VIEW_CLASS}`)?.querySelector(`.${ATOM_VIEW_CONTENT_CLASS}`);
+	return content ? view.posAtDOM(content, 0) : void 0;
+}
+
 // src/utils/is-mod-event.ts
 /**
 * Whether the platform's mod key is held on `event`: `Command` on Apple, `Ctrl` elsewhere.
@@ -2314,11 +2369,11 @@ function defineFileClickHandler(getOnClick) {
 		props: { handleClick: (view, _pos, event) => {
 			const handler = getOnClick?.(view.state);
 			if (!handler) return false;
-			const preview = event.target?.closest?.(".md-file-view-preview");
+			const preview = event.target?.closest?.(`.${FILE_VIEW_PREVIEW_CLASS}`);
 			if (!preview) return false;
-			const content = preview.closest(".md-file-view")?.querySelector(".md-file-view-content");
-			if (!content) return false;
-			const hit = findFileAt(view.state, view.posAtDOM(content, 0));
+			const pos = getAtomViewSourcePos(view, preview);
+			if (pos == null) return false;
+			const hit = findFileAt(view.state, pos);
 			if (!hit) return false;
 			handler({
 				href: hit.href,
@@ -2546,7 +2601,7 @@ const SVG_NS = "http://www.w3.org/2000/svg";
 */
 function buildFileIcon() {
 	const svg = document.createElementNS(SVG_NS, "svg");
-	svg.setAttribute("class", "md-file-view-icon");
+	svg.setAttribute("class", FILE_VIEW_ICON_CLASS);
 	svg.setAttribute("viewBox", "0 0 24 24");
 	svg.setAttribute("aria-hidden", "true");
 	for (const shape of ["M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z", "M14 2v4a2 2 0 0 0 2 2h4"]) {
@@ -2572,9 +2627,9 @@ var FileMarkView = class {
 	constructor(mark, options) {
 		this.#attrs = mark.attrs;
 		this.#dom = document.createElement("span");
-		this.#dom.className = "md-file-view md-atom-view";
+		this.#dom.className = `${FILE_VIEW_CLASS} ${ATOM_VIEW_CLASS}`;
 		this.#preview = document.createElement("span");
-		this.#preview.className = "md-file-view-preview md-atom-view-preview";
+		this.#preview.className = `${FILE_VIEW_PREVIEW_CLASS} ${ATOM_VIEW_PREVIEW_CLASS}`;
 		this.#preview.contentEditable = "false";
 		this.#preview.dataset.testid = "file-pill";
 		this.#preview.dataset.fileKind = getFileKind(this.#attrs.href);
@@ -2582,15 +2637,15 @@ var FileMarkView = class {
 		this.#dom.appendChild(this.#preview);
 		this.#preview.appendChild(buildFileIcon());
 		this.#nameElement = document.createElement("span");
-		this.#nameElement.className = "md-file-view-name";
+		this.#nameElement.className = FILE_VIEW_NAME_CLASS;
 		this.#nameElement.textContent = this.#attrs.name;
 		this.#preview.appendChild(this.#nameElement);
 		this.#sizeElement = document.createElement("span");
-		this.#sizeElement.className = "md-file-view-size";
+		this.#sizeElement.className = FILE_VIEW_SIZE_CLASS;
 		this.#sizeElement.dataset.testid = "file-pill-size";
 		this.#preview.appendChild(this.#sizeElement);
 		this.#contentDOM = document.createElement("span");
-		this.#contentDOM.className = "md-file-view-content md-atom-view-content";
+		this.#contentDOM.className = `${FILE_VIEW_CONTENT_CLASS} ${ATOM_VIEW_CONTENT_CLASS}`;
 		this.#dom.appendChild(this.#contentDOM);
 		this.#loadFileInfo(options?.resolveFileInfo);
 	}
@@ -2654,7 +2709,7 @@ function defineFileView(getOptions) {
 const revealActiveMatch = new Plugin({ props: { decorations: guardDecorations((state) => {
 	const { from, to, empty } = state.selection;
 	if (empty || getSearchStatus$1(state).active === 0) return;
-	return DecorationSet.create(state.doc, [Decoration.inline(from, to, { class: "show" })]);
+	return DecorationSet.create(state.doc, [Decoration.inline(from, to, { class: SHOW_CLASS })]);
 }) } });
 /**
 * Find over the editor's text. `setSearchQuery` highlights every match and
@@ -2764,37 +2819,39 @@ function getLinkUnitAt(state, pos) {
 const imageClickKey = new PluginKey("meowdown-image-click");
 /**
 * The image preview wrapper around `target`, or nothing when the wrapper holds
-* a post-embed card: its links and controls have their own click behavior.
+* a post-embed card (its links and controls have their own click behavior) or
+* `target` is the preview's menu button.
 */
 function getClosestImagePreview(target) {
 	if (!(target instanceof HTMLElement)) return;
-	const preview = target.closest(".md-image-view-preview");
+	if (target.closest(`.${"md-embed-menu-button"}`)) return;
+	const preview = target.closest(`.${IMAGE_VIEW_PREVIEW_CLASS}`);
 	if (!preview || preview.dataset.postEmbed != null) return;
 	return preview;
 }
 function getPreviewImage(preview) {
-	return preview.querySelector("img") ?? void 0;
+	return preview.querySelector("img");
 }
 function findImageAt(state, pos) {
 	const range = getMarkRangeAt(state, pos, "mdImage");
 	if (!range) return;
-	const { src, alt } = range.mark.attrs;
+	const { from, to, mark } = range;
+	const { src, alt, syntax } = mark.attrs;
 	return {
-		from: range.from,
-		to: range.to,
+		from,
+		to,
 		src,
-		alt
+		alt,
+		syntax,
+		kind: matchEmbed(src) ?? "image"
 	};
 }
 /**
-* Resolve the image hit for a preview element via its content holder, not the
-* event's document position: an event on the non-editable preview lands on the
-* run boundary, where `getMarkRange` would pick the next adjacent image.
+* The image whose rendered preview, menu button, or other element is `element`.
 */
-function findImageForPreview(view, preview) {
-	const content = preview.closest(".md-image-view")?.querySelector(".md-image-view-content");
-	if (!content) return;
-	return findImageAt(view.state, view.posAtDOM(content, 0));
+function findImageForElement(view, element) {
+	const pos = getAtomViewSourcePos(view, element);
+	return pos == null ? void 0 : findImageAt(view.state, pos);
 }
 /**
 * Fingers wander a little during a tap; past this it is a scroll or a drag.
@@ -2830,12 +2887,12 @@ function defineImageClickHandler(getOnClick) {
 		const preview = getClosestImagePreview(event.target);
 		if (!preview) return false;
 		event.preventDefault();
-		const hit = findImageForPreview(view, preview);
+		const hit = findImageForElement(view, preview);
 		if (hit) handler({
 			src: hit.src,
 			alt: hit.alt,
 			event,
-			element: getPreviewImage(preview),
+			element: getPreviewImage(preview) ?? void 0,
 			mod: isModEvent(event)
 		});
 		return true;
@@ -2854,7 +2911,7 @@ function defineImageClickHandler(getOnClick) {
 					pendingTaps.delete(view);
 					if (event.touches.length !== 1) return false;
 					if (!getClosestImagePreview(event.target)) return false;
-					if (event.target instanceof HTMLElement && event.target.closest(".md-image-resize-handle")) return false;
+					if (event.target instanceof HTMLElement && event.target.closest(`.${"md-image-resize-handle"}`)) return false;
 					const touch = event.changedTouches[0];
 					if (!touch) return false;
 					pendingTaps.set(view, {
@@ -2882,13 +2939,13 @@ function defineImageClickHandler(getOnClick) {
 				if (!handler) return false;
 				const preview = getClosestImagePreview(event.target);
 				if (!preview) return false;
-				const hit = findImageForPreview(view, preview);
+				const hit = findImageForElement(view, preview);
 				if (!hit) return false;
 				handler({
 					src: hit.src,
 					alt: hit.alt,
 					event,
-					element: getPreviewImage(preview),
+					element: getPreviewImage(preview) ?? void 0,
 					mod: isModEvent(event)
 				});
 				return true;
@@ -2945,7 +3002,7 @@ function defineTagClickHandler(getOnClick) {
 	return defineMarkClickHandler({
 		key: tagClickKey,
 		enabled: (state) => !!getOnClick?.(state),
-		selector: ".md-tag",
+		selector: `.${TAG_MARK_CLASS}`,
 		preventDefault: false,
 		findPayloadAt: (state, pos) => findTagAt(state, pos)?.tag,
 		onClick: (tag, event, state) => {
@@ -2982,9 +3039,8 @@ function findWikilinkAt(state, pos) {
 * next adjacent mark; the hidden content holder has the exact source position.
 */
 function findWikilinkForElement(view, element) {
-	const content = element.closest(".md-wikilink-view")?.querySelector(".md-wikilink-view-content");
-	if (!content) return;
-	return findWikilinkAt(view.state, view.posAtDOM(content, 0));
+	const pos = getAtomViewSourcePos(view, element);
+	return pos == null ? void 0 : findWikilinkAt(view.state, pos);
 }
 /**
 * Call `onClick` when the user clicks a rendered wikilink label, or presses
@@ -2995,7 +3051,7 @@ function defineWikilinkClickHandler(getOnClick) {
 	return defineMarkClickHandler({
 		key: wikilinkClickKey,
 		enabled: (state) => !!getOnClick?.(state),
-		selector: ".md-wikilink-view-preview",
+		selector: `.${WIKILINK_VIEW_PREVIEW_CLASS}`,
 		preventDefault: false,
 		findPayloadAt: (state, pos) => findWikilinkAt(state, pos)?.target,
 		findPayloadForElement: (view, element) => findWikilinkForElement(view, element)?.target,
@@ -3442,6 +3498,32 @@ function wikiEmbedBasename(target) {
 
 // src/extensions/image.ts
 /**
+* The menu button of an image or card, handled by `defineEmbedMenuHandler`.
+* It stays out of the tab order: `Mod-/` opens the menu from the keyboard.
+*/
+function createEmbedMenuButton() {
+	const button = document.createElement("button");
+	button.type = "button";
+	button.className = `${EMBED_MENU_BUTTON_CLASS} ${ICON_BUTTON_CLASS}`;
+	button.tabIndex = -1;
+	button.setAttribute("aria-label", "More");
+	button.setAttribute("aria-haspopup", "menu");
+	button.title = `More (${isApple ? "⌘/" : "Ctrl+/"})`;
+	button.dataset.testid = "embed-menu";
+	const icon = document.createElement("span");
+	icon.className = `${ICON_CLASS} ${getIconClass("ellipsis")}`;
+	icon.setAttribute("aria-hidden", "true");
+	button.appendChild(icon);
+	return button;
+}
+/**
+* The YouTube video saved in a mark's `snapshot` attr, or `null` to fetch it.
+*/
+function getSavedYouTubeVideo(snapshot) {
+	const saved = snapshot == null ? void 0 : parsePostEmbedSnapshot(snapshot);
+	return saved?.kind === "youtube-video" ? saved.data : null;
+}
+/**
 * Show an `src` as-is when it is an http(s) URL, otherwise skip rendering it.
 */
 function defaultResolveImageUrl(src) {
@@ -3566,6 +3648,7 @@ var ImageMarkView = class {
 	#attrs;
 	#resizableRoot;
 	#image;
+	#youtube;
 	#destroyed = false;
 	constructor(mark, view, options) {
 		this.#attrs = mark.attrs;
@@ -3575,9 +3658,9 @@ var ImageMarkView = class {
 		this.#mediaUrlProtocols = options.mediaUrlProtocols;
 		this.#resolveYouTubeVideo = options.resolveYouTubeVideo ?? defaultResolveYouTubeVideo;
 		this.#dom = document.createElement("span");
-		this.#dom.className = "md-image-view md-atom-view";
+		this.#dom.className = `${IMAGE_VIEW_CLASS} ${ATOM_VIEW_CLASS}`;
 		this.#contentDOM = document.createElement("span");
-		this.#contentDOM.className = "md-image-view-content md-atom-view-content";
+		this.#contentDOM.className = `${IMAGE_VIEW_CONTENT_CLASS} ${ATOM_VIEW_CONTENT_CLASS}`;
 		this.#contentDOM.dataset.testid = "image-source";
 		for (const [name, value] of Object.entries(NON_PROSE_ATTRS)) this.#contentDOM.setAttribute(name, value);
 		this.#dom.appendChild(this.#contentDOM);
@@ -3592,8 +3675,9 @@ var ImageMarkView = class {
 	update(mark) {
 		const next = mark.attrs;
 		const previous = this.#attrs;
-		if (next.src !== previous.src || next.snapshot !== previous.snapshot) return false;
+		if (next.src !== previous.src) return false;
 		this.#attrs = next;
+		if (this.#youtube && next.snapshot !== previous.snapshot) this.#youtube.data = getSavedYouTubeVideo(next.snapshot);
 		if (this.#image && next.alt !== previous.alt) this.#image.alt = next.alt;
 		if (this.#resizableRoot && (next.width !== previous.width || next.height !== previous.height)) {
 			if (this.#image) applyImageDisplaySize(this.#resizableRoot, this.#image, next.width, next.height);
@@ -3620,6 +3704,7 @@ var ImageMarkView = class {
 			wrapper.dataset.testid = `${kind}-embed`;
 			wrapper.dataset.postEmbed = kind;
 			wrapper.appendChild(this.#buildPostEmbed(kind, src));
+			wrapper.appendChild(createEmbedMenuButton());
 			this.#insertPreview(wrapper);
 			return;
 		}
@@ -3653,7 +3738,7 @@ var ImageMarkView = class {
 	}
 	#createWrapper() {
 		const wrapper = document.createElement("span");
-		wrapper.className = "md-image-view-preview md-atom-view-preview";
+		wrapper.className = `${IMAGE_VIEW_PREVIEW_CLASS} ${ATOM_VIEW_PREVIEW_CLASS}`;
 		return wrapper;
 	}
 	/**
@@ -3671,13 +3756,13 @@ var ImageMarkView = class {
 		const wrapper = this.#createWrapper();
 		wrapper.dataset.testid = "image-preview";
 		wrapper.appendChild(this.#buildResizableImage(url));
+		wrapper.appendChild(createEmbedMenuButton());
 		return wrapper;
 	}
 	/**
 	* Resolve X cards from their URL; YouTube cards may reuse a saved snapshot.
 	*/
 	#buildPostEmbed(kind, src) {
-		const saved = this.#attrs.snapshot == null ? void 0 : parsePostEmbedSnapshot(this.#attrs.snapshot);
 		if (kind === "x-post") {
 			registerXPost();
 			const element = document.createElement("meowdown-embed-x");
@@ -3686,13 +3771,17 @@ var ImageMarkView = class {
 			element.url = src;
 			return element;
 		}
-		registerYouTubeVideo();
-		const element = document.createElement("meowdown-embed-youtube");
-		element.playback = "inline";
-		element.data = saved?.kind === "youtube-video" ? saved.data : null;
-		element.resolver = this.#persisting(kind, this.#resolveYouTubeVideo);
-		element.url = src;
-		return this.#buildResizableVideo(element);
+		if (kind === "youtube-video") {
+			registerYouTubeVideo();
+			const element = document.createElement("meowdown-embed-youtube");
+			element.playback = "inline";
+			element.data = getSavedYouTubeVideo(this.#attrs.snapshot);
+			element.resolver = this.#persisting(kind, this.#resolveYouTubeVideo);
+			element.url = src;
+			this.#youtube = element;
+			return this.#buildResizableVideo(element);
+		}
+		throw new Error(`Unexpected embed kind ${kind}`);
 	}
 	/**
 	* Wrap a resolver so its first valid answer is persisted under `kind`.
@@ -3722,12 +3811,12 @@ var ImageMarkView = class {
 		registerResizableRootElement();
 		registerResizableHandleElement();
 		const root = document.createElement("prosekit-resizable-root");
-		root.className = "md-embed-resizable";
+		root.className = EMBED_RESIZABLE_CLASS;
 		root.dataset.testid = "embed-resizable";
 		applySize(root, this.#attrs.width, null);
 		root.appendChild(element);
 		const handle = document.createElement("prosekit-resizable-handle");
-		handle.className = "md-image-resize-handle";
+		handle.className = IMAGE_RESIZE_HANDLE_CLASS;
 		handle.setAttribute("position", "bottom-right");
 		handle.addEventListener("click", (event) => event.stopPropagation());
 		root.appendChild(handle);
@@ -3748,12 +3837,12 @@ var ImageMarkView = class {
 		registerResizableRootElement();
 		registerResizableHandleElement();
 		const root = document.createElement("prosekit-resizable-root");
-		root.className = "md-image-resizable";
+		root.className = IMAGE_RESIZABLE_CLASS;
 		root.dataset.testid = "image-resizable";
 		root.setAttribute("data-loading", "");
 		applySize(root, this.#attrs.width, this.#attrs.height);
 		const handle = document.createElement("prosekit-resizable-handle");
-		handle.className = "md-image-resize-handle";
+		handle.className = IMAGE_RESIZE_HANDLE_CLASS;
 		handle.setAttribute("position", "bottom-right");
 		handle.addEventListener("click", (event) => event.stopPropagation());
 		root.appendChild(handle);
@@ -4929,10 +5018,10 @@ function defineMdImage() {
 		},
 		toDOM: () => [
 			"span",
-			{ class: "md-image" },
+			{ class: IMAGE_MARK_CLASS },
 			0
 		],
-		parseDOM: [{ tag: "span.md-image" }]
+		parseDOM: [{ tag: `span.${IMAGE_MARK_CLASS}` }]
 	});
 }
 /**
@@ -4944,10 +5033,10 @@ function defineMdMark() {
 		inclusive: false,
 		toDOM: () => [
 			"span",
-			{ class: "md-mark" },
+			{ class: SYNTAX_MARK_CLASS },
 			0
 		],
-		parseDOM: [{ tag: "span.md-mark" }]
+		parseDOM: [{ tag: `span.${SYNTAX_MARK_CLASS}` }]
 	});
 }
 function defineMdEm() {
@@ -4983,7 +5072,7 @@ function defineMdLinkText() {
 		toDOM: (mark) => [
 			"a",
 			{
-				class: "md-link",
+				class: LINK_TEXT_MARK_CLASS,
 				href: mark.attrs.href
 			},
 			0
@@ -5003,12 +5092,12 @@ function defineMdLinkUri() {
 		toDOM: () => [
 			"span",
 			{
-				class: "md-link-uri",
+				class: LINK_URI_MARK_CLASS,
 				...NON_PROSE_ATTRS
 			},
 			0
 		],
-		parseDOM: [{ tag: "span.md-link-uri" }]
+		parseDOM: [{ tag: `span.${LINK_URI_MARK_CLASS}` }]
 	});
 }
 function defineMdLinkTitle() {
@@ -5017,10 +5106,10 @@ function defineMdLinkTitle() {
 		inclusive: false,
 		toDOM: () => [
 			"span",
-			{ class: "md-link-title" },
+			{ class: LINK_TITLE_MARK_CLASS },
 			0
 		],
-		parseDOM: [{ tag: "span.md-link-title" }]
+		parseDOM: [{ tag: `span.${LINK_TITLE_MARK_CLASS}` }]
 	});
 }
 function defineMdDel() {
@@ -5046,10 +5135,10 @@ function defineMdTag() {
 		name: "mdTag",
 		toDOM: () => [
 			"span",
-			{ class: "md-tag" },
+			{ class: TAG_MARK_CLASS },
 			0
 		],
-		parseDOM: [{ tag: "span.md-tag" }]
+		parseDOM: [{ tag: `span.${TAG_MARK_CLASS}` }]
 	});
 }
 /**
@@ -5065,10 +5154,10 @@ function defineMdWikilink() {
 		},
 		toDOM: () => [
 			"span",
-			{ class: "md-wikilink" },
+			{ class: WIKILINK_MARK_CLASS },
 			0
 		],
-		parseDOM: [{ tag: "span.md-wikilink" }]
+		parseDOM: [{ tag: `span.${WIKILINK_MARK_CLASS}` }]
 	});
 }
 function defineMdFile() {
@@ -5082,10 +5171,10 @@ function defineMdFile() {
 		},
 		toDOM: () => [
 			"span",
-			{ class: "md-file" },
+			{ class: FILE_MARK_CLASS },
 			0
 		],
-		parseDOM: [{ tag: "span.md-file" }]
+		parseDOM: [{ tag: `span.${FILE_MARK_CLASS}` }]
 	});
 }
 /**
@@ -5098,10 +5187,10 @@ function defineMdMath() {
 		attrs: { formula: { default: "" } },
 		toDOM: () => [
 			"span",
-			{ class: "md-math" },
+			{ class: MATH_MARK_CLASS },
 			0
 		],
-		parseDOM: [{ tag: "span.md-math" }]
+		parseDOM: [{ tag: `span.${MATH_MARK_CLASS}` }]
 	});
 }
 /**
@@ -5125,16 +5214,17 @@ function defineMdPack() {
 			revealInHide: { default: null }
 		},
 		toDOM: (mark) => {
+			const attrs = mark.attrs;
 			return [
 				"span",
 				{
-					class: "md-pack",
-					"data-key": mark.attrs.key
+					class: PACK_MARK_CLASS,
+					"data-key": attrs.key
 				},
 				0
 			];
 		},
-		parseDOM: [{ tag: "span.md-pack" }]
+		parseDOM: [{ tag: `span.${PACK_MARK_CLASS}` }]
 	});
 }
 function defineInlineMarks() {
@@ -5508,7 +5598,7 @@ function defineLinkClickHandler(getOnClick) {
 	return defineMarkClickHandler({
 		key: linkClickKey,
 		enabled: (state) => !!getOnClick?.(state),
-		selector: ".md-link",
+		selector: `.${LINK_TEXT_MARK_CLASS}`,
 		preventDefault: true,
 		findPayloadAt: (state, pos) => getLinkUnitAt(state, pos)?.href,
 		onClick: (href, event, state) => {
@@ -6168,7 +6258,7 @@ function computeRevealDecorations(state, mode) {
 	}
 	if (ranges.length === 0) return;
 	const decorations = ranges.map((range) => {
-		return Decoration.inline(range.from, range.to, { class: "show" });
+		return Decoration.inline(range.from, range.to, { class: SHOW_CLASS });
 	});
 	return DecorationSet.create(state.doc, decorations);
 }
@@ -6220,9 +6310,9 @@ var MathMarkView = class {
 	constructor(mark, view) {
 		this.#formula = mark.attrs.formula;
 		this.#dom = document.createElement("span");
-		this.#dom.className = "md-math-view";
+		this.#dom.className = MATH_VIEW_CLASS;
 		this.#preview = document.createElement("span");
-		this.#preview.className = "md-math-view-preview";
+		this.#preview.className = MATH_VIEW_PREVIEW_CLASS;
 		this.#preview.dataset.testid = "math-preview";
 		this.#preview.contentEditable = "false";
 		this.#preview.addEventListener("mousedown", (event) => {
@@ -6234,7 +6324,7 @@ var MathMarkView = class {
 			view.focus();
 		});
 		this.#contentDOM = document.createElement("span");
-		this.#contentDOM.className = "md-math-view-content";
+		this.#contentDOM.className = MATH_VIEW_CONTENT_CLASS;
 		for (const [name, value] of Object.entries(NON_PROSE_ATTRS)) this.#contentDOM.setAttribute(name, value);
 		this.#dom.appendChild(this.#preview);
 		this.#dom.appendChild(this.#contentDOM);
@@ -6643,7 +6733,7 @@ const pendingReplacementPlugin = new Plugin({
 	props: { decorations: guardDecorations((state) => {
 		const pending = getPendingReplacement(state);
 		if (!pending || pending.from >= pending.to) return null;
-		return DecorationSet.create(state.doc, [Decoration.inline(pending.from, pending.to, { class: "md-pending-replacement" })]);
+		return DecorationSet.create(state.doc, [Decoration.inline(pending.from, pending.to, { class: PENDING_REPLACEMENT_CLASS })]);
 	}) }
 });
 function startPendingReplacement(options) {
@@ -6896,10 +6986,6 @@ function findAtomEdgeRect(view, pos, side) {
 		return side === 1 ? fragments[0] : fragments[fragments.length - 1];
 	}
 }
-function findAtomPreviewElement(view, insidePos) {
-	const { node } = view.domAtPos(insidePos, 0);
-	return (node instanceof Element ? node : node.parentElement)?.closest(".md-atom-view")?.querySelector(".md-atom-view-preview") ?? void 0;
-}
 /**
 * The caret rect for scroll targeting: the head-anchored subset of the
 * geometry the virtual caret draws. Skips the native-selection measurement
@@ -7288,19 +7374,19 @@ function createWikilinkMarkView() {
 	return (mark) => {
 		const attrs = mark.attrs;
 		const dom = document.createElement("span");
-		dom.className = "md-wikilink-view md-atom-view";
+		dom.className = `${WIKILINK_VIEW_CLASS} ${ATOM_VIEW_CLASS}`;
 		const preview = document.createElement("span");
-		preview.className = "md-wikilink-view-preview md-atom-view-preview";
+		preview.className = `${WIKILINK_VIEW_PREVIEW_CLASS} ${ATOM_VIEW_PREVIEW_CLASS}`;
 		preview.contentEditable = "false";
 		preview.dataset.testid = "wikilink";
 		dom.appendChild(preview);
 		const label = document.createElement("span");
-		label.className = "md-wikilink-view-label";
+		label.className = WIKILINK_VIEW_LABEL_CLASS;
 		label.contentEditable = "false";
 		label.textContent = attrs.display || attrs.target;
 		preview.appendChild(label);
 		const contentDOM = document.createElement("span");
-		contentDOM.className = "md-wikilink-view-content md-atom-view-content";
+		contentDOM.className = `${WIKILINK_VIEW_CONTENT_CLASS} ${ATOM_VIEW_CONTENT_CLASS}`;
 		dom.appendChild(contentDOM);
 		return {
 			dom,
@@ -7367,7 +7453,7 @@ function defineEditorExtensionImpl(options) {
 		strategy: "doc"
 	}), defineReadonly((state) => !!getEditorConfig(state).readOnly), defineViewAttributes((state) => {
 		const config = getEditorConfig(state);
-		const attributes = { class: "meowdown-content" };
+		const attributes = { class: CONTENT_CLASS };
 		if (config.editorClassName) attributes.class += ` ${config.editorClassName}`;
 		if (config.spellCheck != null) attributes.spellcheck = String(config.spellCheck);
 		if (config.writingSuggestions != null) attributes.writingsuggestions = String(config.writingSuggestions);
@@ -7539,6 +7625,92 @@ const codeBlockLanguages = languages.map((language) => ({
 	value: language.name.toLowerCase()
 })).filter((language) => !excludeLanguages.has(language.label)).concat(extraLanguages).sort((a, b) => a.label.localeCompare(b.label));
 
+// src/extensions/embed-menu.ts
+/**
+* The image or card that the selection covers exactly, as arrow keys select
+* it.
+*/
+function getSelectedEmbed(state) {
+	const { from, to, empty } = state.selection;
+	if (empty) return;
+	const embed = findImageAt(state, from);
+	return embed && embed.from === from && embed.to === to ? embed : void 0;
+}
+/**
+* Replace the X post or YouTube card at `pos` with an ordinary link and put
+* the caret after it. A card without alt text becomes its bare URL, which
+* renders as an autolink; otherwise the `![alt](src "title")` source loses its
+* `!`. The trailing magic comment (size and saved snapshot) is dropped. Images
+* and `![[target]]` embeds are not converted.
+*/
+function convertEmbedToLink(pos) {
+	return (state, dispatch) => {
+		const embed = findImageAt(state, pos);
+		if (!embed || embed.kind === "image" || embed.syntax != null) return false;
+		if (dispatch) {
+			const source = stripMagicComment(state.doc.textBetween(embed.from, embed.to));
+			dispatch(replaceEmbed(state, embed, embed.alt ? source.slice(1) : embed.src));
+		}
+		return true;
+	};
+}
+/**
+* Delete the image or card at `pos`, with its source and magic comment, and
+* put the caret where it was.
+*/
+function deleteEmbed(pos) {
+	return (state, dispatch) => {
+		const embed = findImageAt(state, pos);
+		if (!embed) return false;
+		if (dispatch) dispatch(replaceEmbed(state, embed, ""));
+		return true;
+	};
+}
+/**
+* Replace the source of `embed` with `text`, which may be empty, and put the
+* caret after the text.
+*/
+function replaceEmbed(state, embed, text) {
+	const { from, to } = embed;
+	const tr = text ? state.tr.insertText(text, from, to) : state.tr.delete(from, to);
+	return tr.setSelection(TextSelection.create(tr.doc, from + text.length)).scrollIntoView();
+}
+/**
+* The menu button of the card at `pos`, if the card is rendered.
+*/
+function getEmbedMenuButton(view, pos) {
+	return findAtomViewAt(view, pos + 1)?.querySelector(`.${EMBED_MENU_BUTTON_CLASS}`);
+}
+function getButtonTarget(target) {
+	if (!isElementLike(target)) return;
+	return target.closest(`.${EMBED_MENU_BUTTON_CLASS}`);
+}
+/**
+* Call `onOpen` when the user clicks the menu button of an image, X post card,
+* or YouTube card, or presses `Mod-/` with one selected.
+*/
+function defineEmbedMenuHandler(onOpen) {
+	const openSelectedEmbed = (state, dispatch, view) => {
+		const embed = getSelectedEmbed(state);
+		const button = embed && view && getEmbedMenuButton(view, embed.from);
+		if (!embed || !button) return false;
+		if (dispatch) onOpen(embed, button);
+		return true;
+	};
+	return union(defineDOMEventHandler("mousedown", (_view, event) => {
+		if (!getButtonTarget(event.target)) return false;
+		event.preventDefault();
+		return true;
+	}), defineDOMEventHandler("click", (view, event) => {
+		const button = getButtonTarget(event.target);
+		if (!button) return false;
+		event.preventDefault();
+		const embed = findImageForElement(view, button);
+		if (embed) onOpen(embed, button);
+		return true;
+	}), defineKeymap({ "Mod-/": openSelectedEmbed }));
+}
+
 // src/extensions/key-bindings.ts
 /**
 * Human-readable descriptions of the editor's formatting and heading shortcuts.
@@ -7558,7 +7730,7 @@ const EDITOR_KEY_BINDINGS = {
 	"Mod-Alt-5": "Heading 5",
 	"Mod-Alt-6": "Heading 6",
 	"Mod-.": "Fold or unfold a bullet",
-	"Mod-/": "Open the code block menu",
+	"Mod-/": "Open the code block or embed menu",
 	"Shift-Enter": "Insert a line break, or leave a code block from its end",
 	"Mod-Enter": "Follow the link under the caret, or cycle a checkbox task",
 	"Mod-Shift-Enter": "Cycle a circle checkbox task",
@@ -7827,7 +7999,7 @@ const CLOSE_DELAY$1 = 100;
 function defineLinkHoverHandler(onHoverChange, { canLeave } = {}) {
 	return defineMarkHoverHandler({
 		key: linkHoverKey,
-		selector: ".md-link",
+		selector: `.${LINK_TEXT_MARK_CLASS}`,
 		openDelay: OPEN_DELAY$1,
 		closeDelay: CLOSE_DELAY$1,
 		tap: true,
@@ -7891,9 +8063,9 @@ var VirtualCaretView = class {
 		this.#view = view;
 		this.#document = view.dom.ownerDocument;
 		this.#layer = layer;
-		this.#layer.classList.add("md-virtual-caret-layer");
+		this.#layer.classList.add(VIRTUAL_CARET_LAYER_CLASS);
 		this.#caret = this.#layer.appendChild(this.#document.createElement("div"));
-		this.#caret.className = "md-virtual-caret";
+		this.#caret.className = VIRTUAL_CARET_CLASS;
 		this.#caret.dataset.testid = "virtual-caret";
 		this.#document.addEventListener("selectionchange", this.#requestReposition);
 		this.#unsubscribeModality = onIsTouchInputChange(this.#requestReposition);
@@ -7917,7 +8089,7 @@ var VirtualCaretView = class {
 		this.#view.dom.removeEventListener("blur", this.#handleBlur);
 		this.#resizeObserver?.disconnect();
 		this.#caret.remove();
-		this.#layer.classList.remove("md-virtual-caret-layer");
+		this.#layer.classList.remove(VIRTUAL_CARET_LAYER_CLASS);
 		delete this.#layer.dataset.focused;
 		this.#view.dom.removeAttribute(DATA_ATTRIBUTE);
 	}
@@ -8044,7 +8216,7 @@ const CLOSE_DELAY = 100;
 function defineWikilinkHoverHandler(onHoverChange, openDelay = OPEN_DELAY, closeDelay = CLOSE_DELAY) {
 	return defineMarkHoverHandler({
 		key: wikilinkHoverKey,
-		selector: ".md-wikilink-view-preview",
+		selector: `.${WIKILINK_VIEW_PREVIEW_CLASS}`,
 		openDelay,
 		closeDelay,
 		tap: false,
@@ -8148,4 +8320,4 @@ function getVirtualElementFromRange(view, range) {
 	};
 }
 
-export { EDITOR_KEY_BINDINGS, Priority, buildFileMarkdown, codeBlockLanguages, collectReferenceDefinitions, defaultResolveImageUrl, defaultResolveXPost, defaultResolveYouTubeVideo, defineBackspaceEmptyFirstBlock, defineBulletAfterHeading, defineCodeBlockPreviewPlugin, defineCodeBlockSyntaxHighlight, defineEditorExtension, defineEmbedPaste, defineExitBoundaryHandler, defineFileClickHandler, defineFilePaste, defineFileView, defineFollowLinkHandler, defineHTMLComment, defineImage, defineImageClickHandler, defineLinkClickHandler, defineLinkCommands, defineLinkEditKeymap, defineLinkHoverHandler, defineLinkPaste, defineMath, definePendingReplacementHandler, definePlaceholder, defineReadonly, defineSearchStatusHandler, defineSubstitution, defineTagClickHandler, defineViewAttributes, defineVirtualCaret, defineWikilinkClickHandler, defineWikilinkHoverHandler, defineWikilinkTrigger, defineXPostMediaClickHandler, defineYouTubeVideoClickHandler, dismissLinkHover, docToMarkdown, docToParagraphMarkdown, formatFileSize, formatSizedWikiEmbed, getCodeTokens, getEditorConfig, getFileKind, getIsComposing, getLinkText, getLinkUnitAt, getMarkBuilders, getPendingReplacement, getSearchStatus, getSelectedText, getTableColumnAlign, getTextblockDisplayText, getVirtualElementFromRange, inlineTextToMarkChunks, inlineTextToMarkChunksWithContext, insertLink, isCodeBlockPreviewHiddenDecoration, isLinkTextForHref, isMarkOfType, isModEvent, isNodeOfType, isReferenceDefinitionNode, isSelectionInTableCell, loadKaTeX, markdownToDoc, normalizeHref, paragraphMarkdownToDoc, parsePostEmbedSnapshot, parseWikiEmbed, removeLink, renderMathInto, updateEditorConfig, updateLink, wikiEmbedBasename, withPriority };
+export { EDITOR_KEY_BINDINGS, Priority, buildFileMarkdown, codeBlockLanguages, collectReferenceDefinitions, convertEmbedToLink, defaultResolveImageUrl, defaultResolveXPost, defaultResolveYouTubeVideo, defineBackspaceEmptyFirstBlock, defineBulletAfterHeading, defineCodeBlockPreviewPlugin, defineCodeBlockSyntaxHighlight, defineEditorExtension, defineEmbedMenuHandler, defineEmbedPaste, defineExitBoundaryHandler, defineFileClickHandler, defineFilePaste, defineFileView, defineFollowLinkHandler, defineHTMLComment, defineImage, defineImageClickHandler, defineLinkClickHandler, defineLinkCommands, defineLinkEditKeymap, defineLinkHoverHandler, defineLinkPaste, defineMath, definePendingReplacementHandler, definePlaceholder, defineReadonly, defineSearchStatusHandler, defineSubstitution, defineTagClickHandler, defineViewAttributes, defineVirtualCaret, defineWikilinkClickHandler, defineWikilinkHoverHandler, defineWikilinkTrigger, defineXPostMediaClickHandler, defineYouTubeVideoClickHandler, deleteBlock, deleteEmbed, dismissLinkHover, docToMarkdown, docToParagraphMarkdown, formatFileSize, formatSizedWikiEmbed, getCodeTokens, getEditorConfig, getFileKind, getIsComposing, getLinkText, getLinkUnitAt, getMarkBuilders, getPendingReplacement, getSearchStatus, getSelectedText, getTableColumnAlign, getTextblockDisplayText, getVirtualElementFromRange, inlineTextToMarkChunks, inlineTextToMarkChunksWithContext, insertLink, insertMarkdown, insertTrigger, isCodeBlockPreviewHiddenDecoration, isLinkTextForHref, isMarkOfType, isModEvent, isNodeOfType, isReferenceDefinitionNode, isSelectionInTableCell, loadKaTeX, markdownToDoc, normalizeHref, paragraphMarkdownToDoc, parsePostEmbedSnapshot, parseWikiEmbed, removeLink, renderMathInto, scrollIntoView, selectText, selectTextBetween, turnIntoText, updateEditorConfig, updateLink, wikiEmbedBasename, withPriority };