@tristan2828/ui-foundation 3.17.0 → 3.18.0

package/conventions/docs/cell-patterns.md

@@ -746,8 +746,11 @@ const price = editInPlace({
   words (bold, italic, strikethrough, code, link); Alt+F10 reaches the
   floating one, else the fixed one. Both are part of the field, so moving
   to them doesn't save, and Esc hides the floating one before it gives up
-  the edit. `toolbar={false}` leaves both out where a value is short and
-  the shortcuts are enough.
+  the edit. "/" typed at a line's start lists the blocks the line can
+  become (headings, lists, quote, code block); typing filters, Enter or
+  Tab picks, and Esc closes the list before it gives up the edit.
+  `toolbar={false}` leaves out the toolbars and the slash menu where a
+  value is short and the shortcuts are enough.
 - **The save is the single-field save** (`useRecordUpdate` with
   `optimistic: false, toastOnError: false`, the entity's
   `useEdit<Entity>Field`), `mutateAsync` of one field's PATCH.

package/dist/components/app/milkdown-editor.js

@@ -26,6 +26,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 //   floating one over selected words (rich-text-floating-toolbar.tsx),
 //   unless `toolbar={false}`. Alt+F10 reaches the floating one when it
 //   shows, else the fixed one.
+// - A slash menu (rich-text-slash.ts, rich-text-slash-menu.tsx): "/" at a
+//   line's start lists the blocks it can become, also unless
+//   `toolbar={false}`.
 import { useEffect, useId, useRef, useState } from 'react';
 import { defaultValueCtx, Editor, editorViewCtx, editorViewOptionsCtx, parserCtx, remarkStringifyOptionsCtx, rootCtx, schemaCtx, serializerCtx, } from '@milkdown/kit/core';
 import { history } from '@milkdown/kit/plugin/history';
@@ -44,6 +47,8 @@ import { linkHref } from '../../lib/link-href.js';
 import { MarkdownMergeError, markdownStyle, mergeMarkdown } from '../../lib/markdown-merge.js';
 import { RichTextFloatingToolbar } from './rich-text-floating-toolbar.js';
 import { toggleFormat } from './rich-text-formats.js';
+import { applySlash, closeSlash, slashItems, slashOptionId, slashPlugin, slashQuery, } from './rich-text-slash.js';
+import { RichTextSlashMenu } from './rich-text-slash-menu.js';
 import { RichTextToolbar } from './rich-text-toolbar.js';
 // The commonmark preset, minus the plugin that writes `<br />`. A $remark
 // plugin is a pair (its options and the plugin), spread into `plugins`.
@@ -205,6 +210,11 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
     const [field, setField] = useState(null);
     // Whether the floating toolbar shows, for the editor's keys (set up once).
     const floatingOpenRef = useRef(false);
+    // The slash menu's highlighted item, for the query it was moved on (a
+    // new query starts again from the first).
+    const [slashActive, setSlashActive] = useState({ key: '', index: 0 });
+    // The open slash menu, for the editor's keys (set up once).
+    const slashMenuRef = useRef(null);
     // Opens the link box: made with the editor, used by the toolbar's Link.
     const openLinkRef = useRef(() => { });
     // The latest props, for the editor's callbacks, which are set up once.
@@ -238,6 +248,21 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
         attributes['aria-placeholder'] = placeholder;
     if (toolbar)
         attributes['aria-keyshortcuts'] = 'Alt+F10';
+    // The slash menu: open while a "/" typed at a line's start is followed
+    // by something some block answers to, and the field has focus.
+    const slash = toolbar && !readOnly && focused && editorState ? slashQuery(editorState) : null;
+    const slashMatches = slash ? slashItems(slash.query) : [];
+    const slashOpen = slash !== null && slashMatches.length > 0;
+    const slashMenuKey = slash ? `${slash.from}:${slash.query}` : '';
+    const slashIndex = slashActive.key === slashMenuKey ? Math.min(slashActive.index, slashMatches.length - 1) : 0;
+    const slashListId = `${ids}-blocks`;
+    // The text is the combobox's input: it names the list and the
+    // highlighted item, and focus stays in it.
+    if (slashOpen) {
+        attributes['aria-autocomplete'] = 'list';
+        attributes['aria-controls'] = slashListId;
+        attributes['aria-activedescendant'] = slashOptionId(slashListId, slashIndex);
+    }
     const attributesKey = JSON.stringify(attributes);
     // The editor is made once, from the Markdown it opened with.
     useEffect(() => {
@@ -297,6 +322,7 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
         };
         openLinkRef.current = openLink;
         // Paste, copy, the editor's own keys and the placeholder.
+        const slashing = $prose(() => slashPlugin());
         const input = $prose((ctx) => new Plugin({
             props: {
                 // Plain text is read as Markdown, so `## Notes` or `**bold**`
@@ -407,6 +433,34 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
                 ...options,
                 editable: () => !latest.current.readOnly,
                 attributes,
+                // The slash menu's keys, as view props: before Milkdown's own
+                // keymap, whose Enter would split the line.
+                handleKeyDown: (view, event) => {
+                    const menu = slashMenuRef.current;
+                    if (!menu)
+                        return false;
+                    const step = event.key === 'ArrowDown' ? 1 : event.key === 'ArrowUp' ? -1 : 0;
+                    const plain = !event.metaKey && !event.ctrlKey && !event.altKey && !event.shiftKey;
+                    if (step && plain) {
+                        event.preventDefault();
+                        const count = menu.items.length;
+                        setSlashActive({ key: menu.key, index: (menu.index + step + count) % count });
+                        return true;
+                    }
+                    if ((event.key === 'Enter' || event.key === 'Tab') && plain) {
+                        event.preventDefault();
+                        applySlash(view, menu.span, menu.items[menu.index].id);
+                        return true;
+                    }
+                    // Esc closes the menu only: the field's own Esc (editing in
+                    // place gives up the edit) waits for the next one.
+                    if (event.key === 'Escape') {
+                        event.preventDefault();
+                        view.dispatch(closeSlash(view.state));
+                        return true;
+                    }
+                    return false;
+                },
                 nodeViews: {
                     heading: headingView,
                     list_item: (node, view, getPos) => node.attrs.checked == null ? undefined : taskItemView(node, view, getPos),
@@ -417,6 +471,7 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
             .use(gfm)
             .use(history)
             .use(changes)
+            .use(slashing)
             .use(input);
         void make.create().then((editor) => {
             if (cancelled) {
@@ -486,6 +541,9 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
         floatingOpenRef.current = floatingOpen;
     });
     const returnToText = () => editorView?.focus();
+    useEffect(() => {
+        slashMenuRef.current = slashOpen && slash ? { key: slashMenuKey, span: slash, items: slashMatches, index: slashIndex } : null;
+    });
     const closeLink = () => {
         setLinkBox(null);
         editorRef.current?.action((ctx) => ctx.get(editorViewCtx).focus());
@@ -505,7 +563,7 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
                         // Raw HTML from the text: shown as its characters, never as markup.
                         '[&_span[data-type=html]]:rounded [&_span[data-type=html]]:bg-muted [&_span[data-type=html]]:px-1 [&_span[data-type=html]]:font-mono [&_span[data-type=html]]:text-foreground', 
                         // The placeholder, in an empty document only (a decoration).
-                        '[&_p[data-placeholder]]:before:pointer-events-none [&_p[data-placeholder]]:before:float-left [&_p[data-placeholder]]:before:h-0 [&_p[data-placeholder]]:before:text-muted-foreground [&_p[data-placeholder]]:before:content-[attr(data-placeholder)]') }), floatingOpen && editorView && editorState && (_jsx(RichTextFloatingToolbar, { ref: floatingRef, view: editorView, state: editorState, field: field, controls: editableId, onFormat: runFormat, onDismiss: () => setDismissed({ from: editorState.selection.from, to: editorState.selection.to }), onReturn: returnToText, onBlur: (event) => {
+                        '[&_p[data-placeholder]]:before:pointer-events-none [&_p[data-placeholder]]:before:float-left [&_p[data-placeholder]]:before:h-0 [&_p[data-placeholder]]:before:text-muted-foreground [&_p[data-placeholder]]:before:content-[attr(data-placeholder)]') }), slashOpen && slash && editorView && (_jsx(RichTextSlashMenu, { id: slashListId, view: editorView, at: slash.to, field: field, items: slashMatches, active: slashIndex, onHighlight: (index) => setSlashActive({ key: slashMenuKey, index }), onPick: (format) => applySlash(editorView, slash, format) })), floatingOpen && editorView && editorState && (_jsx(RichTextFloatingToolbar, { ref: floatingRef, view: editorView, state: editorState, field: field, controls: editableId, onFormat: runFormat, onDismiss: () => setDismissed({ from: editorState.selection.from, to: editorState.selection.to }), onReturn: returnToText, onBlur: (event) => {
                             const next = event.relatedTarget;
                             if (!editorView.dom.contains(next) && !floatingRef.current?.contains(next))
                                 setFocused(false);

package/dist/components/app/rich-text-editor.d.ts

@@ -21,8 +21,10 @@ export type RichTextEditorProps = {
     /**
      * The formatting toolbars: one fixed above the text (bold, headings,
      * lists, link, …), each button with its shortcut, and one floating over
-     * selected words (bold to link). Alt+F10 reaches them from the text. On
-     * by default; `false` leaves the text alone, its shortcuts still working.
+     * selected words (bold to link). Alt+F10 reaches them from the text.
+     * With them, "/" at a line's start lists the blocks the line can become
+     * (the slash menu). On by default; `false` leaves the text alone, its
+     * shortcuts still working.
      */
     toolbar?: boolean;
     className?: string;

package/dist/components/app/rich-text-format-items.d.ts

@@ -0,0 +1,12 @@
+import { type LucideIcon } from 'lucide-react';
+import type { FormatId } from './rich-text-formats.js';
+export type FormatItem = {
+    id: FormatId;
+    label: string;
+    icon: LucideIcon;
+    /** Milkdown's own shortcut, as `aria-keyshortcuts` writes it with Mod for Ctrl/Cmd. */
+    keys?: string;
+    /** More for the tooltip than the shortcut. */
+    hint?: string;
+};
+export declare const FORMAT_GROUPS: FormatItem[][];

package/dist/components/app/rich-text-format-items.js

@@ -0,0 +1,27 @@
+// The rich-text editor's formats as people see them: each one's name, icon
+// and shortcut, in the groups the fixed toolbar shows. Shared by the
+// toolbars (rich-text-toolbar.tsx) and the slash menu
+// (rich-text-slash-menu.tsx).
+import { BoldIcon, CodeIcon, Heading1Icon, Heading2Icon, ItalicIcon, LinkIcon, ListChecksIcon, ListIcon, ListOrderedIcon, SquareCodeIcon, StrikethroughIcon, TextQuoteIcon, } from 'lucide-react';
+export const FORMAT_GROUPS = [
+    [
+        { id: 'bold', label: 'Bold', icon: BoldIcon, keys: 'Mod+B' },
+        { id: 'italic', label: 'Italic', icon: ItalicIcon, keys: 'Mod+I' },
+        { id: 'strike', label: 'Strikethrough', icon: StrikethroughIcon, keys: 'Mod+Alt+X' },
+        { id: 'code', label: 'Code', icon: CodeIcon, keys: 'Mod+E' },
+    ],
+    [
+        { id: 'heading', label: 'Heading', icon: Heading1Icon, keys: 'Mod+Alt+1' },
+        { id: 'subheading', label: 'Subheading', icon: Heading2Icon, keys: 'Mod+Alt+2' },
+    ],
+    [
+        { id: 'bullets', label: 'Bulleted list', icon: ListIcon, keys: 'Mod+Alt+8' },
+        { id: 'numbers', label: 'Numbered list', icon: ListOrderedIcon, keys: 'Mod+Alt+7' },
+        { id: 'tasks', label: 'Task list', icon: ListChecksIcon, hint: 'tick an item: Mod+Shift+Enter' },
+    ],
+    [
+        { id: 'quote', label: 'Quote', icon: TextQuoteIcon, keys: 'Mod+Shift+B' },
+        { id: 'codeBlock', label: 'Code block', icon: SquareCodeIcon, keys: 'Mod+Alt+C' },
+    ],
+    [{ id: 'link', label: 'Link', icon: LinkIcon, keys: 'Mod+K' }],
+];

package/dist/components/app/rich-text-slash-menu.d.ts

@@ -0,0 +1,18 @@
+import type { EditorView } from '@milkdown/kit/prose/view';
+import type { FormatItem } from './rich-text-format-items.js';
+import type { FormatId } from './rich-text-formats.js';
+export interface RichTextSlashMenuProps {
+    /** The list's id, for the text's `aria-controls`. */
+    id: string;
+    view: EditorView;
+    /** The caret: where it's placed. */
+    at: number;
+    /** The field's element it's placed against (positioned: `relative`). */
+    field: HTMLElement | null;
+    items: FormatItem[];
+    /** The highlighted item: Enter picks it. */
+    active: number;
+    onHighlight: (index: number) => void;
+    onPick: (id: FormatId) => void;
+}
+export declare function RichTextSlashMenu({ id, view, at, field, items, active, onHighlight, onPick }: RichTextSlashMenuProps): import("react").JSX.Element;

package/dist/components/app/rich-text-slash-menu.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The rich-text editor's slash menu: the blocks a paragraph can become
+// (Heading to Code block), listed under the caret after a "/" typed at a
+// line's start (rich-text-slash.ts). ARIA's combobox pattern with the
+// text as the input: focus never leaves the text. The text names this
+// list (`aria-controls`) and the highlighted item
+// (`aria-activedescendant`); the arrow keys move the highlight, Enter or
+// Tab picks, Esc closes it and leaves what was typed (milkdown-editor.tsx).
+//
+// Placed against the field's element like the floating toolbar, not in a
+// portal (rich-text-floating-toolbar.tsx says why): under the caret, or
+// over it when the window has no room below.
+import { useLayoutEffect, useState } from 'react';
+import { cn } from 'cn';
+import { slashOptionId } from './rich-text-slash.js';
+// Its gap from the caret's line.
+const GAP = 4;
+function place(view, at, field, menu) {
+    const caret = view.coordsAtPos(at);
+    const box = field.getBoundingClientRect();
+    const { offsetWidth: width, offsetHeight: height } = menu;
+    const below = caret.bottom + GAP + height <= window.innerHeight || caret.top - GAP - height < 0;
+    const top = below ? caret.bottom + GAP : caret.top - GAP - height;
+    const left = Math.max(0, Math.min(caret.left - box.left, box.width - width));
+    return { top: top - box.top, left, side: below ? 'bottom' : 'top' };
+}
+export function RichTextSlashMenu({ id, view, at, field, items, active, onHighlight, onPick }) {
+    const [menu, setMenu] = useState(null);
+    const [placement, setPlacement] = useState(null);
+    // Placed as the caret moves and the list narrows, and again when the
+    // window's size changes.
+    useLayoutEffect(() => {
+        if (!menu || !field)
+            return;
+        const update = () => setPlacement(place(view, at, field, menu));
+        update();
+        window.addEventListener('resize', update);
+        return () => window.removeEventListener('resize', update);
+    }, [view, at, field, menu, items.length]);
+    // The highlighted item stays in sight.
+    useLayoutEffect(() => {
+        menu?.querySelector(`#${CSS.escape(slashOptionId(id, active))}`)?.scrollIntoView({ block: 'nearest' });
+    }, [menu, id, active]);
+    return (_jsx("div", { ref: setMenu, id: id, role: "listbox", "aria-label": "Blocks", "data-slot": "rich-text-slash-menu", "data-side": placement?.side, style: placement ? { top: placement.top, left: placement.left } : undefined, className: cn('absolute z-50 flex max-h-72 w-56 flex-col gap-0.5 overflow-y-auto rounded-lg bg-popover p-1 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10', 'animate-in fade-in-0 zoom-in-95 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2', 
+        // Measured before it's seen, so it never shows in the wrong place.
+        !placement && 'invisible'), children: items.map((item, index) => {
+            const Icon = item.icon;
+            return (_jsxs("div", { id: slashOptionId(id, index), role: "option", "aria-selected": index === active, className: "flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 select-none aria-selected:bg-muted", 
+                // A press never takes focus from the text.
+                onMouseDown: (event) => event.preventDefault(), onMouseMove: () => index !== active && onHighlight(index), onClick: () => onPick(item.id), children: [_jsx(Icon, { "aria-hidden": "true", className: "size-4 shrink-0" }), item.label] }, item.id));
+        }) }));
+}

package/dist/components/app/rich-text-slash.d.ts

@@ -0,0 +1,30 @@
+import { Plugin, type EditorState, type Transaction } from '@milkdown/kit/prose/state';
+import type { EditorView } from '@milkdown/kit/prose/view';
+import { type FormatItem } from './rich-text-format-items.js';
+import { type FormatId } from './rich-text-formats.js';
+/** Where the "/" that opened the menu is, while it's open. */
+type SlashState = {
+    from: number;
+} | null;
+/** The open menu's span in the text ("/" to the caret) and what's typed after the "/". */
+export type SlashQuery = {
+    from: number;
+    to: number;
+    query: string;
+};
+/** The open menu's span and query, or null when it's closed. */
+export declare function slashQuery(state: EditorState): SlashQuery | null;
+/** The transaction that closes the menu, leaving what was typed as text (Esc). */
+export declare function closeSlash(state: EditorState): Transaction;
+/** The id of the menu's item at `index`, for the text's `aria-activedescendant`. */
+export declare function slashOptionId(listId: string, index: number): string;
+/** The plugin: opens on a typed "/", follows the text, closes once the span stops qualifying. */
+export declare function slashPlugin(): Plugin<SlashState>;
+/** The blocks matching what's typed after the "/": in the name, or the start of a keyword. */
+export declare function slashItems(query: string): FormatItem[];
+/**
+ * Picks an item: the "/…" goes and the paragraph becomes that block, in one
+ * transaction (one undo step, which brings the "/…" back).
+ */
+export declare function applySlash(view: EditorView, span: SlashQuery, id: FormatId): void;
+export {};

package/dist/components/app/rich-text-slash.js

@@ -0,0 +1,111 @@
+// The slash menu's logic: "/" typed at the start of a top-level paragraph
+// opens it, what's typed after the "/" filters it, and picking an item
+// turns the paragraph into that block, the "/…" gone. The menu itself:
+// rich-text-slash-menu.tsx; its keys and ARIA: milkdown-editor.tsx.
+//
+// Only a "/" typed there opens it: one already in the text (a path,
+// `/usr/bin`) never does, and neither does a "/" mid-line or inside a
+// list, a quote or a code block.
+import { Plugin, PluginKey } from '@milkdown/kit/prose/state';
+import { FORMAT_GROUPS } from './rich-text-format-items.js';
+import { toggleFormat } from './rich-text-formats.js';
+const slashKey = new PluginKey('rich-text-slash');
+// Longer than any item's name: past it, the person is writing, not picking.
+const MAX_QUERY = 24;
+// A top-level paragraph's start: where a "/" opens the menu.
+function atParagraphStart(state, pos) {
+    const $pos = state.doc.resolve(pos);
+    return $pos.depth === 1 && $pos.parent.type.name === 'paragraph' && $pos.parentOffset === 0;
+}
+// The menu's span, if the "/" at `from` still opens it: the caret after it
+// in the same paragraph, nothing selected, and what follows the "/" plain
+// text that doesn't start with a space.
+function queryAt(state, from) {
+    const { selection, doc } = state;
+    if (!selection.empty || from >= doc.content.size || !atParagraphStart(state, from))
+        return null;
+    const to = selection.from;
+    if (to <= from || !doc.resolve(from).sameParent(selection.$from))
+        return null;
+    const text = doc.textBetween(from, to, '\n', '\n');
+    if (!text.startsWith('/'))
+        return null;
+    const query = text.slice(1);
+    if (query.length > MAX_QUERY || /^\s|\n/.test(query))
+        return null;
+    return { from, to, query };
+}
+/** The open menu's span and query, or null when it's closed. */
+export function slashQuery(state) {
+    const open = slashKey.getState(state);
+    return open ? queryAt(state, open.from) : null;
+}
+/** The transaction that closes the menu, leaving what was typed as text (Esc). */
+export function closeSlash(state) {
+    return state.tr.setMeta(slashKey, 'close');
+}
+/** The id of the menu's item at `index`, for the text's `aria-activedescendant`. */
+export function slashOptionId(listId, index) {
+    return `${listId}-${index}`;
+}
+/** The plugin: opens on a typed "/", follows the text, closes once the span stops qualifying. */
+export function slashPlugin() {
+    return new Plugin({
+        key: slashKey,
+        state: {
+            init: () => null,
+            apply: (tr, value, _previous, next) => {
+                const meta = tr.getMeta(slashKey);
+                if (meta === 'close')
+                    return null;
+                const from = meta ? meta.from : value ? tr.mapping.map(value.from) : null;
+                // Closed for good once it stops qualifying: the caret coming back
+                // later doesn't reopen it.
+                return from !== null && queryAt(next, from) ? { from } : null;
+            },
+        },
+        props: {
+            handleTextInput: (view, from, to, text) => {
+                if (text !== '/' || from !== to || !atParagraphStart(view.state, from))
+                    return false;
+                view.dispatch(view.state.tr.insertText('/', from, to).setMeta(slashKey, { from }));
+                return true;
+            },
+        },
+    });
+}
+// What each block answers to besides its name.
+const KEYWORDS = {
+    heading: ['h1', 'title'],
+    subheading: ['h2'],
+    bullets: ['ul', 'unordered', 'bullet'],
+    numbers: ['ol', 'ordered', 'number'],
+    tasks: ['todo', 'checkbox', 'checklist'],
+    quote: ['blockquote'],
+    codeBlock: ['pre'],
+};
+// The menu's items: the blocks, in the toolbar's order.
+const BLOCKS = FORMAT_GROUPS.flat().filter((item) => KEYWORDS[item.id]);
+/** The blocks matching what's typed after the "/": in the name, or the start of a keyword. */
+export function slashItems(query) {
+    const typed = query.trim().toLowerCase();
+    if (!typed)
+        return BLOCKS;
+    return BLOCKS.filter((item) => item.label.toLowerCase().includes(typed) || KEYWORDS[item.id].some((word) => word.startsWith(typed)));
+}
+/**
+ * Picks an item: the "/…" goes and the paragraph becomes that block, in one
+ * transaction (one undo step, which brings the "/…" back).
+ */
+export function applySlash(view, span, id) {
+    const tr = view.state.tr.delete(span.from, span.to).setMeta(slashKey, 'close');
+    let formatted = null;
+    toggleFormat(view.state.apply(tr), (next) => (formatted = next), id);
+    const done = formatted;
+    if (done) {
+        for (const step of done.steps)
+            tr.step(step);
+        tr.setSelection(done.selection.getBookmark().resolve(tr.doc));
+    }
+    view.dispatch(tr.scrollIntoView());
+}

package/dist/components/app/rich-text-toolbar.d.ts

@@ -1,16 +1,7 @@
-import { type LucideIcon } from 'lucide-react';
 import { type Ref } from 'react';
 import type { EditorState } from '@milkdown/kit/prose/state';
+import { type FormatItem } from './rich-text-format-items.js';
 import { type FormatId } from './rich-text-formats.js';
-type FormatItem = {
-    id: FormatId;
-    label: string;
-    icon: LucideIcon;
-    /** Milkdown's own shortcut, as `aria-keyshortcuts` writes it with Mod for Ctrl/Cmd. */
-    keys?: string;
-    /** More for the tooltip than the shortcut. */
-    hint?: string;
-};
 declare const SETS: {
     all: FormatItem[][];
     selection: FormatItem[][];

package/dist/components/app/rich-text-toolbar.js

@@ -12,34 +12,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // - Read-only (while a save is in flight), every button is disabled.
 // - Alt+F10 in the text reaches it (the floating toolbar first, when it's
 //   showing: rich-text-floating-toolbar.tsx).
-import { BoldIcon, CodeIcon, Heading1Icon, Heading2Icon, ItalicIcon, LinkIcon, ListChecksIcon, ListIcon, ListOrderedIcon, SquareCodeIcon, StrikethroughIcon, TextQuoteIcon, } from 'lucide-react';
 import { Fragment, useRef, useState } from 'react';
 import { Separator } from '../ui/separator.js';
 import { Toggle } from '../ui/toggle.js';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip.js';
+import { FORMAT_GROUPS } from './rich-text-format-items.js';
 import { formatOn } from './rich-text-formats.js';
-const GROUPS = [
-    [
-        { id: 'bold', label: 'Bold', icon: BoldIcon, keys: 'Mod+B' },
-        { id: 'italic', label: 'Italic', icon: ItalicIcon, keys: 'Mod+I' },
-        { id: 'strike', label: 'Strikethrough', icon: StrikethroughIcon, keys: 'Mod+Alt+X' },
-        { id: 'code', label: 'Code', icon: CodeIcon, keys: 'Mod+E' },
-    ],
-    [
-        { id: 'heading', label: 'Heading', icon: Heading1Icon, keys: 'Mod+Alt+1' },
-        { id: 'subheading', label: 'Subheading', icon: Heading2Icon, keys: 'Mod+Alt+2' },
-    ],
-    [
-        { id: 'bullets', label: 'Bulleted list', icon: ListIcon, keys: 'Mod+Alt+8' },
-        { id: 'numbers', label: 'Numbered list', icon: ListOrderedIcon, keys: 'Mod+Alt+7' },
-        { id: 'tasks', label: 'Task list', icon: ListChecksIcon, hint: 'tick an item: Mod+Shift+Enter' },
-    ],
-    [
-        { id: 'quote', label: 'Quote', icon: TextQuoteIcon, keys: 'Mod+Shift+B' },
-        { id: 'codeBlock', label: 'Code block', icon: SquareCodeIcon, keys: 'Mod+Alt+C' },
-    ],
-    [{ id: 'link', label: 'Link', icon: LinkIcon, keys: 'Mod+K' }],
-];
 function isApple() {
     return typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
 }
@@ -60,8 +38,8 @@ function shownKeys(keys, apple) {
 // Which buttons a toolbar has: every format (the fixed one), or the ones
 // that apply to selected words (the floating one).
 const SETS = {
-    all: GROUPS,
-    selection: [GROUPS[0], GROUPS[4]],
+    all: FORMAT_GROUPS,
+    selection: [FORMAT_GROUPS[0], FORMAT_GROUPS[4]],
 };
 // A toolbar's row of buttons: one tab stop, the last one used (ARIA's
 // toolbar pattern); the arrow keys, Home and End move along the row. The

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tristan2828/ui-foundation",
-  "version": "3.17.0",
+  "version": "3.18.0",
   "description": "Shared UI foundation for contract-first, database-backed React apps: shadcn primitives, DataTable/EntityForm composites, auth, the gateway error seam, design tokens, lint rules and the AI playbook.",
   "license": "MIT",
   "repository": {