@kerebron/extension-tables 0.4.28 → 0.4.30

package/src/utilities/input.ts

@@ -0,0 +1,299 @@
+// This file defines a number of helpers for wiring up user input to
+// table-related functionality.
+
+import { Fragment, ResolvedPos, Slice } from 'prosemirror-model';
+import {
+  EditorState,
+  Selection,
+  TextSelection,
+  Transaction,
+} from 'prosemirror-state';
+
+import { EditorView } from 'prosemirror-view';
+
+import { keydownHandler } from '@kerebron/editor/plugins/keymap';
+import type { Command } from '@kerebron/editor/commands';
+
+import { CellSelection } from './CellSelection.js';
+import { deleteCellSelection } from './commands.js';
+import { clipCells, fitSlice, insertCells, pastedCells } from './copypaste.js';
+import { tableNodeTypes } from './tableNodeTypes.js';
+import { TableMap } from './TableMap.js';
+import {
+  cellAround,
+  inSameTable,
+  isInTable,
+  nextCell,
+  selectionCell,
+  tableEditingKey,
+} from './util.js';
+
+type Axis = 'horiz' | 'vert';
+
+/**
+ * @public
+ */
+export type Direction = -1 | 1;
+
+export const handleKeyDown = keydownHandler({
+  ArrowLeft: arrow('horiz', -1),
+  ArrowRight: arrow('horiz', 1),
+  // ArrowUp: arrow('vert', -1),
+  // ArrowDown: arrow('vert', 1),
+
+  'Shift-ArrowLeft': shiftArrow('horiz', -1),
+  'Shift-ArrowRight': shiftArrow('horiz', 1),
+  'Shift-ArrowUp': shiftArrow('vert', -1),
+  'Shift-ArrowDown': shiftArrow('vert', 1),
+
+  Backspace: deleteCellSelection,
+  'Mod-Backspace': deleteCellSelection,
+  Delete: deleteCellSelection,
+  'Mod-Delete': deleteCellSelection,
+});
+
+function maybeSetSelection(
+  state: EditorState,
+  dispatch: undefined | ((tr: Transaction) => void),
+  selection: Selection,
+): boolean {
+  if (selection.eq(state.selection)) return false;
+  if (dispatch) dispatch(state.tr.setSelection(selection).scrollIntoView());
+  return true;
+}
+
+/**
+ * @internal
+ */
+export function arrow(axis: Axis, dir: Direction): Command {
+  return (state, dispatch, view) => {
+    if (!view) return false;
+    const sel = state.selection;
+    if (sel instanceof CellSelection) {
+      return maybeSetSelection(
+        state,
+        dispatch,
+        Selection.near(sel.$headCell, dir),
+      );
+    }
+    if (axis != 'horiz' && !sel.empty) return false;
+    const end = atEndOfCell(view, axis, dir);
+    if (end == null) return false;
+    if (axis == 'horiz') {
+      return maybeSetSelection(
+        state,
+        dispatch,
+        Selection.near(state.doc.resolve(sel.head + dir), dir),
+      );
+    } else {
+      const $cell = state.doc.resolve(end);
+      const $next = nextCell($cell, axis, dir);
+      let newSel;
+      if ($next) newSel = Selection.near($next, 1);
+      else if (dir < 0) {
+        newSel = Selection.near(state.doc.resolve($cell.before(-1)), -1);
+      } else newSel = Selection.near(state.doc.resolve($cell.after(-1)), 1);
+      return maybeSetSelection(state, dispatch, newSel);
+    }
+  };
+}
+
+function shiftArrow(axis: Axis, dir: Direction): Command {
+  return (state, dispatch, view) => {
+    if (!view) return false;
+    const sel = state.selection;
+    let cellSel: CellSelection;
+    if (sel instanceof CellSelection) {
+      cellSel = sel;
+    } else {
+      const end = atEndOfCell(view, axis, dir);
+      if (end == null) return false;
+      cellSel = new CellSelection(state.doc.resolve(end));
+    }
+
+    const $head = nextCell(cellSel.$headCell, axis, dir);
+    if (!$head) return false;
+    return maybeSetSelection(
+      state,
+      dispatch,
+      new CellSelection(cellSel.$anchorCell, $head),
+    );
+  };
+}
+
+export function handleTripleClick(view: EditorView, pos: number): boolean {
+  const doc = view.state.doc,
+    $cell = cellAround(doc.resolve(pos));
+  if (!$cell) return false;
+  view.dispatch(view.state.tr.setSelection(new CellSelection($cell)));
+  return true;
+}
+
+/**
+ * @public
+ */
+export function handlePaste(
+  view: EditorView,
+  _: ClipboardEvent,
+  slice: Slice,
+): boolean {
+  if (!isInTable(view.state)) return false;
+  let cells = pastedCells(slice);
+  const sel = view.state.selection;
+  if (sel instanceof CellSelection) {
+    if (!cells) {
+      cells = {
+        width: 1,
+        height: 1,
+        rows: [
+          Fragment.from(
+            fitSlice(tableNodeTypes(view.state.schema).cell, slice),
+          ),
+        ],
+      };
+    }
+    const table = sel.$anchorCell.node(-1);
+    const start = sel.$anchorCell.start(-1);
+    const rect = TableMap.get(table).rectBetween(
+      sel.$anchorCell.pos - start,
+      sel.$headCell.pos - start,
+    );
+    cells = clipCells(cells, rect.right - rect.left, rect.bottom - rect.top);
+    insertCells(view.state, view.dispatch, start, rect, cells);
+    return true;
+  } else if (cells) {
+    const $cell = selectionCell(view.state);
+    const start = $cell.start(-1);
+    insertCells(
+      view.state,
+      view.dispatch,
+      start,
+      TableMap.get($cell.node(-1)).findCell($cell.pos - start),
+      cells,
+    );
+    return true;
+  } else {
+    return false;
+  }
+}
+
+export function handleMouseDown(
+  view: EditorView,
+  startEvent: MouseEvent,
+): void {
+  if (startEvent.ctrlKey || startEvent.metaKey) return;
+
+  const startDOMCell = domInCell(view, startEvent.target as Node);
+  let $anchor;
+  if (startEvent.shiftKey && view.state.selection instanceof CellSelection) {
+    // Adding to an existing cell selection
+    setCellSelection(view.state.selection.$anchorCell, startEvent);
+    startEvent.preventDefault();
+  } else if (
+    startEvent.shiftKey &&
+    startDOMCell &&
+    ($anchor = cellAround(view.state.selection.$anchor)) != null &&
+    cellUnderMouse(view, startEvent)?.pos != $anchor.pos
+  ) {
+    // Adding to a selection that starts in another cell (causing a
+    // cell selection to be created).
+    setCellSelection($anchor, startEvent);
+    startEvent.preventDefault();
+  } else if (!startDOMCell) {
+    // Not in a cell, let the default behavior happen.
+    return;
+  }
+
+  // Create and dispatch a cell selection between the given anchor and
+  // the position under the mouse.
+  function setCellSelection($anchor: ResolvedPos, event: MouseEvent): void {
+    let $head = cellUnderMouse(view, event);
+    const starting = tableEditingKey.getState(view.state) == null;
+    if (!$head || !inSameTable($anchor, $head)) {
+      if (starting) $head = $anchor;
+      else return;
+    }
+    const selection = new CellSelection($anchor, $head);
+    if (starting || !view.state.selection.eq(selection)) {
+      const tr = view.state.tr.setSelection(selection);
+      if (starting) tr.setMeta(tableEditingKey, $anchor.pos);
+      view.dispatch(tr);
+    }
+  }
+
+  // Stop listening to mouse motion events.
+  function stop(): void {
+    view.root.removeEventListener('mouseup', stop);
+    view.root.removeEventListener('dragstart', stop);
+    view.root.removeEventListener('mousemove', move);
+    if (tableEditingKey.getState(view.state) != null) {
+      view.dispatch(view.state.tr.setMeta(tableEditingKey, -1));
+    }
+  }
+
+  function move(_event: Event): void {
+    const event = _event as MouseEvent;
+    const anchor = tableEditingKey.getState(view.state);
+    let $anchor;
+    if (anchor != null) {
+      // Continuing an existing cross-cell selection
+      $anchor = view.state.doc.resolve(anchor);
+    } else if (domInCell(view, event.target as Node) != startDOMCell) {
+      // Moving out of the initial cell -- start a new cell selection
+      $anchor = cellUnderMouse(view, startEvent);
+      if (!$anchor) return stop();
+    }
+    if ($anchor) setCellSelection($anchor, event);
+  }
+
+  view.root.addEventListener('mouseup', stop);
+  view.root.addEventListener('dragstart', stop);
+  view.root.addEventListener('mousemove', move);
+}
+
+// Check whether the cursor is at the end of a cell (so that further
+// motion would move out of the cell)
+function atEndOfCell(view: EditorView, axis: Axis, dir: number): null | number {
+  if (!(view.state.selection instanceof TextSelection)) return null;
+
+  const { $head } = view.state.selection;
+  for (let d = $head.depth - 1; d >= 0; d--) {
+    const parent = $head.node(d),
+      index = dir < 0 ? $head.index(d) : $head.indexAfter(d);
+    if (index != (dir < 0 ? 0 : parent.childCount)) return null;
+    if (
+      parent.type.spec.tableRole == 'cell' ||
+      parent.type.spec.tableRole == 'header_cell'
+    ) {
+      const cellPos = $head.before(d);
+      const dirStr: 'up' | 'down' | 'left' | 'right' = axis == 'vert'
+        ? (dir > 0 ? 'down' : 'up')
+        : dir > 0
+        ? 'right'
+        : 'left';
+      return view.endOfTextblock(dirStr) ? cellPos : null;
+    }
+  }
+  return null;
+}
+
+function domInCell(view: EditorView, dom: Node | null): Node | null {
+  for (; dom && dom != view.dom; dom = dom.parentNode) {
+    if (dom.nodeName == 'TD' || dom.nodeName == 'TH') {
+      return dom;
+    }
+  }
+  return null;
+}
+
+function cellUnderMouse(
+  view: EditorView,
+  event: MouseEvent,
+): ResolvedPos | null {
+  const mousePos = view.posAtCoords({
+    left: event.clientX,
+    top: event.clientY,
+  });
+  if (!mousePos) return null;
+  return mousePos ? cellAround(view.state.doc.resolve(mousePos.pos)) : null;
+}

package/src/utilities/tableEditing.ts

@@ -0,0 +1,90 @@
+// This file defines a plugin that handles the drawing of cell
+// selections and the basic user interactions for creating and working
+// with such selections. It also makes sure that, after each
+// transaction, the shapes of tables are normalized to be rectangular
+// and not contain overlapping cells.
+
+import { Plugin } from 'prosemirror-state';
+
+import { drawCellSelection, normalizeSelection } from './CellSelection.js';
+import { fixTables, fixTablesKey } from './fixTables.js';
+import {
+  handleKeyDown,
+  handleMouseDown,
+  handlePaste,
+  handleTripleClick,
+} from './input.js';
+import { tableEditingKey } from './util.js';
+
+/**
+ * @public
+ */
+export type TableEditingOptions = {
+  allowTableNodeSelection?: boolean;
+};
+
+/**
+ * Creates a [plugin](http://prosemirror.net/docs/ref/#state.Plugin)
+ * that, when added to an editor, enables cell-selection, handles
+ * cell-based copy/paste, and makes sure tables stay well-formed (each
+ * row has the same width, and cells don't overlap).
+ *
+ * You should probably put this plugin near the end of your array of
+ * plugins, since it handles mouse and arrow key events in tables
+ * rather broadly, and other plugins, like the gap cursor or the
+ * column-width dragging plugin, might want to get a turn first to
+ * perform more specific behavior.
+ *
+ * @public
+ */
+export function tableEditing({
+  allowTableNodeSelection = false,
+}: TableEditingOptions = {}): Plugin {
+  return new Plugin({
+    key: tableEditingKey,
+
+    // This piece of state is used to remember when a mouse-drag
+    // cell-selection is happening, so that it can continue even as
+    // transactions (which might move its anchor cell) come in.
+    state: {
+      init() {
+        return null;
+      },
+      apply(tr, cur) {
+        const set = tr.getMeta(tableEditingKey);
+        if (set != null) return set == -1 ? null : set;
+        if (cur == null || !tr.docChanged) return cur;
+        const { deleted, pos } = tr.mapping.mapResult(cur);
+        return deleted ? null : pos;
+      },
+    },
+
+    props: {
+      decorations: drawCellSelection,
+
+      handleDOMEvents: {
+        mousedown: handleMouseDown,
+      },
+
+      createSelectionBetween(view) {
+        return tableEditingKey.getState(view.state) != null
+          ? view.state.selection
+          : null;
+      },
+
+      handleTripleClick,
+
+      handleKeyDown,
+
+      handlePaste,
+    },
+
+    appendTransaction(_, oldState, state) {
+      return normalizeSelection(
+        state,
+        fixTables(state, oldState),
+        allowTableNodeSelection,
+      );
+    },
+  });
+}

package/src/utilities/tableNodeTypes.ts

@@ -0,0 +1,32 @@
+// Helper for creating a schema that supports tables.
+
+import { NodeSpec, NodeType, Schema } from 'prosemirror-model';
+
+/**
+ * @public
+ */
+export type TableNodes = Record<
+  'table' | 'table_row' | 'table_cell' | 'table_header',
+  NodeSpec
+>;
+
+/**
+ * @public
+ */
+export type TableRole = 'table' | 'row' | 'cell' | 'header_cell';
+
+/**
+ * @public
+ */
+export function tableNodeTypes(schema: Schema): Record<TableRole, NodeType> {
+  let result = schema.cached.tableNodeTypes;
+  if (!result) {
+    result = schema.cached.tableNodeTypes = {};
+    for (const name in schema.nodes) {
+      const type = schema.nodes[name],
+        role = type.spec.tableRole;
+      if (role) result[role] = type;
+    }
+  }
+  return result;
+}

package/src/utilities/util.ts

@@ -0,0 +1,204 @@
+// Various helper function for working with tables
+
+import { EditorState, NodeSelection, PluginKey } from 'prosemirror-state';
+
+import { Attrs, Node, ResolvedPos } from 'prosemirror-model';
+import { CellSelection } from './CellSelection.js';
+import { tableNodeTypes } from './tableNodeTypes.js';
+import { Rect, TableMap } from './TableMap.js';
+
+/**
+ * @public
+ */
+export type MutableAttrs = Record<string, unknown>;
+
+/**
+ * @public
+ */
+export interface CellAttrs {
+  colspan: number;
+  rowspan: number;
+  colwidth: number[] | null;
+}
+
+/**
+ * @public
+ */
+export const tableEditingKey = new PluginKey<number>('selectingCells');
+
+/**
+ * @public
+ */
+export function cellAround($pos: ResolvedPos): ResolvedPos | null {
+  for (let d = $pos.depth - 1; d > 0; d--) {
+    if ($pos.node(d).type.spec.tableRole == 'row') {
+      return $pos.node(0).resolve($pos.before(d + 1));
+    }
+  }
+  return null;
+}
+
+export function cellWrapping($pos: ResolvedPos): null | Node {
+  for (let d = $pos.depth; d > 0; d--) {
+    // Sometimes the cell can be in the same depth.
+    const role = $pos.node(d).type.spec.tableRole;
+    if (role === 'cell' || role === 'header_cell') return $pos.node(d);
+  }
+  return null;
+}
+
+/**
+ * @public
+ */
+export function isInTable(state: EditorState): boolean {
+  const $head = state.selection.$head;
+  for (let d = $head.depth; d > 0; d--) {
+    if ($head.node(d).type.spec.tableRole == 'row') return true;
+  }
+  return false;
+}
+
+/**
+ * @internal
+ */
+export function selectionCell(state: EditorState): ResolvedPos {
+  const sel = state.selection as CellSelection | NodeSelection;
+  if ('$anchorCell' in sel && sel.$anchorCell) {
+    return sel.$anchorCell.pos > sel.$headCell.pos
+      ? sel.$anchorCell
+      : sel.$headCell;
+  } else if (
+    'node' in sel &&
+    sel.node &&
+    sel.node.type.spec.tableRole == 'cell'
+  ) {
+    return sel.$anchor;
+  }
+  const $cell = cellAround(sel.$head) || cellNear(sel.$head);
+  if ($cell) {
+    return $cell;
+  }
+  throw new RangeError(`No cell found around position ${sel.head}`);
+}
+
+/**
+ * @public
+ */
+export function cellNear($pos: ResolvedPos): ResolvedPos | undefined {
+  for (
+    let after = $pos.nodeAfter, pos = $pos.pos;
+    after;
+    after = after.firstChild, pos++
+  ) {
+    const role = after.type.spec.tableRole;
+    if (role == 'cell' || role == 'header_cell') return $pos.doc.resolve(pos);
+  }
+  for (
+    let before = $pos.nodeBefore, pos = $pos.pos;
+    before;
+    before = before.lastChild, pos--
+  ) {
+    const role = before.type.spec.tableRole;
+    if (role == 'cell' || role == 'header_cell') {
+      return $pos.doc.resolve(pos - before.nodeSize);
+    }
+  }
+}
+
+/**
+ * @public
+ */
+export function pointsAtCell($pos: ResolvedPos): boolean {
+  return $pos.parent.type.spec.tableRole == 'row' && !!$pos.nodeAfter;
+}
+
+/**
+ * @public
+ */
+export function moveCellForward($pos: ResolvedPos): ResolvedPos {
+  return $pos.node(0).resolve($pos.pos + $pos.nodeAfter!.nodeSize);
+}
+
+/**
+ * @internal
+ */
+export function inSameTable($cellA: ResolvedPos, $cellB: ResolvedPos): boolean {
+  return (
+    $cellA.depth == $cellB.depth &&
+    $cellA.pos >= $cellB.start(-1) &&
+    $cellA.pos <= $cellB.end(-1)
+  );
+}
+
+/**
+ * @public
+ */
+export function findCell($pos: ResolvedPos): Rect {
+  return TableMap.get($pos.node(-1)).findCell($pos.pos - $pos.start(-1));
+}
+
+/**
+ * @public
+ */
+export function colCount($pos: ResolvedPos): number {
+  return TableMap.get($pos.node(-1)).colCount($pos.pos - $pos.start(-1));
+}
+
+/**
+ * @public
+ */
+export function nextCell(
+  $pos: ResolvedPos,
+  axis: 'horiz' | 'vert',
+  dir: number,
+): ResolvedPos | null {
+  const table = $pos.node(-1);
+  const map = TableMap.get(table);
+  const tableStart = $pos.start(-1);
+
+  const moved = map.nextCell($pos.pos - tableStart, axis, dir);
+  return moved == null ? null : $pos.node(0).resolve(tableStart + moved);
+}
+
+/**
+ * @public
+ */
+export function removeColSpan(attrs: CellAttrs, pos: number, n = 1): CellAttrs {
+  const result: CellAttrs = { ...attrs, colspan: attrs.colspan - n };
+
+  if (result.colwidth) {
+    result.colwidth = result.colwidth.slice();
+    result.colwidth.splice(pos, n);
+    if (!result.colwidth.some((w) => w > 0)) result.colwidth = null;
+  }
+  return result;
+}
+
+/**
+ * @public
+ */
+export function addColSpan(attrs: CellAttrs, pos: number, n = 1): Attrs {
+  const result = { ...attrs, colspan: attrs.colspan + n };
+  if (result.colwidth) {
+    result.colwidth = result.colwidth.slice();
+    for (let i = 0; i < n; i++) result.colwidth.splice(pos, 0, 0);
+  }
+  return result;
+}
+
+/**
+ * @public
+ */
+export function columnIsHeader(
+  map: TableMap,
+  table: Node,
+  col: number,
+): boolean {
+  const headerCell = tableNodeTypes(table.type.schema).header_cell;
+  for (let row = 0; row < map.height; row++) {
+    if (table.nodeAt(map.map[col + row * map.width])!.type != headerCell) {
+      return false;
+    }
+  }
+  return true;
+}

package/assets/tables.css

@@ -1,85 +0,0 @@
-.kb-editor .tableWrapper {
-  overflow-x: auto;
-}
-.kb-editor table {
-  border-collapse: collapse;
-  table-layout: fixed;
-  width: 100%;
-  overflow: hidden;
-}
-.kb-editor td,
-.kb-editor th {
-  vertical-align: top;
-  box-sizing: border-box;
-  position: relative;
-  border: 1px solid var(--kb-color-border);
-}
-
-.kb-editor td:not([data-colwidth]):not(.column-resize-dragging),
-.kb-editor th:not([data-colwidth]):not(.column-resize-dragging) {
-  /* if there's no explicit width set and the column is not being resized, set a default width */
-  min-width: var(--default-cell-min-width);
-}
-
-.kb-editor .column-resize-handle {
-  position: absolute;
-  right: -2px;
-  top: 0;
-  bottom: 0;
-  width: 4px;
-  z-index: 20;
-  background-color: #adf;
-  pointer-events: none;
-}
-.kb-editor.resize-cursor {
-  cursor: ew-resize;
-  cursor: col-resize;
-}
-/* Give selected cells a blue overlay */
-.kb-editor .selectedCell:after {
-  z-index: 2;
-  position: absolute;
-  content: '';
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background: rgba(200, 200, 255, 0.4);
-  pointer-events: none;
-}
-
-/* Touch-optimized table editing */
-@media (max-width: 767px) {
-  .kb-editor table {
-    font-size: var(--kb-text-sm);
-    border-collapse: collapse;
-    width: 100%;
-    overflow-x: auto;
-    display: block;
-    white-space: nowrap;
-  }
-
-  .kb-editor th,
-  .kb-editor td {
-    min-width: 120px;
-    padding: var(--kb-space-md);
-    border: 1px solid var(--kb-color-border);
-    vertical-align: top;
-  }
-
-  /* Hide complex table controls on mobile */
-  .tableWrapper .column-resize-handle {
-    display: none !important;
-  }
-
-  .kb-editor .tableWrapper {
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-  }
-
-  /* Table selection visual feedback */
-  .kb-editor .selectedCell {
-    background: rgba(var(--kb-color-primary-rgb), 0.1);
-    border: 2px solid var(--kb-color-primary);
-  }
-}