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 { 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; }