make click to insert nick work on join/parts, /me's etc

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

res/css/_components.scss

@@ -59,6 +59,7 @@
 @import "./views/elements/_RoleButton.scss";
 @import "./views/elements/_Spinner.scss";
 @import "./views/elements/_SyntaxHighlight.scss";
+@import "./views/elements/_TextForEvent.scss";
 @import "./views/elements/_ToolTipButton.scss";
 @import "./views/globals/_MatrixToolbar.scss";
 @import "./views/groups/_GroupPublicityToggle.scss";

res/css/views/elements/_TextForEvent.scss

@@ -0,0 +1,19 @@
+/*
+Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_TextForEvent_username {
+    cursor: pointer;
+}

src/TextForEvent.js

@@ -17,11 +17,28 @@ import MatrixClientPeg from './MatrixClientPeg';
 import CallHandler from './CallHandler';
 import { _t } from './languageHandler';
 import * as Roles from './Roles';
+import dis from "./dispatcher";
+import React from 'react';
+
+function onUsernameClick(e) {
+    dis.dispatch({
+        action: 'insert_mention',
+        user_id: e.target.id,
+    });
+}
+
+function makeUsernameSpan(mxid, text) {
+    return <span className="mx_TextForEvent_username" dir="auto" onClick={onUsernameClick} id={mxid}>{ text }</span>;
+}
 
 function textForMemberEvent(ev) {
     // XXX: SYJS-16 "sender is sometimes null for join messages"
     const senderName = ev.sender ? ev.sender.name : ev.getSender();
     const targetName = ev.target ? ev.target.name : ev.getStateKey();
+
+    const sender = makeUsernameSpan(ev.getSender(), senderName);
+    const target = makeUsernameSpan(ev.getStateKey(), targetName);
+
     const prevContent = ev.getPrevContent();
     const content = ev.getContent();
 
@@ -32,47 +49,48 @@ function textForMemberEvent(ev) {
             const threePidContent = content.third_party_invite;
             if (threePidContent) {
                 if (threePidContent.display_name) {
-                    return _t('%(targetName)s accepted the invitation for %(displayName)s.', {
+                    return _t('<target> accepted the invitation for %(displayName)s.', {
-                        targetName,
                         displayName: threePidContent.display_name,
+                    }, {
+                        target,
                     });
                 } else {
-                    return _t('%(targetName)s accepted an invitation.', {targetName});
+                    return _t('<target> accepted an invitation.', {}, {target});
                 }
             } else {
                 if (ConferenceHandler && ConferenceHandler.isConferenceUser(ev.getStateKey())) {
-                    return _t('%(senderName)s requested a VoIP conference.', {senderName});
+                    return _t('<sender> requested a VoIP conference.', {}, {sender});
                 } else {
-                    return _t('%(senderName)s invited %(targetName)s.', {senderName, targetName});
+                    return _t('<sender> invited <target>.', {}, {sender, target});
                 }
             }
         }
         case 'ban':
-            return _t('%(senderName)s banned %(targetName)s.', {senderName, targetName}) + ' ' + reason;
+            return _t('<sender> banned <target>.', {}, {sender, target}) + ' ' + reason;
         case 'join':
             if (prevContent && prevContent.membership === 'join') {
                 if (prevContent.displayname && content.displayname && prevContent.displayname !== content.displayname) {
-                    return _t('%(oldDisplayName)s changed their display name to %(displayName)s.', {
+                    return _t('<oldDisplayName> changed their display name to <displayName>.', {}, {
-                        oldDisplayName: prevContent.displayname,
+                        oldDisplayName: makeUsernameSpan(ev.getStateKey(), prevContent.displayname),
-                        displayName: content.displayname,
+                        displayName: makeUsernameSpan(ev.getStateKey(), content.displayname),
                     });
                 } else if (!prevContent.displayname && content.displayname) {
-                    return _t('%(senderName)s set their display name to %(displayName)s.', {
+                    return _t('<sender> set their display name to <displayName>.', {}, {
-                        senderName: ev.getSender(),
+                        sender,
-                        displayName: content.displayname,
+                        displayName: makeUsernameSpan(ev.getSender(), content.displayname),
                     });
                 } else if (prevContent.displayname && !content.displayname) {
-                    return _t('%(senderName)s removed their display name (%(oldDisplayName)s).', {
+                    return _t('<sender> removed their display name (<oldDisplayName>).', {
-                        senderName,
+                        sender,
-                        oldDisplayName: prevContent.displayname,
+                        oldDisplayName: makeUsernameSpan(ev.getSender(), prevContent.displayname),
                     });
                 } else if (prevContent.avatar_url && !content.avatar_url) {
-                    return _t('%(senderName)s removed their profile picture.', {senderName});
+                    return _t('<sender> removed their profile picture.', {}, {sender});
                 } else if (prevContent.avatar_url && content.avatar_url &&
                     prevContent.avatar_url !== content.avatar_url) {
-                    return _t('%(senderName)s changed their profile picture.', {senderName});
+                    return _t('<sender> changed their profile picture.', {}, {sender});
                 } else if (!prevContent.avatar_url && content.avatar_url) {
-                    return _t('%(senderName)s set a profile picture.', {senderName});
+                    return _t('<sender> set a profile picture.', {}, {sender});
                 } else {
                     // suppress null rejoins
                     return '';
@@ -82,7 +100,7 @@ function textForMemberEvent(ev) {
                 if (ConferenceHandler && ConferenceHandler.isConferenceUser(ev.getStateKey())) {
                     return _t('VoIP conference started.');
                 } else {
-                    return _t('%(targetName)s joined the room.', {targetName});
+                    return _t('<target> joined the room.', {}, {target});
                 }
             }
         case 'leave':
@@ -90,42 +108,42 @@ function textForMemberEvent(ev) {
                 if (ConferenceHandler && ConferenceHandler.isConferenceUser(ev.getStateKey())) {
                     return _t('VoIP conference finished.');
                 } else if (prevContent.membership === "invite") {
-                    return _t('%(targetName)s rejected the invitation.', {targetName});
+                    return _t('<target> rejected the invitation.', {}, {target});
                 } else {
-                    return _t('%(targetName)s left the room.', {targetName});
+                    return _t('<target> left the room.', {}, {target});
                 }
             } else if (prevContent.membership === "ban") {
-                return _t('%(senderName)s unbanned %(targetName)s.', {senderName, targetName});
+                return _t('<sender> unbanned <target>.', {}, {sender, target});
             } else if (prevContent.membership === "join") {
-                return _t('%(senderName)s kicked %(targetName)s.', {senderName, targetName}) + ' ' + reason;
+                return _t('<sender> kicked <target>.', {}, {sender, target}) + ' ' + reason;
             } else if (prevContent.membership === "invite") {
-                return _t('%(senderName)s withdrew %(targetName)s\'s invitation.', {
+                return _t('<sender> withdrew <target>\'s invitation.', {}, {sender, target}) + ' ' + reason;
-                    senderName,
-                    targetName,
-                }) + ' ' + reason;
             } else {
-                return _t('%(targetName)s left the room.', {targetName});
+                return _t('<target> left the room.', {}, {target});
             }
     }
 }
 
 function textForTopicEvent(ev) {
     const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
-    return _t('%(senderDisplayName)s changed the topic to "%(topic)s".', {
+    return _t('<sender> changed the topic to "%(topic)s".', {
-        senderDisplayName,
         topic: ev.getContent().topic,
+    }, {
+        sender: makeUsernameSpan(ev.getSender(), senderDisplayName),
     });
 }
 
 function textForRoomNameEvent(ev) {
     const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
+    const sender = makeUsernameSpan(ev.getSender(), senderDisplayName);
 
     if (!ev.getContent().name || ev.getContent().name.trim().length === 0) {
-        return _t('%(senderDisplayName)s removed the room name.', {senderDisplayName});
+        return _t('<sender> removed the room name.', {}, {sender});
     }
-    return _t('%(senderDisplayName)s changed the room name to %(roomName)s.', {
+    return _t('<sender> changed the room name to %(roomName)s.', {
-        senderDisplayName,
         roomName: ev.getContent().name,
+    }, {
+        sender,
     });
 }
 
@@ -135,7 +153,9 @@ function textForMessageEvent(ev) {
     if (ev.getContent().msgtype === "m.emote") {
         message = "* " + senderDisplayName + " " + message;
     } else if (ev.getContent().msgtype === "m.image") {
-        message = _t('%(senderDisplayName)s sent an image.', {senderDisplayName});
+        message = _t('<sender> sent an image.', {}, {
+            sender: makeUsernameSpan(ev.getSender(), senderDisplayName),
+        });
     }
     return message;
 }
@@ -143,7 +163,9 @@ function textForMessageEvent(ev) {
 function textForCallAnswerEvent(event) {
     const senderName = event.sender ? event.sender.name : _t('Someone');
     const supported = MatrixClientPeg.get().supportsVoip() ? '' : _t('(not supported by this browser)');
-    return _t('%(senderName)s answered the call.', {senderName}) + ' ' + supported;
+    return _t('<sender> answered the call.', {}, {
+        sender: makeUsernameSpan(event.getSender(), senderName),
+    }) + ' ' + supported;
 }
 
 function textForCallHangupEvent(event) {
@@ -161,11 +183,14 @@ function textForCallHangupEvent(event) {
             reason = _t('(unknown failure: %(reason)s)', {reason: eventContent.reason});
         }
     }
-    return _t('%(senderName)s ended the call.', {senderName}) + ' ' + reason;
+    return _t('<sender> ended the call.', {}, {
+        sender: makeUsernameSpan(event.getSender(), senderName),
+    }) + ' ' + reason;
 }
 
 function textForCallInviteEvent(event) {
     const senderName = event.sender ? event.sender.name : _t('Someone');
+    const sender = makeUsernameSpan(event.getSender(), senderName);
     // FIXME: Find a better way to determine this from the event?
     let callType = "voice";
     if (event.getContent().offer && event.getContent().offer.sdp &&
@@ -173,43 +198,47 @@ function textForCallInviteEvent(event) {
         callType = "video";
     }
     const supported = MatrixClientPeg.get().supportsVoip() ? "" : _t('(not supported by this browser)');
-    return _t('%(senderName)s placed a %(callType)s call.', {senderName, callType}) + ' ' + supported;
+    return _t('<sender> placed a %(callType)s call.', {callType}, {sender}) + ' ' + supported;
 }
 
 function textForThreePidInviteEvent(event) {
     const senderName = event.sender ? event.sender.name : event.getSender();
-    return _t('%(senderName)s sent an invitation to %(targetDisplayName)s to join the room.', {
+    return _t('<sender> sent an invitation to %(targetDisplayName)s to join the room.', {
-        senderName,
         targetDisplayName: event.getContent().display_name,
+    }, {
+        sender: makeUsernameSpan(event.getSender(), senderName),
     });
 }
 
 function textForHistoryVisibilityEvent(event) {
     const senderName = event.sender ? event.sender.name : event.getSender();
+    const sender = makeUsernameSpan(event.getSender(), senderName);
     switch (event.getContent().history_visibility) {
         case 'invited':
-            return _t('%(senderName)s made future room history visible to all room members, '
+            return _t('<sender> made future room history visible to all room members, '
-                + 'from the point they are invited.', {senderName});
+                + 'from the point they are invited.', {}, {sender});
         case 'joined':
-            return _t('%(senderName)s made future room history visible to all room members, '
+            return _t('<sender> made future room history visible to all room members, '
-                + 'from the point they joined.', {senderName});
+                + 'from the point they joined.', {}, {sender});
         case 'shared':
-            return _t('%(senderName)s made future room history visible to all room members.', {senderName});
+            return _t('<sender> made future room history visible to all room members.', {}, {sender});
         case 'world_readable':
-            return _t('%(senderName)s made future room history visible to anyone.', {senderName});
+            return _t('<sender> made future room history visible to anyone.', {}, {sender});
         default:
-            return _t('%(senderName)s made future room history visible to unknown (%(visibility)s).', {
+            return _t('<sender> made future room history visible to unknown (%(visibility)s).', {
-                senderName,
                 visibility: event.getContent().history_visibility,
+            }, {
+                sender,
             });
     }
 }
 
 function textForEncryptionEvent(event) {
     const senderName = event.sender ? event.sender.name : event.getSender();
-    return _t('%(senderName)s turned on end-to-end encryption (algorithm %(algorithm)s).', {
+    return _t('<sender> turned on end-to-end encryption (algorithm %(algorithm)s).', {
-        senderName,
         algorithm: event.getContent().algorithm,
+    }, {
+        sender: makeUsernameSpan(event.getSender(), senderName),
     });
 }
 
@@ -241,10 +270,11 @@ function textForPowerEvent(event) {
         const to = event.getContent().users[userId];
         if (to !== from) {
             diff.push(
-                _t('%(userId)s from %(fromPowerLevel)s to %(toPowerLevel)s', {
+                _t('<user> from %(fromPowerLevel)s to %(toPowerLevel)s', {
-                    userId,
                     fromPowerLevel: Roles.textualPowerLevel(from, userDefault),
                     toPowerLevel: Roles.textualPowerLevel(to, userDefault),
+                }, {
+                    user: makeUsernameSpan(userId, userId),
                 }),
             );
         }
@@ -252,19 +282,23 @@ function textForPowerEvent(event) {
     if (!diff.length) {
         return '';
     }
-    return _t('%(senderName)s changed the power level of %(powerLevelDiffText)s.', {
+    return _t('<sender> changed the power level of %(powerLevelDiffText)s.', {
-        senderName,
         powerLevelDiffText: diff.join(", "),
+    }, {
+        sender: makeUsernameSpan(event.getSender(), senderName),
     });
 }
 
 function textForPinnedEvent(event) {
-    const senderName = event.getSender();
+    const senderName = event.sender ? event.sender.name : event.getSender();
-    return _t("%(senderName)s changed the pinned messages for the room.", {senderName});
+    const sender = makeUsernameSpan(event.getSender(), senderName);
+    return _t("<sender> changed the pinned messages for the room.", {}, {sender});
 }
 
 function textForWidgetEvent(event) {
-    const senderName = event.getSender();
+    const senderName = event.sender ? event.sender.name : event.getSender();
+    const sender = makeUsernameSpan(event.getSender(), senderName);
+
     const {name: prevName, type: prevType, url: prevUrl} = event.getPrevContent();
     const {name, type, url} = event.getContent() || {};
 
@@ -278,18 +312,12 @@ function textForWidgetEvent(event) {
     // equivalent to that condition.
     if (url) {
         if (prevUrl) {
-            return _t('%(widgetName)s widget modified by %(senderName)s', {
+            return _t('%(widgetName)s widget modified by <sender>', {widgetName}, {sender});
-                widgetName, senderName,
-            });
         } else {
-            return _t('%(widgetName)s widget added by %(senderName)s', {
+            return _t('%(widgetName)s widget added by <sender>', {widgetName}, {sender});
-                widgetName, senderName,
-            });
         }
     } else {
-        return _t('%(widgetName)s widget removed by %(senderName)s', {
+        return _t('%(widgetName)s widget removed by <sender>', {widgetName}, {sender});
-            widgetName, senderName,
-        });
     }
 }