@estiva-app/ui 0.66.0 → 0.67.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.66.0",
+  "version": "0.67.0",
   "description": "Estiva's design tokens (the contract) and a small set of primitives (a convenience) for every Estiva app.",
   "type": "module",
   "license": "MIT",
@@ -136,6 +136,7 @@
     "@tiptap/core": "^3.31.3",
     "@tiptap/extension-code-block-lowlight": "^3.31.3",
     "@tiptap/extension-mention": "^3.31.3",
+    "@tiptap/extension-table": "^3.31.3",
     "@tiptap/pm": "^3.31.3",
     "@tiptap/react": "^3.31.3",
     "@tiptap/starter-kit": "^3.31.3",

package/registry.json

@@ -4,9 +4,9 @@
     "kind": "package",
     "repo": "estiva-ui",
     "package": "@estiva-app/ui",
-    "packageVersion": "0.66.0",
-    "exports": 144,
-    "typeExports": 145,
+    "packageVersion": "0.67.0",
+    "exports": 149,
+    "typeExports": 146,
     "files": null
   },
   "storybook": {
@@ -15,6 +15,44 @@
     "devUrl": "http://localhost:6008"
   },
   "entries": [
+    {
+      "name": "appendTableColumn",
+      "repo": "estiva-ui",
+      "kind": "helper",
+      "importPath": "@estiva-app/ui/editor",
+      "sourceFile": "src/EditorTableControls.tsx",
+      "purpose": "A column after the last one: the ➕ right of the table.",
+      "purposeFrom": "comment",
+      "props": [],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "primitives-editortablecontrols--docs",
+      "storyId": "primitives-editortablecontrols--default",
+      "docPage": null,
+      "app": null,
+      "looks": []
+    },
+    {
+      "name": "appendTableRow",
+      "repo": "estiva-ui",
+      "kind": "helper",
+      "importPath": "@estiva-app/ui/editor",
+      "sourceFile": "src/EditorTableControls.tsx",
+      "purpose": "A row after the last one: the ➕ under the table.",
+      "purposeFrom": "comment",
+      "props": [],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "primitives-editortablecontrols--docs",
+      "storyId": "primitives-editortablecontrols--default",
+      "docPage": null,
+      "app": null,
+      "looks": []
+    },
     {
       "name": "applyFormat",
       "repo": "estiva-ui",
@@ -1963,6 +2001,44 @@
       "app": null,
       "looks": []
     },
+    {
+      "name": "deleteTableColumn",
+      "repo": "estiva-ui",
+      "kind": "helper",
+      "importPath": "@estiva-app/ui/editor",
+      "sourceFile": "src/EditorTableControls.tsx",
+      "purpose": "The same for a column: the last one deletes the table.",
+      "purposeFrom": "comment",
+      "props": [],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "primitives-editortablecontrols--docs",
+      "storyId": "primitives-editortablecontrols--default",
+      "docPage": null,
+      "app": null,
+      "looks": []
+    },
+    {
+      "name": "deleteTableRow",
+      "repo": "estiva-ui",
+      "kind": "helper",
+      "importPath": "@estiva-app/ui/editor",
+      "sourceFile": "src/EditorTableControls.tsx",
+      "purpose": "The cell's row, or the whole table when it is its only one: a table holds at least one row (prosemirror-tables refuses to delete it).",
+      "purposeFrom": "comment",
+      "props": [],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "primitives-editortablecontrols--docs",
+      "storyId": "primitives-editortablecontrols--default",
+      "docPage": null,
+      "app": null,
+      "looks": []
+    },
     {
       "name": "DialogShell",
       "repo": "estiva-ui",
@@ -2292,6 +2368,47 @@
       "app": null,
       "looks": []
     },
+    {
+      "name": "EditorTableControls",
+      "repo": "estiva-ui",
+      "kind": "component",
+      "importPath": "@estiva-app/ui/editor",
+      "sourceFile": "src/EditorTableControls.tsx",
+      "purpose": "A table's own controls in a Tiptap editor: point at a cell for a handle on its row and on its column, and a ➕ bar under the table and right of it.",
+      "purposeFrom": "page",
+      "props": [
+        {
+          "name": "editor",
+          "takes": "Editor | null",
+          "required": true,
+          "note": "The editor, with TableKit (`@tiptap/extension-table`) in its extensions."
+        },
+        {
+          "name": "children",
+          "takes": "anything",
+          "required": true,
+          "note": "The `EditorContent`."
+        },
+        {
+          "name": "className",
+          "takes": "text",
+          "required": false,
+          "note": null
+        }
+      ],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "primitives-editortablecontrols--docs",
+      "storyId": "primitives-editortablecontrols--default",
+      "docPage": "src/EditorTableControls.mdx",
+      "app": null,
+      "looks": [
+        "rounded-lg border border-border-default bg-bg-elevated shadow-lg shadow-none -translate-x-1/2 -translate-y-1/2",
+        "rounded-lg border border-border-default bg-bg-elevated shadow-lg shadow-none"
+      ]
+    },
     {
       "name": "EmptyState",
       "repo": "estiva-ui",
@@ -4240,6 +4357,12 @@
           "required": false,
           "note": "The ⋮'s accessible name and tooltip. Default \"More options for {label}\"."
         },
+        {
+          "name": "action",
+          "takes": "SectionAction",
+          "required": false,
+          "note": "One button beside the ⋮, shown with it: any 16px icon, its tooltip and its handler — a `SectionHeader` action's shape."
+        },
         {
           "name": "hint",
           "takes": "anything",
@@ -5512,7 +5635,7 @@
         "[&_:not(pre)>code]:rounded-sm [&_:not(pre)>code]:bg-bg-code [&_:not(pre)>code]:px-1 [&_:not(pre)>code]:py-0.5 [&_:not(pre)>code]:border [&_:not(pre)>code]:border-border-default [&_code]:font-mono [&_code]:text-[0.85em] [&_code]:text-text-primary",
         "[&_pre>code]:text-[1em] [&_pre]:whitespace-pre-wrap [&_pre]:break-words [&_pre]:rounded-md [&_pre]:bg-bg-code [&_pre]:px-3 [&_pre]:py-2.5 [&_pre]:font-mono [&_pre]:text-[0.85em] [&_pre]:leading-relaxed [&_pre]:text-text-primary",
         "[&_:is(.hljs-keyword,.hljs-doctag,.hljs-type,.hljs-template-tag,.hljs-template-variable)]:text-syntax-keyword [&_.hljs-title]:text-syntax-function [&_:is(.hljs-number,.hljs-literal,.hljs-attr,.hljs-attribute,.hljs-meta,.hljs-variable,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id)]:text-syntax-constant [&_:is(.hljs-string,.hljs-regexp)]:text-syntax-string [&_:is(.hljs-built_in,.hljs-symbol)]:text-syntax-variable [&_.hljs-comment]:text-syntax-comment [&_:is(.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo)]:text-syntax-tag",
-        "[&_:is(th,td)>p]:m-0 [&_:is(th,td)]:border [&_:is(th,td)]:border-border-default [&_:is(th,td)]:px-2 [&_:is(th,td)]:py-1 [&_:is(th,td)]:text-left [&_:is(th,td)]:align-top [&_table]:w-full [&_table]:border-collapse [&_th]:bg-bg-code [&_th]:font-medium [&_th]:text-text-primary",
+        "[&_:is(th,td)>p]:m-0 [&_:is(th,td)]:border [&_:is(th,td)]:border-border-default [&_:is(th,td)]:px-2 [&_:is(th,td)]:py-1 [&_:is(th,td)]:text-left [&_:is(th,td)]:align-top [&_table]:my-2 [&_table]:w-full [&_table]:border-collapse [&_th]:bg-bg-code [&_th]:font-medium [&_th]:text-text-primary",
         "[&_em]:italic [&_strong]:font-semibold [&_strong]:text-text-primary [&_u]:underline [&_u]:decoration-text-muted [&_u]:underline-offset-2",
         "text-body-2 leading-normal [&>:is(h2,h3)]:text-body-2 [&>:is(h2,h3)]:font-semibold [&>h1]:text-h4",
         "text-caption leading-snug [&>:is(h1,h2,h3)]:mb-0.5 [&>:is(h1,h2,h3)]:mt-1.5 [&>:is(h1,h2,h3)+:is(h1,h2,h3)]:mt-1 [&>:is(h1,h2,h3):last-child]:mb-0 [&>:is(h2,h3)]:text-caption [&>:is(h2,h3)]:font-semibold [&>h1]:text-body-2 [&>h1]:font-semibold"

package/src/EditorTableControls.mdx

@@ -0,0 +1,78 @@
+import { Meta, Canvas } from '@storybook/addon-docs/blocks'
+import * as EditorTableControlsStories from './EditorTableControls.stories'
+
+<Meta of={EditorTableControlsStories} />
+
+# EditorTableControls
+
+A table's own controls in a Tiptap editor: point at a cell for a handle on its
+row and on its column, and a ➕ bar under the table and right of it.
+
+<Canvas of={EditorTableControlsStories.Default} />
+
+## When
+
+- **An editor whose documents hold tables** — with TableKit
+  (`@tiptap/extension-table`) in its extensions. Point at a cell: the row's
+  handle sits on the table's left edge, the column's on its top edge; each
+  opens Insert (above and below, or left and right), Delete, and Delete
+  table. A header row offers nothing above it, and deleting it makes the next
+  row the header, so a table always opens with its header. From the last row, a ➕ under the table adds a row after it; from the
+  last column, a ➕ right of the table adds a column after it.
+- **Not editable**: nothing is drawn.
+
+## When not
+
+- Moving, duplicating or deleting the table as one block → **EditorBlockHandle**,
+  whose handle stays the table's, in the gutter. Wrap this inside it.
+- A table being read, with no editor → **RichText** draws it; there is nothing
+  to change.
+
+## How
+
+```tsx
+import { EditorContent, useEditor } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import { TableKit } from '@tiptap/extension-table'
+import { BlockId, EditorBlockHandle, EditorTableControls } from '@estiva-app/ui/editor'
+
+const editor = useEditor({ extensions: [StarterKit, TableKit.configure({ table: { resizable: false } }), BlockId] })
+
+<EditorBlockHandle editor={editor}>
+  <EditorTableControls editor={editor}>
+    <EditorContent editor={editor} />
+  </EditorTableControls>
+</EditorBlockHandle>
+```
+
+- **Every control leaves the editor focused**, in the cell it acted on, as the
+  block menu does. An editor that saves when the person leaves it saves these
+  the same way.
+- A table cannot be left with no row or no column: **deleting its only row, or
+  its only column, deletes the table**.
+- The column ➕ hangs 16px right of the table; give the editor that room, as
+  the block handle has its 28px on the left. The row ➕ lies 16px over the top
+  of the block under the table, only while the pointer is on the last row.
+- `appendTableRow`, `appendTableColumn`, `deleteTableRow` and
+  `deleteTableColumn` are the controls' own actions, for a caller that offers
+  them elsewhere (a shortcut, a test).
+
+## What it owns
+
+It does these by itself. Write none of them around it.
+
+| It does | So you never write | Refused when written by hand |
+|---|---|---|
+| Runs TableKit's own commands with the caret in the cell pointed at | a selection before `addRowAfter` | |
+| Gives new rows and cells fresh ids, the old ones keeping theirs (`BlockId` decides) | an id for a new cell | |
+| Turns a delete that would leave the table empty into a delete of the table | a check of the table's size | |
+
+## Keys
+
+| Input | What happens |
+|---|---|
+| Tab, in the last cell | adds a row and moves into it — TableKit's own |
+| Tab / Shift+Tab, in a cell | to the next / previous cell — TableKit's own |
+
+The handles and the ➕ bars are for the pointer: there is no hover on a touch
+screen, and nothing here draws them there yet.

package/src/EditorTableControls.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { EditorContent, useEditor } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import { TableKit } from '@tiptap/extension-table'
+import { BlockId } from './BlockNodes'
+import { EditorBlockHandle, blockDropCursor } from './EditorBlockHandle'
+import { EditorTableControls } from './EditorTableControls'
+import { richTextClassName } from './RichText'
+
+/**
+ * A table's controls in an editor. Point at a cell: a handle on its row's left
+ * edge and on its column's top edge, and a ➕ bar under the table and right of
+ * it.
+ */
+const meta = {
+  title: 'Primitives/EditorTableControls',
+  // The block handle sits 28px left of the content, and the column ➕ 16px right of the table.
+  parameters: { layout: 'padded' },
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+const text = (t: string) => [{ type: 'paragraph', content: [{ type: 'text', text: t }] }]
+const row = (type: 'tableHeader' | 'tableCell', ...cells: string[]) => ({ type: 'tableRow', content: cells.map((c) => ({ type, content: text(c) })) })
+
+const DOCUMENT = {
+  type: 'doc',
+  content: [
+    { type: 'paragraph', content: [{ type: 'text', text: 'Point at a cell for its row and column handles.' }] },
+    {
+      type: 'table',
+      content: [row('tableHeader', 'Label', 'Label', 'Label'), row('tableCell', 'Item one', 'Value', 'Value'), row('tableCell', 'Item two', 'Value', 'Value')],
+    },
+    { type: 'paragraph', content: [{ type: 'text', text: 'The bar under the table adds a row; the one right of it, a column.' }] },
+  ],
+}
+
+function Editing({ editable }: { editable: boolean }) {
+  const editor = useEditor({
+    extensions: [StarterKit.configure({ dropcursor: blockDropCursor }), TableKit.configure({ table: { resizable: false } }), BlockId],
+    content: DOCUMENT,
+    editable,
+    editorProps: { attributes: { class: richTextClassName('default', 'outline-none'), 'aria-label': 'Text' } },
+  })
+  return (
+    <EditorBlockHandle editor={editor} className="ml-8 max-w-[560px]">
+      <EditorTableControls editor={editor}>
+        <EditorContent editor={editor} />
+      </EditorTableControls>
+    </EditorBlockHandle>
+  )
+}
+
+/** Point at a cell; press a handle for Insert and Delete, or a ➕ bar to add a row or a column at the end. */
+export const Default: Story = {
+  render: () => <Editing editable />,
+}
+
+/** An editor that is not editable: no controls. */
+export const NotEditable: Story = {
+  render: () => <Editing editable={false} />,
+}

package/src/EditorTableControls.test.tsx

@@ -0,0 +1,288 @@
+// @vitest-environment jsdom
+/**
+ * A table's controls in an editor (RIC-21): what each row of the row and column
+ * menus and each ➕ bar does to the document, that new rows and cells get ids of
+ * their own, and that deleting a table's only row or column deletes the table.
+ * Where the controls sit is measured in real Chromium (the PR says how): jsdom
+ * lays nothing out.
+ */
+import { afterEach, beforeAll, describe, expect, it } from 'vitest'
+import { act, cleanup, fireEvent, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Editor } from '@tiptap/core'
+import StarterKit from '@tiptap/starter-kit'
+import { TableKit } from '@tiptap/extension-table'
+import { BlockId } from './BlockNodes'
+import { EditorTableControls, appendTableColumn, appendTableRow, deleteTableColumn, deleteTableRow } from './EditorTableControls'
+
+type Json = { type: string; attrs?: Record<string, unknown>; content?: Json[]; text?: string }
+
+const cell = (type: 'tableHeader' | 'tableCell', text: string): Json => ({ type, content: [{ type: 'paragraph', content: [{ type: 'text', text }] }] })
+const row = (type: 'tableHeader' | 'tableCell', ...texts: string[]): Json => ({ type: 'tableRow', content: texts.map((t) => cell(type, t)) })
+const table = (...rows: Json[]): object => ({ type: 'doc', content: [{ type: 'table', attrs: { blockId: 't1' }, content: rows }, { type: 'paragraph', content: [{ type: 'text', text: 'after' }] }] })
+const THREE = table(row('tableHeader', 'A', 'B', 'C'), row('tableCell', 'a1', 'b1', 'c1'), row('tableCell', 'a2', 'b2', 'c2'))
+
+const editors: Editor[] = []
+function editor(content: object = THREE, editable = true) {
+  const e = new Editor({ extensions: [StarterKit, TableKit.configure({ table: { resizable: false } }), BlockId], content, editable })
+  editors.push(e)
+  return e
+}
+
+/** The table as text, a row a line: `#` before a header cell. */
+function shape(e: Editor): string[] {
+  const t = (e.getJSON().content as Json[]).find((b) => b.type === 'table')
+  if (!t) return []
+  const text = (n: Json): string => n.text ?? (n.content ?? []).map(text).join('')
+  return (t.content ?? []).map((r) => (r.content ?? []).map((c) => (c.type === 'tableHeader' ? '#' : '') + text(c)).join('|'))
+}
+const cellOf = (text: string) => screen.getByText(text).closest('td, th') as HTMLTableCellElement
+const tableOf = (e: Editor) => e.view.dom.querySelector('table') as HTMLTableElement
+
+/** Every id under the table: rows and cells, each its own. */
+function ids(e: Editor): unknown[] {
+  const out: unknown[] = []
+  e.state.doc.descendants((n) => {
+    if (n.type.name.startsWith('table')) out.push(n.attrs.blockId)
+  })
+  return out
+}
+
+/** Press and release, as BlockHandle's test does: under jsdom `user.click` left a Base UI menu shut. */
+async function press(user: ReturnType<typeof userEvent.setup>, target: HTMLElement) {
+  await user.pointer({ keys: '[MouseLeft>]', target })
+  await user.pointer({ keys: '[/MouseLeft]', target })
+  await screen.findByRole('menu')
+}
+/**
+ * A click on a ➕ bar, with no pointer move before it. user-event moves the
+ * pointer first, and jsdom, with no layout, reports that move as leaving the
+ * frame (a `mouseleave` with no `relatedTarget`), which takes the bar away
+ * before its click. In Chromium the pointer reaches the bar from the cell (the
+ * PR says how).
+ */
+const tap = (target: HTMLElement) => act(async () => void fireEvent.click(target))
+/** The editor takes the focus back a frame later and measures the caret then. */
+const frame = () => act(() => new Promise<void>((done) => requestAnimationFrame(() => done())))
+/**
+ * `BlockId` gives the blocks their ids on the editor's `create`, a tick after it
+ * is made — which redraws every cell, so a cell found before it is no longer the
+ * editor's. Wait for it.
+ */
+const created = () => act(() => new Promise<void>((done) => setTimeout(done, 0)))
+
+beforeAll(() => {
+  const none = { top: 0, bottom: 0, left: 0, right: 0, width: 0, height: 0, x: 0, y: 0, toJSON: () => ({}) }
+  Range.prototype.getClientRects = () => [] as unknown as DOMRectList
+  Range.prototype.getBoundingClientRect = () => none as DOMRect
+})
+
+afterEach(() => {
+  cleanup()
+  for (const e of editors.splice(0)) e.destroy()
+})
+
+async function mount(e: Editor) {
+  const { EditorContent } = await import('@tiptap/react')
+  render(
+    <EditorTableControls editor={e}>
+      <EditorContent editor={e} />
+    </EditorTableControls>,
+  )
+  await created()
+  return userEvent.setup()
+}
+
+describe('the actions', () => {
+  it('a ➕ under the table adds an empty row after the last, of cells', () => {
+    const e = editor()
+    expect(appendTableRow(e, tableOf(e))).toBe(true)
+    expect(shape(e)).toEqual(['#A|#B|#C', 'a1|b1|c1', 'a2|b2|c2', '||'])
+  })
+
+  it('a ➕ right of the table adds an empty column after the last', () => {
+    const e = editor()
+    expect(appendTableColumn(e, tableOf(e))).toBe(true)
+    expect(shape(e)).toEqual(['#A|#B|#C|#', 'a1|b1|c1|', 'a2|b2|c2|'])
+  })
+
+  it('new rows and cells get ids of their own; the old ones keep theirs', async () => {
+    const e = editor()
+    await created()
+    const before = ids(e)
+    expect(before.every((id) => typeof id === 'string')).toBe(true)
+    appendTableRow(e, tableOf(e))
+    appendTableColumn(e, tableOf(e))
+    const after = ids(e)
+    expect(after.every((id) => typeof id === 'string' && id.length > 0)).toBe(true)
+    expect(new Set(after).size).toBe(after.length)
+    expect(before.every((id) => after.includes(id))).toBe(true)
+  })
+
+  it('deleting a row or a column leaves the rest as they were', async () => {
+    const e = editor()
+    await mount(e)
+    expect(deleteTableRow(e, cellOf('a1'))).toBe(true)
+    expect(deleteTableColumn(e, cellOf('B'))).toBe(true)
+    expect(shape(e)).toEqual(['#A|#C', 'a2|c2'])
+  })
+
+  it('Tab in the last cell adds a row; in another, moves to the next cell (TableKit’s own)', () => {
+    const e = editor()
+    const textAt = (text: string) => {
+      let at = -1
+      e.state.doc.descendants((n, pos) => {
+        if (n.isText && n.text === text) at = pos
+      })
+      return at
+    }
+    // The caret's row in the table, and its cell in the row.
+    const at = () => [e.state.selection.$from.index(1), e.state.selection.$from.index(2)]
+    // The key as the view gets it: `commands.keyboardShortcut` runs inside a command, whose own transaction then puts the selection back.
+    const press = (key: string, shiftKey = false) => e.view.someProp('handleKeyDown', (f) => f(e.view, new KeyboardEvent('keydown', { key, shiftKey })))
+    e.commands.setTextSelection(textAt('a1'))
+    press('Tab')
+    expect(at()).toEqual([1, 1])
+    press('Tab', true)
+    expect(at()).toEqual([1, 0])
+    e.commands.setTextSelection(textAt('c2'))
+    press('Tab')
+    expect(shape(e)).toEqual(['#A|#B|#C', 'a1|b1|c1', 'a2|b2|c2', '||'])
+    expect(at()).toEqual([3, 0])
+  })
+
+  it('deleting the only row, or the only column, deletes the table', async () => {
+    const one = editor(table(row('tableCell', 'x', 'y')))
+    await mount(one)
+    expect(deleteTableRow(one, cellOf('x'))).toBe(true)
+    expect(shape(one)).toEqual([])
+    cleanup()
+    const narrow = editor(table(row('tableCell', 'p'), row('tableCell', 'q')))
+    await mount(narrow)
+    expect(deleteTableColumn(narrow, cellOf('q'))).toBe(true)
+    expect(shape(narrow)).toEqual([])
+    expect(narrow.getText()).toContain('after')
+  })
+})
+
+describe('EditorTableControls', () => {
+  it('draws nothing until the pointer is on a cell', async () => {
+    const user = await mount(editor())
+    expect(screen.queryByRole('button', { name: 'Row menu' })).toBeNull()
+    await act(async () => user.hover(screen.getByText('after')))
+    expect(screen.queryByRole('button', { name: 'Row menu' })).toBeNull()
+    await act(async () => user.hover(screen.getByText('b1')))
+    expect(screen.getByRole('button', { name: 'Row menu' })).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Column menu' })).toBeTruthy()
+    expect(screen.queryByRole('button', { name: 'Add row' })).toBeNull()
+    expect(screen.queryByRole('button', { name: 'Add column' })).toBeNull()
+  })
+
+  it('offers the ➕ under the table from the last row, and the one right of it from the last column', async () => {
+    const user = await mount(editor())
+    await act(async () => user.hover(screen.getByText('b2')))
+    expect(screen.getByRole('button', { name: 'Add row' })).toBeTruthy()
+    expect(screen.queryByRole('button', { name: 'Add column' })).toBeNull()
+    await act(async () => user.hover(screen.getByText('c1')))
+    expect(screen.queryByRole('button', { name: 'Add row' })).toBeNull()
+    expect(screen.getByRole('button', { name: 'Add column' })).toBeTruthy()
+    await act(async () => user.hover(screen.getByText('c2')))
+    expect(screen.getByRole('button', { name: 'Add row' })).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Add column' })).toBeTruthy()
+  })
+
+  it('the row menu inserts above and below the row pointed at, and deletes it', async () => {
+    const e = editor()
+    const user = await mount(e)
+    await act(async () => user.hover(screen.getByText('b1')))
+    await press(user, screen.getByRole('button', { name: 'Row menu' }))
+    expect(screen.getAllByRole('menuitem').map((r) => r.textContent)).toEqual(['Insert above', 'Insert below', 'Delete', 'Delete table'])
+    await user.click(screen.getByRole('menuitem', { name: 'Insert below' }))
+    await frame()
+    expect(shape(e)).toEqual(['#A|#B|#C', 'a1|b1|c1', '||', 'a2|b2|c2'])
+
+    await act(async () => user.hover(screen.getByText('a2')))
+    await press(user, screen.getByRole('button', { name: 'Row menu' }))
+    await user.click(screen.getByRole('menuitem', { name: 'Delete' }))
+    await frame()
+    expect(shape(e)).toEqual(['#A|#B|#C', 'a1|b1|c1', '||'])
+  })
+
+  it('the column menu inserts left and right of the column pointed at, and deletes it', async () => {
+    const e = editor()
+    const user = await mount(e)
+    await act(async () => user.hover(screen.getByText('b2')))
+    await press(user, screen.getByRole('button', { name: 'Column menu' }))
+    expect(screen.getAllByRole('menuitem').map((r) => r.textContent)).toEqual(['Insert left', 'Insert right', 'Delete', 'Delete table'])
+    await user.click(screen.getByRole('menuitem', { name: 'Insert left' }))
+    await frame()
+    expect(shape(e)).toEqual(['#A|#|#B|#C', 'a1||b1|c1', 'a2||b2|c2'])
+
+    await act(async () => user.hover(screen.getByText('c1')))
+    await press(user, screen.getByRole('button', { name: 'Column menu' }))
+    await user.click(screen.getByRole('menuitem', { name: 'Delete' }))
+    await frame()
+    expect(shape(e)).toEqual(['#A|#|#B', 'a1||b1', 'a2||b2'])
+  })
+
+  it('a header row offers nothing above it, and deleting it makes the next row the header', async () => {
+    const e = editor()
+    const user = await mount(e)
+    await act(async () => user.hover(screen.getByText('B')))
+    await press(user, screen.getByRole('button', { name: 'Row menu' }))
+    expect(screen.getAllByRole('menuitem').map((r) => r.textContent)).toEqual(['Insert below', 'Delete', 'Delete table'])
+    await user.click(screen.getByRole('menuitem', { name: 'Delete' }))
+    await frame()
+    expect(shape(e)).toEqual(['#a1|#b1|#c1', 'a2|b2|c2'])
+  })
+
+  it('takes the controls away when the document changes without an update — someone else’s edit loaded', async () => {
+    const e = editor()
+    const user = await mount(e)
+    await act(async () => user.hover(screen.getByText('b1')))
+    expect(screen.getByRole('button', { name: 'Row menu' })).toBeTruthy()
+    await act(async () => void e.commands.setContent(THREE, { emitUpdate: false }))
+    expect(screen.queryByRole('button', { name: 'Row menu' })).toBeNull()
+  })
+
+  it('Delete table removes the table and keeps the text after it', async () => {
+    const e = editor()
+    const user = await mount(e)
+    await act(async () => user.hover(screen.getByText('a1')))
+    await press(user, screen.getByRole('button', { name: 'Row menu' }))
+    await user.click(screen.getByRole('menuitem', { name: 'Delete table' }))
+    await frame()
+    expect(shape(e)).toEqual([])
+    expect(e.getText()).toContain('after')
+  })
+
+  it('the ➕ bars add a row and a column at the end', async () => {
+    const e = editor()
+    const user = await mount(e)
+    await act(async () => user.hover(screen.getByText('a2')))
+    // The press keeps the focus in the field, so a field that saves on leaving does not save half-way: `false` is a prevented default.
+    expect(fireEvent.mouseDown(screen.getByRole('button', { name: 'Add row' }))).toBe(false)
+    await tap(screen.getByRole('button', { name: 'Add row' }))
+    await frame()
+    await act(async () => user.hover(screen.getByText('c1')))
+    await tap(screen.getByRole('button', { name: 'Add column' }))
+    await frame()
+    expect(shape(e)).toEqual(['#A|#B|#C|#', 'a1|b1|c1|', 'a2|b2|c2|', '|||'])
+  })
+
+  it('an editor that cannot be edited gets no controls', async () => {
+    const user = await mount(editor(THREE, false))
+    await act(async () => user.hover(screen.getByText('b1')))
+    expect(screen.queryByRole('button', { name: 'Row menu' })).toBeNull()
+    expect(screen.queryByRole('button', { name: 'Add row' })).toBeNull()
+  })
+
+  it('draws nothing before its editor exists', () => {
+    render(
+      <EditorTableControls editor={null}>
+        <p>text</p>
+      </EditorTableControls>,
+    )
+    expect(screen.queryByRole('button')).toBeNull()
+  })
+})