add draggable audio file

Author: thooyork

client/src/components/AudioPreview.vue

@@ -1,8 +1,8 @@
-<template>
+ <template>
   <div class="preview-container">
     <div class="erase" @click="$emit('delete')" :title="t('app.base.delete_audio')"></div>
     <div class="audio-container">
-      <div class="audio-icon">
+      <div class="audio-icon" v-on:dragstart="onDragStart($event)" :draggable="showPaste">
         <fa-icon :icon="faMusic" />
       </div>
     </div>
@@ -117,6 +117,20 @@
     font-size: 2rem;
     transition-duration: 0.3s;
 
+    &[draggable="true"] {
+      cursor: move;
+      /* fallback if grab cursor is unsupported */
+      cursor: grab;
+      cursor: -moz-grab;
+      cursor: -webkit-grab;
+
+      &:active {
+        cursor: grabbing;
+        cursor: -moz-grabbing;
+        cursor: -webkit-grabbing;
+      }
+    }
+
     &:hover {
       background-color: #dee2e6;
       border-color: #495057;
@@ -160,7 +174,15 @@ import { convertToHumanReadableFileSize, escapeMarkdownAltText } from "@fumix/fu
 import type { PropType } from "vue";
 
 const getMarkdownString = () => {
-  return `![${escapeMarkdownAltText(props.value.name)}](${props.hash})`;
+  return `![audio:${escapeMarkdownAltText(props.value.name)}](${props.hash})`;
+};
+
+const onDragStart = (event: DragEvent) => {
+  if (props.showPaste) {
+    const audioIcon = event.target as HTMLElement;
+    event.dataTransfer?.setDragImage(audioIcon, 0, 0);
+    event.dataTransfer?.setData("text/plain", getMarkdownString());
+  }
 };
 
 const props = defineProps({

client/src/views/PostFormView.vue

@@ -409,24 +409,25 @@ const pasteImageFileToMarkdown = (markdown: string, insertPosition: SupportedIns
   form.markdown = insertIntoTextarea(markdown, markdownArea.value as unknown as HTMLTextAreaElement, insertPosition);
 };
 
-const removeImageFileFromMarkdown = (file: File) => {
-  const strToRemove = `![${file.name}](${Object.keys(files).find((key) => files[key] === file)})`.trim();
-  setTimeout(() => {
-    // give the preview time to update
-    form.markdown = form.markdown.split(strToRemove).join("");
-  }, 0);
-};
-
 const pasteFileToMarkdown = (markdown: string, insertPosition: SupportedInsertPositionType = "afterCursor") => {
   form.markdown = insertIntoTextarea(markdown, markdownArea.value as unknown as HTMLTextAreaElement, insertPosition);
 };
 
 const removeFileFromMarkdown = (file: File) => {
-  const strToRemove = `![${file.name}](${Object.keys(files).find((key) => files[key] === file)})`.trim();
-  setTimeout(() => {
-    // give the preview time to update
-    form.markdown = form.markdown.split(strToRemove).join("");
-  }, 0);
+  const fileHash = Object.keys(files).find((key) => files[key] === file);
+  if (isImageFile(file)) {
+    const strToRemove = `![${file.name}](${fileHash})`.trim();
+    setTimeout(() => {
+      // give the preview time to update
+      form.markdown = form.markdown.split(strToRemove).join("");
+    }, 0);
+  } else if (isAudioFile(file)) {
+    const strToRemove = `![audio:${file.name}](${fileHash})`.trim();
+    setTimeout(() => {
+      // give the preview time to update
+      form.markdown = form.markdown.split(strToRemove).join("");
+    }, 0);
+  }
 };
 
 const isImageFile = (file: File): boolean => {

common/src/markdown-converter-common.ts

@@ -109,16 +109,22 @@ export abstract class MarkdownConverter {
           token.escaped = true;
         }
       },
-      // renderer: {
-      //   image(href, title, text) {
-      //     // Check if the href is a data URL for an audio file
-      //     if (href && href.startsWith('data:audio/')) {
-      //       return `<audio controls><source src="${href}" type="${href.split(';')[0].split(':')[1]}">Your browser does not support the audio element.</audio>`;
-      //     }
-      //     // Default image rendering
-      //     return `<img src="${href}" alt="${text || ''}" title="${title || ''}">`;
-      //   }
-      // }
+      renderer: {
+        image({ href, title, text }: Tokens.Image) {
+          // Check if this is an audio file (marked with audio: prefix)
+          if (text && text.startsWith('audio:')) {
+            const audioName = text.substring(6); // Remove 'audio:' prefix
+            // Determine audio type from href if it's a data URL
+            let audioType = "audio/mpeg"; // default
+            if (href && href.startsWith('data:audio/')) {
+              audioType = href.split(';')[0].split(':')[1];
+            }
+            return `<audio controls><source src="${href}" type="${audioType}">Your browser does not support the audio element.</audio>`;
+          }
+          // Default image rendering
+          return `<img src="${href}" alt="${text || ''}" title="${title || ''}">`;
+        }
+      }
     });
     marked.use(MarkdownConverter.rendererExtension);
     marked.use(