@tristan2828/ui-foundation 3.16.1 → 3.17.0

package/conventions/docs/cell-patterns.md

@@ -742,9 +742,12 @@ const price = editInPlace({
   only), Ctrl/Cmd+Shift+Enter ticks the task item the caret is in, and
   Markdown pasted as plain text arrives formatted. Ctrl/Cmd+Enter stays
   the save. A formatting toolbar sits above the text (bold to link, each
-  button naming its shortcut); it's part of the field, so moving to it
-  doesn't save. `toolbar={false}` leaves it out where a value is short
-  and the shortcuts are enough.
+  button naming its shortcut), and a smaller one floats over selected
+  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 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

@@ -22,15 +22,17 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 //   in. Ctrl/Cmd+Enter stays the field's save.
 // - A placeholder in an empty document, and a count of the Markdown's
 //   length as it nears `maxLength`.
-// - A fixed toolbar above the text (rich-text-toolbar.tsx), unless
-//   `toolbar={false}`.
+// - A fixed toolbar above the text (rich-text-toolbar.tsx), and a
+//   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.
 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';
 import { commands, inputRules, keymap, markInputRules, plugins, remarkPreserveEmptyLinePlugin, schema, } from '@milkdown/kit/preset/commonmark';
 import { gfm } from '@milkdown/kit/preset/gfm';
 import { Fragment, Slice } from '@milkdown/kit/prose/model';
-import { Plugin } from '@milkdown/kit/prose/state';
+import { NodeSelection, Plugin } from '@milkdown/kit/prose/state';
 import { Decoration, DecorationSet } from '@milkdown/kit/prose/view';
 import { $prose, getMarkdown } from '@milkdown/kit/utils';
 import { cn } from 'cn';
@@ -40,6 +42,7 @@ import { Input } from '../ui/input.js';
 import { Popover, PopoverContent } from '../ui/popover.js';
 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 { RichTextToolbar } from './rich-text-toolbar.js';
 // The commonmark preset, minus the plugin that writes `<br />`. A $remark
@@ -189,6 +192,19 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
     const [length, setLength] = useState(defaultValue.length);
     // The editor's state after each change, for the toolbar's pressed buttons.
     const [editorState, setEditorState] = useState(null);
+    const [editorView, setEditorView] = useState(null);
+    // For the floating toolbar: focus is in the text (or on the floating
+    // toolbar), the mouse is down choosing words, and the selection Esc hid
+    // it for.
+    const [focused, setFocused] = useState(false);
+    const [selecting, setSelecting] = useState(false);
+    const [dismissed, setDismissed] = useState(null);
+    const toolbarRef = useRef(null);
+    const floatingRef = useRef(null);
+    // The field's element, which the floating toolbar is placed against.
+    const [field, setField] = useState(null);
+    // Whether the floating toolbar shows, for the editor's keys (set up once).
+    const floatingOpenRef = useRef(false);
     // 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.
@@ -220,6 +236,8 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
         attributes['aria-invalid'] = 'true';
     if (placeholder)
         attributes['aria-placeholder'] = placeholder;
+    if (toolbar)
+        attributes['aria-keyshortcuts'] = 'Alt+F10';
     const attributesKey = JSON.stringify(attributes);
     // The editor is made once, from the Markdown it opened with.
     useEffect(() => {
@@ -249,7 +267,12 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
         const changes = $prose(() => new Plugin({
             view: () => ({
                 update: (view, previous) => {
+                    if (cancelled)
+                        return;
                     setEditorState(view.state);
+                    // Esc hides the floating toolbar for one selection only.
+                    if (view.state.selection.empty)
+                        setDismissed(null);
                     if (!view.state.doc.eq(previous.doc))
                         emit();
                 },
@@ -308,7 +331,49 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
                         : null;
                     return doc ? ctx.get(serializerCtx)(doc) : slice.content.textBetween(0, slice.content.size, '\n\n');
                 },
+                handleDOMEvents: {
+                    focus: () => {
+                        setFocused(true);
+                        return false;
+                    },
+                    // Moving to the floating toolbar keeps it showing.
+                    blur: (_view, event) => {
+                        if (!floatingRef.current?.contains(event.relatedTarget))
+                            setFocused(false);
+                        return false;
+                    },
+                    // The floating toolbar waits for the mouse to be up: a drag
+                    // is still choosing the words.
+                    mousedown: (_view, event) => {
+                        if (event.button !== 0)
+                            return false;
+                        setDismissed(null);
+                        setSelecting(true);
+                        window.addEventListener('mouseup', () => setSelecting(false), { once: true });
+                        return false;
+                    },
+                },
                 handleKeyDown: (view, event) => {
+                    setSelecting(false);
+                    // Alt+F10: to the floating toolbar when it shows, else the
+                    // fixed one (the convention editors share).
+                    if (event.altKey && event.key === 'F10') {
+                        const bar = floatingOpenRef.current ? floatingRef.current : toolbarRef.current;
+                        const button = bar?.querySelector('button[tabindex="0"]');
+                        if (!button)
+                            return false;
+                        event.preventDefault();
+                        button.focus();
+                        return true;
+                    }
+                    // Esc hides the floating toolbar first; only the next one
+                    // reaches the field (editing in place gives up on it).
+                    if (event.key === 'Escape' && floatingOpenRef.current) {
+                        event.preventDefault();
+                        const { from, to } = view.state.selection;
+                        setDismissed({ from, to });
+                        return true;
+                    }
                     const mod = event.metaKey || event.ctrlKey;
                     if (mod && !event.shiftKey && !event.altKey && event.key.toLowerCase() === 'k') {
                         event.preventDefault();
@@ -360,12 +425,16 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
             }
             editorRef.current = editor;
             baseline = editor.action(getMarkdown());
-            setEditorState(editor.action((ctx) => ctx.get(editorViewCtx).state));
+            const view = editor.action((ctx) => ctx.get(editorViewCtx));
+            setEditorView(view);
+            setEditorState(view.state);
             if (autoFocus)
                 editor.action((ctx) => ctx.get(editorViewCtx).focus());
         });
         return () => {
             cancelled = true;
+            setEditorState(null);
+            setEditorView(null);
             const editor = editorRef.current;
             editorRef.current = null;
             if (editor)
@@ -399,20 +468,48 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
             view.focus();
         });
     };
+    // The floating toolbar: words selected, focus in the field, the mouse up,
+    // and nothing else open over the text.
+    const selection = editorState?.selection;
+    const floatingOpen = Boolean(toolbar &&
+        !readOnly &&
+        editorView &&
+        focused &&
+        !selecting &&
+        linkBox === null &&
+        selection &&
+        !selection.empty &&
+        !(selection instanceof NodeSelection) &&
+        !selection.$from.parent.type.spec.code &&
+        !(dismissed && dismissed.from === selection.from && dismissed.to === selection.to));
+    useEffect(() => {
+        floatingOpenRef.current = floatingOpen;
+    });
+    const returnToText = () => editorView?.focus();
     const closeLink = () => {
         setLinkBox(null);
         editorRef.current?.action((ctx) => ctx.get(editorViewCtx).focus());
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { "data-slot": "rich-text-editor", className: cn('flex w-full min-w-0 flex-col rounded-lg border border-input bg-transparent type-body text-foreground break-words transition-[border-color,box-shadow]', 'focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 dark:bg-input/30', 'has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-destructive/20', className), children: [toolbar && (_jsx(RichTextToolbar, { state: editorState, readOnly: readOnly, controls: editableId, onFormat: runFormat })), _jsx("div", { ref: rootRef, className: cn('min-h-24 px-2.5 py-2', 
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: setField, "data-slot": "rich-text-editor", className: cn('relative flex w-full min-w-0 flex-col rounded-lg border border-input bg-transparent type-body text-foreground break-words transition-[border-color,box-shadow]', 'focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 dark:bg-input/30', 'has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-destructive/20', className), children: [toolbar && (_jsx(RichTextToolbar, { ref: toolbarRef, state: editorState, readOnly: readOnly, 
+                        // Only once the editor is made: until then the editable element,
+                        // and its id, aren't in the page (axe: aria-valid-attr-value).
+                        controls: editorState ? editableId : undefined, onFormat: runFormat })), _jsx("div", { ref: rootRef, className: cn('min-h-24 px-2.5 py-2', 
                         // Read-only text is muted; the toolbar's buttons say so by being disabled.
                         'has-[[aria-readonly=true]]:text-muted-foreground', 
                         // The same type roles <Markdown> uses, so text reads the same
                         // being edited as being read.
-                        '[&_.ProseMirror]:flex [&_.ProseMirror]:min-h-20 [&_.ProseMirror]:flex-col [&_.ProseMirror]:gap-3', '[&_h3]:type-section-title [&_h4]:type-section-title [&_h5]:type-label [&_h6]:type-label', '[&_ul]:flex [&_ul]:list-disc [&_ul]:flex-col [&_ul]:gap-1 [&_ul]:pl-6', '[&_ol]:flex [&_ol]:list-decimal [&_ol]:flex-col [&_ol]:gap-1 [&_ol]:pl-6', '[&_li[data-item-type=task]]:-ml-6 [&_li[data-item-type=task]]:flex [&_li[data-item-type=task]]:list-none [&_li[data-item-type=task]]:items-start [&_li[data-item-type=task]]:gap-2', '[&_li[data-item-type=task]>input]:mt-1 [&_li[data-item-type=task]>input]:size-4 [&_li[data-item-type=task]>input]:accent-primary', '[&_a]:text-primary [&_a]:underline [&_a]:underline-offset-4', '[&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-4 [&_blockquote]:text-muted-foreground', '[&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:bg-muted [&_pre]:p-3 [&_pre]:font-mono', '[&_:not(pre)>code]:rounded [&_:not(pre)>code]:bg-muted [&_:not(pre)>code]:px-1 [&_:not(pre)>code]:font-mono', '[&_hr]:border-border', '[&_table]:w-full [&_table]:border-collapse [&_td]:border [&_td]:border-border [&_td]:px-2 [&_td]:py-1 [&_th]:border [&_th]:border-border [&_th]:px-2 [&_th]:py-1 [&_th]:text-left [&_th]:type-label', 
+                        '[&_.ProseMirror]:flex [&_.ProseMirror]:min-h-20 [&_.ProseMirror]:flex-col [&_.ProseMirror]:gap-3', 
+                        // ProseMirror's own required style (prosemirror-view's CSS): spaces
+                        // as typed, so one at the end of a line isn't kept as &nbsp;.
+                        '[&_.ProseMirror]:whitespace-pre-wrap [&_.ProseMirror]:break-words', '[&_h3]:type-section-title [&_h4]:type-section-title [&_h5]:type-label [&_h6]:type-label', '[&_ul]:flex [&_ul]:list-disc [&_ul]:flex-col [&_ul]:gap-1 [&_ul]:pl-6', '[&_ol]:flex [&_ol]:list-decimal [&_ol]:flex-col [&_ol]:gap-1 [&_ol]:pl-6', '[&_li[data-item-type=task]]:-ml-6 [&_li[data-item-type=task]]:flex [&_li[data-item-type=task]]:list-none [&_li[data-item-type=task]]:items-start [&_li[data-item-type=task]]:gap-2', '[&_li[data-item-type=task]>input]:mt-1 [&_li[data-item-type=task]>input]:size-4 [&_li[data-item-type=task]>input]:accent-primary', '[&_a]:text-primary [&_a]:underline [&_a]:underline-offset-4', '[&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-4 [&_blockquote]:text-muted-foreground', '[&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:bg-muted [&_pre]:p-3 [&_pre]:font-mono', '[&_:not(pre)>code]:rounded [&_:not(pre)>code]:bg-muted [&_:not(pre)>code]:px-1 [&_:not(pre)>code]:font-mono', '[&_hr]:border-border', '[&_table]:w-full [&_table]:border-collapse [&_td]:border [&_td]:border-border [&_td]:px-2 [&_td]:py-1 [&_th]:border [&_th]:border-border [&_th]:px-2 [&_th]:py-1 [&_th]:text-left [&_th]:type-label', 
                         // 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)]') })] }), showCount && (_jsx("p", { id: counterId, "data-slot": "rich-text-editor-count", className: cn('text-right type-caption tabular-nums', length > maxLength ? 'text-destructive-text' : 'text-muted-foreground'), children: length > maxLength
+                        '[&_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) => {
+                            const next = event.relatedTarget;
+                            if (!editorView.dom.contains(next) && !floatingRef.current?.contains(next))
+                                setFocused(false);
+                        } }))] }), showCount && (_jsx("p", { id: counterId, "data-slot": "rich-text-editor-count", className: cn('text-right type-caption tabular-nums', length > maxLength ? 'text-destructive-text' : 'text-muted-foreground'), children: length > maxLength
                     ? `${(length - maxLength).toLocaleString()} characters over the limit of ${maxLength.toLocaleString()}`
                     : `${length.toLocaleString()} of ${maxLength.toLocaleString()} characters` })), _jsx(Popover, { open: linkBox !== null, onOpenChange: (open) => !open && closeLink(), children: linkBox && (_jsx(LinkForm, { box: linkBox, onApply: (href) => {
                         const editor = editorRef.current;

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

@@ -19,9 +19,10 @@ export type RichTextEditorProps = {
      */
     maxLength?: number;
     /**
-     * The formatting toolbar above the text (bold, headings, lists, link, …),
-     * each button with its shortcut. On by default; `false` leaves the text
-     * alone, its shortcuts still working.
+     * 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.
      */
     toolbar?: boolean;
     className?: string;

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

@@ -0,0 +1,25 @@
+import { type FocusEvent, type Ref } from 'react';
+import type { EditorState } from '@milkdown/kit/prose/state';
+import type { EditorView } from '@milkdown/kit/prose/view';
+import type { FormatId } from './rich-text-formats.js';
+export interface RichTextFloatingToolbarProps {
+    /** The editor, to measure the selection. */
+    view: EditorView;
+    /** The editor's state now: the selection, and which formats are on. */
+    state: EditorState;
+    /** The field's element it's placed against (positioned: `relative`). */
+    field: HTMLElement | null;
+    /** The editable element's id, for `aria-controls`. */
+    controls: string;
+    /** A button pressed: run the format on the editor and give it focus back. */
+    onFormat: (id: FormatId) => void;
+    /** Esc: hide it until the selection changes. */
+    onDismiss: () => void;
+    /** Esc or Tab: focus back to the text. */
+    onReturn: () => void;
+    /** Focus leaving one of its buttons, for the editor to tell whether it left the field. */
+    onBlur: (event: FocusEvent) => void;
+    /** Its element, for Alt+F10 to reach it and for the editor's own blur. */
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function RichTextFloatingToolbar({ view, state, field, controls, onFormat, onDismiss, onReturn, onBlur, ref, }: RichTextFloatingToolbarProps): import("react").JSX.Element;

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

@@ -0,0 +1,92 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// The rich-text editor's floating toolbar: the formats for selected words
+// (Bold, Italic, Strikethrough, Code · Link), over the selection. The
+// fixed toolbar (rich-text-toolbar.tsx) stays; this one saves the trip up
+// to it. The editor decides when it shows (milkdown-editor.tsx):
+//
+// - While words are selected in the text and the field has focus, once
+//   the mouse is up (not while a drag is still choosing them). Not in a
+//   code block (no formats apply there), read-only, or with the link box
+//   open.
+// - Above the selection, or below it when there's no room for it inside
+//   the text (the first line), so it never covers the fixed toolbar.
+// - A mouse press never takes focus from the text, as on the fixed one.
+// - Keyboard: Alt+F10 in the text reaches it; the arrow keys, Home and
+//   End move along it (one tab stop, as on the fixed one); Esc or Tab goes
+//   back to the text, the selection kept. Esc (here or in the text) hides
+//   it until the selection changes.
+//
+// It sits inside the field's own element, placed against it, not in a
+// portal: it scrolls with the text, is part of the field for editing in
+// place and inside a dialog, and needs none of a popover's focus guards
+// (Base UI's Popover adds tabbable `aria-hidden` guards while focus is
+// outside it, which for this toolbar is always, and axe fails them).
+import { useLayoutEffect, useState } from 'react';
+import { cn } from 'cn';
+import { FormatButtons } from './rich-text-toolbar.js';
+// Its gap from the words.
+const GAP = 8;
+// The selection's box on screen: the words themselves on one line, the
+// text's width over several.
+function selectionRect(view, from, to) {
+    const size = view.state.doc.content.size;
+    const start = view.coordsAtPos(Math.min(from, size), 1);
+    const end = view.coordsAtPos(Math.min(to, size), -1);
+    const top = Math.min(start.top, end.top);
+    const bottom = Math.max(start.bottom, end.bottom);
+    if (end.top < start.bottom)
+        return new DOMRect(Math.min(start.left, end.left), top, Math.abs(end.left - start.left), bottom - top);
+    const text = view.dom.getBoundingClientRect();
+    return new DOMRect(text.left, top, text.width, bottom - top);
+}
+// Where it goes, against `field` (its positioned parent): centred over
+// the words, below them when there's no room above inside the text, and
+// never past the field's sides.
+function place(view, from, to, field, bar) {
+    const words = selectionRect(view, from, to);
+    const box = field.getBoundingClientRect();
+    const text = view.dom.getBoundingClientRect();
+    const { offsetWidth: width, offsetHeight: height } = bar;
+    const above = words.top - height - GAP >= text.top;
+    const top = above ? words.top - height - GAP : words.bottom + GAP;
+    const centre = words.left + words.width / 2 - width / 2;
+    const left = Math.max(0, Math.min(centre - box.left, box.width - width));
+    return { top: top - box.top, left, side: above ? 'top' : 'bottom' };
+}
+export function RichTextFloatingToolbar({ view, state, field, controls, onFormat, onDismiss, onReturn, onBlur, ref, }) {
+    const [bar, setBar] = useState(null);
+    const [placement, setPlacement] = useState(null);
+    const { from, to } = state.selection;
+    // Placed after each change (a mark makes the words wider), and again
+    // when the window's width reflows the text.
+    useLayoutEffect(() => {
+        if (!bar || !field)
+            return;
+        const update = () => setPlacement(place(view, from, to, field, bar));
+        update();
+        window.addEventListener('resize', update);
+        return () => window.removeEventListener('resize', update);
+    }, [view, state, from, to, field, bar]);
+    const onKeyDown = (event) => {
+        if (event.key === 'Escape') {
+            // Its own: not the field's (editing in place would give up the edit).
+            event.preventDefault();
+            event.stopPropagation();
+            onDismiss();
+            onReturn();
+        }
+        else if (event.key === 'Tab') {
+            event.preventDefault();
+            onReturn();
+        }
+    };
+    return (_jsx("div", { ref: (element) => {
+            setBar(element);
+            if (typeof ref === 'function')
+                ref(element);
+            else if (ref)
+                ref.current = element;
+        }, role: "toolbar", "aria-label": "Format selection", "aria-controls": controls, "data-slot": "rich-text-floating-toolbar", "data-side": placement?.side, style: placement ? { top: placement.top, left: placement.left } : undefined, className: cn('absolute z-50 flex items-center gap-0.5 rounded-lg bg-popover p-1 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'), onKeyDown: onKeyDown, onBlur: onBlur, children: _jsx(FormatButtons, { formats: "selection", state: state, readOnly: false, onFormat: onFormat }) }));
+}

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

@@ -1,5 +1,30 @@
+import { type LucideIcon } from 'lucide-react';
+import { type Ref } from 'react';
 import type { EditorState } from '@milkdown/kit/prose/state';
 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[][];
+};
+export type FormatButtonsProps = {
+    /** Every format, or the ones for selected words. */
+    formats: keyof typeof SETS;
+    /** The editor's state now, to show which formats are on. Null until it's made. */
+    state: EditorState | null;
+    readOnly: boolean;
+    /** A button pressed: run the format on the editor and give it focus back. */
+    onFormat: (id: FormatId) => void;
+};
+export declare function FormatButtons({ formats, state, readOnly, onFormat }: FormatButtonsProps): import("react").JSX.Element;
 export interface RichTextToolbarProps {
     /** The editor's state now, to show which formats are on. Null until it's made. */
     state: EditorState | null;
@@ -8,5 +33,8 @@ export interface RichTextToolbarProps {
     controls?: string;
     /** A button pressed: run the format on the editor and give it focus back. */
     onFormat: (id: FormatId) => void;
+    /** The toolbar's element, for Alt+F10 to reach it from the text. */
+    ref?: Ref<HTMLDivElement>;
 }
-export declare function RichTextToolbar({ state, readOnly, controls, onFormat }: RichTextToolbarProps): import("react").JSX.Element;
+export declare function RichTextToolbar({ state, readOnly, controls, onFormat, ref }: RichTextToolbarProps): import("react").JSX.Element;
+export {};

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

@@ -10,6 +10,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 //   (`aria-pressed`), and names its shortcut (`aria-keyshortcuts`, and the
 //   tooltip).
 // - 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';
@@ -38,7 +40,6 @@ const GROUPS = [
     ],
     [{ id: 'link', label: 'Link', icon: LinkIcon, keys: 'Mod+K' }],
 ];
-const ITEMS = GROUPS.flat();
 function isApple() {
     return typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
 }
@@ -56,13 +57,24 @@ function shownKeys(keys, apple) {
         .map((part) => symbols[part] ?? part)
         .join('');
 }
-export function RichTextToolbar({ state, readOnly, controls, onFormat }) {
+// 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]],
+};
+// 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
+// toolbar's element (`role="toolbar"`, its name) is the caller's.
+export function FormatButtons({ formats, state, readOnly, onFormat }) {
     const apple = isApple();
+    const groups = SETS[formats];
+    const items = groups.flat();
     const buttons = useRef([]);
     // The one button Tab reaches: the last one used.
     const [current, setCurrent] = useState(0);
     const move = (index) => {
-        const next = (index + ITEMS.length) % ITEMS.length;
+        const next = (index + items.length) % items.length;
         setCurrent(next);
         buttons.current[next]?.focus();
     };
@@ -71,7 +83,7 @@ export function RichTextToolbar({ state, readOnly, controls, onFormat }) {
             ArrowRight: () => move(current + 1),
             ArrowLeft: () => move(current - 1),
             Home: () => move(0),
-            End: () => move(ITEMS.length - 1),
+            End: () => move(items.length - 1),
         };
         const action = keys[event.key];
         if (!action || event.metaKey || event.ctrlKey || event.altKey)
@@ -79,20 +91,23 @@ export function RichTextToolbar({ state, readOnly, controls, onFormat }) {
         event.preventDefault();
         action();
     };
-    return (_jsx(TooltipProvider, { delay: 400, children: _jsx("div", { role: "toolbar", "aria-label": "Formatting", "aria-controls": controls, "data-slot": "rich-text-toolbar", className: "flex flex-wrap items-center gap-0.5 border-b border-input px-1 py-1", onKeyDown: onKeyDown, children: GROUPS.map((group, groupIndex) => (_jsxs(Fragment, { children: [groupIndex > 0 && _jsx(Separator, { orientation: "vertical", className: "mx-1 h-5 self-center" }), group.map((item) => {
-                        const index = ITEMS.indexOf(item);
-                        const Icon = item.icon;
-                        const tip = [
-                            item.label,
-                            item.keys && `(${shownKeys(item.keys, apple)})`,
-                            item.hint && `· ${item.hint.replace(/Mod\+Shift\+Enter/, shownKeys('Mod+Shift+Enter', apple))}`,
-                        ]
-                            .filter(Boolean)
-                            .join(' ');
-                        return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(Toggle, { ref: (element) => {
-                                            buttons.current[index] = element;
-                                        }, size: "icon-sm", "aria-label": item.label, "aria-keyshortcuts": item.keys ? ariaKeys(item.keys, apple) : undefined, pressed: state ? formatOn(state, item.id) : false, disabled: readOnly, tabIndex: index === current ? 0 : -1, className: "aria-pressed:bg-muted aria-pressed:text-foreground", 
-                                        // A mouse press keeps focus, and the selection, in the text.
-                                        onMouseDown: (event) => event.preventDefault(), onFocus: () => setCurrent(index), onPressedChange: () => onFormat(item.id) }), children: _jsx(Icon, {}) }), _jsx(TooltipContent, { children: tip })] }, item.id));
-                    })] }, groupIndex))) }) }));
+    return (_jsx(TooltipProvider, { delay: 400, children: groups.map((group, groupIndex) => (_jsxs(Fragment, { children: [groupIndex > 0 && _jsx(Separator, { orientation: "vertical", className: "mx-1 h-5 self-center" }), group.map((item) => {
+                    const index = items.indexOf(item);
+                    const Icon = item.icon;
+                    const tip = [
+                        item.label,
+                        item.keys && `(${shownKeys(item.keys, apple)})`,
+                        item.hint && `· ${item.hint.replace(/Mod\+Shift\+Enter/, shownKeys('Mod+Shift+Enter', apple))}`,
+                    ]
+                        .filter(Boolean)
+                        .join(' ');
+                    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(Toggle, { ref: (element) => {
+                                        buttons.current[index] = element;
+                                    }, size: "icon-sm", "aria-label": item.label, "aria-keyshortcuts": item.keys ? ariaKeys(item.keys, apple) : undefined, pressed: state ? formatOn(state, item.id) : false, disabled: readOnly, tabIndex: index === current ? 0 : -1, className: "aria-pressed:bg-muted aria-pressed:text-foreground", 
+                                    // A mouse press keeps focus, and the selection, in the text.
+                                    onMouseDown: (event) => event.preventDefault(), onFocus: () => setCurrent(index), onKeyDown: onKeyDown, onPressedChange: () => onFormat(item.id) }), children: _jsx(Icon, {}) }), _jsx(TooltipContent, { children: tip })] }, item.id));
+                })] }, groupIndex))) }));
+}
+export function RichTextToolbar({ state, readOnly, controls, onFormat, ref }) {
+    return (_jsx("div", { ref: ref, role: "toolbar", "aria-label": "Formatting", "aria-controls": controls, "data-slot": "rich-text-toolbar", className: "flex flex-wrap items-center gap-0.5 border-b border-input px-1 py-1", children: _jsx(FormatButtons, { formats: "all", state: state, readOnly: readOnly, onFormat: onFormat }) }));
 }

package/dist/lib/markdown-merge.js

@@ -17,7 +17,11 @@
 //   original's own source; only a changed or new block is written by the
 //   editor (in the document's own bullet and rule marks, `markdownStyle`).
 // - Blocks the editor can't show (a link reference's definition) are kept
-//   where they were.
+//   where they were. A block the editor shows its own way (a table it
+//   padded, marks it nested differently) and that `meaning` still misses is
+//   written as the editor shows it, as long as nothing in it is lost
+//   (`content`): no text, address or image. A block the editor drops part
+//   of (it doesn't show images) is kept as written, and the guard refuses.
 // - Guard: the result must mean exactly what the editor shows. If it
 //   wouldn't (two blocks fusing, say), the merge throws instead of saving
 //   something else; the draft stays on screen.
@@ -30,34 +34,103 @@ function parse(markdown) {
 }
 // Fields that are about how a node was written, not what it means.
 const STYLE_ONLY = new Set(['position', 'data', 'spread', 'label', 'referenceType']);
+// Nodes whose children are inline text: compared as runs of marked text.
+const INLINE_PARENTS = new Set(['paragraph', 'heading', 'tableCell']);
+// A reference link (or image) as the link it stands for, when its
+// definition is in the document.
+function resolved(node, definitions) {
+    if (node.type !== 'linkReference' && node.type !== 'imageReference')
+        return node;
+    const definition = definitions.get(String(node.identifier));
+    if (!definition)
+        return node;
+    return {
+        type: node.type === 'linkReference' ? 'link' : 'image',
+        url: definition.url,
+        title: definition.title ?? null,
+        alt: node.alt,
+        children: node.children,
+    };
+}
+// The mark an inline node puts on its text, or undefined for text itself.
+function markOf(node) {
+    if (node.type === 'strong' || node.type === 'emphasis' || node.type === 'delete')
+        return node.type;
+    if (node.type === 'link')
+        return `link ${JSON.stringify([node.url, node.title ?? null])}`;
+    return undefined;
+}
+// Inline content as what a reader sees: each piece of text (or code, an
+// image, a break) with the set of marks on it, whichever way they were
+// nested. `**[a](u)**` and `[**a**](u)` are the same bold link; a link with
+// no text shows nothing.
+function runs(nodes, definitions, marks = [], out = []) {
+    for (const child of nodes) {
+        const node = resolved(child, definitions);
+        const mark = markOf(node);
+        if (mark) {
+            runs(node.children ?? [], definitions, [...marks, mark], out);
+            continue;
+        }
+        const set = [...new Set(marks)].sort();
+        const last = out.at(-1);
+        if (node.type === 'text' && last?.type === 'text' && JSON.stringify(last.marks) === JSON.stringify(set)) {
+            last.value = String(last.value) + String(node.value);
+        }
+        else {
+            out.push({ ...meaning(node, definitions), marks: set });
+        }
+    }
+    return out;
+}
 // A block's meaning as a comparable string: positions and source style
-// dropped, and a reference link resolved to the link it stands for.
+// dropped, a reference link resolved to the link it stands for, inline
+// marks compared as a set, and a table's rows all as wide as its widest
+// (GFM allows short rows; the editor pads them with empty cells).
 function meaning(node, definitions) {
     if (Array.isArray(node))
         return node.map((child) => meaning(child, definitions));
     if (!node || typeof node !== 'object')
         return node;
-    const md = node;
-    if (md.type === 'linkReference' || md.type === 'imageReference') {
-        const definition = definitions.get(String(md.identifier));
-        if (definition) {
-            return meaning({
-                type: md.type === 'linkReference' ? 'link' : 'image',
-                url: definition.url,
-                title: definition.title ?? null,
-                alt: md.alt,
-                children: md.children,
-            }, definitions);
-        }
-    }
+    const md = resolved(node, definitions);
     const out = {};
     for (const key of Object.keys(md).sort()) {
         if (STYLE_ONLY.has(key))
             continue;
-        out[key] = meaning(md[key], definitions);
+        out[key] = key === 'children' && INLINE_PARENTS.has(md.type) ? runs(md.children ?? [], definitions) : meaning(md[key], definitions);
     }
     if ((md.type === 'link' || md.type === 'image') && out.title === undefined)
         out.title = null;
+    if (md.type === 'table') {
+        const rows = out.children;
+        const width = Math.max(0, ...rows.map((row) => row.children.length));
+        for (const row of rows) {
+            while (row.children.length < width)
+                row.children.push({ children: [], type: 'tableCell' });
+        }
+        const align = out.align ?? [];
+        out.align = Array.from({ length: width }, (_value, index) => align[index] ?? null);
+    }
+    return out;
+}
+// Everything in a block a reader could lose: its text (spacing aside),
+// code, raw HTML, link and image addresses, image alt text, rules and
+// task boxes. Not how any of it is marked or laid out.
+function content(node, definitions) {
+    const md = resolved(node, definitions);
+    let out = '';
+    if (typeof md.value === 'string')
+        out += md.value.replace(/\s+/g, '');
+    if (md.type === 'link' || md.type === 'image')
+        out += `<${String(md.url)}>`;
+    if (md.type === 'image' || md.type === 'imageReference')
+        out += `![${String(md.alt ?? '')}]`;
+    if (md.type === 'thematicBreak')
+        out += '<hr>';
+    if (md.type === 'listItem' && typeof md.checked === 'boolean')
+        out += md.checked ? '[x]' : '[ ]';
+    for (const child of md.children ?? [])
+        out += content(child, definitions);
     return out;
 }
 function blocks(markdown) {
@@ -76,6 +149,7 @@ function blocks(markdown) {
             end,
             source: markdown.slice(start, end),
             key: JSON.stringify(meaning(child, definitions)),
+            content: content(child, definitions),
         };
     });
 }
@@ -104,6 +178,33 @@ function match(from, to) {
     }
     return pairs;
 }
+// The original blocks the editor shows: each matched one, and each run of
+// unmatched ones between two matches that the editor shows its own way,
+// with nothing lost, as the unmatched blocks it has between the same two.
+// Those are written as the editor has them; a definition never is.
+function shownOwnWay(originals, loaded, loadedToOriginal) {
+    const shown = new Set(loadedToOriginal.values());
+    const anchors = [[-1, -1], ...[...loadedToOriginal].map(([to, from]) => [from, to]), [originals.length, loaded.length]];
+    for (let k = 1; k < anchors.length; k++) {
+        const [fromStart, toStart] = anchors[k - 1];
+        const [fromEnd, toEnd] = anchors[k];
+        const unmatched = originals
+            .map((_block, index) => index)
+            .slice(fromStart + 1, fromEnd)
+            .filter((index) => originals[index].type !== 'definition');
+        if (unmatched.length === 0)
+            continue;
+        const before = unmatched.map((index) => originals[index].content).join('');
+        const after = loaded
+            .slice(toStart + 1, toEnd)
+            .map((block) => block.content)
+            .join('');
+        if (before === after)
+            for (const index of unmatched)
+                shown.add(index);
+    }
+    return shown;
+}
 export class MarkdownMergeError extends Error {
     constructor() {
         super("This text can't be saved without changing parts you didn't edit. Undo the last change, or edit it in the form.");
@@ -139,9 +240,9 @@ export function mergeMarkdown(original, baseline, current) {
         const after = sources.slice(index + 1).find((value) => value !== undefined) ?? originals.length;
         return { written: block, at: (before + after) / 2 };
     });
-    // Blocks the editor never showed (definitions): after whatever came
-    // before them in the original.
-    const shown = new Set(loadedToOriginal.values());
+    // Blocks the editor never showed (definitions, and any block it dropped
+    // part of): after whatever came before them in the original.
+    const shown = shownOwnWay(originals, loaded, loadedToOriginal);
     originals.forEach((_block, index) => {
         if (shown.has(index))
             return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tristan2828/ui-foundation",
-  "version": "3.16.1",
+  "version": "3.17.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": {