mobile: push changes

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

@@ -511,8 +511,8 @@ const onChangeTab = async (obj) => {
     editorState().movedAway = false;
     editorState().isFocused = true;
     activateKeepAwake();
-    console.log(editorState().currentlyEditing, "currentlyEditing...");
-    if (!editorState().currentlyEditing) {
+
+    if (!useTabStore.getState().getCurrentNoteId()) {
       eSendEvent(eOnLoadNote, {
         newNote: true
       });

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

@@ -75,7 +75,6 @@ class Commands {
   }
 
   focus = async (tabId: number) => {
-    console.log("focus");
     if (!this.ref.current) return;
     if (Platform.OS === "android") {
       //this.ref.current?.requestFocus();
@@ -103,7 +102,6 @@ class Commands {
     );
 
   clearContent = async (tabId: number) => {
-    console.log("clearContent");
     this.previousSettings = null;
     await this.doAsync(
       `
@@ -134,7 +132,6 @@ if (typeof statusBar !== "undefined") {
     saved: string,
     tabId: number
   ) => {
-    console.log("setStatus");
     await this.doAsync(
       `
       const statusBar = statusBars[${tabId}];

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

@@ -39,6 +39,6 @@ export const EventTypes = {
   copyToClipboard: "editor-events:copy-to-clipboard",
   getAttachmentData: "editor-events:get-attachment-data",
   tabsChanged: "editor-events:tabs-changed",
-  showTabs: "editor-events:showTabs",
+  showTabs: "editor-events:show-tabs",
   tabFocused: "editor-events:tab-focused"
 };

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

@@ -518,11 +518,11 @@ export const useEditorEvents = (
           break;
         }
         case EventTypes.tabsChanged: {
-          useTabStore.setState({
-            tabs: (editorMessage.value as any)?.tabs,
-            currentTab: (editorMessage.value as any)?.currentTab
-          });
-          console.log("tabs updated...");
+          // useTabStore.setState({
+          //   tabs: (editorMessage.value as any)?.tabs,
+          //   currentTab: (editorMessage.value as any)?.currentTab
+          // });
+          // console.log("Tabs updated");
           break;
         }
         case EventTypes.showTabs: {
@@ -531,13 +531,16 @@ export const useEditorEvents = (
         }
         case EventTypes.tabFocused: {
           // Reload the note
-          const note = await db.notes.note(editorMessage.noteId);
-          if (note) {
-            eSendEvent(eOnLoadNote, {
-              item: note,
-              forced: true
-            });
-          }
+          console.log("Focused tab", editorMessage.tabId);
+          eSendEvent("tabsFocused", editorMessage.tabId);
+
+          // const note = await db.notes.note(editorMessage.noteId);
+          // if (note) {
+          //   eSendEvent(eOnLoadNote, {
+          //     item: note,
+          //     forced: true
+          //   });
+          // }
           // TODO
           // Handle any updates that occured in an note while the tab was not focused.
           //  If editor has no content, reload the note, because it might be an app reload

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

@@ -55,7 +55,7 @@ import { onNoteCreated } from "../../notes/common";
 import Commands from "./commands";
 import { SessionHistory } from "./session-history";
 import { EditorState, SavePayload } from "./types";
-import { useTabStore } from "./use-tab-store";
+import { syncTabs, useTabStore } from "./use-tab-store";
 import {
   EditorEvents,
   clearAppState,
@@ -63,7 +63,8 @@ import {
   getAppState,
   isContentInvalid,
   isEditorLoaded,
-  post
+  post,
+  waitForEvent
 } from "./utils";
 
 // Keep a fixed session id, dont' change it when a new note is opened, session id can stay the same always I think once the app is opened. DONE
@@ -117,6 +118,7 @@ export const useEditor = (
   const lock = useRef(false);
   const currentLoadingNoteId = useRef<string>();
   const loadingState = useRef<string>();
+  const lastTabFocused = useRef(0);
   const postMessage = useCallback(
     async <T>(type: string, data: T, tabId?: number, waitFor = 300) =>
       await post(
@@ -146,6 +148,16 @@ export const useEditor = (
     }
   }, [commands, tags]);
 
+  useEffect(() => {
+    const event = eSubscribeEvent("tabsFocused", (tabId) => {
+      lastTabFocused.current = tabId as number;
+      console.log(tabId);
+    });
+    return () => {
+      event.unsubscribe();
+    };
+  });
+
   const overlay = useCallback(
     (show: boolean, data = { type: "new" }) => {
       eSendEvent(
@@ -191,10 +203,10 @@ export const useEditor = (
       lastContentChangeTime.current = 0;
       resetContent && (await commands.clearContent(tabId));
       resetContent && (await commands.clearTags(tabId));
-
-      useTabStore.getState().updateTab(tabId, {
-        noteId: undefined
-      });
+      // TODO ?
+      // useTabStore.getState().updateTab(tabId, {
+      //   noteId: undefined
+      // });
     },
     [commands, editorSessionHistory, postMessage]
   );
@@ -248,9 +260,11 @@ export const useEditor = (
         }
 
         // If note is edited, the tab becomes a persistent tab automatically.
-        useTabStore.getState().updateTab(tabId, {
-          previewTab: false
-        });
+        if (useTabStore.getState().getTab(tabId)?.previewTab) {
+          useTabStore.getState().updateTab(tabId, {
+            previewTab: false
+          });
+        }
 
         if (!locked) {
           id = await db.notes?.add(noteData);
@@ -369,8 +383,10 @@ export const useEditor = (
       }
 
       if (event.newNote) {
+        console.log("Create new note");
         useTabStore.getState().focusEmptyTab();
         const tabId = useTabStore.getState().currentTab;
+        console.log("empty tab", tabId);
         currentNotes.current && (await reset(tabId));
         setTimeout(() => {
           if (state.current?.ready) commands.focus(tabId);
@@ -379,21 +395,33 @@ export const useEditor = (
       } else {
         if (!event.item) return;
         const item = event.item;
-
-        // If note was already opened in a tab, focus that tab.
+        console.log("load note called again...", event.forced, event.item.id);
+        // If note was already opened in a tab, focus that tab and return. Once the tab is focused
+        // the note will load.
         if (useTabStore.getState().hasTabForNote(event.item.id)) {
           const tabId = useTabStore.getState().getTabForNote(event.item.id);
           if (typeof tabId === "number") {
+            useTabStore.getState().updateTab(tabId, {
+              readonly: event.item.readonly
+            });
             useTabStore.getState().focusTab(tabId);
           }
+        } else {
+          console.log("opening note in preview tab");
+          // Otherwise we focus the preview tab or create one to open the note in.
+          useTabStore.getState().focusPreviewTab(event.item.id, {
+            readonly: event.item.readonly,
+            locked: false
+          });
         }
-
-        // Otherwise we focus the preview tab or create one to open the note in.
-        useTabStore.getState().focusPreviewTab(event.item.id, {
-          readonly: event.item.readonly,
-          locked: false
-        });
         const tabId = useTabStore.getState().currentTab;
+        console.log(lastTabFocused.current, tabId);
+        if (lastTabFocused.current !== tabId) {
+          if ((await waitForEvent("tabsFocused", 1000)) !== tabId) {
+            console.log("tab id did not match after focus in 1000ms");
+            return;
+          }
+        }
 
         // If note is already loaded and forced reload is not requested, return.
         if (!event.forced && currentNotes.current[item.id]) return;
@@ -410,8 +438,8 @@ export const useEditor = (
         if (
           currentNotes.current[item.id] &&
           loadingState.current &&
-          currentContents.current?.data &&
-          loadingState.current === currentContents.current?.data
+          currentContents.current[item.id]?.data &&
+          loadingState.current === currentContents.current[item.id]?.data
         ) {
           return;
         }
@@ -437,10 +465,10 @@ export const useEditor = (
 
         await postMessage(EditorEvents.title, item.title, tabId);
         loadingState.current = currentContents.current[item.id]?.data;
-        if (currentContents.current?.data) {
+        if (currentContents.current[item.id]?.data) {
           await postMessage(
             EditorEvents.html,
-            currentContents.current?.data,
+            currentContents.current[item.id]?.data,
             tabId,
             10000
           );
@@ -561,7 +589,12 @@ export const useEditor = (
       ignoreEdit: boolean;
       tabId: number;
     }) => {
-      if (lock.current || currentLoadingNoteId.current === noteId) return;
+      if (
+        lock.current ||
+        (currentLoadingNoteId.current &&
+          currentLoadingNoteId.current === noteId)
+      )
+        return;
 
       lastContentChangeTime.current = Date.now();
 
@@ -602,6 +635,7 @@ export const useEditor = (
 
   const restoreEditorState = useCallback(async () => {
     const appState = getAppState();
+    console.log(appState, "appState");
     if (!appState) return;
     state.current.isRestoringState = true;
     state.current.currentlyEditing = true;
@@ -610,25 +644,9 @@ export const useEditor = (
     if (!DDS.isTab) {
       tabBarRef.current?.goToPage(1, false);
     }
-    if (appState.note) {
-      if (useSettingStore.getState().isAppLoading) {
-        const remove = useSettingStore.subscribe((state) => {
-          if (!state.isAppLoading && appState.note) {
-            loadNote({
-              item: appState.note
-            });
-            remove();
-          }
-        });
-      } else {
-        loadNote({
-          item: appState.note
-        });
-      }
-    }
     clearAppState();
     state.current.isRestoringState = false;
-  }, [loadNote]);
+  }, []);
 
   useEffect(() => {
     eSubscribeEvent(eOnLoadNote + editorId, loadNote);
@@ -653,9 +671,16 @@ export const useEditor = (
         useTabStore.getState().currentTab
       ))
     ) {
+      console.log(
+        "ready failed....",
+        sessionIdRef.current,
+        useTabStore.getState().currentTab
+      );
       eSendEvent("webview_reset", "onReady");
       return false;
     } else {
+      console.log("onReady", "sync tabs");
+      syncTabs();
       isDefaultEditor && restoreEditorState();
       return true;
     }
@@ -677,9 +702,42 @@ export const useEditor = (
         }
         overlay(false);
 
+        // TODO: Improve handling this on app launch from a link etc.
         const noteId = useTabStore.getState().getCurrentNoteId();
-        if (noteId && currentNotes.current[noteId]) {
-          loadNote({ ...currentNotes.current[noteId], forced: true });
+
+        if (noteId) {
+          if (useSettingStore.getState().isAppLoading) {
+            const unsub = useSettingStore.subscribe(async (s) => {
+              if (!s.isAppLoading) {
+                try {
+                  const note = await db.notes.note(noteId);
+                  if (note) {
+                    loadNote({ item: note, forced: true });
+                  } else {
+                    console.log("new note after app load");
+                    loadNote({ newNote: true });
+                    if (tabBarRef.current?.page === 1) {
+                      state.current.currentlyEditing = false;
+                    }
+                  }
+                  unsub();
+                } catch (e) {
+                  console.log(e);
+                }
+              }
+            });
+          } else {
+            const note = await db.notes.note(noteId);
+            if (note) {
+              loadNote({ item: note, forced: true });
+            } else {
+              console.log("new note");
+              loadNote({ newNote: true });
+              if (tabBarRef.current?.page === 1) {
+                state.current.currentlyEditing = false;
+              }
+            }
+          }
         }
       });
     });

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

@@ -17,7 +17,9 @@ 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 create from "zustand";
+import { persist, StateStorage } from "zustand/middleware";
 import { editorController } from "./utils";
+import { MMKV } from "../../../common/database/mmkv";
 
 export type TabItem = {
   id: number;
@@ -37,104 +39,163 @@ export type TabStore = {
   ) => void;
   removeTab: (index: number) => void;
   moveTab: (index: number, toIndex: number) => void;
-  newTab: (noteId?: string) => void;
+  newTab: (noteId?: string, previewTab?: boolean) => void;
   focusTab: (id: number) => void;
   getNoteIdForTab: (id: number) => string | undefined;
   getTabForNote: (noteId: string) => number | undefined;
   hasTabForNote: (noteId: string) => boolean;
   focusEmptyTab: () => void;
   getCurrentNoteId: () => string | undefined;
+  getTab: (tabId: number) => TabItem | undefined;
 };
 
-export const useTabStore = create<TabStore>((set, get) => ({
-  tabs: [
-    {
-      id: 0
-    }
-  ],
-  currentTab: 0,
-  updateTab: (id: number, options: Omit<Partial<TabItem>, "id">) => {
-    if (!options) return;
-    const index = get().tabs.findIndex((t) => t.id === id);
-    if (index == -1) return;
-    const tabs = [...get().tabs];
-    tabs[index] = {
-      ...tabs[index],
-      ...options
-    };
-
-    set({
-      tabs: tabs
-    });
-
-    editorController.current?.commands.doAsync(`
-    globalThis.tabStore.getState().updateTab(${id}, ${JSON.stringify(options)});
-`);
-  },
-  focusPreviewTab: (noteId: string, options: Omit<Partial<TabItem>, "id">) => {
-    const index = get().tabs.findIndex((t) => t.previewTab);
-    if (index === -1) return get().newTab(noteId);
-    const tabs = [...get().tabs];
-    tabs[index] = {
-      ...tabs[index],
-      noteId: noteId,
-      ...options
-    };
-    set({
-      currentTab: tabs[index].id
-    });
-
-    editorController.current?.commands.doAsync(`
-    globalThis.tabStore.getState().focusPreviewTab(${
-      noteId ? `"${noteId}"` : ""
-    }, ${JSON.stringify(options || {})});
-`);
-  },
-  removeTab: (index: number) => {
-    editorController.current?.commands.doAsync(`
-        globalThis.tabStore.getState().removeTab(${index});
-    `);
-  },
-  newTab: (noteId?: string) => {
-    editorController.current?.commands.doAsync(`
-        globalThis.tabStore.getState().newTab(${noteId ? `"${noteId}"` : ""});
-    `);
-  },
-  focusEmptyTab: () => {
-    const index = get().tabs.findIndex((t) => !t.noteId);
-    if (index === -1) return get().newTab();
-    const tabs = [...get().tabs];
-    tabs[index] = {
-      ...tabs[index]
-    };
-    set({
-      currentTab: tabs[index].id
-    });
-
-    editorController.current?.commands.doAsync(`
-    globalThis.tabStore.getState().focusEmptyTab();
-`);
-  },
-  moveTab: (index: number, toIndex: number) => {
-    editorController.current?.commands.doAsync(`
-        globalThis.tabStore.getState().moveTab(${index}, ${toIndex});
-    `);
-  },
-  focusTab: (id: number) => {
-    editorController.current?.commands.doAsync(`
-        globalThis.tabStore.getState().focusTab(${id});
-    `);
-  },
-  getNoteIdForTab: (id: number) => {
-    return get().tabs.find((t) => t.id === id)?.noteId;
-  },
-  hasTabForNote: (noteId: string) => {
-    return typeof get().tabs.find((t) => t.noteId === noteId)?.id === "number";
-  },
-  getTabForNote: (noteId: string) => {
-    return get().tabs.find((t) => t.noteId === noteId)?.id;
-  },
-  getCurrentNoteId: () => {
-    return get().tabs.find((t) => t.id === get().currentTab)?.noteId;
+function getId(id: number, tabs: TabItem[]): number {
+  const exists = tabs.find((t) => t.id === id);
+  if (exists) {
+    return getId(id + 1, tabs);
   }
-}));
+  return id;
+}
+
+export function syncTabs() {
+  editorController.current?.commands.doAsync(`
+    globalThis.tabStore?.setState({
+      tabs: ${JSON.stringify(useTabStore.getState().tabs)},
+      currentTab: ${useTabStore.getState().currentTab}
+    });
+`);
+}
+
+export const useTabStore = create<TabStore>(
+  persist(
+    (set, get) => ({
+      tabs: [
+        {
+          id: 0
+        }
+      ],
+      currentTab: 0,
+      updateTab: (id: number, options: Omit<Partial<TabItem>, "id">) => {
+        if (!options) return;
+        const index = get().tabs.findIndex((t) => t.id === id);
+        if (index == -1) return;
+        const tabs = [...get().tabs];
+        tabs[index] = {
+          ...tabs[index],
+          ...options
+        };
+
+        set({
+          tabs: tabs
+        });
+        syncTabs();
+      },
+      focusPreviewTab: (
+        noteId: string,
+        options: Omit<Partial<TabItem>, "id" | "noteId">
+      ) => {
+        const index = get().tabs.findIndex((t) => t.previewTab);
+        if (index === -1) return get().newTab(noteId, true);
+        const tabs = [...get().tabs];
+        tabs[index] = {
+          ...tabs[index],
+          previewTab: true,
+          ...options,
+          noteId: noteId
+        };
+        console.log("focus preview", noteId);
+        set({
+          tabs: tabs,
+          currentTab: tabs[index].id
+        });
+
+        syncTabs();
+      },
+      removeTab: (id: number) => {
+        const index = get().tabs.findIndex((t) => t.id === id);
+
+        if (index > -1) {
+          const isFocused = id === get().currentTab;
+          const nextTabs = get().tabs.slice();
+          nextTabs.splice(index, 1);
+
+          if (nextTabs.length === 0) {
+            nextTabs.push({
+              id: 0
+            });
+          }
+
+          set({
+            tabs: nextTabs,
+            currentTab: isFocused
+              ? nextTabs[nextTabs.length - 1].id
+              : get().currentTab
+          });
+          syncTabs();
+        }
+      },
+      newTab: (noteId?: string, previewTab?: boolean) => {
+        const id = getId(get().tabs.length, get().tabs);
+        const nextTabs = [
+          ...get().tabs,
+          {
+            id: id,
+            noteId,
+            previewTab: previewTab
+          }
+        ];
+        set({
+          tabs: nextTabs,
+          currentTab: id
+        });
+        console.log("new tab");
+        syncTabs();
+      },
+      focusEmptyTab: () => {
+        const index = get().tabs.findIndex((t) => !t.noteId);
+        if (index === -1) return get().newTab();
+        console.log("focus empty tab", get().tabs[index]);
+        set({
+          currentTab: get().tabs[index].id
+        });
+
+        syncTabs();
+      },
+      moveTab: (index: number, toIndex: number) => {
+        const tabs = get().tabs.slice();
+        tabs.splice(toIndex, 0, tabs.slice(index, 1)[0]);
+        set({
+          tabs: tabs
+        });
+        syncTabs();
+      },
+      focusTab: (id: number) => {
+        set({
+          currentTab: id
+        });
+        syncTabs();
+      },
+      getNoteIdForTab: (id: number) => {
+        return get().tabs.find((t) => t.id === id)?.noteId;
+      },
+      hasTabForNote: (noteId: string) => {
+        return (
+          typeof get().tabs.find((t) => t.noteId === noteId)?.id === "number"
+        );
+      },
+      getTabForNote: (noteId: string) => {
+        return get().tabs.find((t) => t.noteId === noteId)?.id;
+      },
+      getCurrentNoteId: () => {
+        return get().tabs.find((t) => t.id === get().currentTab)?.noteId;
+      },
+      getTab: (tabId) => {
+        return get().tabs.find((t) => t.id === tabId);
+      }
+    }),
+    {
+      name: "tabs-storage",
+      getStorage: () => MMKV as unknown as StateStorage
+    }
+  )
+);

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

@@ -112,6 +112,25 @@ export const getResponse = async (
     };
     eSubscribeEvent(type, callback);
     setTimeout(() => {
+      eUnSubscribeEvent(type, callback);
+      resolve(false);
+    }, waitFor);
+  });
+};
+
+export const waitForEvent = async (
+  type: string,
+  waitFor = 300
+): Promise<any> => {
+  return new Promise((resolve) => {
+    const callback = (data: any) => {
+      eUnSubscribeEvent(type, callback);
+      resolve(data);
+    };
+    eSubscribeEvent(type, callback);
+    setTimeout(() => {
+      console.log("return..");
+      eUnSubscribeEvent(type, callback);
       resolve(false);
     }, waitFor);
   });