editor: allow attaching image as file (#8752)

* editor: allow attaching image as file
Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>

* web: fix image previews for regular attachments

* mobile: allow images to be added as attachment without preview

* web: minor refactor
Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>

---------

Co-authored-by: Ammar Ahmed <ammarahmed6506@gmail.com>

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

@@ -126,30 +126,16 @@ const file = async (fileOptions: PickerOptions) => {
       useTabStore.getState().getNoteIdForTab(fileOptions.tabId) ===
         fileOptions.noteId
     ) {
-      if (isImage(file.type || "application/octet-stream")) {
+      editorController.current?.commands.insertAttachment(
-        editorController.current?.commands.insertImage(
+        {
-          {
+          hash: hash,
-            hash: hash,
+          filename: fileName,
-            filename: fileName,
+          mime: file.type || "application/octet-stream",
-            mime: file.type || "application/octet-stream",
+          size: file.size || 0,
-            size: file.size || 0,
+          type: "file"
-            dataurl: (await db.attachments.read(hash, "base64")) as string,
+        },
-            type: "image"
+        fileOptions.tabId
-          },
+      );
-          fileOptions.tabId
-        );
-      } else {
-        editorController.current?.commands.insertAttachment(
-          {
-            hash: hash,
-            filename: fileName,
-            mime: file.type || "application/octet-stream",
-            size: file.size || 0,
-            type: "file"
-          },
-          fileOptions.tabId
-        );
-      }
     } else {
       throw new Error("Failed to attach file, no tabId is set");
     }

apps/web/src/components/editor/index.tsx

@@ -571,9 +571,9 @@ export function Editor(props: EditorProps) {
         onChange={onSave}
         onDownloadAttachment={(attachment) => saveAttachment(attachment.hash)}
         onPreviewAttachment={async (data) => {
-          const { hash, type } = data;
+          const { hash, type, mime } = data;
           const attachment = await db.attachments.attachment(hash);
-          if (attachment && type === "image") {
+          if (attachment && mime.startsWith("image/")) {
             await previewImageAttachment(attachment);
           } else if (
             attachment &&

apps/web/src/components/editor/picker.ts

@@ -42,10 +42,13 @@ export async function insertAttachments(type = "*/*") {
     multiple: true
   });
   if (!files) return;
-  return await attachFiles(files);
+  return await attachFiles(files, type === "*/*");
 }
 
-export async function attachFiles(files: File[]) {
+export async function attachFiles(
+  files: File[],
+  skipSpecialImageHandling = false
+) {
   let images = files.filter((f) => f.type.startsWith("image/"));
   const imageCompressionConfig = Config.get<ImageCompressionOptions>(
     "imageCompression",
@@ -87,7 +90,7 @@ export async function attachFiles(files: File[]) {
   const documents = files.filter((f) => !f.type.startsWith("image/"));
   const attachments: Attachment[] = [];
   for (const file of [...images, ...documents]) {
-    const attachment = file.type.startsWith("image/")
+    const attachment = !skipSpecialImageHandling && file.type.startsWith("image/")
       ? await pickImage(file)
       : await pickFile(file);
     if (!attachment) continue;

packages/editor/src/toolbar/tools/attachment.tsx

@@ -102,7 +102,7 @@ export function RemoveAttachment(props: ToolProps) {
 }
 
 const previewableFileExtensions = ["pdf"];
-const previewableMimeTypes = ["application/pdf"];
+const previewableMimeTypes = ["application/pdf", "image/"];
 
 function canPreviewAttachment(attachment: Attachment) {
   if (!attachment) return false;