Fix mention blot to enable native keyboard navigation

Co-authored-by: Chris Svenningsen <chris@carbonfive.com>
signalapp · Nov 10, 2020 · 5c810c6 · 5c810c6
1 parent a5cfebe
commit 5c810c6
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 24 deletions.
diff --git a/stylesheets/_modules.scss b/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;

diff --git a/ts/components/CompositionInput.tsx b/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
  },
  },

diff --git a/ts/quill/mentions/blot.tsx b/ts/quill/mentions/blot.tsx
@@ -1,14 +1,20 @@
 // 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';
 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');
+ }
 }