fix(mobile): prevent cursor from hiding behind keyboard and toolbar on Android

- Enable avoidIosKeyboard in TenTap editor bridge
- Add KeyboardAvoidingView with height behavior for Android
- Implement JavaScript injection to auto-scroll cursor into view
- Listen for selectionchange, input, and click events

Author: batalabs

apps/mobile/v1/src/hooks/useNoteEditor.ts

@@ -28,7 +28,7 @@ export function useNoteEditor(noteId?: string): UseNoteEditorReturn {
   // Initialize editor with TenTapStartKit
   const editor = useEditorBridge({
     autofocus: false,
-    avoidIosKeyboard: false,
+    avoidIosKeyboard: true,
     initialContent: '<p></p>',
     bridgeExtensions: TenTapStartKit,
   });

apps/mobile/v1/src/screens/EditNote/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { View, Text, StyleSheet, Alert, TextInput } from 'react-native';
+import { View, Text, StyleSheet, Alert, TextInput, Platform } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useRouter, useLocalSearchParams } from 'expo-router';
 import * as Haptics from 'expo-haptics';
@@ -175,14 +175,44 @@ export default function EditNoteScreen() {
         <View style={[styles.divider, { backgroundColor: theme.colors.border, marginHorizontal: -16 }]} />
       </View>
 
-      <View style={styles.editorContainer}>
+      <View style={[styles.editorContainer, Platform.OS === 'android' && keyboardHeight > 0 && { marginBottom: keyboardHeight + 60 }]}>
         <RichText
           editor={editor}
           style={{ flex: 1, backgroundColor: theme.colors.background }}
           onLoad={handleEditorLoad}
           webViewProps={{
             bounces: false,
             overScrollMode: 'never',
+            injectedJavaScript: Platform.OS === 'android' ? `
+              (function() {
+                function scrollToCursor() {
+                  const selection = window.getSelection();
+                  if (selection && selection.rangeCount > 0) {
+                    const range = selection.getRangeAt(0);
+                    const rect = range.getBoundingClientRect();
+                    const scrollBuffer = 220; // Extra space for toolbar
+
+                    // Check if cursor is too low on screen
+                    if (rect.bottom > window.innerHeight - scrollBuffer) {
+                      window.scrollBy({
+                        top: rect.bottom - (window.innerHeight - scrollBuffer),
+                        behavior: 'smooth'
+                      });
+                    }
+                  }
+                }
+
+                // Listen for selection changes
+                document.addEventListener('selectionchange', scrollToCursor);
+
+                // Listen for input events
+                document.addEventListener('input', scrollToCursor);
+
+                // Listen for click events
+                document.addEventListener('click', scrollToCursor);
+              })();
+              true;
+            ` : undefined,
           }}
         />
       </View>

apps/mobile/v1/src/screens/SettingsScreen.tsx

@@ -138,7 +138,7 @@ export default function SettingsScreen({ onLogout, navigation }: Props) {
           onPress: () => {
             Alert.alert(
               'Logout',
-              'Are you sure you want to logout? You'll need to enter your master password again.',
+              'Are you sure you want to logout? You\'ll need to enter your master password again.',
               [
                 { text: 'Cancel', style: 'cancel' },
                 { text: 'Logout', style: 'destructive', onPress: onLogout }
@@ -206,7 +206,7 @@ export default function SettingsScreen({ onLogout, navigation }: Props) {
           onPress: () => Linking.openURL('https://github.com/typelets/typelets-app'),
         },
         {
-          title: "What's New",
+          title: "What's New",
           subtitle: 'See latest updates and changes',
           icon: 'newspaper-outline',
           onPress: () => Linking.openURL('https://github.com/typelets/typelets-app/blob/main/CHANGELOG.md'),
@@ -554,7 +554,7 @@ export default function SettingsScreen({ onLogout, navigation }: Props) {
                   </Text>
                 </View>
                 <Text style={[styles.securityFeatureDescription, { color: theme.colors.mutedForeground }]}>
-                  Your master password is the only key to decrypt your notes. It&apos;s never stored on our servers and cannot be recovered if lost.
+                  {`Your master password is the only key to decrypt your notes. It's never stored on our servers and cannot be recovered if lost.`}
                 </Text>
               </View>
 
@@ -578,7 +578,7 @@ export default function SettingsScreen({ onLogout, navigation }: Props) {
                   </Text>
                 </View>
                 <Text style={[styles.securityFeatureDescription, { color: theme.colors.mutedForeground }]}>
-                  We can&apos;t read your notes, recover your password, or access your data. Your privacy is guaranteed by design.
+                  {`We can't read your notes, recover your password, or access your data. Your privacy is guaranteed by design.`}
                 </Text>
               </View>
             </View>