emdash 1.2.0 → 1.3.0

package/src/components/InlinePortableTextEditor.tsx

@@ -2,18 +2,17 @@
  * Self-contained inline Portable Text editor for visual editing.
  *
  * Uses TipTap directly with content extensions — no admin UI deps.
- * Includes BubbleMenu for inline formatting (bold, italic, etc.)
- * but no toolbar, no media picker, no section picker.
+ * Includes the admin editor's selection toolbar and slash menu, and a
+ * toolbar and picker for images, but no fixed toolbar, sidebar, or section
+ * picker.
  *
  * Converts between Portable Text and ProseMirror on mount/save.
  * Auto-saves on blur, dispatches custom events for toolbar integration.
  */
 
 import { htmlBlockFields } from "@emdash-cms/admin/html-block";
-import { autoUpdate, flip, offset, shift, useFloating } from "@floating-ui/react";
-import { Extension, Node, mergeAttributes, type JSONContent, type Range } from "@tiptap/core";
+import { Node, mergeAttributes, type JSONContent } from "@tiptap/core";
 import Focus from "@tiptap/extension-focus";
-import Image from "@tiptap/extension-image";
 import Link from "@tiptap/extension-link";
 import Placeholder from "@tiptap/extension-placeholder";
 import Subscript from "@tiptap/extension-subscript";
@@ -21,13 +20,11 @@ import Superscript from "@tiptap/extension-superscript";
 import TextAlign from "@tiptap/extension-text-align";
 import Typography from "@tiptap/extension-typography";
 import Underline from "@tiptap/extension-underline";
-import { Plugin } from "@tiptap/pm/state";
+import { Plugin, type Transaction } from "@tiptap/pm/state";
 import { useEditor, EditorContent, type Editor } from "@tiptap/react";
-import { BubbleMenu } from "@tiptap/react/menus";
 import StarterKit from "@tiptap/starter-kit";
-import Suggestion from "@tiptap/suggestion";
+import { exitSuggestion } from "@tiptap/suggestion";
 import * as React from "react";
-import { createPortal } from "react-dom";
 
 import { resolveImageMedia } from "../content/converters/gallery.js";
 import { normalizeImageLink } from "../content/converters/image-link.js";
@@ -44,9 +41,19 @@ import {
 	readOrderedListMetadata,
 } from "../content/converters/numbered-list.js";
 import type { ProseMirrorDocument } from "../content/converters/types.js";
-import { computeThumbnailSize } from "../media/thumbnail.js";
 import { CodeMarkExtension } from "./code-mark.js";
+import { InlineBubbleMenu } from "./inline-bubble-menu.js";
 import { InlineCodeBlockExtension } from "./inline-code-block.js";
+import { INLINE_EDITOR_UI_STYLES, useInlineUiRoot } from "./inline-editor-ui.js";
+import { INLINE_IMAGE_STYLES, InlineImageExtension, insertImage } from "./inline-image.js";
+import { INLINE_MEDIA_PICKER_STYLES, InlineMediaPicker } from "./inline-media-picker.js";
+import {
+	InlineSlashMenu,
+	createSlashCommandsExtension,
+	initialSlashMenuState,
+	type SlashCommandItem,
+	type SlashMenuState,
+} from "./inline-slash-menu.js";
 import { EmDashOrderedList } from "./ordered-list.js";
 
 // ── Portable Text types ────────────────────────────────────────────
@@ -866,295 +873,6 @@ function convertPTMarks(marks: string[], markDefs: Map<string, PTMarkDef>): Mark
 	return pm;
 }
 
-// ── Inline BubbleMenu ──────────────────────────────────────────────
-
-function InlineBubbleMenu({ editor }: { editor: Editor }) {
-	const [showLinkInput, setShowLinkInput] = React.useState(false);
-	const [linkUrl, setLinkUrl] = React.useState("");
-	const inputRef = React.useRef<HTMLInputElement>(null);
-
-	React.useEffect(() => {
-		if (showLinkInput) {
-			const existingUrl = editor.getAttributes("link").href || "";
-			setLinkUrl(existingUrl);
-			setTimeout(() => inputRef.current?.focus(), 0);
-		}
-	}, [showLinkInput, editor]);
-
-	const handleSetLink = () => {
-		if (linkUrl.trim() === "") {
-			editor.chain().focus().extendMarkRange("link").unsetLink().run();
-		} else {
-			editor.chain().focus().extendMarkRange("link").setLink({ href: linkUrl.trim() }).run();
-		}
-		setShowLinkInput(false);
-		setLinkUrl("");
-	};
-
-	const handleRemoveLink = () => {
-		editor.chain().focus().extendMarkRange("link").unsetLink().run();
-		setShowLinkInput(false);
-		setLinkUrl("");
-	};
-
-	const handleKeyDown = (e: React.KeyboardEvent) => {
-		if (e.key === "Enter") {
-			e.preventDefault();
-			handleSetLink();
-		} else if (e.key === "Escape") {
-			setShowLinkInput(false);
-			setLinkUrl("");
-			editor.commands.focus();
-		}
-	};
-
-	return (
-		<BubbleMenu
-			editor={editor}
-			options={{ placement: "top", offset: 8, flip: true, shift: true }}
-			className="emdash-bubble-menu"
-		>
-			{showLinkInput ? (
-				<div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
-					<input
-						ref={inputRef}
-						type="url"
-						placeholder="https://..."
-						value={linkUrl}
-						onChange={(e) => setLinkUrl(e.target.value)}
-						onKeyDown={handleKeyDown}
-						className="emdash-bubble-link-input"
-					/>
-					<button
-						type="button"
-						className="emdash-bubble-btn"
-						onClick={handleSetLink}
-						title="Apply link"
-					>
-						↗
-					</button>
-					{editor.isActive("link") && (
-						<button
-							type="button"
-							className="emdash-bubble-btn emdash-bubble-btn--danger"
-							onClick={handleRemoveLink}
-							title="Remove link"
-						>
-							✕
-						</button>
-					)}
-				</div>
-			) : (
-				<>
-					<button
-						type="button"
-						className={`emdash-bubble-btn ${editor.isActive("bold") ? "emdash-bubble-btn--active" : ""}`}
-						onClick={() => editor.chain().focus().toggleBold().run()}
-						title="Bold"
-					>
-						<strong>B</strong>
-					</button>
-					<button
-						type="button"
-						className={`emdash-bubble-btn ${editor.isActive("italic") ? "emdash-bubble-btn--active" : ""}`}
-						onClick={() => editor.chain().focus().toggleItalic().run()}
-						title="Italic"
-					>
-						<em>I</em>
-					</button>
-					<button
-						type="button"
-						className={`emdash-bubble-btn ${editor.isActive("underline") ? "emdash-bubble-btn--active" : ""}`}
-						onClick={() => editor.chain().focus().toggleUnderline().run()}
-						title="Underline"
-					>
-						<span style={{ textDecoration: "underline" }}>U</span>
-					</button>
-					<button
-						type="button"
-						className={`emdash-bubble-btn ${editor.isActive("strike") ? "emdash-bubble-btn--active" : ""}`}
-						onClick={() => editor.chain().focus().toggleStrike().run()}
-						title="Strikethrough"
-					>
-						<span style={{ textDecoration: "line-through" }}>S</span>
-					</button>
-					<button
-						type="button"
-						className={`emdash-bubble-btn ${editor.isActive("code") ? "emdash-bubble-btn--active" : ""}`}
-						onClick={() => editor.chain().focus().toggleCode().run()}
-						title="Code"
-					>
-						<span style={{ fontFamily: "monospace", fontSize: "13px" }}>&lt;/&gt;</span>
-					</button>
-					<span className="emdash-bubble-divider" />
-					<button
-						type="button"
-						className={`emdash-bubble-btn ${editor.isActive("superscript") ? "emdash-bubble-btn--active" : ""}`}
-						onClick={() => editor.chain().focus().toggleSuperscript().run()}
-						title="Superscript"
-					>
-						<span style={{ fontSize: "13px" }}>x²</span>
-					</button>
-					<button
-						type="button"
-						className={`emdash-bubble-btn ${editor.isActive("subscript") ? "emdash-bubble-btn--active" : ""}`}
-						onClick={() => editor.chain().focus().toggleSubscript().run()}
-						title="Subscript"
-					>
-						<span style={{ fontSize: "13px" }}>x₂</span>
-					</button>
-					<span className="emdash-bubble-divider" />
-					<button
-						type="button"
-						className={`emdash-bubble-btn ${editor.isActive("link") ? "emdash-bubble-btn--active" : ""}`}
-						onClick={() => setShowLinkInput(true)}
-						title={editor.isActive("link") ? "Edit link" : "Add link"}
-					>
-						🔗
-					</button>
-				</>
-			)}
-		</BubbleMenu>
-	);
-}
-
-// ── Slash Menu ──────────────────────────────────────────────────────
-
-interface SlashCommandItem {
-	id: string;
-	title: string;
-	description: string;
-	icon: string;
-	command: (props: { editor: Editor; range: Range }) => void;
-	aliases?: string[];
-}
-
-const slashCommands: SlashCommandItem[] = [
-	{
-		id: "heading1",
-		title: "Heading 1",
-		description: "Large section heading",
-		icon: "H1",
-		aliases: ["h1", "title"],
-		command: ({ editor, range }) => {
-			editor.chain().focus().deleteRange(range).setNode("heading", { level: 1 }).run();
-		},
-	},
-	{
-		id: "heading2",
-		title: "Heading 2",
-		description: "Medium section heading",
-		icon: "H2",
-		aliases: ["h2", "subtitle"],
-		command: ({ editor, range }) => {
-			editor.chain().focus().deleteRange(range).setNode("heading", { level: 2 }).run();
-		},
-	},
-	{
-		id: "heading3",
-		title: "Heading 3",
-		description: "Small section heading",
-		icon: "H3",
-		aliases: ["h3"],
-		command: ({ editor, range }) => {
-			editor.chain().focus().deleteRange(range).setNode("heading", { level: 3 }).run();
-		},
-	},
-	{
-		id: "bulletList",
-		title: "Bullet List",
-		description: "Create a bullet list",
-		icon: "•",
-		aliases: ["ul", "unordered"],
-		command: ({ editor, range }) => {
-			editor.chain().focus().deleteRange(range).toggleBulletList().run();
-		},
-	},
-	{
-		id: "numberedList",
-		title: "Numbered List",
-		description: "Create a numbered list",
-		icon: "1.",
-		aliases: ["ol", "ordered"],
-		command: ({ editor, range }) => {
-			editor.chain().focus().deleteRange(range).toggleOrderedList().run();
-		},
-	},
-	{
-		id: "quote",
-		title: "Quote",
-		description: "Insert a blockquote",
-		icon: "\u201C",
-		aliases: ["blockquote", "cite"],
-		command: ({ editor, range }) => {
-			editor.chain().focus().deleteRange(range).toggleBlockquote().run();
-		},
-	},
-	{
-		id: "codeBlock",
-		title: "Code Block",
-		description: "Insert a code block",
-		icon: "</>",
-		aliases: ["code", "pre", "```"],
-		command: ({ editor, range }) => {
-			editor.chain().focus().deleteRange(range).toggleCodeBlock().run();
-		},
-	},
-	{
-		id: "htmlBlock",
-		title: "HTML",
-		description: "Insert raw HTML",
-		icon: "< >",
-		aliases: ["html", "raw", "markup"],
-		command: ({ editor, range }) => {
-			editor
-				.chain()
-				.focus()
-				.deleteRange(range)
-				.insertContent({ type: "htmlBlock", attrs: { html: "", isolated: true } })
-				.run();
-		},
-	},
-	{
-		id: "divider",
-		title: "Divider",
-		description: "Insert a horizontal rule",
-		icon: "—",
-		aliases: ["hr", "---", "separator"],
-		command: ({ editor, range }) => {
-			editor.chain().focus().deleteRange(range).setHorizontalRule().run();
-		},
-	},
-	{
-		id: "image",
-		title: "Image",
-		description: "Insert an image",
-		icon: "🖼",
-		aliases: ["img", "photo", "picture"],
-		command: ({ editor, range }) => {
-			editor.chain().focus().deleteRange(range).run();
-			// Signal the component to open the media picker
-			document.dispatchEvent(new CustomEvent("emdash:open-media-picker"));
-		},
-	},
-];
-
-interface SlashMenuState {
-	isOpen: boolean;
-	items: SlashCommandItem[];
-	selectedIndex: number;
-	clientRect: (() => DOMRect | null) | null;
-	range: Range | null;
-}
-
-const initialSlashMenuState: SlashMenuState = {
-	isOpen: false,
-	items: [],
-	selectedIndex: 0,
-	clientRect: null,
-	range: null,
-};
-
 /**
  * Minimal `htmlBlock` TipTap node for the inline (visual-editing) editor.
  *
@@ -1322,844 +1040,6 @@ const PluginBlockNode = Node.create({
 	},
 });
 
-function createSlashCommandsExtension(options: {
-	filterCommands: (query: string) => SlashCommandItem[];
-	onStateChange: React.Dispatch<React.SetStateAction<SlashMenuState>>;
-	getState: () => SlashMenuState;
-}) {
-	const { filterCommands, onStateChange, getState } = options;
-
-	return Extension.create({
-		name: "slashCommands",
-
-		addProseMirrorPlugins() {
-			return [
-				Suggestion({
-					editor: this.editor,
-					char: "/",
-					startOfLine: true,
-					command: ({ editor, range, props }) => {
-						const item: unknown = props;
-						if (
-							typeof item === "object" &&
-							item !== null &&
-							"command" in item &&
-							typeof item.command === "function"
-						) {
-							item.command({ editor, range });
-						}
-					},
-					items: ({ query }) => filterCommands(query),
-					render: () => {
-						return {
-							onStart: (props) => {
-								onStateChange({
-									isOpen: true,
-									items: props.items,
-									selectedIndex: 0,
-									clientRect: props.clientRect ?? null,
-									range: props.range,
-								});
-							},
-							onUpdate: (props) => {
-								onStateChange((prev) => ({
-									...prev,
-									items: props.items,
-									selectedIndex: 0,
-									clientRect: props.clientRect ?? null,
-									range: props.range,
-								}));
-							},
-							onKeyDown: (props) => {
-								if (props.event.key === "Escape") {
-									onStateChange((prev) => ({ ...prev, isOpen: false }));
-									return true;
-								}
-								if (props.event.key === "ArrowUp") {
-									onStateChange((prev) => ({
-										...prev,
-										selectedIndex: (prev.selectedIndex - 1 + prev.items.length) % prev.items.length,
-									}));
-									return true;
-								}
-								if (props.event.key === "ArrowDown") {
-									onStateChange((prev) => ({
-										...prev,
-										selectedIndex: (prev.selectedIndex + 1) % prev.items.length,
-									}));
-									return true;
-								}
-								if (props.event.key === "Enter") {
-									const state = getState();
-									if (state.items.length > 0 && state.range) {
-										const item = state.items[state.selectedIndex];
-										if (item) {
-											item.command({ editor: this.editor, range: state.range });
-											onStateChange((prev) => ({ ...prev, isOpen: false }));
-											return true;
-										}
-									}
-									return false;
-								}
-								return false;
-							},
-							onExit: () => {
-								onStateChange((prev) => ({ ...prev, isOpen: false }));
-							},
-						};
-					},
-				}),
-			];
-		},
-	});
-}
-
-function InlineSlashMenu({
-	state,
-	onCommand,
-	setSelectedIndex,
-}: {
-	state: SlashMenuState;
-	onCommand: (item: SlashCommandItem) => void;
-	setSelectedIndex: (index: number) => void;
-}) {
-	const containerRef = React.useRef<HTMLDivElement>(null);
-
-	// Track whether we have a positioned reference to avoid rendering at (0,0)
-	const [hasReference, setHasReference] = React.useState(false);
-
-	const { refs, floatingStyles } = useFloating({
-		open: state.isOpen && hasReference,
-		placement: "bottom-start",
-		middleware: [offset(8), flip(), shift({ padding: 8 })],
-		whileElementsMounted: autoUpdate,
-	});
-
-	React.useEffect(() => {
-		if (state.clientRect) {
-			const clientRectFn = state.clientRect;
-			refs.setReference({
-				getBoundingClientRect: () => clientRectFn() ?? new DOMRect(),
-			});
-			setHasReference(true);
-		} else {
-			setHasReference(false);
-		}
-	}, [state.clientRect, refs]);
-
-	// Reset reference tracking when menu closes
-	React.useEffect(() => {
-		if (!state.isOpen) setHasReference(false);
-	}, [state.isOpen]);
-
-	React.useEffect(() => {
-		if (!state.isOpen || !hasReference) return;
-		const container = containerRef.current;
-		if (!container) return;
-		const selected = container.querySelector(`[data-index="${state.selectedIndex}"]`);
-		if (selected instanceof HTMLElement) {
-			// Use scrollIntoView only within the menu container to avoid scrolling the page
-			const containerTop = container.scrollTop;
-			const containerBottom = containerTop + container.clientHeight;
-			const itemTop = selected.offsetTop;
-			const itemBottom = itemTop + selected.offsetHeight;
-			if (itemTop < containerTop) {
-				container.scrollTop = itemTop;
-			} else if (itemBottom > containerBottom) {
-				container.scrollTop = itemBottom - container.clientHeight;
-			}
-		}
-	}, [state.selectedIndex, state.isOpen, hasReference]);
-
-	if (!state.isOpen || !hasReference) return null;
-
-	return createPortal(
-		<div
-			ref={(node) => {
-				containerRef.current = node;
-				refs.setFloating(node);
-			}}
-			style={{
-				...floatingStyles,
-				zIndex: 100,
-				borderRadius: "8px",
-				border: "1px solid #d1d5db",
-				background: "white",
-				padding: "4px",
-				boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
-				minWidth: "220px",
-				maxHeight: "300px",
-				overflowY: "auto",
-			}}
-			className="emdash-slash-menu"
-		>
-			{state.items.length === 0 ? (
-				<p
-					style={{
-						padding: "8px 12px",
-						fontSize: "13px",
-						color: "#9ca3af",
-						margin: 0,
-					}}
-				>
-					No results
-				</p>
-			) : (
-				state.items.map((item, index) => (
-					<button
-						key={item.id}
-						type="button"
-						data-index={index}
-						style={{
-							display: "flex",
-							alignItems: "center",
-							gap: "12px",
-							width: "100%",
-							padding: "8px 12px",
-							fontSize: "13px",
-							borderRadius: "4px",
-							border: "none",
-							textAlign: "left",
-							cursor: "pointer",
-							background: index === state.selectedIndex ? "#f3f4f6" : "transparent",
-						}}
-						onClick={() => onCommand(item)}
-						onMouseEnter={() => setSelectedIndex(index)}
-					>
-						<span
-							style={{
-								width: "24px",
-								height: "24px",
-								display: "flex",
-								alignItems: "center",
-								justifyContent: "center",
-								flexShrink: 0,
-								fontSize: "14px",
-								fontWeight: 600,
-								color: "#6b7280",
-								background: "#f3f4f6",
-								borderRadius: "4px",
-							}}
-						>
-							{item.icon}
-						</span>
-						<span style={{ display: "flex", flexDirection: "column" }}>
-							<span style={{ fontWeight: 500 }}>{item.title}</span>
-							<span style={{ fontSize: "12px", color: "#9ca3af" }}>{item.description}</span>
-						</span>
-					</button>
-				))
-			)}
-		</div>,
-		document.body,
-	);
-}
-
-// ── Media Picker ───────────────────────────────────────────────────
-
-interface MediaItemData {
-	id: string;
-	filename: string;
-	mimeType: string;
-	url: string;
-	storageKey?: string;
-	width?: number;
-	height?: number;
-	blurhash?: string;
-	dominantColor?: string;
-	alt?: string;
-	provider?: string;
-	previewUrl?: string;
-	meta?: Record<string, unknown>;
-}
-
-interface ProviderInfo {
-	id: string;
-	name: string;
-	icon?: string;
-	capabilities: { browse: boolean; search: boolean; upload: boolean; delete: boolean };
-}
-
-const API_BASE = "/_emdash/api";
-
-async function ecFetch(url: string, init?: RequestInit): Promise<Response> {
-	const base = new Headers(init?.headers);
-	base.set("X-EmDash-Request", "1");
-	return fetch(url, {
-		credentials: "same-origin",
-		...init,
-		headers: base,
-	});
-}
-
-function InlineMediaPicker({
-	open,
-	onClose,
-	onSelect,
-}: {
-	open: boolean;
-	onClose: () => void;
-	onSelect: (item: MediaItemData) => void;
-}) {
-	const [providers, setProviders] = React.useState<ProviderInfo[]>([]);
-	const [activeProvider, setActiveProvider] = React.useState("local");
-	const [items, setItems] = React.useState<MediaItemData[]>([]);
-	const [loading, setLoading] = React.useState(false);
-	const [uploading, setUploading] = React.useState(false);
-	const [selectedId, setSelectedId] = React.useState<string | null>(null);
-	const fileInputRef = React.useRef<HTMLInputElement>(null);
-
-	// Fetch providers on open
-	React.useEffect(() => {
-		if (!open) return;
-		setSelectedId(null);
-		setActiveProvider("local");
-		ecFetch(`${API_BASE}/media/providers`)
-			.then((r) => r.json())
-			.then((d) => setProviders(d.data.items ?? []))
-			.catch(() => setProviders([]));
-	}, [open]);
-
-	// Fetch items when provider changes
-	React.useEffect(() => {
-		if (!open) return;
-		setLoading(true);
-		setSelectedId(null);
-
-		const url =
-			activeProvider === "local"
-				? `${API_BASE}/media?mimeType=image/&limit=50`
-				: `${API_BASE}/media/providers/${activeProvider}?mimeType=image/&limit=50`;
-
-		void (async () => {
-			try {
-				const r = await ecFetch(url);
-				const d = await r.json();
-				const raw = d.data.items ?? [];
-				// eslint-disable-next-line typescript/no-unsafe-type-assertion -- API response items mapped to MediaItem shape
-				const typedRaw = raw as Array<{
-					id: string;
-					filename?: string;
-					mimeType?: string;
-					url?: string;
-					previewUrl?: string;
-					storageKey?: string;
-					width?: number;
-					height?: number;
-					blurhash?: string;
-					dominantColor?: string;
-					alt?: string;
-					meta?: Record<string, unknown>;
-				}>;
-				setItems(
-					typedRaw.map((item) => ({
-						id: item.id,
-						filename: item.filename || "",
-						mimeType: item.mimeType || "image/unknown",
-						url:
-							item.url ||
-							item.previewUrl ||
-							(item.storageKey ? `${API_BASE}/media/file/${item.storageKey}` : ""),
-						storageKey: item.storageKey,
-						width: item.width,
-						height: item.height,
-						blurhash: item.blurhash,
-						dominantColor: item.dominantColor,
-						alt: item.alt,
-						provider: activeProvider === "local" ? undefined : activeProvider,
-						previewUrl: item.previewUrl,
-						meta: item.meta,
-					})),
-				);
-			} catch {
-				setItems([]);
-			} finally {
-				setLoading(false);
-			}
-		})();
-	}, [open, activeProvider]);
-
-	const handleUpload = async (file: File) => {
-		setUploading(true);
-		try {
-			// Detect dimensions and generate a thumbnail for large images to
-			// avoid OOM in server-side blurhash generation on Workers.
-			const dims = await new Promise<{
-				width?: number;
-				height?: number;
-				thumbnail?: Blob;
-			}>((resolve) => {
-				if (!file.type.startsWith("image/")) return resolve({});
-				const img = new window.Image();
-				img.onload = () => {
-					const w = img.naturalWidth;
-					const h = img.naturalHeight;
-					// 32 MB RGBA threshold — matches server MAX_DECODED_BYTES
-					if (w * h * 4 > 32 * 1024 * 1024) {
-						const { width: thumbW, height: thumbH } = computeThumbnailSize(w, h);
-						try {
-							const canvas = document.createElement("canvas");
-							canvas.width = thumbW;
-							canvas.height = thumbH;
-							const ctx = canvas.getContext("2d");
-							if (ctx) {
-								ctx.drawImage(img, 0, 0, thumbW, thumbH);
-								canvas.toBlob((blob) => {
-									URL.revokeObjectURL(img.src);
-									resolve({ width: w, height: h, thumbnail: blob ?? undefined });
-								}, "image/png");
-								return;
-							}
-						} catch {
-							// Canvas allocation or draw failed — fall through to no-thumbnail path
-						}
-					}
-					URL.revokeObjectURL(img.src);
-					resolve({ width: w, height: h });
-				};
-				img.onerror = () => {
-					resolve({});
-					URL.revokeObjectURL(img.src);
-				};
-				img.src = URL.createObjectURL(file);
-			});
-
-			let item: MediaItemData;
-
-			if (activeProvider === "local") {
-				const formData = new FormData();
-				formData.append("file", file);
-				if (dims.width) formData.append("width", String(dims.width));
-				if (dims.height) formData.append("height", String(dims.height));
-				if (dims.thumbnail) formData.append("thumbnail", dims.thumbnail, "thumb.png");
-				const res = await ecFetch(`${API_BASE}/media`, { method: "POST", body: formData });
-				const data = await res.json();
-				const unwrapped = data.data ?? data;
-				if (!unwrapped.item) throw new Error("Upload failed");
-				const raw = unwrapped.item;
-				item = {
-					id: raw.id,
-					filename: raw.filename || file.name,
-					mimeType: raw.mimeType || file.type,
-					url: raw.url || raw.previewUrl || `${API_BASE}/media/file/${raw.storageKey}`,
-					storageKey: raw.storageKey,
-					width: raw.width || dims.width,
-					height: raw.height || dims.height,
-					blurhash: raw.blurhash,
-					dominantColor: raw.dominantColor,
-					alt: raw.alt,
-				};
-			} else {
-				const formData = new FormData();
-				formData.append("file", file);
-				const res = await ecFetch(`${API_BASE}/media/providers/${activeProvider}`, {
-					method: "POST",
-					body: formData,
-				});
-				const data = await res.json();
-				const unwrapped = data.data ?? data;
-				if (!unwrapped.item) throw new Error("Upload failed");
-				const raw = unwrapped.item;
-				item = {
-					id: raw.id,
-					filename: raw.filename || file.name,
-					mimeType: raw.mimeType || file.type,
-					url: raw.previewUrl || "",
-					width: raw.width || dims.width,
-					height: raw.height || dims.height,
-					blurhash: raw.blurhash,
-					dominantColor: raw.dominantColor,
-					alt: raw.alt,
-					provider: activeProvider,
-					previewUrl: raw.previewUrl,
-					meta: raw.meta,
-				};
-			}
-
-			setItems((prev) => [item, ...prev]);
-			setSelectedId(item.id);
-		} catch (err) {
-			console.error("Upload failed:", err);
-		} finally {
-			setUploading(false);
-		}
-	};
-
-	const handleConfirm = () => {
-		const item = items.find((i) => i.id === selectedId);
-		if (item) onSelect(item);
-	};
-
-	const providerTabs = React.useMemo(() => {
-		const tabs: Array<{ id: string; name: string; icon?: string }> = [
-			{ id: "local", name: "Library" },
-		];
-		for (const p of providers) {
-			if (p.id !== "local") tabs.push({ id: p.id, name: p.name, icon: p.icon });
-		}
-		return tabs;
-	}, [providers]);
-
-	if (!open) return null;
-
-	return createPortal(
-		<div
-			style={{
-				position: "fixed",
-				inset: 0,
-				zIndex: 10000,
-				display: "flex",
-				alignItems: "center",
-				justifyContent: "center",
-				background: "rgba(0,0,0,0.5)",
-				fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
-			}}
-			onClick={(e) => {
-				if (e.target === e.currentTarget) onClose();
-			}}
-		>
-			<div
-				style={{
-					background: "white",
-					borderRadius: "12px",
-					width: "min(700px, 90vw)",
-					maxHeight: "80vh",
-					display: "flex",
-					flexDirection: "column",
-					overflow: "hidden",
-					boxShadow: "0 20px 60px rgba(0,0,0,0.3)",
-				}}
-				className="emdash-media-picker"
-			>
-				{/* Header */}
-				<div
-					style={{
-						display: "flex",
-						alignItems: "center",
-						justifyContent: "space-between",
-						padding: "16px 20px",
-						borderBottom: "1px solid #e5e7eb",
-					}}
-				>
-					<span style={{ fontSize: "16px", fontWeight: 600 }}>Insert Image</span>
-					<button
-						type="button"
-						onClick={onClose}
-						style={{
-							background: "none",
-							border: "none",
-							cursor: "pointer",
-							fontSize: "18px",
-							padding: "4px 8px",
-							borderRadius: "4px",
-							color: "#6b7280",
-						}}
-						aria-label="Close"
-					>
-						✕
-					</button>
-				</div>
-
-				{/* Provider tabs */}
-				{providerTabs.length > 1 && (
-					<div
-						style={{
-							display: "flex",
-							gap: "6px",
-							padding: "12px 20px",
-							borderBottom: "1px solid #e5e7eb",
-							flexWrap: "wrap",
-						}}
-					>
-						{providerTabs.map((tab) => (
-							<button
-								key={tab.id}
-								type="button"
-								onClick={() => setActiveProvider(tab.id)}
-								style={{
-									padding: "6px 14px",
-									fontSize: "13px",
-									fontWeight: 500,
-									borderRadius: "6px",
-									border: "none",
-									cursor: "pointer",
-									background: activeProvider === tab.id ? "#3b82f6" : "#f3f4f6",
-									color: activeProvider === tab.id ? "white" : "#4b5563",
-								}}
-							>
-								{tab.icon && (
-									<span
-										style={{ marginRight: "6px", display: "inline-flex", alignItems: "center" }}
-									>
-										{tab.icon.startsWith("data:") || tab.icon.startsWith("http") ? (
-											<img src={tab.icon} alt="" style={{ width: "16px", height: "16px" }} />
-										) : (
-											tab.icon
-										)}
-									</span>
-								)}
-								{tab.name}
-							</button>
-						))}
-					</div>
-				)}
-
-				{/* Upload bar */}
-				<div
-					style={{
-						display: "flex",
-						alignItems: "center",
-						justifyContent: "space-between",
-						padding: "12px 20px",
-						borderBottom: "1px solid #e5e7eb",
-					}}
-				>
-					<span style={{ fontSize: "13px", color: "#6b7280" }}>
-						{loading ? "Loading…" : `${items.length} image${items.length !== 1 ? "s" : ""}`}
-					</span>
-					<button
-						type="button"
-						onClick={() => fileInputRef.current?.click()}
-						disabled={uploading}
-						style={{
-							padding: "6px 14px",
-							fontSize: "13px",
-							fontWeight: 500,
-							borderRadius: "6px",
-							border: "1px solid #d1d5db",
-							cursor: uploading ? "not-allowed" : "pointer",
-							background: "white",
-							color: "#374151",
-							opacity: uploading ? 0.6 : 1,
-						}}
-					>
-						{uploading ? "Uploading…" : "Upload"}
-					</button>
-					<input
-						ref={fileInputRef}
-						type="file"
-						accept="image/*"
-						style={{ display: "none" }}
-						onChange={(e) => {
-							const file = e.target.files?.[0];
-							if (file) void handleUpload(file);
-							if (fileInputRef.current) fileInputRef.current.value = "";
-						}}
-					/>
-				</div>
-
-				{/* Grid */}
-				<div
-					style={{
-						flex: 1,
-						overflowY: "auto",
-						padding: "16px 20px",
-						minHeight: "250px",
-					}}
-				>
-					{loading ? (
-						<div
-							style={{
-								display: "flex",
-								alignItems: "center",
-								justifyContent: "center",
-								height: "200px",
-								color: "#9ca3af",
-								fontSize: "14px",
-							}}
-						>
-							Loading…
-						</div>
-					) : items.length === 0 ? (
-						<div
-							style={{
-								display: "flex",
-								flexDirection: "column",
-								alignItems: "center",
-								justifyContent: "center",
-								height: "200px",
-								color: "#9ca3af",
-								fontSize: "14px",
-								textAlign: "center",
-							}}
-						>
-							<div style={{ fontSize: "32px", marginBottom: "8px" }}>🖼</div>
-							No images found
-							<button
-								type="button"
-								onClick={() => fileInputRef.current?.click()}
-								style={{
-									marginTop: "12px",
-									padding: "8px 16px",
-									fontSize: "13px",
-									borderRadius: "6px",
-									border: "1px solid #d1d5db",
-									background: "white",
-									cursor: "pointer",
-									color: "#374151",
-								}}
-							>
-								Upload an image
-							</button>
-						</div>
-					) : (
-						<div
-							style={{
-								display: "grid",
-								gridTemplateColumns: "repeat(auto-fill, minmax(110px, 1fr))",
-								gap: "10px",
-							}}
-						>
-							{items.map((item) => {
-								const isSelected = selectedId === item.id;
-								const thumb = item.url || item.previewUrl || "";
-								return (
-									<button
-										key={item.id}
-										type="button"
-										onClick={() => setSelectedId(item.id)}
-										onDoubleClick={() => onSelect(item)}
-										style={{
-											position: "relative",
-											aspectRatio: "1",
-											borderRadius: "8px",
-											border: isSelected ? "2px solid #3b82f6" : "2px solid transparent",
-											overflow: "hidden",
-											cursor: "pointer",
-											padding: 0,
-											background: "#f3f4f6",
-											outline: isSelected ? "2px solid rgba(59,130,246,0.3)" : "none",
-											outlineOffset: "1px",
-										}}
-										aria-label={item.filename}
-									>
-										{thumb ? (
-											<img
-												src={thumb}
-												alt=""
-												style={{ width: "100%", height: "100%", objectFit: "cover" }}
-											/>
-										) : (
-											<div
-												style={{
-													width: "100%",
-													height: "100%",
-													display: "flex",
-													alignItems: "center",
-													justifyContent: "center",
-													fontSize: "24px",
-												}}
-											>
-												🖼
-											</div>
-										)}
-										{isSelected && (
-											<div
-												style={{
-													position: "absolute",
-													inset: 0,
-													background: "rgba(59,130,246,0.15)",
-													display: "flex",
-													alignItems: "center",
-													justifyContent: "center",
-												}}
-											>
-												<div
-													style={{
-														width: "24px",
-														height: "24px",
-														borderRadius: "50%",
-														background: "#3b82f6",
-														color: "white",
-														display: "flex",
-														alignItems: "center",
-														justifyContent: "center",
-														fontSize: "14px",
-													}}
-												>
-													✓
-												</div>
-											</div>
-										)}
-										<div
-											style={{
-												position: "absolute",
-												bottom: 0,
-												left: 0,
-												right: 0,
-												background: "linear-gradient(transparent, rgba(0,0,0,0.6))",
-												padding: "16px 6px 4px",
-											}}
-										>
-											<div
-												style={{
-													fontSize: "11px",
-													color: "white",
-													overflow: "hidden",
-													textOverflow: "ellipsis",
-													whiteSpace: "nowrap",
-												}}
-											>
-												{item.filename}
-											</div>
-										</div>
-									</button>
-								);
-							})}
-						</div>
-					)}
-				</div>
-
-				{/* Footer */}
-				<div
-					style={{
-						display: "flex",
-						justifyContent: "flex-end",
-						gap: "8px",
-						padding: "12px 20px",
-						borderTop: "1px solid #e5e7eb",
-					}}
-				>
-					<button
-						type="button"
-						onClick={onClose}
-						style={{
-							padding: "8px 16px",
-							fontSize: "13px",
-							fontWeight: 500,
-							borderRadius: "6px",
-							border: "1px solid #d1d5db",
-							background: "white",
-							cursor: "pointer",
-							color: "#374151",
-						}}
-					>
-						Cancel
-					</button>
-					<button
-						type="button"
-						onClick={handleConfirm}
-						disabled={!selectedId}
-						style={{
-							padding: "8px 16px",
-							fontSize: "13px",
-							fontWeight: 500,
-							borderRadius: "6px",
-							border: "none",
-							background: selectedId ? "#3b82f6" : "#93c5fd",
-							color: "white",
-							cursor: selectedId ? "pointer" : "not-allowed",
-						}}
-					>
-						Insert
-					</button>
-				</div>
-			</div>
-		</div>,
-		document.body,
-	);
-}
-
 // ── Component ──────────────────────────────────────────────────────
 
 export interface InlinePortableTextEditorProps {
@@ -2185,8 +1065,8 @@ export function InlinePortableTextEditor({
 	const savingRef = React.useRef(false);
 	const editorRef = React.useRef<ReturnType<typeof useEditor>>(null);
 
-	// Media picker state
-	const [mediaPickerOpen, setMediaPickerOpen] = React.useState(false);
+	// Where the image picker that `/image` opened will put the image.
+	const [imagePickerAt, setImagePickerAt] = React.useState<number | null>(null);
 	const [unsupportedFileGuidance, setUnsupportedFileGuidance] = React.useState<{
 		message: string;
 		version: number;
@@ -2203,26 +1083,25 @@ export function InlinePortableTextEditor({
 		[showUnsupportedFileGuidance],
 	);
 
-	// Listen for the slash command's media picker event
-	React.useEffect(() => {
-		const handler = () => setMediaPickerOpen(true);
-		document.addEventListener("emdash:open-media-picker", handler);
-		return () => document.removeEventListener("emdash:open-media-picker", handler);
-	}, []);
+	const uiRoot = useInlineUiRoot();
 
-	// Slash menu state — use ref to avoid re-creating the extension on state change
-	const [slashMenuState, setSlashMenuState] = React.useState<SlashMenuState>(initialSlashMenuState);
+	// The Suggestion plugin's key handlers read the slash menu's state as soon
+	// as it changes, before React commits it, so the ref takes each change
+	// synchronously and the extension, created once, reads the ref.
+	const [slashMenuState, setSlashMenuStateRaw] =
+		React.useState<SlashMenuState>(initialSlashMenuState);
 	const slashMenuStateRef = React.useRef(slashMenuState);
-	slashMenuStateRef.current = slashMenuState;
-
-	const filterCommandsRef = React.useRef((query: string): SlashCommandItem[] => {
-		const q = query.toLowerCase();
-		return slashCommands.filter(
-			(cmd) =>
-				cmd.title.toLowerCase().includes(q) ||
-				cmd.description.toLowerCase().includes(q) ||
-				cmd.aliases?.some((a) => a.toLowerCase().includes(q)),
-		);
+	const setSlashMenuState: React.Dispatch<React.SetStateAction<SlashMenuState>> = React.useCallback(
+		(action) => {
+			const next = typeof action === "function" ? action(slashMenuStateRef.current) : action;
+			slashMenuStateRef.current = next;
+			setSlashMenuStateRaw(next);
+		},
+		[],
+	);
+	const slashMenuActionsRef = React.useRef({
+		run: (_item: SlashCommandItem) => {},
+		dismiss: () => {},
 	});
 
 	const [loadState] = React.useState<{
@@ -2281,7 +1160,7 @@ export function InlinePortableTextEditor({
 						method: "PUT",
 						credentials: "same-origin",
 						headers: { "Content-Type": "application/json", "X-EmDash-Request": "1" },
-						body: JSON.stringify({ data: { [field]: blocks } }),
+						body: JSON.stringify({ data: { [field]: blocks }, skipRevision: true }),
 						keepalive: options?.keepalive ?? false,
 					},
 				);
@@ -2335,45 +1214,31 @@ export function InlinePortableTextEditor({
 	const slashCommandsExtension = React.useMemo(
 		() =>
 			createSlashCommandsExtension({
-				filterCommands: (query: string) => filterCommandsRef.current(query),
 				onStateChange: setSlashMenuState,
 				getState: () => slashMenuStateRef.current,
+				onCommand: (item) => slashMenuActionsRef.current.run(item),
+				onDismiss: () => slashMenuActionsRef.current.dismiss(),
 			}),
-		[],
+		[setSlashMenuState],
 	);
 
 	const editor = useEditor({
 		extensions: [
 			StarterKit.configure({
-				heading: { levels: [1, 2, 3] },
 				dropcursor: { color: "#3b82f6", width: 2 },
 				// Replaced with InlineCodeBlockExtension below (adds language picker).
 				codeBlock: false,
 				// Replaced with CodeMarkExtension so inline code can combine with link/etc.
 				code: false,
 				orderedList: false,
+				// Registered on their own below, so links don't open when clicked.
+				link: false,
+				underline: false,
 			}),
 			EmDashOrderedList,
 			CodeMarkExtension,
 			InlineCodeBlockExtension,
-			Image.extend({
-				addAttributes() {
-					return {
-						...this.parent?.(),
-						mediaId: { default: null },
-						provider: { default: null },
-						width: { default: null },
-						height: { default: null },
-						displayWidth: { default: null },
-						displayHeight: { default: null },
-						caption: { default: null },
-						blurhash: { default: null },
-						dominantColor: { default: null },
-						alignment: { default: null, rendered: false },
-						link: { default: null, rendered: false },
-					};
-				},
-			}),
+			InlineImageExtension,
 			Underline,
 			Subscript,
 			Superscript,
@@ -2421,56 +1286,86 @@ export function InlinePortableTextEditor({
 		if (editor && !savedDocRef.current) savedDocRef.current = editor.state.doc;
 	}, [editor]);
 
-	// Slash menu command handler
-	const handleSlashCommand = React.useCallback(
+	const runSlashCommand = React.useCallback(
 		(item: SlashCommandItem) => {
-			if (!editor || !slashMenuStateRef.current.range) return;
-			item.command({ editor, range: slashMenuStateRef.current.range });
+			const { range } = slashMenuStateRef.current;
+			if (!editor || !range) return;
+			item.command({
+				editor,
+				range,
+				openImagePicker: () => setImagePickerAt(editor.state.selection.from),
+			});
 			setSlashMenuState((prev) => ({ ...prev, isOpen: false }));
 		},
-		[editor],
+		[editor, setSlashMenuState],
 	);
+	/** Closes the slash menu without a command, keeping what was typed. */
+	const closeSlashMenu = React.useCallback(() => {
+		const { range } = slashMenuStateRef.current;
+		setSlashMenuState((prev) => ({
+			...prev,
+			isOpen: false,
+			dismissedSlashFrom: range ? range.from : prev.dismissedSlashFrom,
+		}));
+		if (editor && range) exitSuggestion(editor.view);
+	}, [editor, setSlashMenuState]);
+	slashMenuActionsRef.current = { run: runSlashCommand, dismiss: closeSlashMenu };
 
-	// Handle media selection from the picker
-	const handleMediaSelect = React.useCallback(
-		(item: MediaItemData) => {
-			if (!editor) return;
-			const src =
-				item.url || item.previewUrl || `/_emdash/api/media/file/${item.storageKey || item.id}`;
-			const attrs = {
-				src,
-				alt: item.alt || item.filename || "",
-				mediaId: item.id,
-				provider: canonicalMediaProviderId(item.provider) || "local",
-				width: item.width,
-				height: item.height,
-				blurhash: item.blurhash,
-				dominantColor: item.dominantColor,
-			};
-			editor.chain().focus().setImage(attrs).run();
-			setMediaPickerOpen(false);
-			void save();
-		},
-		[editor, save],
+	// Edits made while the picker is open, as when focus stays in the editor, move the spot it inserts at.
+	const pickerOpen = imagePickerAt !== null;
+	React.useEffect(() => {
+		if (!editor || !pickerOpen) return;
+		const onTransaction = ({ transaction }: { transaction: Transaction }) => {
+			if (!transaction.docChanged) return;
+			setImagePickerAt((at) => (at === null ? at : transaction.mapping.map(at)));
+		};
+		editor.on("transaction", onTransaction);
+		return () => {
+			editor.off("transaction", onTransaction);
+		};
+	}, [editor, pickerOpen]);
+
+	// The image picker opens at the caret the `/image` command left.
+	const caretReference = React.useMemo(
+		() =>
+			editor && imagePickerAt !== null
+				? {
+						getBoundingClientRect: () => {
+							if (editor.isDestroyed) return new DOMRect();
+							const { view } = editor;
+							const caret = view.coordsAtPos(Math.min(imagePickerAt, view.state.doc.content.size));
+							return new DOMRect(caret.left, caret.top, 0, caret.bottom - caret.top);
+						},
+						contextElement: editor.view.dom,
+					}
+				: null,
+		[editor, imagePickerAt],
 	);
 
-	// Save on blur — but not when interacting with slash menu or media picker
+	// Save on blur — but not when interacting with slash menu or image picker
 	const handleBlur = React.useCallback(
 		(e: React.FocusEvent<HTMLDivElement>) => {
-			if (mediaPickerOpen) return;
 			const related = e.relatedTarget instanceof HTMLElement ? e.relatedTarget : null;
 			if (related && e.currentTarget.contains(related)) return;
 			// The copy fallback briefly moves focus to its textarea before restoring the editor.
 			if (related?.hasAttribute("data-emdash-clipboard-fallback")) return;
-			// Don't save if focus moved to the slash menu (portalled to body)
-			if (related?.closest(".emdash-slash-menu")) return;
-			if (related?.closest(".emdash-media-picker")) return;
+			// The toolbars, menus, and image picker live in a root of their own at the end of the page.
+			if (related && uiRoot?.contains(related)) return;
+			// A toolbar button keeps focus in the editor, so the toolbars skip
+			// the editor's next blur; telling them again lets them hide. It waits
+			// for this blur to finish, which may be a toolbar removing itself.
+			const event = e.nativeEvent;
+			queueMicrotask(() => {
+				if (!editor || editor.isDestroyed || editor.view.hasFocus()) return;
+				if (uiRoot?.contains(document.activeElement)) return;
+				editor.view.dispatch(editor.state.tr.setMeta("blur", { event }));
+			});
 			void save();
 		},
-		[save, mediaPickerOpen],
+		[editor, save, uiRoot],
 	);
 
-	if (!editor) return null;
+	if (!editor || !uiRoot) return null;
 
 	return (
 		<div onBlur={handleBlur}>
@@ -2481,7 +1376,7 @@ export function InlinePortableTextEditor({
 				</div>
 			) : (
 				<>
-					<InlineBubbleMenu editor={editor} />
+					<InlineBubbleMenu editor={editor} uiRoot={uiRoot} onImageReplaced={() => void save()} />
 					<EditorContent editor={editor} />
 				</>
 			)}
@@ -2502,20 +1397,33 @@ export function InlinePortableTextEditor({
 				</div>
 			) : null}
 			<InlineSlashMenu
+				editor={editor}
+				uiRoot={uiRoot}
 				state={slashMenuState}
-				onCommand={handleSlashCommand}
+				onCommand={runSlashCommand}
+				onClose={closeSlashMenu}
 				setSelectedIndex={(index) =>
 					setSlashMenuState((prev) => ({ ...prev, selectedIndex: index }))
 				}
 			/>
-			<InlineMediaPicker
-				open={mediaPickerOpen}
-				onClose={() => {
-					setMediaPickerOpen(false);
-					editor?.commands.focus();
-				}}
-				onSelect={handleMediaSelect}
-			/>
+			{imagePickerAt !== null && caretReference && (
+				<InlineMediaPicker
+					uiRoot={uiRoot}
+					reference={caretReference}
+					gap={6}
+					label="Insert image"
+					onChoose={(image) => {
+						insertImage(editor, imagePickerAt, image);
+						editor.view.focus();
+						setImagePickerAt(null);
+						void save();
+					}}
+					onClose={(reason) => {
+						if (reason !== "blur") editor.view.focus();
+						setImagePickerAt(null);
+					}}
+				/>
+			)}
 			<style>{`
 				.emdash-inline-code-block {
 					position: relative;
@@ -2643,114 +1551,33 @@ export function InlinePortableTextEditor({
 						--emdash-code-focus: var(--emdash-inline-code-focus, #a8d5ff);
 					}
 				}
-				.emdash-bubble-menu {
-					z-index: 100;
-					display: flex;
-					align-items: center;
-					gap: 2px;
-					padding: 4px;
-					border-radius: 8px;
-					border: 1px solid #d1d5db;
-					background: white;
-					box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-					font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-				}
-				.emdash-bubble-btn {
-					display: inline-flex;
-					align-items: center;
-					justify-content: center;
-					width: 32px;
-					height: 32px;
-					border-radius: 6px;
-					border: none;
-					background: transparent;
-					cursor: pointer;
-					color: inherit;
-					font-size: 14px;
-					line-height: 1;
-					padding: 0;
-				}
-				.emdash-bubble-btn:hover {
-					background: #f3f4f6;
+				.emdash-inline-editor .emdash-slash-query {
+					margin-inline: -0.25em;
+					padding: 0.125em 0.25em;
+					border-radius: 0.375rem;
+					background: color-mix(in srgb, currentColor 8%, transparent);
 				}
-				.emdash-bubble-btn--active {
-					background: #dbeafe;
-					color: #1d4ed8;
-				}
-				.emdash-bubble-btn--active:hover {
-					background: #bfdbfe;
-				}
-				.emdash-bubble-btn--danger {
-					color: #dc2626;
-				}
-				.emdash-bubble-divider {
-					display: block;
-					width: 1px;
-					height: 20px;
-					background: #d1d5db;
-					margin: 0 4px;
+				.emdash-inline-editor .emdash-slash-query.is-empty::after {
+					content: "Type to search";
+					color: color-mix(in srgb, currentColor 45%, transparent);
+					pointer-events: none;
 				}
-				.emdash-bubble-link-input {
-					height: 28px;
-					width: 200px;
-					font-size: 13px;
-					padding: 0 8px;
-					border: 1px solid #d1d5db;
-					border-radius: 4px;
+				${INLINE_EDITOR_UI_STYLES}
+				${INLINE_MEDIA_PICKER_STYLES}
+				${INLINE_IMAGE_STYLES}
+				.emdash-inline-editor:focus {
 					outline: none;
-					background: white;
-					color: inherit;
-					font-family: inherit;
 				}
-				.emdash-bubble-link-input:focus {
-					border-color: #3b82f6;
-				}
-				@media (prefers-color-scheme: dark) {
-					.emdash-bubble-menu {
-						background: #1f2937;
-						border-color: #374151;
-						color: #e5e7eb;
-					}
-					.emdash-bubble-btn:hover {
-						background: #374151;
-					}
-					.emdash-bubble-btn--active {
-						background: #1e3a5f;
-						color: #93c5fd;
-					}
-					.emdash-bubble-btn--active:hover {
-						background: #1e40af;
-					}
-					.emdash-bubble-divider {
-						background: #4b5563;
-					}
-					.emdash-bubble-link-input {
-						background: #111827;
-						border-color: #4b5563;
-						color: #e5e7eb;
-					}
-					.emdash-bubble-link-input:focus {
-						border-color: #60a5fa;
-					}
-					.emdash-slash-menu {
-						background: #1f2937 !important;
-						border-color: #374151 !important;
-						color: #e5e7eb !important;
-					}
-					.emdash-slash-menu button:hover,
-					.emdash-slash-menu button[style*="background: rgb(243, 244, 246)"] {
-						background: #374151 !important;
-					}
-					.emdash-media-picker {
-						background: #1f2937 !important;
-						color: #e5e7eb !important;
-					}
-					.emdash-media-picker button {
-						color: #e5e7eb !important;
-					}
+				.emdash-inline-editor:focus p.is-editor-empty {
+					display: flow-root;
 				}
-				.emdash-inline-editor:focus {
-					outline: none;
+				.emdash-inline-editor:focus p.is-editor-empty::before {
+					content: attr(data-placeholder);
+					float: inline-start;
+					width: 100%;
+					margin-inline-end: -100%;
+					opacity: 0.5;
+					pointer-events: none;
 				}
 				.emdash-inline-editor-guidance {
 					margin-block-start: 0.75rem;