mobile: fix editor tab bugs

apps/mobile/app/hooks/use-app-events.tsx

@@ -541,6 +541,8 @@ export const useAppEvents = () => {
             console.error(e);
           }
         }
+        //@ts-ignore
+        globalThis["IS_SHARE_EXTENSION"] = false;
       } else {
         SettingsService.appEnteredBackground();
         const id = useTabStore.getState().getCurrentNoteId();

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

@@ -549,7 +549,7 @@ export const useEditorEvents = (
           const hash = (editorMessage.value as Attachment)?.hash;
           const attachment = await db.attachments?.attachment(hash);
           if (!attachment) return;
-          if (attachment.type.startsWith("image/")) {
+          if (attachment.mimeType.startsWith("image/")) {
             eSendEvent("ImagePreview", editorMessage.value);
           } else {
             eSendEvent("PDFPreview", attachment);
@@ -585,7 +585,11 @@ export const useEditorEvents = (
           );
 
           eSendEvent(eEditorTabFocused, editorMessage.tabId);
-          if (!editorMessage.value && editorMessage.noteId) {
+
+          if (
+            (!editorMessage.value || editor.currentLoadingNoteId.current) &&
+            editorMessage.noteId
+          ) {
             if (!useSettingStore.getState().isAppLoading) {
               const note = await db.notes.note(editorMessage.noteId);
               if (note) {

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

@@ -389,6 +389,7 @@ export const useEditor = (
         blockIdRef.current = event.blockId;
       }
       state.current.currentlyEditing = true;
+
       if (
         !state.current.ready &&
         (await isEditorLoaded(
@@ -412,6 +413,13 @@ export const useEditor = (
         if (!event.item) return;
         const item = event.item;
 
+        const currentTab = useTabStore
+          .getState()
+          .getTab(useTabStore.getState().currentTab);
+        if (currentTab?.previewTab && item.id !== currentTab.noteId) {
+          await commands.setLoading(true, useTabStore.getState().currentTab);
+        }
+
         const noteIsLocked =
           (await db.vaults.itemExists(event.item as ItemReference)) &&
           !(event.item as NoteWithContent).content;
@@ -455,6 +463,7 @@ export const useEditor = (
           //   console.log("tab id did not match after focus in 1000ms");
           //   return;
           // }
+          currentLoadingNoteId.current = item.id;
           console.log("Waiting for tab to focus");
           return;
         }
@@ -775,6 +784,7 @@ export const useEditor = (
     onContentChanged,
     editorId: editorId,
     overlay,
-    postMessage
+    postMessage,
+    currentLoadingNoteId
   };
 };

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

@@ -181,7 +181,8 @@ const Tiptap = ({
   const _editor = useTiptap(tiptapOptions, [tiptapOptions]);
 
   const update = useCallback(() => {
-    logger("info", "update content");
+    logger("info", "LOADING NOTE...");
+    _editor.commands.setTextSelection(0);
     setTick((tick) => tick + 1);
     setTimeout(() => {
       const noteState = tabRef.current.noteId
@@ -208,7 +209,7 @@ const Tiptap = ({
     );
     setTimeout(() => {
       editorControllers[tabRef.current.id]?.setLoading(false);
-    });
+    }, 300);
   }, []);
 
   const controller = useEditorController({
@@ -263,10 +264,10 @@ const Tiptap = ({
         ) {
           editorControllers[tabRef.current.id]?.setLoading(true);
         }
-
         post(
           EventTypes.tabFocused,
-          !!globalThis.editorControllers[tabRef.current.id]?.content.current,
+          !!globalThis.editorControllers[tabRef.current.id]?.content.current &&
+            !editorControllers[tabRef.current.id]?.loading,
           tabRef.current.id,
           state.getCurrentNoteId()
         );
@@ -377,7 +378,7 @@ const Tiptap = ({
           onScroll={controller.scroll}
           ref={containerRef}
           style={{
-            overflowY: "scroll",
+            overflowY: controller.loading ? "hidden" : "scroll",
             height: "100%",
             display: "block",
             position: "relative"
@@ -386,6 +387,9 @@ const Tiptap = ({
           {settings.noHeader || tab.locked ? null : (
             <>
               <Tags settings={settings} />
+
+              {controller.loading ? null : (
+                <>
                   <Title
                     titlePlaceholder={controller.titlePlaceholder}
                     readonly={settings.readonly}
@@ -398,6 +402,8 @@ const Tiptap = ({
                   <StatusBar container={containerRef} />
                 </>
               )}
+            </>
+          )}
 
           {controller.loading || tab.locked ? (
             <div
@@ -585,6 +591,54 @@ const Tiptap = ({
                 </>
               ) : (
                 <>
+                  <div
+                    style={{
+                      height: 25,
+                      width: "94%",
+                      backgroundColor: colors.secondary.background,
+                      borderRadius: 5,
+                      marginTop: 10
+                    }}
+                  />
+
+                  <div
+                    style={{
+                      flexDirection: "row",
+                      display: "flex",
+                      gap: 10
+                    }}
+                  >
+                    <div
+                      style={{
+                        height: 12,
+                        width: 40,
+                        backgroundColor: colors.secondary.background,
+                        borderRadius: 5,
+                        marginTop: 10
+                      }}
+                    />
+
+                    <div
+                      style={{
+                        height: 12,
+                        width: 50,
+                        backgroundColor: colors.secondary.background,
+                        borderRadius: 5,
+                        marginTop: 10
+                      }}
+                    />
+
+                    <div
+                      style={{
+                        height: 12,
+                        width: 100,
+                        backgroundColor: colors.secondary.background,
+                        borderRadius: 5,
+                        marginTop: 10
+                      }}
+                    />
+                  </div>
+
                   <div
                     style={{
                       height: 16,

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

@@ -244,7 +244,7 @@ export function useEditorController({
         }
         case "native:html":
           htmlContentRef.current = value;
-          logger("info", "loading html");
+          logger("info", "LOADING NOTE HTML");
           if (!editor) break;
           update();
           countWords(0);