The app becomes a Rails 8 application; the Vue frontend moves to app/frontend and is served through vite_rails. - Without an account documents stay in the browser (IndexedDB). Sign-in is by magic link or the 6-digit code from the same mail; afterwards local documents can be uploaded into the account. - Server documents (/d/<id>) with versioned saves and a single-editor lock per browser tab; others see them read-only and follow by polling. - Sharing via link (works without an account) and via e-mail invitation, roles viewer/editor; the owner manages links and people. - Store gains a read-only mode that blocks all content changes. - Solid Queue, Cache and Cable share the one PostgreSQL database. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
95 lines
3.6 KiB
TypeScript
95 lines
3.6 KiB
TypeScript
/**
|
|
* 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 };
|
|
}
|