@tristan2828/ui-foundation 4.61.0 → 4.62.0

package/conventions/docs/cell-patterns.md

@@ -26,15 +26,15 @@
   - [A variant: a pressed icon inside another value's cell](#a-variant-a-pressed-icon-inside-another-values-cell) · lines 565–648
 - [16. Title linking to the record's view](#16-title-linking-to-the-records-view) · lines 650–685
 - [17. Quick action on the view](#17-quick-action-on-the-view) · lines 687–760
-- [18. Editable value](#18-editable-value) · lines 762–1221
-  - [A list of sub-items](#a-list-of-sub-items) · lines 1037–1122
-  - [In a table's rows](#in-a-tables-rows) · lines 1124–1209
-  - [A table of a few short columns: `width="content"`](#a-table-of-a-few-short-columns-widthcontent) · lines 1211–1221
-- [19. Stage circle for an ordered status](#19-stage-circle-for-an-ordered-status) · lines 1223–1289
-- [20. Count linking to the related records](#20-count-linking-to-the-related-records) · lines 1291–1355
-- [21. Rows grouped under headings, and a pill filter](#21-rows-grouped-under-headings-and-a-pill-filter) · lines 1357–1425
-- [22. A highlighted row, and rows that are done](#22-a-highlighted-row-and-rows-that-are-done) · lines 1427–1455
-- [23. A Group menu, and a record read beside the list](#23-a-group-menu-and-a-record-read-beside-the-list) · lines 1457–1533
+- [18. Editable value](#18-editable-value) · lines 762–1226
+  - [A list of sub-items](#a-list-of-sub-items) · lines 1042–1127
+  - [In a table's rows](#in-a-tables-rows) · lines 1129–1214
+  - [A table of a few short columns: `width="content"`](#a-table-of-a-few-short-columns-widthcontent) · lines 1216–1226
+- [19. Stage circle for an ordered status](#19-stage-circle-for-an-ordered-status) · lines 1228–1294
+- [20. Count linking to the related records](#20-count-linking-to-the-related-records) · lines 1296–1360
+- [21. Rows grouped under headings, and a pill filter](#21-rows-grouped-under-headings-and-a-pill-filter) · lines 1362–1430
+- [22. A highlighted row, and rows that are done](#22-a-highlighted-row-and-rows-that-are-done) · lines 1432–1460
+- [23. A Group menu, and a record read beside the list](#23-a-group-menu-and-a-record-read-beside-the-list) · lines 1462–1538
 
 <!-- /index -->
 
@@ -1002,8 +1002,13 @@ const price = editInPlace({
   is GitHub's `> [!NOTE]` (note, tip, important, warning, caution), its
   icon a menu of kinds. In a table, Tab in the last cell adds a row,
   Enter goes down a column (and out from the last row), bars under and
-  beside it add a row or a column, and the toolbar's Table menu inserts
-  rows and columns, aligns a column and deletes. Selected words can be
+  beside it add a row or a column, and a grip on the hovered column and
+  row opens its menu: insert, move and delete, align, sort (rewriting the
+  rows), a header column (its first cells bold) and cell colours (a
+  cell's whole text in a highlight); a right-click or Shift+F10 in a cell
+  opens the cell's. Columns fit their words. `tableLook="boxed"` (on the
+  editor and on `<Markdown>`) gives a roomier boxed table with zebra rows
+  instead of the compact grid. Selected words can be
   highlighted in four colours (amber, yellow, green, red) from the
   toolbars' Highlight menu or with "/highlight", and un-highlighted;
   they're saved as `==words==` (`=={green}words==` for the others), plain

package/dist/components/app/markdown.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentProps } from 'react';
-import { type HeadingFrom, type HeadingLevel } from './prose-look.js';
+import { type HeadingFrom, type HeadingLevel, type TableLook } from './prose-look.js';
 export type MarkdownProps = {
     /** The Markdown source. Raw HTML in it is shown as text, never rendered. */
     children: string;
@@ -44,6 +44,11 @@ export type MarkdownProps = {
      * are pictures and the text stays read-only.
      */
     onTasksChange?: (markdown: string) => void | Promise<unknown>;
+    /**
+     * How tables look: `'compact'` (the default) or `'boxed'`, as on
+     * RichTextEditor. Either way columns fit their words.
+     */
+    tableLook?: TableLook;
     className?: string;
 } & Omit<ComponentProps<'div'>, 'children'>;
-export declare function Markdown({ children, headingLevel, headingFrom, foldKey: foldKeyProp, foldable, onTasksChange: onTasksChangeProp, className, ...rest }: MarkdownProps): import("react").JSX.Element;
+export declare function Markdown({ children, headingLevel, headingFrom, foldKey: foldKeyProp, foldable, onTasksChange: onTasksChangeProp, tableLook, className, ...rest }: MarkdownProps): import("react").JSX.Element;

package/dist/components/app/markdown.js

@@ -23,6 +23,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // sit: `#` and `##` on a tinted band, `###` a small uppercase label, and
 // the text under them lined up with the words in the band (prose-look.ts).
 //
+// A table's columns fit their words (a cell wraps at 18rem; a right-
+// aligned column, numbers, never wraps), in one of two looks
+// (`tableLook`, as on RichTextEditor: styles/index.css "Tables in written
+// text"). A cell whose whole text is one highlight is painted in it, and
+// a first column of bold cells is row headers (src/lib/markdown-table.ts).
 // A table wider than the text scrolls sideways, and while it does, its
 // box is a tab stop, named for its columns, that the arrow keys scroll
 // (prose-table-scroll.ts). Its cells wrap first, so that's only a table
@@ -60,11 +65,11 @@ import remarkGfm from 'remark-gfm';
 import { cn } from 'cn';
 import { ChevronDownIcon, ExternalLinkIcon, SquareCheckIcon, SquareIcon } from 'lucide-react';
 import { Checkbox } from '../ui/checkbox.js';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table.js';
 import { useFolds } from '../../hooks/fold-store.js';
 import { CALLOUT_KINDS, remarkCallouts } from '../../lib/markdown-callout.js';
 import { rehypeFold, toggleFold } from '../../lib/markdown-fold.js';
 import { isHighlightColor, remarkHighlights } from '../../lib/markdown-highlight.js';
+import { rehypeTables } from '../../lib/markdown-table.js';
 import { toggleTaskAt } from '../../lib/markdown-tasks.js';
 import { textTopHeading } from '../../lib/markdown-top-heading.js';
 import { CALLOUT_BOX, CALLOUT_LOOK, DEFAULT_HEADING_LEVEL, FOLD_BUTTON, FOLD_HEADING, headingBand, headingClass, headingTag, PROSE, PROSE_INSET, } from './prose-look.js';
@@ -87,10 +92,9 @@ function omitNode(props) {
     delete rest.node;
     return rest;
 }
-// A GFM table in the package's own table, in its box that scrolls
-// sideways: a tab stop and a named region only while the table overflows
-// it. Watched again after each render, so a header row with new words
-// renames it.
+// A GFM table in its box that scrolls sideways: a tab stop and a named
+// region only while the table overflows it. Watched again after each
+// render, so a header row with new words renames it.
 function NotesTable({ hidden, ...props }) {
     const boxRef = useRef(null);
     useEffect(() => {
@@ -101,9 +105,7 @@ function NotesTable({ hidden, ...props }) {
         const region = watchTableScroll(box, table, headerTexts(table));
         return () => region.destroy();
     });
-    return (_jsx(Table, { ...props, containerRef: boxRef, 
-        // Folded away, the box goes with the table.
-        containerClassName: cn('rounded-lg border border-border', TABLE_SCROLL_FOCUS, hidden && 'hidden') }));
+    return (_jsx("div", { ref: boxRef, "data-slot": "table-container", className: cn('prose-table', TABLE_SCROLL_FOCUS, hidden && 'hidden'), children: _jsx("table", { ...props }) }));
 }
 // Ticks a task item by where it starts in the text: given only with
 // `onTasksChange`. Each task item hands its box its own start and words.
@@ -211,16 +213,9 @@ const COMPONENTS = {
         const { alt, ...rest } = omitNode(props);
         return _jsx("img", { ...rest, alt: alt ?? '', loading: "lazy", className: "h-auto max-w-full rounded-md" });
     },
-    // GFM tables use the package's own table, zebra stripes and density
-    // tokens included, so a table in the notes reads like every other table.
+    // GFM tables: drawn by styles/index.css "Tables in written text"
+    // (rehypeTables marks coloured cells and row headers).
     table: (props) => _jsx(NotesTable, { ...omitNode(props) }),
-    thead: (props) => _jsx(TableHeader, { ...omitNode(props), className: "bg-muted" }),
-    tbody: (props) => _jsx(TableBody, { ...omitNode(props) }),
-    tr: (props) => _jsx(TableRow, { ...omitNode(props) }),
-    // Notes' cells wrap (a cell can hold a sentence) and have a line
-    // between columns, so a wide table still reads column by column.
-    th: (props) => _jsx(TableHead, { ...omitNode(props), className: "border-r border-border whitespace-normal last:border-r-0" }),
-    td: (props) => _jsx(TableCell, { ...omitNode(props), className: "border-r border-border whitespace-normal last:border-r-0" }),
 };
 // The components for each `headingLevel` and level that takes it (`#`,
 // or the text's highest with `headingFrom="text"`), made once each.
@@ -236,7 +231,7 @@ function componentsFor(top, textTop) {
     }
     return components;
 }
-export function Markdown({ children, headingLevel = DEFAULT_HEADING_LEVEL, headingFrom = 'hash', foldKey: foldKeyProp, foldable = true, onTasksChange: onTasksChangeProp, className, ...rest }) {
+export function Markdown({ children, headingLevel = DEFAULT_HEADING_LEVEL, headingFrom = 'hash', foldKey: foldKeyProp, foldable = true, onTasksChange: onTasksChangeProp, tableLook = 'compact', className, ...rest }) {
     // On paper (EntityView's Print notes): every heading plain and open,
     // every task box a picture.
     const printing = usePrinting();
@@ -245,7 +240,7 @@ export function Markdown({ children, headingLevel = DEFAULT_HEADING_LEVEL, headi
     const textTop = useMemo(() => (headingFrom === 'text' ? textTopHeading(children) : 1), [headingFrom, children]);
     const components = useMemo(() => componentsFor(headingLevel, textTop), [headingLevel, textTop]);
     const [folded, setFolded] = useFolds(foldKey);
-    const rehypePlugins = useMemo(() => (foldKey === undefined ? [] : [[rehypeFold, { folded }]]), [foldKey, folded]);
+    const rehypePlugins = useMemo(() => (foldKey === undefined ? [rehypeTables] : [rehypeTables, [rehypeFold, { folded }]]), [foldKey, folded]);
     const toggle = useCallback((id) => setFolded(toggleFold(folded, id)), [folded, setFolded]);
     // Ticks not yet back as `children`: shown, and built on by the next
     // tick, so two quick ticks on a slow save both land. Kept while
@@ -261,5 +256,5 @@ export function Markdown({ children, headingLevel = DEFAULT_HEADING_LEVEL, headi
         if (saving && typeof saving.then === 'function')
             saving.then(undefined, () => setPending((current) => (current?.sent.includes(next) ? null : current)));
     }, [onTasksChange, children, shown, live]);
-    return (_jsx("div", { "data-slot": "markdown", "data-fold-scope": foldKey, ...rest, className: cn('flex min-w-0 flex-col gap-3 type-body text-foreground break-words', PROSE_INSET, className), children: _jsx(FoldContext.Provider, { value: foldKey === undefined ? null : toggle, children: _jsx(TaskToggleContext.Provider, { value: onTasksChange ? tickTask : null, children: _jsx(ReactMarkdown, { remarkPlugins: REMARK_PLUGINS, rehypePlugins: rehypePlugins, components: components, children: onTasksChange ? shown : children }) }) }) }));
+    return (_jsx("div", { "data-slot": "markdown", "data-table-look": tableLook, "data-fold-scope": foldKey, ...rest, className: cn('flex min-w-0 flex-col gap-3 type-body text-foreground break-words', PROSE_INSET, className), children: _jsx(FoldContext.Provider, { value: foldKey === undefined ? null : toggle, children: _jsx(TaskToggleContext.Provider, { value: onTasksChange ? tickTask : null, children: _jsx(ReactMarkdown, { remarkPlugins: REMARK_PLUGINS, rehypePlugins: rehypePlugins, components: components, children: onTasksChange ? shown : children }) }) }) }));
 }

package/dist/components/app/milkdown-editor.d.ts

@@ -1,2 +1,2 @@
 import type { RichTextEditorProps } from './rich-text-editor.js';
-export default function MilkdownEditor({ id, defaultValue, onChange, onProblem, readOnly, autoFocus, placeholder, maxLength, toolbar, inline, upload, imageAccept, imageMaxSize, headingLevel, headingFrom, foldKey, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, }: RichTextEditorProps): import("react").JSX.Element;
+export default function MilkdownEditor({ id, defaultValue, onChange, onProblem, readOnly, autoFocus, placeholder, maxLength, toolbar, inline, upload, imageAccept, imageMaxSize, headingLevel, headingFrom, foldKey, tableLook, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, }: RichTextEditorProps): import("react").JSX.Element;

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)
@@ -814,8 +834,9 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
                 void editor.destroy();
             root.replaceChildren();
         };
-        // Made once per mount: later changes to defaultValue are ignored, as
-        // with any uncontrolled input. Attributes and read-only follow below.
+        // Made once per mount. A new defaultValue the editor didn't report
+        // remounts it (RichTextEditor's key), so it isn't read here.
+        // Attributes and read-only follow below.
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     // Read-only and the ARIA attributes follow their props.
@@ -860,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.
@@ -945,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 = '';
@@ -980,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).
@@ -994,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/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,9 +1,13 @@
 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;
-    /** The Markdown it opens with. Read once, when it mounts (uncontrolled). */
+    /**
+     * The Markdown it opens with. A later value the editor didn't report
+     * (a record loaded after it mounted, a reset) replaces the text; the
+     * value it reported, passed back, changes nothing.
+     */
     defaultValue: string;
     /** The Markdown to save, after every edit: untouched blocks as originally written. */
     onChange: (markdown: string) => void;
@@ -86,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,16 +23,50 @@ 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.
 //
+// `defaultValue` is read when it mounts, then followed: a new value the
+// editor didn't report itself (a form's loaded record arriving after the
+// editor, a reset) replaces the text, as if it opened with it. Its own
+// edits, coming back as the value, change nothing, so the caret stays
+// where it is. A caller that never feeds `onChange` back keeps its text.
+//
 // The editor (Milkdown) is loaded on first use, so a page that only reads
 // Markdown never downloads it. Until it arrives, a placeholder the size of
 // the field shows.
-import { lazy, Suspense } from 'react';
+import { lazy, Suspense, useState } from 'react';
 import { cn } from 'cn';
 import { Skeleton } from '../ui/skeleton.js';
 const MilkdownEditor = lazy(() => import('./milkdown-editor.js'));
+// When the editor opens again: each time `defaultValue` changes to
+// Markdown it didn't report. Adjusted while rendering (React's "storing
+// information from previous renders"), so the new text never shows a
+// frame late.
+function useOpenings(defaultValue) {
+    const [seen, setSeen] = useState(defaultValue);
+    const [reported, setReported] = useState(defaultValue);
+    const [opening, setOpening] = useState(0);
+    if (defaultValue !== seen) {
+        setSeen(defaultValue);
+        if (defaultValue !== reported) {
+            setReported(defaultValue);
+            setOpening(opening + 1);
+        }
+    }
+    return { opening, report: setReported };
+}
 export function RichTextEditor(props) {
-    return (_jsx(Suspense, { fallback: _jsxs("div", { "data-slot": "rich-text-editor", "data-state": "loading", className: cn('flex w-full flex-col', !props.inline && 'rounded-lg border border-input', props.className), children: [(props.toolbar ?? true) === true && _jsx("div", { className: "h-9 border-b border-input" }), _jsxs("div", { className: cn('flex flex-col gap-2', props.inline ? 'py-0.5' : 'min-h-24 px-2.5 py-2'), children: [_jsx(Skeleton, { className: "h-4 w-3/4" }), _jsx(Skeleton, { className: "h-4 w-1/2" })] })] }), children: _jsx(MilkdownEditor, { ...props, foldKey: props.foldable === false ? undefined : props.foldKey }) }));
+    const { opening, report } = useOpenings(props.defaultValue);
+    const { onChange } = props;
+    return (_jsx(Suspense, { fallback: _jsxs("div", { "data-slot": "rich-text-editor", "data-state": "loading", className: cn('flex w-full flex-col', !props.inline && 'rounded-lg border border-input', props.className), children: [(props.toolbar ?? true) === true && _jsx("div", { className: "h-9 border-b border-input" }), _jsxs("div", { className: cn('flex flex-col gap-2', props.inline ? 'py-0.5' : 'min-h-24 px-2.5 py-2'), children: [_jsx(Skeleton, { className: "h-4 w-3/4" }), _jsx(Skeleton, { className: "h-4 w-1/2" })] })] }), children: _jsx(MilkdownEditor, { ...props, onChange: (markdown) => {
+                report(markdown);
+                onChange(markdown);
+            }, foldKey: props.foldable === false ? undefined : props.foldKey }, opening) }));
 }

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;