fix(mobile): implement native scrolling for note editor

Author: typelets

apps/mobile/v1/editor/src/components/Editor.tsx

@@ -25,6 +25,7 @@ export interface EditorProps {
   editable?: boolean;
   theme?: 'light' | 'dark';
   colors?: EditorColors;
+  scrollEnabled?: boolean;
 }
 
 export interface EditorRef {
@@ -82,6 +83,8 @@ const createEditorHTML = (content: string, placeholder: string, isDark: boolean,
 
     html {
       background: ${editorColors.background};
+      -webkit-overflow-scrolling: touch;
+      overflow-y: auto;
     }
 
     body {
@@ -91,10 +94,9 @@ const createEditorHTML = (content: string, placeholder: string, isDark: boolean,
       color: ${editorColors.foreground};
       font-size: 16px;
       line-height: 1.6;
-      min-height: 100vh;
+      -webkit-overflow-scrolling: touch;
     }
     #editor {
-      min-height: 100vh;
       padding-bottom: 40px;
       outline: none;
     }
@@ -293,13 +295,20 @@ const createEditorHTML = (content: string, placeholder: string, isDark: boolean,
     editor.innerHTML = ${JSON.stringify(content || '<p></p>')};
     isInitialized = true;
 
+    // Send height to React Native
+    function sendHeight() {
+      const height = document.documentElement.scrollHeight;
+      window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'height', height }));
+    }
+
     // Send content changes to React Native (debounced)
     let timeout;
     function notifyChange() {
       clearTimeout(timeout);
       timeout = setTimeout(() => {
         const html = editor.innerHTML;
         window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'content', html }));
+        sendHeight();
       }, 300);
     }
 
@@ -308,6 +317,7 @@ const createEditorHTML = (content: string, placeholder: string, isDark: boolean,
       clearTimeout(timeout);
       const html = editor.innerHTML;
       window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'content', html }));
+      sendHeight();
     });
 
     // Track selection changes to detect active formats
@@ -1857,21 +1867,28 @@ const createEditorHTML = (content: string, placeholder: string, isDark: boolean,
     };
 
     // Auto-focus on load
-    setTimeout(() => editor.focus(), 100);
+    setTimeout(() => {
+      editor.focus();
+      sendHeight();
+    }, 100);
+
+    // Send height on window resize
+    window.addEventListener('resize', sendHeight);
   </script>
 </body>
 </html>
 `;
 };
 
 export const Editor = forwardRef<EditorRef, EditorProps>(
-  ({ value, onChange, onFormatChange, placeholder = 'Start typing...', editable = true, theme = 'light', colors }, ref) => {
+  ({ value, onChange, onFormatChange, placeholder = 'Start typing...', editable = true, theme = 'light', colors, scrollEnabled = true }, ref) => {
     const webViewRef = useRef<WebView>(null);
     const isDark = theme === 'dark';
     const [initialContent] = useState(value); // Capture initial content only once
     const lastValueRef = useRef(value); // Track last value to detect external changes
     const lastThemeRef = useRef(isDark); // Track theme changes
     const [themeKey, setThemeKey] = useState(isDark ? 'dark' : 'light');
+    const [webViewHeight, setWebViewHeight] = useState(300);
 
     const execCommand = (command: string, value?: string | number) => {
       webViewRef.current?.injectJavaScript(
@@ -1921,6 +1938,8 @@ export const Editor = forwardRef<EditorRef, EditorProps>(
           onChange(data.html);
         } else if (data.type === 'formats' && onFormatChange) {
           onFormatChange(data.formats);
+        } else if (data.type === 'height') {
+          setWebViewHeight(data.height);
         }
       } catch (error) {
         console.error('Error parsing WebView message:', error);
@@ -1968,8 +1987,14 @@ export const Editor = forwardRef<EditorRef, EditorProps>(
           allowFileAccessFromFileURLs={true}
           allowUniversalAccessFromFileURLs={true}
           mixedContentMode="always"
-          style={[styles.webview, { backgroundColor: colors?.background || (isDark ? '#1a1a1a' : '#fff') }]}
-          scrollEnabled={true}
+          style={[
+            styles.webview,
+            {
+              backgroundColor: colors?.background || (isDark ? '#1a1a1a' : '#fff'),
+              height: scrollEnabled ? undefined : webViewHeight,
+            }
+          ]}
+          scrollEnabled={scrollEnabled}
           showsVerticalScrollIndicator={false}
           keyboardDisplayRequiresUserAction={false}
           hideKeyboardAccessoryView={true}

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

@@ -9,6 +9,7 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import { Editor, type EditorColors,type EditorRef } from '@/editor/src';
 
 import { FileUpload } from '../../components/FileUpload';
+import { useKeyboardHeight } from '../../hooks/useKeyboardHeight';
 import { logger } from '../../lib/logger';
 import { type FileAttachment,type Note, useApiService } from '../../services/api';
 import { useTheme } from '../../theme';
@@ -32,7 +33,7 @@ export default function EditNoteScreen() {
   const [attachments, setAttachments] = useState<FileAttachment[]>([]);
   const [showAttachments, setShowAttachments] = useState(false);
   const [createdNoteId, setCreatedNoteId] = useState<string | null>(null);
-  const [showHeader, setShowHeader] = useState(false);
+  const [showHeader, setShowHeader] = useState(!isEditing);
   const [showToolbar, setShowToolbar] = useState(true);
   const [activeFormats, setActiveFormats] = useState({
     bold: false,
@@ -48,6 +49,7 @@ export default function EditNoteScreen() {
   });
 
   const editorRef = useRef<EditorRef>(null);
+  const keyboardHeight = useKeyboardHeight();
 
   // Map theme colors to editor colors
   const editorColors: EditorColors = useMemo(() => ({
@@ -576,22 +578,31 @@ export default function EditNoteScreen() {
 
       <View style={[styles.divider, { backgroundColor: theme.colors.border }]} />
 
-      <View style={[
-        styles.richEditor,
-        {
-          backgroundColor: theme.colors.background,
-        }
-      ]}>
-        <Editor
-          ref={editorRef}
-          value={content}
-          onChange={setContent}
-          onFormatChange={setActiveFormats}
-          placeholder="Write your note..."
-          theme={theme.isDark ? 'dark' : 'light'}
-          colors={editorColors}
-        />
-      </View>
+      <ScrollView
+        style={{ flex: 1 }}
+        contentContainerStyle={{ paddingBottom: keyboardHeight > 0 ? keyboardHeight : 0 }}
+        showsVerticalScrollIndicator={false}
+        keyboardShouldPersistTaps="handled"
+        bounces={true}
+      >
+        <View style={[
+          styles.richEditor,
+          {
+            backgroundColor: theme.colors.background,
+          }
+        ]}>
+          <Editor
+            ref={editorRef}
+            value={content}
+            onChange={setContent}
+            onFormatChange={setActiveFormats}
+            placeholder="Write your note..."
+            theme={theme.isDark ? 'dark' : 'light'}
+            colors={editorColors}
+            scrollEnabled={false}
+          />
+        </View>
+      </ScrollView>
     </SafeAreaView>
   );
 }
@@ -627,7 +638,6 @@ const styles = StyleSheet.create({
     marginHorizontal: 0,
   },
   richEditor: {
-    flex: 1,
   },
   toolbarContainer: {
     position: 'absolute',