Keep text boxes usable while typing

app/note/[id].tsx

@@ -10,6 +10,8 @@
   Alert,
   BackHandler,
   Keyboard,
+  KeyboardAvoidingView,
+  Platform,
   StyleSheet,
   View,
   useWindowDimensions,
@@ -529,8 +531,19 @@
         ...state,
         textBoxes: [...state.textBoxes, box],
       }));
+      const needsTrailingBlankPage = pageIndex >= enginePages.length - 1;
+      const ensureTrailingBlankPage = needsTrailingBlankPage
+        ? canvasRef.current?.addPage({ force: true, scroll: false })
+        : Promise.resolve();
+      void ensureTrailingBlankPage?.finally(() => {
+        // Wait for the keyboard and its layout resize before positioning the
+        // active line. This preserves the user's current page position.
+        setTimeout(() => {
+          canvasRef.current?.revealPagePosition(pageIndex, box.y, true);
+        }, 250);
+      });
     },
-    [mutateOverlay],
+    [enginePages.length, mutateOverlay],
   );
 
   const handleUpdateTextBox = useCallback(
@@ -752,7 +765,10 @@
         onExport={() => void handleExport()}
       />
 
-      <View style={styles.canvasArea}>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+        style={styles.canvasArea}
+      >
         <InfiniteInkCanvas
           ref={canvasRef}
           style={styles.flex}
@@ -788,7 +804,7 @@
           onRemoveInsertedElement={handleRemoveInsertedElement}
           onCreateTextBoxId={textBoxId}
         />
-      </View>
+      </KeyboardAvoidingView>
 
       <FloatingToolbar
         activeTool={toolState.toolType as ToolDescriptor['type']}

src/components/editor/OverlayLayer.tsx

@@ -102,7 +102,9 @@ export function OverlayLayer({
         x: Math.max(0, coord.x - 6),
         y: Math.max(0, coord.y - 12),
         width: 240,
-        height: 36,
+        // Give a new note enough room for several lines before its internal
+        // editor needs to scroll.
+        height: 120,
         content: '',
         color: activeColor,
         fontSize: 18,

src/components/editor/TextBoxOverlay.tsx

@@ -358,7 +358,9 @@ export function TextBoxOverlay({
               value={localContent}
               onChangeText={handleContentChange}
               multiline
-              scrollEnabled={false}
+              // Keep the insertion point reachable when the text is longer
+              // than the box, particularly while the software keyboard is up.
+              scrollEnabled
               style={[
                 styles.input,
                 {