@tristan2828/ui-foundation 4.61.1 → 4.63.0

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

@@ -20,11 +20,16 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 //   task-list item renders a real checkbox that toggles it.
 // - Callouts (`> [!NOTE]`, src/lib/markdown-callout.ts): a node of their
 //   own, drawn as <Markdown> draws them, the icon a menu of kinds.
-// - Tables in a box that scrolls sideways (a tab stop the arrow keys
-//   scroll while it does: rich-text-node-views.ts), with Notion's "add a row" and
-//   "add a column" bars, Tab in the last cell adding a row and Enter going
-//   down a column (rich-text-table.ts); the toolbar's Table menu does the
-//   rest.
+// - Tables whose columns fit their words, in a box that scrolls sideways
+//   (a tab stop the arrow keys scroll while it does: rich-text-node-views.ts),
+//   in one of two looks (`tableLook`: styles/index.css "Tables in written
+//   text"). Notion's "add a row" and "add a column" bars, and its grips: one
+//   on the column and one on the row the pointer or the caret is in, each
+//   a menu to insert, move, delete, align, sort and colour
+//   (rich-text-table-grips.tsx); right-click or Shift+F10 in a cell opens
+//   the cell's. Tab in the last cell adds a row and Enter goes down a
+//   column (rich-text-table.ts). Colours and a header column are kept as
+//   Markdown writes them (src/lib/markdown-table.ts).
 // - Edited blocks are written in the document's own bullet and rule marks.
 // - Markdown pasted as plain text arrives formatted (still no HTML), and a
 //   copy out of the editor is Markdown.
@@ -86,7 +91,8 @@ import { calloutKind, calloutView, tableView } from './rich-text-node-views.js';
 import { droppedFiles, imageUploadPlugin, pastedImages, uploadImages, uploadPlaceholders } from './rich-text-image-upload.js';
 import { handleShortcut } from './rich-text-shortcuts.js';
 import { splitTaskItem, taskInputRule } from './rich-text-tasks.js';
-import { addRowAtEnd, handleTableKey, runTableAction } from './rich-text-table.js';
+import { addRowAtEnd, colorTableCells, handleTableKey, runTableAction, tableLook as tableLookPlugin } from './rich-text-table.js';
+import { TABLE_MENU_EVENT, TableGrips } from './rich-text-table-grips.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';
@@ -161,6 +167,9 @@ const highlightSchema = $markSchema('highlight', () => ({
         },
     },
 }));
+// A table's cell colours and header column, drawn from the Markdown that
+// keeps them (rich-text-table.ts tableLook).
+const tableDecorations = $prose(() => tableLookPlugin());
 function emptyImageTitles(node) {
     if (node.type === 'image' && node.title == null)
         node.title = '';
@@ -357,7 +366,7 @@ function applyLink(view, target, href) {
     }
     view.dispatch(tr.scrollIntoView());
 }
-export default function MilkdownEditor({ id, defaultValue, onChange, onProblem, readOnly = false, autoFocus = false, placeholder, maxLength, toolbar = true, inline = false, upload, imageAccept, imageMaxSize, headingLevel = DEFAULT_HEADING_LEVEL, headingFrom = 'hash', foldKey, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, }) {
+export default function MilkdownEditor({ id, defaultValue, onChange, onProblem, readOnly = false, autoFocus = false, placeholder, maxLength, toolbar = true, inline = false, upload, imageAccept, imageMaxSize, headingLevel = DEFAULT_HEADING_LEVEL, headingFrom = 'hash', foldKey, tableLook = 'compact', className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, }) {
     const rootRef = useRef(null);
     const editorRef = useRef(null);
     const [linkBox, setLinkBox] = useState(null);
@@ -753,6 +762,16 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
                         return true;
                     if (handleTableKey(view.state, view.dispatch, event))
                         return true;
+                    // Shift+F10 or the menu key in a table: the cell's menu, from its grips.
+                    if (((event.key === 'F10' && event.shiftKey) || event.key === 'ContextMenu') && isInTable(view.state)) {
+                        const at = view.domAtPos(view.state.selection.from).node;
+                        const frame = (at instanceof Element ? at : at.parentElement)?.closest('[data-slot=rich-text-table]');
+                        if (frame) {
+                            event.preventDefault();
+                            frame.dispatchEvent(new CustomEvent(TABLE_MENU_EVENT));
+                            return true;
+                        }
+                    }
                     // Enter in a task item: the next one, unticked (rich-text-tasks.ts).
                     if (event.key === 'Enter' && plain && !event.isComposing && splitTaskItem(view.state, view.dispatch))
                         return true;
@@ -778,6 +797,7 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
             .use(calloutSchema)
             .use(highlightRemark)
             .use(highlightSchema)
+            .use(tableDecorations)
             .use(imageTitles)
             .use(history)
             .use(changes)
@@ -861,10 +881,33 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
     // The editable element: where a menu over the text gives focus back
     // (ProseMirror puts the caret back where it was as it takes it).
     const textElement = () => editorView?.dom ?? null;
-    // A Table menu item, on the caret's table (the menu gives focus back).
-    const runTable = (action) => {
-        if (editorView)
-            runTableAction(editorView.state, editorView.dispatch, action);
+    // A grip's menu item, on the cell it was opened for: the caret into
+    // that cell, the action, and focus back in the text.
+    const caretInto = (getPos, cell) => {
+        if (!editorView)
+            return false;
+        const pos = getPos();
+        const table = pos === undefined ? null : editorView.state.doc.nodeAt(pos);
+        if (pos === undefined || table?.type.name !== 'table')
+            return false;
+        const map = TableMap.get(table);
+        if (cell.row >= map.height || cell.column >= map.width)
+            return false;
+        const at = pos + 1 + map.map[cell.row * map.width + cell.column] + 1;
+        editorView.dispatch(editorView.state.tr.setSelection(TextSelection.near(editorView.state.doc.resolve(at))));
+        return true;
+    };
+    const runTableAt = (getPos, cell, action) => {
+        if (!editorView || !caretInto(getPos, cell))
+            return;
+        runTableAction(editorView.state, editorView.dispatch, action);
+        editorView.focus();
+    };
+    const colorTableAt = (getPos, cell, scope, color) => {
+        if (!editorView || !caretInto(getPos, cell))
+            return;
+        colorTableCells(editorView.state, editorView.dispatch, scope, color);
+        editorView.focus();
     };
     // A callout's menu: its kind changed, or the callout taken away (its
     // blocks kept). The menu gives focus back to the text.
@@ -946,14 +989,14 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
         setLinkBox(null);
         editorRef.current?.action((ctx) => ctx.get(editorViewCtx).focus());
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: setField, "data-slot": "rich-text-editor", "data-full-screen": fullScreen || undefined, onKeyDown: leaveFullScreen, className: cn(fullScreen ? 'fixed inset-0 z-50 h-dvh rounded-none! border-0! bg-background! ring-0!' : 'relative', 'flex w-full min-w-0 flex-col bg-transparent type-body text-foreground break-words', 
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: setField, "data-slot": "rich-text-editor", "data-table-look": tableLook, "data-full-screen": fullScreen || undefined, onKeyDown: leaveFullScreen, className: cn(fullScreen ? 'fixed inset-0 z-50 h-dvh rounded-none! border-0! bg-background! ring-0!' : 'relative', 'flex w-full min-w-0 flex-col bg-transparent type-body text-foreground break-words', 
                 // Inline, it's the text itself: the caret shows where it's
                 // edited, and a refusal's reason under it says what's wrong.
                 !inline &&
                     'rounded-lg border border-input transition-[border-color,box-shadow] focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 dark:bg-input/30', !inline && 'has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-destructive/20', className), children: [fixedToolbar && (_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, onTable: runTable, onImage: upload ? pickImages : undefined, onFullScreen: toggleFullScreen, fullScreen: fullScreen, text: textElement })), upload && (_jsx("input", { ref: imageInputRef, type: "file", accept: acceptAttribute(imageAccept), multiple: true, hidden: true, tabIndex: -1, onChange: (event) => {
+                        controls: editorState ? editableId : undefined, onFormat: runFormat, onImage: upload ? pickImages : undefined, onFullScreen: toggleFullScreen, fullScreen: fullScreen, text: textElement })), upload && (_jsx("input", { ref: imageInputRef, type: "file", accept: acceptAttribute(imageAccept), multiple: true, hidden: true, tabIndex: -1, onChange: (event) => {
                             const files = Array.from(event.target.files ?? []);
                             // Cleared, so picking the same file again still counts.
                             event.target.value = '';
@@ -981,10 +1024,6 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
                         // (ProseMirror's own separator images, around an image alone on
                         // its line, are left alone.)
                         '[&_img[src]]:inline-block [&_img[src]]:h-auto [&_img[src]]:max-w-full [&_img[src]]:rounded-md [&_img[src]]:align-bottom', '[&_img.ProseMirror-selectednode]:outline-2 [&_img.ProseMirror-selectednode]:outline-offset-2 [&_img.ProseMirror-selectednode]:outline-ring', 
-                        // A table: a header row on the muted fill, a line between every
-                        // cell, cells that wrap and never shrink to nothing; selected
-                        // cells (a drag across them) tinted.
-                        '[&_table]:w-full [&_table]:border-collapse', '[&_:is(td,th)]:min-w-28 [&_:is(td,th)]:border-r [&_:is(td,th)]:border-b [&_:is(td,th)]:border-border [&_:is(td,th)]:px-(--table-cell-px) [&_:is(td,th)]:py-(--table-cell-py) [&_:is(td,th)]:align-top', '[&_:is(td,th):last-child]:border-r-0 [&_tr:last-child>td]:border-b-0', '[&_th]:bg-muted [&_th]:text-left [&_th]:type-label', '[&_.selectedCell]:bg-info/15', 
                         // 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).
@@ -995,6 +1034,8 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
                         return [
                             createPortal(_jsx(TableBar, { side: "row", active: active, readOnly: readOnly, onAdd: () => addToTable(widget.getPos, 'row') }), widget.slot, `${widget.key}-row`),
                             createPortal(_jsx(TableBar, { side: "column", active: active, readOnly: readOnly, onAdd: () => addToTable(widget.getPos, 'column') }), widget.column, `${widget.key}-column`),
+                            editorView &&
+                                createPortal(_jsx(TableGrips, { view: editorView, state: editorState, getPos: widget.getPos, frame: widget.frame, box: widget.box, table: widget.table, readOnly: readOnly, focused: focused, onAction: (cell, action) => runTableAt(widget.getPos, cell, action), onColor: (cell, scope, color) => colorTableAt(widget.getPos, cell, scope, color), text: textElement }), widget.grips, `${widget.key}-grips`),
                         ];
                     }), 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) })), toolsOpen && (_jsx(RichTextToolsBar, { ref: toolsRef, state: editorState, readOnly: readOnly, fullScreen: fullScreen, controls: editableId, onFormat: runFormat, onFullScreen: toggleFullScreen, onReturn: returnToText, onBlur: (event) => {
                             const next = event.relatedTarget;

package/dist/components/app/module-card.js

@@ -113,7 +113,7 @@ export function ModuleCard({ title, icon: Icon, category, to, href, value, note,
         'data-slot': 'module-card-band',
         className: cn(BAND_LINK_CLASS, category && BAND_CLASS[category]),
     };
-    const card = (_jsxs(Card, { "data-slot": "module-card", "data-state": state, className: cn('relative h-full min-w-0 gap-0 py-0', mobile === 'row' && 'max-md:hidden', className), children: [href !== undefined ? (_jsxs("a", { href: href, target: "_blank", rel: "noreferrer", ...bandProps, children: [band, _jsx(NewTabMark, {})] })) : (_jsx(Link, { to: to, ...bandProps, children: band })), _jsxs("div", { id: bodyId, "data-slot": "module-card-body", "aria-busy": state === 'loading' || undefined, className: "flex flex-1 flex-col gap-0.5 px-3 py-2 density-compact:py-1.5 max-sm:px-2", children: [state === 'error' ? (_jsxs(_Fragment, { children: [_jsxs("p", { className: "flex items-center gap-1.5 type-body text-foreground", children: [_jsx(AlertCircleIcon, { "aria-hidden": "true", className: "size-4 shrink-0 text-destructive-text" }), _jsxs("span", { className: "min-w-0", children: ["Couldn't load", error?.message && _jsxs("span", { className: "sr-only", children: [": ", error.message] })] })] }), onRetry && (_jsx(Button, { size: "sm", variant: "outline", onClick: onRetry, "aria-describedby": titleId, className: "relative z-10 mt-1 self-start", children: "Retry" }))] })) : state === 'loading' ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "sr-only", children: "Loading" }), _jsx(Skeleton, { "data-state": "loading", className: "my-0.5 h-6 w-12" })] })) : (value !== undefined && (_jsx("span", { "data-slot": "module-card-value", className: "type-numeric text-foreground", children: value }))), note && state !== 'error' && (_jsx("span", { className: "truncate type-body text-muted-foreground", title: note, children: note }))] }), action &&
+    const card = (_jsxs(Card, { "data-slot": "module-card", "data-state": state, className: cn('glow-edge relative h-full min-w-0 gap-0 py-0', mobile === 'row' && 'max-md:hidden', className), children: [href !== undefined ? (_jsxs("a", { href: href, target: "_blank", rel: "noreferrer", ...bandProps, children: [band, _jsx(NewTabMark, {})] })) : (_jsx(Link, { to: to, ...bandProps, children: band })), _jsxs("div", { id: bodyId, "data-slot": "module-card-body", "aria-busy": state === 'loading' || undefined, className: "flex flex-1 flex-col gap-0.5 px-3 py-2 density-compact:py-1.5 max-sm:px-2", children: [state === 'error' ? (_jsxs(_Fragment, { children: [_jsxs("p", { className: "flex items-center gap-1.5 type-body text-foreground", children: [_jsx(AlertCircleIcon, { "aria-hidden": "true", className: "size-4 shrink-0 text-destructive-text" }), _jsxs("span", { className: "min-w-0", children: ["Couldn't load", error?.message && _jsxs("span", { className: "sr-only", children: [": ", error.message] })] })] }), onRetry && (_jsx(Button, { size: "sm", variant: "outline", onClick: onRetry, "aria-describedby": titleId, className: "relative z-10 mt-1 self-start", children: "Retry" }))] })) : state === 'loading' ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "sr-only", children: "Loading" }), _jsx(Skeleton, { "data-state": "loading", className: "my-0.5 h-6 w-12" })] })) : (value !== undefined && (_jsx("span", { "data-slot": "module-card-value", className: "type-numeric text-foreground", children: value }))), note && state !== 'error' && (_jsx("span", { className: "truncate type-body text-muted-foreground", title: note, children: note }))] }), action &&
                 (action.href !== undefined ? (_jsxs("a", { href: action.href, target: "_blank", rel: "noreferrer", "aria-describedby": titleId, className: ACTION_CLASS, children: [_jsx("span", { className: "truncate", children: action.label }), _jsx(NewTabMark, {})] })) : (_jsx(Link, { to: action.to, "aria-describedby": titleId, className: ACTION_CLASS, children: _jsx("span", { className: "truncate", children: action.label }) })))] }));
     if (mobile === 'tiles')
         return card;

package/dist/components/app/palette-provider.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from 'react';
+import { type PaletteName, type PaletteStore } from '../../lib/palettes.js';
+/**
+ * Puts the palette on <html>. FoundationProviders renders it; an app
+ * doesn't. Without `palette` it does nothing, and the app keeps light and
+ * dark.
+ */
+export declare function PaletteProvider({ palette: defaultPalette, picker, store, children, }: {
+    palette?: PaletteName;
+    picker?: boolean;
+    /** For tests; the browser's localStorage by default. */
+    store?: PaletteStore;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/app/palette-provider.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useLayoutEffect, useMemo, useSyncExternalStore } from 'react';
+import { PaletteContext } from '../../hooks/use-palette.js';
+import { browserPaletteStore, subscribeToBrowserPaletteStore } from '../../lib/palettes.js';
+/**
+ * Puts the palette on <html>. FoundationProviders renders it; an app
+ * doesn't. Without `palette` it does nothing, and the app keeps light and
+ * dark.
+ */
+export function PaletteProvider({ palette: defaultPalette, picker = false, store = browserPaletteStore, children, }) {
+    const subscribe = useCallback((listener) => (store === browserPaletteStore ? subscribeToBrowserPaletteStore(listener) : store.subscribe(listener)), [store]);
+    const saved = useSyncExternalStore(subscribe, store.get, () => null);
+    const palette = defaultPalette ? ((picker && saved) || defaultPalette) : null;
+    // Before paint, so the first frame is already in the palette.
+    useLayoutEffect(() => {
+        const root = document.documentElement;
+        if (palette)
+            root.dataset.palette = palette;
+        else
+            delete root.dataset.palette;
+        return () => {
+            delete root.dataset.palette;
+        };
+    }, [palette]);
+    const value = useMemo(() => ({
+        palette,
+        defaultPalette: defaultPalette ?? null,
+        picker: Boolean(defaultPalette && picker),
+        setPalette: (next) => {
+            if (defaultPalette && picker)
+                store.set(next);
+        },
+    }), [palette, defaultPalette, picker, store]);
+    return _jsx(PaletteContext.Provider, { value: value, children: children });
+}

package/dist/components/app/prose-look.d.ts

@@ -84,3 +84,10 @@ export type CalloutLook = {
 export declare const CALLOUT_LOOK: Record<CalloutKind, CalloutLook>;
 /** The box every callout shares: the icon in a column, the text beside it. */
 export declare const CALLOUT_BOX = "flex gap-2.5 rounded-lg border px-3 py-2.5";
+/**
+ * How a table in written text looks (styles/index.css "Tables in written
+ * text"): `compact`, a full grid with tight cells and the header row on
+ * the heading band, or `boxed`, a rounded box, roomier cells, a muted
+ * header row and zebra rows.
+ */
+export type TableLook = 'compact' | 'boxed';

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

@@ -1,5 +1,5 @@
 import type { ImageUpload } from '../../lib/image-file.js';
-import type { HeadingFrom, HeadingLevel } from './prose-look.js';
+import type { HeadingFrom, HeadingLevel, TableLook } from './prose-look.js';
 export type RichTextEditorProps = {
     /** The editable element's id, for a label's `htmlFor` or a test. */
     id?: string;
@@ -90,6 +90,13 @@ export type RichTextEditorProps = {
      * Default `true`.
      */
     foldable?: boolean;
+    /**
+     * How tables look: `'compact'` (the default), a full grid of hairlines
+     * with tight cells and the header row on the heading band, or
+     * `'boxed'`, a rounded box with roomier cells, a muted header row and
+     * zebra rows. The same on <Markdown>. Either way columns fit their words.
+     */
+    tableLook?: TableLook;
     className?: string;
     /** The field's label. A rich-text area must have one: this, or `aria-labelledby`. */
     'aria-label'?: string;

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

@@ -23,6 +23,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Image button is uploaded through the app's own storage and goes in as
 // `![](url)`; while it uploads, a placeholder shows where it will go.
 //
+// A table's columns fit their words. Grips on its column and row (or a
+// right-click, or Shift+F10, in a cell) open menus to insert, move,
+// delete, align, sort and colour; a header column and cell colours are
+// kept as Markdown already writes them (src/lib/markdown-table.ts).
+// `tableLook` picks compact (the default) or boxed, as on <Markdown>.
+//
 // With `foldKey`, the text folds by its headings (NotesOutline lists them
 // beside it), the Markdown untouched.
 //

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

@@ -37,7 +37,7 @@ export const FORMAT_GROUPS = [
         { id: 'codeBlock', label: 'Code block', icon: SquareCodeIcon, keys: 'Block+8' },
         { id: 'divider', label: 'Divider', icon: MinusIcon, hint: 'or type ---' },
     ],
-    [{ id: 'table', label: 'Table', icon: TableIcon }],
+    [{ id: 'table', label: 'Table', icon: TableIcon, hint: 'its grips edit it', action: true }],
     [{ id: 'link', label: 'Link', icon: LinkIcon, keys: 'Mod+K' }],
 ];
 /** Every format by its id. */

package/dist/components/app/rich-text-node-views.d.ts

@@ -13,6 +13,11 @@ export type Widget = {
     key: string;
     slot: HTMLElement;
     column: HTMLElement;
+    /** The layer the grips are placed in (rich-text-table-grips.tsx), over the whole frame. */
+    grips: HTMLElement;
+    frame: HTMLElement;
+    box: HTMLElement;
+    table: HTMLTableElement;
     getPos: () => number | undefined;
 };
 /** Where node views tell the editor their slots came, changed and went. */
@@ -24,9 +29,10 @@ export declare function calloutKind(value: unknown): CalloutKind;
 /** A callout: its kind's box, its icon (a widget: the kind's menu) beside its blocks. */
 export declare function calloutView(node: ProseNode, getPos: () => number | undefined, registry: WidgetRegistry): NodeView;
 /**
- * A table: in a box that scrolls sideways when it's wider than the text,
- * with an "add a column" bar along its right and an "add a row" bar under
- * it (widgets), Notion's way. While it scrolls, the box is a tab stop and
+ * A table: in a box as wide as its columns' words that scrolls sideways
+ * when it's wider than the text, with an "add a column" bar along its
+ * right, an "add a row" bar under it and a layer over it for its grips
+ * (widgets), Notion's way. While it scrolls, the box is a tab stop and
  * a region named for its columns (prose-table-scroll.ts), which the arrow
  * keys, Home and End scroll; a click in it still puts the caret in the
  * cell clicked.

package/dist/components/app/rich-text-node-views.js

@@ -86,9 +86,10 @@ function scrollKey(box, event) {
 // starts, or this long for one that never clicks (a touch that pans).
 const PRESS_MS = 1000;
 /**
- * A table: in a box that scrolls sideways when it's wider than the text,
- * with an "add a column" bar along its right and an "add a row" bar under
- * it (widgets), Notion's way. While it scrolls, the box is a tab stop and
+ * A table: in a box as wide as its columns' words that scrolls sideways
+ * when it's wider than the text, with an "add a column" bar along its
+ * right, an "add a row" bar under it and a layer over it for its grips
+ * (widgets), Notion's way. While it scrolls, the box is a tab stop and
  * a region named for its columns (prose-table-scroll.ts), which the arrow
  * keys, Home and End scroll; a click in it still puts the caret in the
  * cell clicked.
@@ -96,17 +97,20 @@ const PRESS_MS = 1000;
 export function tableView(node, view, getPos, registry) {
     const dom = document.createElement('div');
     dom.dataset.slot = 'rich-text-table';
-    dom.className = 'group/table grid grid-cols-[minmax(0,1fr)_auto] gap-1';
+    // As wide as the table (its columns fit their words), never wider than the text.
+    dom.className = 'group/table relative grid w-fit max-w-full grid-cols-[minmax(0,auto)_auto] gap-1';
     const scroll = document.createElement('div');
-    scroll.className = cn('overflow-x-auto rounded-lg border border-border', TABLE_SCROLL_FOCUS);
+    // Its look: styles/index.css "Tables in written text".
+    scroll.className = cn('prose-table', TABLE_SCROLL_FOCUS);
     const table = document.createElement('table');
     const contentDOM = document.createElement('tbody');
     table.append(contentDOM);
     scroll.append(table);
     const column = slot('flex w-5');
     const row = slot('col-start-1 flex h-5');
-    dom.append(scroll, column, row);
-    registry.set({ type: 'table', key: nextKey(), slot: row, column, getPos });
+    const grips = slot('pointer-events-none absolute inset-0');
+    dom.append(scroll, column, row, grips);
+    registry.set({ type: 'table', key: nextKey(), slot: row, column, grips, frame: dom, box: scroll, table, getPos });
     const region = watchTableScroll(scroll, table, columnsOf(node));
     // A press in the box is the text's: a click in a cell puts the caret
     // there. The browser focuses the nearest focusable ancestor of what was
@@ -167,7 +171,7 @@ export function tableView(node, view, getPos, registry) {
             region.setColumns(columnsOf(next));
             return true;
         },
-        stopEvent: (event) => row.contains(event.target) || column.contains(event.target),
+        stopEvent: (event) => row.contains(event.target) || column.contains(event.target) || grips.contains(event.target),
         ignoreMutation: outside(contentDOM),
         destroy: () => {
             released();

package/dist/components/app/rich-text-table-grips.d.ts

@@ -0,0 +1,31 @@
+import { type EditorState } from '@milkdown/kit/prose/state';
+import type { EditorView } from '@milkdown/kit/prose/view';
+import { type HighlightColor } from '../../lib/markdown-highlight.js';
+import { type TableAction, type TableColorScope } from './rich-text-table.js';
+/** A cell by its row (0 is the header row) and column. */
+export type TableCell = {
+    row: number;
+    column: number;
+};
+/** The event the editor sends a table's frame to open the caret's cell menu (Shift+F10). */
+export declare const TABLE_MENU_EVENT = "rich-text-table-menu";
+export interface TableGripsProps {
+    view: EditorView;
+    /** The editor's state, so the grips follow each change. */
+    state: EditorState | null;
+    getPos: () => number | undefined;
+    /** The node view's frame (the grips' layer is positioned in it), its scroll box and its table. */
+    frame: HTMLElement;
+    box: HTMLElement;
+    table: HTMLTableElement;
+    readOnly: boolean;
+    /** Whether focus is in the field: the caret's cell has grips only then. */
+    focused: boolean;
+    /** Runs a table action on a cell (the caret put there first), focus back in the text. */
+    onAction: (cell: TableCell, action: TableAction) => void;
+    /** Colours a cell, its row or its column (null: no colour). */
+    onColor: (cell: TableCell, scope: TableColorScope, color: HighlightColor | null) => void;
+    /** The editable element, where focus goes when a menu closes. */
+    text: () => HTMLElement | null;
+}
+export declare function TableGrips({ view, state, getPos, frame, box, table, readOnly, focused, onAction, onColor, text }: TableGripsProps): import("react").JSX.Element | null;

package/dist/components/app/rich-text-table-grips.js

@@ -0,0 +1,216 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// A table's grips in the rich-text editor, Notion's way: while the pointer
+// is over a cell, or the caret is in one, a grip sits on the top edge of
+// its column and another on the left edge of its row. Each opens that
+// column's or that row's menu: insert, move and delete, the column's
+// alignment and sort, the header column, and colours (rich-text-table.ts).
+// A right-click in a cell, or Shift+F10 (or the menu key) with the caret
+// in one, opens the cell's menu: its colour, then its row's and its
+// column's items. The grips are mouse shortcuts, out of the tab order;
+// the keyboard has the cell's menu.
+//
+// Rendered into the table node view's grip layer (rich-text-node-views.ts)
+// through a portal. A menu acts on the cell it was opened for, then gives
+// focus back to the text with the caret in that cell.
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { TextSelection } from '@milkdown/kit/prose/state';
+import { selectedRect, TableMap } from '@milkdown/kit/prose/tables';
+import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon, ArrowDownAZIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpZAIcon, BetweenHorizontalEndIcon, BetweenHorizontalStartIcon, BetweenVerticalEndIcon, BetweenVerticalStartIcon, GripHorizontalIcon, GripVerticalIcon, PanelLeftIcon, Trash2Icon, } from 'lucide-react';
+import { cn } from 'cn';
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '../ui/dropdown-menu.js';
+import { HIGHLIGHT_COLORS } from '../../lib/markdown-highlight.js';
+import { tableAt } from './rich-text-formats.js';
+import { cellColorAt, columnAlignment, headerColumnOn, tableActionEnabled, tableColorEnabled, } from './rich-text-table.js';
+/** The event the editor sends a table's frame to open the caret's cell menu (Shift+F10). */
+export const TABLE_MENU_EVENT = 'rich-text-table-menu';
+const SWATCH = {
+    amber: 'bg-highlight-amber',
+    yellow: 'bg-highlight-yellow',
+    green: 'bg-highlight-green',
+    red: 'bg-highlight-red',
+};
+const ROW_ITEMS = [
+    { action: 'rowAbove', label: 'Insert row above', icon: BetweenHorizontalStartIcon },
+    { action: 'rowBelow', label: 'Insert row below', icon: BetweenHorizontalEndIcon },
+    { action: 'moveRowUp', label: 'Move row up', icon: ArrowUpIcon },
+    { action: 'moveRowDown', label: 'Move row down', icon: ArrowDownIcon },
+    { action: 'deleteRow', label: 'Delete row', icon: Trash2Icon },
+];
+const COLUMN_ITEMS = [
+    { action: 'columnLeft', label: 'Insert column left', icon: BetweenVerticalStartIcon },
+    { action: 'columnRight', label: 'Insert column right', icon: BetweenVerticalEndIcon },
+    { action: 'moveColumnLeft', label: 'Move column left', icon: ArrowLeftIcon },
+    { action: 'moveColumnRight', label: 'Move column right', icon: ArrowRightIcon },
+    { action: 'deleteColumn', label: 'Delete column', icon: Trash2Icon },
+];
+const SORT_ITEMS = [
+    { action: 'sortAscending', label: 'Sort ascending', icon: ArrowDownAZIcon },
+    { action: 'sortDescending', label: 'Sort descending', icon: ArrowUpZAIcon },
+];
+const ALIGNMENTS = [
+    { value: 'left', action: 'alignLeft', label: 'Left', icon: AlignLeftIcon },
+    { value: 'center', action: 'alignCenter', label: 'Center', icon: AlignCenterIcon },
+    { value: 'right', action: 'alignRight', label: 'Right', icon: AlignRightIcon },
+];
+// The cell an element is in, if it's one of this table's.
+function cellOf(table, target) {
+    const cell = target instanceof Element ? target.closest('td, th') : null;
+    if (!(cell instanceof HTMLTableCellElement) || cell.closest('table') !== table)
+        return null;
+    return { row: cell.parentElement.rowIndex, column: cell.cellIndex };
+}
+// The state with the caret put in a cell, to ask what applies there.
+function stateAt(state, tablePos, cell) {
+    const table = state.doc.nodeAt(tablePos);
+    if (!table || table.type.name !== 'table')
+        return null;
+    const map = TableMap.get(table);
+    if (cell.row >= map.height || cell.column >= map.width)
+        return null;
+    const at = tablePos + 1 + map.map[cell.row * map.width + cell.column] + 1;
+    return state.apply(state.tr.setSelection(TextSelection.near(state.doc.resolve(at))));
+}
+export function TableGrips({ view, state, getPos, frame, box, table, readOnly, focused, onAction, onColor, text }) {
+    const [hover, setHover] = useState(null);
+    const [open, setOpen] = useState(null);
+    const [target, setTarget] = useState(null);
+    // Bumped when the layout moves without a new state (scroll, resize).
+    const [, setLayout] = useState(0);
+    const columnGrip = useRef(null);
+    const rowGrip = useRef(null);
+    const tablePos = getPos();
+    // The caret's cell, when it's in this table.
+    let caret = null;
+    if (focused && state && tablePos !== undefined && tableAt(state)?.pos === tablePos) {
+        const { top, left } = selectedRect(state);
+        caret = { row: top, column: left };
+    }
+    // The caret's cell for the keyboard's menu, read by a listener set up once.
+    const caretRef = useRef(caret);
+    useLayoutEffect(() => {
+        caretRef.current = caret;
+    });
+    const active = open ? target : (hover ?? caret);
+    // Pointer over a cell: its grips. Leaving the table, back to the caret's.
+    useEffect(() => {
+        const onMove = (event) => {
+            const cell = cellOf(table, event.target);
+            if (cell)
+                setHover((now) => (now && now.row === cell.row && now.column === cell.column ? now : cell));
+        };
+        const onLeave = () => setHover(null);
+        const onLayout = () => setLayout((n) => n + 1);
+        const onMenu = () => {
+            const now = caretRef.current;
+            if (!now)
+                return;
+            setTarget(now);
+            setOpen('cell');
+        };
+        const onContext = (event) => {
+            const cell = cellOf(table, event.target);
+            if (!cell || !view.editable)
+                return;
+            event.preventDefault();
+            setTarget(cell);
+            setOpen('cell');
+        };
+        frame.addEventListener('pointermove', onMove);
+        frame.addEventListener('pointerleave', onLeave);
+        frame.addEventListener(TABLE_MENU_EVENT, onMenu);
+        frame.addEventListener('contextmenu', onContext);
+        box.addEventListener('scroll', onLayout);
+        window.addEventListener('resize', onLayout);
+        const sizes = new ResizeObserver(onLayout);
+        sizes.observe(table);
+        return () => {
+            frame.removeEventListener('pointermove', onMove);
+            frame.removeEventListener('pointerleave', onLeave);
+            frame.removeEventListener(TABLE_MENU_EVENT, onMenu);
+            frame.removeEventListener('contextmenu', onContext);
+            box.removeEventListener('scroll', onLayout);
+            window.removeEventListener('resize', onLayout);
+            sizes.disconnect();
+        };
+    }, [frame, box, table, view, caretRef]);
+    // Where the grips go: the column's on the middle of its top edge (the
+    // header cell's), the row's on the middle of its left edge. A column
+    // scrolled out of the box has none. Placed on the elements themselves,
+    // after each render (the layout is the browser's, not React's).
+    useLayoutEffect(() => {
+        const columnButton = columnGrip.current;
+        const rowButton = rowGrip.current;
+        if (!columnButton || !rowButton)
+            return;
+        const row = active ? table.rows[active.row] : undefined;
+        const header = active ? table.rows[0]?.cells[active.column] : undefined;
+        if (!active || !row || !header) {
+            columnButton.hidden = true;
+            rowButton.hidden = true;
+            return;
+        }
+        const origin = frame.getBoundingClientRect();
+        const scroll = box.getBoundingClientRect();
+        const head = header.getBoundingClientRect();
+        const line = row.getBoundingClientRect();
+        const middle = head.left + head.width / 2;
+        columnButton.hidden = middle < scroll.left || middle > scroll.right;
+        columnButton.style.left = `${middle - origin.left}px`;
+        columnButton.style.top = `${head.top - origin.top}px`;
+        rowButton.hidden = false;
+        rowButton.style.left = `${scroll.left - origin.left}px`;
+        rowButton.style.top = `${line.top - origin.top + line.height / 2}px`;
+    });
+    if (readOnly || tablePos === undefined || !state)
+        return null;
+    const at = (cell) => (cell ? stateAt(state, tablePos, cell) : null);
+    const menuCell = open ? target : active;
+    const there = at(menuCell);
+    const enabled = (action) => (there ? tableActionEnabled(there, action) : false);
+    const columnName = (column) => table.rows[0]?.cells[column]?.textContent?.trim() || `column ${column + 1}`;
+    const openMenu = (menu) => (next) => {
+        if (next) {
+            setTarget(active);
+            setOpen(menu);
+        }
+        else
+            setOpen(null);
+    };
+    // An item runs once its menu has closed: an action that rebuilds the
+    // table (a move, a sort) remakes its node view, grips and menu with it,
+    // and focus then goes to the text, not to a menu that's gone.
+    const later = (act) => {
+        setOpen(null);
+        setTimeout(act);
+    };
+    const run = (action) => {
+        const cell = menuCell;
+        if (cell)
+            later(() => onAction(cell, action));
+    };
+    const color = (scope, value) => {
+        const cell = menuCell;
+        if (cell)
+            later(() => onColor(cell, scope, value));
+    };
+    const items = (list) => list.map(({ action, label, icon: Icon }) => (_jsxs(DropdownMenuItem, { disabled: !enabled(action), onClick: () => run(action), children: [_jsx(Icon, { "aria-hidden": "true" }), label] }, action)));
+    const colorGroup = (scope, label) => {
+        if (!there || !tableColorEnabled(there, scope))
+            return null;
+        const current = scope === 'cell' ? cellColorAt(there) : null;
+        return (_jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: label }), _jsxs(DropdownMenuRadioGroup
+                // A cell says its colour; a row's or a column's cells may differ.
+                , { 
+                    // A cell says its colour; a row's or a column's cells may differ.
+                    value: scope === 'cell' ? (current ?? '') : null, onValueChange: (value) => color(scope, HIGHLIGHT_COLORS.includes(value) ? value : null), children: [HIGHLIGHT_COLORS.map((one) => (_jsxs(DropdownMenuRadioItem, { value: one, closeOnClick: true, children: [_jsx("span", { "aria-hidden": "true", className: cn('size-4 shrink-0 rounded-sm border border-foreground/30', SWATCH[one]) }), one[0].toUpperCase() + one.slice(1)] }, one))), _jsxs(DropdownMenuRadioItem, { value: "", closeOnClick: true, children: [_jsx("span", { "aria-hidden": "true", className: "size-4 shrink-0 rounded-sm border border-foreground/30" }), "No colour"] })] })] }));
+    };
+    const columnItems = (withColor, label) => (_jsxs(_Fragment, { children: [_jsxs(DropdownMenuGroup, { children: [label && _jsx(DropdownMenuLabel, { children: label }), items(COLUMN_ITEMS)] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: "Align column" }), _jsx(DropdownMenuRadioGroup, { value: there ? columnAlignment(there) : 'left', onValueChange: (value) => {
+                            const one = ALIGNMENTS.find((alignment) => alignment.value === value);
+                            if (one)
+                                run(one.action);
+                        }, children: ALIGNMENTS.map(({ value, label, icon: Icon }) => (_jsxs(DropdownMenuRadioItem, { value: value, closeOnClick: true, children: [_jsx(Icon, { "aria-hidden": "true" }), label] }, value))) })] }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuGroup, { children: items(SORT_ITEMS) }), menuCell?.column === 0 && (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuCheckboxItem, { checked: there ? headerColumnOn(there) : false, disabled: !enabled('headerColumn'), onCheckedChange: () => run('headerColumn'), closeOnClick: true, children: [_jsx(PanelLeftIcon, { "aria-hidden": "true" }), "Header column"] })] })), withColor && there && tableColorEnabled(there, 'column') && (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), colorGroup('column', 'Colour column')] })), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: () => run('deleteTable'), children: [_jsx(Trash2Icon, { "aria-hidden": "true" }), "Delete table"] })] }));
+    const rowColor = there && tableColorEnabled(there, 'row');
+    const finalFocus = () => text() ?? true;
+    const grip = 'pointer-events-auto absolute flex items-center justify-center rounded-sm border border-border bg-muted text-muted-foreground shadow-xs outline-none hover:bg-primary hover:text-primary-foreground data-popup-open:bg-primary data-popup-open:text-primary-foreground';
+    return (_jsxs(_Fragment, { children: [_jsxs(DropdownMenu, { open: open === 'column' || open === 'cell', onOpenChange: openMenu('column'), children: [_jsx(DropdownMenuTrigger, { tabIndex: -1, "aria-label": menuCell ? `Column: ${columnName(menuCell.column)}` : 'Column', ref: columnGrip, "data-slot": "rich-text-table-column-grip", className: cn(grip, 'h-3.5 w-6 -translate-x-1/2 -translate-y-1/2'), children: _jsx(GripHorizontalIcon, { "aria-hidden": "true", className: "size-3" }) }), _jsx(DropdownMenuContent, { className: "w-56", "data-rich-text-menu": "", finalFocus: finalFocus, children: open === 'cell' ? (_jsxs(_Fragment, { children: [menuCell && menuCell.row > 0 && (_jsxs(_Fragment, { children: [colorGroup('cell', 'Cell colour'), _jsx(DropdownMenuSeparator, {})] })), _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: "Row" }), items(ROW_ITEMS)] }), _jsx(DropdownMenuSeparator, {}), columnItems(false, menuCell ? `Column: ${columnName(menuCell.column)}` : 'Column')] })) : (columnItems(true)) })] }), _jsxs(DropdownMenu, { open: open === 'row', onOpenChange: openMenu('row'), children: [_jsx(DropdownMenuTrigger, { tabIndex: -1, "aria-label": menuCell ? (menuCell.row === 0 ? 'Header row' : `Row ${menuCell.row}`) : 'Row', ref: rowGrip, "data-slot": "rich-text-table-row-grip", className: cn(grip, 'h-6 w-3.5 -translate-x-1/2 -translate-y-1/2'), children: _jsx(GripVerticalIcon, { "aria-hidden": "true", className: "size-3" }) }), _jsxs(DropdownMenuContent, { className: "w-56", "data-rich-text-menu": "", finalFocus: finalFocus, children: [_jsx(DropdownMenuGroup, { children: items(ROW_ITEMS) }), rowColor && (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), colorGroup('row', 'Colour row')] }))] })] })] }));
+}