Fix mention blot to enable native keyboard navigation

Co-authored-by: Chris Svenningsen <chris@carbonfive.com>

stylesheets/_modules.scss

@@ -8704,7 +8704,7 @@ button.module-image__border-overlay:focus {
   &__at-mention {
     background-color: $color-gray-20;
     border-radius: 4px;
-    display: inline-block;
+    display: inline;
     padding-left: 4px;
     padding-right: 4px;
     height: 22px;

ts/components/CompositionInput.tsx

@@ -400,26 +400,6 @@ export const CompositionInput: React.ComponentType<Props> = props => {
     return true;
   };
 
-  const onCtrlA = () => {
-    const quill = quillRef.current;
-
-    if (quill === undefined) {
-      return;
-    }
-
-    quill.setSelection(0, 0);
-  };
-
-  const onCtrlE = () => {
-    const quill = quillRef.current;
-
-    if (quill === undefined) {
-      return;
-    }
-
-    quill.setSelection(quill.getLength(), 0);
-  };
-
   const onBackspace = () => {
     const quill = quillRef.current;
 
@@ -576,8 +556,6 @@ export const CompositionInput: React.ComponentType<Props> = props => {
                   handler: onShortKeyEnter,
                 },
                 onEscape: { key: 27, handler: onEscape }, // 27 = Escape
-                onCtrlA: { key: 65, ctrlKey: true, handler: onCtrlA }, // 65 = a
-                onCtrlE: { key: 69, ctrlKey: true, handler: onCtrlE }, // 69 = e
                 onBackspace: { key: 8, handler: onBackspace }, // 8 = Backspace
               },
             },

ts/quill/mentions/blot.tsx

@@ -1,6 +1,8 @@
 // Copyright 2020 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+/* eslint-disable max-classes-per-file */
+
 import React from 'react';
 import Parchment from 'parchment';
 import Quill from 'quill';
@@ -8,7 +10,11 @@ import { render } from 'react-dom';
 import { Emojify } from '../../components/conversation/Emojify';
 import { MentionBlotValue } from '../util';
 
-const Embed: typeof Parchment.Embed = Quill.import('blots/embed');
+declare class QuillEmbed extends Parchment.Embed {
+  contentNode: HTMLElement;
+}
+
+const Embed: typeof QuillEmbed = Quill.import('blots/embed');
 
 export class MentionBlot extends Embed {
   static blotName = 'mention';
@@ -57,4 +63,10 @@ export class MentionBlot extends Embed {
 
     node.appendChild(mentionSpan);
   }
+
+  constructor(node: Node) {
+    super(node);
+
+    this.contentNode.removeAttribute('contenteditable');
+  }
 }