Improve handling of pills in the composer

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 {

src/ActiveRoomObserver.ts

@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { EventSubscription } from 'fbemitter';
 import RoomViewStore from './stores/RoomViewStore';
 
 type Listener = (isActive: boolean) => void;
@@ -30,7 +31,7 @@ type Listener = (isActive: boolean) => void;
 export class ActiveRoomObserver {
     private listeners: {[key: string]: Listener[]} = {};
     private _activeRoomId = RoomViewStore.getRoomId();
-    private readonly roomStoreToken: string;
+    private readonly roomStoreToken: EventSubscription;
 
     constructor() {
         // TODO: We could self-destruct when the last listener goes away, or at least stop listening.

src/components/views/rooms/BasicMessageComposer.tsx

@@ -507,6 +507,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
             handled = true;
         } else if (event.key === Key.BACKSPACE || event.key === Key.DELETE) {
             this.formatBarRef.current.hide();
+            handled = this.fakeDeletion(event.key === Key.BACKSPACE ? "deleteContentBackward" : "deleteContentForward");
         }
 
         if (handled) {
@@ -515,6 +516,29 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
         }
     };
 
+    /**
+     * Because pills have contentEditable="false" there is no event emitted when
+     * the user tries to delete them. Therefore we need to fake what would
+     * normally happen
+     * @param direction in which to delete
+     * @returns handled
+     */
+    private fakeDeletion(direction: "deleteContentForward" | "deleteContentBackward" ): boolean {
+        const selection = document.getSelection();
+        // Use the default handling for ranges
+        if (selection.type === "Range") return false;
+
+        this.modifiedFlag = true;
+        const { caret, text } = getCaretOffsetAndText(this.editorRef.current, selection);
+
+        // Do the deletion itself
+        if (direction === "deleteContentBackward") caret.offset--;
+        const newText = text.slice(0, caret.offset) + text.slice(caret.offset + 1);
+
+        this.props.model.update(newText, direction, caret);
+        return true;
+    }
+
     private async tabCompleteName(): Promise<void> {
         try {
             await new Promise<void>(resolve => this.setState({ showVisualBell: false }, resolve));

src/components/views/voip/CallPreview.tsx

@@ -240,7 +240,7 @@ export default class CallPreview extends React.Component<IProps, IState> {
         this.scheduledUpdate.mark();
     };
 
-    private onRoomViewStoreUpdate = (payload) => {
+    private onRoomViewStoreUpdate = () => {
         if (RoomViewStore.getRoomId() === this.state.roomId) return;
 
         const roomId = RoomViewStore.getRoomId();

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 RoomViewStore 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;
@@ -249,6 +254,8 @@ abstract class PillPart extends BasePart implements IPillPart {
     toDOMNode() {
         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);
@@ -303,6 +310,8 @@ abstract class PillPart extends BasePart implements IPillPart {
 
     abstract get className(): string;
 
+    abstract onClick?(): void;
+
     abstract setAvatar(node: HTMLElement): void;
 }
 
@@ -364,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 {
@@ -402,6 +414,13 @@ class UserPillPart extends PillPart {
         this._setAvatarVars(node, avatarUrl, initialLetter);
     }
 
+    onClick = () => {
+        defaultDispatcher.dispatch({
+            action: Action.ViewUser,
+            member: MatrixClientPeg.get().getRoom(RoomViewStore.getRoomId()).getMember(this.resourceId),
+        });
+    };
+
     get type(): IPillPart["type"] {
         return Type.UserPill;
     }

src/stores/RoomViewStore.tsx

@@ -429,7 +429,7 @@ class RoomViewStore extends Store<ActionPayload> {
     }
 }
 
-let singletonRoomViewStore = null;
+let singletonRoomViewStore: RoomViewStore = null;
 if (!singletonRoomViewStore) {
     singletonRoomViewStore = new RoomViewStore();
 }