fix firefox drag and drop + add visual indicator (#1747)

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue

@@ -170,11 +170,8 @@
               </v-card-title>
 
               <!-- Content -->
-              <v-card-text
-                v-if="isEditForm"
-                :class="{ blur: imageUploadMode }"
-                @drop.stop.prevent="handleImageDrop(index, $event)"
-              >
+              <DropZone @drop="(f) => handleImageDrop(index, f)">
+                <v-card-text v-if="isEditForm">
                   <MarkdownEditor
                     v-model="value[index]['text']"
                     class="mb-2"
@@ -191,6 +188,7 @@
                     :markup="getIngredientByRefId(ing.referenceId)"
                   />
                 </v-card-text>
+              </DropZone>
               <v-expand-transition>
                 <div v-show="!isChecked(index) && !isEditForm" class="m-0 p-0">
                   <v-card-text class="markdown">
@@ -233,6 +231,7 @@ import { uuid4, detectServerBaseUrl } from "~/composables/use-utils";
 import { useUserApi, useStaticRoutes } from "~/composables/api";
 import { usePageState } from "~/composables/recipe-page/shared-state";
 import { NoUndefinedField } from "~/types/api";
+import DropZone from "~/components/global/DropZone.vue";
 
 interface MergerHistory {
   target: number;
@@ -245,6 +244,7 @@ export default defineComponent({
   components: {
     draggable,
     RecipeIngredientHtml,
+    DropZone,
   },
   props: {
     value: {
@@ -582,13 +582,13 @@ export default defineComponent({
       }
     });
 
-    async function handleImageDrop(index: number, e: DragEvent) {
-      if (!e.dataTransfer) {
+    async function handleImageDrop(index: number, files: File[]) {
+      if (!files) {
         return;
       }
 
       // Check if the file is an image
-      const file = e.dataTransfer.files[0];
+      const file = files[0];
       if (!file || !file.type.startsWith("image/")) {
         return;
       }

frontend/components/global/DropZone.vue

@@ -0,0 +1,62 @@
+<template>
+  <div ref="el" :class="isOverDropZone ? 'over' : ''">
+    <div v-if="isOverDropZone" class="overlay"></div>
+    <div v-if="isOverDropZone" class="absolute text-container">
+      <p class="text-center drop-text">Drop Image</p>
+    </div>
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "@nuxtjs/composition-api";
+import { useDropZone } from "@vueuse/core";
+
+export default defineComponent({
+  setup(_, context) {
+    const el = ref<HTMLDivElement>();
+
+    function onDrop(files: File[]) {
+      context.emit("drop", files);
+    }
+
+    // @ts-ignore - This should work?
+    const { isOverDropZone } = useDropZone(el, onDrop);
+
+    return { el, isOverDropZone };
+  },
+});
+</script>
+
+<style lang="css">
+.over {
+  background-color: #f0f0f0;
+}
+.overlay {
+  position: absolute;
+  filter: blur(2px);
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.309);
+}
+
+.text-container {
+  z-index: 10;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.drop-text {
+  color: white;
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+</style>