From 780f9b6add39c4ca9cb9df80c1c22509fbbffc30 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Mon, 12 Jul 2021 09:29:41 +0200
Subject: [PATCH] Handle pill deletion
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>
---
 .../views/rooms/BasicMessageComposer.tsx      | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/components/views/rooms/BasicMessageComposer.tsx b/src/components/views/rooms/BasicMessageComposer.tsx
index 3258674cf6..d707a25e44 100644
--- a/src/components/views/rooms/BasicMessageComposer.tsx
+++ b/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));