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

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

@@ -170,27 +170,25 @@
               </v-card-title>
 
               <!-- Content -->
-              <v-card-text
+              <DropZone @drop="(f) => handleImageDrop(index, f)">
-                v-if="isEditForm"
+                <v-card-text v-if="isEditForm">
-                :class="{ blur: imageUploadMode }"
+                  <MarkdownEditor
-                @drop.stop.prevent="handleImageDrop(index, $event)"
+                    v-model="value[index]['text']"
-              >
+                    class="mb-2"
-                <MarkdownEditor
+                    :preview.sync="previewStates[index]"
-                  v-model="value[index]['text']"
+                    :display-preview="false"
-                  class="mb-2"
+                    :textarea="{
-                  :preview.sync="previewStates[index]"
+                      hint: 'Attach images by dragging & dropping them into the editor',
-                  :display-preview="false"
+                      persistentHint: true,
-                  :textarea="{
+                    }"
-                    hint: 'Attach images by dragging & dropping them into the editor',
+                  />
-                    persistentHint: true,
+                  <RecipeIngredientHtml
-                  }"
+                    v-for="ing in step.ingredientReferences"
-                />
+                    :key="ing.referenceId"
-                <RecipeIngredientHtml
+                    :markup="getIngredientByRefId(ing.referenceId)"
-                  v-for="ing in step.ingredientReferences"
+                  />
-                  :key="ing.referenceId"
+                </v-card-text>
-                  :markup="getIngredientByRefId(ing.referenceId)"
+              </DropZone>
-                />
-              </v-card-text>
               <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) {
+    async function handleImageDrop(index: number, files: File[]) {
-      if (!e.dataTransfer) {
+      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>