mobile: improvements to editor ux

1. Tapping on empty in editor opens the keyboard
2. Swiping to open the editor when editor is empty opens the keyboard automatically

apps/mobile/app/components/fluid-panels/index.tsx

@@ -30,6 +30,7 @@ import { BackHandler, Platform, ViewProps } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import Animated, {
   runOnJS,
+  SharedValue,
   useAnimatedReaction,
   useAnimatedStyle,
   useSharedValue,
@@ -67,6 +68,7 @@ export interface TabsRef {
   setScrollEnabled: () => true;
   isDrawerOpen: () => boolean;
   node: RefObject<Animated.View>;
+  tabChangedFromSwipeAction: SharedValue<boolean>;
 }
 
 export const FluidPanels = forwardRef<TabsRef, TabProps>(function FluidTabs(
@@ -116,6 +118,7 @@ export const FluidPanels = forwardRef<TabsRef, TabProps>(function FluidTabs(
   const isLoaded = useRef(false);
   const prevWidths = useRef(widths);
   const isIPhone = Platform.OS === "ios";
+  const tabChangedFromSwipeAction = useSharedValue(false);
 
   useEffect(() => {
     if (deviceMode === "tablet" || fullscreen) {
@@ -191,6 +194,7 @@ export const FluidPanels = forwardRef<TabsRef, TabProps>(function FluidTabs(
             : withTiming(editorPosition);
           currentTab.value = 2;
         }
+        tabChangedFromSwipeAction.value = false;
       },
       goToIndex: (index: number, animated = true) => {
         if (deviceMode === "tablet") {
@@ -210,6 +214,7 @@ export const FluidPanels = forwardRef<TabsRef, TabProps>(function FluidTabs(
             : editorPosition;
           currentTab.value = 2;
         }
+        tabChangedFromSwipeAction.value = false;
       },
       unlock: () => {
         forcedLock.value = false;
@@ -252,7 +257,8 @@ export const FluidPanels = forwardRef<TabsRef, TabProps>(function FluidTabs(
       },
       page: () => (currentTab.value === 1 ? "home" : "editor"),
       setScrollEnabled: () => true,
-      node: node
+      node: node,
+      tabChangedFromSwipeAction: tabChangedFromSwipeAction
     }),
     [
       currentTab,
@@ -262,7 +268,8 @@ export const FluidPanels = forwardRef<TabsRef, TabProps>(function FluidTabs(
       homePosition,
       editorPosition,
       forcedLock,
-      isDrawerOpen
+      isDrawerOpen,
+      tabChangedFromSwipeAction
     ]
   );
 
@@ -362,18 +369,20 @@ export const FluidPanels = forwardRef<TabsRef, TabProps>(function FluidTabs(
           isDrawerOpen.value = true;
           currentTab.value = 1;
           runOnJS(onDrawerStateChange)(true);
+          tabChangedFromSwipeAction.value = true;
           return;
         } else if (!isSwipeLeft && finalValue > 100) {
           translateX.value = withSpring(homePosition, animationConfig);
           isDrawerOpen.value = false;
           currentTab.value = 1;
           runOnJS(onDrawerStateChange)(false);
-
+          tabChangedFromSwipeAction.value = true;
           return;
         } else if (!isSwipeLeft && finalValue < 100) {
           translateX.value = withSpring(0, animationConfig);
           isDrawerOpen.value = true;
           currentTab.value = 1;
+          tabChangedFromSwipeAction.value = true;
           return;
         }
       }
@@ -384,6 +393,8 @@ export const FluidPanels = forwardRef<TabsRef, TabProps>(function FluidTabs(
           translateX.value = withSpring(editorPosition, animationConfig);
           currentTab.value = 2;
           isDrawerOpen.value = false;
+
+          tabChangedFromSwipeAction.value = true;
           return;
         }
       }
@@ -398,6 +409,8 @@ export const FluidPanels = forwardRef<TabsRef, TabProps>(function FluidTabs(
           translateX.value = withSpring(editorPosition, animationConfig);
           currentTab.value = 2;
         }
+
+        tabChangedFromSwipeAction.value = true;
         return;
       }
 

apps/mobile/app/navigation/fluid-panels-view.tsx

@@ -30,6 +30,10 @@ import React, {
   useState
 } from "react";
 import { Dimensions, LayoutChangeEvent, Platform, View } from "react-native";
+import Orientation, {
+  OrientationType,
+  useDeviceOrientationChange
+} from "react-native-orientation-locker";
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
@@ -67,10 +71,6 @@ import {
 } from "../utils/events";
 import { editorRef, fluidTabsRef } from "../utils/global-refs";
 import { AppNavigationStack } from "./navigation-stack";
-import Orientation, {
-  OrientationType,
-  useDeviceOrientationChange
-} from "react-native-orientation-locker";
 
 const MOBILE_SIDEBAR_SIZE = 0.85;
 
@@ -535,6 +535,15 @@ const onChangeTab = async (event: { i: number; from: number }) => {
     ) {
       eSendEvent(eUnlockNote);
     }
+
+    if (
+      fluidTabsRef.current?.tabChangedFromSwipeAction.value &&
+      !useTabStore.getState().getNoteIdForTab(useTabStore.getState().currentTab)
+    ) {
+      editorController?.current?.commands?.focus(
+        useTabStore.getState().currentTab
+      );
+    }
   } else {
     if (event.from === 2) {
       deactivateKeepAwake();

packages/editor-mobile/src/components/editor.tsx

@@ -547,7 +547,8 @@ const Tiptap = ({
           style={{
             overflowY: controller.loading ? "hidden" : "scroll",
             height: "100%",
-            display: "block",
+            display: "flex",
+            flexDirection: "column",
             position: "relative"
           }}
         >
@@ -865,9 +866,9 @@ const Tiptap = ({
               }
             }}
             style={{
-              flexGrow: 1,
               width: "100%",
-              minHeight: 300
+              display: "flex",
+              flex: 1
             }}
           />
         </div>