@quillmark/svelte 0.20.0 → 0.21.0

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

@@ -15,16 +15,18 @@
 // 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, the held first row's
+// header toggle, or a sweep's cell alignment. 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 { breakKeymap } from './breaks.js';
 import { cellSchema } from './schema.js';
@@ -158,10 +160,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 +189,19 @@ 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();
 class TableIslandView {
     node;
     outer;
@@ -225,6 +238,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 +249,8 @@ 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.render();
     }
     // ── PM's NodeView contract ────────────────────────────────────────────────
@@ -296,6 +313,8 @@ class TableIslandView {
     }
     destroy() {
         this.dom.removeEventListener('mousedown', this.onPointerDown);
+        this.dom.removeEventListener('mouseover', this.onHover);
+        this.dom.removeEventListener('mouseleave', this.onLeave);
         this.endDrag();
         this.endSweep();
         this.endResize();
@@ -355,6 +374,31 @@ 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 = [];
+    };
     /** 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 +443,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 +555,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 +586,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 +610,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;
@@ -593,19 +655,21 @@ class TableIslandView {
             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,25 +727,27 @@ 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)
-            this.write(setAlign(props, c, to));
+        const last = rowCount(props) - 1;
+        const own = Array.from({ length: last + 1 }, (_, r) => cellAt(props, r, c)).some((cell) => cell.align !== undefined);
+        if (props.aligns[c] !== to || own)
+            this.write(setCellLayout(setAlign(props, c, to), 0, c, last, c, 'align', undefined));
         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}). */
+    /** The swept cells' cluster: up over the first cell of a sweep, each toggle pressed
+     *  where every cell in it 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. A named line raises none: a grip is pressed to move or delete its line. */
     paintCellCluster(props) {
         this.cellCluster?.remove();
         this.cellCluster = undefined;
         const held = this.selected;
-        if (!held || this.lineOn('column') !== undefined)
+        if (!held?.swept)
             return;
         const first = this.cells.find((m) => m.r === held.r0 && m.c === held.c0);
         if (!first)
@@ -719,11 +785,11 @@ class TableIslandView {
         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 });
+    /** Lay every held cell 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) {
+        const held = this.selected;
         if (!held)
             return;
         const props = this.props();
@@ -1013,11 +1079,16 @@ class TableIslandView {
         this.endResize();
         this.teardownCells();
         this.grips.clear();
+        this.near = [];
         this.clusters = [];
         this.headerCluster = undefined;
         this.dom.textContent = '';
         const props = tablePropsOfNode(this.node);
         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'}]`));
@@ -1146,11 +1217,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');
@@ -1253,6 +1324,7 @@ class TableIslandView {
             handleDOMEvents: {
                 focus: () => {
                     this.clearSelection();
+                    this.retireIsland();
                     this.deps.onCellFocus();
                     return false;
                 }
@@ -1297,9 +1369,9 @@ 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, or at its start, 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 +1379,24 @@ class TableIslandView {
         if (!mounted)
             return;
         const { view } = mounted;
+        const at = edge === 'start' ? Selection.atStart(view.state.doc) : Selection.atEnd(view.state.doc);
         // 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 +1414,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 +1454,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 +1501,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 +1541,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 +1559,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 +1601,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) {

package/dist/core/rungs.d.ts

@@ -6,3 +6,9 @@ export declare function rungStyle(node: Element): CSSStyleDeclaration;
  *  empty). No rung, no motion: a fallback here would be the scale restated in the one
  *  place `check:style` cannot read. */
 export declare function rungMs(style: CSSStyleDeclaration, rung: string): number | undefined;
+/** `steps` of the space rung off `node`'s root, in px: a floating surface's offset from
+ *  its anchor. `--_qm-space` is registered, so it computes to px where the rungs derived
+ *  from it compute to their expressions; hence the multiple rather than a read of
+ *  `--_qm-space-2`. `undefined` where the derivation is out of reach, as for
+ *  {@link rungMs}. */
+export declare function spacePx(node: Element | undefined, steps?: number): number | undefined;

package/dist/core/rungs.js

@@ -22,3 +22,14 @@ export function rungMs(style, rung) {
         return undefined;
     return raw.endsWith('ms') ? n : n * 1000;
 }
+/** `steps` of the space rung off `node`'s root, in px: a floating surface's offset from
+ *  its anchor. `--_qm-space` is registered, so it computes to px where the rungs derived
+ *  from it compute to their expressions; hence the multiple rather than a read of
+ *  `--_qm-space-2`. `undefined` where the derivation is out of reach, as for
+ *  {@link rungMs}. */
+export function spacePx(node, steps = 1) {
+    if (!node)
+        return undefined;
+    const n = Number.parseFloat(rungStyle(node).getPropertyValue('--_qm-space'));
+    return Number.isFinite(n) ? n * steps : undefined;
+}