quoin-editor 2.0.5 → 2.1.0

package/dist/{chunk-556PFYES.js → chunk-WK4UGDZN.js}

@@ -1,14 +1,13 @@
-import { Table, FOCUS_RING, interceptKeys, DropdownMenuCheckboxItem, DropdownMenuSeparator, DropdownMenuRadioGroup, DropdownMenuRadioItem, MenuIcon, keepFocus, Plus, DropdownMenu, DropdownMenuTrigger, GripVertical, GripHorizontal, DropdownMenuContent, bubblePart, returnFocusToText, AlignLeft, AlignCenter, AlignRight, DropdownMenuItem, ArrowUpToLine, ArrowDownToLine, ArrowUp, ArrowDown, Trash, ArrowLeftToLine, ArrowRightToLine, ArrowLeft, ArrowRight } from './chunk-G6NBQYMM.js';
-import { useEditorState, EditableRegion, useReadOnly, useIsomorphicLayoutEffect, isComposingKey, handleCopy, inlineDirection, neighbourBlock, NATIVE_INTERACTION, posToDom, isOnFirstLine, isOnLastLine, caretClientRect, lineEdgeRect, caretFromPoint, domToPos } from './chunk-2BPXVQBP.js';
+import { Table, FOCUS_RING, interceptKeys, watchDirection, DropdownMenuCheckboxItem, DropdownMenuSeparator, DropdownMenuRadioGroup, DropdownMenuRadioItem, MenuIcon, keepFocus, Plus, DropdownMenu, DropdownMenuTrigger, GripVertical, GripHorizontal, DropdownMenuContent, bubblePart, returnFocusToText, AlignLeft, AlignCenter, AlignRight, DropdownMenuItem, ArrowUpToLine, ArrowDownToLine, ArrowUp, ArrowDown, Trash, ArrowLeftToLine, ArrowRightToLine, ArrowLeft, ArrowRight } from './chunk-ZGFZRVQA.js';
+import { useEditorState, EditableRegion, useReadOnly, useIsomorphicLayoutEffect, isComposingKey, neighbourBlock, NATIVE_INTERACTION, inlineDirection, posToDom, isOnFirstLine, isOnLastLine, caretClientRect, lineEdgeRect, caretFromPoint, domToPos, arrowAsWritten } from './chunk-MO4UMXMT.js';
 import { mergeLabels } from './chunk-DLQCTGC3.js';
-import { createPluginKey, markCoverage, toggleMark, setMark, Transaction, textSelection, headBlockId, isParagraph, regionLength, primaryRegion, replaceBlockStep, insertBlocksStep, descendantsEnd, defineExtension, replaceInlineStep, isCollapsed, insertHardBreak, insertTextAt } from './chunk-5RBMZGKV.js';
-import { cellKey, blockById, inlineLength, requireBlockIndex, newId, countOf, sameItems, equalInline } from './chunk-7Y4B7NHO.js';
+import { createPluginKey, markCoverage, toggleMark, setMark, Transaction, textSelection, cellOf, cellsBetween, headBlockId, isParagraph, regionLength, primaryRegion, replaceBlockStep, insertBlocksStep, descendantsEnd, defineExtension, deleteRange, isCollapsed, insertHardBreak, sliceFromClipboard, orderedRange, replaceInlineStep, insertTextAt, isTextFlow } from './chunk-TL2MJOWM.js';
+import { cellKey, blockById, inlineLength, requireBlockIndex, newId, countOf, createBlockCodec, validWidths, sameItems, equalInline } from './chunk-I34BFOLL.js';
 import { memo, useCallback, useRef, useState, useEffect, useSyncExternalStore, Fragment as Fragment$1 } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
 // src/engine/commands/table-shape.ts
-var CELL = /^cell:(\d+):(\d+)$/;
 var tableShape = (block) => ({
   rows: countOf(block.attrs.rows),
   cols: countOf(block.attrs.cols)
@@ -18,12 +17,7 @@ var columnAligns = (block, cols) => Array.from({ length: cols }, (_, col) => {
   const align = Array.isArray(block.attrs.align) ? block.attrs.align[col] : null;
   return ALIGNS.includes(align) ? align : null;
 });
-var validWidths = (value, cols) => Array.isArray(value) && value.length === cols && value.every((width) => typeof width === "number" && width > 0) ? value : null;
 var storedWidths = (block, cols) => validWidths(block.attrs.widths, cols);
-function cellOf(region) {
-  const match = CELL.exec(region);
-  return match === null ? null : [Number(match[1]), Number(match[2])];
-}
 function tableBlock(doc, id) {
   const block = blockById(doc, id);
   return block?.type === "TABLE" ? block : null;
@@ -83,85 +77,23 @@ function cellSelection(state) {
 }
 var between = (value, a, b) => value >= Math.min(a, b) && value <= Math.max(a, b);
 var rangeHasCell = ({ anchor, head }, [row, col]) => between(row, anchor[0], head[0]) && between(col, anchor[1], head[1]);
-function cellsInRange({ anchor, head }) {
-  const cells = [];
-  for (let row = Math.min(anchor[0], head[0]); row <= Math.max(anchor[0], head[0]); row++) {
-    for (let col = Math.min(anchor[1], head[1]); col <= Math.max(anchor[1], head[1]); col++) cells.push([row, col]);
-  }
-  return cells;
-}
+var cellsInRange = ({ anchor, head }) => cellsBetween(anchor, head);
 function selectCells(blockId, anchor, head) {
   return (state, dispatch) => {
     const block = tableBlock(state.doc, blockId);
     const { rows, cols } = block === null ? { rows: 0, cols: 0 } : tableShape(block);
     const inside = ([row, col]) => isIndex(row, rows) && isIndex(col, cols);
     if (block === null || !inside(anchor) || !inside(head)) return false;
-    const end2 = cellKey(...head);
+    const end = cellKey(...head);
     const selection = textSelection(
       { block: blockId, region: cellKey(...anchor), offset: 0 },
-      { block: blockId, region: end2, offset: inlineLength(block.regions[end2] ?? []) }
+      { block: blockId, region: end, offset: inlineLength(block.regions[end] ?? []) }
     );
     dispatch?.(new Transaction(state).setSelection(selection));
     return true;
   };
 }
 
-// src/engine/commands/cell-commands.ts
-function filledCells(doc, range) {
-  const regions = blockById(doc, range.block)?.regions ?? {};
-  return cellsInRange(range).flatMap((cell) => {
-    const region = cellKey(...cell);
-    const length = inlineLength(regions[region] ?? []);
-    return length > 0 ? [{ region, length }] : [];
-  });
-}
-function firstCell({ block, anchor, head }) {
-  return { block, region: cellKey(Math.min(anchor[0], head[0]), Math.min(anchor[1], head[1])), offset: 0 };
-}
-function emptied(state, range) {
-  const tr = new Transaction(state);
-  for (const { region, length } of filledCells(state.doc, range)) {
-    tr.step(replaceInlineStep(range.block, region, 0, length, []));
-  }
-  return tr;
-}
-var deleteCellContents = (state, dispatch) => {
-  const range = cellSelection(state);
-  if (range === null) return false;
-  dispatch?.(emptied(state, range).setSelection(textSelection(firstCell(range))));
-  return true;
-};
-function typeOverCells(text) {
-  return (state, dispatch) => {
-    const range = cellSelection(state);
-    if (range === null || text === "") return false;
-    const tr = emptied(state, range);
-    dispatch?.(tr.setSelection(textSelection(insertTextAt(tr, state.schema, firstCell(range), text))));
-    return true;
-  };
-}
-function setCellsMark(type, attrs) {
-  return (state, dispatch) => {
-    const range = cellSelection(state);
-    const cells = range === null ? [] : filledCells(state.doc, range);
-    const regions = range === null ? void 0 : blockById(state.doc, range.block)?.regions;
-    if (range === null || regions === void 0 || cells.length === 0) return false;
-    const carried = cells.every(({ region }) => markCoverage(regions[region], type, attrs).every);
-    const mark = carried ? toggleMark(type, attrs) : setMark(type, attrs);
-    const tr = new Transaction(state);
-    for (const { region, length } of cells) {
-      const start = { block: range.block, region, offset: 0 };
-      const whole = textSelection(start, { ...start, offset: length });
-      mark({ ...state, doc: tr.doc, selection: whole, storedMarks: null }, (cell) => {
-        for (const step of cell.steps) tr.step(step);
-      });
-    }
-    if (!tr.docChanged) return false;
-    dispatch?.(tr);
-    return true;
-  };
-}
-
 // src/extensions/table/controls-slot.ts
 var CONTROLS_SLOT = "data-quoin-table-controls";
 var controlsSlot = (controller, blockId) => controller.blockElement(blockId)?.querySelector(`[${CONTROLS_SLOT}]`) ?? null;
@@ -222,6 +154,60 @@ function useWidthPreview(controller, blockId) {
   return useSyncExternalStore(store.subscribe, read, read);
 }
 
+// src/engine/commands/cell-commands.ts
+function filledCells(doc, range) {
+  const regions = blockById(doc, range.block)?.regions ?? {};
+  return cellsInRange(range).flatMap((cell) => {
+    const region = cellKey(...cell);
+    const length = inlineLength(regions[region] ?? []);
+    return length > 0 ? [{ region, length }] : [];
+  });
+}
+function overCells(state, write) {
+  const { selection } = state;
+  if (cellSelection(state) === null || selection?.kind !== "text") return null;
+  const tr = new Transaction(state);
+  return tr.setSelection(textSelection(write(tr, deleteRange(tr, state.schema, selection.anchor, selection.head))));
+}
+var deleteCellContents = (state, dispatch) => {
+  const tr = overCells(state, (_, caret) => caret);
+  if (tr !== null) dispatch?.(tr);
+  return tr !== null;
+};
+function typeOverCells(content) {
+  return (state, dispatch) => {
+    if (content.length === 0) return false;
+    const tr = overCells(state, (into, caret) => {
+      if (typeof content === "string") return insertTextAt(into, state.schema, caret, content);
+      into.step(replaceInlineStep(caret.block, caret.region, caret.offset, caret.offset, content));
+      return { ...caret, offset: caret.offset + inlineLength(content) };
+    });
+    if (tr !== null) dispatch?.(tr);
+    return tr !== null;
+  };
+}
+function setCellsMark(type, attrs) {
+  return (state, dispatch) => {
+    const range = cellSelection(state);
+    const cells = range === null ? [] : filledCells(state.doc, range);
+    const regions = range === null ? void 0 : blockById(state.doc, range.block)?.regions;
+    if (range === null || regions === void 0 || cells.length === 0) return false;
+    const carried = cells.every(({ region }) => markCoverage(regions[region], type, attrs).every);
+    const mark = carried ? toggleMark(type, attrs) : setMark(type, attrs);
+    const tr = new Transaction(state);
+    for (const { region, length } of cells) {
+      const start = { block: range.block, region, offset: 0 };
+      const whole = textSelection(start, { ...start, offset: length });
+      mark({ ...state, doc: tr.doc, selection: whole, storedMarks: null }, (cell) => {
+        for (const step of cell.steps) tr.step(step);
+      });
+    }
+    if (!tr.docChanged) return false;
+    dispatch?.(tr);
+    return true;
+  };
+}
+
 // src/engine/commands/table-commands.ts
 function changeTable(blockId, change, plan) {
   return (state, dispatch) => {
@@ -440,7 +426,7 @@ var tableKeymap = {
 };
 
 // src/extensions/table/use-cell-press.ts
-function cellOf2(element) {
+function pressedCell(element) {
   const row = element.getAttribute("data-row");
   const col = element.getAttribute("data-col");
   return element.matches("td, th") && row !== null && col !== null ? [Number(row), Number(col)] : null;
@@ -450,7 +436,7 @@ function useCellPress(controller, blockId, table, editable) {
     const element = table.current;
     if (!editable || element === null) return;
     const onPointerDown = (event) => {
-      const cell = event.button === 0 && event.pointerType !== "touch" ? cellOf2(event.target) : null;
+      const cell = event.button === 0 && event.pointerType !== "touch" ? pressedCell(event.target) : null;
       const block = cell && blockById(controller.editor.state.doc, blockId);
       if (!cell || !block) return;
       event.preventDefault();
@@ -479,87 +465,6 @@ function useRevealCell(controller, blockId) {
     host.closest("td, th")?.scrollIntoView?.({ block: "nearest", inline: "nearest" });
   }, [controller, blockId, region]);
 }
-
-// src/extensions/table/vertical-cell-move.ts
-var VERTICAL = { ArrowUp: -1, ArrowDown: 1 };
-function caretAtGoal(controller, blockId, cell, direction) {
-  const region = cellKey(...cell);
-  const host = controller.registry.get(blockId, region);
-  const { goalX } = controller;
-  const line = host && lineEdgeRect(host, direction < 0);
-  if (!host || !line || goalX === null) return null;
-  const box = host.getBoundingClientRect();
-  const x = Math.min(Math.max(goalX, box.left), box.right - 1);
-  const point = caretFromPoint(host.ownerDocument, x, line.top + line.height / 2);
-  const pos = point && domToPos(controller.registry, point.node, point.offset);
-  return pos && pos.block === blockId && pos.region === region ? pos : null;
-}
-var plainArrow = (event) => event.altKey || event.ctrlKey || event.metaKey ? void 0 : VERTICAL[event.key];
-function caretOnEdgeLine(controller, head, direction) {
-  const host = controller.registry.get(head.block, head.region);
-  const point = posToDom(controller.registry, head);
-  if (!host || !point || !(direction < 0 ? isOnFirstLine(host, point) : isOnLastLine(host, point))) return null;
-  return { left: caretClientRect(point)?.left ?? null };
-}
-function columnAt(controller, blockId, row, x) {
-  const cells = Array.from(controller.blockElement(blockId)?.querySelector("table")?.rows[row]?.cells ?? []);
-  const index = cells.findIndex((cell) => x < cell.getBoundingClientRect().right);
-  return index === -1 ? Math.max(cells.length - 1, 0) : index;
-}
-function enterTable(controller, blockId, event) {
-  const direction = plainArrow(event);
-  const { state } = controller.editor;
-  const { selection } = state;
-  const block = tableBlock(state.doc, blockId);
-  if (direction === void 0 || event.shiftKey || block === null || selection?.kind !== "text") return false;
-  if (!isCollapsed(selection) || neighbourBlock(state.doc, selection.head.block, direction)?.id !== blockId) return false;
-  const caret = caretOnEdgeLine(controller, selection.head, direction);
-  if (caret === null) return false;
-  controller.goalX ??= caret.left;
-  const { rows, cols } = tableShape(block);
-  const row = direction > 0 ? 0 : rows - 1;
-  const { goalX } = controller;
-  const cell = [row, goalX === null ? direction > 0 ? 0 : cols - 1 : columnAt(controller, blockId, row, goalX)];
-  const pos = caretAtGoal(controller, blockId, cell, direction) ?? cellPos(block, cell, direction < 0);
-  controller.dispatch(controller.editor.createTransaction().setSelection(textSelection(pos)));
-  return true;
-}
-function moveBetweenRows(controller, blockId, event) {
-  const direction = plainArrow(event);
-  const { state } = controller.editor;
-  const caret = headCell(state);
-  if (direction === void 0 || caret === null || caret.block.id !== blockId || state.selection?.kind !== "text") {
-    return false;
-  }
-  const target = [caret.cell[0] + direction, caret.cell[1]];
-  if (target[0] < 0 || target[0] >= caret.shape.rows) return false;
-  const edge = caretOnEdgeLine(controller, caret.head, direction);
-  if (edge === null) return false;
-  controller.goalX ??= edge.left;
-  const pos = caretAtGoal(controller, blockId, target, direction) ?? cellPos(caret.block, target, direction < 0);
-  const selection = event.shiftKey ? textSelection(state.selection.anchor, pos) : textSelection(pos);
-  controller.dispatch(controller.editor.createTransaction().setSelection(selection));
-  return true;
-}
-
-// src/extensions/table/use-table-keys.ts
-var printable = (event) => [...event.key].length === 1 && !event.ctrlKey && !event.metaKey;
-function typeOver(controller, blockId, event) {
-  if (cellSelection(controller.editor.state)?.block !== blockId || !printable(event)) return false;
-  return controller.run(typeOverCells(event.key));
-}
-function useTableKeys(controller, blockId, editable) {
-  useEffect(() => {
-    if (!editable) return;
-    const intercept = (event) => {
-      if (isComposingKey(controller, event)) return false;
-      const handled = typeOver(controller, blockId, event) || moveBetweenRows(controller, blockId, event) || enterTable(controller, blockId, event);
-      if (handled) event.preventDefault();
-      return handled;
-    };
-    return interceptKeys(controller, intercept);
-  }, [controller, blockId, editable]);
-}
 var indexes = (from, to) => Array.from({ length: Math.max(to - from, 0) }, (_, i) => from + i);
 function TableBlock({ block, controller, labels }) {
   const readOnly = useReadOnly(controller);
@@ -569,7 +474,6 @@ function TableBlock({ block, controller, labels }) {
   const aligns = columnAligns(block, cols);
   const preview = useWidthPreview(controller, block.id);
   const widths = preview?.length === cols ? preview : storedWidths(block, cols);
-  useTableKeys(controller, block.id, !readOnly);
   useCellPress(controller, block.id, table, !readOnly);
   useRevealCell(controller, block.id);
   const row = (index) => /* @__PURE__ */ jsx("tr", { children: indexes(0, cols).map((col) => /* @__PURE__ */ jsx(
@@ -630,7 +534,7 @@ var STEP = 10;
 var LARGE_STEP = 50;
 var clampWidth = (px) => Math.min(MAX_COLUMN_WIDTH, Math.max(MIN_COLUMN_WIDTH, Math.round(px)));
 function ColumnResizer(props) {
-  const { controller, labels, blockId, col, drawn, style, resizerRef, onHold, onBack } = props;
+  const { controller, labels, blockId, col, drawn, direction, style, resizerRef, onHold, onBack } = props;
   const drag = useRef(null);
   const width = Math.round(drawn[col] ?? 0);
   const store = tableUiStore(controller);
@@ -641,8 +545,9 @@ function ColumnResizer(props) {
     if (isComposingKey(controller, event.nativeEvent)) return;
     const step = event.shiftKey ? LARGE_STEP : STEP;
     const tab = event.key === "Tab" && !event.altKey && !event.ctrlKey && !event.metaKey;
-    if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
-      const next = clampWidth(width + (event.key === "ArrowLeft" ? -step : step));
+    const arrow = arrowAsWritten(event.key, direction);
+    if (arrow === "ArrowLeft" || arrow === "ArrowRight") {
+      const next = clampWidth(width + (arrow === "ArrowLeft" ? -step : step));
       if (next !== width) write(next, drawn);
     } else if (tab && event.shiftKey) onBack();
     else if (tab || event.key === "Escape") controller.focus();
@@ -658,7 +563,8 @@ function ColumnResizer(props) {
   const onPointerMove = (event) => {
     const current = drag.current;
     if (current === null) return;
-    current.to = clampWidth(current.widths[col] + event.clientX - current.x);
+    const moved = event.clientX - current.x;
+    current.to = clampWidth(current.widths[col] + (direction === "rtl" ? -moved : moved));
     const widths = current.widths.map((px, i) => i === col ? current.to ?? px : px);
     store.set({ preview: { block: blockId, widths } });
   };
@@ -675,7 +581,7 @@ function ColumnResizer(props) {
     },
     [store]
   );
-  const end2 = () => {
+  const end = () => {
     const ended = stop();
     if (ended?.to != null && ended.to !== Math.round(ended.widths[col])) write(ended.to, ended.widths);
   };
@@ -697,7 +603,7 @@ function ColumnResizer(props) {
       onKeyDown,
       onPointerDown,
       onPointerMove,
-      onPointerUp: end2,
+      onPointerUp: end,
       onPointerCancel: stop
     }
   );
@@ -755,6 +661,49 @@ function HandleMenu({ controller, axis, label, style, items, open, onOpenChange,
   ] });
 }
 
+// src/extensions/table/table-geometry.ts
+function measureTable(table, origin) {
+  const box = table.getBoundingClientRect();
+  const first = table.rows[0];
+  return {
+    left: box.left - origin.left,
+    top: box.top - origin.top,
+    width: box.width,
+    height: box.height,
+    rows: Array.from(table.rows, (row) => {
+      const rect = row.getBoundingClientRect();
+      return { start: rect.top - origin.top, size: rect.height };
+    }),
+    cols: Array.from(first?.cells ?? [], (cell) => {
+      const rect = cell.getBoundingClientRect();
+      return { start: rect.left - origin.left, size: rect.width };
+    }),
+    direction: inlineDirection(table)
+  };
+}
+var sameSpans = (a, b) => a.length === b.length && a.every((span, i) => span.start === b[i].start && span.size === b[i].size);
+var sameGeometry = (a, b) => a === b || a !== null && b !== null && a.left === b.left && a.top === b.top && a.width === b.width && a.height === b.height && a.direction === b.direction && sameSpans(a.rows, b.rows) && sameSpans(a.cols, b.cols);
+var spanEnd = (span) => span.start + span.size;
+var leadingEdge = (span, direction) => direction === "rtl" ? spanEnd(span) : span.start;
+var trailingEdge = (span, direction) => direction === "rtl" ? span.start : spanEnd(span);
+function spanAt(spans, at) {
+  const inside = spans.findIndex((span) => span.start <= at && at < spanEnd(span));
+  if (inside !== -1) return inside;
+  const distances = spans.map((span) => Math.min(Math.abs(span.start - at), Math.abs(spanEnd(span) - at)));
+  return distances.indexOf(Math.min(...distances));
+}
+function edgeNear(spans, at, reach, direction = "ltr") {
+  if (spans.length === 0) return null;
+  const last = trailingEdge(spans[spans.length - 1], direction);
+  const edges = [...spans.map((span) => leadingEdge(span, direction)), last];
+  const index = edges.findIndex((edge) => Math.abs(edge - at) <= reach);
+  return index === -1 ? null : index;
+}
+function edgeAt(spans, edge, direction = "ltr") {
+  if (edge === null || !Number.isInteger(edge) || edge < 0 || edge > spans.length || spans.length === 0) return null;
+  return edge === spans.length ? trailingEdge(spans[edge - 1], direction) : leadingEdge(spans[edge], direction);
+}
+
 // src/extensions/table/table-menu-items.ts
 var item = (id, label, icon, command, done, options = {}) => ({ id, label, icon, command, done, ...options });
 function rowMenuItems(labels, blockId, row, { rows }) {
@@ -791,16 +740,12 @@ var alignItems = (labels) => [
   { value: "right", label: labels.alignRight, icon: AlignRight, done: labels.alignedRight }
 ];
 var BESIDE = 4;
-var end = (span) => span.start + span.size;
-function edgeOf(spans, edge) {
-  if (edge === null || !Number.isInteger(edge) || edge < 0 || edge > spans.length || spans.length === 0) return null;
-  return edge === spans.length ? end(spans[edge - 1]) : spans[edge].start;
-}
+var besideRows = ({ left, width, direction }) => direction === "rtl" ? left + width + BESIDE : left - BESIDE;
 var middle = (span) => span.start + span.size / 2;
 var isTab = (event) => event.key === "Tab" && !event.altKey && !event.ctrlKey && !event.metaKey;
 function TableHandles(props) {
   const { controller, labels, block, target, geometry, menu, onMenu, onHold, focusRequested, onFocused } = props;
-  const direction = controller.root === null ? "ltr" : inlineDirection(controller.root);
+  const { direction } = geometry;
   const rowHandle = useRef(null);
   const columnHandle = useRef(null);
   const resizer = useRef(null);
@@ -810,8 +755,8 @@ function TableHandles(props) {
   const align = columnAligns(block, shape.cols)[col];
   const drawn = geometry.cols.map((span) => span.size);
   const { rowEdge, colEdge } = target;
-  const rowInsertAt = edgeOf(geometry.rows, rowEdge);
-  const columnInsertAt = edgeOf(geometry.cols, colEdge);
+  const rowInsertAt = edgeAt(geometry.rows, rowEdge);
+  const columnInsertAt = edgeAt(geometry.cols, colEdge, direction);
   useIsomorphicLayoutEffect(() => {
     if (!focusRequested) return;
     (columnHandle.current ?? rowHandle.current)?.focus();
@@ -841,7 +786,8 @@ function TableHandles(props) {
         blockId: block.id,
         col: index,
         drawn,
-        style: { left: end(span), top: geometry.top, height: geometry.height },
+        direction,
+        style: { left: trailingEdge(span, direction), top: geometry.top, height: geometry.height },
         resizerRef: index === col ? resizer : void 0,
         onHold,
         onBack: () => (columnHandle.current ?? rowHandle.current)?.focus()
@@ -855,7 +801,7 @@ function TableHandles(props) {
           controller,
           axis: "row",
           label: labels.rowOptions(row + 1),
-          style: place(geometry.left - BESIDE, middle(geometry.rows[row])),
+          style: place(besideRows(geometry), middle(geometry.rows[row])),
           items: rowMenuItems(labels, block.id, row, shape),
           open: menu === "row",
           onOpenChange: opener("row"),
@@ -907,7 +853,7 @@ function TableHandles(props) {
         "aria-label": labels.insertRowAt(rowEdge + 1),
         "data-axis": "row",
         className: "quoin-table-insert",
-        style: place(geometry.left - BESIDE, rowInsertAt),
+        style: place(besideRows(geometry), rowInsertAt),
         onPointerDown: keepFocus,
         onMouseDown: keepFocus,
         onClick: () => run(addRow(block.id, rowEdge), labels.rowInserted),
@@ -931,40 +877,6 @@ function TableHandles(props) {
     )
   ] });
 }
-
-// src/extensions/table/table-geometry.ts
-function measureTable(table, origin) {
-  const box = table.getBoundingClientRect();
-  const first = table.rows[0];
-  return {
-    left: box.left - origin.left,
-    top: box.top - origin.top,
-    width: box.width,
-    height: box.height,
-    rows: Array.from(table.rows, (row) => {
-      const rect = row.getBoundingClientRect();
-      return { start: rect.top - origin.top, size: rect.height };
-    }),
-    cols: Array.from(first?.cells ?? [], (cell) => {
-      const rect = cell.getBoundingClientRect();
-      return { start: rect.left - origin.left, size: rect.width };
-    })
-  };
-}
-var sameSpans = (a, b) => a.length === b.length && a.every((span, i) => span.start === b[i].start && span.size === b[i].size);
-var sameGeometry = (a, b) => a === b || a !== null && b !== null && a.left === b.left && a.top === b.top && a.width === b.width && a.height === b.height && sameSpans(a.rows, b.rows) && sameSpans(a.cols, b.cols);
-function spanAt(spans, at) {
-  const inside = spans.findIndex((span) => at < span.start + span.size);
-  return inside === -1 ? spans.length - 1 : inside;
-}
-function edgeNear(spans, at, reach) {
-  if (spans.length === 0) return null;
-  const edges = [spans[0].start, ...spans.map((span) => span.start + span.size)];
-  const index = edges.findIndex((edge) => Math.abs(edge - at) <= reach);
-  return index === -1 ? null : index;
-}
-
-// src/extensions/table/use-table-geometry.ts
 function useTableGeometry(controller, blockId, slot) {
   const [geometry, setGeometry] = useState(null);
   useIsomorphicLayoutEffect(() => {
@@ -982,31 +894,103 @@ function useTableGeometry(controller, blockId, slot) {
       frame = view.requestAnimationFrame(measure);
     };
     const unsubscribe = controller.editor.subscribe(later);
+    const unwatch = watchDirection(table, later);
     const observer = new ResizeObserver(later);
     observer.observe(table);
     view.addEventListener("resize", later);
     return () => {
       view.cancelAnimationFrame(frame);
       unsubscribe();
+      unwatch();
       observer.disconnect();
       view.removeEventListener("resize", later);
     };
   }, [controller, blockId, slot]);
   return geometry;
 }
-function useCutCells(controller) {
+
+// src/extensions/table/vertical-cell-move.ts
+var VERTICAL = { ArrowUp: -1, ArrowDown: 1 };
+function caretAtGoal(controller, blockId, cell, direction) {
+  const region = cellKey(...cell);
+  const host = controller.registry.get(blockId, region);
+  const { goalX } = controller;
+  const line = host && lineEdgeRect(host, direction < 0);
+  if (!host || !line || goalX === null) return null;
+  const box = host.getBoundingClientRect();
+  const x = Math.min(Math.max(goalX, box.left), box.right - 1);
+  const point = caretFromPoint(host.ownerDocument, x, line.top + line.height / 2);
+  const pos = point && domToPos(controller.registry, point.node, point.offset);
+  return pos && pos.block === blockId && pos.region === region ? pos : null;
+}
+var plainArrow = (event) => event.altKey || event.ctrlKey || event.metaKey ? void 0 : VERTICAL[event.key];
+function caretOnEdgeLine(controller, head, direction) {
+  const host = controller.registry.get(head.block, head.region);
+  const point = posToDom(controller.registry, head);
+  if (!host || !point || !(direction < 0 ? isOnFirstLine(host, point) : isOnLastLine(host, point))) return null;
+  return { left: caretClientRect(point)?.left ?? null };
+}
+function columnAt(controller, blockId, row, x) {
+  const cells = Array.from(controller.blockElement(blockId)?.querySelector("table")?.rows[row]?.cells ?? []);
+  const spans = cells.map((cell) => {
+    const { left, width } = cell.getBoundingClientRect();
+    return { start: left, size: width };
+  });
+  return Math.max(spanAt(spans, x), 0);
+}
+function enterTable(controller, event) {
+  const direction = plainArrow(event);
+  const { state } = controller.editor;
+  const { selection } = state;
+  if (direction === void 0 || event.shiftKey || selection?.kind !== "text" || !isCollapsed(selection)) return false;
+  const block = neighbourBlock(state.doc, selection.head.block, direction);
+  if (block?.type !== "TABLE") return false;
+  const blockId = block.id;
+  const caret = caretOnEdgeLine(controller, selection.head, direction);
+  if (caret === null) return false;
+  controller.goalX ??= caret.left;
+  const { rows, cols } = tableShape(block);
+  const row = direction > 0 ? 0 : rows - 1;
+  const { goalX } = controller;
+  const cell = [row, goalX === null ? direction > 0 ? 0 : cols - 1 : columnAt(controller, blockId, row, goalX)];
+  const pos = caretAtGoal(controller, blockId, cell, direction) ?? cellPos(block, cell, direction < 0);
+  controller.dispatch(controller.editor.createTransaction().setSelection(textSelection(pos)));
+  return true;
+}
+function moveBetweenRows(controller, event) {
+  const direction = plainArrow(event);
+  const { state } = controller.editor;
+  const caret = headCell(state);
+  if (direction === void 0 || caret === null || state.selection?.kind !== "text") return false;
+  const blockId = caret.block.id;
+  const target = [caret.cell[0] + direction, caret.cell[1]];
+  if (target[0] < 0 || target[0] >= caret.shape.rows) return false;
+  const edge = caretOnEdgeLine(controller, caret.head, direction);
+  if (edge === null) return false;
+  controller.goalX ??= edge.left;
+  const pos = caretAtGoal(controller, blockId, target, direction) ?? cellPos(caret.block, target, direction < 0);
+  const selection = event.shiftKey ? textSelection(state.selection.anchor, pos) : textSelection(pos);
+  controller.dispatch(controller.editor.createTransaction().setSelection(selection));
+  return true;
+}
+
+// src/extensions/table/use-table-keys.ts
+var printable = (event) => [...event.key].length === 1 && !event.ctrlKey && !event.metaKey;
+function typeOver(controller, event) {
+  if (cellSelection(controller.editor.state) === null || !printable(event)) return false;
+  return controller.run(typeOverCells(event.key));
+}
+function useTableKeys(controller, editable) {
   useEffect(() => {
-    const root = controller.root;
-    if (root === null) return;
-    const onCut = (event) => {
-      if (controller.readOnly || cellSelection(controller.editor.state) === null) return;
-      event.stopPropagation();
-      handleCopy(controller, event, false);
-      controller.run(deleteCellContents);
+    if (!editable) return;
+    const intercept = (event) => {
+      if (isComposingKey(controller, event)) return false;
+      const handled = typeOver(controller, event) || moveBetweenRows(controller, event) || enterTable(controller, event);
+      if (handled) event.preventDefault();
+      return handled;
     };
-    root.addEventListener("cut", onCut, true);
-    return () => root.removeEventListener("cut", onCut, true);
-  }, [controller]);
+    return interceptKeys(controller, intercept);
+  }, [controller, editable]);
 }
 var EDGE_ZONE = 24;
 var EDGE_REACH = 8;
@@ -1017,6 +1001,7 @@ function caretTarget(state) {
   const caret = headCell(state);
   return caret && { block: caret.block.id, row: caret.cell[0], col: caret.cell[1], rowEdge: null, colEdge: null };
 }
+var nearRowStarts = ({ left, width, direction }, x) => direction === "rtl" ? x > left + width - EDGE_ZONE : x < left + EDGE_ZONE;
 function pointerTarget(controller, event) {
   const blockId = controller.blockAt(event.target);
   const block = blockId === void 0 ? null : tableBlock(controller.editor.state.doc, blockId);
@@ -1027,8 +1012,8 @@ function pointerTarget(controller, event) {
   const row = spanAt(geometry.rows, y);
   const col = spanAt(geometry.cols, x);
   if (row < 0 || col < 0) return null;
-  const rowEdge = x < geometry.left + EDGE_ZONE ? edgeNear(geometry.rows, y, EDGE_REACH) : null;
-  const colEdge = y < geometry.top + EDGE_ZONE ? edgeNear(geometry.cols, x, EDGE_REACH) : null;
+  const rowEdge = nearRowStarts(geometry, x) ? edgeNear(geometry.rows, y, EDGE_REACH) : null;
+  const colEdge = y < geometry.top + EDGE_ZONE ? edgeNear(geometry.cols, x, EDGE_REACH, geometry.direction) : null;
   return { block: block.id, row, col, rowEdge, colEdge };
 }
 function shapeOf(state, blockId) {
@@ -1093,7 +1078,7 @@ function TableControls({ controller, labels }) {
   const [focusFor, setFocusFor] = useState(null);
   const [slot, setSlot] = useState(null);
   const target = useTableTarget(controller, held?.target ?? null);
-  useCutCells(controller);
+  useTableKeys(controller, !readOnly);
   const blockId = target?.block ?? null;
   const block = useEditorState(
     controller,
@@ -1130,10 +1115,12 @@ function TableControls({ controller, labels }) {
     setHeld((current) => current?.menu === null ? null : current);
   }, []);
   useIsomorphicLayoutEffect(() => {
-    const drawn = block === null || readOnly ? null : controlsSlot(controller, block.id);
-    setSlot((current) => current === drawn ? current : drawn);
+    const element = block === null || readOnly ? null : controlsSlot(controller, block.id);
+    const drawn = element && block && { block: block.id, element };
+    setSlot((current) => current?.element === drawn?.element && current?.block === drawn?.block ? current : drawn);
   });
-  if (target === null || block === null || readOnly || slot === null || !slot.isConnected) return null;
+  const placed = slot !== null && slot.block === block?.id && slot.element.isConnected ? slot.element : null;
+  if (target === null || block === null || readOnly || placed === null) return null;
   return createPortal(
     /* @__PURE__ */ jsx(
       PlacedHandles,
@@ -1142,7 +1129,7 @@ function TableControls({ controller, labels }) {
         labels,
         block,
         target,
-        slot,
+        slot: placed,
         menu: held?.menu ?? null,
         onMenu,
         onHold,
@@ -1151,7 +1138,7 @@ function TableControls({ controller, labels }) {
       },
       block.id
     ),
-    slot
+    placed
   );
 }
 function PlacedHandles({ slot, ...props }) {
@@ -1159,6 +1146,78 @@ function PlacedHandles({ slot, ...props }) {
   return geometry === null ? null : /* @__PURE__ */ jsx(TableHandles, { ...props, geometry });
 }
 
+// src/engine/commands/paste-cells.ts
+var unmoved = (cell) => cell;
+function grown(block, rows, cols) {
+  const shape = tableShape(block);
+  if (rows <= shape.rows && cols <= shape.cols) return null;
+  const added = Math.max(cols - shape.cols, 0);
+  const widths = storedWidths(block, shape.cols);
+  return rebuiltTable(block, {
+    rows: Math.max(rows, shape.rows),
+    cols: shape.cols + added,
+    source: (row, col) => row < shape.rows && col < shape.cols ? [row, col] : null,
+    target: unmoved,
+    landing: unmoved,
+    attrs: {
+      align: [...columnAligns(block, shape.cols), ...Array(added).fill(null)],
+      ...widths && { widths: [...widths, ...Array(added).fill(widths[shape.cols - 1])] }
+    }
+  });
+}
+function pasteCells(source) {
+  return (state, dispatch) => {
+    const { doc, schema, selection } = state;
+    const { rows, cols } = tableShape(source);
+    if (selection?.kind !== "text" || rows === 0 || cols === 0) return false;
+    const { anchor, head } = selection;
+    const inCells = anchor.block === head.block && cellOf(anchor.region) !== null && cellOf(head.region) !== null;
+    if (!inCells || tableBlock(doc, head.block) === null) return false;
+    const tr = new Transaction(state).setOrigin("paste");
+    const { from, to } = orderedRange(doc, anchor, head);
+    const [top, left] = cellOf(deleteRange(tr, schema, from, to).region);
+    const larger = grown(tableBlock(tr.doc, head.block), top + rows, left + cols);
+    if (larger !== null) tr.step(replaceBlockStep(larger));
+    const block = tableBlock(tr.doc, head.block);
+    let caret = head;
+    for (const [row, col] of cellsBetween([0, 0], [rows - 1, cols - 1])) {
+      const region = cellKey(top + row, left + col);
+      const content = source.regions[cellKey(row, col)] ?? [];
+      const length = regionLength(block, region);
+      if (length > 0 || content.length > 0) tr.step(replaceInlineStep(block.id, region, 0, length, content));
+      caret = { block: block.id, region, offset: inlineLength(content) };
+    }
+    dispatch?.(tr.setSelection(textSelection(caret)));
+    return true;
+  };
+}
+
+// src/extensions/table/paste-over-cells.ts
+function richBlocks(state, pasted) {
+  const slice = pasted?.json || pasted?.html ? sliceFromClipboard({ json: pasted.json, html: pasted.html }) : null;
+  if (slice === null) return null;
+  const codec = createBlockCodec(state.schema);
+  const blocks = slice.blocks.flatMap((block) => codec.toEngineBlocks(block));
+  return { blocks, open: slice.openStart && slice.openEnd };
+}
+function lineOf(state, rich) {
+  const [only] = rich?.blocks ?? [];
+  if (!rich?.open || rich.blocks.length !== 1 || !isTextFlow(state.schema, only)) return void 0;
+  return only.regions[primaryRegion(state.schema, only) ?? ""];
+}
+var pasteOverCells = {
+  name: "table-cells",
+  match(text, state, pasted) {
+    const { doc, selection } = state;
+    if (selection?.kind !== "text" || tableBlock(doc, selection.head.block) === null) return null;
+    const rich = richBlocks(state, pasted);
+    const [only] = rich?.blocks.length === 1 ? rich.blocks : [];
+    if (only?.type === "TABLE") return pasteCells(only);
+    if (cellSelection(state) === null) return null;
+    return typeOverCells(lineOf(state, rich) ?? text.replace(/\r\n?/g, "\n"));
+  }
+};
+
 // src/extensions/table/table-labels.ts
 var englishTableLabels = {
   table: "Table",
@@ -1212,10 +1271,6 @@ var tableSlashItem = (labels) => ({
   command: () => insertTable(NEW_TABLE.rows, NEW_TABLE.cols)
 });
 var ABOVE_CORE_KEYS = 200;
-var pasteOverCells = {
-  name: "table-cells",
-  match: (text, state) => cellSelection(state) === null ? null : typeOverCells(text.replace(/\r\n?/g, "\n"))
-};
 function tableExtension(options = {}) {
   const labels = resolveTableLabels(options.labels);
   const TableRenderer = (props) => /* @__PURE__ */ jsx(TableBlock, { ...props, labels });
@@ -1237,5 +1292,5 @@ function tableExtension(options = {}) {
 }
 
 export { addColumn, addRow, cellSelection, cellSelectionKey, cellSelectionPlugin, cellsInRange, deleteCellContents, englishTableLabels, insertTable, moveColumn, moveRow, removeColumn, removeRow, selectCells, setCellsMark, setColumnAlign, setColumnWidth, tableExtension, toggleHeaderRow };
-//# sourceMappingURL=chunk-556PFYES.js.map
-//# sourceMappingURL=chunk-556PFYES.js.map
+//# sourceMappingURL=chunk-WK4UGDZN.js.map
+//# sourceMappingURL=chunk-WK4UGDZN.js.map