From f03f701b3693ccdcba4220d8f97c41880e3624c0 Mon Sep 17 00:00:00 2001
From: Andres-CT98 <107568016+Andres-CT98@users.noreply.github.com>
Date: Thu, 17 Aug 2023 11:57:48 -0600
Subject: [PATCH] Replace first cell content if input while on cell selection
 (#2030)

* select first cell content and empty, add undo if change
---
 .../TableCellSelection/keyUtils/handleKeyDownEvent.ts | 11 +++++++++--
 .../TableCellSelection/keyUtils/handleKeyUpEvent.ts   |  4 ++++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/keyUtils/handleKeyDownEvent.ts b/packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/keyUtils/handleKeyDownEvent.ts
index e6e1354c0d2..a8f7ac8fa75 100644
--- a/packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/keyUtils/handleKeyDownEvent.ts
+++ b/packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/keyUtils/handleKeyDownEvent.ts
@@ -9,6 +9,7 @@ import { TableCellSelectionState } from '../TableCellSelectionState';
 import { updateSelection } from '../utils/updateSelection';
 import {
     contains,
+    createRange,
     isCtrlOrMetaPressed,
     Position,
     safeInstanceOf,
@@ -37,6 +38,7 @@ export function handleKeyDownEvent(
         return;
     }
 
+    const range = editor.getSelectionRangeEx();
     if (shiftKey) {
         if (!state.firstTarget) {
             const pos = editor.getFocusedPosition();
@@ -70,10 +72,15 @@ export function handleKeyDownEvent(
             }
         });
     } else if (
-        editor.getSelectionRangeEx()?.type == SelectionRangeTypes.TableSelection &&
+        range?.type == SelectionRangeTypes.TableSelection &&
         (!isCtrlOrMetaPressed(event.rawEvent) || which == Keys.HOME || which == Keys.END)
     ) {
-        editor.select(null);
+        // Select all content in the first cell
+        const row = range.ranges[0];
+        const firstCell = row.startContainer.childNodes[row.startOffset];
+        const children = firstCell.childNodes;
+        const contentRange = createRange(children[0], children[children.length - 1]);
+        editor.select(contentRange);
     }
 }
 
diff --git a/packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/keyUtils/handleKeyUpEvent.ts b/packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/keyUtils/handleKeyUpEvent.ts
index 617c86b4ca5..62530408ee9 100644
--- a/packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/keyUtils/handleKeyUpEvent.ts
+++ b/packages/roosterjs-editor-plugins/lib/plugins/TableCellSelection/keyUtils/handleKeyUpEvent.ts
@@ -1,5 +1,6 @@
 import { clearState } from '../utils/clearState';
 import { IEditor, Keys, PluginKeyUpEvent } from 'roosterjs-editor-types';
+import { isCharacterValue } from 'roosterjs-editor-dom';
 import { TableCellSelectionState } from '../TableCellSelectionState';
 
 const IGNORE_KEY_UP_KEYS = [
@@ -26,6 +27,9 @@ export function handleKeyUpEvent(
         !state.preventKeyUp &&
         IGNORE_KEY_UP_KEYS.indexOf(which) == -1
     ) {
+        if (isCharacterValue(event.rawEvent)) {
+            editor.addUndoSnapshot();
+        }
         clearState(state, editor);
     }
     state.preventKeyUp = false;