fix image deletion on post

fumiX · Jun 14, 2024 · 9869507 · 9869507
1 parent a68ba3c
commit 9869507
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 10 deletions.
diff --git a/client/src/components/ImagePreview.vue b/client/src/components/ImagePreview.vue
@@ -6,8 +6,8 @@
     <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" v-if="showPaste" @click="$emit('paste', getMarkdownString())">
-        <fa-icon :icon="faPaste"></fa-icon>
+      <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>
@@ -103,7 +103,7 @@
 </style>
 
 <script setup lang="ts">
-import { faPaste, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { faFileImport, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { blobToArray, bytesToDataUrl, convertToHumanReadableFileSize, escapeMarkdownAltText } from "@fumix/fu-blog-common";
 import type { PropType } from "vue";
 

diff --git a/client/src/views/PostFormView.vue b/client/src/views/PostFormView.vue
@@ -171,9 +171,7 @@
   padding: 0;
   overflow-x: auto;
   height: auto;
-  min-height: 290px;
-  // border: 1px solid #222;
-  // border-radius: 0.375rem;
+  min-height: 270px;
 }
 
 .inner {
@@ -421,11 +419,10 @@ const pasteImageFileToMarkdown = (markdown: string, insertPosition: SupportedIns
 };
 
 const removeImageFileFromMarkdown = (file: File) => {
-  const markDownBeforeRemove = form.markdown;
-  const strToRemove = `![${file.name}](${Object.keys(files).find((key) => files[key] === file)})`;
-  // Giving the textarea time to update the value, otherwise the last image deletion will not update the preview!
+  const strToRemove = `![${file.name}](${Object.keys(files).find((key) => files[key] === file)})`.trim();
   setTimeout(() => {
-    form.markdown = markDownBeforeRemove.replace(strToRemove, "");
+    // give the preview time to update
+    form.markdown = form.markdown.split(strToRemove).join("");
   }, 0);
 };