Fix deletion issues when using Chromium Android (#5644)

facebook · Mar 13, 2024 · 783f0aa · 783f0aa
1 parent a424147
commit 783f0aa
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 12 deletions.
diff --git a/packages/lexical/src/LexicalEvents.ts b/packages/lexical/src/LexicalEvents.ts
@@ -13,7 +13,7 @@ import type {TextNode} from './nodes/LexicalTextNode';
 
 import {
   CAN_USE_BEFORE_INPUT,
-  IS_ANDROID,
+  IS_ANDROID_CHROME,
   IS_APPLE_WEBKIT,
   IS_FIREFOX,
   IS_IOS,
@@ -545,15 +545,13 @@ function onBeforeInput(event: InputEvent, editor: LexicalEditor): void {
       }
 
       if ($isRangeSelection(selection)) {
-        // Used for handling backspace in Android.
-        if (IS_ANDROID) {
-          $setCompositionKey(selection.anchor.key);
-        }
+        const isSelectionAnchorSameAsFocus =
+          selection.anchor.key === selection.focus.key;
 
         if (
           isPossiblyAndroidKeyPress(event.timeStamp) &&
           editor.isComposing() &&
-          selection.anchor.key === selection.focus.key
+          isSelectionAnchorSameAsFocus
         ) {
           $setCompositionKey(null);
           lastKeyDownTimeStamp = 0;
@@ -573,15 +571,23 @@ function onBeforeInput(event: InputEvent, editor: LexicalEditor): void {
             );
             selection.style = anchorNode.getStyle();
           }
-          const selectedText = selection.anchor.getNode().getTextContent();
-          if (selectedText.length <= 1) {
-            event.preventDefault();
-            dispatchCommand(editor, DELETE_CHARACTER_COMMAND, true);
-          }
         } else {
           $setCompositionKey(null);
           event.preventDefault();
-          dispatchCommand(editor, DELETE_CHARACTER_COMMAND, true);
+          // Chromium Android at the moment seems to ignore the preventDefault
+          // on 'deleteContentBackward' and still deletes the content. Which leads
+          // to multiple deletions. So we let the browser handle the deletion in this case.
+          const selectedNodeText = selection.anchor.getNode().getTextContent();
+          const hasSelectedAllTextInNode =
+            selection.anchor.offset === 0 &&
+            selection.focus.offset === selectedNodeText.length;
+          const shouldLetBrowserHandleDelete =
+            IS_ANDROID_CHROME &&
+            isSelectionAnchorSameAsFocus &&
+            !hasSelectedAllTextInNode;
+          if (!shouldLetBrowserHandleDelete) {
+            dispatchCommand(editor, DELETE_CHARACTER_COMMAND, true);
+          }
         }
         return;
       }

diff --git a/packages/shared/src/environment.ts b/packages/shared/src/environment.ts
@@ -49,5 +49,8 @@ export const IS_CHROME: boolean =
   CAN_USE_DOM && /^(?=.*Chrome).*/i.test(navigator.userAgent);
 // export const canUseTextInputEvent: boolean = CAN_USE_DOM && 'TextEvent' in window && !documentMode;
 
+export const IS_ANDROID_CHROME: boolean =
+  CAN_USE_DOM && IS_ANDROID && IS_CHROME;
+
 export const IS_APPLE_WEBKIT =
   CAN_USE_DOM && /AppleWebKit\/[\d.]+/.test(navigator.userAgent) && !IS_CHROME;