feat(settings): add custom code settings screen

App.tsx

@@ -10,6 +10,7 @@ import LottieSplashScreen from 'react-native-lottie-splash-screen';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { Provider as PaperProvider } from 'react-native-paper';
 import * as Notifications from 'expo-notifications';
+import { KeyboardProvider } from 'react-native-keyboard-controller';
 
 import AppErrorBoundary, {
   ErrorFallback,
@@ -31,7 +32,6 @@ Notifications.setNotificationHandler({
   },
 });
 
-
 const App = () => {
   const state = useInitDatabase();
 
@@ -48,18 +48,23 @@ const App = () => {
   return (
     <Suspense fallback={null}>
       <GestureHandlerRootView style={styles.flex}>
-        <AppErrorBoundary>
-          <SafeAreaProvider>
-            <ThemeProvider>
-              <PaperProvider>
-                <BottomSheetModalProvider>
-                  <StatusBar translucent={true} backgroundColor="transparent" />
-                  <Main />
-                </BottomSheetModalProvider>
-              </PaperProvider>
-            </ThemeProvider>
-          </SafeAreaProvider>
-        </AppErrorBoundary>
+        <ThemeProvider>
+          <AppErrorBoundary>
+            <SafeAreaProvider>
+              <KeyboardProvider>
+                <PaperProvider>
+                  <BottomSheetModalProvider>
+                    <StatusBar
+                      translucent={true}
+                      backgroundColor="transparent"
+                    />
+                    <Main />
+                  </BottomSheetModalProvider>
+                </PaperProvider>
+              </KeyboardProvider>
+            </SafeAreaProvider>
+          </AppErrorBoundary>
+        </ThemeProvider>
       </GestureHandlerRootView>
     </Suspense>
   );

android/app/src/main/assets/css/toolWrapper.css

@@ -12,15 +12,15 @@
   right: unset;
   left: 50%;
   transform: translateX(-50%);
-  bottom: 120px;
+  bottom: calc(68px + var(--bottom-inset));
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
 }
 
 @media only screen and (min-width: 500px) {
   #ToolWrapper.horizontal {
-    bottom: 80px;
+    bottom: calc(28px + var(--bottom-inset));
   }
 }
 
@@ -32,7 +32,7 @@
 
 #ToolWrapper.hidden.horizontal {
   opacity: 0;
-  bottom: 80px;
+  bottom: calc(28px + var(--bottom-inset));
   right: unset;
 }
 

android/app/src/main/assets/js/textRemover.js

@@ -0,0 +1,195 @@
+// Text selection functionality
+window.textRemover = new (function () {
+  let selectionUI = null;
+  let isUIActive = false;
+
+  function createSelectionUI() {
+    if (selectionUI) return selectionUI;
+
+    const { div, button } = van.tags;
+    selectionUI = div(
+      {
+        id: 'text-selection-ui',
+        style:
+          'position: fixed; background: color-mix(in srgb, var(--theme-surface), transparent 10%); border-radius: 8px; padding: 8px; z-index: 100000; opacity: 0; box-shadow: 0 4px 12px rgba(0,0,0,0.25); transition: opacity 150ms',
+      },
+      button(
+        {
+          style:
+            'background: var(--theme-secondary); color: var(--theme-onSecondary); padding: 6px 12px; margin: 2px; border-radius: 4px; font-size: 12px;',
+          onclick: e => {
+            if (reader.hidden.val) {
+              e.stopPropagation();
+            }
+            removeSelectedText();
+          },
+        },
+        'Remove',
+      ),
+      button(
+        {
+          style:
+            'background: var(--theme-primary); color: var(--theme-onPrimary); padding: 6px 12px; margin: 2px; border-radius: 4px; font-size: 12px;',
+          onclick: e => {
+            if (reader.hidden.val) {
+              e.stopPropagation();
+            }
+            replaceSelectedText();
+          },
+        },
+        'Replace',
+      ),
+    );
+
+    document.body.appendChild(selectionUI);
+    return selectionUI;
+  }
+
+  function showSelectionUI() {
+    const ui = createSelectionUI();
+
+    // Get selection bounds
+    const selection = window.getSelection();
+    if (selection.rangeCount > 0) {
+      const range = selection.getRangeAt(0);
+      const rect = range.getBoundingClientRect();
+
+      // Get UI element heights from CSS variables (with fallbacks)
+      const statusBarHeight =
+        parseInt(
+          getComputedStyle(document.documentElement).getPropertyValue(
+            '--StatusBar-currentHeight',
+          ),
+          10,
+        ) || 24;
+      const navigationBarHeight =
+        parseInt(
+          getComputedStyle(document.documentElement).getPropertyValue(
+            '--bottom-inset',
+          ),
+          10,
+        ) || 24;
+      const readerPadding =
+        parseInt(
+          getComputedStyle(document.documentElement).getPropertyValue(
+            '--readerSettings-padding',
+          ),
+          10,
+        ) || 16;
+      const uiHeight = 50; // Approximate height of our UI
+
+      // Calculate available space
+      const viewportHeight = window.innerHeight;
+      const selectionCenterY = rect.top + rect.height / 2;
+      const topSafeArea = statusBarHeight + readerPadding + 10;
+      const bottomSafeArea = readerPadding + uiHeight + navigationBarHeight;
+
+      // Position UI based on selection location
+      let topPosition;
+      if (selectionCenterY < viewportHeight / 2) {
+        // Selection is in top half, position UI at bottom
+        //TODO: make this dynamic
+        const avoidScrollbar = reader.generalSettings.val.verticalSeekbar
+          ? 0
+          : 42;
+        const avoidUI = !reader.hidden.val ? 46 + avoidScrollbar : 0;
+        topPosition = viewportHeight - bottomSafeArea - avoidUI - 4;
+        ui.style.top = topPosition + 'px';
+        ui.style.bottom = 'auto';
+      } else {
+        // Selection is in bottom half, position UI at top (accounting for status bar)
+        topPosition = Math.max(topSafeArea, statusBarHeight + 20);
+        const avoidUI = !reader.hidden.val ? 34 : 0;
+        ui.style.top = topPosition + avoidUI + 'px';
+        ui.style.bottom = 'auto';
+      }
+
+      // Center horizontally
+      ui.style.left = '50%';
+      ui.style.transform = 'translateX(-50%)';
+    } else {
+      // Fallback: position at top if no selection rect available
+      ui.style.top = '20px';
+      ui.style.left = '50%';
+      ui.style.transform = 'translateX(-50%)';
+      ui.style.bottom = 'auto';
+    }
+
+    ui.style.opacity = '1';
+    isUIActive = true;
+  }
+
+  function hideSelectionUI() {
+    if (selectionUI) {
+      selectionUI.style.opacity = '0';
+    }
+    isUIActive = false;
+  }
+
+  function getSelectedText() {
+    const selection = window.getSelection();
+    if (selection.rangeCount > 0) {
+      return selection.toString().trim();
+    }
+    return '';
+  }
+
+  function removeSelectedText() {
+    const selectedText = getSelectedText();
+    if (selectedText) {
+      reader.post({
+        type: 'text-action',
+        data: { remove: selectedText },
+      });
+    }
+    hideSelectionUI();
+    window.getSelection().removeAllRanges();
+  }
+
+  function replaceSelectedText() {
+    const selectedText = getSelectedText();
+    if (selectedText) {
+      // For replace, we need user input, so send a different message
+      reader.post({
+        type: 'text-action',
+        data: { replace: selectedText },
+      });
+    }
+    hideSelectionUI();
+    window.getSelection().removeAllRanges();
+  }
+
+  // Handle text selection
+  document.addEventListener('selectionchange', function () {
+    const selectedText = getSelectedText();
+    if (selectedText) {
+      showSelectionUI();
+    } else if (!isUIActive) {
+      hideSelectionUI();
+    }
+  });
+
+  // Hide UI when clicking/tapping elsewhere
+  document.addEventListener('touchstart', function (e) {
+    if (isUIActive && selectionUI && !selectionUI.contains(e.target)) {
+      const selectedText = getSelectedText();
+      if (!selectedText) {
+        hideSelectionUI();
+      }
+    }
+  });
+
+  document.addEventListener('click', function (e) {
+    if (isUIActive && selectionUI && !selectionUI.contains(e.target)) {
+      const selectedText = getSelectedText();
+      if (!selectedText) {
+        hideSelectionUI();
+      }
+    }
+  });
+
+  // Hide UI on scroll
+  window.addEventListener('scroll', function () {
+    hideSelectionUI();
+  });
+})();

package.json

@@ -102,6 +102,7 @@
     "react-native-error-boundary": "^3.1.0",
     "react-native-file-access": "^4.0.2",
     "react-native-gesture-handler": "^2.30.1",
+    "react-native-keyboard-controller": "^1.20.7",
     "react-native-lottie-splash-screen": "^1.1.2",
     "react-native-mmkv": "^4.3.0",
     "react-native-nitro-modules": "^0.35.2",
@@ -142,6 +143,7 @@
     "@types/jest": "^29.5.14",
     "@types/lodash-es": "^4.17.12",
     "@types/react": "~19.2.14",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@types/sanitize-html": "^2.16.1",
     "@typescript-eslint/eslint-plugin": "^8.58.0",
     "@typescript-eslint/parser": "^8.58.0",
@@ -163,6 +165,7 @@
     "jest-expo": "^55.0.11",
     "lint-staged": "^12.5.0",
     "prettier": "2.8.8",
+    "react-syntax-highlighter": "^16.1.1",
     "react-test-renderer": "19.2.4",
     "rock": "^0.12.12",
     "typescript": "~5.9.3"