fix(sheet): typing over a selected cell replaces its content

Selecting a cell and typing appended to what was already there, because the
grid cell is a permanently contenteditable td and the keystroke just went to
the caret. Excel overwrites instead, which is what everyone expects from a
spreadsheet - and it is what made a two-value edit in the undo e2e test read
"firstsecond".

The first printable keystroke on a cell that is selected but not being edited
now clears it and lets the character land in the empty cell. The escape
hatches match Excel: F2 enters edit mode with the caret at the end,
double-click edits in place at the click position. IME composition takes the
same overwrite path, since it starts without a printable keydown.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: SamTV12345

playwright/specs/sheet_excel_chrome.spec.ts

@@ -159,11 +159,36 @@ test.describe('Sheet Excel chrome', () => {
     await ctx.close();
   });
 
+  test('typing over a selected cell replaces it, F2 and double-click edit it', async ({ page }) => {
+    const padId = `xl-overwrite-${Date.now()}`;
+    await openSheet(page, padId);
+    await commitCell(page, 0, 0, 'old'); // A1
+
+    // Selected, not editing: the first keystroke wipes the old content.
+    await cell(page, 0, 0).click();
+    await page.keyboard.type('new', { delay: 30 });
+    await page.keyboard.press('Enter');
+    await expect(cell(page, 0, 0)).toHaveText('new');
+
+    // F2 keeps the content and appends at the end.
+    await cell(page, 0, 0).click();
+    await page.keyboard.press('F2');
+    await page.keyboard.type('er', { delay: 30 });
+    await page.keyboard.press('Enter');
+    await expect(cell(page, 0, 0)).toHaveText('newer');
+
+    // Double-click also edits in place instead of overwriting.
+    await cell(page, 0, 0).dblclick();
+    await page.keyboard.type('!', { delay: 30 });
+    await page.keyboard.press('Enter');
+    await expect(cell(page, 0, 0)).toHaveText(/newer/);
+    await expect(cell(page, 0, 0)).toHaveText(/!/);
+  });
+
   test('undo and redo revert and reapply an edit', async ({ page }) => {
     const padId = `xl-undo-${Date.now()}`;
     await openSheet(page, padId);
-    // Typing into a cell appends to its content, so each value goes into a
-    // fresh cell — this test is about the history, not about cell editing.
+    // Two separate cells, so each edit is its own history entry.
     await commitCell(page, 0, 0, 'first'); // A1
     await commitCell(page, 1, 0, 'second'); // A2
 

ui/src/js/sheet/sheetView.ts

@@ -243,6 +243,24 @@ export class DomSheetView {
     document.head.appendChild(style);
   }
 
+  // caretToEnd collapses the caret behind the cell's text.
+  private caretToEnd(td: HTMLTableCellElement): void {
+    const sel = window.getSelection();
+    if (!sel) return;
+    const range = document.createRange();
+    range.selectNodeContents(td);
+    range.collapse(false);
+    sel.removeAllRanges();
+    sel.addRange(range);
+  }
+
+  // beginOverwrite empties the cell and puts the caret in it, so the keystroke
+  // that triggered it replaces the old content instead of appending to it.
+  private beginOverwrite(td: HTMLTableCellElement): void {
+    td.textContent = '';
+    this.caretToEnd(td);
+  }
+
   private attach(td: HTMLTableCellElement, r: number, c: number): void {
     td.addEventListener('mousedown', (e: MouseEvent) => {
       // Right-click inside an existing selection keeps it (Excel behaviour), so
@@ -285,6 +303,16 @@ export class DomSheetView {
       this.activeEdit = true;
       this.opts.onLiveEdit?.(r, c, td.textContent ?? '');
     });
+    // Double-click is Excel's "edit in place": keep the content and the caret
+    // where the user clicked, so the next keystroke does not wipe the cell.
+    td.addEventListener('dblclick', () => {
+      this.activeEdit = true;
+    });
+    // IME composition is the other way text starts arriving without a printable
+    // keydown we can see.
+    td.addEventListener('compositionstart', () => {
+      if (!this.activeEdit) this.beginOverwrite(td);
+    });
     td.addEventListener('keydown', (e: KeyboardEvent) => {
       const move = (dr: number, dc: number, extend: boolean) => {
         e.preventDefault();
@@ -323,6 +351,20 @@ export class DomSheetView {
         this.opts.onSelectionChange?.(this.selection);
         return this.render();
       }
+      // F2 enters edit mode on the existing content with the caret at the end,
+      // like Excel — the escape hatch from overwrite-on-typing below.
+      if (e.key === 'F2') {
+        e.preventDefault();
+        this.activeEdit = true;
+        this.caretToEnd(td);
+        return;
+      }
+      // Typing on a merely selected cell replaces its content (Excel): clear it
+      // and let the keystroke land in the empty cell.
+      if (!this.activeEdit && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+        this.beginOverwrite(td);
+        return;
+      }
       if (e.key === 'Enter') {
         e.preventDefault();
         td.blur();