make sure editor is always loaded off-screen

apps/mobile/src/navigation/RootView.js

@@ -29,7 +29,7 @@ import {
 import { editorRef, tabBarRef } from '../utils/Refs';
 import { sleep } from '../utils/TimeUtils';
 import { EditorWrapper } from '../views/Editor/EditorWrapper';
-import { EditorWebView, getNote } from '../views/Editor/Functions';
+import { checkStatus, EditorWebView, getNote } from '../views/Editor/Functions';
 import tiny from '../views/Editor/tiny/tiny';
 import { NavigatorStack } from './NavigatorStack';
 let layoutTimer = null;
@@ -285,8 +285,8 @@ const NativeStack = React.memo(
     const widths = {
       mobile: {
         a: dimensions.width * 0.75,
-        b: dimensions.width,
-        c: dimensions.width
+        b: dimensions.width - 1,
+        c: dimensions.width + 1
       },
       smallTablet: {
         a: valueLimiter(dimensions.width * 0.3, 300, 350),
@@ -354,6 +354,11 @@ const NativeStack = React.memo(
             style={{
               zIndex: 1
             }}
+            onDrawerStateChange={state => {
+              if (state === false) {
+                checkStatus();
+              }
+            }}
             initialIndex={
               deviceMode === 'smallTablet' || deviceMode === 'tablet' ? 0 : 1
             }

apps/mobile/src/views/Editor/EditorWrapper.js

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import {
+  AppState,
   KeyboardAvoidingView,
   LayoutAnimation,
   Platform,
@@ -16,7 +17,7 @@ import {DDS} from '../../services/DeviceDetection';
 import {editorRef} from '../../utils/Refs';
 import useIsFloatingKeyboard from '../../utils/use-is-floating-keyboard';
 import EditorOverlay from './EditorOverlay';
-import {textInput} from './Functions';
+import {checkStatus, textInput} from './Functions';
 
 export const EditorWrapper = ({width, dimensions}) => {
   const [state] = useTracked();
@@ -26,6 +27,21 @@ export const EditorWrapper = ({width, dimensions}) => {
   const insets = useSafeAreaInsets();
   const floating = useIsFloatingKeyboard();
 
+  const onAppStateChanged = async state => {
+    if (state === 'active') {
+      console.log('ACTIVE STATE');
+      await checkStatus(false);
+    }
+  };
+
+  useEffect(() => {
+    if (loading) return;
+    AppState.addEventListener('change', onAppStateChanged);
+    return () => {
+      AppState.removeEventListener('change', onAppStateChanged);
+    };
+  }, [loading]);
+
   return (
     <View
       ref={editorRef}
@@ -33,7 +49,7 @@ export const EditorWrapper = ({width, dimensions}) => {
         width: width[deviceMode].c,
         height: '100%',
         backgroundColor: state.colors.bg,
-        borderLeftWidth: 1,
+        borderLeftWidth: DDS.isTab ? 1 : 0,
         borderLeftColor: DDS.isTab ? colors.nav : 'transparent'
         // paddingTop: Platform.OS === 'ios' ? insets.top : 0,
         // paddingBottom: Platform.OS === 'ios' ? insets.bottom : 0

apps/mobile/src/views/Editor/Functions.js

@@ -158,6 +158,7 @@ export const CHECK_STATUS = `(function() {
 
 const request_content = `(function() {
   if (window.ReactNativeWebView) {
+    if (!editor) return;
     editor.getHTML().then(function(html) {
       window.ReactNativeWebView.postMessage(
         JSON.stringify({
@@ -167,7 +168,7 @@ const request_content = `(function() {
           sessionId:sessionId
         })
       );
-    })
+    }).catch(console.log)
   }
 })();`;
 
@@ -363,7 +364,7 @@ export const loadNote = async item => {
   loading_note = false;
 };
 
-const checkStatus = async noreset => {
+export const checkStatus = async noreset => {
   return new Promise(resolve => {
     webviewOK = false;
     console.log('checking status of webview');
@@ -402,15 +403,15 @@ const checkStatus = async noreset => {
 function updateSessionStatus() {
   tiny.call(
     EditorWebView,
-    `(function() {
-    sessionId = "${sessionId}";
+    `(function () {
+    sessionId = '${sessionId}';
     let msg = JSON.stringify({
       data: true,
       type: 'status',
-      sessionId:sessionId
+      sessionId: sessionId
     });
-    window.ReactNativeWebView.postMessage(msg)
-})();`
+    window.ReactNativeWebView.postMessage(msg);
+  })();`
   );
 }
 
@@ -429,24 +430,30 @@ function isContentInvalid(content) {
 function check_session_status() {
   tiny.call(
     EditorWebView,
-    `(function() {
-    if (window.ReactNativeWebView) {
-      if (!editor) {
-        return;
+    `(function () {
+      if (window.ReactNativeWebView) {
+        if (!editor) return;
+    
+        editor.getHTML().then(function (value) {
+          let status =
+            !value ||
+            value === '' ||
+            value.trim() === '' ||
+            value === '<p></p>' ||
+            value === '<p><br></p>' ||
+            value === '<p>&nbsp;</p>' ||
+            value === '<p><br data-mce-bogus="1"></p>';
+    
+          window.ReactNativeWebView.postMessage(
+            JSON.stringify({
+              type: 'content_not_loaded',
+              value: status,
+              sessionId: sessionId
+            })
+          );
+        }).catch(console.log)
       }
-      editor.getHTML().then(function(value) {
-        let status = !value || value === '' || value.trim() === "" || value === '<p></p>' || value === '<p><br></p>' || value === '<p>&nbsp;</p>' || value === '<p><br data-mce-bogus="1"></p>';
-        
-        window.ReactNativeWebView.postMessage(
-          JSON.stringify({
-            type: 'content_not_loaded',
-            value:status,
-            sessionId:sessionId
-          })
-        );
-      })
-    }
-  })();`
+    })();`
   );
 }
 

apps/mobile/src/views/Editor/index.js

@@ -1,6 +1,5 @@
 import React, {useEffect, useState} from 'react';
-import {Platform, View} from 'react-native';
-import { TextInput } from 'react-native-gesture-handler';
+import {AppState, Platform, View} from 'react-native';
 import WebView from 'react-native-webview';
 import {notesnook} from '../../../e2e/test.ids';
 import {useEditorStore, useUserStore} from '../../provider/stores';
@@ -11,9 +10,11 @@ import {
 } from '../../services/EventManager';
 import {getCurrentColors} from '../../utils/Colors';
 import {eOnLoadNote} from '../../utils/Events';
+import { tabBarRef } from '../../utils/Refs';
 import {sleep} from '../../utils/TimeUtils';
 import EditorHeader from './EditorHeader';
 import {
+  checkStatus,
   EditorWebView,
   getNote,
   onWebViewLoad,
@@ -50,18 +51,23 @@ const Editor = React.memo(
     }, [premiumUser]);
 
     const onResetRequested = async noload => {
-      setResetting(true);
-      await sleep(30);
-      setResetting(false);
-      eSendEvent(
-        eOnLoadNote,
-        getNote() ? {...getNote(), forced: true} : {type: 'new'}
-      );
-      console.log('resetting editor');
       if (!getNote()) {
-        await sleep(10);
         eSendEvent('loadingNote', null);
       }
+      setResetting(true);
+      await sleep(10);
+      setResetting(false);
+      if (tabBarRef.current?.scrollOffset === 0 ) {
+        console.log('Editor out of bounds');
+        return;
+      }
+      if (getNote()) {
+        eSendEvent(
+          eOnLoadNote,
+          {...getNote(), forced: true}
+        );
+      }
+      console.log('resetting editor');
     };
 
     useEffect(() => {
@@ -78,7 +84,7 @@ const Editor = React.memo(
             width: '100%',
             backgroundColor: 'transparent',
             flexGrow: 1,
-            flex: 1
+            flex: 1,
           }}>
           <EditorHeader />
           <WebView
@@ -88,6 +94,9 @@ const Editor = React.memo(
             onRenderProcessGone={event => {
               onResetRequested();
             }}
+            onError={event => {
+              onResetRequested();
+            }}
             injectedJavaScript={`
             sessionId="${sessionId}";
             console.log(sessionId);
@@ -122,7 +131,7 @@ const Editor = React.memo(
             allowUniversalAccessFromFileURLs={true}
             originWhitelist={['*']}
             source={source}
-            // source={{uri:"http://192.168.10.4:3000/index.html"}}
+            //source={{uri: 'http://192.168.10.7:3000/index.html'}}
             style={style}
             autoManageStatusBarEnabled={false}
             onMessage={_onMessage}