@quillmark/svelte 0.2.0 → 0.3.0

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

@@ -3,36 +3,33 @@
 // it renders is PM's own: a leaf node's substitute DOM, holding one nested
 // `EditorView` per cell.
 //
-// A cell is a second content unit inside the first, so it gets the codec's INLINE mode
+// A cell is a second content unit inside the first, so it gets the codec's inline mode
 // (one paragraph, no containers, no islands, marks and input rules intact);
 // `table.ts` owns that translation. A cell edit does not touch the field's text:
 // the projection goes back onto the node's `props` attribute with `setNodeMarkup`,
 // and the field's own `dispatchTransaction` lowers that to an `islandOps` `set`
 // (CODEC §Encode), which is what keeps every anchor in the field.
 //
-// The nested views are NOT the field's: they carry no history (Mod-z routes to the
+// The nested views are not the field's: they carry no history (Mod-z routes to the
 // field's, so one undo stack covers the leaf), no anchor plugin (an anchor in a cell
 // is preserved, never minted), and no placeholder.
 //
-// THE CHROME OCCUPIES NO LAYOUT: every control is absolutely positioned inside a real
-// data cell, so a column's handle lives in its own `th` and a row's in that row's
-// first `td`, and a handle lines up with its line by being inside it. What that buys
-// and what the band costs are `codec/prose.css`'s, which draws them.
-//
-// A POINTER PRESS RESOLVES TO A CARET, always, except on a handle, which selects a
-// LINE (CODEC §"The table island").
+// The chrome is A band and A selection (CODEC §"The table island"), and it raises
+// nothing. Every control is absolutely positioned out of the grid, so the band is in no
+// row and no column of it; `codec/prose.css` draws the band and the selection wash both.
 import { baseKeymap, 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 { tableFromClipboard, writeRectangle } from './clipboard.js';
 import { decode } from './decode.js';
 import { inputRulesPlugin } from './inputrules.js';
 import { tablePropsOfNode } from './islands.js';
 import { inlineSchema } from './schema.js';
-import { ALIGNS, cellAt, cellContent, cellEqual, cellFromDoc, clearColumn, columnCount, deleteColumn, deleteRow, insertColumn, insertRow, moveColumn, moveRow, normalizeTable, rowCells, rowCount, setAlign, shapeEqual, withCell } from './table.js';
+import { allRows, cellAt, cellContent, cellEqual, cellFromDoc, clearCells, columnCount, deleteColumn, deleteRow, insertColumn, insertRow, moveColumn, moveRow, normalizeTable, pasteCells, rowCells, rowCount, rowEmpty, shapeEqual, withCell } from './table.js';
 /**
- * The package's English for the island chrome. It lives HERE, beside the surface
+ * 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
  * chrome and a consumer reaching `createField` directly gets wording with it. The
  * visual `strings` set extends this one, so a consumer overrides these keys beside
@@ -44,34 +41,30 @@ export const DEFAULT_TABLE_STRINGS = {
     tableRow: (index) => `Row ${index}`,
     tableColumn: (index) => `Column ${index}`,
     tableCell: (row, column) => `${row}, ${column}`,
+    tableSelectHeaderRow: 'Select header row',
     tableSelectRow: (index) => `Select row ${index}`,
     tableSelectColumn: (index) => `Select column ${index}`,
-    tableSelectTable: 'Select table',
-    tableInsertRow: (index) => `Insert row ${index}`,
-    tableInsertColumn: (index) => `Insert column ${index}`,
-    tableAlignDefault: 'Align: default',
-    tableAlignLeft: 'Align left',
-    tableAlignCenter: 'Align center',
-    tableAlignRight: 'Align right'
+    tableAddRow: 'Add row',
+    tableAddColumn: 'Add column'
 };
-/** The glyphs this chrome draws, as the path data a DOM node can carry — its own set
- *  rather than `visual/icons/nodes.ts`, this being the one place chrome is built
- *  without Svelte, and `/core` reaching no surface module. Same 24×24 frame and the
- *  same origin, off an earlier release than the thirteen there; `NOTICE` carries the
- *  notices for both. */
-const PLUS = ['M5 12h14', 'M12 5v14'];
-const ALIGN_PATHS = {
-    none: ['M21 6H3', 'M21 12H3', 'M21 18H3'],
-    left: ['M21 6H3', 'M15 12H3', 'M17 18H3'],
-    center: ['M21 6H3', 'M17 12H7', 'M19 18H5'],
-    right: ['M21 6H3', 'M21 12H9', 'M21 18H7']
+/** The one glyph this chrome draws, as the path data a DOM node can carry — its own set
+ *  rather than `visual/icons/nodes.ts`, this being the one place chrome is built without
+ *  Svelte, and `/core` reaching no surface module. Same 24×24 frame and the same origin,
+ *  off an earlier release than the thirteen there; `NOTICE` carries the notices for
+ *  both. The dots are zero-length strokes under a round cap, which is how that set draws
+ *  a dot everywhere it has one. */
+const GRIP = {
+    column: ['M5 9h.01', 'M12 9h.01', 'M19 9h.01', 'M5 15h.01', 'M12 15h.01', 'M19 15h.01'],
+    row: ['M9 5h.01', 'M9 12h.01', 'M9 19h.01', 'M15 5h.01', 'M15 12h.01', 'M15 19h.01']
 };
+/** The grip's marks. The stroke is heavy for a chrome glyph because they are dots, and a
+ *  dot drawn at the line weight of a stroke disappears at the size the bar renders. */
 function svg(paths) {
     const el = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
     el.setAttribute('viewBox', '0 0 24 24');
     el.setAttribute('fill', 'none');
     el.setAttribute('stroke', 'currentColor');
-    el.setAttribute('stroke-width', '2');
+    el.setAttribute('stroke-width', '3');
     el.setAttribute('stroke-linecap', 'round');
     el.setAttribute('stroke-linejoin', 'round');
     el.setAttribute('aria-hidden', 'true');
@@ -88,9 +81,9 @@ function el(tag, className) {
         node.className = className;
     return node;
 }
-/** A chrome button. It swallows its own `mousedown` (prosemirror-menu's trick, and
+/** A band button. It swallows its own `mousedown` (prosemirror-menu's trick, and
  *  the format popover's): without it the browser focuses the button, blurring the
- *  cell whose caret the op is about to be measured against. A handle wants that focus
+ *  cell whose caret the op is about to be measured against. A grip wants that focus
  *  and takes it explicitly, which is why this does not hand it out. */
 function chromeButton(className, label, run) {
     const btn = el('button', className);
@@ -109,20 +102,32 @@ function chromeButton(className, label, run) {
 function cellPlugins(keys) {
     return [inputRulesPlugin(inlineSchema), keymap(keys), keymap(baseKeymap)];
 }
-/** What the nested views and the controls answer for themselves. `stopEvent` reads
- *  it to hand PM everything else, and the pointer guard reads it to leave those
- *  presses alone: one list, so the two cannot disagree about what a cell owns. */
-const OWNED = '.qm-table-cell-host, .qm-table-handle, .qm-table-seam, .qm-table-align';
+/** The band's 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
+ *  is inside the cell it names, so the two selectors overlap on exactly the press whose
+ *  reading they disagree about. */
+const CONTROLS = '.qm-table-grip, .qm-table-add';
+/** What the nested views and the band answer for themselves, which is what `stopEvent`
+ *  keeps from PM. */
+const OWNED = `.qm-table-cell-host, ${CONTROLS}`;
 /** How far a press travels before it is a drag rather than a click. Under it, a press
- *  that jitters is still the selection gesture it was aimed as. */
+ *  that jitters is still the gesture it was aimed as. */
 const DEAD_ZONE = 3;
-/** A line's key in the handle registry, spelled once. */
+/** A line's key in the grip registry, spelled once. */
 const lineKey = (line) => `${line.axis}:${line.index}`;
 const within = (rect, p) => p.x >= rect.left && p.x <= rect.right && p.y >= rect.top && p.y <= rect.bottom;
 /** A point's distance to a rect: zero inside it, the gap to the nearest edge outside. */
 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 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)
+});
 class TableIslandView {
     node;
     outer;
@@ -135,16 +140,16 @@ class TableIslandView {
     rendered;
     selected;
     drag;
-    /** The handles, by the line each acts on: what selection paint, the hover reveal
-     *  and a drag all reach for without a query. The typed twin of `cells`. */
-    handles = new Map();
-    /** The line the pointer is over, memoized: a field rather than DOM-only state, so
-     *  a rebuild re-applies it the way `paintLine` re-applies the selection. */
-    hot = { r: -1, c: -1 };
-    scroller;
+    sweep;
+    /** The grips, by the line each acts on: what selection paint and a drag reach for
+     *  without a query. The typed twin of `cells`. */
+    grips = new Map();
+    /** 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
+     *  grid's far end would drift into the middle of it. */
+    frame;
     dropMark;
-    /** The one alignment cluster, parked out of the tree until a column is selected. */
-    align;
     /** A drag's trailing `click`, which would otherwise re-select the moved line. */
     suppressClick = false;
     constructor(node, outer, getPos, deps) {
@@ -156,8 +161,13 @@ class TableIslandView {
         this.dom.setAttribute('data-island', node.attrs.islandType);
         this.dom.setAttribute('data-island-id', node.attrs.id);
         this.dom.addEventListener('mousedown', this.onPointerDown);
-        this.dom.addEventListener('mouseover', this.onHover);
-        this.dom.addEventListener('mouseleave', this.onLeave);
+        // On the document rather than on the island: a `copy` is delivered to the DOM
+        // selection's own node, and a held rectangle has cleared that selection (a sweep
+        // removes the ranges itself, a grip press moves the focus to a button), so the
+        // event never crosses this subtree at all. What makes one this island's is
+        // {@link TableIslandView.onCopy}'s guard.
+        this.dom.ownerDocument.addEventListener('copy', this.onCopy);
+        this.dom.ownerDocument.addEventListener('cut', this.onCopy);
         this.render();
     }
     // ── PM's NodeView contract ────────────────────────────────────────────────
@@ -172,7 +182,7 @@ class TableIslandView {
             return true;
         }
         // Same rectangle: reseed only the cells whose value the nested view is not
-        // already showing. The cell that PRODUCED this update projects to exactly what
+        // already showing. The cell that produced this update projects to exactly what
         // it stored, so it compares equal and keeps its caret; an undo or an external
         // re-hydrate does not, and takes the fresh state.
         this.rendered = props;
@@ -180,16 +190,24 @@ class TableIslandView {
             const stored = cellAt(props, mounted.r, mounted.c);
             if (cellEqual(stored, cellFromDoc(mounted.view.state.doc, stored)))
                 continue;
-            mounted.view.updateState(EditorState.create({
+            const head = mounted.view.state.selection.head;
+            const fresh = EditorState.create({
                 doc: decode(cellContent(stored), inlineSchema),
                 plugins: cellPlugins(this.cellKeys(mounted.r, mounted.c))
-            }));
+            });
+            mounted.view.updateState(fresh);
+            // 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.
+            const at = Math.min(head, fresh.doc.content.size);
+            mounted.view.dispatch(fresh.tr.setSelection(Selection.near(fresh.doc.resolve(at))));
         }
         return true;
     }
     /** The nested views own every event inside a cell or a control; everything else
      *  stays PM's, so a key pressed over a selected island still reaches the field's
-     *  keymap. What a POINTER press means on the rest of the chrome is
+     *  keymap. What a pointer press means on the rest of the chrome is
      *  {@link TableIslandView.onPointerDown}'s and not this one's: `stopEvent` gates
      *  the whole subtree, so widening it would take that routing with it. */
     stopEvent(event) {
@@ -202,65 +220,66 @@ class TableIslandView {
     }
     destroy() {
         this.dom.removeEventListener('mousedown', this.onPointerDown);
-        this.dom.removeEventListener('mouseover', this.onHover);
-        this.dom.removeEventListener('mouseleave', this.onLeave);
+        this.dom.ownerDocument.removeEventListener('copy', this.onCopy);
+        this.dom.ownerDocument.removeEventListener('cut', this.onCopy);
         this.endDrag();
+        this.endSweep();
         this.teardownCells();
     }
     // ── The pointer ───────────────────────────────────────────────────────────
     /**
      * Route a press to its band (CODEC §"The table island"): inside the frame the
-     * nearest cell's caret, outside it the document's, and a handle answers for itself.
+     * nearest cell's caret, outside it the document's, and a band control answers for
+     * itself.
+     *
+     * A press in a cell is a caret and the nested view is taking it; what is armed here
+     * is only the promotion, since a press that travels into another cell stops being a
+     * caret and becomes a block. That is the one gesture that has to see a press the
+     * nested view already owns, which is why it runs ahead of the cell host's guard
+     * rather than behind it. A control is the other way round: a grip is inside the cell
+     * it names, so its guard runs ahead of the cell branch, or a grip press would plant a
+     * caret in that cell and arm a sweep the drag then draws a block with.
      *
      * A `mousedown` listener, and it stops the event: PM's own mousedown is what arms
      * the node selection the matching mouseup then takes. `stopEvent` is the other way
      * to reach that, and it gates the subtree's keydown and drag routing too.
      */
     onPointerDown = (event) => {
-        // Any other island type is an atom with NO interior: a press on it is
-        // unambiguous, and PM's to answer. So is a secondary press, which types nothing
-        // and is on its way to a context menu.
+        // Any other island type is an atom with no interior: a press on it is
+        // unambiguous, and PM's to answer. So is a secondary press, which types nothing.
         if (!this.rendered || event.button !== 0)
             return;
         const target = event.target;
-        if (target?.closest?.(OWNED))
-            return; // a cell or a control answers for itself
+        if (target?.closest?.(CONTROLS))
+            return; // a control answers for itself
+        const point = { x: event.clientX, y: event.clientY };
+        const box = target?.closest?.('.qm-table-cell');
+        const cell = box && this.cells.find((m) => m.box === box);
+        if (cell) {
+            // A fresh press in a cell means "caret here", so it retires whatever block was
+            // held: a press back into the cell that already has focus raises no `focus`
+            // event, and without this the block would survive to eat the next Backspace.
+            this.clearSelection();
+            // A cell's own padding and its borders are the table's, not the view's: a press
+            // there lands the caret it aimed at rather than nothing.
+            if (!target?.closest?.('.qm-table-cell-host')) {
+                event.preventDefault();
+                event.stopPropagation();
+                this.focusCell(cell.r, cell.c);
+            }
+            this.armSweep(cell, point);
+            return;
+        }
+        // Past the control guard and the cell branch, the press is on the island's own
+        // space: the band's padding, or the frame beside the grid.
         event.preventDefault();
         event.stopPropagation();
-        const point = { x: event.clientX, y: event.clientY };
         const grid = this.dom.querySelector('.qm-table');
         if (grid && within(grid.getBoundingClientRect(), point))
             this.focusNearestCell(point);
         else
             this.caretBeside(point);
     };
-    /** Which line the pointer is over, so only that line's handle is drawn. The cell is
-     *  the one the event landed in, matched against the mounted set: no rect is read and
-     *  no coordinate is parsed back out of the DOM. */
-    onHover = (event) => {
-        const box = event.target?.closest?.('.qm-table-cell');
-        const cell = box && this.cells.find((m) => m.box === box);
-        if (cell)
-            this.setHot(cell.r, cell.c);
-    };
-    onLeave = () => {
-        if (!this.drag)
-            this.setHot(-1, -1);
-    };
-    /** Arm one row handle and one column handle. Memoized, because `mouseover` fires
-     *  per element crossed and the answer changes only per line crossed. */
-    setHot(r, c) {
-        if (r === this.hot.r && c === this.hot.c)
-            return;
-        this.hot = { r, c };
-        this.paintHot();
-    }
-    paintHot() {
-        for (const [key, handle] of this.handles) {
-            handle.classList.toggle('qm-hot', key === lineKey({ axis: 'row', index: this.hot.r }) ||
-                key === lineKey({ axis: 'column', index: this.hot.c }));
-        }
-    }
     /** 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. */
     focusNearestCell(point) {
@@ -276,7 +295,7 @@ class TableIslandView {
         if (best)
             this.focusCell(best.r, best.c);
     }
-    /** A caret beside the island, on the side the press landed: a GAP CURSOR where the
+    /** A caret beside the island, on the side the press landed: a gap cursor where the
      *  document holds no text position there, and the neighbouring block's own edge
      *  where it holds one.
      *
@@ -298,33 +317,113 @@ class TableIslandView {
         this.outer.focus();
         this.outer.dispatch(this.outer.state.tr.setSelection(selection));
     }
-    /** The island as the selection: the corner's gesture, and Escape's out of a line.
-     *  Those two are the whole of what selects it, and Backspace over it is what
-     *  deletes the table (CODEC §"The table island"). */
+    /** The island as the selection: Escape out of a cell or a line, which is the whole of
+     *  what selects it. Backspace there deletes the table, as it does over every other
+     *  island; the cell selection covering every rank reaches the same delete without
+     *  leaving the grid (CODEC §"The table island"). */
     selectIsland() {
         const pos = this.getPos();
         if (pos == null)
             return;
-        this.clearLine();
+        this.clearSelection();
         this.outer.focus();
         this.outer.dispatch(this.outer.state.tr.setSelection(NodeSelection.create(this.outer.state.doc, pos)));
     }
-    // ── The line selection ────────────────────────────────────────────────────
-    /** Take the line's handle: the focus a selection's keys land on. */
-    handleFor(line) {
-        return this.handles.get(lineKey(line));
+    // ── Sweeping a block of cells ─────────────────────────────────────────────
+    armSweep(origin, from) {
+        this.endSweep();
+        this.sweep = {
+            origin: { r: origin.r, c: origin.c },
+            from,
+            engaged: false,
+            live: false,
+            boxes: []
+        };
+        document.addEventListener('mousemove', this.onSweepMove, true);
+        document.addEventListener('mouseup', this.onSweepUp, true);
     }
-    /** The index space an axis allows. Stated once, because "the header is the floor"
-     *  is a rule three callers would otherwise each spell out. */
+    /**
+     * Promote a travelling press to a block. Until the pointer leaves the cell it
+     * started in the gesture is still a caret and the nested view keeps it; from the
+     * first cell it crosses, the block is the selection and the browser's own text drag
+     * is dropped, two selections over one press being one too many.
+     */
+    onSweepMove = (event) => {
+        const sweep = this.sweep;
+        if (!sweep)
+            return;
+        const at = { x: event.clientX, y: event.clientY };
+        if (!sweep.engaged) {
+            if (Math.hypot(at.x - sweep.from.x, at.y - sweep.from.y) < DEAD_ZONE)
+                return;
+            sweep.engaged = true;
+            sweep.boxes = this.cells.map((m) => ({
+                r: m.r,
+                c: m.c,
+                rect: m.box.getBoundingClientRect()
+            }));
+        }
+        const head = this.cellNear(sweep.boxes, at);
+        if (!head)
+            return;
+        if (!sweep.live && head.r === sweep.origin.r && head.c === sweep.origin.c)
+            return;
+        sweep.live = true;
+        this.select(spanCells(sweep.origin, head));
+        document.getSelection()?.removeAllRanges();
+        event.preventDefault();
+    };
+    onSweepUp = () => this.endSweep();
+    endSweep() {
+        if (!this.sweep)
+            return;
+        this.sweep = undefined;
+        document.removeEventListener('mousemove', this.onSweepMove, true);
+        document.removeEventListener('mouseup', this.onSweepUp, true);
+    }
+    /** The cell a point is in, or the nearest one outside the grid: a sweep that runs
+     *  past the last row still names a cell, which is what lets it reach the edge. */
+    cellNear(boxes, at) {
+        let best;
+        let nearest = Infinity;
+        for (const box of boxes) {
+            const gap = distance(box.rect, at);
+            if (gap >= nearest)
+                continue;
+            nearest = gap;
+            best = { r: box.r, c: box.c };
+        }
+        return best;
+    }
+    // ── The selection ─────────────────────────────────────────────────────────
+    /** Take the line's grip: the focus a selection's keys land on. */
+    gripFor(line) {
+        return this.grips.get(lineKey(line));
+    }
+    /** The rectangle a line covers, which is what selecting one means: a grip draws no
+     *  second kind of selection, it draws this one. */
+    lineCells(line) {
+        const 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 };
+    }
+    /** 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,
+     *  and the row that lands there is the header (`table.ts` §{@link moveRow}). */
     bounds(axis, props) {
         return axis === 'row'
-            ? { floor: 1, limit: rowCount(props) - 1 }
+            ? { floor: 0, limit: rowCount(props) - 1 }
             : { floor: 0, limit: columnCount(props) - 1 };
     }
-    /** Select a line. The handle takes the FOCUS, because the selection's keys bind
+    /** Select a line. The grip takes the focus, because the selection's keys bind
      *  there and need somewhere to land. */
     selectLine(line) {
-        // One subject at a time: a line selection retires an island one, or the surface
+        this.select(this.lineCells(line));
+        this.gripFor(line)?.focus();
+    }
+    select(cells) {
+        // 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();
@@ -336,38 +435,35 @@ class TableIslandView {
             if (beside)
                 this.outer.dispatch(this.outer.state.tr.setSelection(beside));
         }
-        this.selected = line;
-        this.paintLine();
-        this.handleFor(line)?.focus();
+        this.selected = cells;
+        this.paintSelection();
     }
-    clearLine() {
+    clearSelection() {
         if (!this.selected)
             return;
         this.selected = undefined;
-        this.paintLine();
-    }
-    /** Wash the selected line's cells and mark its handle. Imperative rather than a
-     *  re-render: a rebuild destroys the nested views, and a selection is exactly the
-     *  state that must not cost the carets in them. */
-    paintLine() {
-        const line = this.selected;
-        const key = line && lineKey(line);
-        for (const [at, handle] of this.handles)
-            handle.setAttribute('aria-pressed', String(at === key));
-        for (const cell of this.cells) {
-            const on = !!line && (line.axis === 'row' ? line.index === cell.r : line.index === cell.c);
-            cell.box.classList.toggle('qm-table-line', on);
+        this.paintSelection();
+    }
+    /** Wash the selected cells and mark the grip of any line the selection exactly
+     *  covers. Imperative rather than a re-render: a rebuild destroys the nested views,
+     *  and a selection is exactly the state that must not cost the carets in them. */
+    paintSelection() {
+        const held = this.selected;
+        for (const [key, grip] of this.grips) {
+            const [axis, index] = key.split(':');
+            const line = { axis: axis, index: Number(index) };
+            grip.setAttribute('aria-pressed', String(!!held && sameCells(held, this.lineCells(line))));
         }
-        this.paintAlign();
+        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);
     }
     /**
-     * A selected line's keys, bound to the line its own handle names rather than read
-     * off `selected`: focus and selection are separate, and a Tab between handles would
+     * A selected line's keys, bound to the line its own grip names rather than read off
+     * the selection: focus and selection are separate, and a Tab between grips would
      * otherwise aim the next key at whichever line was last pressed.
      *
-     * Backspace CLEARS rather than deletes at the last column, which the model keeps
-     * (CODEC §"The table island"). Undo is forwarded for the reason a cell forwards it:
-     * one undo stack per leaf, and a `button` has no history of its own.
+     * Undo is forwarded for the reason a cell forwards it: one undo stack per leaf, and
+     * a `button` has no history of its own.
      */
     lineKeys(line) {
         return (event) => {
@@ -388,11 +484,11 @@ class TableIslandView {
             if (key === 'Escape')
                 return this.selectIsland();
             if (key === 'Enter') {
-                this.clearLine();
+                this.clearSelection();
                 return line.axis === 'row' ? this.focusCell(line.index, 0) : this.focusCell(0, line.index);
             }
             if (key === 'Backspace' || key === 'Delete')
-                return this.deleteLine(line);
+                return this.deleteSelection();
             const by = key === 'ArrowUp' || key === 'ArrowLeft' ? -1 : 1;
             if (event.altKey)
                 return this.moveLine(line, by);
@@ -403,27 +499,111 @@ class TableIslandView {
             });
         };
     }
-    /** Delete the line, or clear it where the model keeps it. The two arms are two
-     *  model rules rather than one shape: a row runs out (`rows: []` is a legal
-     *  header-only table), a column cannot (the rectangle floors at one). */
-    deleteLine(line) {
+    // ── The clipboard ─────────────────────────────────────────────────────────
+    /** The held rectangle's cells, read off the stored props: the unit that crosses the
+     *  clipboard (`clipboard.ts`), so the unit the verbs here read. */
+    heldBlock(held) {
         const props = this.props();
-        if (line.axis === 'row') {
-            const next = Math.max(1, Math.min(line.index, rowCount(props) - 2));
-            this.write(deleteRow(props, line.index));
-            if (rowCount(this.props()) > 1)
-                this.selectLine({ axis: 'row', index: next });
-            else
-                this.clearLine();
+        return Array.from({ length: held.r1 - held.r0 + 1 }, (_, i) => Array.from({ length: held.c1 - held.c0 + 1 }, (_, j) => cellAt(props, held.r0 + i, held.c0 + j)));
+    }
+    /**
+     * Copy or cut the held rectangle (`clipboard.ts` writes both wire formats). A cut is
+     * a copy plus the delete Backspace already means over that rectangle, so what it
+     * takes out is read by the same extent rule: a covered rank goes, a sub-rectangle
+     * clears.
+     *
+     * The guard is the whole of what makes a document-level listener this island's. With
+     * no rectangle the event belongs to whatever holds the caret. With the focus outside,
+     * it is another surface's copy over a rectangle this island still happens to hold.
+     */
+    onCopy = (event) => {
+        const held = this.selected;
+        const data = event.clipboardData;
+        const owner = this.dom.ownerDocument;
+        if (!held || !data || !this.dom.contains(owner.activeElement))
             return;
-        }
-        if (columnCount(props) <= 1) {
-            this.write(clearColumn(props, line.index));
-            this.selectLine(line);
+        writeRectangle(data, this.heldBlock(held), this.props().aligns.slice(held.c0, held.c1 + 1), owner);
+        event.preventDefault();
+        if (event.type === 'cut')
+            this.deleteSelection();
+    };
+    /**
+     * A table pasted into a cell is written in at that cell, growing the table to hold
+     * it (`table.ts` §{@link pasteCells}); anything else is the cell's own paste and
+     * this declines. It lands at the caret's cell, which over a swept block is the cell
+     * the press started in — the block's anchor rather than its first corner, a sweep
+     * running up or left putting those at opposite ends.
+     *
+     * Without this arm the cell's inline schema reads the same clipboard as text and
+     * flattens the table into one cell, which is the destructive case one level down.
+     */
+    pasteIntoCell(r, c, event) {
+        const props = tableFromClipboard(event.clipboardData);
+        if (!props)
+            return false;
+        this.clearSelection();
+        this.write(pasteCells(this.props(), r, c, allRows(props)));
+        return true;
+    }
+    /**
+     * 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.
+     */
+    deleteSelection() {
+        const held = this.selected;
+        if (!held)
             return;
-        }
-        this.write(deleteColumn(props, line.index));
-        this.selectLine({ axis: 'column', index: Math.max(0, line.index - 1) });
+        const props = this.props();
+        const wide = held.c0 === 0 && held.c1 === columnCount(props) - 1;
+        const tall = held.r0 === 0 && held.r1 === rowCount(props) - 1;
+        if (tall && wide)
+            return this.deleteIsland();
+        if (tall)
+            return this.dropColumns(held);
+        if (wide)
+            return this.dropRows(held);
+        this.write(clearCells(props, held.r0, held.c0, held.r1, held.c1));
+        this.select(held);
+    }
+    /** Delete the whole island: an ordinary delete on the outer view, so the table goes
+     *  the way the node selection's Backspace already took it and rides the same undo
+     *  stack. The selection is dropped without a repaint: the DOM holding it is about to
+     *  be gone. */
+    deleteIsland() {
+        const pos = this.getPos();
+        if (pos == null)
+            return;
+        this.selected = undefined;
+        this.outer.focus();
+        this.outer.dispatch(this.outer.state.tr.delete(pos, pos + this.node.nodeSize));
+    }
+    /** Drop the rows the selection covers, high index first so the ones still to go keep
+     *  their indices, and select whatever took the first one's place. The header is among
+     *  them like any other row, and the row left at index 0 is the header afterwards. One
+     *  `write`, so the whole gesture is one undo step. */
+    dropRows(held) {
+        let props = this.props();
+        for (let r = held.r1; r >= held.r0; r--)
+            props = deleteRow(props, r);
+        this.write(props);
+        this.selectLine({ axis: 'row', index: Math.min(held.r0, rowCount(this.props()) - 1) });
+    }
+    /** Drop the columns the selection covers, and select what took the first one's place —
+     *  the row arm's rule, spelled the same way, since a rank going is a rank going on
+     *  either axis. Neither this nor {@link TableIslandView.dropRows} can empty the table:
+     *  a rectangle covering every rank of its axis spans the other one too, which is the
+     *  island arm above, so a rank always survives here. */
+    dropColumns(held) {
+        let props = this.props();
+        for (let c = held.c1; c >= held.c0; c--)
+            props = deleteColumn(props, c);
+        this.write(props);
+        this.selectLine({ axis: 'column', index: Math.min(held.c0, columnCount(this.props()) - 1) });
     }
     /** Move the line and keep it selected: a move whose selection did not travel would
      *  leave the next Alt+arrow acting on whatever took the index. */
@@ -438,11 +618,11 @@ class TableIslandView {
     }
     // ── Drag to reorder ───────────────────────────────────────────────────────
     /**
-     * Press-and-drag a handle moves its line. The press still SELECTS: the dead zone is
+     * Press-and-drag a grip moves its line. The press still selects: the dead zone is
      * what tells the two apart, so a click that jitters is the gesture it was aimed as
      * and only a real travel becomes a drag.
      */
-    onHandleDown = (line, handle, event) => {
+    onGripDown = (line, grip, event) => {
         if (event.button !== 0)
             return;
         this.drag = {
@@ -452,16 +632,18 @@ class TableIslandView {
             drop: line.index,
             painted: -1,
             pointerId: event.pointerId,
-            handle,
+            grip,
             lines: [],
             origin0: { left: 0, top: 0 }
         };
-        handle.setPointerCapture(event.pointerId);
-        handle.addEventListener('pointermove', this.onHandleMove);
-        handle.addEventListener('pointerup', this.onHandleUp);
-        handle.addEventListener('pointercancel', this.onHandleUp);
+        // Optional for the reason the release is: pointer capture is the browser's, and a
+        // DOM without it still routes the move and up events the drag reads.
+        grip.setPointerCapture?.(event.pointerId);
+        grip.addEventListener('pointermove', this.onGripMove);
+        grip.addEventListener('pointerup', this.onGripUp);
+        grip.addEventListener('pointercancel', this.onGripUp);
     };
-    onHandleMove = (event) => {
+    onGripMove = (event) => {
         const drag = this.drag;
         if (!drag)
             return;
@@ -473,21 +655,21 @@ class TableIslandView {
         drag.drop = this.dropIndex(drag, drag.line.axis === 'row' ? event.clientY : event.clientX);
         this.paintDrop(drag);
     };
-    /** The drag becomes one: lift the line, and measure the table ONCE. */
+    /** The drag becomes one: lift the line, and measure the table once. */
     engage(drag) {
         drag.engaged = true;
         this.dom.classList.add('qm-table-dragging');
-        drag.handle.classList.add('qm-table-lifted');
-        for (const cell of this.lineCells(drag.line))
+        drag.grip.classList.add('qm-table-lifted');
+        for (const cell of this.boxesOf(drag.line))
             cell.classList.add('qm-table-lifted');
-        const scroller = this.scroller;
-        if (!scroller)
+        const frame = this.frame;
+        if (!frame)
             return;
-        const box = scroller.getBoundingClientRect();
-        drag.origin0 = { left: box.left - scroller.scrollLeft, top: box.top - scroller.scrollTop };
+        const box = frame.getBoundingClientRect();
+        drag.origin0 = { left: box.left, top: box.top };
         const { floor, limit } = this.bounds(drag.line.axis, this.props());
         for (let i = floor; i <= limit; i++) {
-            const cells = this.lineCells({ axis: drag.line.axis, index: i });
+            const cells = this.boxesOf({ axis: drag.line.axis, index: i });
             if (!cells.length)
                 continue;
             const head = cells[0].getBoundingClientRect();
@@ -509,7 +691,7 @@ class TableIslandView {
                 });
         }
     }
-    onHandleUp = () => {
+    onGripUp = (event) => {
         const drag = this.drag;
         if (!drag)
             return;
@@ -517,6 +699,10 @@ class TableIslandView {
         this.endDrag();
         if (!engaged)
             return;
+        // A cancel is not a release: the line stays where it was, and no `click` follows
+        // it, so arming the guard below would leave it to swallow the next press instead.
+        if (event.type !== 'pointerup')
+            return;
         // The press that ends a drag is not the press that selects: the click still to
         // come would re-select the line the drag just moved off.
         this.suppressClick = true;
@@ -535,11 +721,11 @@ class TableIslandView {
         this.dom.classList.remove('qm-table-dragging');
         for (const lifted of this.dom.querySelectorAll('.qm-table-lifted'))
             lifted.classList.remove('qm-table-lifted');
-        drag.handle.removeEventListener('pointermove', this.onHandleMove);
-        drag.handle.removeEventListener('pointerup', this.onHandleUp);
-        drag.handle.removeEventListener('pointercancel', this.onHandleUp);
-        if (drag.handle.hasPointerCapture?.(drag.pointerId))
-            drag.handle.releasePointerCapture(drag.pointerId);
+        drag.grip.removeEventListener('pointermove', this.onGripMove);
+        drag.grip.removeEventListener('pointerup', this.onGripUp);
+        drag.grip.removeEventListener('pointercancel', this.onGripUp);
+        if (drag.grip.hasPointerCapture?.(drag.pointerId))
+            drag.grip.releasePointerCapture(drag.pointerId);
     }
     /** Which line the pointer is over, along the drag's axis: the nearest by the extents
      *  measured at engage. One dimension, because every cell of a row shares its top and
@@ -557,26 +743,26 @@ class TableIslandView {
         }
         return best;
     }
-    lineCells(line) {
+    boxesOf(line) {
         return this.cells
             .filter((m) => (line.axis === 'row' ? m.r === line.index : m.c === line.index))
             .map((m) => m.box);
     }
     /** The drop indicator: one rule on the boundary the line would land against, drawn
-     *  in the scroller so it spans the grid and scrolls with it. Redrawn only when the
+     *  in the frame so it spans the grid and travels with it. Redrawn only when the
      *  boundary changes, which is once per line crossed rather than once per move. */
     paintDrop(drag) {
         if (drag.drop === drag.painted)
             return;
         const line = drag.lines.find((l) => l.index === drag.drop);
-        const scroller = this.scroller;
-        if (!line || !scroller)
+        const frame = this.frame;
+        if (!line || !frame)
             return;
         drag.painted = drag.drop;
         if (!this.dropMark) {
             this.dropMark = el('div', 'qm-table-drop');
             this.dropMark.setAttribute('data-axis', drag.line.axis);
-            scroller.appendChild(this.dropMark);
+            frame.appendChild(this.dropMark);
         }
         const edge = (drag.drop > drag.line.index ? line.end : line.start) - 1;
         const mark = this.dropMark;
@@ -600,9 +786,11 @@ class TableIslandView {
         this.cells = [];
     }
     render() {
+        const seat = this.focusedSeat();
         this.endDrag();
+        this.endSweep();
         this.teardownCells();
-        this.handles.clear();
+        this.grips.clear();
         this.dom.textContent = '';
         const props = tablePropsOfNode(this.node);
         this.rendered = props;
@@ -624,19 +812,57 @@ class TableIslandView {
         for (let r = 1; r < rowCount(props); r++)
             body.appendChild(this.row(props, r, s));
         table.append(head, body);
+        // The frame is the grid's own box, and the two controls about an axis rather than
+        // about a line hang off its edges: an add bar along each trailing edge. A cell
+        // would have served for neither — a table with no body rows has no last row to
+        // hang the row bar in, and a bar spans the whole edge rather than one line of it.
+        const frame = el('div', 'qm-table-frame');
+        frame.append(table, this.addBar('column', s.tableAddColumn), this.addBar('row', s.tableAddRow));
         const scroller = el('div', 'qm-table-scroller');
-        scroller.appendChild(table);
-        this.scroller = scroller;
-        this.align = this.alignCluster(s);
+        scroller.appendChild(frame);
+        this.frame = frame;
         this.dom.appendChild(scroller);
-        // Both derived paints re-apply: a rebuild replaced every element they wrote on.
-        this.paintLine();
-        this.paintHot();
+        this.paintSelection();
+        this.reseat(seat);
+    }
+    /**
+     * Where the focus sits, in terms a rebuild can restore it by: a cell's position or a
+     * grip's line, neither of which is an element that survives one.
+     *
+     * A rebuild is what a changed rectangle costs, and the op that changed it usually
+     * says where the caret lands ({@link TableIslandView.write}'s `focus`). An undo says
+     * nothing — it is the outer history's transaction, not an op of this view's — so
+     * without this the DOM under the focus is removed and the focus falls to the
+     * document body, where the next undo reaches no view at all.
+     */
+    focusedSeat() {
+        const held = this.cells.find((m) => m.view.hasFocus());
+        if (held)
+            return { cell: { r: held.r, c: held.c } };
+        const active = this.dom.ownerDocument.activeElement;
+        for (const [key, grip] of this.grips) {
+            if (grip !== active)
+                continue;
+            const [axis, index] = key.split(':');
+            return { line: { axis: axis, index: Number(index) } };
+        }
+        return undefined;
+    }
+    /** Put the focus back where {@link TableIslandView.focusedSeat} found it, clamped into
+     *  the rectangle that is there now: the seat's line may be the one the rebuild
+     *  removed. A caller that has a landing of its own overrides this by running after. */
+    reseat(seat) {
+        if (seat?.cell)
+            return this.focusCell(seat.cell.r, seat.cell.c);
+        if (!seat?.line)
+            return;
+        const { floor, limit } = this.bounds(seat.line.axis, this.props());
+        const index = Math.max(floor, Math.min(seat.line.index, limit));
+        this.gripFor({ axis: seat.line.axis, index })?.focus();
     }
     /** One table row: its cells, each carrying whatever chrome hangs off it. */
     row(props, r, s) {
         const tr = el('tr', r === 0 ? 'qm-table-header-row' : undefined);
-        const cols = columnCount(props);
         rowCells(props, r).forEach((cell, c) => {
             const box = el(r === 0 ? 'th' : 'td', 'qm-table-cell');
             if (r === 0)
@@ -648,121 +874,73 @@ class TableIslandView {
                 box.style.textAlign = align;
             const host = el('div', 'qm-table-cell-host');
             box.appendChild(host);
-            // The COLUMN band hangs off the header row; the ROW band off each body row's
-            // first cell. Both are absolutely positioned into the scroller's padding, so
-            // neither is in the grid's layout and neither is a cell of its own.
-            if (r === 0) {
-                box.appendChild(this.handle({ axis: 'column', index: c }, s.tableSelectColumn(c + 1)));
-                box.appendChild(this.seam('column', c, s.tableInsertColumn(c + 1), 'lead'));
-                // The last column carries the trailing seam too: a boundary belongs to the
-                // cell it is against, and the right edge is against no next column.
-                if (c === cols - 1)
-                    box.appendChild(this.seam('column', c + 1, s.tableInsertColumn(c + 2), 'trail'));
-                // The header carries no row handle: it cannot be deleted (`header: []` is
-                // not a table) and nothing goes above it, so there is no line to select.
-                if (c === 0)
-                    box.appendChild(this.cornerHandle(s));
-            }
-            else if (c === 0) {
-                box.appendChild(this.handle({ axis: 'row', index: r }, s.tableSelectRow(r)));
-                box.appendChild(this.seam('row', r, s.tableInsertRow(r), 'lead'));
-                if (r === rowCount(props) - 1)
-                    box.appendChild(this.seam('row', r + 1, s.tableInsertRow(r + 1), 'trail'));
-            }
+            // The column band hangs off the header row; the row band off every row's first
+            // cell, the header's included. Both are absolutely positioned into the frame's
+            // own padding, so neither is in the grid's layout and neither is a cell of its
+            // own, and the two the header's first cell carries hang off perpendicular edges
+            // and meet at no point. The header takes a grip because a row grip acts on a
+            // row and the header is one: it selects, it deletes, and it drags, all by the
+            // rules every other row is under.
+            if (r === 0)
+                box.appendChild(this.grip({ axis: 'column', index: c }, s.tableSelectColumn(c + 1)));
+            if (c === 0)
+                box.appendChild(this.grip({ axis: 'row', index: r }, r === 0 ? s.tableSelectHeaderRow : s.tableSelectRow(r)));
             tr.appendChild(box);
             this.mountCell(box, host, r, c, s);
         });
         return tr;
     }
-    /** A line's handle, and the whole of that line's chrome: a press selects the line, a
-     *  press that travels drags it. Both are "this line", asked once with the pointer. */
-    handle(line, label) {
-        const btn = chromeButton('qm-table-handle', label, () => {
+    /** A line's grip, and the whole of that line's chrome: a press selects the line, a
+     *  press that travels drags it. Both are "this line", asked once with the pointer,
+     *  and the dead zone is what tells them apart.
+     *
+     *  Out of the tab order, at no cost in reach: a grip follows the cell it hangs in, so
+     *  a forward Tab is the cell traversal's before the browser gets there and a backward
+     *  one leaves the grid off cell (0,0) without passing a grip
+     *  (§{@link TableIslandView.step}). A line's chrome answers to the pointer. Focus is
+     *  still taken here, by the routes this view owns: a selection, a drag, a rebuild's
+     *  reseat. */
+    grip(line, label) {
+        const btn = chromeButton('qm-table-grip', label, () => {
             if (this.suppressClick)
                 this.suppressClick = false;
             else
                 this.selectLine(line);
         });
+        btn.tabIndex = -1;
         btn.setAttribute('aria-pressed', 'false');
         btn.setAttribute('data-axis', line.axis);
-        btn.appendChild(el('span', 'qm-table-handle-bar'));
-        btn.addEventListener('pointerdown', (e) => this.onHandleDown(line, btn, e));
+        const bar = el('span', 'qm-table-grip-bar');
+        bar.appendChild(svg(GRIP[line.axis]));
+        btn.appendChild(bar);
+        btn.addEventListener('pointerdown', (e) => this.onGripDown(line, btn, e));
         btn.addEventListener('keydown', this.lineKeys(line));
-        this.handles.set(lineKey(line), btn);
+        this.grips.set(lineKey(line), btn);
         return btn;
     }
-    /** The island's own handle, at the grid origin: the spreadsheet's select-all
-     *  position. A press selects the island, which is the state Backspace deletes the
-     *  whole table from. */
-    cornerHandle(s) {
-        const btn = chromeButton('qm-table-handle qm-table-corner-handle', s.tableSelectTable, () => this.selectIsland());
-        btn.setAttribute('data-axis', 'island');
-        btn.appendChild(el('span', 'qm-table-corner-mark'));
-        return btn;
-    }
-    /** A seam: the boundary between two lines, and the whole of how a table grows. */
-    seam(axis, index, label, side) {
-        const btn = chromeButton('qm-table-seam', label, () => {
+    /** A trailing bar: the whole edge past the last line of its axis, and the one way a
+     *  pointer grows the table. It spans the edge rather than capping it, because what it
+     *  appends to is the axis and not a line. It draws no glyph — the bar arriving under
+     *  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: the column bar is the keyboard's only route
+     *  to a column at all, 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`). */
+    addBar(axis, label) {
+        const btn = chromeButton('qm-table-add', label, () => {
             const props = this.props();
             if (axis === 'row')
-                this.write(insertRow(props, index - 1), { r: index, c: 0 });
+                this.write(insertRow(props, props.rows.length), { r: rowCount(props), c: 0 });
             else
-                this.write(insertColumn(props, index - 1), { r: 0, c: index });
+                this.write(insertColumn(props, columnCount(props) - 1), { r: 0, c: columnCount(props) });
         });
         btn.setAttribute('data-axis', axis);
-        btn.setAttribute('data-side', side);
-        btn.appendChild(svg(PLUS));
+        btn.appendChild(el('span', 'qm-table-add-bar'));
         return btn;
     }
-    /**
-     * A column's alignment: the one op with no gesture, so the one surface the chrome
-     * still raises. It rides the column's SELECTION, so at most ONE is ever live, which
-     * is why there is one cluster re-parented into the selected column rather than one
-     * built per column and hidden.
-     */
-    alignCluster(s) {
-        const labels = {
-            none: s.tableAlignDefault,
-            left: s.tableAlignLeft,
-            center: s.tableAlignCenter,
-            right: s.tableAlignRight
-        };
-        const box = el('div', 'qm-table-align');
-        box.setAttribute('role', 'group');
-        for (const align of ALIGNS) {
-            const btn = chromeButton('qm-table-align-item', labels[align], () => {
-                const at = this.selected;
-                if (!at || at.axis !== 'column')
-                    return;
-                this.write(setAlign(this.props(), at.index, align));
-                this.selectLine(at);
-            });
-            btn.setAttribute('data-align', align);
-            btn.appendChild(svg(ALIGN_PATHS[align]));
-            box.appendChild(btn);
-        }
-        return box;
-    }
-    /** Hang the cluster off the selected column's header cell and mark the alignment
-     *  that column already has: an exclusive set, so it shows which one is live. */
-    paintAlign() {
-        const cluster = this.align;
-        if (!cluster)
-            return;
-        const line = this.selected;
-        if (!line || line.axis !== 'column') {
-            cluster.remove();
-            return;
-        }
-        const head = this.cells.find((m) => m.r === 0 && m.c === line.index);
-        if (!head)
-            return;
-        head.box.appendChild(cluster);
-        cluster.setAttribute('aria-label', this.deps.strings().tableSelectColumn(line.index + 1));
-        const align = this.props().aligns[line.index] ?? 'none';
-        for (const btn of cluster.querySelectorAll('.qm-table-align-item'))
-            btn.setAttribute('aria-pressed', String(btn.getAttribute('data-align') === align));
-    }
     mountCell(box, host, r, c, s) {
         const props = this.props();
         const name = s.tableCell(r === 0 ? s.tableHeaderRow : s.tableRow(r), s.tableColumn(c + 1));
@@ -780,9 +958,10 @@ class TableIslandView {
                 const now = this.props();
                 this.write(withCell(now, r, c, cellFromDoc(next.doc, cellAt(now, r, c))));
             },
+            handlePaste: (_view, event) => this.pasteIntoCell(r, c, event),
             handleDOMEvents: {
                 focus: () => {
-                    this.clearLine();
+                    this.clearSelection();
                     this.deps.onCellFocus();
                     return false;
                 }
@@ -799,7 +978,7 @@ class TableIslandView {
     /**
      * Commit a new rectangle onto the node. `setNodeMarkup` is an ordinary PM
      * transaction, so the field lowers it through the island channel and the whole
-     * op is one commit and one undo step, which is why every op writes a WHOLE
+     * 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) {
@@ -831,11 +1010,11 @@ class TableIslandView {
     }
     /**
      * A cell's keys. Traversal is the island's link in the leaf's chain
-     * (VISUAL_EDITOR §Chrome), except that it binds on the NESTED view: the outer
+     * (VISUAL_EDITOR §Chrome), except that it binds on the nested view: the outer
      * keymap never sees a keystroke a cell handled (`stopEvent`).
      *
      * Enter is the next row, forced: a `TableCell` has one `text` and no line
-     * concept, and `continues` is a LINE flag with no cell analogue, so a newline in
+     * concept, and `continues` is a line flag with no cell analogue, so a newline in
      * a cell has no representation to be a preference about.
      */
     cellKeys(r, c) {
@@ -862,6 +1041,15 @@ class TableIslandView {
                 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`.
+        const erase = () => {
+            if (!this.selected)
+                return false;
+            this.deleteSelection();
+            return true;
+        };
         return {
             ...marks,
             // One undo stack per leaf: a cell carries no history of its own, so Mod-z
@@ -869,16 +1057,12 @@ class TableIslandView {
             'Mod-z': () => undo(this.outer.state, this.outer.dispatch),
             'Mod-y': () => redo(this.outer.state, this.outer.dispatch),
             'Shift-Mod-z': () => redo(this.outer.state, this.outer.dispatch),
+            Backspace: erase,
+            Delete: erase,
             ArrowUp: walk('up'),
             ArrowDown: walk('down'),
-            Tab: () => {
-                this.step(r, c, 1);
-                return true;
-            },
-            'Shift-Tab': () => {
-                this.step(r, c, -1);
-                return true;
-            },
+            Tab: () => this.step(r, c, 1),
+            'Shift-Tab': () => this.step(r, c, -1),
             Enter: () => {
                 const props = this.props();
                 if (r === rowCount(props) - 1)
@@ -895,9 +1079,18 @@ class TableIslandView {
             }
         };
     }
-    /** Tab's traversal: the next (or previous) cell in reading order. Past the last
-     *  cell it APPENDS a row, which is the growth affordance the keyboard has; before
-     *  the first it declines and the caret stays. */
+    /**
+     * Tab's traversal: the next (or previous) cell in reading order. Past the last cell it
+     * appends a row, which is the growth affordance the keyboard has.
+     *
+     * It declines at both ends, and that is the island's keyboard exit: the key is not
+     * swallowed, so the browser moves the focus out of the grid the way it moved it in.
+     * Backward that end is the first cell. Forward it is the last cell of an empty
+     * trailing row: a row is on offer, and walking off the end of an unwritten one
+     * refuses it, the reading an empty item's Enter takes in a list (`lists.ts`). Growth
+     * that never declined leaves Tab no forward exit at all, every press past the last
+     * cell appending.
+     */
     step(r, c, dir) {
         const props = this.props();
         const cols = columnCount(props);
@@ -913,12 +1106,15 @@ class TableIslandView {
             nc = cols - 1;
         }
         if (nr < 0)
-            return;
+            return false;
         if (nr >= rows) {
+            if (rowEmpty(props, r))
+                return false;
             this.write(insertRow(props, r), { r: nr, c: 0 });
-            return;
         }
-        this.focusCell(nr, nc);
+        else
+            this.focusCell(nr, nc);
+        return true;
     }
 }
 /** The `island_block` node view: a table island's editing surface, and the literal