From 5871524421611ee4a0bdbfd73f1524307ba6a1b4 Mon Sep 17 00:00:00 2001
From: Wild Karl-Heinz <kh.wild@wicom.li>
Date: Mon, 28 Sep 2026 20:50:16 +0200
Subject: [PATCH] Keep the keyboard on the grid after the formula bar; editor
 uses cell colours

- Enter/Escape in the formula bar (and a jump via the Name Box) hand the
  focus back to the table of the selection, so the arrow keys move the
  active cell again instead of doing nothing.
- The in-cell editor takes the cell's own text/fill colour and bold/
  italic, so a light-on-dark cell no longer turns into dark text on a
  dark fill while editing.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 app/frontend/components/FormulaBar.vue | 15 ++++++++++++---
 app/frontend/components/TableGrid.vue  | 18 +++++++++++++++++-
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/app/frontend/components/FormulaBar.vue b/app/frontend/components/FormulaBar.vue
index c6ff33c..db605f2 100644
--- a/app/frontend/components/FormulaBar.vue
+++ b/app/frontend/components/FormulaBar.vue
@@ -66,7 +66,7 @@ function onNameInput() {
  *  in this app. */
 function jumpTo(text: string) {
   if (store.jumpToNameInput(text)) {
-    (document.activeElement as HTMLElement)?.blur();
+    backToGrid();
   } else {
     toast.error(`„${text}" ist kein gültiger Bezug oder Name.`);
     nextTick(() => nameEl.value?.select());
@@ -102,6 +102,15 @@ function onNameKeydown(e: KeyboardEvent) {
   }
 }
 
+/** Leave the bar and hand the keyboard back to the grid of the selected
+ *  table, so the arrow keys move the active cell again (just blurring
+ *  would leave nothing focused). */
+function backToGrid() {
+  (document.activeElement as HTMLElement)?.blur();
+  const tableId = store.doc.selection?.tableId;
+  if (tableId) window.dispatchEvent(new CustomEvent('numolus:focus-grid', { detail: tableId }));
+}
+
 function commit() {
   const sel = store.doc.selection;
   if (sel) store.setCellInput(sel.tableId, sel.anchor.col, sel.anchor.row, draft.value);
@@ -134,7 +143,7 @@ function onFocus() {
 }
 function onEnter() {
   commit();
-  (document.activeElement as HTMLElement)?.blur();
+  backToGrid();
 }
 function onBlur() {
   focused.value = false;
@@ -144,7 +153,7 @@ function onBlur() {
 }
 function onEscape() {
   draft.value = store.activeCellInput.value;
-  (document.activeElement as HTMLElement)?.blur();
+  backToGrid();
 }
 /** Actual typing (not a point-mode click inserting a reference programmatically)
  *  ends the "next click replaces the last reference" window. */
diff --git a/app/frontend/components/TableGrid.vue b/app/frontend/components/TableGrid.vue
index c5eff88..aaf2dbd 100644
--- a/app/frontend/components/TableGrid.vue
+++ b/app/frontend/components/TableGrid.vue
@@ -878,12 +878,21 @@ let committing = false;
 const editStyle = computed(() => {
   const s = editing.value;
   if (!s) return {};
-  return {
+  // look like the cell being edited: its own text/fill colour (else the
+  // table's), bold/italic -- a white-on-dark cell must not turn into dark
+  // text on a dark fill while editing
+  const f = store.cellFormat(props.tableId, s.col, s.row);
+  const style: Record<string, string> = {
     left: colLeft(s.col) + 'px',
     top: rowTop(s.row) + 'px',
     minWidth: colWidth(s.col) + 'px',
     minHeight: rowH(s.row) + 'px',
   };
+  if (f.color) style['--text'] = f.color;
+  if (f.bg) style['--surface'] = f.bg;
+  if (f.bold) style.fontWeight = '600';
+  if (f.italic) style.fontStyle = 'italic';
+  return style;
 });
 const editMirrorStyle = computed(() => {
   const s = editing.value;
@@ -1332,7 +1341,14 @@ const totalWidth = computed(() => {
   return w;
 });
 
+// the formula bar / Name Box hand the keyboard back after Enter/Escape
+function onFocusGridRequest(e: Event) {
+  if ((e as CustomEvent<string>).detail === props.tableId) root.value?.focus();
+}
+window.addEventListener('numolus:focus-grid', onFocusGridRequest);
+
 onBeforeUnmount(() => {
+  window.removeEventListener('numolus:focus-grid', onFocusGridRequest);
   onDragUp();
   onPointDragUp();
   onFillDragUp();