fix: Add multiple file paste support and fix for bugs (#4066)

- Add multiple files paste support.
- Fixes showing file name in the editor field when we paste the file from finder.
- Fixes showing the image in the advance editor when we paste the image as an attachment from the clipboard.

Fixes: #4036

Co-authored-by: Nithin David <1277421+nithindavid@users.noreply.github.com>

app/javascript/dashboard/components/widgets/AttachmentsPreview.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="preview-item__wrap">
     <div
       v-for="(attachment, index) in attachments"
       :key="attachment.id"
@@ -19,7 +19,7 @@
         </span>
       </div>
       <div class="file-size-wrap">
-        <span class="item">
+        <span class="item text-truncate">
           {{ formatFileSize(attachment.resource) }}
         </span>
       </div>
@@ -70,15 +70,23 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+.preview-item__wrap {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  margin-top: var(--space-normal);
+  max-height: 20rem;
+}
+
 .preview-item {
   display: flex;
   padding: var(--space-slab) 0 0;
   background: var(--color-background-light);
   background: var(--b-50);
   border-radius: var(--border-radius-normal);
-  width: fit-content;
+  width: 24rem;
   padding: var(--space-smaller);
-  margin-top: var(--space-normal);
+  margin-bottom: var(--space-one);
 }
 
 .thumb-wrap {
@@ -114,6 +122,7 @@ export default {
 
   > .item {
     margin: 0;
+    overflow: hidden;
     font-size: var(--font-size-mini);
     font-weight: var(--font-weight-medium);
   }
@@ -124,7 +133,8 @@ export default {
 }
 
 .file-name-wrap {
-  max-width: 50%;
+  max-width: 60%;
+  min-width: 50%;
   overflow: hidden;
   text-overflow: ellipsis;
   margin-left: var(--space-small);

app/javascript/dashboard/components/widgets/WootWriter/Editor.vue

@@ -186,6 +186,12 @@ export default {
         blur: () => {
           this.onBlur();
         },
+        paste: (view, event) => {
+          const data = event.clipboardData.files;
+          if (data.length > 0) {
+            event.preventDefault();
+          }
+        },
       },
     });
     this.focusEditorInputField();

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -452,12 +452,16 @@ export default {
   methods: {
     onPaste(e) {
       const data = e.clipboardData.files;
+      if (!this.showRichContentEditor && data.length !== 0) {
+        this.$refs.messageInput.$el.blur();
+      }
       if (!data.length || !data[0]) {
         return;
       }
-      const file = data[0];
+      data.forEach(file => {
-      const { name, type, size } = file;
+        const { name, type, size } = file;
-      this.onFileUpload({ name, type, size, file });
+        this.onFileUpload({ name, type, size, file: file });
+      });
     },
     toggleUserMention(currentMentionState) {
       this.hasUserMention = currentMentionState;