From 667abca31f42bfba9c055e521afb1540429dd840 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Sun, 11 Jul 2021 20:02:32 +0200
Subject: [PATCH] Handle pill onclick
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/views/rooms/_BasicMessageComposer.scss |  1 +
 src/editor/parts.ts                            | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+)

diff --git a/res/css/views/rooms/_BasicMessageComposer.scss b/res/css/views/rooms/_BasicMessageComposer.scss
index e1ba468204..d87444441a 100644
--- a/res/css/views/rooms/_BasicMessageComposer.scss
+++ b/res/css/views/rooms/_BasicMessageComposer.scss
@@ -47,6 +47,7 @@ limitations under the License.
         &.mx_BasicMessageComposer_input_shouldShowPillAvatar {
             span.mx_UserPill, span.mx_RoomPill {
                 position: relative;
+                cursor: pointer;
 
                 // avatar psuedo element
                 &::before {
diff --git a/src/editor/parts.ts b/src/editor/parts.ts
index 39e92ded1c..8f662f9367 100644
--- a/src/editor/parts.ts
+++ b/src/editor/parts.ts
@@ -25,6 +25,10 @@ import AutocompleteWrapperModel, {
     UpdateQuery,
 } from "./autocomplete";
 import * as Avatar from "../Avatar";
+import defaultDispatcher from "../dispatcher/dispatcher";
+import { Action } from "../dispatcher/actions";
+import singletonRoomViewStore from "../stores/RoomViewStore";
+import { MatrixClientPeg } from "../MatrixClientPeg";
 
 interface ISerializedPart {
     type: Type.Plain | Type.Newline | Type.Command | Type.PillCandidate;
@@ -74,6 +78,7 @@ interface IPillCandidatePart extends Omit<IBasePart, "type" | "createAutoComplet
 interface IPillPart extends Omit<IBasePart, "type" | "resourceId"> {
     type: Type.AtRoomPill | Type.RoomPill | Type.UserPill;
     resourceId: string;
+    onClick?(): void;
 }
 
 export type Part = IBasePart | IPillCandidatePart | IPillPart;
@@ -250,6 +255,7 @@ abstract class PillPart extends BasePart implements IPillPart {
         const container = document.createElement("span");
         container.setAttribute("spellcheck", "false");
         container.setAttribute("contentEditable", "false");
+        container.onclick = this.onClick;
         container.className = this.className;
         container.appendChild(document.createTextNode(this.text));
         this.setAvatar(container);
@@ -304,6 +310,8 @@ abstract class PillPart extends BasePart implements IPillPart {
 
     abstract get className(): string;
 
+    abstract onClick?(): void;
+
     abstract setAvatar(node: HTMLElement): void;
 }
 
@@ -365,6 +373,9 @@ class RoomPillPart extends PillPart {
     get className() {
         return "mx_RoomPill mx_Pill";
     }
+
+    // FIXME: We do this to shut up the linter, is there a way to do this properly
+    onClick = undefined;
 }
 
 class AtRoomPillPart extends RoomPillPart {
@@ -403,6 +414,13 @@ class UserPillPart extends PillPart {
         this._setAvatarVars(node, avatarUrl, initialLetter);
     }
 
+    onClick = () => {
+        defaultDispatcher.dispatch({
+            action: Action.ViewUser,
+            member: MatrixClientPeg.get().getRoom(singletonRoomViewStore.getRoomId()).getMember(this.resourceId),
+        });
+    };
+
     get type(): IPillPart["type"] {
         return Type.UserPill;
     }