Merge pull request #3358 from matrix-org/bwindels/cider-paste-images

New composer: support pasting files

src/components/views/rooms/BasicMessageComposer.js

@@ -332,6 +332,10 @@ export default class BasicMessageEditor extends React.Component {
         }
     }
 
+    getEditableRootNode() {
+        return this._editorRef;
+    }
+
     isModified() {
         return this._modifiedFlag;
     }

src/components/views/rooms/SendMessageComposer.js

@@ -32,6 +32,7 @@ import {processCommandInput} from '../../../SlashCommands';
 import sdk from '../../../index';
 import Modal from '../../../Modal';
 import { _t } from '../../../languageHandler';
+import ContentMessages from '../../../ContentMessages';
 
 function addReplyToMessageContent(content, repliedToEvent, permalinkCreator) {
     const replyContent = ReplyThread.makeReplyMixIn(repliedToEvent);
@@ -226,8 +227,13 @@ export default class SendMessageComposer extends React.Component {
         this._clearStoredEditorState();
     }
 
+    componentDidMount() {
+        this._editorRef.getEditableRootNode().addEventListener("paste", this._onPaste, true);
+    }
+
     componentWillUnmount() {
         dis.unregister(this.dispatcherRef);
+        this._editorRef.getEditableRootNode().removeEventListener("paste", this._onPaste, true);
     }
 
     componentWillMount() {
@@ -310,6 +316,19 @@ export default class SendMessageComposer extends React.Component {
         this._editorRef && this._editorRef.focus();
     }
 
+    _onPaste = (event) => {
+        const {clipboardData} = event;
+        if (clipboardData.files.length) {
+            // This actually not so much for 'files' as such (at time of writing
+            // neither chrome nor firefox let you paste a plain file copied
+            // from Finder) but more images copied from a different website
+            // / word processor etc.
+            ContentMessages.sharedInstance().sendContentListToRoom(
+                Array.from(clipboardData.files), this.props.room.roomId, this.context.matrixClient,
+            );
+        }
+    }
+
     render() {
         return (
             <div className="mx_SendMessageComposer" onClick={this.focusComposer} onKeyDown={this._onKeyDown}>