mobile: minor cleanup

apps/mobile/app/components/tabs/index.tsx

@@ -45,7 +45,7 @@ import { useSideBarDraggingStore } from "../side-menu/dragging-store";
 
 interface TabProps extends ViewProps {
   dimensions: { width: number; height: number };
-  widths: { a: number; b: number; c: number };
+  widths: { sidebar: number; list: number; editor: number };
   onChangeTab: (data: { i: number; from: number }) => void;
   onScroll: (offset: number) => void;
   enabled: boolean;
@@ -86,8 +86,8 @@ export const FluidTabs = forwardRef<TabsRef, TabProps>(function FluidTabs(
   const translateX = useSharedValue(
     widths
       ? appState && !appState?.movedAway
-        ? widths.a + widths.b
-        : widths.a
+        ? widths.sidebar + widths.list
+        : widths.sidebar
       : 0
   );
   const startX = useSharedValue(0);
@@ -103,12 +103,12 @@ export const FluidTabs = forwardRef<TabsRef, TabProps>(function FluidTabs(
   const [disabled, setDisabled] = useState(false);
   const node = useRef<Animated.View>(null);
   const containerWidth = widths
-    ? widths.a + widths.b + widths.c
+    ? widths.sidebar + widths.list + widths.editor
     : dimensions.width;
 
   const drawerPosition = 0;
-  const homePosition = widths.a;
-  const editorPosition = widths.a + widths.b;
+  const homePosition = widths.sidebar;
+  const editorPosition = widths.sidebar + widths.list;
   const isSmallTab = deviceMode === "smallTablet";
   const isLoaded = useRef(false);
   const prevWidths = useRef(widths);
@@ -119,9 +119,9 @@ export const FluidTabs = forwardRef<TabsRef, TabProps>(function FluidTabs(
       if (deviceMode === "tablet" || fullscreen) {
         translateX.value = 0;
       } else {
-        if (prevWidths.current?.a !== widths.a) {
+        if (prevWidths.current?.sidebar !== widths.sidebar) {
           translateX.value =
-            !appState || appState?.movedAway ? widths.a : editorPosition;
+            !appState || appState?.movedAway ? widths.sidebar : editorPosition;
         }
       }
       isLoaded.current = true;

apps/mobile/app/navigation/tabs-holder.js

@@ -23,7 +23,7 @@ import {
   deactivateKeepAwake
 } from "@sayem314/react-native-keep-awake";
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import { Dimensions, Keyboard, Platform, StatusBar, View } from "react-native";
+import { Dimensions, Platform, StatusBar, View } from "react-native";
 import changeNavigationBarColor from "react-native-navigation-bar-color";
 import {
   addOrientationListener,
@@ -64,12 +64,11 @@ import { useSettingStore } from "../stores/use-setting-store";
 import {
   eClearEditor,
   eCloseFullscreenEditor,
-  eOnChangeFluidTab,
   eOnLoadNote,
   eOpenFullscreenEditor,
   eUnlockNote
 } from "../utils/events";
-import { editorRef, inputRef, tabBarRef } from "../utils/global-refs";
+import { editorRef, tabBarRef } from "../utils/global-refs";
 import { sleep } from "../utils/time";
 import { NavigationStack } from "./navigation-stack";
 
@@ -300,7 +299,7 @@ const _TabsHolder = () => {
 
   const onScroll = (scrollOffset) => {
     hideAllTooltips();
-    if (scrollOffset > offsets[deviceMode].a - 10) {
+    if (scrollOffset > offsets[deviceMode].sidebar - 10) {
       animatedOpacity.value = 0;
       toggleView(false);
     } else {
@@ -337,43 +336,43 @@ const _TabsHolder = () => {
 
   const offsets = {
     mobile: {
-      a: dimensions.width * 0.75,
-      b: dimensions.width + dimensions.width * 0.75,
-      c: dimensions.width * 2 + dimensions.width * 0.75
+      sidebar: dimensions.width * 0.75,
+      list: dimensions.width + dimensions.width * 0.75,
+      editor: dimensions.width * 2 + dimensions.width * 0.75
     },
     smallTablet: {
-      a: fullscreen ? 0 : valueLimiter(dimensions.width * 0.3, 300, 350),
-      b: fullscreen
+      sidebar: fullscreen ? 0 : valueLimiter(dimensions.width * 0.3, 300, 350),
+      list: fullscreen
         ? 0
         : dimensions.width + valueLimiter(dimensions.width * 0.3, 300, 350),
-      c: fullscreen
+      editor: fullscreen
         ? 0
         : dimensions.width + valueLimiter(dimensions.width * 0.3, 300, 350)
     },
     tablet: {
-      a: 0,
-      b: 0,
-      c: 0
+      sidebar: 0,
+      list: 0,
+      editor: 0
     }
   };
   const widths = {
     mobile: {
-      a: dimensions.width * 0.75,
-      b: dimensions.width,
-      c: dimensions.width
+      sidebar: dimensions.width * 0.75,
+      list: dimensions.width,
+      editor: dimensions.width
     },
     smallTablet: {
-      a: valueLimiter(dimensions.width * 0.3, 300, 350),
-      b: valueLimiter(dimensions.width * 0.4, 300, 450),
-      c: dimensions.width - valueLimiter(dimensions.width * 0.4, 300, 450)
+      sidebar: valueLimiter(dimensions.width * 0.3, 300, 350),
+      list: valueLimiter(dimensions.width * 0.4, 300, 450),
+      editor: dimensions.width - valueLimiter(dimensions.width * 0.4, 300, 450)
     },
     tablet: {
-      a:
+      sidebar:
         dimensions.width > 1100
           ? dimensions.width * 0.15
           : dimensions.width * 0.2,
-      b: dimensions.width * 0.3,
-      c:
+      list: dimensions.width * 0.3,
+      editor:
         dimensions.width > 1100
           ? dimensions.width * 0.55
           : dimensions.width * 0.5
@@ -449,7 +448,7 @@ const _TabsHolder = () => {
                 key="1"
                 style={{
                   height: "100%",
-                  width: fullscreen ? 0 : widths[deviceMode]?.a
+                  width: fullscreen ? 0 : widths[deviceMode]?.sidebar
                 }}
               >
                 <ScopedThemeProvider value="navigationMenu">
@@ -461,7 +460,7 @@ const _TabsHolder = () => {
                 key="2"
                 style={{
                   height: "100%",
-                  width: fullscreen ? 0 : widths[deviceMode]?.b
+                  width: fullscreen ? 0 : widths[deviceMode]?.list
                 }}
               >
                 <ScopedThemeProvider value="list">

apps/mobile/app/screens/editor/index.tsx

@@ -28,7 +28,7 @@ import React, {
   useLayoutEffect,
   useRef
 } from "react";
-import { Platform, TextInput, ViewStyle } from "react-native";
+import { Platform, ViewStyle } from "react-native";
 import WebView from "react-native-webview";
 import { ShouldStartLoadRequest } from "react-native-webview/lib/WebViewTypes";
 import { notesnook } from "../../../e2e/test.ids";

apps/mobile/app/screens/editor/loading.tsx

@@ -17,6 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { useThemeColors } from "@notesnook/theme";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { View } from "react-native";
 import Animated, {
@@ -34,11 +35,18 @@ import {
   eUnSubscribeEvent
 } from "../../services/event-manager";
 import { useSettingStore } from "../../stores/use-setting-store";
-import { useThemeColors } from "@notesnook/theme";
 import { eClearEditor } from "../../utils/events";
 import { SIZE } from "../../utils/size";
+import { useEditor } from "./tiptap/use-editor";
 import { editorState } from "./tiptap/utils";
-const EditorOverlay = ({ editorId = "", editor }) => {
+
+const EditorOverlay = ({
+  editorId = "",
+  editor
+}: {
+  editorId: string;
+  editor: ReturnType<typeof useEditor>;
+}) => {
   const { colors } = useThemeColors();
   const [error, setError] = useState(false);
   const opacity = useSharedValue(1);
@@ -47,11 +55,11 @@ const EditorOverlay = ({ editorId = "", editor }) => {
   const isTablet = deviceMode !== "mobile";
   const insets = useGlobalSafeAreaInsets();
   const isDefaultEditor = editorId === "";
-  const timers = useRef({
-    loading: 0,
-    error: 0,
-    closing: 0
-  });
+  const timers = useRef<{
+    loading?: NodeJS.Timeout;
+    error?: NodeJS.Timeout;
+    closing?: NodeJS.Timeout;
+  }>({});
   const loadingState = useRef({
     startTime: 0
   });
@@ -63,10 +71,10 @@ const EditorOverlay = ({ editorId = "", editor }) => {
   };
 
   const load = useCallback(
-    async (_loading) => {
+    async (isLoading: boolean) => {
       editorState().overlay = true;
       clearTimers();
-      if (_loading) {
+      if (isLoading) {
         loadingState.current.startTime = Date.now();
         opacity.value = 1;
         translateValue.value = 0;

apps/mobile/app/screens/editor/tiptap/types.ts

@@ -36,6 +36,7 @@ export type EditorState = {
   saveCount: 0;
   isAwaitingResult: boolean;
   scrollPosition: number;
+  overlay?: boolean;
 };
 
 export type Settings = {
@@ -58,10 +59,10 @@ export type Settings = {
 };
 
 export type EditorProps = {
-  readonly: boolean;
-  noToolbar: boolean;
-  noHeader: boolean;
-  withController: boolean;
+  readonly?: boolean;
+  noToolbar?: boolean;
+  noHeader?: boolean;
+  withController?: boolean;
   editorId?: string;
   onLoad?: () => void;
   onChange?: (html: string) => void;

apps/mobile/app/screens/editor/wrapper.tsx

@@ -21,6 +21,7 @@ import { useThemeColors } from "@notesnook/theme";
 import React, { useEffect, useRef } from "react";
 import {
   AppState,
+  AppStateStatus,
   KeyboardAvoidingView,
   Platform,
   TextInput,
@@ -35,8 +36,9 @@ import { DDS } from "../../services/device-detection";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { editorRef } from "../../utils/global-refs";
 import { editorController, textInput } from "./tiptap/utils";
+import deviceInfo from "react-native-device-info";
 
-export const EditorWrapper = ({ width }) => {
+export const EditorWrapper = ({ widths }: { widths: any }) => {
   const { colors } = useThemeColors();
   const { colors: toolBarColors } = useThemeColors("editorToolbar");
   const deviceMode = useSettingStore((state) => state.deviceMode);
@@ -47,9 +49,9 @@ export const EditorWrapper = ({ width }) => {
     (state) => state.settings.introCompleted
   );
   const keyboard = useKeyboard();
-  const prevState = useRef();
+  const prevState = useRef<AppStateStatus>();
 
-  const onAppStateChanged = async (state) => {
+  const onAppStateChanged = async (state: AppStateStatus) => {
     if (!prevState.current) {
       prevState.current = state;
       return;
@@ -65,7 +67,7 @@ export const EditorWrapper = ({ width }) => {
 
   useEffect(() => {
     if (loading) return;
-    let sub = AppState.addEventListener("change", onAppStateChanged);
+    const sub = AppState.addEventListener("change", onAppStateChanged);
     return () => {
       sub?.remove();
     };
@@ -75,7 +77,8 @@ export const EditorWrapper = ({ width }) => {
     const bottomInsets =
       Platform.OS === "android" ? 12 : insets.bottom + 16 || 14;
     if (!keyboard.keyboardShown) return bottomInsets / 1.5;
-    if (Platform.isPad && !floating) return bottomInsets;
+    if (deviceInfo.isTablet() && Platform.OS === "ios" && !floating)
+      return bottomInsets;
     if (Platform.OS === "ios") return bottomInsets / 1.5;
     return 0;
   };
@@ -88,7 +91,7 @@ export const EditorWrapper = ({ width }) => {
       testID="editor-wrapper"
       ref={editorRef}
       style={{
-        width: width[!introCompleted ? "mobile" : deviceMode]?.c,
+        width: widths[!introCompleted ? "mobile" : (deviceMode as any)]?.editor,
         height: "100%",
         minHeight: "100%",
         backgroundColor: toolBarColors.primary.background,