Allow click inserting mentions into the edit composer too

src/components/structures/TimelinePanel.js

@@ -450,10 +450,12 @@ class TimelinePanel extends React.Component {
     };
 
     onAction = payload => {
-        if (payload.action === 'ignore_state_changed') {
+        switch (payload.action) {
+            case "ignore_state_changed":
                 this.forceUpdate();
-        }
+                break;
-        if (payload.action === "edit_event") {
+
+            case "edit_event": {
                 const editState = payload.event ? new EditorStateTransfer(payload.event) : null;
                 this.setState({editState}, () => {
                     if (payload.event && this._messagePanel.current) {
@@ -462,9 +464,27 @@ class TimelinePanel extends React.Component {
                         );
                     }
                 });
+                break;
             }
-        if (payload.action === "scroll_to_bottom") {
+
+            case "insert_mention": {
+                if (this.state.editState) {
+                    dis.dispatch({
+                        ...payload,
+                        action: "insert_mention_edit_composer",
+                    });
+                } else {
+                    dis.dispatch({
+                        ...payload,
+                        action: "insert_mention_send_composer",
+                    });
+                }
+                break;
+            }
+
+            case "scroll_to_bottom":
                 this.jumpToLiveTimeline();
+                break;
         }
     };
 

src/components/views/rooms/BasicMessageComposer.tsx

@@ -713,4 +713,23 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
     focus() {
         this.editorRef.current.focus();
     }
+
+    public insertMention(userId: string) {
+        const {model} = this.props;
+        const {partCreator} = model;
+        const member = this.props.room.getMember(userId);
+        const displayName = member ?
+            member.rawDisplayName : userId;
+        const caret = this.getCaret();
+        const position = model.positionForOffset(caret.offset, caret.atNodeEnd);
+        // index is -1 if there are no parts but we only care for if this would be the part in position 0
+        const insertIndex = position.index > 0 ? position.index : 0;
+        const parts = partCreator.createMentionParts(insertIndex, displayName, userId);
+        model.transform(() => {
+            const addedLen = model.insert(parts, position);
+            return model.positionForOffset(caret.offset + addedLen, true);
+        });
+        // refocus on composer, as we just clicked "Mention"
+        this.focus();
+    }
 }

src/components/views/rooms/EditMessageComposer.js

@@ -120,6 +120,7 @@ export default class EditMessageComposer extends React.Component {
             saveDisabled: true,
         };
         this._createEditorModel();
+        this.dispatcherRef = dis.register(this.onAction);
     }
 
     _setEditorRef = ref => {
@@ -235,6 +236,7 @@ export default class EditMessageComposer extends React.Component {
         // then when mounting the editor again with the same editor state,
         // it will set the cursor at the end.
         this.props.editState.setEditorState(caret, parts);
+        dis.unregister(this.dispatcherRef);
     }
 
     _createEditorModel() {
@@ -278,6 +280,12 @@ export default class EditMessageComposer extends React.Component {
         });
     };
 
+    onAction = payload => {
+        if (payload.action === "insert_mention_edit_composer" && this._editorRef) {
+            this._editorRef.insertMention(payload.user_id);
+        }
+    };
+
     render() {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         return (<div className={classNames("mx_EditMessageComposer", this.props.className)} onKeyDown={this._onKeyDown}>

src/components/views/rooms/SendMessageComposer.js

@@ -482,8 +482,8 @@ export default class SendMessageComposer extends React.Component {
             case Action.FocusComposer:
                 this._editorRef && this._editorRef.focus();
                 break;
-            case 'insert_mention':
+            case 'insert_mention_send_composer':
-                this._insertMention(payload.user_id);
+                this._editorRef && this._editorRef.insertMention(payload.user_id);
                 break;
             case 'quote':
                 this._insertQuotedMessage(payload.event);
@@ -494,25 +494,6 @@ export default class SendMessageComposer extends React.Component {
         }
     };
 
-    _insertMention(userId) {
-        const {model} = this;
-        const {partCreator} = model;
-        const member = this.props.room.getMember(userId);
-        const displayName = member ?
-            member.rawDisplayName : userId;
-        const caret = this._editorRef.getCaret();
-        const position = model.positionForOffset(caret.offset, caret.atNodeEnd);
-        // index is -1 if there are no parts but we only care for if this would be the part in position 0
-        const insertIndex = position.index > 0 ? position.index : 0;
-        const parts = partCreator.createMentionParts(insertIndex, displayName, userId);
-        model.transform(() => {
-            const addedLen = model.insert(parts, position);
-            return model.positionForOffset(caret.offset + addedLen, true);
-        });
-        // refocus on composer, as we just clicked "Mention"
-        this._editorRef && this._editorRef.focus();
-    }
-
     _insertQuotedMessage(event) {
         const {model} = this;
         const {partCreator} = model;