fix(mobile): improve note editor UX and theme consistency

typelets · typelets · commit 458fd0c6ad7a · 2025-10-13T10:43:58.000-04:00
- Fix note editor starting position by adding key prop to force remount per note
- Add CSS scroll-restoration and overflow-anchor controls to prevent auto-scrolling
- Implement smooth fade-in transition to hide scroll positioning on load
- Hide placeholder text to prevent flashing during scroll
- Extend view note divider to full width for visual consistency with edit mode
- Make attachment badge text color theme-aware for proper contrast in light/dark themes
diff --git a/apps/mobile/v1/app.json b/apps/mobile/v1/app.json
@@ -34,7 +34,8 @@
       "infoPlist": {
         "NSCameraUsageDescription": "This app uses the camera to capture photos for your notes.",
         "NSPhotoLibraryUsageDescription": "This app accesses your photo library to attach images to your notes.",
-        "NSMicrophoneUsageDescription": "This app uses the microphone to record audio notes."
+        "NSMicrophoneUsageDescription": "This app uses the microphone to record audio notes.",
+        "ITSAppUsesNonExemptEncryption": false
       }
     },
     "android": {
diff --git a/apps/mobile/v1/src/hooks/useNoteEditor.ts b/apps/mobile/v1/src/hooks/useNoteEditor.ts
@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useRef } from 'react';
+import { useCallback, useMemo, useRef, useEffect } from 'react';
 import { Alert } from 'react-native';
 import { useEditorBridge, TenTapStartKit, type EditorBridge } from '@10play/tentap-editor';
 import { useRouter } from 'expo-router';
@@ -29,8 +29,8 @@ export function useNoteEditor(noteId?: string): UseNoteEditorReturn {
 
   const editor = useEditorBridge({
     autofocus: false,
-    avoidIosKeyboard: true,
-    initialContent: '<p></p>',
+    avoidIosKeyboard: false,
+    initialContent: '',
     bridgeExtensions: TenTapStartKit,
   });
 
@@ -39,6 +39,13 @@ export function useNoteEditor(noteId?: string): UseNoteEditorReturn {
     [theme.colors]
   );
 
+  // Reset refs when noteId changes
+  useEffect(() => {
+    editorReadyRef.current = false;
+    pendingContentRef.current = null;
+    contentSetRef.current = false;
+  }, [noteId]);
+
   const handleEditorLoad = useCallback(() => {
     editor.injectCSS(customCSS, 'theme-css');
 
@@ -59,6 +66,35 @@ export function useNoteEditor(noteId?: string): UseNoteEditorReturn {
           if (!contentSetRef.current) {
             editor.setContent(pendingContentRef.current!);
             contentSetRef.current = true;
+
+            // Position content at top before showing
+            setTimeout(() => {
+              editor.webviewRef?.current?.injectJavaScript(`
+                function scrollToTop() {
+                  window.scrollTo(0, 0);
+                  document.documentElement.scrollTop = 0;
+                  document.body.scrollTop = 0;
+
+                  const prosemirror = document.querySelector('.ProseMirror');
+                  if (prosemirror) {
+                    prosemirror.scrollTop = 0;
+                  }
+                }
+
+                // Scroll immediately
+                scrollToTop();
+
+                // Show content after positioning with smooth fade
+                requestAnimationFrame(() => {
+                  scrollToTop();
+                  requestAnimationFrame(() => {
+                    document.body.classList.add('ready');
+                  });
+                });
+                true;
+              `);
+            }, 50);
+
             if (__DEV__) {
               console.log('[iOS Fix] Content set successfully');
             }
@@ -89,6 +125,35 @@ export function useNoteEditor(noteId?: string): UseNoteEditorReturn {
             }
             editor.setContent(content);
             contentSetRef.current = true;
+
+            // Position content at top before showing
+            setTimeout(() => {
+              editor.webviewRef?.current?.injectJavaScript(`
+                function scrollToTop() {
+                  window.scrollTo(0, 0);
+                  document.documentElement.scrollTop = 0;
+                  document.body.scrollTop = 0;
+
+                  const prosemirror = document.querySelector('.ProseMirror');
+                  if (prosemirror) {
+                    prosemirror.scrollTop = 0;
+                  }
+                }
+
+                // Scroll immediately
+                scrollToTop();
+
+                // Show content after positioning with smooth fade
+                requestAnimationFrame(() => {
+                  scrollToTop();
+                  requestAnimationFrame(() => {
+                    document.body.classList.add('ready');
+                  });
+                });
+                true;
+              `);
+            }, 50);
+
             if (__DEV__) {
               console.log('[iOS Fix] Content set successfully from loadNote');
             }
diff --git a/apps/mobile/v1/src/screens/EditNote/EditorHeader.tsx b/apps/mobile/v1/src/screens/EditNote/EditorHeader.tsx
@@ -63,7 +63,7 @@ export function EditorHeader({
               </View>
               {attachmentsCount > 0 && (
                 <View style={[styles.attachmentBadge, { backgroundColor: showAttachments ? "#3b82f6" : theme.colors.mutedForeground }]}>
-                  <Text style={styles.attachmentBadgeText}>
+                  <Text style={[styles.attachmentBadgeText, { color: showAttachments ? '#ffffff' : theme.colors.muted }]}>
                     {attachmentsCount > 9 ? '9+' : attachmentsCount}
                   </Text>
                 </View>
@@ -149,7 +149,6 @@ const styles = StyleSheet.create({
     paddingHorizontal: 4,
   },
   attachmentBadgeText: {
-    color: '#ffffff',
     fontSize: 10,
     fontWeight: '600',
   },
diff --git a/apps/mobile/v1/src/screens/EditNote/index.tsx b/apps/mobile/v1/src/screens/EditNote/index.tsx
@@ -223,13 +223,13 @@ export default function EditNoteScreen() {
         Platform.OS === 'android' && keyboardHeight > 0 && { marginBottom: keyboardHeight + 60 }
       ]}>
         <RichText
+          key={noteId as string || 'new-note'}
           editor={editor}
           style={{ flex: 1, backgroundColor: theme.colors.background }}
           onLoad={handleEditorLoad}
           webViewProps={{
             bounces: false,
             overScrollMode: 'never',
-            contentInset: Platform.OS === 'ios' ? { bottom: toolbarHeight } : undefined,
             injectedJavaScript: Platform.OS === 'android' ? `
               (function() {
                 function scrollToCursor() {
diff --git a/apps/mobile/v1/src/screens/EditNote/styles.ts b/apps/mobile/v1/src/screens/EditNote/styles.ts
@@ -14,6 +14,9 @@ export function generateEditorStyles(themeColors: {
       overflow-x: hidden !important;
       width: 100vw !important;
       background-color: ${themeColors.background} !important;
+      scroll-padding-top: 0 !important;
+      overflow-anchor: none !important;
+      scroll-restoration: manual !important;
     }
     *:not(input[type="checkbox"]):not(input[type="checkbox"]::after) {
       color: ${themeColors.foreground} !important;
@@ -32,22 +35,34 @@ export function generateEditorStyles(themeColors: {
       overscroll-behavior: contain !important;
       width: 100vw !important;
       max-width: 100vw !important;
+      scroll-behavior: auto !important;
+      overflow-anchor: none !important;
+      opacity: 0 !important;
+      transition: opacity 0.15s ease-in !important;
+    }
+    body.ready {
+      opacity: 1 !important;
     }
     .ProseMirror {
       outline: none;
       overflow-x: hidden !important;
+      overflow-anchor: none !important;
       width: calc(100vw - 24px) !important; /* 16px left + 8px right padding */
       max-width: calc(100vw - 24px) !important;
       line-height: 1.5 !important;
       padding: 0 !important;
       padding-right: 16px !important; /* Extra padding to keep text away from scrollbar */
-      padding-bottom: 200px !important; /* Extra space at the end for comfortable editing */
       margin: 0 !important;
     }
-    @media (min-width: 600px) {
-      .ProseMirror {
-        padding-bottom: 250px !important;
-      }
+    /* Hide placeholder text */
+    .ProseMirror p.is-editor-empty:first-child::before,
+    .ProseMirror p.is-empty:first-child::before {
+      display: none !important;
+    }
+    .ProseMirror::after {
+      content: '';
+      display: block;
+      height: 80px;
     }
     .ProseMirror > *:not(ul[data-type="taskList"]):not(ul[data-type="taskList"] *) {
       max-width: 100% !important;
@@ -63,7 +78,7 @@ export function generateEditorStyles(themeColors: {
       color: ${themeColors.foreground} !important;
     }
     .ProseMirror > p:first-child {
-      margin-top: 12px !important;
+      margin-top: 8px !important;
     }
     li[data-type="taskItem"] > div > p:first-child {
       margin-top: 0 !important;
@@ -74,7 +89,7 @@ export function generateEditorStyles(themeColors: {
       color: ${themeColors.foreground} !important;
     }
     h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
-      margin-top: 12px;
+      margin-top: 8px;
     }
     h1 { font-size: 2em; }
     h2 { font-size: 1.5em; }
diff --git a/apps/mobile/v1/src/screens/ViewNote/ViewHeader.tsx b/apps/mobile/v1/src/screens/ViewNote/ViewHeader.tsx
@@ -90,7 +90,7 @@ export function ViewHeader({
                 </View>
                 {attachmentsCount > 0 && (
                   <View style={[styles.attachmentBadge, { backgroundColor: showAttachments ? "#3b82f6" : theme.colors.mutedForeground }]}>
-                    <Text style={styles.attachmentBadgeText}>
+                    <Text style={[styles.attachmentBadgeText, { color: showAttachments ? '#ffffff' : theme.colors.card }]}>
                       {attachmentsCount > 9 ? '9+' : attachmentsCount}
                     </Text>
                   </View>
@@ -200,7 +200,6 @@ const styles = StyleSheet.create({
     paddingHorizontal: 4,
   },
   attachmentBadgeText: {
-    color: '#ffffff',
     fontSize: 10,
     fontWeight: '600',
   },
diff --git a/apps/mobile/v1/src/screens/ViewNote/index.tsx b/apps/mobile/v1/src/screens/ViewNote/index.tsx
@@ -252,7 +252,7 @@ const styles = StyleSheet.create({
   },
   divider: {
     height: StyleSheet.hairlineWidth,
-    marginHorizontal: 16,
+    marginHorizontal: 0,
   },
   attachmentsContainer: {
     borderBottomWidth: StyleSheet.hairlineWidth,
