fixed drag and drop cursor position

fumiX · Jun 14, 2024 · 8343810 · 8343810
1 parent bf90bba
commit 8343810
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 43 deletions.
diff --git a/client/src/components/ImagePreview.vue b/client/src/components/ImagePreview.vue
@@ -6,10 +6,23 @@
     <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>
-      <button class="btn btn-paste mx-1" type="button" v-if="showPaste" @click="$emit('paste', getMarkdownString())">
-        <fa-icon :icon="faFileImport"></fa-icon>
-      </button>
-      <button class="btn btn-delete mx-1" v-if="showDelete" @click="$emit('delete')"><fa-icon :icon="faTrash"></fa-icon></button>
+      <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')"
+        >
+          <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>
+        <button class="btn btn-delete mx-1" type="button" v-if="showDelete" @click="$emit('delete')" :title="t('app.base.delete_image')">
+          <fa-icon :icon="faTrash"></fa-icon>
+        </button>
+      </div>
     </div>
   </div>
 </template>
@@ -32,6 +45,14 @@
     }
   }
 
+  .btn-softdelete {
+    color: #f18901;
+
+    &:hover {
+      color: #ffa836;
+    }
+  }
+
   .btn-delete {
     color: #a00;
 
@@ -60,7 +81,6 @@
     justify-content: center;
     padding: 0;
     margin: 0;
-    // border:1px solid red;
   }
 
   img {
@@ -70,10 +90,18 @@
 
     &[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;
+      }
     }
 
-    // margin-left:-4px;
-
     max-width: 134px;
     max-height: 134px;
     opacity: 0.75;
@@ -100,12 +128,19 @@
       font-size: 10px;
       margin-bottom: 5px;
     }
+
+    .button-container {
+      display: flex;
+      justify-content: center;
+      align-items: space-between;
+    }
   }
 }
 </style>
 
 <script setup lang="ts">
-import { faFileImport, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { t } from "@client/plugins/i18n.js";
+import { faFileImport, faTrash, faEraser } from "@fortawesome/free-solid-svg-icons";
 import { blobToArray, bytesToDataUrl, convertToHumanReadableFileSize, escapeMarkdownAltText } from "@fumix/fu-blog-common";
 import type { PropType } from "vue";
 
@@ -116,10 +151,9 @@ const getMarkdownString = () => {
 const onDragStart = (event: DragEvent) => {
   if (props.showPaste) {
     const ghostImage = event.target as HTMLImageElement;
-    const horizPos = ghostImage.width / 2;
-    const vertPos = ghostImage.height / 2;
-    event.dataTransfer?.setDragImage(ghostImage, horizPos, vertPos);
-    event.dataTransfer?.setData("text/markdown", getMarkdownString());
+    ghostImage.style.zIndex = "9999";
+    event.dataTransfer?.setDragImage(ghostImage, -10, -10);
+    event.dataTransfer?.setData("text/plain", getMarkdownString());
   }
 };
 
@@ -142,6 +176,6 @@ const props = defineProps({
   },
 });
 
-const emits = defineEmits(["paste", "delete"]);
+const emits = defineEmits(["paste", "delete", "softdelete"]);
 const dataUrl = await blobToArray(props.value).then((it) => bytesToDataUrl(props.value.type, it));
 </script>
diff --git a/client/src/i18n/de.json b/client/src/i18n/de.json
@@ -23,7 +23,10 @@
       "save": "Speichern",
       "cancel": "Abbrechen",
       "edit": "Bearbeiten",
+      "insert": "Einfügen",
       "delete": "Löschen",
+      "delete_image": "Bild löschen",
+      "remove": "Bildrefernz aus Text entfernen",
       "read": "Lesen",
       "create_post": "Post erstellen",
       "roles": "Rollen",

diff --git a/client/src/i18n/en.json b/client/src/i18n/en.json
@@ -23,7 +23,9 @@
       "save": "Save",
       "cancel": "Cancel",
       "edit": "Edit",
-      "delete": "Delete",
+      "insert": "Insert",
+      "delete_image": "Delete image",
+      "remove": "Remove image reference from text",
       "read": "Read",
       "create_post": "Create Post",
       "roles": "Roles",
@@ -66,7 +68,7 @@
       "not-available": {
         "title": "Post not available",
         "message": "This post is not available or has been deleted. You can find all posts in the overview, or use the search function to find a specific post."
-      } 
+      }
     }
   },
   "admin": {
@@ -102,4 +104,4 @@
     },
     "user_not_found": "User not found."
   }
-}
+}
diff --git a/client/src/views/PostFormView.vue b/client/src/views/PostFormView.vue
@@ -50,7 +50,6 @@
                   ref="markdownArea"
                   style="height: 40vh; min-height: 200px"
                   aria-describedby="markdownHelp"
-                  v-on:drop="dropMarkdown($event)"
                   required
                 ></textarea>
                 <label for="markdown">{{ t("posts.form.message.label") }}</label>
@@ -90,6 +89,7 @@
                           removeImageFileFromMarkdown(files[hash]);
                           delete files[hash];
                         "
+                        @softdelete="removeImageFileFromMarkdown(files[hash])"
                       >
                       </ImagePreview>
                     </Suspense>
@@ -417,32 +417,6 @@ const removeImageFileFromMarkdown = (file: File) => {
   }, 0);
 };
 
-const dropMarkdown = (evt: DragEvent) => {
-  const items = evt.dataTransfer?.items;
-  const textArea = evt.target as HTMLTextAreaElement;
-  if (items && textArea) {
-    for (const item of items) {
-      // evt.preventDefault();
-      // We cannot use preventDefault(), because we will be unable to get the cursor position to drop to.
-      // instead we have to pase everything and remove the base64 string afterwards
-      if (item.kind === "string") {
-        if (item.type === "text/markdown") {
-          item.getAsString((markdown_img_link) => {
-            form.markdown = insertIntoTextarea(markdown_img_link, textArea, "beforeCursor");
-          });
-        } else {
-          // Remove base64 string from drop events default behaviour
-          item.getAsString((str) => {
-            setTimeout(() => {
-              form.markdown = form.markdown.replace(str, "");
-            }, 0);
-          });
-        }
-      }
-    }
-  }
-};
-
 const openFileDialog = (): void => {
   document.getElementById("file")?.click();
 };