Tiptap: refactor to allow image upload from button

Work in Progress
DISIC · Nov 20, 2024 · 627f805 · 627f805
1 parent cd147ed
commit 627f805
Show file tree

Hide file tree

Showing 4 changed files with 302 additions and 205 deletions.
diff --git a/confiture-web-app/src/components/ui/FileUpload.vue b/confiture-web-app/src/components/ui/FileUpload.vue
@@ -3,7 +3,7 @@ import { computed, Ref, ref } from "vue";
 
 import { useIsOffline } from "../../composables/useIsOffline";
 import { useUniqueId } from "../../composables/useUniqueId";
-import { FileErrorMessage } from "../../enums";
+import { FileErrorMessage, Limitations } from "../../enums";
 import { AuditFile } from "../../types";
 import { formatBytes, getUploadUrl } from "../../utils";
 
@@ -71,7 +71,7 @@ const acceptedFormatsAttr = computed(() => {
 function handleFileChange() {
   if (fileInputRef.value?.files && fileInputRef.value?.files[0]) {
     const file = fileInputRef.value?.files[0];
-    if (file.size > 2000000) {
+    if (file.size > Limitations.FILE_SIZE) {
       localErrorMessage.value = FileErrorMessage.UPLOAD_SIZE;
       return;
     }

diff --git a/confiture-web-app/src/components/ui/Tiptap.vue b/confiture-web-app/src/components/ui/Tiptap.vue
@@ -16,11 +16,14 @@ import html from "highlight.js/lib/languages/xml";
 // load common languages
 import { common, createLowlight } from "lowlight";
 import { Markdown } from "tiptap-markdown";
-import { computed, ShallowRef } from "vue";
+import { computed, onMounted, ShallowRef } from "vue";
 import { useRoute } from "vue-router";
 
 import { useNotifications } from "../../composables/useNotifications";
-import { ImageUploadTiptapExtension } from "../../tiptap/ImageUploadTiptapExtension";
+import {
+  ImageUploadTiptapExtension,
+  insertFilesAtSelection
+} from "../../tiptap/ImageUploadTiptapExtension";
 
 // create a lowlight instance
 const lowlight = createLowlight(common);
@@ -105,6 +108,27 @@ const editor = useEditor({
     emit("update:content", JSON.stringify(editor.getJSON()));
   }
 }) as ShallowRef<Editor>;
+
+onMounted(() => {
+  const browseButton = document.getElementById("tiptap-browse-btn")!;
+  const browseInput = document.getElementById("tiptap-browse-input")!;
+  browseButton.addEventListener(
+    "click",
+    () => {
+      browseInput.click();
+    },
+    false
+  );
+  browseInput.addEventListener(
+    "change",
+    (e) => {
+      const inputElement = e?.target as HTMLInputElement;
+      const files = inputElement.files!;
+      insertFilesAtSelection(uniqueId.value, editor.value, files);
+    },
+    false
+  );
+});
 </script>
 
 <template>
@@ -114,5 +138,15 @@ const editor = useEditor({
       utiliser les raccourcis clavier.
     </p>
     <editor-content :editor="editor" />
+    <input
+      id="tiptap-browse-input"
+      type="file"
+      class="fr-hidden"
+      hidden
+      multiple
+    />
+    <button id="tiptap-browse-btn" class="fr-btn fr-btn--tertiary-no-outline">
+      parcourir
+    </button>
   </div>
 </template>
diff --git a/confiture-web-app/src/enums.ts b/confiture-web-app/src/enums.ts
@@ -24,6 +24,10 @@ export enum Browsers {
   EDGE = "Microsoft Edge"
 }
 
+export enum Limitations {
+  FILE_SIZE = 2000000
+}
+
 export enum FileErrorMessage {
   UPLOAD_SIZE = "Votre fichier dépasse la limite de 2 Mo. Veuillez choisir un fichier plus léger.",
   UPLOAD_FORMAT = "Format de fichier non supporté.",