fix: Fixed issue on Android where pressing backspace in Super notes would delete characters on both side of the cursor (#2336)

packages/web/src/javascripts/Components/SuperEditor/Plugins/MobileToolbarPlugin/MobileToolbarPlugin.tsx

@@ -4,7 +4,7 @@ import useModal from '../../Lexical/Hooks/useModal'
 import { InsertTableDialog } from '../../Plugins/TablePlugin'
 import { getSelectedNode } from '../../Lexical/Utils/getSelectedNode'
 import { sanitizeUrl } from '../../Lexical/Utils/sanitizeUrl'
-import { $getSelection, $isRangeSelection, DELETE_CHARACTER_COMMAND, FORMAT_TEXT_COMMAND } from 'lexical'
+import { $getSelection, $isRangeSelection, FORMAT_TEXT_COMMAND } from 'lexical'
 import { $isLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { GetAlignmentBlocks } from '../Blocks/Alignment'
@@ -23,14 +23,11 @@ import { GetPasswordBlock } from '../Blocks/Password'
 import { GetQuoteBlock } from '../Blocks/Quote'
 import { GetTableBlock } from '../Blocks/Table'
 import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
-import { classNames, Platform } from '@standardnotes/snjs'
+import { classNames } from '@standardnotes/snjs'
 import { SUPER_TOGGLE_SEARCH } from '@standardnotes/ui-services'
 import { useApplication } from '@/Components/ApplicationProvider'
 import { GetRemoteImageBlock } from '../Blocks/RemoteImage'
 import { InsertRemoteImageDialog } from '../RemoteImagePlugin/RemoteImagePlugin'
-import { SKAlert } from '@standardnotes/styles'
-
-const DontShowSuperAndroidBackspaceAlertKey = 'dontShowSuperAndroidBackspaceAlert'
 
 const MobileToolbarPlugin = () => {
   const application = useApplication()
@@ -40,7 +37,6 @@ const MobileToolbarPlugin = () => {
   const [isInEditor, setIsInEditor] = useState(false)
   const [isInToolbar, setIsInToolbar] = useState(false)
   const isMobile = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
-  const isAndroid = application.platform === Platform.Android
 
   const toolbarRef = useRef<HTMLDivElement>(null)
   const backspaceButtonRef = useRef<HTMLButtonElement>(null)
@@ -204,38 +200,6 @@ const MobileToolbarPlugin = () => {
     }
   }, [])
 
-  useEffect(() => {
-    if (!isAndroid) {
-      return
-    }
-
-    const dontShowAgain = application.getValue(DontShowSuperAndroidBackspaceAlertKey)
-
-    if (dontShowAgain) {
-      return
-    }
-
-    const alert = new SKAlert({
-      title: 'Android backspace issue',
-      text: 'There is a known issue with Super on Android where pressing the backspace will also delete the character after the cursor. We are working on a fix for this. Please use the backspace button in the toolbar as a workaround.',
-      buttons: [
-        {
-          text: 'OK',
-          style: 'default',
-        },
-        {
-          text: "Don't show again",
-          style: 'default',
-          action: () => {
-            application.setValue(DontShowSuperAndroidBackspaceAlertKey, true)
-          },
-        },
-      ],
-    })
-
-    alert.present()
-  }, [application, isAndroid])
-
   const isFocusInEditorOrToolbar = isInEditor || isInToolbar
   if (!isMobile || !isFocusInEditorOrToolbar) {
     return null
@@ -269,20 +233,6 @@ const MobileToolbarPlugin = () => {
         >
           <Icon type="keyboard-close" size="medium" />
         </button>
-        {isAndroid && (
-          <button
-            className="flex flex-shrink-0 items-center justify-center rounded border-l border-border py-3 px-3"
-            aria-label="Backspace"
-            ref={backspaceButtonRef}
-            onClick={() => {
-              editor.update(() => {
-                editor.dispatchCommand(DELETE_CHARACTER_COMMAND, true)
-              })
-            }}
-          >
-            <Icon type="backspace" size="medium" />
-          </button>
-        )}
       </div>
     </>
   )