editor: handle attachments based on mime type

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

@@ -87,12 +87,9 @@ export async function attachFiles(
           : [];
   }
 
-  const documents = files.filter(
-    (f) => !f.type.startsWith("image/") && !f.type.startsWith("audio/")
-  );
-  const audios = files.filter((f) => f.type.startsWith("audio/"));
+  const documents = files.filter((f) => !f.type.startsWith("image/"));
   const attachments: Attachment[] = [];
-  for (const file of [...images, ...documents, ...audios]) {
+  for (const file of [...images, ...documents]) {
     const attachment =
       !skipSpecialImageHandling && file.type.startsWith("image/")
         ? await pickImage(file)
@@ -140,7 +137,7 @@ async function pickFile(
 
     const hash = await addAttachment(file, options);
     return {
-      type: file.type.startsWith("audio") ? "audio" : "file",
+      type: "file",
       filename: file.name,
       hash,
       mime: file.type,

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

@@ -728,8 +728,6 @@ function toIEditor(editor: Editor): IEditor {
     attachFile: (file: Attachment) =>
       file.type === "image"
         ? editor.commands.insertImage(file)
-        : file.type === "audio"
-        ? editor.commands.insertAudio(file)
         : editor.commands.insertAttachment(file),
     sendAttachmentProgress: (hash, progress) =>
       editor.commands.updateAttachment(

packages/editor/src/extensions/attachment/attachment.ts

@@ -24,6 +24,7 @@ import { AttachmentComponent } from "./component.js";
 import { Attachment } from "./types.js";
 import { tiptapKeys } from "@notesnook/common";
 import { hasPermission } from "../../types.js";
+import { AudioNode } from "../audio/audio.js";
 
 export type AttachmentType = "image" | "file" | "camera";
 export interface AttachmentOptions {
@@ -85,14 +86,7 @@ export const AttachmentNode = Node.create<AttachmentOptions>({
   parseHTML() {
     return [
       {
-        tag: "span[data-hash]",
-        getAttrs: (dom) => {
-          const element = dom as HTMLElement;
-          if (element.dataset.mime?.startsWith("audio/")) {
-            return false;
-          }
-          return {};
-        }
+        tag: "span[data-hash]"
       }
     ];
   },
@@ -128,13 +122,13 @@ export const AttachmentNode = Node.create<AttachmentOptions>({
             return commands.insertContentAt(
               $from.pos + maybeAttachmentNode.nodeSize,
               {
-                type: this.name,
+                type: mimeToExtension(attachment.mime),
                 attrs: attachment
               }
             );
           }
           return commands.insertContent({
-            type: this.name,
+            type: mimeToExtension(attachment.mime),
             attrs: attachment
           });
         },
@@ -194,6 +188,11 @@ export const AttachmentNode = Node.create<AttachmentOptions>({
   //   },
 });
 
+function mimeToExtension(mime: string): string {
+  if (mime.startsWith("audio/")) return AudioNode.name;
+  return AttachmentNode.name;
+}
+
 export function getDataAttribute(
   name: string,
   def?: unknown | null