@quillmark/svelte 0.20.1 → 0.22.0

package/dist/core/codec/table-view.js

@@ -15,20 +15,23 @@
 // is preserved, never minted), and no placeholder.
 //
 // The chrome is a band and a selection (CODEC §"The table island"), and the band raises
-// nothing: what floats over the grid is the held column's alignment cluster alone. Every
-// control is absolutely positioned out of the grid, so none is in a row or a column of
-// it; `codec/prose.css` draws the band, the cluster and the selection wash.
-import { baseKeymap, chainCommands, toggleMark } from 'prosemirror-commands';
+// nothing: what floats over the grid is a held column's alignment or the held first
+// row's header toggle. Every control is absolutely positioned out of the grid, so none
+// is in a row or a column of it; `codec/prose.css` draws the band, the clusters and the
+// selection wash.
+import { baseKeymap, chainCommands, selectAll, toggleMark } from 'prosemirror-commands';
 import { redo, undo } from 'prosemirror-history';
 import { keymap } from 'prosemirror-keymap';
 import { EditorState, NodeSelection, Selection, TextSelection } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
 import { decode } from './decode.js';
-import { inputRulesPlugin } from './inputrules.js';
+import { inputRulesPlugin, undoRuleKeymap } from './inputrules.js';
+import { linkPastePlugin } from './link-paste.js';
 import { tablePropsOfNode } from './islands.js';
+import { tableElement, tableText } from './table-copy.js';
 import { breakKeymap } from './breaks.js';
 import { cellSchema } from './schema.js';
-import { ALIGNS, cellAt, cellContent, cellEqual, cellFromDoc, clearCells, columnCount, deleteColumn, deleteRow, insertColumn, insertRow, moveColumn, moveRow, normalizeTable, rowCells, rowCount, rowEmpty, setAlign, setHeadless, setCellLayout, columnShares, setWidths, shapeEqual, withCell } from './table.js';
+import { ALIGNS, cellAt, cellContent, cellEqual, cellFromDoc, clearCells, columnCount, deleteColumn, deleteRow, insertColumn, insertRow, moveColumn, moveRow, normalizeTable, rowCells, rowCount, rowEmpty, setAlign, setHeadless, columnShares, setWidths, shapeEqual, withCell } from './table.js';
 /**
  * The package's English for the island chrome. It lives here, beside the surface
  * that draws it, rather than in the visual tier's table: the codec mounts this
@@ -50,11 +53,7 @@ export const DEFAULT_TABLE_STRINGS = {
     tableAlignLeft: 'Align left',
     tableAlignCenter: 'Align center',
     tableAlignRight: 'Align right',
-    tableHeaderToggle: 'Header row',
-    tableAlignTop: 'Align top',
-    tableAlignMiddle: 'Align middle',
-    tableAlignBottom: 'Align bottom',
-    tableCellAlignment: 'Cell alignment'
+    tableHeaderToggle: 'Header row'
 };
 /** The grip's glyph, as the path data a DOM node can carry — this chrome's own set rather
  *  than `visual/icons/nodes.ts`, this being the one place chrome is built without Svelte,
@@ -79,28 +78,6 @@ const HEADER_GLYPH = [
     'M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z',
     'M3 9h18'
 ];
-/** The held cells' vertical toggles' glyphs, off the same release. */
-const VALIGN_GLYPH = {
-    top: [
-        'M6 6h2a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z',
-        'M16 6h2a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z',
-        'M22 2H2'
-    ],
-    middle: [
-        'M2 12h20',
-        'M10 16v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-4',
-        'M10 8V4a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v4',
-        'M20 16v1a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2v-1',
-        'M14 8V7c0-1.1.9-2 2-2h2a2 2 0 0 1 2 2v1'
-    ],
-    bottom: [
-        'M6 2h2a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z',
-        'M16 9h2a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2z',
-        'M22 22H2'
-    ]
-};
-/** The vertical alignments a cell takes, in the cluster's order. */
-const VALIGNS = ['top', 'middle', 'bottom'];
 /** Draw a cell's alignment on its box: its own where it holds one, its column's
  *  otherwise, and the vertical one where it holds one. */
 function layCell(box, props, r, c) {
@@ -158,10 +135,16 @@ function chromeButton(className, label, run) {
     });
     return btn;
 }
-/** A cell's plugin stack: marks and the markdown shorthands, and nothing that
- *  belongs to the field (history, anchors, the ghost). */
+/** A cell's plugin stack: marks, the markdown shorthands and a pasted URL's link, and
+ *  nothing that belongs to the field (history, anchors, the ghost). */
 function cellPlugins(keys) {
-    return [inputRulesPlugin(cellSchema), keymap(keys), keymap(baseKeymap)];
+    return [
+        inputRulesPlugin(cellSchema),
+        undoRuleKeymap(),
+        linkPastePlugin(cellSchema.marks.link),
+        keymap(keys),
+        keymap(baseKeymap)
+    ];
 }
 /** The controls, each of which answers for its own press. Spelled apart from
  *  {@link owned} because the pointer router needs them before it needs the cells: a grip
@@ -181,14 +164,26 @@ const within = (rect, p) => p.x >= rect.left && p.x <= rect.right && p.y >= rect
 function distance(rect, p) {
     return Math.hypot(Math.max(rect.left - p.x, 0, p.x - rect.right), Math.max(rect.top - p.y, 0, p.y - rect.bottom));
 }
-const sameCells = (a, b) => a.r0 === b.r0 && a.c0 === b.c0 && a.r1 === b.r1 && a.c1 === b.c1;
-/** The rectangle two corners span, in either order. */
+const sameCells = (a, b) => a.r0 === b.r0 && a.c0 === b.c0 && a.r1 === b.r1 && a.c1 === b.c1 && a.swept === b.swept;
+/** The block two corners span, in either order: what a sweep holds. */
 const spanCells = (a, b) => ({
     r0: Math.min(a.r, b.r),
     c0: Math.min(a.c, b.c),
     r1: Math.max(a.r, b.r),
-    c1: Math.max(a.c, b.c)
+    c1: Math.max(a.c, b.c),
+    swept: true
 });
+/** Each mounted island drawing a table, by its `dom`, which is what the outer view hands
+ *  back for a position: how a key in the field reaches into a table ({@link tableAt}). A
+ *  placeholder is absent, so it answers as the atom it draws. */
+const mounted = new WeakMap();
+/**
+ * Where the caret stood as each table value was written over, keyed by that value. An
+ * undo hands the node back the very `props` object the undone edit replaced, so the seat
+ * held against it is where the edit was made from: where PM's history puts the caret
+ * back in a field's own text.
+ */
+const departures = new WeakMap();
 class TableIslandView {
     node;
     outer;
@@ -210,9 +205,6 @@ class TableIslandView {
     clusters = [];
     /** The first row's header toggle, up while that row is held. */
     headerCluster;
-    /** The held cells' cluster, up over the first cell of a held rectangle that is no
-     *  column, and built for each paint since what it presses is the cells'. */
-    cellCluster;
     /** The grid's own box, and the containing block every out-of-flow control is placed
      *  against. Not the scroller: an absolute inside a scroll container is placed
      *  against a padding box the scroll then slides out from under, so a control at the
@@ -225,6 +217,8 @@ class TableIslandView {
     resize;
     /** A drag's trailing `click`, which would otherwise re-select the moved line. */
     suppressClick = false;
+    /** The grips of the row and column under the pointer, drawn up. */
+    near = [];
     constructor(node, outer, getPos, deps) {
         this.node = node;
         this.outer = outer;
@@ -234,6 +228,9 @@ class TableIslandView {
         this.dom.setAttribute('data-qm-island', node.attrs.islandType);
         this.dom.setAttribute('data-qm-island-id', node.attrs.id);
         this.dom.addEventListener('mousedown', this.onPointerDown);
+        this.dom.addEventListener('mouseover', this.onHover);
+        this.dom.addEventListener('mouseleave', this.onLeave);
+        this.dom.addEventListener('copy', this.onCopy, true);
         this.render();
     }
     // ── PM's NodeView contract ────────────────────────────────────────────────
@@ -256,6 +253,7 @@ class TableIslandView {
         // transaction, which is every keystroke in the table, and projecting each cell
         // costs a `mapMarks` across the WASM boundary wherever one holds an anchor.
         this.rendered = props;
+        const departure = departures.get(props);
         for (const mounted of this.cells) {
             const stored = cellAt(props, mounted.r, mounted.c);
             if (cellEqual(stored, mounted.shown))
@@ -267,13 +265,14 @@ class TableIslandView {
             });
             mounted.view.updateState(fresh);
             mounted.shown = stored;
-            // Best-effort caret continuity, the rule a field's own re-hydrate takes: keep
-            // the offset, clamped into the text that is there now. A fresh state resolves
-            // its selection to the start of the cell, so an undo would otherwise put the
-            // caret somewhere the edit it undid never was.
+            // The rule a field's own re-hydrate takes: keep the offset, clamped into the
+            // text that is there now, a fresh state resolving to the cell's start. An undo
+            // outranks it below, the departure being where the edit was.
             const at = Math.min(head, fresh.doc.content.size);
             mounted.view.dispatch(fresh.tr.setSelection(Selection.near(fresh.doc.resolve(at))));
         }
+        if (departure && this.focusedSeat())
+            this.focusCell(departure.r, departure.c, departure.head);
         // A cell's alignment is no part of its text, so it is restated on every box: the
         // reseed above compares text and marks alone.
         for (const mounted of this.cells)
@@ -296,6 +295,9 @@ class TableIslandView {
     }
     destroy() {
         this.dom.removeEventListener('mousedown', this.onPointerDown);
+        this.dom.removeEventListener('mouseover', this.onHover);
+        this.dom.removeEventListener('mouseleave', this.onLeave);
+        this.dom.removeEventListener('copy', this.onCopy, true);
         this.endDrag();
         this.endSweep();
         this.endResize();
@@ -355,6 +357,43 @@ class TableIslandView {
         else
             this.caretBeside(point);
     };
+    /** A cell under the pointer draws its row's and its column's grips, so a line's
+     *  handle is found from the line rather than only from the band beside it. A control
+     *  under the pointer is its own reveal, and draws no other. */
+    onHover = (event) => {
+        const target = event.target;
+        const box = target?.closest?.(CONTROLS) ? null : target?.closest?.('.qm-table-cell');
+        const cell = box ? this.cells.find((m) => m.box === box) : undefined;
+        const next = cell
+            ? [
+                this.grips.get(lineKey({ axis: 'row', index: cell.r }))?.grip,
+                this.grips.get(lineKey({ axis: 'column', index: cell.c }))?.grip
+            ].filter((grip) => !!grip)
+            : [];
+        for (const grip of this.near)
+            if (!next.includes(grip))
+                grip.removeAttribute('data-near');
+        for (const grip of next)
+            grip.setAttribute('data-near', '');
+        this.near = next;
+    };
+    onLeave = () => {
+        for (const grip of this.near)
+            grip.removeAttribute('data-near');
+        this.near = [];
+    };
+    /** A copy over a held rectangle writes its cells (`table-copy.ts`). Captured, since the
+     *  caret's cell would otherwise copy its own text selection over them. */
+    onCopy = (event) => {
+        const held = this.selected;
+        if (!held || !event.clipboardData)
+            return;
+        const props = this.props();
+        event.clipboardData.setData('text/html', tableElement(props, held).outerHTML);
+        event.clipboardData.setData('text/plain', tableText(props, held));
+        event.preventDefault();
+        event.stopPropagation();
+    };
     /** The cell a press inside the frame belongs to: the nearest by rect, which for a
      *  press on a border or a cell's own padding is the cell it is against.
      *
@@ -399,18 +438,32 @@ class TableIslandView {
      *  leaf mounted without that plugin then answers "no gap" instead of dispatching
      *  a selection nothing draws. */
     caretBeside(point) {
+        const box = this.dom.getBoundingClientRect();
+        this.leave(point.y < (box.top + box.bottom) / 2 ? -1 : 1);
+    }
+    /** Land the document's caret on one side of the island, by
+     *  {@link TableIslandView.caretBeside}'s rule; false where that side holds no caret. */
+    leave(side) {
         const pos = this.getPos();
         if (pos == null)
-            return;
-        const box = this.dom.getBoundingClientRect();
-        const before = point.y < (box.top + box.bottom) / 2;
-        const $at = this.outer.state.doc.resolve(before ? pos : pos + this.node.nodeSize);
+            return false;
+        const $at = this.outer.state.doc.resolve(side < 0 ? pos : pos + this.node.nodeSize);
         const selection = this.outer.someProp('createSelectionBetween', (f) => f(this.outer, $at, $at)) ??
-            Selection.findFrom($at, before ? -1 : 1, true);
+            Selection.findFrom($at, side, true);
         if (!selection)
-            return;
+            return false;
         this.outer.focus();
         this.outer.dispatch(this.outer.state.tr.setSelection(selection));
+        return true;
+    }
+    /** Land the caret in the table from the block beside it: its last cell's end from
+     *  below, its first cell's start from above. */
+    enter(side) {
+        const props = this.props();
+        if (side < 0)
+            this.focusCell(rowCount(props) - 1, columnCount(props) - 1, 'end');
+        else
+            this.focusCell(0, 0, 'start');
     }
     /** The island as the selection: the Escape that climbs out of a cell or a held
      *  rectangle, which is the whole of what selects it. Backspace there deletes the
@@ -497,8 +550,8 @@ class TableIslandView {
      *  revalidates the whole table. */
     lineCells(line, props = this.props()) {
         return line.axis === 'row'
-            ? { r0: line.index, c0: 0, r1: line.index, c1: columnCount(props) - 1 }
-            : { r0: 0, c0: line.index, r1: rowCount(props) - 1, c1: line.index };
+            ? { r0: line.index, c0: 0, r1: line.index, c1: columnCount(props) - 1, swept: false }
+            : { r0: 0, c0: line.index, r1: rowCount(props) - 1, c1: line.index, swept: false };
     }
     /** The index space an axis allows, which is the whole of it on both. The header is
      *  row 0 rather than a line above the floor: a walk reaches it, a drag lands on it,
@@ -528,14 +581,12 @@ class TableIslandView {
         else if (held?.c !== line.index)
             this.focusCell(held?.r ?? 0, line.index);
     }
-    /** Which line the held rectangle is, on one axis: a row spanning every column, a
-     *  column spanning every row, and nothing at all for a block that spans neither. The
-     *  extent rule reaching the line verbs ({@link TableIslandView.deleteSelection}) — a
-     *  rectangle answers by what it covers, never by the gesture that drew it, so a row
-     *  swept cell by cell moves exactly as the row a grip named does. */
+    /** Which line the held rectangle names, on one axis: a row spanning every column, a
+     *  column spanning every row, and nothing for a block that spans neither or for cells
+     *  a sweep holds, which are text however many lines they cross. */
     lineOn(axis) {
         const held = this.selected;
-        if (!held)
+        if (!held || held.swept)
             return undefined;
         const props = this.props();
         if (axis === 'row')
@@ -554,18 +605,24 @@ class TableIslandView {
         // One subject at a time: a cell selection retires an island one, or the surface
         // paints a washed row inside an outlined table and the next Backspace has two
         // honest readings.
-        const pos = this.getPos();
-        const outer = this.outer.state.selection;
-        if (pos != null && outer instanceof NodeSelection && outer.from === pos) {
-            const $at = this.outer.state.doc.resolve(pos);
-            const beside = this.outer.someProp('createSelectionBetween', (f) => f(this.outer, $at, $at)) ??
-                Selection.findFrom($at, -1, true);
-            if (beside)
-                this.outer.dispatch(this.outer.state.tr.setSelection(beside));
-        }
+        this.retireIsland();
         this.selected = cells;
         this.paintSelection();
     }
+    /** Move the outer selection off this island when it holds it: a caret or a rectangle
+     *  inside the grid is the subject from then on, and an outline left on the table says
+     *  the next Backspace deletes it. */
+    retireIsland() {
+        const pos = this.getPos();
+        const outer = this.outer.state.selection;
+        if (pos == null || !(outer instanceof NodeSelection) || outer.from !== pos)
+            return;
+        const $at = this.outer.state.doc.resolve(pos);
+        const beside = this.outer.someProp('createSelectionBetween', (f) => f(this.outer, $at, $at)) ??
+            Selection.findFrom($at, -1, true);
+        if (beside)
+            this.outer.dispatch(this.outer.state.tr.setSelection(beside));
+    }
     clearSelection() {
         if (!this.selected)
             return;
@@ -588,24 +645,25 @@ class TableIslandView {
             if (line.axis === 'row' && line.index === 0 && this.headerCluster)
                 this.headerCluster.hidden = !named;
         }
-        this.paintCellCluster(props);
         for (const cell of this.cells)
             cell.box.toggleAttribute('data-selected', !!held && cell.r >= held.r0 && cell.r <= held.r1 && cell.c >= held.c0 && cell.c <= held.c1);
     }
     /**
-     * What Backspace means over the selection, decided by its extent rather than by the
-     * gesture that drew it (CODEC §"The table island").
-     *
-     * The both-axes arm is the rule's own limit rather than an exception to it: every rank
-     * going at once leaves no table for a rank rule to have produced. It is the whole of
-     * how a pointer deletes a table, and on a one-column or one-row table a single grip
-     * draws it.
+     * What Backspace means over the selection (CODEC §"The table island"). Swept cells
+     * clear and keep their lines. Named lines go, read off their extent: every rank on
+     * both axes is the table, which goes as the island, and on a one-column or one-row
+     * table a single grip draws that.
      */
     deleteSelection() {
         const held = this.selected;
         if (!held)
             return;
         const props = this.props();
+        if (held.swept) {
+            if (allCells(props, held).some((cell) => cell.text !== ''))
+                this.write(clearCells(props, held.r0, held.c0, held.r1, held.c1));
+            return;
+        }
         const wide = held.c0 === 0 && held.c1 === columnCount(props) - 1;
         const tall = held.r0 === 0 && held.r1 === rowCount(props) - 1;
         if (tall && wide)
@@ -663,73 +721,17 @@ class TableIslandView {
         this.write(line.axis === 'row' ? moveRow(props, line.index, by) : moveColumn(props, line.index, by));
         this.selectLine({ axis: line.axis, index: to });
     }
-    /** Set column `c`'s alignment and keep the column held: a changed alignment rebuilds
-     *  the views, which retires the selection as a move's rebuild does. The alignment the
-     *  column already holds writes nothing. */
+    /** Set column `c`'s alignment, clear its cells' own, which would outrank it, and keep
+     *  the column held: a changed alignment rebuilds the views, which retires the selection
+     *  as a move's rebuild does. One `set` for both, and a column already at `to` with no
+     *  cell of its own writes nothing. */
     align(c, to) {
         const props = this.props();
-        if (props.aligns[c] !== to)
+        const own = Array.from({ length: rowCount(props) }, (_, r) => cellAt(props, r, c)).some((cell) => cell.align !== undefined);
+        if (props.aligns[c] !== to || own)
             this.write(setAlign(props, c, to));
         this.selectLine({ axis: 'column', index: c });
     }
-    /** The held cells' cluster: up over the first cell of a held rectangle, where no
-     *  column's own cluster is, each toggle pressed where every cell in the rectangle
-     *  holds it. It floats over the cell under that one, as the column's floats over the
-     *  first row, and is out of the tab order for the reason a grip is, its keyboard twin
-     *  being `Mod-Shift-l`, `-e` and `-r` (§{@link TableIslandView.cellKeys}). */
-    paintCellCluster(props) {
-        this.cellCluster?.remove();
-        this.cellCluster = undefined;
-        const held = this.selected;
-        if (!held || this.lineOn('column') !== undefined)
-            return;
-        const first = this.cells.find((m) => m.r === held.r0 && m.c === held.c0);
-        if (!first)
-            return;
-        const s = this.deps.strings();
-        const covered = allCells(props, held);
-        const holds = (key, value) => covered.every((cell) => cell[key] === value);
-        const cluster = el('div', 'qm-table-align');
-        cluster.setAttribute('role', 'group');
-        cluster.setAttribute('aria-label', s.tableCellAlignment);
-        cluster.setAttribute('data-cells', '');
-        cluster.addEventListener('mousedown', (e) => e.preventDefault());
-        const toggle = (label, glyph, pressed, run) => {
-            const btn = chromeButton('qm-table-align-option', label, run);
-            btn.tabIndex = -1;
-            btn.setAttribute('aria-pressed', String(pressed));
-            btn.appendChild(svg(glyph, 2));
-            cluster.appendChild(btn);
-            return btn;
-        };
-        const names = {
-            left: s.tableAlignLeft,
-            center: s.tableAlignCenter,
-            right: s.tableAlignRight
-        };
-        for (const align of SETTABLE)
-            toggle(names[align], ALIGN_GLYPH[align], holds('align', align), () => this.layCells('align', align)).setAttribute('data-align', align);
-        const vnames = {
-            top: s.tableAlignTop,
-            middle: s.tableAlignMiddle,
-            bottom: s.tableAlignBottom
-        };
-        for (const valign of VALIGNS)
-            toggle(vnames[valign], VALIGN_GLYPH[valign], holds('valign', valign), () => this.layCells('valign', valign)).setAttribute('data-valign', valign);
-        first.box.appendChild(cluster);
-        this.cellCluster = cluster;
-    }
-    /** Lay every held cell, or the caret's where none is held, at `value`, and clear the
-     *  key from them where every one already holds it: the press that set an alignment
-     *  takes it back to the column's. One `set`, and the rectangle stays held. */
-    layCells(key, value, at) {
-        const held = this.selected ?? (at && { r0: at.r, c0: at.c, r1: at.r, c1: at.c });
-        if (!held)
-            return;
-        const props = this.props();
-        const every = allCells(props, held).every((cell) => cell[key] === value);
-        this.write(setCellLayout(props, held.r0, held.c0, held.r1, held.c1, key, every ? undefined : value));
-    }
     // ── Drag to reorder ───────────────────────────────────────────────────────
     /**
      * Press-and-drag a grip moves its line. The press still selects: the dead zone is
@@ -1013,11 +1015,17 @@ class TableIslandView {
         this.endResize();
         this.teardownCells();
         this.grips.clear();
+        this.near = [];
         this.clusters = [];
         this.headerCluster = undefined;
         this.dom.textContent = '';
         const props = tablePropsOfNode(this.node);
+        const departure = props && departures.get(props);
         this.rendered = props;
+        if (props)
+            mounted.set(this.dom, this);
+        else
+            mounted.delete(this.dom);
         if (!props) {
             // Any other island type: the literal placeholder `toDOM` draws (islands.ts).
             this.dom.appendChild(document.createTextNode(`[${this.node.attrs.islandType || 'island'}]`));
@@ -1059,7 +1067,7 @@ class TableIslandView {
         scroller.appendChild(frame);
         this.dom.appendChild(scroller);
         this.paintSelection();
-        this.reseat(seat);
+        this.reseat(seat, departure);
     }
     /**
      * Where the focus sits, in terms a rebuild can restore it by: the caret's cell by
@@ -1074,14 +1082,19 @@ class TableIslandView {
      */
     focusedSeat() {
         const held = this.cells.find((m) => m.view.hasFocus());
-        return held && { r: held.r, c: held.c };
+        return held && { r: held.r, c: held.c, head: held.view.state.selection.head };
     }
-    /** Put the caret back where {@link TableIslandView.focusedSeat} found it, clamped by
-     *  `focusCell` into the rectangle that is there now: the seat may be the cell the
-     *  rebuild removed. A caller that has a landing of its own overrides this by running
-     *  after. */
-    reseat(seat) {
-        if (seat)
+    /** Put the focus back after a rebuild: at the departure where the table returns to a
+     *  value an edit was made from, which is an undo, else at the end of the cell
+     *  {@link TableIslandView.focusedSeat} found, clamped by `focusCell` into the
+     *  rectangle that is there now, the seat being perhaps a cell the rebuild removed. A
+     *  caller that has a landing of its own overrides this by running after. */
+    reseat(seat, departure) {
+        if (!seat)
+            return;
+        if (departure)
+            this.focusCell(departure.r, departure.c, departure.head);
+        else
             this.focusCell(seat.r, seat.c);
     }
     /** One table row: its cells, each carrying whatever chrome hangs off it. */
@@ -1146,11 +1159,11 @@ class TableIslandView {
         return btn;
     }
     /** A column's alignment cluster: a toggle per alignment, pressed on the one the column
-     *  holds. Up only while the held rectangle is this column
+     *  holds. Up only while this column is the named line
      *  ({@link TableIslandView.paintSelection}), and absent rather than transparent the
      *  rest of the time: it floats over the first row, and a box hit-tested there at rest
      *  would take that cell's presses. Out of the tab order for the reason a grip is, its
-     *  keyboard twin being Shift+Left and Shift+Right (§{@link TableIslandView.cellKeys}). */
+     *  keyboard twins being Shift+Left and Shift+Right (§{@link TableIslandView.cellKeys}). */
     alignCluster(c, held, s) {
         const cluster = el('div', 'qm-table-align');
         cluster.setAttribute('role', 'group');
@@ -1201,12 +1214,10 @@ class TableIslandView {
      *  the pointer out past the last line is the claim — so its name carries the verb for
      *  everything that does not read position.
      *
-     *  In the tab order, where a grip is not: growth is what the line verbs do not carry,
-     *  so the column bar is the keyboard's only route to a new column, and the row bar is
-     *  that control on the other axis, where Enter at the last row and Tab past the last
-     *  cell reach the verb from inside a cell. They sit after the grid, so the Tab that
-     *  declines off the last cell lands on them, and the focus rung draws the one it lands
-     *  on (`codec/prose.css`). */
+     *  Out of the tab order, as a grip is: the Tab that declines off the last cell leaves
+     *  the island rather than landing on two controls drawn only under the pointer. A row
+     *  is the keyboard's from inside a cell, by Enter at the last row and Tab past the
+     *  last cell, and a column is the pointer's alone. */
     addBar(axis, label) {
         const btn = chromeButton('qm-table-add', label, () => {
             const props = this.props();
@@ -1216,6 +1227,7 @@ class TableIslandView {
                 this.write(insertColumn(props, columnCount(props) - 1), { r: 0, c: columnCount(props) });
         });
         btn.setAttribute('data-axis', axis);
+        btn.tabIndex = -1;
         btn.appendChild(el('span', 'qm-table-add-bar'));
         return btn;
     }
@@ -1236,6 +1248,7 @@ class TableIslandView {
             scrollThreshold: this.deps.clearance,
             scrollMargin: this.deps.clearance,
             dispatchTransaction: (tr) => {
+                const from = { r, c, head: view.state.selection.head };
                 const next = view.state.apply(tr);
                 view.updateState(next);
                 if (!tr.docChanged)
@@ -1248,11 +1261,12 @@ class TableIslandView {
                 const now = this.props();
                 const cell = cellFromDoc(next.doc, cellAt(now, r, c));
                 mounted.shown = cell;
-                this.write(withCell(now, r, c, cell));
+                this.write(withCell(now, r, c, cell), undefined, from);
             },
             handleDOMEvents: {
                 focus: () => {
                     this.clearSelection();
+                    this.retireIsland();
                     this.deps.onCellFocus();
                     return false;
                 }
@@ -1283,13 +1297,16 @@ class TableIslandView {
      * op is one commit and one undo step, which is why every op writes a whole
      * table rather than mutating the props in place.
      */
-    write(next, focus) {
+    write(next, focus, from = this.focusedSeat()) {
         const pos = this.getPos();
         if (pos == null)
             return;
         const node = this.outer.state.doc.nodeAt(pos);
         if (!node || node.type !== this.node.type)
             return;
+        const left = tablePropsOfNode(node);
+        if (left && from)
+            departures.set(left, from);
         this.outer.dispatch(this.outer.state.tr.setNodeMarkup(pos, undefined, {
             ...node.attrs,
             props: normalizeTable(next)
@@ -1297,9 +1314,10 @@ class TableIslandView {
         if (focus)
             this.focusCell(focus.r, focus.c);
     }
-    /** Land the caret at the end of a cell, clamped into the rectangle: where a row
-     *  or column op puts it, since the op rebuilt the views the caret was in. */
-    focusCell(r, c) {
+    /** Land the caret at the end of a cell, at its start, or at an offset clamped into its
+     *  text, the cell itself clamped into the rectangle: where a row or column op puts it,
+     *  since the op rebuilt the views the caret was in. */
+    focusCell(r, c, edge = 'end') {
         const props = this.props();
         const row = Math.max(0, Math.min(r, rowCount(props) - 1));
         const col = Math.max(0, Math.min(c, columnCount(props) - 1));
@@ -1307,12 +1325,29 @@ class TableIslandView {
         if (!mounted)
             return;
         const { view } = mounted;
+        const { doc } = view.state;
+        const at = edge === 'start'
+            ? Selection.atStart(doc)
+            : edge === 'end'
+                ? Selection.atEnd(doc)
+                : Selection.near(doc.resolve(Math.min(edge, doc.content.size)));
         // Flagged, for the reason the leaf's own landing is (`field.ts`, `setCaret`): PM
         // focuses with `preventScroll`, so an unflagged dispatch lands the caret where no
         // scroller has moved to — a Tab past the right edge of the horizontal scroller a
         // wide table lives in, or the row an Enter on the last one appends below the fold.
         view.focus();
-        view.dispatch(view.state.tr.setSelection(Selection.atEnd(view.state.doc)).scrollIntoView());
+        view.dispatch(view.state.tr.setSelection(at).scrollIntoView());
+    }
+    /** The cell beside `(r, c)` in reading order, a row's end wrapping to the next row's
+     *  start; past the first or last cell its row is outside the table. */
+    reading(r, c, dir) {
+        const cols = columnCount(this.props());
+        const next = c + dir;
+        if (next >= cols)
+            return { r: r + 1, c: 0 };
+        if (next < 0)
+            return { r: r - 1, c: cols - 1 };
+        return { r, c: next };
     }
     /**
      * A cell's keys. Traversal is the island's link in the leaf's chain
@@ -1330,22 +1365,35 @@ class TableIslandView {
             marks['Mod-i'] = toggleMark(cellSchema.marks.em);
         if (cellSchema.marks.underline)
             marks['Mod-u'] = toggleMark(cellSchema.marks.underline);
-        // Up and down are the grid's own walk: nothing else moves the caret vertically,
-        // and `focusCell` clamps, so neither can grow the table. Left and right do not
-        // traverse at all: at a text edge they would call what Tab and Shift-Tab already
-        // call, and inherit the append-past-the-last-cell that makes Tab a growth
-        // affordance and would make a caret key one.
+        // The arrows are the grid's own walk, each leaving a cell only from the text's edge
+        // on its side. Up and down reach the cell above or below, `focusCell` clamping at
+        // the top and bottom. Left and right reach the neighbour in reading order, landing
+        // at the edge they entered by and stopping at the first and last cells. No arrow
+        // grows the table, growth being Tab's and Enter's: on a caret key it would make a
+        // walk a growth affordance.
+        const caretAtEdge = (view, dir) => {
+            const { selection } = view?.state ?? {};
+            return (!!view && selection instanceof TextSelection && selection.empty && view.endOfTextblock(dir));
+        };
         const walk = (dir) => {
             return (_state, _dispatch, view) => {
-                const { selection } = view?.state ?? {};
-                if (!view || !(selection instanceof TextSelection) || !selection.empty)
-                    return false;
-                if (!view.endOfTextblock(dir))
+                if (!caretAtEdge(view, dir))
                     return false;
                 this.focusCell(dir === 'up' ? r - 1 : r + 1, c);
                 return true;
             };
         };
+        const cross = (dir) => {
+            return (_state, _dispatch, view) => {
+                if (!caretAtEdge(view, dir < 0 ? 'left' : 'right'))
+                    return false;
+                const to = this.reading(r, c, dir);
+                if (to.r < 0 || to.r >= rowCount(this.props()))
+                    return false;
+                this.focusCell(to.r, to.c, dir < 0 ? 'end' : 'start');
+                return true;
+            };
+        };
         // A block selection outranks the caret it was swept from: the origin cell still
         // holds the focus, so its own view is where the block's Backspace lands. Declining
         // when no block is held is what leaves an ordinary Backspace to `baseKeymap`.
@@ -1357,17 +1405,22 @@ class TableIslandView {
         };
         // The line verbs, over the held rectangle and nothing else: with none held every
         // one of these declines and the key is the caret's, which is what lets them sit on
-        // keys a cell is already typing under. An arrow names the line on its own axis
-        // through the caret — the one already held steps to its neighbour and carries the
-        // caret, and any other rectangle turns into it, which is how a row becomes the
-        // column the caret is in. Alt moves the line instead, and over a rectangle that is
-        // not one it does nothing but keep the key: while a rectangle is held every arrow
-        // is its own, and an Alt+arrow handed back is the browser's Back on two platforms,
-        // mid-gesture.
+        // keys a cell is already typing under. An arrow over swept cells lets go of them,
+        // leaving the caret where it is, as an arrow collapses a text selection. Over named
+        // lines it names the line on its own axis through the caret — the one already held
+        // steps to its neighbour and carries the caret, and any other turns into it, which
+        // is how a row becomes the column the caret is in. Alt moves the line instead, and
+        // over a rectangle that is not one it does nothing but keep the key: while a
+        // rectangle is held every arrow is its own, and an Alt+arrow handed back is the
+        // browser's Back on two platforms, mid-gesture.
         const line = (axis, by, move) => {
             return () => {
                 if (!this.selected)
                     return false;
+                if (this.selected.swept && !move) {
+                    this.clearSelection();
+                    return true;
+                }
                 const on = this.lineOn(axis);
                 if (move) {
                     if (on !== undefined)
@@ -1399,6 +1452,34 @@ class TableIslandView {
                 return true;
             };
         };
+        // Select-all grows a rung a press: the cell's text, which the base keymap's
+        // `selectAll` takes, then the caret's row, then every cell, then the document. Any
+        // held rectangle short of every cell grows to every cell.
+        const grow = (state) => {
+            const props = this.props();
+            const every = {
+                r0: 0,
+                c0: 0,
+                r1: rowCount(props) - 1,
+                c1: columnCount(props) - 1,
+                swept: false
+            };
+            const held = this.selected;
+            if (held && sameCells(held, every)) {
+                this.clearSelection();
+                this.outer.focus();
+                return selectAll(this.outer.state, this.outer.dispatch);
+            }
+            if (held)
+                this.select(every);
+            else {
+                const { from, to } = state.selection;
+                if (from > Selection.atStart(state.doc).from || to < Selection.atEnd(state.doc).to)
+                    return false;
+                this.selectLine({ axis: 'row', index: r });
+            }
+            return true;
+        };
         return {
             ...marks,
             ...breakKeymap(cellSchema),
@@ -1411,17 +1492,15 @@ class TableIslandView {
             Delete: erase,
             ArrowUp: chainCommands(line('row', -1, false), walk('up')),
             ArrowDown: chainCommands(line('row', 1, false), walk('down')),
-            ArrowLeft: line('column', -1, false),
-            ArrowRight: line('column', 1, false),
+            ArrowLeft: chainCommands(line('column', -1, false), cross(-1)),
+            ArrowRight: chainCommands(line('column', 1, false), cross(1)),
             'Alt-ArrowUp': line('row', -1, true),
             'Alt-ArrowDown': line('row', 1, true),
             'Alt-ArrowLeft': line('column', -1, true),
             'Alt-ArrowRight': line('column', 1, true),
             'Shift-ArrowLeft': slide(-1),
             'Shift-ArrowRight': slide(1),
-            'Shift-Mod-l': () => (this.layCells('align', 'left', { r, c }), true),
-            'Shift-Mod-e': () => (this.layCells('align', 'center', { r, c }), true),
-            'Shift-Mod-r': () => (this.layCells('align', 'right', { r, c }), true),
+            'Mod-a': grow,
             Tab: () => this.step(r, c, 1),
             'Shift-Tab': () => this.step(r, c, -1),
             Enter: () => {
@@ -1431,11 +1510,17 @@ class TableIslandView {
                     this.clearSelection();
                     return true;
                 }
+                // Past the last row it appends one, and on an empty trailing row it refuses the
+                // row on offer, as Tab's decline does and an empty item's Enter leaves a list:
+                // the row goes and the caret lands past the table. Row 1 is never the one
+                // refused, so the table keeps a row under its first.
                 const props = this.props();
-                if (r === rowCount(props) - 1)
-                    this.write(insertRow(props, r), { r: r + 1, c });
-                else
+                if (r < rowCount(props) - 1)
                     this.focusCell(r + 1, c);
+                else if (r > 1 && rowEmpty(props, r) && this.leave(1))
+                    this.write(deleteRow(props, r));
+                else
+                    this.write(insertRow(props, r), { r: r + 1, c });
                 return true;
             },
             // Escape climbs a rung a press: the caret's own row, then the island. The row
@@ -1467,30 +1552,25 @@ class TableIslandView {
      */
     step(r, c, dir) {
         const props = this.props();
-        const cols = columnCount(props);
-        const rows = rowCount(props);
-        let nr = r;
-        let nc = c + dir;
-        if (nc >= cols) {
-            nr = r + 1;
-            nc = 0;
-        }
-        else if (nc < 0) {
-            nr = r - 1;
-            nc = cols - 1;
-        }
-        if (nr < 0)
+        const to = this.reading(r, c, dir);
+        if (to.r < 0)
             return false;
-        if (nr >= rows) {
+        if (to.r >= rowCount(props)) {
             if (rowEmpty(props, r))
                 return false;
-            this.write(insertRow(props, r), { r: nr, c: 0 });
+            this.write(insertRow(props, r), to);
         }
         else
-            this.focusCell(nr, nc);
+            this.focusCell(to.r, to.c);
         return true;
     }
 }
+/** The table island mounted at `pos` in `view`, which a caret can step into; `undefined`
+ *  for any other node, or where no view is mounted. */
+export function tableAt(view, pos) {
+    const dom = view.nodeDOM(pos);
+    return dom ? mounted.get(dom) : undefined;
+}
 /** The `island_block` node view: a table island's editing surface, and the literal
  *  placeholder for every other island type. */
 export function tableNodeView(deps) {