mobile: fix editor loading multiple times

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

@@ -143,7 +143,6 @@ const Editor = React.memo(
           <WebView
             testID={notesnook.editor.id}
             ref={editor.ref}
-            onLoad={editor.onLoad}
             key={renderKey.current}
             onRenderProcessGone={onError}
             nestedScrollEnabled

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

@@ -39,7 +39,7 @@ export const ProgressBar = () => {
   const [visible, setVisible] = useState(false);
   const timer = useRef<NodeJS.Timeout>();
   const insets = useGlobalSafeAreaInsets();
-  const [width, setWidth] = useState(400);
+  const [width, setWidth] = useState(0);
 
   const groupProgressInfo = useRef<{
     [name: string]: {
@@ -54,7 +54,6 @@ export const ProgressBar = () => {
 
   useEffect(() => {
     if (loading) {
-      console.log(loading);
       if (
         loading.current === loading.total &&
         typeof loading.success === "boolean"
@@ -116,6 +115,7 @@ export const ProgressBar = () => {
         justifyContent: "center",
         position: "absolute",
         zIndex: visible ? 1 : -1,
+        opacity: visible ? 1 : 0,
         marginTop: insets.top + 45,
         width: "100%"
       }}

apps/mobile/app/screens/editor/tiptap/editor-events.ts

@@ -42,5 +42,6 @@ export const EventTypes = {
   showTabs: "editor-events:show-tabs",
   tabFocused: "editor-events:tab-focused",
   toc: "editor-events:toc",
-  createInternalLink: "editor-events:create-internal-link"
+  createInternalLink: "editor-events:create-internal-link",
+  load: "editor-events:load"
 };

apps/mobile/app/screens/editor/tiptap/use-editor-events.ts

@@ -343,6 +343,12 @@ export const useEditorEvents = (
       const data = event.nativeEvent.data;
       const editorMessage = JSON.parse(data) as EditorMessage<any>;
 
+      if (editorMessage.type === EventTypes.load) {
+        console.log("Editor loaded");
+        editor.onLoad();
+        return;
+      }
+
       if (editorMessage.type === EventTypes.back) {
         return onBackPress();
       }

apps/mobile/app/screens/editor/tiptap/use-editor.ts

@@ -411,8 +411,6 @@ export const useEditor = (
         const noteIsLocked =
           event.item.locked && !(event.item as NoteWithContent).content;
 
-        console.log("noteIsLocked", noteIsLocked);
-
         // If note was already opened in a tab, focus that tab.
         if (typeof event.tabId !== "number") {
           if (useTabStore.getState().hasTabForNote(event.item.id)) {
@@ -422,7 +420,6 @@ export const useEditor = (
                 readonly: event.item.readonly || readonly,
                 locked: noteIsLocked
               });
-              console.log(noteIsLocked, "focused tab...");
               useTabStore.getState().focusTab(tabId);
             }
             console.log("Note already loaded, focusing the tab");
@@ -437,7 +434,6 @@ export const useEditor = (
           }
         } else {
           if (lastTabFocused.current !== event.tabId) {
-            console.log("Focused tab");
             useTabStore.getState().focusTab(event.tabId);
           }
         }
@@ -489,6 +485,7 @@ export const useEditor = (
         );
 
         await postMessage(EditorEvents.title, item.title, tabId);
+        overlay(false);
         loadingState.current = currentContents.current[item.id]?.data;
 
         await postMessage(
@@ -715,8 +712,6 @@ export const useEditor = (
 
   const onLoad = useCallback(async () => {
     if (currentNotes.current) overlay(true);
-    clearTimeout(timers.current["editor:loaded"]);
-    timers.current["editor:loaded"] = setTimeout(async () => {
     postMessage(EditorEvents.theme, theme);
     commands.setInsets(
       isDefaultEditor ? insets : { top: 0, left: 0, right: 0, bottom: 0 }
@@ -726,34 +721,15 @@ export const useEditor = (
     if (!state.current.ready && (await onReady())) {
       state.current.ready = true;
     }
-      setTimeout(() => overlay(false), 300);
 
     const noteId = useTabStore.getState().getCurrentNoteId();
-      async function restoreTabNote() {
-        if (!noteId) return;
-        const note = await db.notes.note(noteId);
-        if (!note) {
-          console.log("Editor loaded with blank note");
+    if (!noteId) {
+      overlay(false);
       loadNote({ newNote: true });
       if (tabBarRef.current?.page === 1) {
         state.current.currentlyEditing = false;
       }
     }
-      }
-
-      if (noteId) {
-        if (useSettingStore.getState().isAppLoading) {
-          const unsub = useSettingStore.subscribe(async (state) => {
-            if (!state.isAppLoading) {
-              restoreTabNote();
-              unsub();
-            }
-          });
-        } else {
-          restoreTabNote();
-        }
-      }
-    }, 500);
   }, [
     onReady,
     postMessage,

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

@@ -29,7 +29,14 @@ import {
 } from "@notesnook/editor";
 import { toBlobURL } from "@notesnook/editor/dist/utils/downloader";
 import { useThemeColors } from "@notesnook/theme";
-import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
 import { useEditorController } from "../hooks/useEditorController";
 import { useSettings } from "../hooks/useSettings";
 import {
@@ -47,6 +54,8 @@ import Title from "./title";
 
 globalThis.toBlobURL = toBlobURL as typeof globalThis.toBlobURL;
 
+let didCallOnLoad = false;
+
 const Tiptap = ({
   settings,
   getContentDiv
@@ -214,6 +223,11 @@ const Tiptap = ({
       contentPlaceholderRef.current?.appendChild(getContentDiv());
     }
 
+    if (!didCallOnLoad) {
+      didCallOnLoad = true;
+      post("editor-events:load");
+    }
+
     const updateScrollPosition = (state: TabStore) => {
       if (isFocusedRef.current) return;
       if (state.currentTab === tabRef.current.id) {
@@ -265,7 +279,7 @@ const Tiptap = ({
     return () => {
       unsub();
     };
-  }, []);
+  }, [getContentDiv]);
 
   const onClickEmptyArea: React.MouseEventHandler<HTMLDivElement> = useCallback(
     (event) => {
@@ -466,31 +480,43 @@ const TiptapProvider = (): JSX.Element => {
   const settings = useSettings();
   const { colors } = useThemeColors("editor");
   const contentRef = useRef<HTMLElement>();
-  return (
-    <PortalProvider>
-      <Tiptap
-        settings={settings}
-        getContentDiv={() => {
+
+  const getContentDiv = useCallback(() => {
     if (contentRef.current) {
-            logger("info", "return content");
       return contentRef.current;
     }
-          logger("info", "new content");
     const editorContainer = document.createElement("div");
     editorContainer.classList.add("selectable");
     editorContainer.style.flex = "1";
     editorContainer.style.cursor = "text";
     editorContainer.style.padding = "0px 12px";
-          editorContainer.style.color =
-            colors?.primary?.paragraph || colors.primary.paragraph;
+    editorContainer.style.color = colors.primary.paragraph;
     editorContainer.style.paddingBottom = `150px`;
     editorContainer.style.fontSize = `${settings.fontSize}px`;
     editorContainer.style.fontFamily =
       getFontById(settings.fontFamily)?.font || "sans-serif";
     contentRef.current = editorContainer;
     return editorContainer;
-        }}
-      />
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (contentRef.current) {
+      contentRef.current.style.color = colors.primary.paragraph;
+    }
+  }, [colors]);
+
+  useEffect(() => {
+    if (contentRef.current) {
+      contentRef.current.style.fontSize = `${settings.fontSize}px`;
+      contentRef.current.style.fontFamily =
+        getFontById(settings.fontFamily)?.font || "sans-serif";
+    }
+  }, [settings.fontSize, settings.fontFamily]);
+
+  return (
+    <PortalProvider>
+      <Tiptap settings={settings} getContentDiv={getContentDiv} />
     </PortalProvider>
   );
 };

packages/editor-mobile/src/hooks/useEditorController.ts

@@ -217,16 +217,6 @@ export function useEditorController({
         return;
       }
 
-      if (tab.id === message.tabId) {
-        logger(
-          "info",
-          message.type,
-          tab.noteId,
-          "Focused:",
-          tab.id === useTabStore.getState().currentTab
-        );
-      }
-
       const editor = editors[tab.id];
       switch (type) {
         case "native:updatehtml": {

packages/editor-mobile/src/index.tsx

@@ -17,14 +17,13 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 global.Buffer = require("buffer").Buffer;
-import React from "react";
-import { createRoot } from "react-dom/client";
-import "./index.css";
-import App from "./App";
-import "@notesnook/editor/styles/katex.min.css";
 import "@notesnook/editor/styles/fonts.mobile.css";
 import "@notesnook/editor/styles/katex-fonts.mobile.css";
+import "@notesnook/editor/styles/katex.min.css";
 import "@notesnook/editor/styles/styles.css";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+import "./index.css";
 
 const rootElement = document.getElementById("root");
 if (rootElement) {

packages/editor-mobile/src/utils/index.ts

@@ -190,7 +190,8 @@ export const EventTypes = {
   showTabs: "editor-events:show-tabs",
   tabFocused: "editor-events:tab-focused",
   toc: "editor-events:toc",
-  createInternalLink: "editor-events:create-internal-link"
+  createInternalLink: "editor-events:create-internal-link",
+  load: "editor-events:load"
 } as const;
 
 export function randId(prefix: string) {