Keyboard "point mode": arrow keys pick cell references while editing a formula

Mirrors the existing mouse point mode (click/drag a grid cell to insert
its reference) without leaving the keyboard. Arrow keys only take over
when the caret sits right after a token that expects a new operand --
the leading '=', an operator, '(', or the ';' argument separator, same
as Excel/Numbers -- so editing an existing formula by hand still works
everywhere else. Shift+Arrow extends to a range, matching the existing
mouse-drag behavior; a fresh chain always starts one cell from the cell
being edited.

New composable (src/composables/useKeyboardPointMode.ts) needed no store
changes: store.pointClick/pointDrag already do the right thing given
target coordinates. Wired into both TableGrid.vue's in-cell editor and
FormulaBar.vue's top formula field, which already share one
registerFormulaEditor interface.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

README.md

@@ -133,6 +133,7 @@ umbenennen, löschen, per Drag sortieren). Zoom 40–200 % pro Blatt
 | **`Strg`/`Cmd`+`C`/`X`/`V`** | Kopieren / Ausschneiden / Einfügen (Zellen + Formatierung, bezugsangepasst) |
 | **`Strg`/`Cmd`+`Z`** · **`Strg`/`Cmd`+`Y`** / **`Strg`/`Cmd`+`Shift`+`Z`** | Rückgängig · Wiederholen (auch als Symbolleisten-Buttons ↶ ↷) |
 | **`F4`** (im Editor/in der Formelleiste) | Bezug am Cursor sperren/zyklisch umschalten: `A1` → `$A$1` → `A$1` → `$A1` → `A1`; bei markiertem Text werden **alle** darin gefundenen Bezüge auf einmal umgeschaltet, jeder ausgehend vom eigenen Zustand |
+| **Pfeiltasten** (im Editor/in der Formelleiste, an Stellen wo ein Bezug erwartet wird) | „Point Mode" per Tastatur — zeigt auf eine Zelle statt den Text-Cursor zu bewegen, genau wie ein Klick es täte; nur direkt nach `=`, einem Operator, `(` oder `;` (sonst normale Text-Navigation, mitten in der Formel editierbar). **Shift+Pfeil** erweitert zu einem Bereich (`A1:A5`). Ein Zeichen tippen, `Tab`/`Enter` oder `;` (nächstes Argument) übernehmen den gezeigten Bezug |
 | **`Alt`+`Enter`** bzw. **`Cmd`+`Enter`** (im Editor) | Zeilenumbruch in der Zelle einfügen, statt zu committen — `Cmd`+`Enter` als Mac-Fallback, da `⌥` (Option) dort eine Compose-Taste ist und nicht überall zuverlässig als reines Modifier ankommt |
 | `↑`/`↓`/`Tab`/`Enter`/`Esc` (bei offenem Funktions-Dropdown) | navigieren / Vorschlag übernehmen / nur das Dropdown schließen — hat Vorrang vor der sonstigen Bedeutung dieser Tasten (s. u. „Funktions-Autovervollständigung") |
 

src/components/FormulaBar.vue

@@ -3,6 +3,7 @@ import { nextTick, ref, watch } from 'vue';
 import { useDocument } from '../store/document';
 import { cycleReferenceLocks } from '../engine';
 import { useFormulaAutocomplete } from '../composables/useFormulaAutocomplete';
+import { useKeyboardPointMode } from '../composables/useKeyboardPointMode';
 import FormulaSuggest from './FormulaSuggest.vue';
 
 const store = useDocument();
@@ -10,6 +11,7 @@ const draft = ref('');
 const focused = ref(false);
 const fieldEl = ref<HTMLTextAreaElement | null>(null);
 const autocomplete = useFormulaAutocomplete();
+const keyboardPoint = useKeyboardPointMode();
 
 // keep the field in sync with the active cell unless the user is editing it
 watch(
@@ -47,6 +49,7 @@ function registerAsFormulaEditor() {
 }
 function onFocus() {
   focused.value = true;
+  keyboardPoint.reset();
   registerAsFormulaEditor();
 }
 function onEnter() {
@@ -67,6 +70,7 @@ function onEscape() {
  *  ends the "next click replaces the last reference" window. */
 function onInput(e: Event) {
   store.noteFormulaTyped();
+  keyboardPoint.reset();
   const el = e.target as HTMLTextAreaElement;
   autocomplete.update(draft.value, el.selectionStart ?? draft.value.length);
 }
@@ -91,6 +95,7 @@ function onPickSuggestion(i: number) {
 /** Clicking inside the field to reposition the caret should also end that window. */
 function onMousedown() {
   store.noteFormulaTyped();
+  keyboardPoint.reset();
 }
 /** F4: cycle relative -> absolute -> row-locked -> col-locked (Excel/Numbers
  *  "Bezug sperren") -- for the reference at the caret, or every reference a
@@ -124,6 +129,15 @@ function onKeydown(e: KeyboardEvent) {
       return;
     }
   }
+  // Keyboard "point mode" -- see useKeyboardPointMode's own doc comment.
+  const sel = store.doc.selection;
+  if (sel) {
+    const caret = el.selectionStart ?? draft.value.length;
+    if (keyboardPoint.handleArrowKey(e, sel.tableId, sel.anchor, draft.value, caret)) {
+      e.preventDefault();
+      return;
+    }
+  }
   // Alt+Enter (Windows/Excel-365-Mac) or Cmd+Enter (a macOS-safe fallback --
   // Option is a compose key there, so `altKey` alone isn't fully reliable;
   // `e.code` sidesteps `key` being altered by that composition).

src/components/TableGrid.vue

@@ -15,6 +15,7 @@ import { numberToCol, cycleReferenceLocks } from '../engine';
 import { useDocument } from '../store/document';
 import { DEFAULT_ROW_H, type SelectionState } from '../store/types';
 import { useFormulaAutocomplete } from '../composables/useFormulaAutocomplete';
+import { useKeyboardPointMode } from '../composables/useKeyboardPointMode';
 import ContextMenu from './ContextMenu.vue';
 import FormulaSuggest from './FormulaSuggest.vue';
 
@@ -833,6 +834,7 @@ const setEditRef = (el: unknown) => {
   editInput.value = (el as HTMLTextAreaElement) ?? null;
 };
 const autocomplete = useFormulaAutocomplete();
+const keyboardPoint = useKeyboardPointMode();
 let committing = false;
 
 const editStyle = computed(() => {
@@ -897,6 +899,7 @@ function formulaEditorHandle() {
 function beginEdit(c: number, r: number, initial?: string) {
   editing.value = { col: c, row: r };
   editValue.value = initial ?? store.cellInput(props.tableId, c, r);
+  keyboardPoint.reset();
   store.registerFormulaEditor(formulaEditorHandle());
   nextTick(() => {
     const el = editInput.value;
@@ -963,6 +966,20 @@ function onEditKeydown(e: KeyboardEvent) {
       return;
     }
   }
+  // Keyboard "point mode" -- arrow keys pick a cell/range reference right
+  // where a formula expects one, same as clicking/dragging a grid cell
+  // already does (see useKeyboardPointMode's own doc comment). Only takes
+  // over when it actually applies; otherwise falls through to the native
+  // textarea caret movement below.
+  if (editing.value) {
+    const el = editInput.value;
+    const caret = el?.selectionStart ?? editValue.value.length;
+    if (keyboardPoint.handleArrowKey(e, props.tableId, editing.value, editValue.value, caret)) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+  }
   // Alt+Enter (Windows/Excel-365-Mac) or Cmd+Enter (a macOS-safe fallback --
   // Option is a compose key there, e.g. for Control+Option+Return, the
   // traditional Mac Excel shortcut, or some layouts/browsers, so `altKey`
@@ -1028,6 +1045,7 @@ function onEditBlur() {
 function onEditInput() {
   resizeEditor();
   store.noteFormulaTyped();
+  keyboardPoint.reset();
   const el = editInput.value;
   autocomplete.update(editValue.value, el?.selectionStart ?? editValue.value.length);
 }
@@ -1043,6 +1061,7 @@ function onPickSuggestion(i: number) {
 function onEditMousedown(e: MouseEvent) {
   e.stopPropagation();
   store.noteFormulaTyped();
+  keyboardPoint.reset();
 }
 
 // ---- keyboard navigation (Excel-like) ------------------------

src/composables/useKeyboardPointMode.ts

@@ -0,0 +1,94 @@
+/**
+ * Keyboard-driven counterpart to the mouse "point mode" already in
+ * store.pointClick/pointDrag (click/drag a grid cell while editing a
+ * formula to insert its reference): arrow keys pick a cell/range the same
+ * way, without leaving the keyboard.
+ *
+ * Only takes over the arrow keys when the caret sits right after a token
+ * that expects a new operand -- the leading '=', an operator, '(', or the
+ * ';' argument separator -- exactly like Excel/Numbers decide the same
+ * thing. Anywhere else (mid-identifier, mid-number, ...) arrow keys keep
+ * moving the text caret as normal; editing an existing formula by hand
+ * still works.
+ *
+ * First press of a fresh chain steps one cell from `home` (the cell being
+ * edited) in the pressed direction. Further plain-arrow presses move that
+ * single cell on; holding Shift instead grows a range from the chain's
+ * first cell (its `anchor`) to wherever the focus has moved to, the same
+ * "collapse on a plain move, grow from the anchor on a extending one"
+ * convention TableGrid's own grid-cell navigate() already uses.
+ */
+import { useDocument } from '../store/document';
+
+const ARROW_DELTA: Record<string, [number, number]> = {
+  ArrowUp: [0, -1],
+  ArrowDown: [0, 1],
+  ArrowLeft: [-1, 0],
+  ArrowRight: [1, 0],
+};
+
+const OPERAND_BOUNDARY = new Set(['=', '+', '-', '*', '/', '^', '&', '<', '>', '(', ';']);
+
+export function useKeyboardPointMode() {
+  const store = useDocument();
+  let anchor: { tableId: string; col: number; row: number } | null = null;
+  let focus: { col: number; row: number } | null = null;
+
+  /** Ends the current chain (if any) -- call whenever the editor's text is
+   *  typed into directly, the caret is repositioned by a mouse click, or a
+   *  new edit session begins, exactly the same triggers that already reset
+   *  the mouse point-mode's own "replace on next click" window
+   *  (store.noteFormulaTyped()). */
+  function reset() {
+    anchor = null;
+    focus = null;
+  }
+
+  function canStartAt(text: string, caret: number): boolean {
+    if (!text.startsWith('=')) return false;
+    const prev = text[caret - 1];
+    return prev !== undefined && OPERAND_BOUNDARY.has(prev);
+  }
+
+  /** Handles one ArrowUp/Down/Left/Right press (optionally Shift-extended).
+   *  Returns true if it took over the key (caller must preventDefault +
+   *  stopPropagation); false if normal caret movement should happen
+   *  instead. `home` is the cell being edited. */
+  function handleArrowKey(
+    e: KeyboardEvent,
+    tableId: string,
+    home: { col: number; row: number },
+    text: string,
+    caret: number,
+  ): boolean {
+    const delta = ARROW_DELTA[e.key];
+    if (!delta) return false;
+    const t = store.tableById(tableId);
+    if (!t) return false;
+    const clampC = (c: number) => Math.max(0, Math.min(t.cols - 1, c));
+    const clampR = (r: number) => Math.max(0, Math.min(t.rows - 1, r));
+
+    if (!anchor || anchor.tableId !== tableId) {
+      if (!canStartAt(text, caret)) return false;
+      const target = { col: clampC(home.col + delta[0]), row: clampR(home.row + delta[1]) };
+      anchor = { tableId, ...target };
+      focus = target;
+      store.pointClick(tableId, target.col, target.row);
+      return true;
+    }
+
+    const base = focus ?? anchor;
+    const next = { col: clampC(base.col + delta[0]), row: clampR(base.row + delta[1]) };
+    if (e.shiftKey) {
+      focus = next;
+      store.pointDrag(tableId, anchor.col, anchor.row, focus.col, focus.row);
+    } else {
+      anchor = { tableId, ...next };
+      focus = next;
+      store.pointClick(tableId, next.col, next.row);
+    }
+    return true;
+  }
+
+  return { handleArrowKey, reset };
+}