Merge pull request #21 from yandex-cloud/table-arrow-controls

feat: switching table rows when pressing up and down arrow keys on keyboard

Author: smsochneg

src/extensions/behavior/Selection/commands.ts

@@ -1,9 +1,10 @@
 import type {Node} from 'prosemirror-model';
-import {findChildren, findParentNodeClosestToPos, NodeWithPos} from 'prosemirror-utils';
+import {findChildren, findParentNodeClosestToPos} from 'prosemirror-utils';
 import {Command, EditorState, NodeSelection, TextSelection} from 'prosemirror-state';
 
 import {isCodeBlock} from '../../../utils/nodes';
 import {GapCursorSelection} from '../../behavior/Cursor/GapCursorSelection';
+import {createFakeParagraphNear} from '../../../utils/selection';
 
 export enum Direction {
     up = 'up',
@@ -47,28 +48,6 @@ const arrow =
         return false;
     };
 
-export const createFakeParagraphNear: (direction: 'up' | 'down', parent?: NodeWithPos) => Command =
-    (direction, parent) => (state, dispatch) => {
-        const paragraph = state.schema.nodes.paragraph;
-
-        if (!paragraph || !parent) {
-            return false;
-        }
-
-        const insertPos = direction === 'up' ? parent.pos : parent.pos + parent.node.nodeSize;
-
-        const tr = state.tr;
-        const sel = new GapCursorSelection(tr.doc.resolve(insertPos));
-
-        tr.setSelection(sel);
-
-        if (dispatch) {
-            dispatch(tr);
-        }
-
-        return true;
-    };
-
 export const arrowLeft = arrow(Direction.left);
 export const arrowDown = arrow(Direction.down);
 export const arrowUp = arrow(Direction.up);

src/extensions/yfm/YfmTable/commands/goToNextRow.ts

@@ -0,0 +1,57 @@
+import {Command, TextSelection} from 'prosemirror-state';
+import {atEndOfCell, findChildTableRows, findParentTableRow} from '../../../../table-utils';
+import {
+    findChildTableCells,
+    findParentTable,
+    findParentTableCell,
+} from '../../../../table-utils/utils';
+import {createFakeParagraphNear} from '../../../../utils/selection';
+
+export function goToNextRow(dir: 'up' | 'down'): Command {
+    return (state, dispatch, view) => {
+        const parentTable = findParentTable(state.selection);
+        const parentRow = findParentTableRow(state.selection);
+        const parentCell = findParentTableCell(state.selection);
+
+        if (!view || !atEndOfCell(view, dir === 'up' ? -1 : 1)) {
+            return false;
+        }
+
+        if (!parentTable || !parentRow || !parentCell) {
+            return false;
+        }
+
+        const allRows = findChildTableRows(parentTable.node);
+        const rowIndex = allRows.findIndex((node) => node.node === parentRow.node);
+
+        let cellIndex;
+
+        for (let i = 0; i < parentRow.node.childCount; i++) {
+            if (parentRow.node.child(i) === parentCell.node) cellIndex = i;
+        }
+
+        if (cellIndex === undefined) {
+            return false;
+        }
+
+        const newRowIndex = rowIndex + (dir === 'up' ? -1 : 1);
+
+        if (newRowIndex < 0 || newRowIndex >= allRows.length) {
+            createFakeParagraphNear(dir, parentTable)(state, dispatch);
+
+            return true;
+        }
+
+        const newRow = allRows[newRowIndex];
+        const childCells = findChildTableCells(newRow.node);
+        const cell = childCells[cellIndex];
+
+        const from = parentTable.start + newRow.pos + cell.pos + 3;
+
+        dispatch?.(
+            state.tr.setSelection(new TextSelection(state.doc.resolve(from))).scrollIntoView(),
+        );
+
+        return true;
+    };
+}

src/extensions/yfm/YfmTable/index.ts

@@ -7,6 +7,7 @@ import {getSpec, YfmTableSpecOptions} from './spec';
 import {createYfmTable} from './actions';
 import {fromYfm} from './fromYfm';
 import {toYfm} from './toYfm';
+import {goToNextRow} from './commands/goToNextRow';
 
 const action = 'createYfmTable';
 
@@ -43,6 +44,8 @@ export const YfmTable: ExtensionWithOptions<YfmTableOptions> = (builder, options
         .addKeymap(() => ({
             Tab: goToNextCell('next'),
             'Shift-Tab': goToNextCell('prev'),
+            ArrowDown: goToNextRow('down'),
+            ArrowUp: goToNextRow('up'),
         }))
 
         .addAction(action, () => createYfmTable);

src/table-utils/utils.ts

@@ -1,5 +1,7 @@
 import {Node as PmNode} from 'prosemirror-model';
 import {findChildren, findParentNode, Predicate} from 'prosemirror-utils';
+import type {EditorView} from 'prosemirror-view';
+import {isTextSelection} from '../utils/selection';
 import {TableRole} from './const';
 
 export const isTableNode: Predicate = (node) => node.type.spec.tableRole === TableRole.Table;
@@ -28,3 +30,19 @@ export const getTableDimensions = (node: PmNode | Node) => {
 
     return {rows: rows || 1, cols: cols || 1};
 };
+
+export function atEndOfCell(view: EditorView, dir: number) {
+    if (!isTextSelection(view.state.selection)) 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 === TableRole.Cell) {
+            const cellPos = $head.before(d);
+            const dirStr = dir > 0 ? 'down' : 'up';
+            return view.endOfTextblock(dirStr) ? cellPos : null;
+        }
+    }
+    return null;
+}

src/utils/selection.ts

@@ -1,5 +1,7 @@
 import {Node, NodeType} from 'prosemirror-model';
-import {Selection, TextSelection, NodeSelection, AllSelection} from 'prosemirror-state';
+import {Selection, TextSelection, NodeSelection, AllSelection, Command} from 'prosemirror-state';
+import {NodeWithPos} from 'prosemirror-utils';
+import {GapCursorSelection} from '../extensions/behavior/Cursor/GapCursorSelection';
 
 NodeSelection.prototype.selectionName = 'NodeSelection';
 TextSelection.prototype.selectionName = 'TextSelection';
@@ -34,3 +36,25 @@ export const findSelectedNodeOfType = (nodeType: NodeType) => {
         return null;
     };
 };
+
+export const createFakeParagraphNear: (direction: 'up' | 'down', parent?: NodeWithPos) => Command =
+    (direction, parent) => (state, dispatch) => {
+        const paragraph = state.schema.nodes.paragraph;
+
+        if (!paragraph || !parent) {
+            return false;
+        }
+
+        const insertPos = direction === 'up' ? parent.pos : parent.pos + parent.node.nodeSize;
+
+        const tr = state.tr;
+        const sel = new GapCursorSelection(tr.doc.resolve(insertPos));
+
+        tr.setSelection(sel);
+
+        if (dispatch) {
+            dispatch(tr);
+        }
+
+        return true;
+    };