Merge pull request #4674 from matrix-org/t3chguy/upload-tweaks

Fix paste image to upload

src/ContentMessages.tsx

@@ -27,6 +27,7 @@ import Modal from './Modal';
 import RoomViewStore from './stores/RoomViewStore';
 import encrypt from "browser-encrypt-attachment";
 import extractPngChunks from "png-chunks-extract";
+import Spinner from "./components/views/elements/Spinner";
 
 // Polyfill for Canvas.toBlob API using Canvas.toDataURL
 import "blueimp-canvas-to-blob";
@@ -399,7 +400,11 @@ export default class ContentMessages {
             if (!shouldUpload) return;
         }
 
-        await this.ensureMediaConfigFetched();
+        if (!this.mediaConfig) { // hot-path optimization to not flash a spinner if we don't need to
+            const modal = Modal.createDialog(Spinner, null, 'mx_Dialog_spinner');
+            await this.ensureMediaConfigFetched();
+            modal.close();
+        }
 
         const tooBigFiles = [];
         const okFiles = [];

src/components/views/rooms/BasicMessageComposer.js

@@ -74,6 +74,7 @@ function selectionEquals(a: Selection, b: Selection): boolean {
 export default class BasicMessageEditor extends React.Component {
     static propTypes = {
         onChange: PropTypes.func,
+        onPaste: PropTypes.func, // returns true if handled and should skip internal onPaste handler
         model: PropTypes.instanceOf(EditorModel).isRequired,
         room: PropTypes.instanceOf(Room).isRequired,
         placeholder: PropTypes.string,
@@ -254,6 +255,12 @@ export default class BasicMessageEditor extends React.Component {
     }
 
     _onPaste = (event) => {
+        event.preventDefault(); // we always handle the paste ourselves
+        if (this.props.onPaste && this.props.onPaste(event, this.props.model)) {
+            // to prevent double handling, allow props.onPaste to skip internal onPaste
+            return true;
+        }
+
         const {model} = this.props;
         const {partCreator} = model;
         const partsText = event.clipboardData.getData("application/x-riot-composer");
@@ -269,7 +276,6 @@ export default class BasicMessageEditor extends React.Component {
         this._modifiedFlag = true;
         const range = getRangeForSelection(this._editorRef, model, document.getSelection());
         replaceRangeAndMoveCaret(range, parts);
-        event.preventDefault();
     }
 
     _onInput = (event) => {
@@ -503,10 +509,6 @@ export default class BasicMessageEditor extends React.Component {
         }
     }
 
-    getEditableRootNode() {
-        return this._editorRef;
-    }
-
     isModified() {
         return this._modifiedFlag;
     }

src/components/views/rooms/SendMessageComposer.js

@@ -323,13 +323,8 @@ 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);
     }
 
     // TODO: [REACT-WARNING] Move this to constructor
@@ -425,6 +420,7 @@ export default class SendMessageComposer extends React.Component {
             ContentMessages.sharedInstance().sendContentListToRoom(
                 Array.from(clipboardData.files), this.props.room.roomId, this.context,
             );
+            return true; // to skip internal onPaste handler
         }
     }
 
@@ -441,6 +437,7 @@ export default class SendMessageComposer extends React.Component {
                     label={this.props.placeholder}
                     placeholder={this.props.placeholder}
                     onChange={this._saveStoredEditorState}
+                    onPaste={this._onPaste}
                 />
             </div>
         );