From b16a796d020432e8a614d0eb83503f15aafec347 Mon Sep 17 00:00:00 2001
From: Thomas Haaf <thomas@smart-sign.com>
Date: Wed, 27 Aug 2025 12:21:53 +0200
Subject: [PATCH 1/6] make columns scrollable and accept webp files

---
 client/src/views/PostFormView.vue        | 228 +++++++++++------------
 common/src/dto/SupportedImageMimeType.ts |   2 +-
 2 files changed, 106 insertions(+), 124 deletions(-)

diff --git a/client/src/views/PostFormView.vue b/client/src/views/PostFormView.vue
index 26a64b8..561fbb1 100644
--- a/client/src/views/PostFormView.vue
+++ b/client/src/views/PostFormView.vue
@@ -1,139 +1,109 @@
 <template>
-  <div v-if="!postHasError" class="container">
-    <div class="row mb-2">
-      <div class="col w-50">
-        <div class="card flex-md-row mb-4 box-shadow h-md-250">
-          <div class="card-body">
-            <form @submit="submitForm($event)">
-              <div class="form-floating mb-3">
-                <input v-model="form.title" type="text" class="form-control" id="title" placeholder="Titel" required />
-                <label for="title">{{ t("posts.form.title") }}</label>
-              </div>
+  <div v-if="!postHasError" class="container-fluid">
+    <div class="row">
+      <div class="col-10 offset-1">
+
+
+        <div class="row mb-2">
+          <div class="col w-50 formCol">
+            <div class="card flex-md-row mb-4 box-shadow h-md-250">
+              <div class="card-body">
+                <form @submit="submitForm($event)">
+                  <div class="form-floating mb-3">
+                    <input v-model="form.title" type="text" class="form-control" id="title" placeholder="Titel"
+                      required />
+                    <label for="title">{{ t("posts.form.title") }}</label>
+                  </div>
 
-              <div class="form-floating mb-3">
-                <textarea
-                  v-model="form.description"
-                  style="overflow-y: scroll; height: 6rem"
-                  class="form-control"
-                  id="description"
-                ></textarea>
-                <label for="description">{{ t("posts.form.description") }}</label>
-              </div>
+                  <div class="form-floating mb-3">
+                    <textarea v-model="form.description" style="overflow-y: scroll; height: 6rem" class="form-control"
+                      id="description"></textarea>
+                    <label for="description">{{ t("posts.form.description") }}</label>
+                  </div>
 
-              <div class="form-floating mb-3">
-                <label for="stringTags">{{ t("posts.form.tags.tags") }}</label>
-                <vue-tags-input
-                  v-model="tag"
-                  :tags="tags"
-                  :autocomplete-items="tagList"
-                  :placeholder="t('posts.form.tags.enter')"
-                  @tags-changed="handleTagsChanged"
-                  @input="handleAutocompletion"
-                  @before-adding-tag="checkTag"
-                />
-              </div>
+                  <div class="form-floating mb-3">
+                    <label for="stringTags">{{ t("posts.form.tags.tags") }}</label>
+                    <vue-tags-input v-model="tag" :tags="tags" :autocomplete-items="tagList"
+                      :placeholder="t('posts.form.tags.enter')" @tags-changed="handleTagsChanged"
+                      @input="handleAutocompletion" @before-adding-tag="checkTag" />
+                  </div>
 
-              <div class="mb-3">
-                <ai-summaries
-                  :full-text="form.markdown"
-                  :onSetDescription="setDescription"
-                  :onAddTag="addTag"
-                  :onSetKeyvisual="setKeyvisual"
-                ></ai-summaries>
-              </div>
+                  <div class="mb-3">
+                    <ai-summaries :full-text="form.markdown" :onSetDescription="setDescription" :onAddTag="addTag"
+                      :onSetKeyvisual="setKeyvisual"></ai-summaries>
+                  </div>
 
-              <div class="form-floating mb-3">
-                <textarea
-                  v-model="form.markdown"
-                  class="form-control md-area"
-                  placeholder="Blogpost"
-                  ref="markdownArea"
-                  style="height: 40vh; min-height: 200px"
-                  aria-describedby="markdownHelp"
-                  required
-                ></textarea>
-                <label for="markdown">{{ t("posts.form.message.label") }}</label>
-                <div id="markdownHelp" class="form-text">{{ t("posts.form.message.hint") }}</div>
-              </div>
+                  <div class="form-floating mb-3">
+                    <textarea v-model="form.markdown" class="form-control md-area" placeholder="Blogpost"
+                      ref="markdownArea" style="height: 40vh; min-height: 200px" aria-describedby="markdownHelp"
+                      required></textarea>
+                    <label for="markdown">{{ t("posts.form.message.label") }}</label>
+                    <div id="markdownHelp" class="form-text">{{ t("posts.form.message.hint") }}</div>
+                  </div>
 
-              <div class="form-check form-switch">
-                <input v-model="form.draft" class="form-check-input" type="checkbox" id="draft" />
-                <label class="form-check-label" for="draft">{{ t("posts.form.draft") }}</label>
-              </div>
+                  <div class="form-check form-switch">
+                    <input v-model="form.draft" class="form-check-input" type="checkbox" id="draft" />
+                    <label class="form-check-label" for="draft">{{ t("posts.form.draft") }}</label>
+                  </div>
 
-              <div class="form-floating mb-3 uploadCard">
-                <h4>
-                  {{ tc("posts.form.imageupload", Object.keys(files).length) }}
-                  <small class="text-body-secondary f-4" v-if="Object.keys(files).length > 0">
-                    ({{ convertToHumanReadableFileSize(totalBytesInFiles) }})
-                  </small>
-
-                  <span class="tiny">{{ t("posts.form.imageupload_hint") }}</span>
-                </h4>
-                <!-- Hidden file input, used to open the file dialog, when the dropzone is clicked -->
-                <input
-                  style="display: none"
-                  type="file"
-                  id="file"
-                  multiple
-                  v-on:change="handleFileChange($event)"
-                  accept=".png, .gif, .jpg, .jpeg, image/png, image/jpeg, image/gif"
-                />
-
-                <div class="imagesPreviewContaier" v-if="Object.keys(files).length">
-                  <div class="inner">
-                    <Suspense v-for="hash in Object.keys(files).reverse()" v-bind:key="hash">
-                      <ImagePreview
-                        :value="files[hash]"
-                        :hash="hash"
-                        @paste="pasteImageFileToMarkdown($event, 'afterCursor')"
-                        @delete="
-                          removeImageFileFromMarkdown(files[hash]);
-                          delete files[hash];
-                        "
-                        @softdelete="removeImageFileFromMarkdown(files[hash])"
-                      >
-                      </ImagePreview>
-                    </Suspense>
+                  <div class="form-floating mb-3 uploadCard">
+                    <h4>
+                      {{ tc("posts.form.imageupload", Object.keys(files).length) }}
+                      <small class="text-body-secondary f-4" v-if="Object.keys(files).length > 0">
+                        ({{ convertToHumanReadableFileSize(totalBytesInFiles) }})
+                      </small>
+
+                      <span class="tiny">{{ t("posts.form.imageupload_hint") }}</span>
+                    </h4>
+                    <!-- Hidden file input, used to open the file dialog, when the dropzone is clicked -->
+                    <input style="display: none" type="file" id="file" multiple v-on:change="handleFileChange($event)"
+                      accept=".png, .gif, .jpg, .jpeg, .webp,image/png, image/jpeg, image/gif, image/webp" />
+
+                    <div class="imagesPreviewContaier" v-if="Object.keys(files).length">
+                      <div class="inner">
+                        <Suspense v-for="hash in Object.keys(files).reverse()" v-bind:key="hash">
+                          <ImagePreview :value="files[hash]" :hash="hash"
+                            @paste="pasteImageFileToMarkdown($event, 'afterCursor')" @delete="
+                              removeImageFileFromMarkdown(files[hash]);
+                            delete files[hash];
+                            " @softdelete="removeImageFileFromMarkdown(files[hash])">
+                          </ImagePreview>
+                        </Suspense>
+                      </div>
+                    </div>
+
+                    <div id="dropzone" v-on:click="openFileDialog()" v-on:drop="handleFileChange($event)"
+                      v-on:dragover="highlightDropzone($event, true)" v-on:dragleave="highlightDropzone($event, false)"
+                      :class="{ active: dropzoneHighlight }">
+                      <div class="plus"><fa-icon :icon="faUpload"></fa-icon></div>
+                      <span class="label" v-if="dropzoneHighlight">Dateien fallen lassen</span>
+                      <span class="label" v-else>Neue Dateien hierher ziehen oder hier klicken um Dateien
+                        auszuwählen</span>
+                    </div>
                   </div>
-                </div>
 
-                <div
-                  id="dropzone"
-                  v-on:click="openFileDialog()"
-                  v-on:drop="handleFileChange($event)"
-                  v-on:dragover="highlightDropzone($event, true)"
-                  v-on:dragleave="highlightDropzone($event, false)"
-                  :class="{ active: dropzoneHighlight }"
-                >
-                  <div class="plus"><fa-icon :icon="faUpload"></fa-icon></div>
-                  <span class="label" v-if="dropzoneHighlight">Dateien fallen lassen</span>
-                  <span class="label" v-else>Neue Dateien hierher ziehen oder hier klicken um Dateien auszuwählen</span>
-                </div>
+                  <button type="submit" class="btn btn-sm btn-primary float-end">{{ t("app.base.save") }}</button>
+                  <button type="button" class="btn btn-sm btn-secondary float-end mx-3" @click="router.go(-1)">
+                    {{ t("app.base.cancel") }}
+                  </button>
+                </form>
               </div>
-
-              <button type="submit" class="btn btn-sm btn-primary float-end">{{ t("app.base.save") }}</button>
-              <button type="button" class="btn btn-sm btn-secondary float-end mx-3" @click="router.go(-1)">
-                {{ t("app.base.cancel") }}
-              </button>
-            </form>
+            </div>
           </div>
-        </div>
-      </div>
 
-      <div class="col w-50">
-        <h2 class="display-6">{{ (form?.title?.length ?? 0) > 0 ? form?.title : t("posts.form.preview.title") }}</h2>
-        <div class="card flex-md-row mb-4 box-shadow h-md-250">
-          <div class="card-body" style="max-width: 100%">
-            <div v-if="loading" style="position: absolute; width: 100%; margin-top: 10vh; text-align: center" class="text-primary">
-              <loading-spinner />
+          <div class="col w-50 previewCol">
+            <h2 class="display-6">{{ (form?.title?.length ?? 0) > 0 ? form?.title : t("posts.form.preview.title") }}
+            </h2>
+            <div class="card flex-md-row mb-4 box-shadow h-md-250">
+              <div class="card-body" style="max-width: 100%">
+                <div v-if="loading" style="position: absolute; width: 100%; margin-top: 10vh; text-align: center"
+                  class="text-primary">
+                  <loading-spinner />
+                </div>
+                <mark-down :markdown="md" v-bind:custom-image-urls="files" @loading="loading = $event"
+                  :style="loading ? 'opacity:0.2' : 'opacity:1'"></mark-down>
+              </div>
             </div>
-            <mark-down
-              :markdown="md"
-              v-bind:custom-image-urls="files"
-              @loading="loading = $event"
-              :style="loading ? 'opacity:0.2' : 'opacity:1'"
-            ></mark-down>
           </div>
         </div>
       </div>
@@ -147,6 +117,7 @@
   font-size: 0.75rem;
   color: #6c757d;
 }
+
 .post-bg {
   background-image: url("@client/assets/images/post-bg.jpg");
   background-repeat: no-repeat;
@@ -158,6 +129,16 @@
   width: 50%;
 }
 
+.formCol {
+  overflow-y: scroll;
+  max-height: calc(100vh - 130px);
+}
+
+.previewCol {
+  overflow-y: scroll;
+  max-height: calc(100vh - 130px); // height of the navbar plus offset
+}
+
 .uploadCard {
   border: 1px solid #404040;
   border-radius: 0.375rem;
@@ -295,6 +276,7 @@
   }
 
   @keyframes shake {
+
     10%,
     90% {
       transform: scale(0.9) translate3d(-1px, 0, 0);
diff --git a/common/src/dto/SupportedImageMimeType.ts b/common/src/dto/SupportedImageMimeType.ts
index 5205012..163211c 100644
--- a/common/src/dto/SupportedImageMimeType.ts
+++ b/common/src/dto/SupportedImageMimeType.ts
@@ -2,6 +2,6 @@
  * The supported MIME types for attachments (for now).
  * Currently they can also all be auto-determined by the magic bytes.
  */
-export type SupportedImageMimeType = `image/${"png" | "jpeg" | "gif" | "bmp"}`;
+export type SupportedImageMimeType = `image/${"png" | "jpeg" | "gif" | "bmp" | "webp" | "mp3"}`;
 
 export type JsonMimeType = "application/json";

From 891d632d4257a9b533a93a1848f69b836e23b70b Mon Sep 17 00:00:00 2001
From: Thomas Haaf <thomas@smart-sign.com>
Date: Wed, 27 Aug 2025 13:16:01 +0200
Subject: [PATCH 2/6] revert mimetype

---
 common/src/dto/SupportedImageMimeType.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/common/src/dto/SupportedImageMimeType.ts b/common/src/dto/SupportedImageMimeType.ts
index 163211c..5205012 100644
--- a/common/src/dto/SupportedImageMimeType.ts
+++ b/common/src/dto/SupportedImageMimeType.ts
@@ -2,6 +2,6 @@
  * The supported MIME types for attachments (for now).
  * Currently they can also all be auto-determined by the magic bytes.
  */
-export type SupportedImageMimeType = `image/${"png" | "jpeg" | "gif" | "bmp" | "webp" | "mp3"}`;
+export type SupportedImageMimeType = `image/${"png" | "jpeg" | "gif" | "bmp"}`;
 
 export type JsonMimeType = "application/json";

From 201da93b7fdbd28040958743554e2615a7e42fa3 Mon Sep 17 00:00:00 2001
From: Thomas Haaf <thomas@smart-sign.com>
Date: Wed, 27 Aug 2025 13:20:28 +0200
Subject: [PATCH 3/6] add audio upload

---
 client/src/components/AudioPreview.vue   | 186 +++++++++++++++++++++++
 client/src/components/MarkDown.vue       |  13 +-
 client/src/i18n/de.json                  |   8 +-
 client/src/i18n/en.json                  |   8 +-
 client/src/util/api-client.ts            |   8 +-
 client/src/views/PostFormView.vue        |  47 ++++--
 common/src/dto/SupportedImageMimeType.ts |   6 +-
 common/src/markdown-converter-common.ts  |  10 ++
 common/src/util/mimeType.ts              |  18 ++-
 server/src/entity/File.entity.ts         |   6 +-
 server/src/service/openai.ts             |   4 +-
 11 files changed, 282 insertions(+), 32 deletions(-)
 create mode 100644 client/src/components/AudioPreview.vue

diff --git a/client/src/components/AudioPreview.vue b/client/src/components/AudioPreview.vue
new file mode 100644
index 0000000..873c5a7
--- /dev/null
+++ b/client/src/components/AudioPreview.vue
@@ -0,0 +1,186 @@
+<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">
+        <fa-icon :icon="faMusic" />
+      </div>
+    </div>
+    <div class="info-container">
+      <div class="code">{{ hash.substring(0, Math.min(7, hash.length)) }} / {{ convertToHumanReadableFileSize(value.size) }}</div>
+      <strong :title="value.name">{{ value.name }}</strong>
+      <div class="button-container">
+        <button
+          class="btn btn-paste mx-1"
+          type="button"
+          v-if="showPaste"
+          @click="$emit('paste', getMarkdownString())"
+          :title="t('app.base.insert_audio')"
+        >
+          <fa-icon :icon="faFileImport"></fa-icon>
+        </button>
+        <button class="btn btn-softdelete mx-1" type="button" v-if="showDelete" @click="$emit('softdelete')" :title="t('app.base.remove')">
+          <fa-icon :icon="faEraser"></fa-icon>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped lang="scss">
+.erase {
+  width: 16px;
+  height: 16px;
+  right: -7px;
+  top: -7px;
+
+  display: block;
+  position: absolute;
+  z-index: 999;
+  background-color: #333;
+  border: 1px solid #555;
+  border-radius: 50%;
+  cursor: pointer;
+  transition-duration: 0.4s;
+
+  &:hover {
+    transition-duration: 0.4s;
+    background-color: #a00;
+  }
+
+  &:before {
+    position: absolute;
+    top: 0;
+    left: calc(50% - 3px);
+    z-index: 1000;
+    content: "\d7";
+    line-height: 12px;
+    font-size: 12px;
+    padding: 0;
+    margin: 0;
+    transform: scale(1.25);
+    color: #fff;
+    text-align: center;
+  }
+}
+
+.preview-container {
+  width: 150px;
+  margin: 0;
+  position: relative;
+  display: inline-block;
+  text-align: center;
+  background-color: #f8f9fa55;
+  border-radius: 0.375rem;
+  border: 1px solid #ccc;
+
+  .btn-paste {
+    color: #222;
+
+    &:hover {
+      color: #22222255;
+    }
+  }
+
+  .btn-softdelete {
+    color: #f18901;
+
+    &:hover {
+      color: #ffa836;
+    }
+  }
+
+  &:not(:last-child) {
+    margin-right: 15px;
+  }
+
+  .audio-container {
+    display: flex;
+    width: 148px;
+    height: auto;
+    aspect-ratio: 1/1;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    margin: 0;
+  }
+
+  .audio-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 80px;
+    height: 80px;
+    background-color: #e9ecef;
+    border: 2px solid #6c757d;
+    border-radius: 50%;
+    color: #6c757d;
+    font-size: 2rem;
+    transition-duration: 0.3s;
+
+    &:hover {
+      background-color: #dee2e6;
+      border-color: #495057;
+      color: #495057;
+    }
+  }
+
+  .info-container {
+    font-size: 0.75em;
+    margin-bottom: 7px;
+    padding-top: 5px;
+
+    strong {
+      font-weight: bold;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: clip;
+      display: block;
+      padding: 0 5px 7px 5px;
+    }
+
+    .code {
+      font-family: monospace;
+      font-size: 10px;
+      margin-bottom: 5px;
+    }
+
+    .button-container {
+      display: flex;
+      justify-content: center;
+      align-items: space-between;
+    }
+  }
+}
+</style>
+
+<script setup lang="ts">
+import { t } from "@client/plugins/i18n.js";
+import { faFileImport, faEraser, faMusic } from "@fortawesome/free-solid-svg-icons";
+import { convertToHumanReadableFileSize, escapeMarkdownAltText } from "@fumix/fu-blog-common";
+import type { PropType } from "vue";
+
+const getMarkdownString = () => {
+  return `![${escapeMarkdownAltText(props.value.name)}](${props.hash})`;
+};
+
+const props = defineProps({
+  hash: {
+    type: String,
+    required: true,
+  },
+  value: {
+    type: Object as PropType<File>,
+    required: true,
+  },
+  showDelete: {
+    type: Boolean,
+    default: true,
+  },
+  showPaste: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const emits = defineEmits(["paste", "delete", "softdelete"]);
+</script>
diff --git a/client/src/components/MarkDown.vue b/client/src/components/MarkDown.vue
index a740313..b7a0c0a 100644
--- a/client/src/components/MarkDown.vue
+++ b/client/src/components/MarkDown.vue
@@ -19,6 +19,11 @@
     max-width: 100% !important;
     height: auto !important;
   }
+
+  audio {
+    max-width: 100% !important;
+    margin: 10px 0 !important;
+  }
 }
 </style>
 
@@ -34,7 +39,7 @@ const props = defineProps({
   markdown: {
     type: String as PropType<string | null>,
   },
-  customImageUrls: {
+  customFileUrls: {
     type: Object as PropType<{ [sha256: string]: File }>,
     default: () => {},
   },
@@ -47,11 +52,11 @@ watch(props, async () => {
     emits("loading", true);
     sanitizedHtml.value = await MarkdownConverterClient.Instance.convert(props.markdown ?? "", async (token: string) => {
       if (!token || token.length < 10) {
-        return Promise.reject("Image hash too short");
+        return Promise.reject("File hash too short");
       }
-      const urls = Object.keys(props.customImageUrls).filter((it) => it.startsWith(token));
+      const urls = Object.keys(props.customFileUrls).filter((it) => it.startsWith(token));
       if (urls && urls.length === 1) {
-        const customFile = props.customImageUrls[urls[0]];
+        const customFile = props.customFileUrls[urls[0]];
         return blobToArray(customFile).then((it) => bytesToDataUrl(customFile.type, it));
       }
       return Promise.reject("No custom file found");
diff --git a/client/src/i18n/de.json b/client/src/i18n/de.json
index f5fbfb2..bea1511 100644
--- a/client/src/i18n/de.json
+++ b/client/src/i18n/de.json
@@ -24,9 +24,11 @@
       "cancel": "Abbrechen",
       "edit": "Bearbeiten",
       "insert_image": "Bild einfügen",
+      "insert_audio": "Audio einfügen",
       "delete": "Löschen",
       "delete_image": "Bild löschen",
-      "remove": "Bildrefernz aus Text entfernen",
+      "delete_audio": "Audio löschen",
+      "remove": "Dateireferenz aus Text entfernen",
       "read": "Lesen",
       "create_post": "Post erstellen",
       "roles": "Rollen",
@@ -62,8 +64,8 @@
         "tags": "Schlagworte",
         "enter": "Geben Sie Schlagworte ein..."
       },
-      "imageupload": "keine angehängten Bilder | ein angehängtes Bild | {count} angehängte Bilder",
-      "imageupload_hint": "(Bild per Drag & Drop in den Text ziehen)"
+      "fileupload": "keine angehängten Dateien | eine angehängte Datei | {count} angehängte Dateien",
+      "fileupload_hint": "(Datei per Drag & Drop in den Text ziehen)"
     },
     "confirm": {
       "title": "Löschen bestätigen",
diff --git a/client/src/i18n/en.json b/client/src/i18n/en.json
index 61729f5..15d3bed 100644
--- a/client/src/i18n/en.json
+++ b/client/src/i18n/en.json
@@ -24,8 +24,10 @@
       "cancel": "Cancel",
       "edit": "Edit",
       "insert_image": "Insert image",
+      "insert_audio": "Insert audio",
       "delete_image": "Delete image",
-      "remove": "Remove image reference from text",
+      "delete_audio": "Delete audio",
+      "remove": "Remove file reference from text",
       "read": "Read",
       "create_post": "Create Post",
       "roles": "Roles",
@@ -57,8 +59,8 @@
       "preview": {
         "title": "Preview"
       },
-      "imageupload": "Upload image",
-      "imageupload_hint": "(drag onto textarea to insert)",
+      "fileupload": "Upload files",
+      "fileupload_hint": "(drag onto textarea to insert)",
       "tags": "Tags"
     },
     "confirm": {
diff --git a/client/src/util/api-client.ts b/client/src/util/api-client.ts
index a5d954f..306d8d8 100644
--- a/client/src/util/api-client.ts
+++ b/client/src/util/api-client.ts
@@ -8,7 +8,7 @@ import type {
   LoggedInUserInfo,
   NewPostRequestDto,
   PublicPost,
-  SupportedImageMimeType,
+  SupportedFileMimeType,
 } from "@fumix/fu-blog-common";
 import { HttpHeader, imageBytesToDataUrl } from "@fumix/fu-blog-common";
 
@@ -16,8 +16,8 @@ export type ApiUrl = `/api/${string}`;
 
 async function callServer<
   RequestType,
-  ResponseMimeType extends SupportedImageMimeType | JsonMimeType,
-  ResponseType = ResponseMimeType extends JsonMimeType ? any : ResponseMimeType extends SupportedImageMimeType ? ArrayBuffer : any,
+  ResponseMimeType extends SupportedFileMimeType | JsonMimeType,
+  ResponseType = ResponseMimeType extends JsonMimeType ? any : ResponseMimeType extends SupportedFileMimeType ? ArrayBuffer : any,
 >(
   url: ApiUrl,
   method: "GET" | "POST",
@@ -101,7 +101,7 @@ export class OpenAiEndpoints {
     return callServer<string, JsonMimeType, AiSummaryData>("/api/utility/chatGptSummarize", "POST", "application/json", { json: text });
   }
   static async dallEGenerateImage(prompt: string): Promise<DataUrl> {
-    return callServer<string, SupportedImageMimeType, string>("/api/utility/dallEGenerateImage", "POST", "image/png", {
+    return callServer<string, SupportedFileMimeType, string>("/api/utility/dallEGenerateImage", "POST", "image/png", {
       json: prompt,
     })
       .then((it) => {
diff --git a/client/src/views/PostFormView.vue b/client/src/views/PostFormView.vue
index 561fbb1..b23be3b 100644
--- a/client/src/views/PostFormView.vue
+++ b/client/src/views/PostFormView.vue
@@ -48,26 +48,32 @@
 
                   <div class="form-floating mb-3 uploadCard">
                     <h4>
-                      {{ tc("posts.form.imageupload", Object.keys(files).length) }}
+                      {{ tc("posts.form.fileupload", Object.keys(files).length) }}
                       <small class="text-body-secondary f-4" v-if="Object.keys(files).length > 0">
                         ({{ convertToHumanReadableFileSize(totalBytesInFiles) }})
                       </small>
 
-                      <span class="tiny">{{ t("posts.form.imageupload_hint") }}</span>
+                      <span class="tiny">{{ t("posts.form.fileupload_hint") }}</span>
                     </h4>
                     <!-- Hidden file input, used to open the file dialog, when the dropzone is clicked -->
                     <input style="display: none" type="file" id="file" multiple v-on:change="handleFileChange($event)"
-                      accept=".png, .gif, .jpg, .jpeg, .webp,image/png, image/jpeg, image/gif, image/webp" />
+                      accept=".png, .gif, .jpg, .jpeg, .webp, .mp3, .wav, image/png, image/jpeg, image/gif, image/webp, audio/mp3, audio/wav" />
 
-                    <div class="imagesPreviewContaier" v-if="Object.keys(files).length">
+                    <div class="filesPreviewContainer" v-if="Object.keys(files).length">
                       <div class="inner">
                         <Suspense v-for="hash in Object.keys(files).reverse()" v-bind:key="hash">
-                          <ImagePreview :value="files[hash]" :hash="hash"
-                            @paste="pasteImageFileToMarkdown($event, 'afterCursor')" @delete="
-                              removeImageFileFromMarkdown(files[hash]);
+                          <ImagePreview v-if="isImageFile(files[hash])" :value="files[hash]" :hash="hash"
+                            @paste="pasteFileToMarkdown($event, 'afterCursor')" @delete="
+                              removeFileFromMarkdown(files[hash]);
                             delete files[hash];
-                            " @softdelete="removeImageFileFromMarkdown(files[hash])">
+                            " @softdelete="removeFileFromMarkdown(files[hash])">
                           </ImagePreview>
+                          <AudioPreview v-else-if="isAudioFile(files[hash])" :value="files[hash]" :hash="hash"
+                            @paste="pasteFileToMarkdown($event, 'afterCursor')" @delete="
+                              removeFileFromMarkdown(files[hash]);
+                            delete files[hash];
+                            " @softdelete="removeFileFromMarkdown(files[hash])">
+                          </AudioPreview>
                         </Suspense>
                       </div>
                     </div>
@@ -100,7 +106,7 @@
                   class="text-primary">
                   <loading-spinner />
                 </div>
-                <mark-down :markdown="md" v-bind:custom-image-urls="files" @loading="loading = $event"
+                <mark-down :markdown="md" v-bind:custom-file-urls="files" @loading="loading = $event"
                   :style="loading ? 'opacity:0.2' : 'opacity:1'"></mark-down>
               </div>
             </div>
@@ -147,7 +153,7 @@
   background-color: #dee2e6;
 }
 
-.imagesPreviewContaier {
+.filesPreviewContainer {
   width: 100%;
   max-width: 100%;
   min-width: 100%;
@@ -309,6 +315,7 @@
 
 <script setup lang="ts">
 import AiSummaries from "@client/components/AiSummaries.vue";
+import AudioPreview from "@client/components/AudioPreview.vue";
 import ImagePreview from "@client/components/ImagePreview.vue";
 import LoadingSpinner from "@client/components/LoadingSpinner.vue";
 import MarkDown from "@client/components/MarkDown.vue";
@@ -410,6 +417,26 @@ const removeImageFileFromMarkdown = (file: File) => {
   }, 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 isImageFile = (file: File): boolean => {
+  return file.type.startsWith('image/');
+};
+
+const isAudioFile = (file: File): boolean => {
+  return file.type.startsWith('audio/');
+};
+
 const openFileDialog = (): void => {
   document.getElementById("file")?.click();
 };
diff --git a/common/src/dto/SupportedImageMimeType.ts b/common/src/dto/SupportedImageMimeType.ts
index 5205012..ba3e7b5 100644
--- a/common/src/dto/SupportedImageMimeType.ts
+++ b/common/src/dto/SupportedImageMimeType.ts
@@ -1,7 +1,11 @@
 /**
- * The supported MIME types for attachments (for now).
+ * The supported MIME types for attachments.
  * Currently they can also all be auto-determined by the magic bytes.
  */
 export type SupportedImageMimeType = `image/${"png" | "jpeg" | "gif" | "bmp"}`;
 
+export type SupportedAudioMimeType = `audio/${"mp3" | "wav"}`;
+
+export type SupportedFileMimeType = SupportedImageMimeType | SupportedAudioMimeType;
+
 export type JsonMimeType = "application/json";
diff --git a/common/src/markdown-converter-common.ts b/common/src/markdown-converter-common.ts
index f2cf15e..cbe0b65 100644
--- a/common/src/markdown-converter-common.ts
+++ b/common/src/markdown-converter-common.ts
@@ -109,6 +109,16 @@ 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 || ''}">`;
+      //   }
+      // }
     });
     marked.use(MarkdownConverter.rendererExtension);
     marked.use(
diff --git a/common/src/util/mimeType.ts b/common/src/util/mimeType.ts
index 9b2783a..9bc64ee 100644
--- a/common/src/util/mimeType.ts
+++ b/common/src/util/mimeType.ts
@@ -1,4 +1,4 @@
-import { SupportedImageMimeType } from "@common/dto/SupportedImageMimeType.js";
+import { SupportedFileMimeType } from "@common/dto/SupportedImageMimeType.js";
 /** See https://en.wikipedia.org/wiki/JPEG */
 const MAGIC_JFIF_BYTES = <const>[0xff, 0xd8, 0xff];
 /** See http://libpng.org/pub/png/spec/1.2/PNG-Rationale.html#R.PNG-file-signature */
@@ -7,8 +7,15 @@ const MAGIC_PNG_BYTES = <const>[0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a];
 const MAGIC_GIF_BYTES_1 = <const>[0x47, 0x49, 0x46, 0x38, 0x39, 0x61]; // GIF89a
 const MAGIC_GIF_BYTES_2 = <const>[0x47, 0x49, 0x46, 0x38, 0x37, 0x61]; // GIF87a
 const MAGIC_BMP_BYTES = <const>[0x42, 0x4d];
+/** See https://en.wikipedia.org/wiki/MP3#File_structure */
+const MAGIC_MP3_BYTES_1 = <const>[0x49, 0x44, 0x33]; // ID3
+const MAGIC_MP3_BYTES_2 = <const>[0xff, 0xfb]; // MPEG-1 Layer 3
+const MAGIC_MP3_BYTES_3 = <const>[0xff, 0xf3]; // MPEG-1 Layer 3
+const MAGIC_MP3_BYTES_4 = <const>[0xff, 0xf2]; // MPEG-1 Layer 3
+/** See https://en.wikipedia.org/wiki/WAV#File_structure */
+const MAGIC_WAV_BYTES = <const>[0x52, 0x49, 0x46, 0x46]; // RIFF
 
-export function determineMimeType(bytes: Uint8Array | Buffer): SupportedImageMimeType | undefined {
+export function determineMimeType(bytes: Uint8Array | Buffer): SupportedFileMimeType | undefined {
   if (doMagicBytesMatch(MAGIC_JFIF_BYTES, bytes)) {
     return "image/jpeg";
   } else if (doMagicBytesMatch(MAGIC_PNG_BYTES, bytes)) {
@@ -17,6 +24,13 @@ export function determineMimeType(bytes: Uint8Array | Buffer): SupportedImageMim
     return "image/gif";
   } else if (doMagicBytesMatch(MAGIC_BMP_BYTES, bytes)) {
     return "image/bmp";
+  } else if (doMagicBytesMatch(MAGIC_MP3_BYTES_1, bytes) || 
+             doMagicBytesMatch(MAGIC_MP3_BYTES_2, bytes) || 
+             doMagicBytesMatch(MAGIC_MP3_BYTES_3, bytes) || 
+             doMagicBytesMatch(MAGIC_MP3_BYTES_4, bytes)) {
+    return "audio/mp3";
+  } else if (doMagicBytesMatch(MAGIC_WAV_BYTES, bytes)) {
+    return "audio/wav";
   }
   console.warn("Unknown file type, could not identify magic bytes", bytes.slice(0, Math.min(bytes.byteLength, 12)));
   return undefined;
diff --git a/server/src/entity/File.entity.ts b/server/src/entity/File.entity.ts
index 9d979f3..5ed763c 100644
--- a/server/src/entity/File.entity.ts
+++ b/server/src/entity/File.entity.ts
@@ -1,4 +1,4 @@
-import { determineMimeType, File, SupportedImageMimeType } from "@fumix/fu-blog-common";
+import { determineMimeType, File, SupportedFileMimeType } from "@fumix/fu-blog-common";
 import { Buffer } from "buffer";
 import * as crypto from "crypto";
 import { Column, Entity, PrimaryColumn } from "typeorm";
@@ -11,7 +11,7 @@ export class FileEntity implements File {
   sha256: string;
 
   @Column({ name: "mime_type", type: "varchar", nullable: false })
-  mimeType: SupportedImageMimeType;
+  mimeType: SupportedFileMimeType;
 
   @Column({ name: "binary_data", type: "bytea", nullable: false })
   binaryData: Buffer;
@@ -23,7 +23,7 @@ export class FileEntity implements File {
     );
   }
 
-  private constructor(sha256?: string, binaryData?: Buffer, mimeType?: SupportedImageMimeType) {
+  private constructor(sha256?: string, binaryData?: Buffer, mimeType?: SupportedFileMimeType) {
     if (sha256 === undefined && binaryData === undefined && mimeType === undefined) {
       return;
     }
diff --git a/server/src/service/openai.ts b/server/src/service/openai.ts
index a84b0e6..db2ab3d 100644
--- a/server/src/service/openai.ts
+++ b/server/src/service/openai.ts
@@ -1,4 +1,4 @@
-import { AiSummaryData, base64ToBuffer, determineMimeType, SupportedImageMimeType } from "@fumix/fu-blog-common";
+import { AiSummaryData, base64ToBuffer, determineMimeType, SupportedFileMimeType } from "@fumix/fu-blog-common";
 import console from "console";
 import OpenAI from "openai";
 import logger from "../logger.js";
@@ -8,7 +8,7 @@ const openai = new OpenAI({
   apiKey: OpenAISettings.API_KEY,
 });
 
-export async function dallEGenerateImage(prompt: string): Promise<[SupportedImageMimeType, Buffer]> {
+export async function dallEGenerateImage(prompt: string): Promise<[SupportedFileMimeType, Buffer]> {
   console.log("Create image");
   return openai.images
     .generate({

From a67beccbc5a080a08e1d7cac883a0332a734bcfa Mon Sep 17 00:00:00 2001
From: Thomas Haaf <thomas@smart-sign.com>
Date: Wed, 27 Aug 2025 13:56:44 +0200
Subject: [PATCH 4/6] add draggable audio file

---
 client/src/components/AudioPreview.vue  | 28 ++++++++++++++++++++++---
 client/src/views/PostFormView.vue       | 27 ++++++++++++------------
 common/src/markdown-converter-common.ts | 26 ++++++++++++++---------
 3 files changed, 55 insertions(+), 26 deletions(-)

diff --git a/client/src/components/AudioPreview.vue b/client/src/components/AudioPreview.vue
index 873c5a7..706778c 100644
--- a/client/src/components/AudioPreview.vue
+++ b/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({
diff --git a/client/src/views/PostFormView.vue b/client/src/views/PostFormView.vue
index b23be3b..18d0cc1 100644
--- a/client/src/views/PostFormView.vue
+++ b/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 => {
diff --git a/common/src/markdown-converter-common.ts b/common/src/markdown-converter-common.ts
index cbe0b65..9356034 100644
--- a/common/src/markdown-converter-common.ts
+++ b/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(

From 516a6ffe6a2d93c7c8ca107b98bee86aeea01038 Mon Sep 17 00:00:00 2001
From: Thomas Haaf <thomas@smart-sign.com>
Date: Wed, 27 Aug 2025 14:06:13 +0200
Subject: [PATCH 5/6] fix linting issues

---
 client/src/components/AudioPreview.vue  |   2 +-
 client/src/util/storage.ts              |   2 -
 client/src/views/PostFormView.vue       | 116 ++++++++++++++++--------
 common/src/markdown-converter-common.ts |  12 +--
 common/src/util/mimeType.ts             |  10 +-
 5 files changed, 91 insertions(+), 51 deletions(-)

diff --git a/client/src/components/AudioPreview.vue b/client/src/components/AudioPreview.vue
index 706778c..29a7ca1 100644
--- a/client/src/components/AudioPreview.vue
+++ b/client/src/components/AudioPreview.vue
@@ -1,4 +1,4 @@
- <template>
+<template>
   <div class="preview-container">
     <div class="erase" @click="$emit('delete')" :title="t('app.base.delete_audio')"></div>
     <div class="audio-container">
diff --git a/client/src/util/storage.ts b/client/src/util/storage.ts
index b66764c..d80a3f3 100644
--- a/client/src/util/storage.ts
+++ b/client/src/util/storage.ts
@@ -80,8 +80,6 @@ export function loadCssPreference(): UserTheme {
   );
 }
 
-
-
 //
 // General purpose helper functions, should only be called indirectly
 //
diff --git a/client/src/views/PostFormView.vue b/client/src/views/PostFormView.vue
index 18d0cc1..ed94a01 100644
--- a/client/src/views/PostFormView.vue
+++ b/client/src/views/PostFormView.vue
@@ -2,41 +2,58 @@
   <div v-if="!postHasError" class="container-fluid">
     <div class="row">
       <div class="col-10 offset-1">
-
-
         <div class="row mb-2">
           <div class="col w-50 formCol">
             <div class="card flex-md-row mb-4 box-shadow h-md-250">
               <div class="card-body">
                 <form @submit="submitForm($event)">
                   <div class="form-floating mb-3">
-                    <input v-model="form.title" type="text" class="form-control" id="title" placeholder="Titel"
-                      required />
+                    <input v-model="form.title" type="text" class="form-control" id="title" placeholder="Titel" required />
                     <label for="title">{{ t("posts.form.title") }}</label>
                   </div>
 
                   <div class="form-floating mb-3">
-                    <textarea v-model="form.description" style="overflow-y: scroll; height: 6rem" class="form-control"
-                      id="description"></textarea>
+                    <textarea
+                      v-model="form.description"
+                      style="overflow-y: scroll; height: 6rem"
+                      class="form-control"
+                      id="description"
+                    ></textarea>
                     <label for="description">{{ t("posts.form.description") }}</label>
                   </div>
 
                   <div class="form-floating mb-3">
                     <label for="stringTags">{{ t("posts.form.tags.tags") }}</label>
-                    <vue-tags-input v-model="tag" :tags="tags" :autocomplete-items="tagList"
-                      :placeholder="t('posts.form.tags.enter')" @tags-changed="handleTagsChanged"
-                      @input="handleAutocompletion" @before-adding-tag="checkTag" />
+                    <vue-tags-input
+                      v-model="tag"
+                      :tags="tags"
+                      :autocomplete-items="tagList"
+                      :placeholder="t('posts.form.tags.enter')"
+                      @tags-changed="handleTagsChanged"
+                      @input="handleAutocompletion"
+                      @before-adding-tag="checkTag"
+                    />
                   </div>
 
                   <div class="mb-3">
-                    <ai-summaries :full-text="form.markdown" :onSetDescription="setDescription" :onAddTag="addTag"
-                      :onSetKeyvisual="setKeyvisual"></ai-summaries>
+                    <ai-summaries
+                      :full-text="form.markdown"
+                      :onSetDescription="setDescription"
+                      :onAddTag="addTag"
+                      :onSetKeyvisual="setKeyvisual"
+                    ></ai-summaries>
                   </div>
 
                   <div class="form-floating mb-3">
-                    <textarea v-model="form.markdown" class="form-control md-area" placeholder="Blogpost"
-                      ref="markdownArea" style="height: 40vh; min-height: 200px" aria-describedby="markdownHelp"
-                      required></textarea>
+                    <textarea
+                      v-model="form.markdown"
+                      class="form-control md-area"
+                      placeholder="Blogpost"
+                      ref="markdownArea"
+                      style="height: 40vh; min-height: 200px"
+                      aria-describedby="markdownHelp"
+                      required
+                    ></textarea>
                     <label for="markdown">{{ t("posts.form.message.label") }}</label>
                     <div id="markdownHelp" class="form-text">{{ t("posts.form.message.hint") }}</div>
                   </div>
@@ -56,35 +73,57 @@
                       <span class="tiny">{{ t("posts.form.fileupload_hint") }}</span>
                     </h4>
                     <!-- Hidden file input, used to open the file dialog, when the dropzone is clicked -->
-                    <input style="display: none" type="file" id="file" multiple v-on:change="handleFileChange($event)"
-                      accept=".png, .gif, .jpg, .jpeg, .webp, .mp3, .wav, image/png, image/jpeg, image/gif, image/webp, audio/mp3, audio/wav" />
+                    <input
+                      style="display: none"
+                      type="file"
+                      id="file"
+                      multiple
+                      v-on:change="handleFileChange($event)"
+                      accept=".png, .gif, .jpg, .jpeg, .webp, .mp3, .wav, image/png, image/jpeg, image/gif, image/webp, audio/mp3, audio/wav"
+                    />
 
                     <div class="filesPreviewContainer" v-if="Object.keys(files).length">
                       <div class="inner">
                         <Suspense v-for="hash in Object.keys(files).reverse()" v-bind:key="hash">
-                          <ImagePreview v-if="isImageFile(files[hash])" :value="files[hash]" :hash="hash"
-                            @paste="pasteFileToMarkdown($event, 'afterCursor')" @delete="
+                          <ImagePreview
+                            v-if="isImageFile(files[hash])"
+                            :value="files[hash]"
+                            :hash="hash"
+                            @paste="pasteFileToMarkdown($event, 'afterCursor')"
+                            @delete="
                               removeFileFromMarkdown(files[hash]);
-                            delete files[hash];
-                            " @softdelete="removeFileFromMarkdown(files[hash])">
+                              delete files[hash];
+                            "
+                            @softdelete="removeFileFromMarkdown(files[hash])"
+                          >
                           </ImagePreview>
-                          <AudioPreview v-else-if="isAudioFile(files[hash])" :value="files[hash]" :hash="hash"
-                            @paste="pasteFileToMarkdown($event, 'afterCursor')" @delete="
+                          <AudioPreview
+                            v-else-if="isAudioFile(files[hash])"
+                            :value="files[hash]"
+                            :hash="hash"
+                            @paste="pasteFileToMarkdown($event, 'afterCursor')"
+                            @delete="
                               removeFileFromMarkdown(files[hash]);
-                            delete files[hash];
-                            " @softdelete="removeFileFromMarkdown(files[hash])">
+                              delete files[hash];
+                            "
+                            @softdelete="removeFileFromMarkdown(files[hash])"
+                          >
                           </AudioPreview>
                         </Suspense>
                       </div>
                     </div>
 
-                    <div id="dropzone" v-on:click="openFileDialog()" v-on:drop="handleFileChange($event)"
-                      v-on:dragover="highlightDropzone($event, true)" v-on:dragleave="highlightDropzone($event, false)"
-                      :class="{ active: dropzoneHighlight }">
+                    <div
+                      id="dropzone"
+                      v-on:click="openFileDialog()"
+                      v-on:drop="handleFileChange($event)"
+                      v-on:dragover="highlightDropzone($event, true)"
+                      v-on:dragleave="highlightDropzone($event, false)"
+                      :class="{ active: dropzoneHighlight }"
+                    >
                       <div class="plus"><fa-icon :icon="faUpload"></fa-icon></div>
                       <span class="label" v-if="dropzoneHighlight">Dateien fallen lassen</span>
-                      <span class="label" v-else>Neue Dateien hierher ziehen oder hier klicken um Dateien
-                        auszuwählen</span>
+                      <span class="label" v-else>Neue Dateien hierher ziehen oder hier klicken um Dateien auszuwählen</span>
                     </div>
                   </div>
 
@@ -98,16 +137,18 @@
           </div>
 
           <div class="col w-50 previewCol">
-            <h2 class="display-6">{{ (form?.title?.length ?? 0) > 0 ? form?.title : t("posts.form.preview.title") }}
-            </h2>
+            <h2 class="display-6">{{ (form?.title?.length ?? 0) > 0 ? form?.title : t("posts.form.preview.title") }}</h2>
             <div class="card flex-md-row mb-4 box-shadow h-md-250">
               <div class="card-body" style="max-width: 100%">
-                <div v-if="loading" style="position: absolute; width: 100%; margin-top: 10vh; text-align: center"
-                  class="text-primary">
+                <div v-if="loading" style="position: absolute; width: 100%; margin-top: 10vh; text-align: center" class="text-primary">
                   <loading-spinner />
                 </div>
-                <mark-down :markdown="md" v-bind:custom-file-urls="files" @loading="loading = $event"
-                  :style="loading ? 'opacity:0.2' : 'opacity:1'"></mark-down>
+                <mark-down
+                  :markdown="md"
+                  v-bind:custom-file-urls="files"
+                  @loading="loading = $event"
+                  :style="loading ? 'opacity:0.2' : 'opacity:1'"
+                ></mark-down>
               </div>
             </div>
           </div>
@@ -282,7 +323,6 @@
   }
 
   @keyframes shake {
-
     10%,
     90% {
       transform: scale(0.9) translate3d(-1px, 0, 0);
@@ -431,11 +471,11 @@ const removeFileFromMarkdown = (file: File) => {
 };
 
 const isImageFile = (file: File): boolean => {
-  return file.type.startsWith('image/');
+  return file.type.startsWith("image/");
 };
 
 const isAudioFile = (file: File): boolean => {
-  return file.type.startsWith('audio/');
+  return file.type.startsWith("audio/");
 };
 
 const openFileDialog = (): void => {
diff --git a/common/src/markdown-converter-common.ts b/common/src/markdown-converter-common.ts
index 9356034..2bbb4aa 100644
--- a/common/src/markdown-converter-common.ts
+++ b/common/src/markdown-converter-common.ts
@@ -112,19 +112,19 @@ export abstract class MarkdownConverter {
       renderer: {
         image({ href, title, text }: Tokens.Image) {
           // Check if this is an audio file (marked with audio: prefix)
-          if (text && text.startsWith('audio:')) {
+          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];
+            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 || ''}">`;
-        }
-      }
+          return `<img src="${href}" alt="${text || ""}" title="${title || ""}">`;
+        },
+      },
     });
     marked.use(MarkdownConverter.rendererExtension);
     marked.use(
diff --git a/common/src/util/mimeType.ts b/common/src/util/mimeType.ts
index 9bc64ee..a707e08 100644
--- a/common/src/util/mimeType.ts
+++ b/common/src/util/mimeType.ts
@@ -24,10 +24,12 @@ export function determineMimeType(bytes: Uint8Array | Buffer): SupportedFileMime
     return "image/gif";
   } else if (doMagicBytesMatch(MAGIC_BMP_BYTES, bytes)) {
     return "image/bmp";
-  } else if (doMagicBytesMatch(MAGIC_MP3_BYTES_1, bytes) || 
-             doMagicBytesMatch(MAGIC_MP3_BYTES_2, bytes) || 
-             doMagicBytesMatch(MAGIC_MP3_BYTES_3, bytes) || 
-             doMagicBytesMatch(MAGIC_MP3_BYTES_4, bytes)) {
+  } else if (
+    doMagicBytesMatch(MAGIC_MP3_BYTES_1, bytes) ||
+    doMagicBytesMatch(MAGIC_MP3_BYTES_2, bytes) ||
+    doMagicBytesMatch(MAGIC_MP3_BYTES_3, bytes) ||
+    doMagicBytesMatch(MAGIC_MP3_BYTES_4, bytes)
+  ) {
     return "audio/mp3";
   } else if (doMagicBytesMatch(MAGIC_WAV_BYTES, bytes)) {
     return "audio/wav";

From 291f2b6e2e65eb4c87e2128657f742d019acaed4 Mon Sep 17 00:00:00 2001
From: Thomas Haaf <thomas@smart-sign.com>
Date: Thu, 28 Aug 2025 11:32:24 +0200
Subject: [PATCH 6/6] add width height maxWidth maxHeight attributes to image
 markdown parser

---
 client/src/components/MarkDown.vue      | 12 ++--
 common/src/markdown-converter-common.ts | 84 ++++++++++++++++++++++++-
 2 files changed, 89 insertions(+), 7 deletions(-)

diff --git a/client/src/components/MarkDown.vue b/client/src/components/MarkDown.vue
index b7a0c0a..79226f0 100644
--- a/client/src/components/MarkDown.vue
+++ b/client/src/components/MarkDown.vue
@@ -7,8 +7,8 @@
   min-height: 520px;
 
   svg {
-    max-width: 100% !important;
-    height: auto !important;
+    max-width: 100%;
+    height: auto;
 
     g > * :not(text) {
       stroke: #ccc !important;
@@ -16,13 +16,13 @@
   }
 
   img {
-    max-width: 100% !important;
-    height: auto !important;
+    max-width: 100%;
+    height: auto;
   }
 
   audio {
-    max-width: 100% !important;
-    margin: 10px 0 !important;
+    max-width: 100%;
+    margin: 10px 0;
   }
 }
 </style>
diff --git a/common/src/markdown-converter-common.ts b/common/src/markdown-converter-common.ts
index 2bbb4aa..77b6aaf 100644
--- a/common/src/markdown-converter-common.ts
+++ b/common/src/markdown-converter-common.ts
@@ -121,8 +121,90 @@ export abstract class MarkdownConverter {
             }
             return `<audio controls><source src="${href}" type="${audioType}">Your browser does not support the audio element.</audio>`;
           }
+
+          // Parse attributes from title attribute (format: "title|width:300px|height:200px|maxWidth:400px|maxHeight:300px|class:my-class")
+          let imgTitle = title || "";
+          let imgWidth = "";
+          let imgHeight = "";
+          let imgMaxWidth = "";
+          let imgMaxHeight = "";
+          let imgClass = "";
+
+          if (title && title.includes("|")) {
+            const parts = title.split("|");
+            imgTitle = parts[0];
+
+            for (let i = 1; i < parts.length; i++) {
+              const part = parts[i];
+              if (part.startsWith("width:")) {
+                imgWidth = part.substring(6);
+              } else if (part.startsWith("height:")) {
+                imgHeight = part.substring(7);
+              } else if (part.startsWith("maxWidth:")) {
+                imgMaxWidth = part.substring(9);
+              } else if (part.startsWith("maxHeight:")) {
+                imgMaxHeight = part.substring(10);
+              } else if (part.startsWith("class:")) {
+                imgClass = part.substring(6);
+              }
+            }
+          }
+
+          // Parse attributes from custom syntax in text (format: "alt{width=300px,height=200px,maxWidth=400px,maxHeight=300px,class=my-class}")
+          if (text && text.includes("{")) {
+            const match = text.match(/(.*?)\{([^}]+)\}/);
+            if (match) {
+              const [, altText, attributesStr] = match;
+              text = altText;
+
+              // Parse comma-separated attributes
+              const attributes = attributesStr.split(",");
+              for (const attr of attributes) {
+                const [key, value] = attr.split("=");
+                if (key === "width") {
+                  imgWidth = value;
+                } else if (key === "height") {
+                  imgHeight = value;
+                } else if (key === "maxWidth") {
+                  imgMaxWidth = value;
+                } else if (key === "maxHeight") {
+                  imgMaxHeight = value;
+                } else if (key === "class") {
+                  imgClass = value;
+                }
+              }
+            }
+          }
+
+          // Build attributes
+          const attributes = [`src="${href}"`, `alt="${text || ""}"`];
+          if (imgTitle) {
+            attributes.push(`title="${imgTitle}"`);
+          }
+          if (imgClass) {
+            attributes.push(`class="${imgClass}"`);
+          }
+
+          // Build style attribute
+          const styles = [];
+          if (imgWidth) {
+            styles.push(`width: ${imgWidth}`);
+          }
+          if (imgHeight) {
+            styles.push(`height: ${imgHeight}`);
+          }
+          if (imgMaxWidth) {
+            styles.push(`max-width: ${imgMaxWidth}`);
+          }
+          if (imgMaxHeight) {
+            styles.push(`max-height: ${imgMaxHeight}`);
+          }
+          if (styles.length > 0) {
+            attributes.push(`style="${styles.join("; ")}"`);
+          }
+
           // Default image rendering
-          return `<img src="${href}" alt="${text || ""}" title="${title || ""}">`;
+          return `<img ${attributes.join(" ")}>`;
         },
       },
     });