@riducms/plugin-richtext 0.2.2 → 0.3.0

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

@@ -9,13 +9,14 @@
 	} from "@riducms/ui";
 
 	import type { RichTextMenuOption } from "@plugin-richtext/menu/rich-text-options";
+	import ToolbarIcon from "@plugin-richtext/toolbar/toolbar-icon.svelte";
+	import "@plugin-richtext/menu/rich-text-menu.scss";
 
 	let {
 		options,
 		selectedIndex = null,
 		onHighlight = () => undefined,
 		onSelect,
-		embedded = false,
 		command = false,
 		idPrefix = "richtext-menu-item",
 	}: {
@@ -23,85 +24,77 @@
 		selectedIndex?: number | null;
 		onHighlight?: (index: number) => void;
 		onSelect: (option: RichTextMenuOption) => void;
-		embedded?: boolean;
 		command?: boolean;
 		idPrefix?: string;
 	} = $props();
 	const i18n = getAdminI18n();
-	const menuClasses = $derived([
-		"ridu-richtext-menu max-h-80 w-[min(19rem,calc(100vw-2rem))] overflow-y-auto rounded-[4px] border border-control-border bg-popover p-[0.35rem] shadow-[var(--shadow-popover)] animate-[ridu-richtext-menu-in_150ms_ease] motion-reduce:animate-none",
-		embedded && "max-h-68 w-full rounded-0 border-0 shadow-none animate-none",
-	]);
-	const optionClasses =
-		"grid min-h-10 cursor-pointer grid-cols-[1.85rem_minmax(0,1fr)_auto] items-center gap-[0.6rem] rounded-[3px] px-[0.55rem] py-[0.35rem] text-foreground-muted outline-none hover:bg-control-hover hover:text-foreground data-[selected]:bg-control-hover data-[selected]:text-foreground";
+	const groups = $derived(
+		[...new Set(options.map((option) => option.group))].map((name) => ({
+			name,
+			items: options
+				.map((option, index) => ({ option, index }))
+				.filter(({ option }) => option.group === name),
+		}))
+	);
 </script>
 
 {#snippet optionContent(option: RichTextMenuOption)}
-	<span
-		class="grid size-7 place-items-center rounded-[3px] border border-control-border bg-control font-mono text-[10px] text-foreground-muted"
-		aria-hidden="true"
-	>
-		{option.glyph}
-	</span>
-	<span class="grid min-w-0 gap-[0.1rem]">
-		<strong class="text-[13px] font-medium">{option.label}</strong>
-		<small class="text-[11px] text-foreground-faint">{option.description}</small>
-	</span>
-	<span class="font-mono text-[11px] text-foreground-faint">{option.keyHint}</span>
+	<ToolbarIcon name={option.icon} />
+	<span class="ridu-richtext-menu__label">{option.label}</span>
 {/snippet}
 
 {#if command}
-	<CommandList class={menuClasses}>
-		<CommandGroup>
-			<CommandGroupHeading
-				class="px-[0.6rem] pt-[0.45rem] pb-[0.35rem] font-mono text-[10px] tracking-[0.13em] text-foreground-faint uppercase"
-			>
-				{i18n.t("plugin.richtext:editor.insertBlock")}
-			</CommandGroupHeading>
-			<CommandGroupItems>
-				{#each options as option, index (option.key)}
-					<CommandItem
-						class={optionClasses}
-						id={`${idPrefix}-${index}`}
-						value={option.label}
-						keywords={[...option.keywords]}
-						onSelect={() => onSelect(option)}
-					>
-						{@render optionContent(option)}
-					</CommandItem>
-				{/each}
-			</CommandGroupItems>
-		</CommandGroup>
+	<CommandList class="ridu-richtext-menu">
+		{#each groups as group (group.name)}
+			<CommandGroup class="ridu-richtext-menu__group">
+				<CommandGroupHeading class="ridu-richtext-menu__heading">
+					{i18n.t(`plugin.richtext:menu.${group.name}`)}
+				</CommandGroupHeading>
+				<CommandGroupItems class="ridu-richtext-menu__items">
+					{#each group.items as { option, index } (option.key)}
+						<CommandItem
+							class="ridu-richtext-menu__option"
+							id={`${idPrefix}-${index}`}
+							value={option.key}
+							keywords={[option.label, ...option.keywords]}
+							onSelect={() => onSelect(option)}
+						>
+							{@render optionContent(option)}
+						</CommandItem>
+					{/each}
+				</CommandGroupItems>
+			</CommandGroup>
+		{/each}
 	</CommandList>
 {:else}
-	<div class={menuClasses} data-richtext-menu-surface>
-		<p
-			class="px-[0.6rem] pt-[0.45rem] pb-[0.35rem] font-mono text-[10px] tracking-[0.13em] text-foreground-faint uppercase"
-		>
-			{i18n.t("plugin.richtext:editor.insertBlock")}
-		</p>
-		<ul class="grid list-none gap-[0.1rem] p-0" role="presentation">
-			{#each options as option, index (option.key)}
-				<li
-					id={`${idPrefix}-${index}`}
-					class={[optionClasses, selectedIndex === index && "bg-control-hover text-foreground"]}
-					role="option"
-					aria-selected={selectedIndex === index}
-					tabindex="-1"
-					{@attach option.attach}
-					onmouseenter={() => onHighlight(index)}
-					onmousedown={(event) => event.preventDefault()}
-					onclick={() => onSelect(option)}
-					onkeydown={(event) => {
-						if (event.key === "Enter" || event.key === " ") {
-							event.preventDefault();
-							onSelect(option);
-						}
-					}}
-				>
-					{@render optionContent(option)}
-				</li>
-			{/each}
-		</ul>
+	<div class="ridu-richtext-menu" data-richtext-menu-surface>
+		{#each groups as group (group.name)}
+			<div class="ridu-richtext-menu__group" role="presentation">
+				<p class="ridu-richtext-menu__heading">{i18n.t(`plugin.richtext:menu.${group.name}`)}</p>
+				<ul class="ridu-richtext-menu__items" role="presentation">
+					{#each group.items as { option, index } (option.key)}
+						<li
+							id={`${idPrefix}-${index}`}
+							class={["ridu-richtext-menu__option", selectedIndex === index && "is-selected"]}
+							role="option"
+							aria-selected={selectedIndex === index}
+							tabindex="-1"
+							{@attach option.attach}
+							onmouseenter={() => onHighlight(index)}
+							onmousedown={(event) => event.preventDefault()}
+							onclick={() => onSelect(option)}
+							onkeydown={(event) => {
+								if (event.key === "Enter" || event.key === " ") {
+									event.preventDefault();
+									onSelect(option);
+								}
+							}}
+						>
+							{@render optionContent(option)}
+						</li>
+					{/each}
+				</ul>
+			</div>
+		{/each}
 	</div>
 {/if}

package/src/menu/rich-text-option-filter.ts

@@ -0,0 +1,30 @@
+interface FilterableRichTextOption {
+	label: string;
+	description: string;
+	keywords: readonly string[];
+}
+
+export function filterRichTextOptions<Option extends FilterableRichTextOption>(
+	options: readonly Option[],
+	query: string,
+	language?: string
+): Option[] {
+	const normalized = query.trim().toLocaleLowerCase(language);
+	if (normalized === "") return [...options];
+	const compact = normalized.replace(/[\s\-_]/g, "");
+	const matches = (value: string) => {
+		const lower = value.toLocaleLowerCase(language);
+		return (
+			lower.includes(normalized) ||
+			(compact !== "" && lower.replace(/[\s\-_]/g, "").includes(compact))
+		);
+	};
+	const exactLabel = (option: Option) =>
+		option.label.toLocaleLowerCase(language).replace(/[\s\-_]/g, "") === compact;
+	return options
+		.filter(
+			(option) =>
+				matches(option.label) || matches(option.description) || option.keywords.some(matches)
+		)
+		.sort((a, b) => Number(exactLabel(b)) - Number(exactLabel(a)));
+}

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

@@ -1,10 +1,11 @@
+import type { RichTextIconName } from "@plugin-richtext/toolbar/toolbar-icon.svelte";
 import { $createCodeNode } from "@lexical/code";
 import {
 	INSERT_CHECK_LIST_COMMAND,
 	INSERT_ORDERED_LIST_COMMAND,
 	INSERT_UNORDERED_LIST_COMMAND,
 } from "@lexical/list";
-import { $createHeadingNode, $createQuoteNode } from "@lexical/rich-text";
+import { $createHeadingNode, $createQuoteNode, type HeadingTagType } from "@lexical/rich-text";
 import { $setBlocksType } from "@lexical/selection";
 import type { SchemaBlockType } from "@riducms/protocol";
 import type { AdminI18n, FieldAuthoringHost } from "@riducms/plugin";
@@ -24,13 +25,15 @@ import {
 } from "@plugin-richtext/menu/rich-text-commands";
 import { hasRichTextFeature, type RichTextConfig } from "@plugin-richtext/field/rich-text-config";
 
+export { filterRichTextOptions } from "@plugin-richtext/menu/rich-text-option-filter";
+
 export class RichTextMenuOption extends MenuOption {
 	readonly label: string;
 	readonly description: string;
-	readonly glyph: string;
+	readonly icon: RichTextIconName;
+	readonly group: "lists" | "basic" | "blocks";
 	readonly keywords: readonly string[];
 	readonly select: () => void;
-	readonly keyHint: string;
 	readonly preservePlaceholder: boolean;
 	readonly restoreEditorFocus: boolean;
 	readonly blockType: string | undefined;
@@ -39,11 +42,11 @@ export class RichTextMenuOption extends MenuOption {
 		key: string,
 		label: string,
 		description: string,
-		glyph: string,
+		icon: RichTextIconName,
 		keywords: readonly string[],
 		select: () => void,
 		options: {
-			keyHint?: string;
+			group?: "lists" | "basic" | "blocks";
 			preservePlaceholder?: boolean;
 			restoreEditorFocus?: boolean;
 			blockType?: string;
@@ -52,10 +55,10 @@ export class RichTextMenuOption extends MenuOption {
 		super(key);
 		this.label = label;
 		this.description = description;
-		this.glyph = glyph;
+		this.icon = icon;
+		this.group = options.group ?? "basic";
 		this.keywords = keywords;
 		this.select = select;
-		this.keyHint = options.keyHint ?? "↵";
 		this.preservePlaceholder = options.preservePlaceholder ?? true;
 		this.restoreEditorFocus = options.restoreEditorFocus ?? true;
 		this.blockType = options.blockType;
@@ -74,31 +77,26 @@ export function buildRichTextOptions(
 			"paragraph",
 			i18n.t("plugin.richtext:option.paragraph.label"),
 			i18n.t("plugin.richtext:option.paragraph.description"),
-			"¶",
+			"paragraph",
 			keywords(i18n.t("plugin.richtext:option.paragraph.keywords")),
 			() => $setBlock($createParagraphNode)
 		),
-		new RichTextMenuOption(
-			"heading-2",
-			i18n.t("plugin.richtext:option.heading2.label"),
-			i18n.t("plugin.richtext:option.heading2.description"),
-			"h2",
-			keywords(i18n.t("plugin.richtext:option.heading2.keywords")),
-			() => $setBlock(() => $createHeadingNode("h2"))
-		),
-		new RichTextMenuOption(
-			"heading-3",
-			i18n.t("plugin.richtext:option.heading3.label"),
-			i18n.t("plugin.richtext:option.heading3.description"),
-			"h3",
-			keywords(i18n.t("plugin.richtext:option.heading3.keywords")),
-			() => $setBlock(() => $createHeadingNode("h3"))
+		...[1, 2, 3, 4, 5, 6].map(
+			(level) =>
+				new RichTextMenuOption(
+					`heading-${level}`,
+					i18n.t("plugin.richtext:editor.heading", { level }),
+					"",
+					`h${level}` as RichTextIconName,
+					["heading", "title", `h${level}`],
+					() => $setBlock(() => $createHeadingNode(`h${level}` as HeadingTagType))
+				)
 		),
 		new RichTextMenuOption(
 			"quote",
 			i18n.t("plugin.richtext:option.quote.label"),
 			i18n.t("plugin.richtext:option.quote.description"),
-			'"',
+			"quote",
 			keywords(i18n.t("plugin.richtext:option.quote.keywords")),
 			() => $setBlock($createQuoteNode)
 		),
@@ -110,25 +108,28 @@ export function buildRichTextOptions(
 				"bulleted-list",
 				i18n.t("plugin.richtext:option.bulletedList.label"),
 				i18n.t("plugin.richtext:option.bulletedList.description"),
-				"•",
+				"unordered",
 				keywords(i18n.t("plugin.richtext:option.bulletedList.keywords")),
-				() => editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined)
+				() => editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined),
+				{ group: "lists" }
 			),
 			new RichTextMenuOption(
 				"numbered-list",
 				i18n.t("plugin.richtext:option.numberedList.label"),
 				i18n.t("plugin.richtext:option.numberedList.description"),
-				"1.",
+				"ordered",
 				keywords(i18n.t("plugin.richtext:option.numberedList.keywords")),
-				() => editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined)
+				() => editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined),
+				{ group: "lists" }
 			),
 			new RichTextMenuOption(
 				"checklist",
 				i18n.t("plugin.richtext:option.checklist.label"),
 				i18n.t("plugin.richtext:option.checklist.description"),
-				"☑",
+				"check",
 				keywords(i18n.t("plugin.richtext:option.checklist.keywords")),
-				() => editor.dispatchCommand(INSERT_CHECK_LIST_COMMAND, undefined)
+				() => editor.dispatchCommand(INSERT_CHECK_LIST_COMMAND, undefined),
+				{ group: "lists" }
 			)
 		);
 	}
@@ -139,7 +140,7 @@ export function buildRichTextOptions(
 				"code-block",
 				i18n.t("plugin.richtext:option.codeBlock.label"),
 				i18n.t("plugin.richtext:option.codeBlock.description"),
-				"</>",
+				"code-block",
 				keywords(i18n.t("plugin.richtext:option.codeBlock.keywords")),
 				() => $setBlock($createCodeNode)
 			)
@@ -152,7 +153,7 @@ export function buildRichTextOptions(
 				"divider",
 				i18n.t("plugin.richtext:option.divider.label"),
 				i18n.t("plugin.richtext:option.divider.description"),
-				"—",
+				"divider",
 				keywords(i18n.t("plugin.richtext:option.divider.keywords")),
 				() => editor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, undefined),
 				{ preservePlaceholder: false }
@@ -174,7 +175,7 @@ export function buildRichTextOptions(
 					i18n.t("plugin.richtext:option.upload.description", {
 						label: collection.labels.singular.toLocaleLowerCase(i18n.language),
 					}),
-					"ref",
+					"upload",
 					[...keywords(i18n.t("plugin.richtext:option.upload.keywords")), collection.slug],
 					() =>
 						queueMicrotask(() =>
@@ -186,77 +187,73 @@ export function buildRichTextOptions(
 				)
 			);
 		}
-		options.splice(4, 0, ...uploadOptions);
+		options.push(...uploadOptions);
 	}
 
-	if (hasRichTextFeature(config, "relationships")) {
-		const allowed = new Set(config.relationshipCollections);
-		const relationshipOptions: RichTextMenuOption[] = [];
-		for (const collection of authoring?.collections ?? []) {
-			if (allowed.size > 0 && !allowed.has(collection.slug)) continue;
-			relationshipOptions.push(
-				new RichTextMenuOption(
-					`relationship-${collection.slug}`,
-					i18n.t("plugin.richtext:option.relationship.label", {
-						label: collection.labels.singular,
-					}),
-					i18n.t("plugin.richtext:option.relationship.description", {
-						label: collection.labels.singular.toLocaleLowerCase(i18n.language),
-					}),
-					"rel",
-					[...keywords(i18n.t("plugin.richtext:option.relationship.keywords")), collection.slug],
-					() =>
-						queueMicrotask(() =>
-							editor.dispatchCommand(OPEN_RELATIONSHIP_BROWSER_COMMAND, {
-								collectionSlug: collection.slug,
-							})
-						),
-					{ restoreEditorFocus: false }
-				)
-			);
-		}
-		// Upload and relationship labels can intentionally overlap (for example,
-		// Asset and Related Asset). Preserve the established upload result first
-		// for keyboard selection and append the explicit relationship commands.
-		options.push(...relationshipOptions);
+	if (
+		hasRichTextFeature(config, "relationships") &&
+		authoring?.collections.some(
+			(collection) =>
+				config.relationshipCollections.length === 0 ||
+				config.relationshipCollections.includes(collection.slug)
+		)
+	) {
+		options.push(
+			new RichTextMenuOption(
+				"relationship",
+				i18n.t("plugin.richtext:option.relationship.label"),
+				i18n.t("plugin.richtext:option.relationship.description"),
+				"relationship",
+				keywords(i18n.t("plugin.richtext:option.relationship.keywords")),
+				() => queueMicrotask(() => editor.dispatchCommand(OPEN_RELATIONSHIP_BROWSER_COMMAND, {})),
+				{ restoreEditorFocus: false }
+			)
+		);
 	}
 
 	if (hasRichTextFeature(config, "blocks") && authoring?.beginSchemaDraft !== undefined) {
-		options.splice(
-			4,
-			0,
+		options.push(
 			...blockTypes.map(
 				(type) =>
 					new RichTextMenuOption(
 						`block-${type.slug}`,
 						type.labels.singular,
 						i18n.t("plugin.richtext:block.description", { key: type.slug }),
-						"▣",
+						"block",
 						["block", type.slug, type.labels.singular],
 						() =>
 							queueMicrotask(() =>
 								editor.dispatchCommand(OPEN_BLOCK_EDITOR_COMMAND, { blockType: type.slug })
 							),
-						{ restoreEditorFocus: false, blockType: type.slug }
+						{ restoreEditorFocus: false, blockType: type.slug, group: "blocks" }
 					)
 			)
 		);
 	}
-	return options;
-}
-
-export function filterRichTextOptions(
-	options: readonly RichTextMenuOption[],
-	query: string,
-	language?: string
-): RichTextMenuOption[] {
-	const normalized = query.trim().toLocaleLowerCase(language);
-	if (normalized === "") return [...options];
-	return options.filter(
-		(option) =>
-			option.label.toLocaleLowerCase(language).includes(normalized) ||
-			option.description.toLocaleLowerCase(language).includes(normalized) ||
-			option.keywords.some((keyword) => keyword.toLocaleLowerCase(language).includes(normalized))
+	// Later basic features move their merged group after the list group in Payload's default menu.
+	const groupOrder = { lists: 0, basic: 1, blocks: 2 };
+	const iconOrder: RichTextIconName[] = [
+		"check",
+		"ordered",
+		"unordered",
+		"divider",
+		"upload",
+		"quote",
+		"relationship",
+		"h1",
+		"h2",
+		"h3",
+		"h4",
+		"h5",
+		"h6",
+		"paragraph",
+		"code-block",
+		"block",
+	];
+	return options.sort(
+		(a, b) =>
+			groupOrder[a.group] - groupOrder[b.group] ||
+			iconOrder.indexOf(a.icon) - iconOrder.indexOf(b.icon)
 	);
 }
 

package/src/menu/rich-text-slash-menu.svelte

@@ -22,8 +22,10 @@
 	let { authoring, config }: { authoring: FieldAuthoringHost | undefined; config: RichTextConfig } =
 		$props();
 	const i18n = getAdminI18n();
+	const componentID = $props.id();
+	const menuLabelID = `${componentID}-label`;
 	const editor = useLexicalComposerContext()[0];
-	const trigger = createBasicTypeaheadTriggerMatch("/", { allowWhitespace: true, minLength: 0 });
+	const trigger = createBasicTypeaheadTriggerMatch("/", { minLength: 0 });
 	// Menu options carry attachment identity and the mounted field's feature set is fixed.
 	// svelte-ignore state_referenced_locally
 	const baseOptions = buildRichTextOptions(
@@ -38,16 +40,15 @@
 		contextElement: HTMLElement;
 		getBoundingClientRect: () => DOMRect;
 	} | null>(null);
-	let menuHost = $state<HTMLElement | null>(null);
+	let menuHost = $state.raw<HTMLElement | null>(null);
 	const options = $derived(filterRichTextOptions(baseOptions, query ?? "", i18n.language));
 
 	$effect(() => {
-		if (query !== null) {
-			menuHost?.parentElement?.setAttribute(
-				"aria-label",
-				i18n.t("plugin.richtext:editor.insertBlock")
-			);
-		}
+		const anchor = menuHost?.parentElement;
+		if (anchor === undefined || anchor === null) return;
+		// The upstream anchor rewrites aria-label on every query resolution.
+		anchor.setAttribute("aria-labelledby", menuLabelID);
+		return () => anchor.removeAttribute("aria-labelledby");
 	});
 
 	function openMenu(resolution: MenuResolution) {
@@ -95,12 +96,16 @@
 	{trigger}
 >
 	{#snippet menu(menuProps)}
-		<div bind:this={menuHost} role="presentation"></div>
+		<div bind:this={menuHost} role="presentation">
+			<span id={menuLabelID} class="ridu-richtext-announcement">
+				{i18n.t("plugin.richtext:editor.insertBlock")}
+			</span>
+		</div>
 		{#if menuProps.options.length > 0 && menuAnchor !== null && menuHost !== null}
 			<PopoverRoot open>
 				<PopoverContent
 					portalTo={menuHost}
-					class="w-[min(19rem,calc(100vw-2rem))] p-0 animate-[ridu-richtext-menu-in_150ms_ease] motion-reduce:animate-none"
+					class="ridu-richtext-menu-popover"
 					role="presentation"
 					customAnchor={menuAnchor}
 					side="bottom"
@@ -122,7 +127,6 @@
 								?.setAttribute("aria-activedescendant", `typeahead-item-${index}`);
 						}}
 						onSelect={menuProps.selectOption}
-						embedded
 						idPrefix="typeahead-item"
 					/>
 				</PopoverContent>