quoin-editor 0.4.2 → 1.0.1

package/dist/chunk-UCXLRRWY.js

@@ -0,0 +1,1385 @@
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  FOCUS_RING,
+  MenuIcon,
+  bubblePart,
+  interceptKeys,
+  keepFocus,
+  returnFocusToText
+} from "./chunk-LE3F7WIP.js";
+import {
+  EditableRegion,
+  NATIVE_INTERACTION,
+  caretClientRect,
+  caretFromPoint,
+  domToPos,
+  handleCopy,
+  isComposingKey,
+  isOnFirstLine,
+  isOnLastLine,
+  lineEdgeRect,
+  neighbourBlock,
+  posToDom,
+  useEditorState,
+  useIsomorphicLayoutEffect,
+  useReadOnly
+} from "./chunk-SSIRYUCK.js";
+import {
+  Transaction,
+  createPluginKey,
+  defineExtension,
+  descendantsEnd,
+  headBlockId,
+  insertBlocksStep,
+  insertHardBreak,
+  insertTextAt,
+  isCollapsed,
+  isParagraph,
+  markCoverage,
+  primaryRegion,
+  regionLength,
+  replaceBlockStep,
+  replaceInlineStep,
+  setMark,
+  textSelection,
+  toggleMark
+} from "./chunk-UPSLDTLT.js";
+import {
+  blockById,
+  cellKey,
+  countOf,
+  equalInline,
+  inlineLength,
+  newId,
+  requireBlockIndex,
+  sameItems
+} from "./chunk-62WKUAQY.js";
+
+// src/engine/commands/table-shape.ts
+var CELL = /^cell:(\d+):(\d+)$/;
+var tableShape = (block) => ({
+  rows: countOf(block.attrs.rows),
+  cols: countOf(block.attrs.cols)
+});
+var ALIGNS = ["left", "center", "right"];
+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;
+}
+var isIndex = (index, length) => Number.isInteger(index) && index >= 0 && index < length;
+function movedOrder(length, from, to) {
+  const order = Array.from({ length }, (_, i) => i).filter((i) => i !== from);
+  order.splice(to, 0, from);
+  return order;
+}
+function rebuiltTable(block, plan) {
+  const regions = {};
+  for (let row = 0; row < plan.rows; row++) {
+    for (let col = 0; col < plan.cols; col++) {
+      const from = plan.source(row, col);
+      regions[cellKey(row, col)] = from === null ? [] : block.regions[cellKey(...from)] ?? [];
+    }
+  }
+  return { ...block, attrs: { ...block.attrs, ...plan.attrs, rows: plan.rows, cols: plan.cols }, regions };
+}
+function followedPos(pos, blockId, plan) {
+  const cell = pos.block === blockId ? cellOf(pos.region) : null;
+  if (cell === null) return pos;
+  const moved = plan.target(cell);
+  return moved === null ? { block: blockId, region: cellKey(...plan.landing(cell)), offset: 0 } : { ...pos, region: cellKey(...moved) };
+}
+function followedSelection(selection, blockId, plan) {
+  if (selection?.kind !== "text") return selection;
+  const anchor = followedPos(selection.anchor, blockId, plan);
+  const head = followedPos(selection.head, blockId, plan);
+  return anchor === selection.anchor && head === selection.head ? selection : textSelection(anchor, head);
+}
+
+// src/engine/state/cell-selection.ts
+var cellSelectionKey = createPluginKey("cellSelection");
+function rangeOfSelection({ doc, selection }) {
+  if (selection?.kind !== "text") return null;
+  const { anchor, head } = selection;
+  if (anchor.block !== head.block || anchor.region === head.region || tableBlock(doc, anchor.block) === null) return null;
+  const from = cellOf(anchor.region);
+  const to = cellOf(head.region);
+  return from && to ? { block: anchor.block, anchor: from, head: to } : null;
+}
+var sameCell = (a, b) => a[0] === b[0] && a[1] === b[1];
+var sameRange = (a, b) => a === b || a !== null && b !== null && a.block === b.block && sameCell(a.anchor, b.anchor) && sameCell(a.head, b.head);
+var cellSelectionPlugin = {
+  key: cellSelectionKey,
+  init: rangeOfSelection,
+  apply(_tr, value, _old, next) {
+    const range = rangeOfSelection(next);
+    return sameRange(range, value) ? value : range;
+  }
+};
+function cellSelection(state) {
+  const held = state.pluginState.get(cellSelectionKey.name);
+  return held === void 0 ? rangeOfSelection(state) : held;
+}
+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;
+}
+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 selection = textSelection(
+      { block: blockId, region: cellKey(...anchor), offset: 0 },
+      { block: blockId, region: end2, offset: inlineLength(block.regions[end2] ?? []) }
+    );
+    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/TableBlock.tsx
+import { useRef } from "react";
+
+// src/extensions/table/controls-slot.ts
+var CONTROLS_SLOT = "data-quoin-table-controls";
+var controlsSlot = (controller, blockId) => controller.blockElement(blockId)?.querySelector(`[${CONTROLS_SLOT}]`) ?? null;
+
+// src/extensions/table/TableCell.tsx
+import { memo, useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+var TableCell = memo(function TableCell2({ controller, blockId, row, col, header, align, label }) {
+  const inRange = useEditorState(
+    controller,
+    useCallback(
+      (state) => {
+        const range = cellSelection(state);
+        return range?.block === blockId && rangeHasCell(range, [row, col]);
+      },
+      [blockId, row, col]
+    )
+  );
+  const Cell = header ? "th" : "td";
+  return /* @__PURE__ */ jsx(
+    Cell,
+    {
+      scope: header ? "col" : void 0,
+      "data-row": row,
+      "data-col": col,
+      "data-in-range": inRange ? "" : void 0,
+      style: align === null ? void 0 : { textAlign: align },
+      children: /* @__PURE__ */ jsx(EditableRegion, { block: blockId, region: cellKey(row, col), label, className: "quoin-table-text" })
+    }
+  );
+});
+
+// src/extensions/table/table-ui-store.ts
+import { useCallback as useCallback2, useSyncExternalStore } from "react";
+function createTableUiStore() {
+  let state = { preview: null };
+  const listeners = /* @__PURE__ */ new Set();
+  return {
+    get: () => state,
+    set(patch) {
+      state = { ...state, ...patch };
+      for (const listener of [...listeners]) listener();
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => void listeners.delete(listener);
+    }
+  };
+}
+var stores = /* @__PURE__ */ new WeakMap();
+function tableUiStore(controller) {
+  let store = stores.get(controller);
+  if (store === void 0) {
+    store = createTableUiStore();
+    stores.set(controller, store);
+  }
+  return store;
+}
+function useWidthPreview(controller, blockId) {
+  const store = tableUiStore(controller);
+  const read = useCallback2(() => {
+    const { preview } = store.get();
+    return preview?.block === blockId ? preview.widths : null;
+  }, [store, blockId]);
+  return useSyncExternalStore(store.subscribe, read, read);
+}
+
+// src/extensions/table/use-cell-press.ts
+import { useEffect } from "react";
+
+// src/engine/commands/table-commands.ts
+function changeTable(blockId, change, plan) {
+  return (state, dispatch) => {
+    const block = tableBlock(state.doc, blockId);
+    const next = block && change(block);
+    if (!next) return false;
+    const tr = new Transaction(state).step(replaceBlockStep(next));
+    dispatch?.(plan ? tr.setSelection(followedSelection(state.selection, blockId, plan)) : tr);
+    return true;
+  };
+}
+function reshape(blockId, plan) {
+  return (state, dispatch) => {
+    const block = tableBlock(state.doc, blockId);
+    const made = block && plan(block, tableShape(block));
+    return made ? changeTable(blockId, (table) => rebuiltTable(table, made), made)(state, dispatch) : false;
+  };
+}
+function spliced(list, index, remove, ...insert) {
+  const copy = [...list];
+  copy.splice(index, remove, ...insert);
+  return copy;
+}
+var reordered = (list, order) => order.map((i) => list[i]);
+var columnAttrs = (align, widths) => widths === null ? { align } : { align, widths };
+var addRow = (blockId, index) => reshape(
+  blockId,
+  (_, { rows, cols }) => isIndex(index, rows + 1) ? {
+    rows: rows + 1,
+    cols,
+    source: (row, col) => row === index ? null : [row < index ? row : row - 1, col],
+    target: ([row, col]) => [row < index ? row : row + 1, col],
+    landing: (cell) => cell
+  } : null
+);
+var removeRow = (blockId, index) => reshape(
+  blockId,
+  (_, { rows, cols }) => isIndex(index, rows) && rows > 1 ? {
+    rows: rows - 1,
+    cols,
+    source: (row, col) => [row < index ? row : row + 1, col],
+    target: ([row, col]) => row === index ? null : [row < index ? row : row - 1, col],
+    landing: ([, col]) => [Math.min(index, rows - 2), col]
+  } : null
+);
+var moveRow = (blockId, from, to) => reshape(blockId, (_, { rows, cols }) => {
+  if (!isIndex(from, rows) || !isIndex(to, rows) || from === to) return null;
+  const order = movedOrder(rows, from, to);
+  return {
+    rows,
+    cols,
+    source: (row, col) => [order[row], col],
+    target: ([row, col]) => [order.indexOf(row), col],
+    landing: (cell) => cell
+  };
+});
+var addColumn = (blockId, index) => reshape(blockId, (block, { rows, cols }) => {
+  if (!isIndex(index, cols + 1)) return null;
+  const widths = storedWidths(block, cols);
+  return {
+    rows,
+    cols: cols + 1,
+    source: (row, col) => col === index ? null : [row, col < index ? col : col - 1],
+    target: ([row, col]) => [row, col < index ? col : col + 1],
+    landing: (cell) => cell,
+    attrs: columnAttrs(
+      spliced(columnAligns(block, cols), index, 0, null),
+      widths && spliced(widths, index, 0, widths[Math.max(index - 1, 0)])
+    )
+  };
+});
+var removeColumn = (blockId, index) => reshape(blockId, (block, { rows, cols }) => {
+  if (!isIndex(index, cols) || cols < 2) return null;
+  const widths = storedWidths(block, cols);
+  return {
+    rows,
+    cols: cols - 1,
+    source: (row, col) => [row, col < index ? col : col + 1],
+    target: ([row, col]) => col === index ? null : [row, col < index ? col : col - 1],
+    landing: ([row]) => [row, Math.min(index, cols - 2)],
+    attrs: columnAttrs(spliced(columnAligns(block, cols), index, 1), widths && spliced(widths, index, 1))
+  };
+});
+var moveColumn = (blockId, from, to) => reshape(blockId, (block, { rows, cols }) => {
+  if (!isIndex(from, cols) || !isIndex(to, cols) || from === to) return null;
+  const order = movedOrder(cols, from, to);
+  const widths = storedWidths(block, cols);
+  return {
+    rows,
+    cols,
+    source: (row, col) => [row, order[col]],
+    target: ([row, col]) => [row, order.indexOf(col)],
+    landing: (cell) => cell,
+    attrs: columnAttrs(reordered(columnAligns(block, cols), order), widths && reordered(widths, order))
+  };
+});
+var toggleHeaderRow = (blockId) => changeTable(blockId, (block) => ({ ...block, attrs: { ...block.attrs, header: block.attrs.header === false } }));
+var withAttrs = (block, attrs) => ({ ...block, attrs: { ...block.attrs, ...attrs } });
+var setColumnAlign = (blockId, col, align) => changeTable(blockId, (block) => {
+  const aligns = columnAligns(block, tableShape(block).cols);
+  if (!isIndex(col, aligns.length) || aligns[col] === align) return null;
+  return withAttrs(block, { align: spliced(aligns, col, 1, align) });
+});
+var DEFAULT_COLUMN_WIDTH = 120;
+var setColumnWidth = (blockId, col, px, drawn) => changeTable(blockId, (block) => {
+  const { cols } = tableShape(block);
+  const width = Math.round(px);
+  if (!isIndex(col, cols) || !(width > 0)) return null;
+  const stored = storedWidths(block, cols);
+  if (stored?.[col] === width) return null;
+  const measured = drawn && validWidths(drawn.map(Math.round), cols);
+  const widths = stored ?? measured ?? Array(cols).fill(DEFAULT_COLUMN_WIDTH);
+  return withAttrs(block, { widths: spliced(widths, col, 1, width) });
+});
+var isCount = (value) => Number.isInteger(value) && value > 0;
+function emptyCells({ rows, cols }) {
+  const regions = {};
+  for (let row = 0; row < rows; row++) for (let col = 0; col < cols; col++) regions[cellKey(row, col)] = [];
+  return regions;
+}
+function insertTable(rows, cols, options = {}) {
+  return (state, dispatch) => {
+    const { doc, schema } = state;
+    const id = headBlockId(state.selection);
+    if (id === null || !isCount(rows) || !isCount(cols)) return false;
+    const index = requireBlockIndex(doc, id);
+    const current = doc.blocks[index];
+    const fills = isParagraph(current) && regionLength(current, primaryRegion(schema, current) ?? "") === 0;
+    const table = {
+      id: fills ? current.id : (options.newId ?? newId)(),
+      type: "TABLE",
+      indent: current.indent,
+      attrs: { header: true, align: Array.from({ length: cols }, () => null), rows, cols },
+      regions: emptyCells({ rows, cols })
+    };
+    const tr = new Transaction(state).step(
+      fills ? replaceBlockStep(table) : insertBlocksStep(descendantsEnd(doc, index), [table])
+    );
+    dispatch?.(tr.setSelection(textSelection({ block: table.id, region: cellKey(0, 0), offset: 0 })));
+    return true;
+  };
+}
+
+// src/extensions/table/table-keys.ts
+function headCell({ doc, selection }) {
+  if (selection?.kind !== "text") return null;
+  const { head } = selection;
+  const block = tableBlock(doc, head.block);
+  const cell = block && cellOf(head.region);
+  return block && cell ? { block, cell, head, shape: tableShape(block) } : null;
+}
+var cellLength = (block, [row, col]) => inlineLength(block.regions[cellKey(row, col)] ?? []);
+var cellPos = (block, cell, atEnd = false) => ({
+  block: block.id,
+  region: cellKey(...cell),
+  offset: atEnd ? cellLength(block, cell) : 0
+});
+var moveTo = (state, pos) => new Transaction(state).setSelection(textSelection(pos));
+var thenCaretIn = (command, blockId, at) => (state, dispatch) => {
+  const caret = textSelection({ block: blockId, region: cellKey(...at), offset: 0 });
+  return command(state, dispatch && ((tr) => dispatch(tr.setSelection(caret))));
+};
+var cellAtIndex = (index, { cols }) => [Math.floor(index / cols), index % cols];
+var indexOfCell = ([row, col], { cols }) => row * cols + col;
+var nextCell = (state, dispatch) => {
+  const caret = headCell(state);
+  if (caret === null) return false;
+  const { block, cell, shape } = caret;
+  const next = indexOfCell(cell, shape) + 1;
+  if (next === shape.rows * shape.cols) {
+    return thenCaretIn(addRow(block.id, shape.rows), block.id, [shape.rows, 0])(state, dispatch);
+  }
+  dispatch?.(moveTo(state, cellPos(block, cellAtIndex(next, shape), true)));
+  return true;
+};
+var previousCell = (state, dispatch) => {
+  const caret = headCell(state);
+  if (caret === null) return false;
+  const { block, cell, shape } = caret;
+  const previous = indexOfCell(cell, shape) - 1;
+  if (previous >= 0) dispatch?.(moveTo(state, cellPos(block, cellAtIndex(previous, shape), true)));
+  return true;
+};
+var enterInCell = (state, dispatch) => {
+  const caret = headCell(state);
+  if (caret === null) return false;
+  if (cellSelection(state) !== null) return true;
+  const { block, cell, shape } = caret;
+  const [row, col] = cell;
+  if (row === shape.rows - 1 && cellLength(block, cell) === 0) {
+    return thenCaretIn(addRow(block.id, shape.rows), block.id, [shape.rows, col])(state, dispatch);
+  }
+  return insertHardBreak(state, dispatch);
+};
+var stopAtCellEdge = (atEnd) => (state) => {
+  const caret = headCell(state);
+  if (caret === null || !isCollapsed(state.selection)) return false;
+  return caret.head.offset === (atEnd ? cellLength(caret.block, caret.cell) : 0);
+};
+var firstThatApplies = (...commands) => (state, dispatch) => commands.some((command) => command(state, dispatch));
+var MARK_KEYS = {
+  "Mod-b": "bold",
+  "Mod-i": "italic",
+  "Mod-u": "underline",
+  "Mod-Shift-s": "strike",
+  "Mod-e": "code",
+  "Mod-Shift-h": "highlight"
+};
+var tableKeymap = {
+  Tab: nextCell,
+  "Shift-Tab": previousCell,
+  Enter: enterInCell,
+  Backspace: firstThatApplies(deleteCellContents, stopAtCellEdge(false)),
+  Delete: firstThatApplies(deleteCellContents, stopAtCellEdge(true)),
+  ...Object.fromEntries(Object.entries(MARK_KEYS).map(([name, mark]) => [name, setCellsMark(mark)]))
+};
+
+// src/extensions/table/use-cell-press.ts
+function cellOf2(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;
+}
+function useCellPress(controller, blockId, table, editable) {
+  useEffect(() => {
+    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 block = cell && blockById(controller.editor.state.doc, blockId);
+      if (!cell || !block) return;
+      event.preventDefault();
+      event.stopPropagation();
+      controller.focus(cellPos(block, cell, true));
+    };
+    element.addEventListener("pointerdown", onPointerDown);
+    return () => element.removeEventListener("pointerdown", onPointerDown);
+  }, [controller, blockId, table, editable]);
+}
+
+// src/extensions/table/use-reveal-cell.ts
+import { useCallback as useCallback3, useEffect as useEffect2 } from "react";
+function useRevealCell(controller, blockId) {
+  const region = useEditorState(
+    controller,
+    useCallback3(
+      (state) => {
+        const caret = headCell(state);
+        return caret?.block.id === blockId ? caret.head.region : null;
+      },
+      [blockId]
+    )
+  );
+  useEffect2(() => {
+    const host = region === null ? void 0 : controller.registry.get(blockId, region);
+    const root = controller.root;
+    if (!host || !root?.contains(root.ownerDocument.activeElement)) return;
+    host.closest("td, th")?.scrollIntoView({ block: "nearest", inline: "nearest" });
+  }, [controller, blockId, region]);
+}
+
+// src/extensions/table/use-table-keys.ts
+import { useEffect as useEffect3 } from "react";
+
+// 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) {
+  useEffect3(() => {
+    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]);
+}
+
+// src/extensions/table/TableBlock.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var indexes = (from, to) => Array.from({ length: Math.max(to - from, 0) }, (_, i) => from + i);
+function TableBlock({ block, controller, labels }) {
+  const readOnly = useReadOnly(controller);
+  const table = useRef(null);
+  const { rows, cols } = tableShape(block);
+  const header = block.attrs.header !== false && rows > 0;
+  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__ */ jsx2("tr", { children: indexes(0, cols).map((col) => /* @__PURE__ */ jsx2(
+    TableCell,
+    {
+      controller,
+      blockId: block.id,
+      row: index,
+      col,
+      header: header && index === 0,
+      align: aligns[col],
+      label: labels.cell(index + 1, col + 1)
+    },
+    col
+  )) }, index);
+  const scroller = readOnly ? { role: "region", "aria-label": labels.table, tabIndex: 0 } : void 0;
+  return /* @__PURE__ */ jsx2("div", { contentEditable: false, className: "quoin-table", "data-readonly": readOnly ? "" : void 0, children: /* @__PURE__ */ jsxs("div", { className: `quoin-table-scroll ${readOnly ? FOCUS_RING : ""}`, ...scroller, children: [
+    /* @__PURE__ */ jsxs(
+      "table",
+      {
+        ref: table,
+        "aria-label": readOnly ? void 0 : labels.table,
+        style: widths === null ? void 0 : { width: widths.reduce((sum, width) => sum + width, 0), tableLayout: "fixed" },
+        children: [
+          widths !== null && /* @__PURE__ */ jsx2("colgroup", { children: widths.map((width, col) => /* @__PURE__ */ jsx2("col", { style: { width } }, col)) }),
+          header && /* @__PURE__ */ jsx2("thead", { children: row(0) }),
+          rows > (header ? 1 : 0) && /* @__PURE__ */ jsx2("tbody", { children: indexes(header ? 1 : 0, rows).map(row) })
+        ]
+      }
+    ),
+    !readOnly && /* @__PURE__ */ jsx2("div", { className: "quoin-table-controls", ...{ [CONTROLS_SLOT]: "" } })
+  ] }) });
+}
+
+// src/extensions/table/TableControls.tsx
+import { useCallback as useCallback5, useEffect as useEffect7, useState as useState3 } from "react";
+import { createPortal } from "react-dom";
+
+// src/extensions/table/menu-cells.ts
+var EMPTY = [];
+function lineCells(block, index, axis) {
+  const { rows, cols } = tableShape(block);
+  return Array.from(
+    { length: axis === "row" ? cols : rows },
+    (_, other) => axis === "row" ? block.regions[cellKey(index, other)] ?? EMPTY : block.regions[cellKey(other, index)] ?? EMPTY
+  );
+}
+var sameLine = (before, after, index, axis) => sameItems(lineCells(before, index, axis), lineCells(after, index, axis), equalInline);
+function sameMenuCells(opened, current, target, axis) {
+  const shape = tableShape(opened);
+  const lines = axis === "row" ? shape.rows : shape.cols;
+  const index = Math.min(axis === "row" ? target.row : target.col, lines - 1);
+  if (sameLine(opened, current, index, axis)) return true;
+  const reshaped = tableShape(current);
+  if (reshaped.rows !== shape.rows || reshaped.cols !== shape.cols) return false;
+  const others = Array.from({ length: lines }, (_, other) => other);
+  return others.every((other) => other === index || sameLine(opened, current, other, axis));
+}
+
+// src/extensions/table/TableHandles.tsx
+import { useRef as useRef3 } from "react";
+import { Plus } from "lucide-react";
+
+// src/extensions/table/ColumnResizer.tsx
+import { useEffect as useEffect4, useRef as useRef2 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var MIN_COLUMN_WIDTH = 48;
+var MAX_COLUMN_WIDTH = 1200;
+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 drag = useRef2(null);
+  const width = Math.round(drawn[col] ?? 0);
+  const store = tableUiStore(controller);
+  const write = (px, widths) => {
+    if (!controller.readOnly) controller.run(setColumnWidth(blockId, col, px, widths));
+  };
+  const onKeyDown = (event) => {
+    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));
+      if (next !== width) write(next, drawn);
+    } else if (tab && event.shiftKey) onBack();
+    else if (tab || event.key === "Escape") controller.focus();
+    else return;
+    event.preventDefault();
+  };
+  const onPointerDown = (event) => {
+    if (event.button !== 0) return;
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+    drag.current = { x: event.clientX, widths: [...drawn], to: null };
+    onHold(true);
+  };
+  const onPointerMove = (event) => {
+    const current = drag.current;
+    if (current === null) return;
+    current.to = clampWidth(current.widths[col] + event.clientX - current.x);
+    const widths = current.widths.map((px, i) => i === col ? current.to ?? px : px);
+    store.set({ preview: { block: blockId, widths } });
+  };
+  const stop = () => {
+    const current = drag.current;
+    drag.current = null;
+    store.set({ preview: null });
+    onHold(false);
+    return current;
+  };
+  useEffect4(
+    () => () => {
+      if (drag.current !== null) store.set({ preview: null });
+    },
+    [store]
+  );
+  const end2 = () => {
+    const ended = stop();
+    if (ended?.to != null && ended.to !== Math.round(ended.widths[col])) write(ended.to, ended.widths);
+  };
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      ref: resizerRef,
+      role: "separator",
+      tabIndex: -1,
+      "aria-orientation": "vertical",
+      "aria-label": labels.resizeColumn(col + 1),
+      "aria-valuenow": width,
+      "aria-valuemin": MIN_COLUMN_WIDTH,
+      "aria-valuemax": MAX_COLUMN_WIDTH,
+      "aria-valuetext": labels.columnWidth(width),
+      className: "quoin-table-resizer",
+      style,
+      ...{ [NATIVE_INTERACTION]: "" },
+      onKeyDown,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp: end2,
+      onPointerCancel: stop
+    }
+  );
+}
+
+// src/extensions/table/HandleMenu.tsx
+import { Fragment } from "react";
+import { GripHorizontal, GripVertical } from "lucide-react";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var DESTRUCTIVE = "text-destructive focus:text-destructive";
+function HandleMenu({ controller, axis, label, style, items, open, onOpenChange, buttonRef, children }) {
+  const run = (item3) => {
+    if (controller.run(item3.command)) controller.announce(item3.done);
+  };
+  const item2 = (entry) => /* @__PURE__ */ jsxs2(
+    DropdownMenuItem,
+    {
+      disabled: entry.disabled,
+      className: entry.destructive ? DESTRUCTIVE : void 0,
+      onSelect: () => run(entry),
+      children: [
+        /* @__PURE__ */ jsx4(MenuIcon, { icon: entry.icon }),
+        entry.label
+      ]
+    },
+    entry.id
+  );
+  return /* @__PURE__ */ jsxs2(DropdownMenu, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx4(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx4(
+      "button",
+      {
+        ref: buttonRef,
+        type: "button",
+        tabIndex: -1,
+        "aria-label": label,
+        "data-axis": axis,
+        className: "quoin-table-handle",
+        style,
+        children: axis === "row" ? /* @__PURE__ */ jsx4(GripVertical, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx4(GripHorizontal, { "aria-hidden": "true" })
+      }
+    ) }),
+    open && /* @__PURE__ */ jsxs2(
+      DropdownMenuContent,
+      {
+        align: "start",
+        "aria-label": label,
+        "aria-labelledby": void 0,
+        onCloseAutoFocus: returnFocusToText(controller),
+        ...bubblePart(controller),
+        children: [
+          items.filter((entry) => !entry.destructive).map(item2),
+          children,
+          items.filter((entry) => entry.destructive).map((entry) => /* @__PURE__ */ jsxs2(Fragment, { children: [
+            /* @__PURE__ */ jsx4(DropdownMenuSeparator, {}),
+            item2(entry)
+          ] }, entry.id))
+        ]
+      }
+    )
+  ] });
+}
+
+// src/extensions/table/table-menu-items.ts
+import {
+  AlignCenter,
+  AlignLeft,
+  AlignRight,
+  ArrowDown,
+  ArrowDownToLine,
+  ArrowLeft,
+  ArrowLeftToLine,
+  ArrowRight,
+  ArrowRightToLine,
+  ArrowUp,
+  ArrowUpToLine,
+  Trash
+} from "lucide-react";
+var item = (id, label, icon, command, done, options = {}) => ({ id, label, icon, command, done, ...options });
+function rowMenuItems(labels, blockId, row, { rows }) {
+  const { rowInserted, rowMoved, rowDeleted } = labels;
+  return [
+    item("above", labels.insertRowAbove, ArrowUpToLine, addRow(blockId, row), rowInserted),
+    item("below", labels.insertRowBelow, ArrowDownToLine, addRow(blockId, row + 1), rowInserted),
+    item("up", labels.moveRowUp, ArrowUp, moveRow(blockId, row, row - 1), rowMoved, { disabled: row === 0 }),
+    item("down", labels.moveRowDown, ArrowDown, moveRow(blockId, row, row + 1), rowMoved, { disabled: row === rows - 1 }),
+    item("delete", labels.deleteRow, Trash, removeRow(blockId, row), rowDeleted, { disabled: rows === 1, destructive: true })
+  ];
+}
+function columnMenuItems(labels, blockId, col, { cols }) {
+  const { columnInserted, columnMoved, columnDeleted } = labels;
+  const last = col === cols - 1;
+  return [
+    item("left", labels.insertColumnLeft, ArrowLeftToLine, addColumn(blockId, col), columnInserted),
+    item("right", labels.insertColumnRight, ArrowRightToLine, addColumn(blockId, col + 1), columnInserted),
+    item("move-left", labels.moveColumnLeft, ArrowLeft, moveColumn(blockId, col, col - 1), columnMoved, { disabled: col === 0 }),
+    item("move-right", labels.moveColumnRight, ArrowRight, moveColumn(blockId, col, col + 1), columnMoved, { disabled: last }),
+    item("delete", labels.deleteColumn, Trash, removeColumn(blockId, col), columnDeleted, {
+      disabled: cols === 1,
+      destructive: true
+    })
+  ];
+}
+var alignItems = (labels) => [
+  { value: "left", label: labels.alignLeft, icon: AlignLeft, done: labels.alignedLeft },
+  { value: "center", label: labels.alignCenter, icon: AlignCenter, done: labels.alignedCenter },
+  { value: "right", label: labels.alignRight, icon: AlignRight, done: labels.alignedRight }
+];
+
+// src/extensions/table/TableHandles.tsx
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+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 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 rowHandle = useRef3(null);
+  const columnHandle = useRef3(null);
+  const resizer = useRef3(null);
+  const shape = tableShape(block);
+  const row = Math.min(target.row, shape.rows - 1);
+  const col = Math.min(target.col, shape.cols - 1);
+  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);
+  useIsomorphicLayoutEffect(() => {
+    if (!focusRequested) return;
+    (columnHandle.current ?? rowHandle.current)?.focus();
+    onFocused();
+  }, [focusRequested, onFocused]);
+  const run = (command, done) => {
+    if (controller.run(command)) controller.announce(done);
+  };
+  const onKeyDown = (event) => {
+    const handles = [rowHandle.current, columnHandle.current].filter((handle) => handle !== null);
+    const index = handles.indexOf(event.target);
+    if (index === -1 || isComposingKey(controller, event.nativeEvent)) return;
+    if (event.key === "ArrowLeft" || event.key === "ArrowRight") handles[(index + 1) % handles.length].focus();
+    else if (isTab(event) && !event.shiftKey && resizer.current !== null) resizer.current.focus();
+    else if (isTab(event) || event.key === "Escape") controller.focus();
+    else return;
+    event.preventDefault();
+  };
+  const place = (left, top) => ({ left, top });
+  const opener = (kind) => (open) => onMenu(open ? kind : null);
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    geometry.cols.map((span, index) => /* @__PURE__ */ jsx5(
+      ColumnResizer,
+      {
+        controller,
+        labels,
+        blockId: block.id,
+        col: index,
+        drawn,
+        style: { left: end(span), top: geometry.top, height: geometry.height },
+        resizerRef: index === col ? resizer : void 0,
+        onHold,
+        onBack: () => (columnHandle.current ?? rowHandle.current)?.focus()
+      },
+      index
+    )),
+    /* @__PURE__ */ jsxs3("div", { role: "toolbar", "aria-label": labels.tableControls, className: "quoin-table-toolbar", onKeyDown, children: [
+      rowInsertAt === null && geometry.rows[row] && /* @__PURE__ */ jsx5(
+        HandleMenu,
+        {
+          controller,
+          axis: "row",
+          label: labels.rowOptions(row + 1),
+          style: place(geometry.left - BESIDE, middle(geometry.rows[row])),
+          items: rowMenuItems(labels, block.id, row, shape),
+          open: menu === "row",
+          onOpenChange: opener("row"),
+          buttonRef: rowHandle,
+          children: row === 0 && /* @__PURE__ */ jsx5(
+            DropdownMenuCheckboxItem,
+            {
+              checked: block.attrs.header !== false,
+              onCheckedChange: (on) => run(toggleHeaderRow(block.id), on ? labels.headerRowOn : labels.headerRowOff),
+              children: labels.headerRow
+            }
+          )
+        }
+      ),
+      columnInsertAt === null && geometry.cols[col] && /* @__PURE__ */ jsxs3(
+        HandleMenu,
+        {
+          controller,
+          axis: "column",
+          label: labels.columnOptions(col + 1),
+          style: place(middle(geometry.cols[col]), geometry.top),
+          items: columnMenuItems(labels, block.id, col, shape),
+          open: menu === "column",
+          onOpenChange: opener("column"),
+          buttonRef: columnHandle,
+          children: [
+            /* @__PURE__ */ jsx5(DropdownMenuSeparator, {}),
+            /* @__PURE__ */ jsx5(DropdownMenuRadioGroup, { value: align ?? "", children: alignItems(labels).map(({ value, label, icon, done }) => /* @__PURE__ */ jsxs3(
+              DropdownMenuRadioItem,
+              {
+                value,
+                onSelect: () => align === value ? run(setColumnAlign(block.id, col, null), labels.alignmentCleared) : run(setColumnAlign(block.id, col, value), done),
+                children: [
+                  /* @__PURE__ */ jsx5(MenuIcon, { icon }),
+                  label
+                ]
+              },
+              value
+            )) })
+          ]
+        }
+      )
+    ] }),
+    rowEdge !== null && rowInsertAt !== null && /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        "aria-label": labels.insertRowAt(rowEdge + 1),
+        "data-axis": "row",
+        className: "quoin-table-insert",
+        style: place(geometry.left - BESIDE, rowInsertAt),
+        onPointerDown: keepFocus,
+        onMouseDown: keepFocus,
+        onClick: () => run(addRow(block.id, rowEdge), labels.rowInserted),
+        children: /* @__PURE__ */ jsx5(Plus, { "aria-hidden": "true" })
+      }
+    ),
+    colEdge !== null && columnInsertAt !== null && /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        tabIndex: -1,
+        "aria-label": labels.insertColumnAt(colEdge + 1),
+        "data-axis": "column",
+        className: "quoin-table-insert",
+        style: place(columnInsertAt, geometry.top),
+        onPointerDown: keepFocus,
+        onMouseDown: keepFocus,
+        onClick: () => run(addColumn(block.id, colEdge), labels.columnInserted),
+        children: /* @__PURE__ */ jsx5(Plus, { "aria-hidden": "true" })
+      }
+    )
+  ] });
+}
+
+// src/extensions/table/use-table-geometry.ts
+import { useState } from "react";
+
+// 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(() => {
+    const table = controller.blockElement(blockId)?.querySelector("table");
+    const view = slot.ownerDocument.defaultView;
+    if (!table || !view) return;
+    const measure = () => {
+      const next = measureTable(table, slot.getBoundingClientRect());
+      setGeometry((current) => sameGeometry(current, next) ? current : next);
+    };
+    measure();
+    let frame = 0;
+    const later = () => {
+      view.cancelAnimationFrame(frame);
+      frame = view.requestAnimationFrame(measure);
+    };
+    const unsubscribe = controller.editor.subscribe(later);
+    const observer = new ResizeObserver(later);
+    observer.observe(table);
+    view.addEventListener("resize", later);
+    return () => {
+      view.cancelAnimationFrame(frame);
+      unsubscribe();
+      observer.disconnect();
+      view.removeEventListener("resize", later);
+    };
+  }, [controller, blockId, slot]);
+  return geometry;
+}
+
+// src/extensions/table/use-cut-cells.ts
+import { useEffect as useEffect5 } from "react";
+function useCutCells(controller) {
+  useEffect5(() => {
+    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);
+    };
+    root.addEventListener("cut", onCut, true);
+    return () => root.removeEventListener("cut", onCut, true);
+  }, [controller]);
+}
+
+// src/extensions/table/use-table-target.ts
+import { useCallback as useCallback4, useEffect as useEffect6, useState as useState2 } from "react";
+var EDGE_ZONE = 24;
+var EDGE_REACH = 8;
+var VIEWPORT = { left: 0, top: 0 };
+var CONTROLS = `[${CONTROLS_SLOT}]`;
+var sameTarget = (a, b) => a === b || a !== null && b !== null && a.block === b.block && a.row === b.row && a.col === b.col && a.rowEdge === b.rowEdge && a.colEdge === b.colEdge;
+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 };
+}
+function pointerTarget(controller, event) {
+  const blockId = controller.blockAt(event.target);
+  const block = blockId === void 0 ? null : tableBlock(controller.editor.state.doc, blockId);
+  const table = block && controller.blockElement(block.id)?.querySelector("table");
+  if (!block || !table) return null;
+  const geometry = measureTable(table, VIEWPORT);
+  const { clientX: x, clientY: y } = 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;
+  return { block: block.id, row, col, rowEdge, colEdge };
+}
+function shapeOf(state, blockId) {
+  const block = tableBlock(state.doc, blockId);
+  if (block === null) return null;
+  const { rows, cols } = tableShape(block);
+  return `${rows}x${cols}`;
+}
+function focusOf(root) {
+  const active = root.ownerDocument.activeElement;
+  if (active === null || !root.contains(active)) return "none";
+  return active.closest(CONTROLS) === null ? "editor" : "controls";
+}
+function useTableTarget(controller, held) {
+  const [hovered, setHovered] = useState2(null);
+  const [focus, setFocus] = useState2("none");
+  const caret = useEditorState(controller, caretTarget, sameTarget);
+  const hoveredBlock = hovered?.target.block ?? null;
+  const shape = useEditorState(
+    controller,
+    useCallback4((state) => hoveredBlock === null ? null : shapeOf(state, hoveredBlock), [hoveredBlock])
+  );
+  const pointed = hovered !== null && hovered.shape === shape ? hovered.target : null;
+  useEffect6(() => {
+    const root = controller.root;
+    if (root === null) return;
+    const onPointerMove = (event) => {
+      if (event.pointerType === "touch") return;
+      const target = pointerTarget(controller, event);
+      const next = target && { target, shape: shapeOf(controller.editor.state, target.block) };
+      setHovered(
+        (current) => current !== null && next !== null && sameTarget(current.target, next.target) && current.shape === next.shape ? current : next
+      );
+    };
+    const onPointerLeave = () => setHovered(null);
+    const onFocusChange = () => setFocus(focusOf(root));
+    const onFocusOut = (event) => {
+      const next = event.relatedTarget;
+      setFocus(next !== null && root.contains(next) ? next.closest(CONTROLS) ? "controls" : "editor" : "none");
+    };
+    setFocus(focusOf(root));
+    root.addEventListener("pointermove", onPointerMove);
+    root.addEventListener("pointerleave", onPointerLeave);
+    root.addEventListener("focusin", onFocusChange);
+    root.addEventListener("focusout", onFocusOut);
+    return () => {
+      root.removeEventListener("pointermove", onPointerMove);
+      root.removeEventListener("pointerleave", onPointerLeave);
+      root.removeEventListener("focusin", onFocusChange);
+      root.removeEventListener("focusout", onFocusOut);
+    };
+  }, [controller]);
+  if (held !== null) return held;
+  if (focus === "controls") return caret ?? pointed;
+  return pointed ?? (focus === "editor" ? caret : null);
+}
+
+// src/extensions/table/TableControls.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var isFocusKey = (event) => event.key === "F10" && event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey;
+var takesFocusKey = (state) => isCollapsed(state.selection) || cellSelection(state) !== null;
+function TableControls({ controller, labels }) {
+  const readOnly = useReadOnly(controller);
+  const [held, setHeld] = useState3(null);
+  const [focusFor, setFocusFor] = useState3(null);
+  const [slot, setSlot] = useState3(null);
+  const target = useTableTarget(controller, held?.target ?? null);
+  useCutCells(controller);
+  const blockId = target?.block ?? null;
+  const block = useEditorState(
+    controller,
+    useCallback5((state) => blockId === null ? null : tableBlock(state.doc, blockId), [blockId])
+  );
+  if (held?.menu && held.opened && block && held.opened !== block) {
+    setHeld(sameMenuCells(held.opened, block, held.target, held.menu) ? { ...held, opened: block } : null);
+  }
+  useEffect7(() => {
+    if (!readOnly && block !== null) return;
+    setHeld(null);
+    setFocusFor(null);
+  }, [readOnly, block]);
+  useEffect7(() => {
+    if (readOnly) return;
+    const intercept = (event) => {
+      const { state } = controller.editor;
+      const caret = caretTarget(state);
+      if (!isFocusKey(event) || isComposingKey(controller, event) || caret === null || !takesFocusKey(state)) return false;
+      event.preventDefault();
+      setHeld({ target: caret, menu: null });
+      setFocusFor(caret.block);
+      return true;
+    };
+    return interceptKeys(controller, intercept);
+  }, [controller, readOnly]);
+  const onMenu = useCallback5(
+    (menu) => setHeld(menu === null || target === null || block === null ? null : { target, menu, opened: block }),
+    [target, block]
+  );
+  const onHold = useCallback5((hold) => setHeld(hold && target !== null ? { target, menu: null } : null), [target]);
+  const onFocused = useCallback5(() => {
+    setFocusFor(null);
+    setHeld((current) => current?.menu === null ? null : current);
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    const drawn = block === null || readOnly ? null : controlsSlot(controller, block.id);
+    setSlot((current) => current === drawn ? current : drawn);
+  });
+  if (target === null || block === null || readOnly || slot === null || !slot.isConnected) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx6(
+      PlacedHandles,
+      {
+        controller,
+        labels,
+        block,
+        target,
+        slot,
+        menu: held?.menu ?? null,
+        onMenu,
+        onHold,
+        focusRequested: focusFor === block.id,
+        onFocused
+      },
+      block.id
+    ),
+    slot
+  );
+}
+function PlacedHandles({ slot, ...props }) {
+  const geometry = useTableGeometry(props.controller, props.block.id, slot);
+  return geometry === null ? null : /* @__PURE__ */ jsx6(TableHandles, { ...props, geometry });
+}
+
+// src/extensions/table/table-labels.ts
+var englishTableLabels = {
+  table: "Table",
+  tableDescription: "Rows and columns of text",
+  cell: (row, col) => `Row ${row}, column ${col}`,
+  tableControls: "Table controls",
+  rowOptions: (row) => `Row ${row} options`,
+  columnOptions: (col) => `Column ${col} options`,
+  insertRowAbove: "Insert row above",
+  insertRowBelow: "Insert row below",
+  insertColumnLeft: "Insert column left",
+  insertColumnRight: "Insert column right",
+  moveRowUp: "Move row up",
+  moveRowDown: "Move row down",
+  moveColumnLeft: "Move column left",
+  moveColumnRight: "Move column right",
+  deleteRow: "Delete row",
+  deleteColumn: "Delete column",
+  headerRow: "Header row",
+  alignLeft: "Align left",
+  alignCenter: "Align center",
+  alignRight: "Align right",
+  insertRowAt: (row) => `Insert row ${row}`,
+  insertColumnAt: (col) => `Insert column ${col}`,
+  resizeColumn: (col) => `Resize column ${col}`,
+  columnWidth: (px) => `${px} pixels`,
+  rowInserted: "Row inserted",
+  rowDeleted: "Row deleted",
+  rowMoved: "Row moved",
+  columnInserted: "Column inserted",
+  columnDeleted: "Column deleted",
+  columnMoved: "Column moved",
+  headerRowOn: "Header row on",
+  headerRowOff: "Header row off",
+  alignedLeft: "Column aligned left",
+  alignedCenter: "Column aligned center",
+  alignedRight: "Column aligned right",
+  alignmentCleared: "Column alignment cleared"
+};
+function resolveTableLabels(overrides) {
+  const given = Object.entries(overrides ?? {}).filter(([, value]) => value !== void 0);
+  return given.length === 0 ? englishTableLabels : { ...englishTableLabels, ...Object.fromEntries(given) };
+}
+
+// src/extensions/table/table-slash-item.ts
+import { Table } from "lucide-react";
+var NEW_TABLE = { rows: 3, cols: 3 };
+var tableSlashItem = (labels) => ({
+  id: "table",
+  title: labels.table,
+  description: labels.tableDescription,
+  group: "advanced",
+  icon: Table,
+  keywords: ["grid", "rows", "columns", "spreadsheet", "|"],
+  command: () => insertTable(NEW_TABLE.rows, NEW_TABLE.cols)
+});
+
+// src/extensions/table/table-extension.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+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__ */ jsx7(TableBlock, { ...props, labels });
+  const TableOverlay = ({ controller }) => /* @__PURE__ */ jsx7(TableControls, { controller, labels });
+  const ui = {
+    slashItems: [tableSlashItem(labels)],
+    renderers: { TABLE: TableRenderer },
+    blockNames: { TABLE: labels.table },
+    overlays: [TableOverlay]
+  };
+  return defineExtension({
+    name: "table",
+    priority: ABOVE_CORE_KEYS,
+    plugins: [cellSelectionPlugin],
+    keymap: tableKeymap,
+    pasteRules: [pasteOverCells],
+    ui
+  });
+}
+
+export {
+  cellSelectionKey,
+  cellSelectionPlugin,
+  cellSelection,
+  cellsInRange,
+  selectCells,
+  deleteCellContents,
+  setCellsMark,
+  addRow,
+  removeRow,
+  moveRow,
+  addColumn,
+  removeColumn,
+  moveColumn,
+  toggleHeaderRow,
+  setColumnAlign,
+  setColumnWidth,
+  insertTable,
+  englishTableLabels,
+  tableExtension
+};
+//# sourceMappingURL=chunk-UCXLRRWY.js.map