@tristan2828/ui-foundation 4.61.1 → 4.62.0

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')] }))] })] })] }));
+}

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

@@ -1,6 +1,7 @@
-import { type EditorState, type Transaction } from '@milkdown/kit/prose/state';
+import { Plugin, type EditorState, type Transaction } from '@milkdown/kit/prose/state';
+import { type HighlightColor } from '../../lib/markdown-highlight.js';
 type Dispatch = (tr: Transaction) => void;
-export type TableAction = 'rowAbove' | 'rowBelow' | 'columnLeft' | 'columnRight' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'deleteRow' | 'deleteColumn' | 'deleteTable';
+export type TableAction = 'rowAbove' | 'rowBelow' | 'columnLeft' | 'columnRight' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'deleteRow' | 'deleteColumn' | 'deleteTable' | 'moveRowUp' | 'moveRowDown' | 'moveColumnLeft' | 'moveColumnRight' | 'sortAscending' | 'sortDescending' | 'headerColumn';
 export type ColumnAlignment = 'left' | 'center' | 'right';
 /** The caret's column's alignment, as the header cell has it (GFM's default is left). */
 export declare function columnAlignment(state: EditorState): ColumnAlignment;
@@ -8,6 +9,22 @@ export declare function columnAlignment(state: EditorState): ColumnAlignment;
 export declare function tableActionEnabled(state: EditorState, action: TableAction): boolean;
 /** Runs an action where the caret is. False when it can't apply there. */
 export declare function runTableAction(state: EditorState, dispatch: Dispatch, action: TableAction): boolean;
+/** Whether the caret's table has a header column (its first cells bold). */
+export declare function headerColumnOn(state: EditorState): boolean;
+/** What a colour is put on: the caret's cell, its whole row, or its column's body cells. */
+export type TableColorScope = 'cell' | 'row' | 'column';
+/** Whether a colour can go on that scope where the caret is (never the header row's cells). */
+export declare function tableColorEnabled(state: EditorState, scope: TableColorScope): boolean;
+/** The cell colour where the caret is, or null (none, or the header row). */
+export declare function cellColorAt(state: EditorState): HighlightColor | null;
+/**
+ * Colours cells: each one's whole text put in that highlight (`null`
+ * takes the highlight off). An empty cell stays as it is: a highlight
+ * needs words.
+ */
+export declare function colorTableCells(state: EditorState, dispatch: Dispatch, scope: TableColorScope, color: HighlightColor | null): boolean;
+/** The plugin that draws cell colours and a header column (tableDecorations). */
+export declare function tableLook(): Plugin;
 /**
  * The editor's table keys, before Milkdown's own (which go to the next
  * cell on Tab, and out of the table on any Enter). True when it handled

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

@@ -1,4 +1,32 @@
-import { TextSelection } from '@milkdown/kit/prose/state';
+// What the rich-text editor can do to a table: rows and columns added,
+// deleted and moved, a column's alignment, the rows sorted by a column,
+// cells coloured, a header column, the whole table deleted, and its keys.
+// Plain ProseMirror commands over prosemirror-tables and Milkdown's gfm
+// schema, so each is one undo step.
+//
+// Sorting rewrites the rows' order: what the editor shows is what it
+// saves, so a sort is an edit like any other (Ctrl+Z puts them back).
+// Colours and the header column are stored as Markdown already writes
+// them (src/lib/markdown-table.ts): a coloured cell is its whole text in
+// one highlight, a header column is its first cells in bold. The table's
+// decorations (tableLook) draw them.
+//
+// What GFM can't store, the editor doesn't offer: a table always keeps its
+// header row and at least one row under it, and at least one column, so
+// those deletes are off where they'd break that (the header row can't be
+// deleted or have a row put above it). Alignment is per column, as the
+// Markdown writes it (`:---:`).
+//
+// Keys (handleTableKey), on top of Milkdown's Tab/Shift+Tab between cells:
+// Tab in the last cell adds a row; Enter goes to the cell below, and out
+// of the table from its last row; Shift+Enter does nothing (a line break
+// can't be stored inside a cell).
+import { closeHistory } from '@milkdown/kit/prose/history';
+import { Fragment } from '@milkdown/kit/prose/model';
+import { Plugin, PluginKey, TextSelection } from '@milkdown/kit/prose/state';
+import { Decoration, DecorationSet } from '@milkdown/kit/prose/view';
+import { isHighlightColor } from '../../lib/markdown-highlight.js';
+import { cellColor, compareCells, isHeaderColumn } from '../../lib/markdown-table.js';
 import { addColumnAfter, addColumnBefore, deleteColumn, deleteRow, deleteTable, isInTable, selectedRect, TableMap, } from '@milkdown/kit/prose/tables';
 const ALIGN = {
     alignLeft: 'left',
@@ -26,6 +54,19 @@ export function tableActionEnabled(state, action) {
             return top > 0 && bottom - top < map.height - 1;
         case 'deleteColumn':
             return right - left < map.width;
+        case 'moveRowUp':
+            return top > 1;
+        case 'moveRowDown':
+            return top > 0 && bottom < map.height;
+        case 'moveColumnLeft':
+            return left > 0;
+        case 'moveColumnRight':
+            return right < map.width;
+        case 'sortAscending':
+        case 'sortDescending':
+            return map.height > 2;
+        case 'headerColumn':
+            return map.height > 1;
         default:
             return true;
     }
@@ -52,10 +93,200 @@ export function runTableAction(state, dispatch, action) {
             return deleteColumn(state, dispatch);
         case 'deleteTable':
             return deleteTable(state, dispatch);
+        case 'moveRowUp':
+        case 'moveRowDown':
+            return moveRow(state, dispatch, action === 'moveRowUp' ? -1 : 1);
+        case 'moveColumnLeft':
+        case 'moveColumnRight':
+            return moveColumn(state, dispatch, action === 'moveColumnLeft' ? -1 : 1);
+        case 'sortAscending':
+        case 'sortDescending':
+            return sortRows(state, dispatch, action === 'sortAscending' ? 1 : -1);
+        case 'headerColumn':
+            return toggleHeaderColumn(state, dispatch);
         default:
             return false;
     }
 }
+// The table rebuilt from its rows, in place of the old one, and the caret
+// into the cell at `row`, `column` of the new one. Its own undo step,
+// never merged with the edit before it (two sorts in a row undo one at a time).
+function replaceRows(state, dispatch, rows, row, column) {
+    const { table, tableStart } = selectedRect(state);
+    const next = table.copy(Fragment.from(rows));
+    const tr = state.tr.replaceWith(tableStart - 1, tableStart - 1 + table.nodeSize, next);
+    const map = TableMap.get(next);
+    tr.setSelection(TextSelection.near(tr.doc.resolve(tableStart + map.map[row * map.width + column] + 1)));
+    dispatch(closeHistory(tr.scrollIntoView()));
+    return true;
+}
+const rowsOf = (table) => {
+    const rows = [];
+    table.forEach((row) => rows.push(row));
+    return rows;
+};
+// The caret's row swapped with the one above or below (never the header
+// row: GFM's first row is always the header).
+function moveRow(state, dispatch, by) {
+    const { table, top, left } = selectedRect(state);
+    const rows = rowsOf(table);
+    const to = top + by;
+    [rows[top], rows[to]] = [rows[to], rows[top]];
+    return replaceRows(state, dispatch, rows, to, left);
+}
+// The caret's column swapped with the one left or right of it, in every
+// row; each cell keeps its alignment, so the column's moves with it.
+function moveColumn(state, dispatch, by) {
+    const { table, top, left } = selectedRect(state);
+    const to = left + by;
+    const rows = rowsOf(table).map((row) => {
+        const cells = [];
+        row.forEach((cell) => cells.push(cell));
+        [cells[left], cells[to]] = [cells[to], cells[left]];
+        return row.copy(Fragment.from(cells));
+    });
+    return replaceRows(state, dispatch, rows, top, to);
+}
+// The body rows in the order of the caret's column (numbers by value,
+// then words, empty cells last), the header row kept first. Rows that
+// tie keep their order. The caret goes to the column's header.
+function sortRows(state, dispatch, direction) {
+    const { table, left } = selectedRect(state);
+    const [header, ...body] = rowsOf(table);
+    const text = (row) => row.child(left).textContent;
+    const sorted = body
+        .map((row, index) => ({ row, index }))
+        .sort((a, b) => compareCells(text(a.row), text(b.row)) * direction || a.index - b.index)
+        .map(({ row }) => row);
+    return replaceRows(state, dispatch, [header, ...sorted], 0, left);
+}
+// A cell's text as runs, with their highlight and bold (markdown-table.ts).
+function runsOf(cell) {
+    const runs = [];
+    cell.descendants((node) => {
+        if (!node.isText)
+            return true;
+        const highlight = node.marks.find((mark) => mark.type.name === 'highlight');
+        const color = highlight ? (isHighlightColor(highlight.attrs.color) ? highlight.attrs.color : 'amber') : null;
+        runs.push({ text: node.text ?? '', color, bold: node.marks.some((mark) => mark.type.name === 'strong') });
+        return false;
+    });
+    return runs;
+}
+// Each body row's first cell, and where it starts in the document.
+function firstCells(table, tableStart) {
+    const cells = [];
+    table.forEach((row, offset, index) => {
+        if (index > 0 && row.firstChild)
+            cells.push({ cell: row.firstChild, pos: tableStart + offset + 1 });
+    });
+    return cells;
+}
+/** Whether the caret's table has a header column (its first cells bold). */
+export function headerColumnOn(state) {
+    if (!isInTable(state))
+        return false;
+    const { table, tableStart } = selectedRect(state);
+    return isHeaderColumn(firstCells(table, tableStart).map(({ cell }) => runsOf(cell)));
+}
+// The header column on (each body row's first cell bolded) or off (unbolded).
+function toggleHeaderColumn(state, dispatch) {
+    const { table, tableStart } = selectedRect(state);
+    const strong = state.schema.marks.strong;
+    const on = headerColumnOn(state);
+    const tr = state.tr;
+    for (const { cell, pos } of firstCells(table, tableStart)) {
+        const from = pos + 1;
+        const to = pos + cell.nodeSize - 1;
+        if (on)
+            tr.removeMark(from, to, strong);
+        else if (cell.textContent.trim())
+            tr.addMark(from, to, strong.create());
+    }
+    if (tr.docChanged)
+        dispatch(closeHistory(tr));
+    return true;
+}
+/** Whether a colour can go on that scope where the caret is (never the header row's cells). */
+export function tableColorEnabled(state, scope) {
+    if (!isInTable(state))
+        return false;
+    const { map, top } = selectedRect(state);
+    return scope === 'column' ? map.height > 1 : top > 0;
+}
+/** The cell colour where the caret is, or null (none, or the header row). */
+export function cellColorAt(state) {
+    if (!isInTable(state))
+        return null;
+    const { table, map, left, top } = selectedRect(state);
+    const cell = table.nodeAt(map.map[top * map.width + left]);
+    return cell ? cellColor(runsOf(cell)) : null;
+}
+/**
+ * Colours cells: each one's whole text put in that highlight (`null`
+ * takes the highlight off). An empty cell stays as it is: a highlight
+ * needs words.
+ */
+export function colorTableCells(state, dispatch, scope, color) {
+    if (!tableColorEnabled(state, scope))
+        return false;
+    const { map, table, tableStart, top, bottom, left, right } = selectedRect(state);
+    const highlight = state.schema.marks.highlight;
+    const rows = scope === 'column' ? [1, map.height] : [top, bottom];
+    const columns = scope === 'row' ? [0, map.width] : [left, right];
+    const tr = state.tr;
+    for (let row = rows[0]; row < rows[1]; row++) {
+        for (let column = columns[0]; column < columns[1]; column++) {
+            const offset = map.map[row * map.width + column];
+            const cell = table.nodeAt(offset);
+            const from = tableStart + offset + 1;
+            const to = tableStart + offset + cell.nodeSize - 1;
+            tr.removeMark(from, to, highlight);
+            if (color && cell.textContent.trim())
+                tr.addMark(from, to, highlight.create({ color }));
+        }
+    }
+    if (tr.docChanged)
+        dispatch(closeHistory(tr));
+    return true;
+}
+// The decorations that draw what the Markdown keeps: a coloured cell's
+// wash (`data-color`) and a header column's first cells (`data-row-header`),
+// styled in styles/index.css ("Tables in written text").
+function tableDecorations(doc) {
+    const decorations = [];
+    doc.descendants((node, pos) => {
+        if (node.type.name !== 'table')
+            return node.isBlock && !node.isTextblock;
+        const tableStart = pos + 1;
+        node.forEach((row, rowOffset) => {
+            row.forEach((cell, cellOffset) => {
+                const color = cellColor(runsOf(cell));
+                const at = tableStart + rowOffset + 1 + cellOffset;
+                if (color)
+                    decorations.push(Decoration.node(at, at + cell.nodeSize, { 'data-color': color }));
+            });
+        });
+        const firsts = firstCells(node, tableStart);
+        if (isHeaderColumn(firsts.map(({ cell }) => runsOf(cell))))
+            for (const { cell, pos: at } of firsts)
+                decorations.push(Decoration.node(at, at + cell.nodeSize, { 'data-row-header': '' }));
+        return false;
+    });
+    return DecorationSet.create(doc, decorations);
+}
+const tableLookKey = new PluginKey('tableLook');
+/** The plugin that draws cell colours and a header column (tableDecorations). */
+export function tableLook() {
+    return new Plugin({
+        key: tableLookKey,
+        state: {
+            init: (_config, state) => tableDecorations(state.doc),
+            apply: (tr, previous) => (tr.docChanged ? tableDecorations(tr.doc) : previous),
+        },
+        props: { decorations: (state) => tableLookKey.getState(state) },
+    });
+}
 // A row of empty cells, each aligned as its column is, above or below the
 // caret's rows (or at the end: `'end'`), and the caret into it in the
 // same column (the first, at the end).

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

@@ -2,7 +2,6 @@ import { type Ref } from 'react';
 import type { EditorState } from '@milkdown/kit/prose/state';
 import { type FormatItem } from './rich-text-format-items.js';
 import { type FormatId } from './rich-text-formats.js';
-import type { TableAction } from './rich-text-table.js';
 declare const SETS: {
     all: FormatItem[][];
     tools: FormatItem[][];
@@ -16,18 +15,16 @@ export type FormatButtonsProps = {
     readOnly: boolean;
     /** A button pressed: run the format on the editor and give it focus back. */
     onFormat: (id: FormatId) => void;
-    /** A Table menu item picked (only the fixed toolbar has the menu). */
-    onTable?: (action: TableAction) => void;
     /** The Image button pressed: pick images to upload. No button without it. */
     onImage?: () => void;
     /** The Full screen button pressed. No button without it. */
     onFullScreen?: () => void;
     /** Whether the editor is full screen now (the button's state). */
     fullScreen?: boolean;
-    /** The editable element, for the Table menu to give focus back to. */
+    /** The editable element, for the Highlight menu to give focus back to. */
     text?: () => HTMLElement | null;
 };
-export declare function FormatButtons({ formats, state, readOnly, onFormat, onTable, onImage, onFullScreen, fullScreen, text }: FormatButtonsProps): import("react").JSX.Element;
+export declare function FormatButtons({ formats, state, readOnly, onFormat, onImage, onFullScreen, fullScreen, text }: 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;
@@ -36,18 +33,16 @@ export interface RichTextToolbarProps {
     controls?: string;
     /** A button pressed: run the format on the editor and give it focus back. */
     onFormat: (id: FormatId) => void;
-    /** A Table menu item picked: run it on the editor and give it focus back. */
-    onTable: (action: TableAction) => void;
     /** The Image button pressed (only when the editor uploads images). */
     onImage?: () => void;
     /** The Full screen button pressed. No button without it. */
     onFullScreen?: () => void;
     /** Whether the editor is full screen now. */
     fullScreen?: boolean;
-    /** The editable element, for the Table menu to give focus back to. */
+    /** The editable element, for the Highlight menu to give focus back to. */
     text: () => HTMLElement | null;
     /** The toolbar's element, for Alt+F10 to reach it from the text. */
     ref?: Ref<HTMLDivElement>;
 }
-export declare function RichTextToolbar({ state, readOnly, controls, onFormat, onTable, onImage, onFullScreen, fullScreen, text, ref }: RichTextToolbarProps): import("react").JSX.Element;
+export declare function RichTextToolbar({ state, readOnly, controls, onFormat, onImage, onFullScreen, fullScreen, text, ref }: RichTextToolbarProps): import("react").JSX.Element;
 export {};

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

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // The rich-text editor's fixed toolbar: one row of pressed/not-pressed
 // buttons above the text, each a format and its keyboard shortcut, a
-// Table menu (rich-text-table-menu.tsx), and, when the editor uploads
-// images, an Image button (a plain button: it opens the file picker).
+// Table button that inserts one (a table's own grips edit it:
+// rich-text-table-grips.tsx), and, when the editor uploads images, an
+// Image button (a plain button: it opens the file picker).
 //
 // - One tab stop (ARIA's toolbar pattern): Tab reaches the last button
 //   used, the arrow keys, Home and End move along the row.
@@ -24,7 +25,6 @@ import { FORMAT_GROUPS, FORMAT_ITEMS } from './rich-text-format-items.js';
 import { formatOn } from './rich-text-formats.js';
 import { ariaKeys, isApple, shownKeys } from './rich-text-shortcuts.js';
 import { RichTextHighlightMenu } from './rich-text-highlight-menu.js';
-import { RichTextTableMenu } from './rich-text-table-menu.js';
 // Which buttons a toolbar has: every format (the fixed one), or the ones
 // that apply to selected words (the floating one).
 const SELECTION = ['bold', 'italic', 'strike', 'code', 'highlight', 'link'];
@@ -51,7 +51,7 @@ function useCompact() {
 // 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, onTable, onImage, onFullScreen, fullScreen = false, text = () => null }) {
+export function FormatButtons({ formats, state, readOnly, onFormat, onImage, onFullScreen, fullScreen = false, text = () => null }) {
     const apple = isApple();
     const compact = useCompact();
     const groups = SETS[formats].map((group) => group.filter((item) => compact || !item.touch)).filter((group) => group.length > 0);
@@ -83,10 +83,6 @@ export function FormatButtons({ formats, state, readOnly, onFormat, onTable, onI
     };
     return (_jsxs(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);
-                        if (item.id === 'table')
-                            return (_jsx(RichTextTableMenu, { ref: (element) => {
-                                    buttons.current[index] = element;
-                                }, state: state, readOnly: readOnly, tabIndex: index === current ? 0 : -1, onFocus: () => setCurrent(index), onKeyDown: onKeyDown, onInsert: () => onFormat('table'), onAction: (action) => onTable?.(action), text: text }, item.id));
                         if (item.id === 'highlight')
                             return (_jsx(RichTextHighlightMenu, { ref: (element) => {
                                     buttons.current[index] = element;
@@ -102,7 +98,9 @@ export function FormatButtons({ formats, state, readOnly, onFormat, onTable, onI
                         if (item.action)
                             return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(Button, { ref: (element) => {
                                                 buttons.current[index] = element;
-                                            }, variant: "ghost", size: "icon-sm", "aria-label": item.label, disabled: readOnly, tabIndex: index === current ? 0 : -1, onMouseDown: (event) => event.preventDefault(), onFocus: () => setCurrent(index), onKeyDown: onKeyDown, onClick: () => onFormat(item.id) }), children: _jsx(Icon, {}) }), _jsx(TooltipContent, { children: tip })] }, item.id));
+                                            }, variant: "ghost", size: "icon-sm", "aria-label": item.label, 
+                                            // A table goes in only outside one.
+                                            disabled: readOnly || (item.id === 'table' && state !== null && formatOn(state, 'table')), tabIndex: index === current ? 0 : -1, onMouseDown: (event) => event.preventDefault(), onFocus: () => setCurrent(index), onKeyDown: onKeyDown, onClick: () => onFormat(item.id) }), children: _jsx(Icon, {}) }), _jsx(TooltipContent, { children: tip })] }, item.id));
                         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", 
@@ -114,6 +112,6 @@ export function FormatButtons({ formats, state, readOnly, onFormat, onTable, onI
                                         buttons.current[fullScreenIndex] = element;
                                     }, size: "icon-sm", "aria-label": "Full screen", pressed: fullScreen, tabIndex: fullScreenIndex === current ? 0 : -1, className: "aria-pressed:bg-muted aria-pressed:text-foreground", onMouseDown: (event) => event.preventDefault(), onFocus: () => setCurrent(fullScreenIndex), onKeyDown: onKeyDown, onPressedChange: onFullScreen }), children: fullScreen ? _jsx(Minimize2Icon, {}) : _jsx(Maximize2Icon, {}) }), _jsx(TooltipContent, { children: fullScreen ? 'Leave full screen · Esc' : 'Full screen' })] })] }))] }));
 }
-export function RichTextToolbar({ state, readOnly, controls, onFormat, onTable, onImage, onFullScreen, fullScreen, text, 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, onTable: onTable, onImage: onImage, onFullScreen: onFullScreen, fullScreen: fullScreen, text: text }) }));
+export function RichTextToolbar({ state, readOnly, controls, onFormat, onImage, onFullScreen, fullScreen, text, 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, onImage: onImage, onFullScreen: onFullScreen, fullScreen: fullScreen, text: text }) }));
 }

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

@@ -8,8 +8,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 //   the tab order.
 // - A table's bars add a column at its right and a row at its end, shown
 //   while the pointer is over the table or the caret is in it. Mouse
-//   shortcuts as well: Tab in the last cell adds a row, and the toolbar's
-//   Table menu does both.
+//   shortcuts as well: Tab in the last cell adds a row, and a cell's menu
+//   (its grips, or Shift+F10: rich-text-table-grips.tsx) does both.
 //
 // Each gives focus back to the text when it's done.
 import { PlusIcon } from 'lucide-react';

package/dist/index.d.ts

@@ -25,7 +25,7 @@ export { FoundationProviders } from './components/app/foundation-providers.js';
 export { Markdown, type MarkdownProps } from './components/app/markdown.js';
 export { countTasks, toggleTaskAt, type TaskCount } from './lib/markdown-tasks.js';
 export { NotesOutline, type NotesOutlineProps } from './components/app/notes-outline.js';
-export type { HeadingFrom, HeadingLevel } from './components/app/prose-look.js';
+export type { HeadingFrom, HeadingLevel, TableLook } from './components/app/prose-look.js';
 export { MockModeBanner } from './components/app/mock-mode-banner.js';
 export { MultiChoice } from './components/app/multi-choice.js';
 export { MultiPick, type MultiPickOption, type MultiPickProps } from './components/app/multi-pick.js';