@tristan2828/ui-foundation 3.20.0 → 3.21.0

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

@@ -1,27 +1,60 @@
 // The rich-text editor's formats as people see them: each one's name, icon
 // and shortcut, in the groups the fixed toolbar shows. Shared by the
-// toolbars (rich-text-toolbar.tsx) and the slash menu
-// (rich-text-slash-menu.tsx).
-import { BoldIcon, CodeIcon, Heading1Icon, Heading2Icon, ItalicIcon, LinkIcon, ListChecksIcon, ListIcon, ListOrderedIcon, SquareCodeIcon, StrikethroughIcon, TextQuoteIcon, } from 'lucide-react';
+// toolbars (rich-text-toolbar.tsx), the slash menu
+// (rich-text-slash-menu.tsx) and the keys (rich-text-shortcuts.ts).
+//
+// Shortcuts are Notion's where Notion has one: Ctrl+Shift+1 to 6 and 8 for
+// blocks (Cmd+Option on a Mac, where Cmd+Shift+3 to 5 take screenshots),
+// written `Block+…` here; Mod+Shift+S strikes through. Milkdown's own
+// (Ctrl+Alt+1, Mod+Alt+X, Mod+Shift+B, …) still work.
+import { BoldIcon, CodeIcon, Heading1Icon, Heading2Icon, Heading3Icon, ItalicIcon, LinkIcon, ListChecksIcon, ListIcon, ListOrderedIcon, MinusIcon, SquareCodeIcon, StrikethroughIcon, TableIcon, TextQuoteIcon, } from 'lucide-react';
+import { CALLOUT_KINDS } from '../../lib/markdown-callout.js';
+import { CALLOUT_LOOK } from './prose-look.js';
 export const FORMAT_GROUPS = [
     [
         { id: 'bold', label: 'Bold', icon: BoldIcon, keys: 'Mod+B' },
         { id: 'italic', label: 'Italic', icon: ItalicIcon, keys: 'Mod+I' },
-        { id: 'strike', label: 'Strikethrough', icon: StrikethroughIcon, keys: 'Mod+Alt+X' },
+        { id: 'strike', label: 'Strikethrough', icon: StrikethroughIcon, keys: 'Mod+Shift+S' },
         { id: 'code', label: 'Code', icon: CodeIcon, keys: 'Mod+E' },
     ],
     [
-        { id: 'heading', label: 'Heading', icon: Heading1Icon, keys: 'Mod+Alt+1' },
-        { id: 'subheading', label: 'Subheading', icon: Heading2Icon, keys: 'Mod+Alt+2' },
+        { id: 'heading1', label: 'Heading 1', icon: Heading1Icon, keys: 'Block+1' },
+        { id: 'heading2', label: 'Heading 2', icon: Heading2Icon, keys: 'Block+2' },
+        { id: 'heading3', label: 'Heading 3', icon: Heading3Icon, keys: 'Block+3' },
     ],
     [
-        { id: 'bullets', label: 'Bulleted list', icon: ListIcon, keys: 'Mod+Alt+8' },
-        { id: 'numbers', label: 'Numbered list', icon: ListOrderedIcon, keys: 'Mod+Alt+7' },
-        { id: 'tasks', label: 'Task list', icon: ListChecksIcon, hint: 'tick an item: Mod+Shift+Enter' },
+        { id: 'tasks', label: 'Task list', icon: ListChecksIcon, keys: 'Block+4', hint: 'tick an item: Mod+Shift+Enter' },
+        { id: 'bullets', label: 'Bulleted list', icon: ListIcon, keys: 'Block+5' },
+        { id: 'numbers', label: 'Numbered list', icon: ListOrderedIcon, keys: 'Block+6' },
     ],
     [
         { id: 'quote', label: 'Quote', icon: TextQuoteIcon, keys: 'Mod+Shift+B' },
-        { id: 'codeBlock', label: 'Code block', icon: SquareCodeIcon, keys: 'Mod+Alt+C' },
+        { id: 'callout', label: 'Callout', icon: CALLOUT_LOOK.note.icon },
+        { 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: 'link', label: 'Link', icon: LinkIcon, keys: 'Mod+K' }],
 ];
+/** Every format by its id. */
+export const FORMAT_ITEMS = new Map(FORMAT_GROUPS.flat().map((item) => [item.id, item]));
+/**
+ * A callout of each kind but the default, for the slash menu: "Warning
+ * callout". Not on the toolbar (its Callout makes a note).
+ */
+export const CALLOUT_VARIANTS = CALLOUT_KINDS.filter((kind) => kind !== 'note').map((kind) => ({
+    id: `callout-${kind}`,
+    label: `${CALLOUT_LOOK[kind].label} callout`,
+    icon: CALLOUT_LOOK[kind].icon,
+}));
+/** Notion's block keys: the digit after Ctrl+Shift (Cmd+Option on a Mac), and its format. */
+export const BLOCK_KEYS = {
+    '0': 'text',
+    '1': 'heading1',
+    '2': 'heading2',
+    '3': 'heading3',
+    '4': 'tasks',
+    '5': 'bullets',
+    '6': 'numbers',
+    '8': 'codeBlock',
+};

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

@@ -1,6 +1,17 @@
-import type { EditorState, Transaction } from '@milkdown/kit/prose/state';
-export type FormatId = 'bold' | 'italic' | 'strike' | 'code' | 'heading' | 'subheading' | 'bullets' | 'numbers' | 'tasks' | 'quote' | 'codeBlock' | 'link';
+import { type Node as ProseNode, type Schema } from '@milkdown/kit/prose/model';
+import { type EditorState, type Transaction } from '@milkdown/kit/prose/state';
+import type { CalloutKind } from '../../lib/markdown-callout.js';
+export type FormatId = 'bold' | 'italic' | 'strike' | 'code' | 'text' | 'heading1' | 'heading2' | 'heading3' | 'bullets' | 'numbers' | 'tasks' | 'quote' | CalloutFormat | 'codeBlock' | 'divider' | 'table' | 'link';
+/** A callout of each kind: `callout` is a note, the default. */
+export type CalloutFormat = 'callout' | `callout-${Exclude<CalloutKind, 'note'>}`;
+/** The kind of callout a format makes, or null when it isn't one. */
+export declare function calloutKindOf(id: FormatId): CalloutKind | null;
 type Dispatch = (tr: Transaction) => void;
+/** The table the caret is in, and its position, or null. */
+export declare function tableAt(state: EditorState): {
+    node: ProseNode;
+    pos: number;
+} | null;
 /** Whether a format is on where the caret is. */
 export declare function formatOn(state: EditorState, id: FormatId): boolean;
 /**
@@ -9,4 +20,6 @@ export declare function formatOn(state: EditorState, id: FormatId): boolean;
  * toolbar opens the link box for it.
  */
 export declare function toggleFormat(state: EditorState, dispatch: Dispatch, id: FormatId): boolean;
+/** A new table: a header row and two rows, three columns, every cell empty and unaligned. */
+export declare function createTable(schema: Schema, rows?: number, columns?: number): ProseNode;
 export {};

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

@@ -1,9 +1,19 @@
 // What the rich-text editor's toolbar can do: each format, whether it's on
 // where the caret (or the selection) is, and how to turn it on or off.
-// Plain ProseMirror commands over Milkdown's schema (commonmark + gfm), so
-// a toolbar press is one undo step, the same as its keyboard shortcut.
+// Plain ProseMirror commands over Milkdown's schema (commonmark + gfm, and
+// the editor's callout node), so a toolbar press is one undo step, the
+// same as its keyboard shortcut.
 import { lift, setBlockType, toggleMark, wrapIn } from '@milkdown/kit/prose/commands';
+import { Fragment } from '@milkdown/kit/prose/model';
 import { liftListItem, wrapInList } from '@milkdown/kit/prose/schema-list';
+import { TextSelection } from '@milkdown/kit/prose/state';
+/** The kind of callout a format makes, or null when it isn't one. */
+export function calloutKindOf(id) {
+    if (id === 'callout')
+        return 'note';
+    return id.startsWith('callout-') ? id.slice('callout-'.length) : null;
+}
+const HEADING_LEVEL = { heading1: 1, heading2: 2, heading3: 3 };
 const MARKS = {
     bold: 'strong',
     italic: 'emphasis',
@@ -27,6 +37,10 @@ function ancestor(state, test) {
     }
     return null;
 }
+/** The table the caret is in, and its position, or null. */
+export function tableAt(state) {
+    return ancestor(state, (node) => node.type.name === 'table');
+}
 const isList = (node) => node.type.name === 'bullet_list' || node.type.name === 'ordered_list';
 /** Whether a format is on where the caret is. */
 export function formatOn(state, id) {
@@ -35,10 +49,19 @@ export function formatOn(state, id) {
     if (mark)
         return markOn(state, schema.marks[mark]);
     const parent = state.selection.$from.parent;
+    const level = HEADING_LEVEL[id];
+    if (level)
+        return parent.type.name === 'heading' && parent.attrs.level === level;
+    const kind = calloutKindOf(id);
+    if (kind)
+        return ancestor(state, (node) => node.type.name === 'callout')?.node.attrs.kind === kind;
     switch (id) {
-        case 'heading':
-        case 'subheading':
-            return parent.type.name === 'heading' && parent.attrs.level === (id === 'heading' ? 1 : 2);
+        case 'text':
+            return parent.type.name === 'paragraph' && !ancestor(state, (node) => isList(node) || node.type.name === 'blockquote');
+        case 'divider':
+            return false;
+        case 'table':
+            return tableAt(state) !== null;
         case 'codeBlock':
             return parent.type.name === 'code_block';
         case 'quote':
@@ -92,12 +115,19 @@ export function toggleFormat(state, dispatch, id) {
         return toggleMark(schema.marks[mark])(state, dispatch);
     const on = formatOn(state, id);
     const paragraph = schema.nodes.paragraph;
+    const level = HEADING_LEVEL[id];
+    if (level)
+        return on ? setBlockType(paragraph)(state, dispatch) : setBlockType(schema.nodes.heading, { level })(state, dispatch);
+    const kind = calloutKindOf(id);
+    if (kind)
+        return toggleCallout(state, dispatch, kind);
     switch (id) {
-        case 'heading':
-        case 'subheading':
-            return on
-                ? setBlockType(paragraph)(state, dispatch)
-                : setBlockType(schema.nodes.heading, { level: id === 'heading' ? 1 : 2 })(state, dispatch);
+        case 'text':
+            return toText(state, dispatch);
+        case 'divider':
+            return insertBlock(state, dispatch, schema.nodes.hr.create(), false);
+        case 'table':
+            return on ? false : insertBlock(state, dispatch, createTable(schema), true);
         case 'codeBlock':
             return on ? setBlockType(paragraph)(state, dispatch) : setBlockType(schema.nodes.code_block)(state, dispatch);
         case 'quote':
@@ -123,3 +153,62 @@ export function toggleFormat(state, dispatch, id) {
             return false;
     }
 }
+// The line the caret is in as plain text (Notion's "Text"): out of a
+// heading or code block, a list, a quote. False when it already is.
+function toText(state, dispatch) {
+    const { schema } = state;
+    const parent = state.selection.$from.parent;
+    if (parent.type !== schema.nodes.paragraph)
+        return setBlockType(schema.nodes.paragraph)(state, dispatch);
+    if (ancestor(state, isList))
+        return liftListItem(schema.nodes.list_item)(state, dispatch);
+    if (ancestor(state, (node) => node.type.name === 'blockquote' || node.type.name === 'callout'))
+        return lift(state, dispatch);
+    return false;
+}
+// A callout of `kind` where the caret is: around its block, or the
+// callout it's in turned into that kind, or (already that kind) the
+// callout taken away, its blocks kept.
+function toggleCallout(state, dispatch, kind) {
+    const callout = ancestor(state, (node) => node.type.name === 'callout');
+    if (!callout)
+        return wrapIn(state.schema.nodes.callout, { kind })(state, dispatch);
+    const { node, pos } = callout;
+    if (node.attrs.kind !== kind) {
+        dispatch(state.tr.setNodeMarkup(pos, undefined, { ...node.attrs, kind }));
+        return true;
+    }
+    const tr = state.tr.replaceWith(pos, pos + node.nodeSize, node.content);
+    dispatch(tr.setSelection(TextSelection.create(tr.doc, Math.max(0, state.selection.from - 1))).scrollIntoView());
+    return true;
+}
+/** A new table: a header row and two rows, three columns, every cell empty and unaligned. */
+export function createTable(schema, rows = 3, columns = 3) {
+    const row = (type, cell) => schema.nodes[type].create(null, Array.from({ length: columns }, () => schema.nodes[cell].createAndFill({ alignment: null })));
+    return schema.nodes.table.create(null, [
+        row('table_header_row', 'table_header'),
+        ...Array.from({ length: rows - 1 }, () => row('table_row', 'table_cell')),
+    ]);
+}
+// A block (a rule, a table) where the caret is: in place of an empty
+// line, else after the caret's block. A line to go on writing follows it
+// when nothing does. The caret goes into the block (`into`), or past it.
+function insertBlock(state, dispatch, block, into) {
+    const { $from } = state.selection;
+    if (tableAt(state) || !$from.parent.isTextblock || $from.parent.type.spec.code)
+        return false;
+    const depth = $from.depth;
+    const container = $from.node(depth - 1);
+    const index = $from.index(depth - 1);
+    const empty = $from.parent.content.size === 0;
+    const followed = index + 1 < container.childCount;
+    const content = Fragment.from(into && followed ? [block] : [block, state.schema.nodes.paragraph.create()]);
+    const at = empty ? index : index + 1;
+    if (!container.canReplace(at, empty ? index + 1 : at, content))
+        return false;
+    const from = empty ? $from.before(depth) : $from.after(depth);
+    const tr = state.tr.replaceWith(from, empty ? $from.after(depth) : from, content);
+    tr.setSelection(TextSelection.near(tr.doc.resolve(into ? from + 1 : from + block.nodeSize), 1));
+    dispatch(tr.scrollIntoView());
+    return true;
+}

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

@@ -0,0 +1,31 @@
+import type { Node as ProseNode } from '@milkdown/kit/prose/model';
+import type { NodeView } from '@milkdown/kit/prose/view';
+import { type CalloutKind } from '../../lib/markdown-callout.js';
+/** A slot a node view has, for the editor to render its widget into. */
+export type Widget = {
+    type: 'callout';
+    key: string;
+    slot: HTMLElement;
+    kind: CalloutKind;
+    getPos: () => number | undefined;
+} | {
+    type: 'table';
+    key: string;
+    slot: HTMLElement;
+    column: HTMLElement;
+    getPos: () => number | undefined;
+};
+/** Where node views tell the editor their slots came, changed and went. */
+export type WidgetRegistry = {
+    set: (widget: Widget) => void;
+    remove: (slot: HTMLElement) => void;
+};
+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.
+ */
+export declare function tableView(getPos: () => number | undefined, registry: WidgetRegistry): NodeView;

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

@@ -0,0 +1,79 @@
+import { cn } from 'cn';
+import { CALLOUT_KINDS } from '../../lib/markdown-callout.js';
+import { CALLOUT_BOX, CALLOUT_LOOK } from './prose-look.js';
+// Each slot's key for its portal, for as long as the node view lives.
+let made = 0;
+const nextKey = () => `widget-${++made}`;
+export function calloutKind(value) {
+    return CALLOUT_KINDS.includes(value) ? value : 'note';
+}
+function slot(className, tag = 'div') {
+    const element = document.createElement(tag);
+    element.contentEditable = 'false';
+    element.className = className;
+    return element;
+}
+// Mutations ProseMirror shouldn't read as edits: anything outside the
+// node's editable content (its slots, and the classes set here).
+function outside(contentDOM) {
+    return (mutation) => mutation.type !== 'selection' && !contentDOM.contains(mutation.target);
+}
+/** A callout: its kind's box, its icon (a widget: the kind's menu) beside its blocks. */
+export function calloutView(node, getPos, registry) {
+    const dom = document.createElement('div');
+    const icon = slot('flex h-5 shrink-0 items-center', 'span');
+    const contentDOM = document.createElement('div');
+    contentDOM.className = 'flex min-w-0 flex-1 flex-col gap-2';
+    dom.append(icon, contentDOM);
+    let current = node;
+    const key = nextKey();
+    const render = () => {
+        const kind = calloutKind(current.attrs.kind);
+        dom.dataset.callout = kind;
+        dom.className = cn(CALLOUT_BOX, CALLOUT_LOOK[kind].box);
+        registry.set({ type: 'callout', key, slot: icon, kind, getPos });
+    };
+    render();
+    return {
+        dom,
+        contentDOM,
+        update: (next) => {
+            if (next.type !== current.type)
+                return false;
+            current = next;
+            render();
+            return true;
+        },
+        stopEvent: (event) => icon.contains(event.target),
+        ignoreMutation: outside(contentDOM),
+        destroy: () => registry.remove(icon),
+    };
+}
+/**
+ * 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.
+ */
+export function tableView(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';
+    const scroll = document.createElement('div');
+    scroll.className = 'overflow-x-auto rounded-lg border border-border';
+    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 });
+    return {
+        dom,
+        contentDOM,
+        update: (next) => next.type.name === 'table',
+        stopEvent: (event) => row.contains(event.target) || column.contains(event.target),
+        ignoreMutation: outside(contentDOM),
+        destroy: () => registry.remove(row),
+    };
+}

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

@@ -0,0 +1,12 @@
+import type { EditorState, Transaction } from '@milkdown/kit/prose/state';
+export declare function isApple(): boolean;
+/** For `aria-keyshortcuts`, which names real keys: Meta on Apple, Control elsewhere. */
+export declare function ariaKeys(keys: string, apple: boolean): string;
+/** What a person reads: ⌘⌥X on Apple, Ctrl+Alt+X elsewhere. */
+export declare function shownKeys(keys: string, apple: boolean): string;
+/**
+ * Runs the shortcut a key press is, if it's one of these. True when it
+ * was (whether or not the format could apply where the caret is: the key
+ * is taken either way, so the browser's own never runs).
+ */
+export declare function handleShortcut(state: EditorState, dispatch: (tr: Transaction) => void, event: KeyboardEvent): boolean;

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

@@ -0,0 +1,52 @@
+import { BLOCK_KEYS } from './rich-text-format-items.js';
+import { toggleFormat } from './rich-text-formats.js';
+export function isApple() {
+    return typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
+}
+// Notion's block keys: Cmd+Option on Apple, Ctrl+Shift elsewhere.
+function withBlock(keys, apple) {
+    return keys.replace('Block', apple ? 'Mod+Alt' : 'Ctrl+Shift');
+}
+/** For `aria-keyshortcuts`, which names real keys: Meta on Apple, Control elsewhere. */
+export function ariaKeys(keys, apple) {
+    return withBlock(keys, apple)
+        .replace('Mod', apple ? 'Meta' : 'Control')
+        .replace('Ctrl', 'Control');
+}
+/** What a person reads: ⌘⌥X on Apple, Ctrl+Alt+X elsewhere. */
+export function shownKeys(keys, apple) {
+    const real = withBlock(keys, apple);
+    if (!apple)
+        return real.replace('Mod', 'Ctrl');
+    const symbols = { Mod: '⌘', Alt: '⌥', Shift: '⇧', Enter: '↵' };
+    return real
+        .split('+')
+        .map((part) => symbols[part] ?? part)
+        .join('');
+}
+// The format a key press asks for, or null when it's none of these.
+function shortcutFormat(event, apple) {
+    const digit = /^(?:Digit|Numpad)(\d)$/.exec(event.code)?.[1];
+    const ctrlShift = event.ctrlKey && event.shiftKey && !event.altKey && !event.metaKey;
+    // Ctrl+Alt on Windows is AltGr, which types characters ({ and [ on a
+    // German keyboard), so Cmd+Option counts on Apple only.
+    const cmdOption = apple && event.metaKey && event.altKey && !event.shiftKey && !event.ctrlKey;
+    if (digit && (ctrlShift || cmdOption))
+        return BLOCK_KEYS[digit] ?? null;
+    const mod = apple ? event.metaKey && !event.ctrlKey : event.ctrlKey && !event.metaKey;
+    if (mod && event.shiftKey && !event.altKey && event.code === 'KeyS')
+        return 'strike';
+    return null;
+}
+/**
+ * Runs the shortcut a key press is, if it's one of these. True when it
+ * was (whether or not the format could apply where the caret is: the key
+ * is taken either way, so the browser's own never runs).
+ */
+export function handleShortcut(state, dispatch, event) {
+    const format = shortcutFormat(event, isApple());
+    if (!format)
+        return false;
+    toggleFormat(state, dispatch, format);
+    return true;
+}

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

@@ -41,7 +41,10 @@ export function RichTextSlashMenu({ id, view, at, field, items, active, onHighli
     useLayoutEffect(() => {
         menu?.querySelector(`#${CSS.escape(slashOptionId(id, active))}`)?.scrollIntoView({ block: 'nearest' });
     }, [menu, id, active]);
-    return (_jsx("div", { ref: setMenu, id: id, role: "listbox", "aria-label": "Blocks", "data-slot": "rich-text-slash-menu", "data-side": placement?.side, style: placement ? { top: placement.top, left: placement.left } : undefined, className: cn('absolute z-50 flex max-h-72 w-56 flex-col gap-0.5 overflow-y-auto rounded-lg bg-popover p-1 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10', 'animate-in fade-in-0 zoom-in-95 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2', 
+    return (_jsx("div", { ref: setMenu, id: id, role: "listbox", "aria-label": "Blocks", "data-slot": "rich-text-slash-menu", "data-side": placement?.side, 
+        // Tall enough for every block, but a filtered list can still scroll:
+        // focusable for axe (scrollable-region-focusable), never by a press.
+        tabIndex: -1, onMouseDown: (event) => event.preventDefault(), style: placement ? { top: placement.top, left: placement.left } : undefined, className: cn('absolute z-50 flex max-h-96 w-56 flex-col gap-0.5 overflow-y-auto rounded-lg bg-popover p-1 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10', 'animate-in fade-in-0 zoom-in-95 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2', 
         // Measured before it's seen, so it never shows in the wrong place.
         !placement && 'invisible'), children: items.map((item, index) => {
             const Icon = item.icon;

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

@@ -1,21 +1,24 @@
 // The slash menu's logic: "/" typed at the start of a top-level paragraph
-// opens it, what's typed after the "/" filters it, and picking an item
-// turns the paragraph into that block, the "/…" gone. The menu itself:
-// rich-text-slash-menu.tsx; its keys and ARIA: milkdown-editor.tsx.
+// (or one in a callout) opens it, what's typed after the "/" filters it,
+// and picking an item turns the paragraph into that block, the "/…" gone.
+// The menu itself: rich-text-slash-menu.tsx; its keys and ARIA:
+// milkdown-editor.tsx.
 //
 // Only a "/" typed there opens it: one already in the text (a path,
 // `/usr/bin`) never does, and neither does a "/" mid-line or inside a
 // list, a quote or a code block.
 import { Plugin, PluginKey } from '@milkdown/kit/prose/state';
-import { FORMAT_GROUPS } from './rich-text-format-items.js';
+import { CALLOUT_VARIANTS, FORMAT_GROUPS } from './rich-text-format-items.js';
 import { toggleFormat } from './rich-text-formats.js';
 const slashKey = new PluginKey('rich-text-slash');
 // Longer than any item's name: past it, the person is writing, not picking.
 const MAX_QUERY = 24;
-// A top-level paragraph's start: where a "/" opens the menu.
+// A top-level paragraph's start, or one's in a callout (where picking a
+// kind of callout changes the callout's): where a "/" opens the menu.
 function atParagraphStart(state, pos) {
     const $pos = state.doc.resolve(pos);
-    return $pos.depth === 1 && $pos.parent.type.name === 'paragraph' && $pos.parentOffset === 0;
+    const placed = $pos.depth === 1 || ($pos.depth === 2 && $pos.node(1).type.name === 'callout');
+    return placed && $pos.parent.type.name === 'paragraph' && $pos.parentOffset === 0;
 }
 // The menu's span, if the "/" at `from` still opens it: the caret after it
 // in the same paragraph, nothing selected, and what follows the "/" plain
@@ -76,22 +79,35 @@ export function slashPlugin() {
 }
 // What each block answers to besides its name.
 const KEYWORDS = {
-    heading: ['h1', 'title'],
-    subheading: ['h2'],
+    heading1: ['h1', 'title', 'heading'],
+    heading2: ['h2', 'subheading', 'heading'],
+    heading3: ['h3', 'heading'],
     bullets: ['ul', 'unordered', 'bullet'],
     numbers: ['ol', 'ordered', 'number'],
     tasks: ['todo', 'checkbox', 'checklist'],
     quote: ['blockquote'],
+    callout: ['note', 'info', 'alert', 'box'],
+    'callout-tip': ['callout', 'hint', 'idea', 'alert'],
+    'callout-important': ['callout', 'alert'],
+    'callout-warning': ['callout', 'alert', 'warn'],
+    'callout-caution': ['callout', 'alert', 'danger'],
     codeBlock: ['pre'],
+    divider: ['hr', 'rule', 'line', 'separator', '---'],
+    table: ['grid', 'columns'],
 };
-// The menu's items: the blocks, in the toolbar's order.
+// The menu's items: the blocks, in the toolbar's order. The kinds of
+// callout past the default only once something's typed ("/warn"), so
+// the list "/" opens with stays short.
 const BLOCKS = FORMAT_GROUPS.flat().filter((item) => KEYWORDS[item.id]);
+const TYPED_ONLY = CALLOUT_VARIANTS;
 /** The blocks matching what's typed after the "/": in the name, or the start of a keyword. */
 export function slashItems(query) {
     const typed = query.trim().toLowerCase();
     if (!typed)
         return BLOCKS;
-    return BLOCKS.filter((item) => item.label.toLowerCase().includes(typed) || KEYWORDS[item.id].some((word) => word.startsWith(typed)));
+    const blocks = [...BLOCKS];
+    blocks.splice(BLOCKS.findIndex((item) => item.id === 'callout') + 1, 0, ...TYPED_ONLY);
+    return blocks.filter((item) => item.label.toLowerCase().includes(typed) || KEYWORDS[item.id].some((word) => word.startsWith(typed)));
 }
 /**
  * Picks an item: the "/…" goes and the paragraph becomes that block, in one

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

@@ -0,0 +1,20 @@
+import { type KeyboardEvent, type Ref } from 'react';
+import type { EditorState } from '@milkdown/kit/prose/state';
+import { type TableAction } from './rich-text-table.js';
+export interface RichTextTableMenuProps {
+    state: EditorState | null;
+    readOnly: boolean;
+    /** The toolbar's roving tab stop: 0 for the one Tab reaches. */
+    tabIndex: number;
+    onFocus: () => void;
+    /** The toolbar's arrow keys. */
+    onKeyDown: (event: KeyboardEvent) => void;
+    /** Insert table picked. */
+    onInsert: () => void;
+    /** A row, column or alignment item picked. */
+    onAction: (action: TableAction) => void;
+    /** The editable element, where focus goes once an item is picked. */
+    text: () => HTMLElement | null;
+    ref?: Ref<HTMLButtonElement>;
+}
+export declare function RichTextTableMenu({ state, readOnly, tabIndex, onFocus, onKeyDown, onInsert, onAction, text, ref, }: RichTextTableMenuProps): import("react").JSX.Element;

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

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The fixed toolbar's Table menu: a table inserted where the caret is, or,
+// in a table, its rows, columns and alignment (rich-text-table.ts). A menu
+// button in the toolbar's row (one of its tab stops' places, moved to with
+// the arrow keys like the rest); the menu itself is Base UI's (ARIA's menu
+// pattern). Picking an item gives focus back to the text, the caret where
+// it was (the editor keeps its selection while the menu has focus); Esc
+// gives it back to the button, as a menu button's does.
+import { useRef } from 'react';
+import { AlignCenterIcon, AlignLeftIcon, AlignRightIcon, BetweenHorizontalEndIcon, BetweenHorizontalStartIcon, BetweenVerticalEndIcon, BetweenVerticalStartIcon, ChevronDownIcon, TableIcon, Trash2Icon, } from 'lucide-react';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '../ui/dropdown-menu.js';
+import { toggleVariants } from '../ui/toggle.js';
+import { tableAt } from './rich-text-formats.js';
+import { columnAlignment, tableActionEnabled } from './rich-text-table.js';
+const ROWS = [
+    { action: 'rowAbove', label: 'Insert row above', icon: BetweenHorizontalStartIcon },
+    { action: 'rowBelow', label: 'Insert row below', icon: BetweenHorizontalEndIcon },
+    { action: 'columnLeft', label: 'Insert column left', icon: BetweenVerticalStartIcon },
+    { action: 'columnRight', label: 'Insert column right', icon: BetweenVerticalEndIcon },
+];
+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 },
+];
+const DELETES = [
+    { action: 'deleteRow', label: 'Delete row', icon: Trash2Icon },
+    { action: 'deleteColumn', label: 'Delete column', icon: Trash2Icon },
+    { action: 'deleteTable', label: 'Delete table', icon: Trash2Icon },
+];
+export function RichTextTableMenu({ state, readOnly, tabIndex, onFocus, onKeyDown, onInsert, onAction, text, ref, }) {
+    const inTable = state ? tableAt(state) !== null : false;
+    const enabled = (action) => (state ? tableActionEnabled(state, action) : false);
+    // Whether the menu is closing because an item was picked.
+    const picked = useRef(false);
+    const run = (action) => {
+        picked.current = true;
+        action();
+    };
+    const finalFocus = () => {
+        const toText = picked.current;
+        picked.current = false;
+        return toText ? (text() ?? true) : true;
+    };
+    const item = ({ action, label, icon: Icon }) => (_jsxs(DropdownMenuItem, { disabled: !enabled(action), onClick: () => run(() => onAction(action)), children: [_jsx(Icon, { "aria-hidden": "true" }), label] }, action));
+    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { ref: ref, "aria-label": "Table", disabled: readOnly, tabIndex: tabIndex, "data-active": inTable || undefined, 
+                // Shaped like the toolbar's toggles: on while the caret is in a table.
+                className: toggleVariants({ size: 'sm', className: 'gap-0.5 px-1.5 data-active:bg-muted data-active:text-foreground' }), onFocus: onFocus, onKeyDown: onKeyDown, children: [_jsx(TableIcon, { "aria-hidden": "true" }), _jsx(ChevronDownIcon, { "aria-hidden": "true", className: "size-3" })] }), _jsxs(DropdownMenuContent, { className: "w-56", finalFocus: finalFocus, children: [_jsxs(DropdownMenuItem, { disabled: inTable, onClick: () => run(onInsert), children: [_jsx(TableIcon, { "aria-hidden": "true" }), "Insert table"] }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuGroup, { children: ROWS.map(item) }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: "Align column" }), _jsx(DropdownMenuRadioGroup, { value: state && inTable ? columnAlignment(state) : null, onValueChange: (value) => {
+                                    const alignment = ALIGNMENTS.find((one) => one.value === value);
+                                    if (alignment)
+                                        run(() => onAction(alignment.action));
+                                }, children: ALIGNMENTS.map(({ value, label, icon: Icon }) => (_jsxs(DropdownMenuRadioItem, { value: value, disabled: !inTable, closeOnClick: true, children: [_jsx(Icon, { "aria-hidden": "true" }), label] }, value))) })] }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuGroup, { children: DELETES.map(item) })] })] }));
+}

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

@@ -0,0 +1,19 @@
+import { type EditorState, type Transaction } from '@milkdown/kit/prose/state';
+type Dispatch = (tr: Transaction) => void;
+export type TableAction = 'rowAbove' | 'rowBelow' | 'columnLeft' | 'columnRight' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'deleteRow' | 'deleteColumn' | 'deleteTable';
+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;
+/** Whether an action can apply where the caret is. */
+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;
+/**
+ * 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
+ * the key.
+ */
+export declare function handleTableKey(state: EditorState, dispatch: Dispatch, event: KeyboardEvent): boolean;
+/** A row added at the table's end, the caret into its first cell (the "Add a row" bar). */
+export declare function addRowAtEnd(state: EditorState, dispatch: Dispatch): boolean;
+export {};