@riducms/plugin-richtext 0.2.3 → 0.4.0

package/src/menu/rich-text-block-toolbar.svelte

@@ -11,11 +11,10 @@
 		TooltipRoot,
 		TooltipTrigger,
 	} from "@riducms/ui";
-	import { DraggableBlockPlugin, useLexicalComposerContext } from "@hvniel/lexical-svelte";
+	import { Portal, useLexicalComposerContext } from "@hvniel/lexical-svelte";
 	import { mergeRegister } from "@lexical/utils";
 	import {
 		$createParagraphNode,
-		$createTextNode,
 		$getNearestNodeFromDOMNode,
 		$getNodeByKey,
 		$getRoot,
@@ -25,6 +24,7 @@
 		COMMAND_PRIORITY_LOW,
 		KEY_ARROW_DOWN_COMMAND,
 		KEY_ARROW_UP_COMMAND,
+		IS_FIREFOX,
 		type LexicalNode,
 		type NodeKey,
 	} from "lexical";
@@ -46,6 +46,13 @@
 		targetNodeKey: NodeKey;
 	};
 
+	type DropTarget = {
+		element: HTMLElement;
+		before: boolean;
+		empty: boolean;
+		rect: DOMRect;
+	};
+
 	let {
 		anchorElement,
 		authoring,
@@ -60,8 +67,15 @@
 	let draggableElement = $state.raw<HTMLElement | null>(null);
 	let pickerState = $state.raw<PickerState | null>(null);
 	let pickerOpen = $state(false);
+	const pickerID = $props.id();
 	let query = $state("");
 	let menuElement = $state.raw<HTMLElement | null>(null);
+	let targetLineElement: HTMLElement | null = null;
+	let highlightElement: HTMLElement | null = null;
+	let highlightAnimation: Animation | undefined;
+	let highlightFrame: number | undefined;
+	let draggedNodeKey: NodeKey | null = null;
+	let focusFrame: number | undefined;
 	let movementAnnouncement = $state("");
 	let restorePickerFocus = true;
 	// The mounted field's authoring surface and feature set are stable.
@@ -74,11 +88,276 @@
 		richTextBlockTypes(getRichTextField().field)
 	);
 	const options = $derived(filterRichTextOptions(baseOptions, query, i18n.language));
+	const dragDataFormat = "application/x-ridu-richtext-block";
 
 	function isOnToolbar(element: HTMLElement) {
 		return element.closest(".ridu-richtext-block-toolbar") !== null;
 	}
 
+	function hideTargetLine() {
+		if (targetLineElement === null) return;
+		targetLineElement.style.opacity = "0";
+	}
+
+	function handleDragStart(event: DragEvent) {
+		if (draggableElement === null || event.dataTransfer === null) {
+			event.preventDefault();
+			return;
+		}
+
+		editor.read(() => {
+			draggedNodeKey = $getNearestNodeFromDOMNode(draggableElement!)?.getKey() ?? null;
+		});
+		if (draggedNodeKey === null) {
+			event.preventDefault();
+			return;
+		}
+		event.dataTransfer.effectAllowed = "move";
+		event.dataTransfer.setData(dragDataFormat, draggedNodeKey);
+		event.dataTransfer.setDragImage(draggableElement, 0, 0);
+		if (IS_FIREFOX) editor.getRootElement()?.focus({ preventScroll: true });
+	}
+
+	function handleDragEnd() {
+		if (draggedNodeKey === null) return;
+		draggedNodeKey = null;
+		draggableElement = null;
+		hideTargetLine();
+		const view = anchorElement.ownerDocument.defaultView;
+		if (view === null) return;
+		if (focusFrame !== undefined) view.cancelAnimationFrame(focusFrame);
+		// Native drag completion can move focus after the drop handler has run.
+		focusFrame = view.requestAnimationFrame(() => {
+			focusFrame = undefined;
+			editor.focus();
+			const root = editor.getRootElement();
+			if (root !== null && root.ownerDocument.activeElement !== root) {
+				root.focus({ preventScroll: true });
+			}
+		});
+	}
+
+	function withinEditorBuffer(
+		clientX: number,
+		clientY: number,
+		horizontalBuffer: number,
+		verticalBuffer: number
+	) {
+		const rect = anchorElement.getBoundingClientRect();
+		return (
+			clientX >= rect.left - horizontalBuffer &&
+			clientX <= rect.right + horizontalBuffer &&
+			clientY >= rect.top - verticalBuffer &&
+			clientY <= rect.bottom + verticalBuffer
+		);
+	}
+
+	function isFromAnotherEditor(target: EventTarget | null) {
+		const element =
+			target instanceof Element ? target : target instanceof Node ? target.parentElement : null;
+		return element?.closest(".ridu-richtext-canvas") !== anchorElement;
+	}
+
+	function isOwnedDropSurface(target: EventTarget | null) {
+		return target instanceof Node && anchorElement.contains(target) && !isFromAnotherEditor(target);
+	}
+
+	function findNearestBlock(clientY: number) {
+		const keys = editor.read(() => $getRoot().getChildrenKeys());
+		const blocks = keys
+			.map((key) => editor.getElementByKey(key))
+			.filter((element): element is HTMLElement => element !== null);
+		if (blocks.length === 0) return null;
+
+		let low = 0;
+		let high = blocks.length;
+		while (low < high) {
+			const middle = (low + high) >>> 1;
+			const rect = blocks[middle].getBoundingClientRect();
+			if (rect.bottom < clientY) low = middle + 1;
+			else high = middle;
+		}
+
+		const next = blocks[Math.min(low, blocks.length - 1)];
+		const previous = blocks[Math.max(0, low - 1)];
+		const nextRect = next.getBoundingClientRect();
+		const previousRect = previous.getBoundingClientRect();
+		const nextDistance = Math.max(nextRect.top - clientY, clientY - nextRect.bottom, 0);
+		const previousDistance = Math.max(previousRect.top - clientY, clientY - previousRect.bottom, 0);
+		return previousDistance < nextDistance ? previous : next;
+	}
+
+	function findHoveredBlock(target: EventTarget | null, clientY: number) {
+		const root = editor.getRootElement();
+		if (root === null) return null;
+		if (target instanceof Element && root.contains(target)) {
+			let element: Element | null = target;
+			while (element !== null && element.parentElement !== root) element = element.parentElement;
+			if (element instanceof HTMLElement) {
+				const key = editor.read(() => {
+					const node = $getNearestNodeFromDOMNode(element!);
+					return node?.getParent()?.is($getRoot()) ? node.getKey() : null;
+				});
+				if (key !== null && editor.getElementByKey(key) === element) return element;
+			}
+		}
+
+		const block = findNearestBlock(clientY);
+		if (block === null) return null;
+		const rect = block.getBoundingClientRect();
+		const style = block.ownerDocument.defaultView?.getComputedStyle(block);
+		const marginTop = Number.parseFloat(style?.marginTop ?? "") || 0;
+		const marginBottom = Number.parseFloat(style?.marginBottom ?? "") || 0;
+		return clientY >= rect.top - marginTop && clientY <= rect.bottom + marginBottom ? block : null;
+	}
+
+	function findDropTarget(clientY: number) {
+		const element = findNearestBlock(clientY);
+		if (element === null) return null;
+		const rect = element.getBoundingClientRect();
+		const empty = editor.read(() => {
+			const node = $getNearestNodeFromDOMNode(element);
+			return $isParagraphNode(node) && node.isEmpty();
+		});
+		return {
+			element,
+			before: clientY < rect.top + rect.height / 2,
+			empty,
+			rect,
+		};
+	}
+
+	// @lexical-scope
+	function $dropWouldMove(source: LexicalNode, target: LexicalNode, drop: DropTarget) {
+		if (source.is(target)) return false;
+		if (drop.empty) return true;
+		return drop.before
+			? !target.getPreviousSibling()?.is(source)
+			: !target.getNextSibling()?.is(source);
+	}
+
+	function positionTargetLine(target: DropTarget) {
+		if (targetLineElement === null) return;
+		const anchorRect = anchorElement.getBoundingClientRect();
+		const view = anchorElement.ownerDocument.defaultView;
+		if (view === null) return;
+		const margin = (element: Element | null, edge: "marginTop" | "marginBottom") =>
+			element === null ? 0 : Number.parseFloat(view.getComputedStyle(element)[edge]) || 0;
+		const gap = target.before
+			? Math.max(
+					margin(target.element, "marginTop"),
+					margin(target.element.previousElementSibling, "marginBottom")
+				)
+			: Math.max(
+					margin(target.element, "marginBottom"),
+					margin(target.element.nextElementSibling, "marginTop")
+				);
+		const top = target.empty
+			? target.rect.top + target.rect.height / 2
+			: target.before
+				? target.rect.top - gap / 2
+				: target.rect.bottom + gap / 2;
+		targetLineElement.style.width = `${target.rect.width}px`;
+		targetLineElement.style.transform = `translate(${target.rect.left - anchorRect.left}px, ${top - anchorRect.top + anchorElement.scrollTop - 2}px)`;
+		targetLineElement.style.opacity = "0.8";
+	}
+
+	function highlightMovedBlock(key: NodeKey) {
+		const view = anchorElement.ownerDocument.defaultView;
+		if (view === null) return;
+		if (highlightFrame !== undefined) view.cancelAnimationFrame(highlightFrame);
+		highlightAnimation?.cancel();
+		// Measure after Lexical reconciles the moved node into its new DOM position.
+		highlightFrame = view.requestAnimationFrame(() => {
+			highlightFrame = undefined;
+			const block = editor.getElementByKey(key);
+			if (block === null || highlightElement === null) return;
+			const rect = block.getBoundingClientRect();
+			const anchorRect = anchorElement.getBoundingClientRect();
+			highlightElement.style.width = `${rect.width + 8}px`;
+			highlightElement.style.height = `${rect.height + 8}px`;
+			highlightElement.style.transform = `translate(${rect.left - anchorRect.left - 4}px, ${rect.top - anchorRect.top + anchorElement.scrollTop - 4}px)`;
+			const reducedMotion = view.matchMedia("(prefers-reduced-motion: reduce)").matches;
+			highlightAnimation = highlightElement.animate(
+				[{ opacity: 0.1 }, { opacity: 0.1, offset: reducedMotion ? 1 : 2 / 3 }, { opacity: 0 }],
+				{ duration: reducedMotion ? 1000 : 1500 }
+			);
+		});
+	}
+
+	function positionMenu(element: HTMLElement) {
+		if (menuElement === null) return;
+		const blockRect = element.getBoundingClientRect();
+		const anchorRect = anchorElement.getBoundingClientRect();
+		const lineHeight = Number.parseFloat(
+			element.ownerDocument.defaultView?.getComputedStyle(element).lineHeight ?? ""
+		);
+		const height = Number.isFinite(lineHeight) ? lineHeight : blockRect.height;
+		const top = blockRect.top + (height - menuElement.getBoundingClientRect().height) / 2;
+		menuElement.style.transform = `translate(4px, ${top - anchorRect.top + anchorElement.scrollTop}px)`;
+	}
+
+	function updateDropIndicator(event: DragEvent) {
+		if (draggedNodeKey === null) return false;
+		if (!isOwnedDropSurface(event.target)) {
+			hideTargetLine();
+			return false;
+		}
+		const target = findDropTarget(event.clientY);
+		if (target === null) return false;
+		let canMove = false;
+		editor.read(() => {
+			const source = $getNodeByKey(draggedNodeKey!);
+			const destination = $getNearestNodeFromDOMNode(target.element);
+			canMove =
+				source !== null && destination !== null && $dropWouldMove(source, destination, target);
+		});
+		if (canMove) positionTargetLine(target);
+		else hideTargetLine();
+		event.preventDefault();
+		event.stopPropagation();
+		return true;
+	}
+
+	function handleDragLeave(event: DragEvent) {
+		if (draggedNodeKey === null) return;
+		const rect = anchorElement.getBoundingClientRect();
+		if (
+			event.clientX < rect.left ||
+			event.clientX > rect.right ||
+			event.clientY < rect.top ||
+			event.clientY > rect.bottom
+		)
+			hideTargetLine();
+	}
+
+	function handleDragEnter(event: DragEvent) {
+		if (draggedNodeKey !== null && !isOwnedDropSurface(event.target)) hideTargetLine();
+	}
+
+	function handleDocumentDrop(event: DragEvent) {
+		if (draggedNodeKey === null || !isOwnedDropSurface(event.target)) return;
+		const target = findDropTarget(event.clientY);
+		if (target === null) return;
+		const sourceKey = draggedNodeKey;
+		editor.update(() => {
+			const source = $getNodeByKey(sourceKey);
+			const destination = $getNearestNodeFromDOMNode(target.element);
+			if (source === null || destination === null || !$dropWouldMove(source, destination, target))
+				return;
+			if (target.empty) {
+				// replace() in Lexical 0.49 leaves the count stale when moving a sibling.
+				destination.insertBefore(source);
+				destination.remove();
+			} else if (target.before) destination.insertBefore(source);
+			else destination.insertAfter(source);
+			highlightMovedBlock(sourceKey);
+		});
+		event.preventDefault();
+		event.stopPropagation();
+		handleDragEnd();
+	}
+
 	function closePicker() {
 		pickerOpen = false;
 		pickerState = null;
@@ -184,12 +463,13 @@
 		editor.update(() => {
 			const target = $getNodeByKey(state.targetNodeKey);
 			if (target === null) return;
-			const placeholder = $createParagraphNode();
-			const text = $createTextNode("");
-			placeholder.append(text);
-			if (state.insertBefore) target.insertBefore(placeholder);
-			else target.insertAfter(placeholder);
-			text.select();
+			const placeholder =
+				$isParagraphNode(target) && target.isEmpty() ? target : $createParagraphNode();
+			if (placeholder !== target) {
+				if (state.insertBefore) target.insertBefore(placeholder);
+				else target.insertAfter(placeholder);
+			}
+			placeholder.select();
 			option.select();
 
 			if (option.preservePlaceholder) return;
@@ -208,12 +488,39 @@
 		};
 	};
 
+	const attachTargetLine: Attachment<HTMLElement> = (element) => {
+		targetLineElement = element;
+		return () => {
+			if (targetLineElement === element) targetLineElement = null;
+		};
+	};
+
+	const attachHighlight: Attachment<HTMLElement> = (element) => {
+		highlightElement = element;
+		return () => {
+			if (highlightElement === element) highlightElement = null;
+		};
+	};
+
 	const focusSearchInput: Attachment<HTMLInputElement> = (element) => {
 		element.focus();
 	};
 
-	$effect(() =>
-		mergeRegister(
+	$effect(() => {
+		const ownerDocument = anchorElement.ownerDocument;
+		function handleMouseMove(event: MouseEvent) {
+			if (draggedNodeKey !== null || pickerOpen) return;
+			if (event.target instanceof HTMLElement && isOnToolbar(event.target)) return;
+			draggableElement =
+				!isFromAnotherEditor(event.target) &&
+				withinEditorBuffer(event.clientX, event.clientY, 50, 25)
+					? findHoveredBlock(event.target, event.clientY)
+					: null;
+		}
+		function handleScroll() {
+			if (draggableElement !== null) positionMenu(draggableElement);
+		}
+		const unregisterCommands = mergeRegister(
 			editor.registerCommand(
 				KEY_ARROW_UP_COMMAND,
 				(event) => {
@@ -238,69 +545,90 @@
 				},
 				COMMAND_PRIORITY_LOW
 			)
-		)
-	);
+		);
+		ownerDocument.addEventListener("mousemove", handleMouseMove);
+		ownerDocument.addEventListener("dragover", updateDropIndicator, true);
+		ownerDocument.addEventListener("dragenter", handleDragEnter, true);
+		ownerDocument.addEventListener("dragleave", handleDragLeave, true);
+		ownerDocument.addEventListener("drop", handleDocumentDrop, true);
+		ownerDocument.addEventListener("scroll", handleScroll, true);
+		ownerDocument.defaultView?.addEventListener("resize", handleScroll);
+		return () => {
+			unregisterCommands();
+			ownerDocument.removeEventListener("mousemove", handleMouseMove);
+			ownerDocument.removeEventListener("dragover", updateDropIndicator, true);
+			ownerDocument.removeEventListener("dragenter", handleDragEnter, true);
+			ownerDocument.removeEventListener("dragleave", handleDragLeave, true);
+			ownerDocument.removeEventListener("drop", handleDocumentDrop, true);
+			ownerDocument.removeEventListener("scroll", handleScroll, true);
+			ownerDocument.defaultView?.removeEventListener("resize", handleScroll);
+			draggedNodeKey = null;
+			hideTargetLine();
+			if (focusFrame !== undefined) ownerDocument.defaultView?.cancelAnimationFrame(focusFrame);
+			if (highlightFrame !== undefined)
+				ownerDocument.defaultView?.cancelAnimationFrame(highlightFrame);
+			highlightAnimation?.cancel();
+		};
+	});
+
+	$effect(() => {
+		if (draggableElement !== null) positionMenu(draggableElement);
+	});
 </script>
 
 <PopoverRoot open={pickerOpen} onOpenChange={handlePickerOpenChange}>
-	<DraggableBlockPlugin
-		{anchorElement}
-		isOnMenu={isOnToolbar}
-		onElementChanged={(element) => (draggableElement = element)}
-	>
-		{#snippet menu(attach)}
-			<ToolbarRoot
-				class="ridu-richtext-block-toolbar absolute top-0 start-0 z-2 flex! h-6 cursor-grab items-center gap-[0.2rem] text-foreground-faint opacity-0 transition-[opacity,color] duration-120 will-change-[transform,opacity] hover:text-foreground-muted focus-within:text-foreground-muted active:cursor-grabbing"
-				aria-label={i18n.t("plugin.richtext:editor.blockActions")}
-				{@attach attach}
-				{@attach attachMenuElement}
+	<Portal to={anchorElement}>
+		<ToolbarRoot
+			class={["ridu-richtext-block-toolbar", draggableElement !== null && "is-visible"]}
+			inert={draggableElement === null}
+			aria-hidden={draggableElement === null ? true : undefined}
+			aria-label={i18n.t("plugin.richtext:editor.blockActions")}
+			{@attach attachMenuElement}
+		>
+			<ToolbarButton
+				class="ridu-richtext-block-grip"
+				type="button"
+				draggable="true"
+				title={i18n.t("plugin.richtext:editor.dragToMoveBlock")}
+				aria-label={i18n.t("plugin.richtext:editor.dragToMoveBlock")}
+				ondragstart={handleDragStart}
+				ondragend={handleDragEnd}
 			>
-				<span
-					class="ridu-richtext-block-grip grid h-5 w-[0.8rem] grid-cols-[repeat(2,2px)] grid-rows-[repeat(3,2px)] place-content-center gap-[2px]"
-					title={i18n.t("plugin.richtext:editor.dragToMoveBlock")}
-					aria-hidden="true"
-				>
-					<span></span>
-					<span></span>
-					<span></span>
-					<span></span>
-					<span></span>
-					<span></span>
-				</span>
-				<TooltipRoot>
-					<TooltipTrigger>
-						{#snippet child({ props })}
-							<ToolbarButton
-								{...props}
-								class="grid size-5 cursor-pointer place-items-center rounded-[3px] border border-transparent bg-transparent p-0 text-sm leading-none text-foreground-muted hover:border-control-border hover:bg-control-hover hover:text-foreground focus-visible:border-control-border focus-visible:bg-control-hover focus-visible:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/45"
-								type="button"
-								aria-label={i18n.t("plugin.richtext:editor.addBlock")}
-								aria-haspopup="dialog"
-								aria-expanded={pickerOpen}
-								aria-controls={pickerOpen ? "ridu-richtext-block-picker" : undefined}
-								onclick={openPicker}
-							>
-								<span aria-hidden="true">+</span>
-							</ToolbarButton>
-						{/snippet}
-					</TooltipTrigger>
-					<TooltipContent>{i18n.t("plugin.richtext:editor.addBlock")}</TooltipContent>
-				</TooltipRoot>
-			</ToolbarRoot>
-		{/snippet}
-
-		{#snippet targetLine(attach)}
-			<div
-				class="pointer-events-none absolute top-0 left-0 z-2 h-0.5 rounded-full bg-primary opacity-0 will-change-transform"
-				{@attach attach}
-			></div>
-		{/snippet}
-	</DraggableBlockPlugin>
+				<span aria-hidden="true"></span>
+				<span aria-hidden="true"></span>
+				<span aria-hidden="true"></span>
+				<span aria-hidden="true"></span>
+				<span aria-hidden="true"></span>
+				<span aria-hidden="true"></span>
+			</ToolbarButton>
+			<TooltipRoot>
+				<TooltipTrigger>
+					{#snippet child({ props })}
+						<ToolbarButton
+							{...props}
+							class="ridu-richtext-block-add"
+							type="button"
+							aria-label={i18n.t("plugin.richtext:editor.addBlock")}
+							aria-haspopup="dialog"
+							aria-expanded={pickerOpen}
+							aria-controls={pickerOpen ? pickerID : undefined}
+							onclick={openPicker}
+						>
+							<span aria-hidden="true">+</span>
+						</ToolbarButton>
+					{/snippet}
+				</TooltipTrigger>
+				<TooltipContent>{i18n.t("plugin.richtext:editor.addBlock")}</TooltipContent>
+			</TooltipRoot>
+		</ToolbarRoot>
+		<div class="ridu-richtext-drop-line" {@attach attachTargetLine}></div>
+		<div class="ridu-richtext-drop-highlight" aria-hidden="true" {@attach attachHighlight}></div>
+	</Portal>
 
 	{#if pickerOpen && menuElement !== null}
 		<PopoverContent
-			id="ridu-richtext-block-picker"
-			class="w-[min(19rem,calc(100vw-2rem))] animate-[ridu-richtext-menu-in_150ms_ease] motion-reduce:animate-none"
+			id={pickerID}
+			class="ridu-richtext-menu-popover"
 			role="dialog"
 			aria-label={i18n.t("plugin.richtext:editor.insertBlock")}
 			customAnchor={menuElement}
@@ -315,7 +643,7 @@
 			<CommandRoot label={i18n.t("plugin.richtext:editor.filterBlocks")} shouldFilter={false} loop>
 				<CommandInput
 					type="search"
-					class="box-border h-[2.6rem] border-0 border-b border-control-border bg-control px-[0.8rem] text-[13px] text-foreground outline-none placeholder:text-foreground-faint focus:border-b-primary/48"
+					class="ridu-richtext-picker-search"
 					aria-label={i18n.t("plugin.richtext:editor.filterBlocks")}
 					placeholder={i18n.t("plugin.richtext:editor.filterBlocksPlaceholder")}
 					bind:value={query}
@@ -323,9 +651,9 @@
 					{@attach focusSearchInput}
 				/>
 				{#if options.length > 0}
-					<RichTextMenu {options} onSelect={selectOption} embedded command />
+					<RichTextMenu {options} onSelect={selectOption} command />
 				{:else}
-					<p class="p-4 text-xs text-foreground-faint">
+					<p class="ridu-richtext-menu-empty">
 						{i18n.t("plugin.richtext:editor.noMatchingBlocks")}
 					</p>
 				{/if}
@@ -334,6 +662,11 @@
 	{/if}
 </PopoverRoot>
 
-<p class="sr-only" aria-live="polite" aria-atomic="true" data-richtext-movement-status>
+<p
+	class="ridu-richtext-announcement"
+	aria-live="polite"
+	aria-atomic="true"
+	data-richtext-movement-status
+>
 	{movementAnnouncement}
 </p>

package/src/menu/rich-text-commands.ts

@@ -13,13 +13,22 @@ export interface OpenUploadBrowserPayload {
 	nodeKey?: NodeKey;
 }
 
-export type OpenRelationshipBrowserPayload = OpenUploadBrowserPayload;
+export interface OpenRelationshipBrowserPayload {
+	collectionSlug?: string;
+	documentID?: string;
+	mode?: "edit" | "insert" | "replace";
+	nodeKey?: NodeKey;
+}
 
 export interface UpdateUploadCaptionPayload {
 	caption: string;
 	nodeKey: NodeKey;
 }
 
+export const OPEN_LINK_EDITOR_COMMAND: LexicalCommand<void> = createCommand(
+	"OPEN_LINK_EDITOR_COMMAND"
+);
+
 export const OPEN_UPLOAD_BROWSER_COMMAND: LexicalCommand<OpenUploadBrowserPayload> = createCommand(
 	"OPEN_UPLOAD_BROWSER_COMMAND"
 );

package/src/menu/rich-text-menu.scss

@@ -0,0 +1,92 @@
+@use "@riducms/ui/styles.scss" as ui;
+
+@layer ridu.components {
+	.ridu-richtext-menu-popover.ridu-popover-content {
+		inline-size: min(200px, calc(100vw - 16px));
+		padding: 0;
+		border: 0;
+		border-radius: 3px;
+		background: var(--control-surface);
+		box-shadow: var(--richtext-popup-shadow);
+	}
+
+	.ridu-richtext-menu {
+		max-block-size: min(300px, var(--bits-popover-content-available-height, 300px));
+		overflow-y: auto;
+		padding: 0;
+		color: var(--foreground);
+		font-family: var(--font-sans);
+		font-size: 13px;
+		line-height: 20px;
+	}
+
+	.ridu-richtext-menu__group {
+		padding-block-end: 8px;
+	}
+
+	.ridu-richtext-menu .ridu-richtext-menu__heading {
+		margin: 0;
+		padding: 0 10px;
+		color: var(--foreground-muted);
+		font-family: inherit;
+		font-size: 10px;
+		font-weight: 400;
+		letter-spacing: normal;
+		text-transform: none;
+	}
+
+	.ridu-richtext-menu__items {
+		display: grid;
+		gap: 0;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+
+	.ridu-richtext-menu .ridu-richtext-menu__option {
+		box-sizing: border-box;
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		min-block-size: 30px;
+		block-size: 30px;
+		padding: 0 12px;
+		border: 0;
+		border-radius: 0;
+		color: inherit;
+		font: inherit;
+		cursor: pointer;
+		outline: none;
+
+		&:hover,
+		&.is-selected,
+		&[data-selected] {
+			background: var(--control-surface-hover);
+		}
+
+		svg {
+			flex-shrink: 0;
+			color: var(--foreground-muted);
+		}
+	}
+
+	.ridu-richtext-menu__label {
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
+	.ridu-richtext-picker-search.ridu-command__input {
+		block-size: 36px;
+		padding: 0 10px;
+		border-block-end: 1px solid var(--control-border);
+		font-size: 13px;
+	}
+
+	.ridu-richtext-menu-empty {
+		padding: 12px;
+		margin: 0;
+		color: var(--foreground-muted);
+		font-size: 13px;
+	}
+}