mobile: fix downloading attachments from editor

2025-12-16 19:57:52 +01:00 · 2024-01-26 22:00:54 +05:00
parent a442677e91
commit 4558c0b2eb
15 changed files with 129 additions and 140 deletions
--- a/apps/mobile/app/common/filesystem/download-attachment.js
+++ b/apps/mobile/app/common/filesystem/download-attachment.js
@@ -181,7 +181,8 @@ export default async function downloadAttachment(
    silent: false,
    cache: false,
    throwError: false,
-    groupId: undefined
+    groupId: undefined,
+    base64: false
  }
 ) {
  await createCacheDir();
@@ -212,11 +213,16 @@ export default async function downloadAttachment(
      options.groupId || attachment.metadata.hash,
      attachment.metadata.hash
    );
+
    if (
      !(await RNFetchBlob.fs.exists(`${cacheDir}/${attachment.metadata.hash}`))
    )
      return;

+    if (options.base64) {
+      return await db.attachments.read(attachment.metadata.hash, "base64");
+    }
+
    let filename = getFileNameWithExtension(
      attachment.metadata.filename,
      attachment.metadata.type
--- a/apps/mobile/app/common/filesystem/io.js
+++ b/apps/mobile/app/common/filesystem/io.js
@@ -36,9 +36,13 @@ export async function readEncrypted(filename, key, cipherData) {
    }

    const attachment = db.attachments.attachment(filename);
-    const isPng = /(png)/g.test(attachment?.metadata.type);
-    const isJpeg = /(jpeg|jpg)/g.test(attachment?.metadata.type);
-    console.log("decrypting....");
+    const isPng = !attachment.metadata.type
+      ? false
+      : /(png)/g.test(attachment?.metadata.type);
+    const isJpeg = !attachment.metadata.type
+      ? false
+      : /(jpeg|jpg)/g.test(attachment?.metadata.type);
+
    let output = await Sodium.decryptFile(
      key,
      {
--- a/apps/mobile/app/screens/editor/index.tsx
+++ b/apps/mobile/app/screens/editor/index.tsx
@@ -93,35 +93,6 @@ const Editor = React.memo(
        get: () => editor
      }));

-      const onMediaDownloaded = useCallback(
-        ({
-          hash,
-          groupId,
-          src,
-          attachmentType
-        }: {
-          hash: string;
-          groupId: string;
-          src: string;
-          attachmentType: string;
-        }) => {
-          if (groupId !== editor.note.current?.id) return;
-          editorController.current.markImageLoaded(hash);
-          if (attachmentType === "webclip") {
-            editor.commands.updateWebclip({
-              hash: hash,
-              src: src
-            });
-          } else {
-            editor.commands.updateImage({
-              hash: hash,
-              dataurl: src
-            });
-          }
-        },
-        [editor.commands, editor.note]
-      );
-
      const onError = useCallback(() => {
        renderKey.current =
          renderKey.current === `editor-0` ? `editor-1` : `editor-0`;
@@ -130,16 +101,11 @@ const Editor = React.memo(
      }, [editor]);

      useEffect(() => {
-        const sub = [
-          eSubscribeEvent("webview_reset", onError),
-          EV.subscribe(EVENTS.mediaAttachmentDownloaded, onMediaDownloaded)
-        ];
-
+        const sub = [eSubscribeEvent("webview_reset", onError)];
        return () => {
          sub.forEach((s) => s.unsubscribe());
-          EV.unsubscribe(EVENTS.mediaAttachmentDownloaded, onMediaDownloaded);
        };
-      }, [onError, onMediaDownloaded]);
+      }, [onError]);

      useLayoutEffect(() => {
        setImmediate(() => {
--- a/apps/mobile/app/screens/editor/source.ts
+++ b/apps/mobile/app/screens/editor/source.ts
@@ -28,5 +28,5 @@ const EditorMobileSourceUrl =
 * The url should be something like this: http://192.168.100.126:3000/index.html
 */
 export const EDITOR_URI = __DEV__
-  ? EditorMobileSourceUrl
+  ? "http://192.168.8.107:3000/index.html"
  : EditorMobileSourceUrl;
--- a/apps/mobile/app/screens/editor/tiptap/commands.ts
+++ b/apps/mobile/app/screens/editor/tiptap/commands.ts
@@ -17,10 +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 type {
-  Attachment,
-  AttachmentProgress
-} from "@notesnook/editor/dist/extensions/attachment/index";
+import type { Attachment } from "@notesnook/editor/dist/extensions/attachment/index";
 import type { ImageAttributes } from "@notesnook/editor/dist/extensions/image/index";
 import { createRef, RefObject } from "react";
 import { Platform } from "react-native";
@@ -203,11 +200,16 @@ typeof globalThis.statusBar !== "undefined" && statusBar.current.set({date:"",sa
    );
  };

-  setAttachmentProgress = async (attachmentProgress: AttachmentProgress) => {
+  setAttachmentProgress = async (attachmentProgress: Partial<Attachment>) => {
    await this.doAsync(
-      `editor && editor.commands.setAttachmentProgress(${JSON.stringify(
+      `editor && editor.commands.updateAttachment(${JSON.stringify(
        attachmentProgress
-      )})`
+      )}, {
+        preventUpdate: true,
+        query: (attachment) => {
+          return attachment.hash === "${attachmentProgress.hash}";
+        }
+      })`
    );
  };

--- a/apps/mobile/app/screens/editor/tiptap/editor-events.ts
+++ b/apps/mobile/app/screens/editor/tiptap/editor-events.ts
@@ -36,5 +36,6 @@ export const EventTypes = {
  contentchange: "editor-event:content-change",
  reminders: "editor-event:reminders",
  previewAttachment: "editor-event:preview-attachment",
-  copyToClipboard: "editor-events:copy-to-clipboard"
+  copyToClipboard: "editor-events:copy-to-clipboard",
+  getAttachmentData: "editor-events:get-attachment-data"
 };
--- a/apps/mobile/app/screens/editor/tiptap/use-editor-events.ts
+++ b/apps/mobile/app/screens/editor/tiptap/use-editor-events.ts
@@ -66,6 +66,7 @@ import { EditorMessage, EditorProps, useEditorType } from "./types";
 import { EditorEvents, editorState } from "./utils";
 import { useNoteStore } from "../../../stores/use-notes-store";
 import SettingsService from "../../../services/settings";
+import downloadAttachment from "../../../common/filesystem/download-attachment";

 const publishNote = async (editor: useEditorType) => {
  const user = useUserStore.getState().user;
@@ -416,6 +417,43 @@ export const useEditorEvents = (
          break;
        }

+        case EventTypes.getAttachmentData: {
+          const attachment = (editorMessage.value as any)
+            .attachment as Attachment;
+
+          console.log(
+            "Getting attachment data:",
+            attachment.hash,
+            attachment.type
+          );
+          downloadAttachment(attachment.hash, true, {
+            base64: true,
+            silent: true,
+            groupId: editor.note.current?.id,
+            cache: true
+          } as any)
+            .then((data: any) => {
+              console.log(
+                "Got attachment data:",
+                !!data,
+                (editorMessage.value as any).resolverId
+              );
+              editor.postMessage(EditorEvents.attachmentData, {
+                resolverId: (editorMessage.value as any).resolverId,
+                data
+              });
+            })
+            .catch(() => {
+              console.log("Error downloading attachment data");
+              editor.postMessage(EditorEvents.attachmentData, {
+                resolverId: (editorMessage.value as any).resolverId,
+                data: undefined
+              });
+            });
+
+          break;
+        }
+
        case EventTypes.pro:
          if (editor.state.current?.isFocused) {
            editor.state.current.isFocused = true;
--- a/apps/mobile/app/screens/editor/tiptap/use-editor.ts
+++ b/apps/mobile/app/screens/editor/tiptap/use-editor.ts
@@ -78,7 +78,6 @@ export const useEditor = (
  const saveCount = useRef(0);
  const lastContentChangeTime = useRef<number>(0);
  const lock = useRef(false);
-  const loadedImages = useRef<{ [name: string]: boolean }>({});
  const lockedSessionId = useRef<string>();
  const loadingState = useRef<string>();

@@ -129,12 +128,9 @@ export const useEditor = (

  const reset = useCallback(
    async (resetState = true, resetContent = true) => {
-      currentNote.current?.id &&
-        db.fs?.cancel(currentNote.current.id, "download");
+      currentNote.current?.id && db.fs?.cancel(currentNote.current.id);
      currentNote.current = null;
-      loadedImages.current = {};
      currentContent.current = null;
-      clearTimeout(timers.current["loading-images"]);
      sessionHistoryId.current = undefined;
      saveCount.current = 0;
      loadingState.current = undefined;
@@ -287,58 +283,6 @@ export const useEditor = (
    }
  }, []);

-  const getMediaToLoad = (previousContent?: string) => {
-    if (!currentNote.current?.id) return [];
-
-    const previousAttachments =
-      previousContent?.matchAll(/data-hash="(.+?)"/gm) || [];
-    const attachments =
-      currentContent.current?.data?.matchAll(/data-hash="(.+?)"/gm) || [];
-
-    const media: string[] = [];
-
-    const oldMatches = Array.from(previousAttachments).map((match) => match[1]);
-    const matches = Array.from(attachments).map((match) => match[1]);
-
-    for (let i = 0; i < matches.length; i++) {
-      const currentHash = matches[i];
-      const oldHash = oldMatches[i];
-      if (currentHash !== oldHash) {
-        media.push(currentHash);
-        loadedImages.current[currentHash] = false;
-      }
-    }
-    return media;
-  };
-
-  const markImageLoaded = (hash: string) => {
-    const attachment = loadedImages.current[hash];
-    if (typeof attachment === "boolean") {
-      loadedImages.current[hash] = true;
-    }
-  };
-
-  const loadImages = useCallback((previousContent?: string) => {
-    if (!currentNote.current?.id) return;
-    const timerId = "loading-images";
-    clearTimeout(timers.current[timerId]);
-    timers.current[timerId] = setTimeout(() => {
-      if (!currentNote.current?.id) return;
-      if (currentNote.current?.content?.isPreview) {
-        db.content?.downloadMedia(
-          currentNote.current?.id,
-          currentNote.current.content,
-          true
-        );
-      } else {
-        const media = getMediaToLoad(previousContent);
-        if (media.length > 0) {
-          db.attachments?.downloadMedia(currentNote.current?.id, media);
-        }
-      }
-    }, 1000);
-  }, []);
-
  const loadNote = useCallback(
    async (
      item: Omit<NoteType, "type"> & {
@@ -425,18 +369,9 @@ export const useEditor = (
          }
        }, 300);
        overlay(false);
-        loadImages();
      }
    },
-    [
-      commands,
-      isDefaultEditor,
-      loadContent,
-      loadImages,
-      overlay,
-      postMessage,
-      reset
-    ]
+    [commands, isDefaultEditor, loadContent, overlay, postMessage, reset]
  );

  const lockNoteWithVault = useCallback((note: NoteType) => {
@@ -466,8 +401,6 @@ export const useEditor = (

      lock.current = true;

-      const previousContent = currentContent.current?.data;
-
      if (data.type === "tiptap") {
        if (!currentNote.current.locked && isContentEncrypted) {
          lockNoteWithVault(note);
@@ -500,18 +433,8 @@ export const useEditor = (
      }

      lock.current = false;
-      if (data.type === "tiptap") {
-        loadImages(previousContent);
-        db.eventManager.subscribe(
-          EVENTS.syncCompleted,
-          () => {
-            loadImages(previousContent);
-          },
-          true
-        );
-      }
    },
-    [loadImages, lockNoteWithVault, postMessage, commands]
+    [lockNoteWithVault, postMessage, commands]
  );

  useEffect(() => {
@@ -689,7 +612,6 @@ export const useEditor = (
    saveContent,
    onContentChanged,
    editorId: editorId,
-    markImageLoaded,
    overlay,
    postMessage
  };
--- a/apps/mobile/app/screens/editor/tiptap/utils.ts
+++ b/apps/mobile/app/screens/editor/tiptap/utils.ts
@@ -50,7 +50,8 @@ export const EditorEvents: { [name: string]: string } = {
  titleplaceholder: "native:titleplaceholder",
  logger: "native:logger",
  status: "native:status",
-  keyboardShown: "native:keyboardShown"
+  keyboardShown: "native:keyboardShown",
+  attachmentData: "native:attachment-data"
 };

 export function randId(prefix: string) {
--- a/apps/mobile/app/stores/use-attachment-store.ts
+++ b/apps/mobile/app/stores/use-attachment-store.ts
@@ -68,8 +68,7 @@ export const useAttachmentStore = create<AttachmentStore>((set, get) => ({
    if (!progress) return;
    editorController.current?.commands.setAttachmentProgress({
      hash: hash,
-      progress: 100,
-      type: progress[hash]?.type || "download"
+      progress: 100
    });
    progress[hash] = null;
    set({ progress: { ...progress } });
@@ -80,10 +79,11 @@ export const useAttachmentStore = create<AttachmentStore>((set, get) => ({
    progress[hash] = { sent, total, hash, recieved, type };
    const progressPercentage =
      type === "upload" ? sent / total : recieved / total;
+
    editorController.current?.commands.setAttachmentProgress({
      hash: hash,
-      progress: Math.round(Math.max(progressPercentage * 100, 0)),
-      type: type
+      //@ts-ignore
+      progress: Math.round(Math.max(progressPercentage * 100, 0))
    });
    set({ progress: { ...progress } });
  },
--- a/packages/core/src/collections/attachments.js
+++ b/packages/core/src/collections/attachments.js
@@ -296,7 +296,7 @@ export default class Attachments extends Collection {
    if (!data) return;

    return outputType === "base64"
-      ? dataurl.fromObject({ type: attachment.metadata.type, data })
+      ? dataurl.fromObject({ type: "application/octet-stream", data })
      : data;
  }

--- a/packages/editor-mobile/src/components/editor.tsx
+++ b/packages/editor-mobile/src/components/editor.tsx
@@ -76,6 +76,9 @@ const Tiptap = ({ settings }: { settings: Settings }) => {
        global.editorController.previewAttachment(attachment);
        return true;
      },
+      getAttachmentData(attachment) {
+        return global.editorController.getAttachmentData(attachment);
+      },
      element: !layout ? undefined : contentRef.current || undefined,
      editable: !settings.readonly,
      editorProps: {
@@ -226,7 +229,10 @@ const Tiptap = ({ settings }: { settings: Settings }) => {
          />

          <div
-            onClick={onClickBottomArea}
+            onTouchEnd={(e) => {
+              e.preventDefault();
+              onClickBottomArea();
+            }}
            style={{
              flexGrow: 1,
              width: "100%",
--- a/packages/editor-mobile/src/hooks/useEditorController.ts
+++ b/packages/editor-mobile/src/hooks/useEditorController.ts
@@ -30,7 +30,7 @@ import {
  useRef,
  useState
 } from "react";
-import { EventTypes, isReactNative, post, saveTheme } from "../utils";
+import { EventTypes, isReactNative, post, randId, saveTheme } from "../utils";
 import { injectCss, transform } from "../utils/css";

 type Attachment = {
@@ -102,6 +102,7 @@ export type EditorController = {
  setTitlePlaceholder: React.Dispatch<React.SetStateAction<string>>;
  countWords: (ms: number) => void;
  copyToClipboard: (text: string) => void;
+  getAttachmentData: (attachment: Attachment) => Promise<string>;
 };

 export function useEditorController(update: () => void): EditorController {
@@ -211,6 +212,12 @@ export function useEditorController(update: () => void): EditorController {
            scrollIntoView(editor?.current as any);
          }
          break;
+        case "native:attachment-data":
+          if (pendingResolvers[value.resolverId]) {
+            logger("info", "resolved data for attachment", value.resolverId);
+            pendingResolvers[value.resolverId](value.data);
+          }
+          break;
        default:
          break;
      }
@@ -252,6 +259,20 @@ export function useEditorController(update: () => void): EditorController {
    post(EventTypes.copyToClipboard, text);
  };

+  const getAttachmentData = (attachment: Attachment) => {
+    return new Promise<string>((resolve, reject) => {
+      const resolverId = randId("get_attachment_data");
+      pendingResolvers[resolverId] = (data) => {
+        delete pendingResolvers[resolverId];
+        resolve(data);
+      };
+      post(EventTypes.getAttachmentData, {
+        attachment,
+        resolverId: resolverId
+      });
+    });
+  };
+
  return {
    contentChange,
    selectionChange,
@@ -268,6 +289,7 @@ export function useEditorController(update: () => void): EditorController {
    openLink,
    onUpdate: onUpdate,
    countWords,
-    copyToClipboard
+    copyToClipboard,
+    getAttachmentData
  };
 }
--- a/packages/editor-mobile/src/utils/index.ts
+++ b/packages/editor-mobile/src/utils/index.ts
@@ -23,6 +23,13 @@ import { Dispatch, MutableRefObject, RefObject, SetStateAction } from "react";
 import { useEditorController } from "../hooks/useEditorController";
 import { ThemeDefinition } from "@notesnook/theme";

+globalThis.pendingResolvers = {};
+export function randId(prefix: string) {
+  return Math.random()
+    .toString(36)
+    .replace("0.", prefix || "");
+}
+
 export type SafeAreaType = {
  top: number;
  left: number;
@@ -49,6 +56,9 @@ export type Settings = {

 /* eslint-disable no-var */
 declare global {
+  var pendingResolvers: {
+    [key: string]: (value: any) => void;
+  };
  var statusBar: React.MutableRefObject<{
    set: React.Dispatch<
      React.SetStateAction<{
@@ -154,7 +164,8 @@ export const EventTypes = {
  contentchange: "editor-event:content-change",
  reminders: "editor-event:reminders",
  previewAttachment: "editor-event:preview-attachment",
-  copyToClipboard: "editor-events:copy-to-clipboard"
+  copyToClipboard: "editor-events:copy-to-clipboard",
+  getAttachmentData: "editor-events:get-attachment-data"
 } as const;

 export function isReactNative(): boolean {
--- a/packages/editor/styles/styles.css
+++ b/packages/editor/styles/styles.css
@@ -577,6 +577,16 @@ p > *::selection {
  pointer-events: none;
 }

+.ProseMirror > p[data-spacing="double"] .resizer {
+  margin-bottom: 1em;
+}
+
+.ProseMirror > p[data-spacing="single"] .resizer {
+  margin-top: 1em !important;
+  margin-bottom: 1em;
+}
+
+
 /* RTL */

 [dir="rtl"] * {