From 442b881438c874a652a59733f95681f107752252 Mon Sep 17 00:00:00 2001
From: shellhazard <unva1idated@protonmail.com>
Date: Tue, 11 May 2021 17:05:12 +1000
Subject: [PATCH] Allow pasting images into composition box as attachments
 (#1616)

* Allow pasting images into composition box as attachments

* Fix linter errors

* Fix typo
---
 .../conversation/SessionCompositionBox.tsx    | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/ts/components/session/conversation/SessionCompositionBox.tsx b/ts/components/session/conversation/SessionCompositionBox.tsx
index 6ae710e1c..95ec45687 100644
--- a/ts/components/session/conversation/SessionCompositionBox.tsx
+++ b/ts/components/session/conversation/SessionCompositionBox.tsx
@@ -153,12 +153,19 @@ export class SessionCompositionBox extends React.Component<Props, State> {
 
   public componentDidMount() {
     setTimeout(this.focusCompositionBox, 100);
+
+    const div = this.container;
+    div?.addEventListener('paste', this.handlePaste);
   }
 
   public componentWillUnmount() {
     this.abortLinkPreviewFetch();
     this.linkPreviewAbortController = undefined;
+
+    const div = this.container;
+    div?.removeEventListener('paste', this.handlePaste);
   }
+
   public componentDidUpdate(prevProps: Props, _prevState: State) {
     // reset the state on new conversation key
     if (prevProps.selectedConversationKey !== this.props.selectedConversationKey) {
@@ -193,6 +200,24 @@ export class SessionCompositionBox extends React.Component<Props, State> {
     this.hideEmojiPanel();
   }
 
+  private handlePaste(e: any) {
+    const { items } = e.clipboardData;
+    let imgBlob = null;
+    for (const item of items) {
+      if (item.type.split('/')[0] === 'image') {
+        imgBlob = item.getAsFile();
+      }
+    }
+    if (imgBlob !== null) {
+      const file = imgBlob;
+      window.log.info('Adding attachment from clipboard', file);
+      this.props.onChoseAttachments([file]);
+
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }
+
   private showEmojiPanel() {
     document.addEventListener('mousedown', this.handleClick, false);