Merge commit 'c87b05282909383353a9561e97b9f18a2db0766d' into glitch-soc/merge-upstream

app/javascript/mastodon/features/compose/components/compose_form.jsx

@@ -64,6 +64,7 @@ class ComposeForm extends ImmutablePureComponent {
     onSuggestionSelected: PropTypes.func.isRequired,
     onChangeSpoilerText: PropTypes.func.isRequired,
     onPaste: PropTypes.func.isRequired,
+    onDrop: PropTypes.func.isRequired,
     onPickEmoji: PropTypes.func.isRequired,
     autoFocus: PropTypes.bool,
     withoutNavigation: PropTypes.bool,
@@ -102,6 +103,7 @@ class ComposeForm extends ImmutablePureComponent {
   handleKeyDownPost = (e) => {
     if (e.key.toLowerCase() === 'enter' && (e.ctrlKey || e.metaKey)) {
         this.handleSubmit();
+        e.preventDefault();
     }
     this.blurOnEscape(e);
   };
@@ -248,7 +250,7 @@ class ComposeForm extends ImmutablePureComponent {
   };
 
   render () {
-    const { intl, onPaste, autoFocus, withoutNavigation, maxChars, isSubmitting } = this.props;
+    const { intl, onPaste, onDrop, autoFocus, withoutNavigation, maxChars, isSubmitting } = this.props;
     const { highlighted } = this.state;
 
     return (
@@ -304,6 +306,7 @@ class ComposeForm extends ImmutablePureComponent {
             onSuggestionsClearRequested={this.onSuggestionsClearRequested}
             onSuggestionSelected={this.onSuggestionSelected}
             onPaste={onPaste}
+            onDrop={onDrop}
             autoFocus={autoFocus}
             lang={this.props.lang}
             className='compose-form__input'

app/javascript/mastodon/features/compose/containers/compose_form_container.js

@@ -18,6 +18,23 @@ import ComposeForm from '../components/compose_form';
 
 const urlLikeRegex = /^https?:\/\/[^\s]+\/[^\s]+$/i;
 
+const processPasteOrDrop = (transfer, e, dispatch) => {
+  if (transfer && transfer.files.length === 1) {
+    dispatch(uploadCompose(transfer.files));
+    e.preventDefault();
+  } else if (transfer && transfer.files.length === 0) {
+    const data = transfer.getData('text/plain');
+    if (!data.match(urlLikeRegex)) return;
+
+    try {
+      const url = new URL(data);
+      dispatch(pasteLinkCompose({ url }));
+    } catch {
+      return;
+    }
+  }
+};
+
 const mapStateToProps = state => ({
   text: state.getIn(['compose', 'text']),
   suggestions: state.getIn(['compose', 'suggestions']),
@@ -85,20 +102,11 @@ const mapDispatchToProps = (dispatch, props) => ({
   },
 
   onPaste (e) {
-    if (e.clipboardData && e.clipboardData.files.length === 1) {
-      dispatch(uploadCompose(e.clipboardData.files));
-      e.preventDefault();
-    } else if (e.clipboardData && e.clipboardData.files.length === 0) {
-      const data = e.clipboardData.getData('text/plain');
-      if (!data.match(urlLikeRegex)) return;
+    processPasteOrDrop(e.clipboardData, e, dispatch);
+  },
 
-      try {
-        const url = new URL(data);
-        dispatch(pasteLinkCompose({ url }));
-      } catch {
-        return;
-      }
-    }
+  onDrop (e) {
+    processPasteOrDrop(e.dataTransfer, e, dispatch);
   },
 
   onPickEmoji (position, data, needsSpace) {