mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Fix mention blot to enable native keyboard navigation

Browse source 
Co-authored-by: Chris Svenningsen <chris@carbonfive.com>
This commit is contained in:
Sidney Keese 2020-11-10 09:51:24 -08:00 • committed by GitHub
parent a5cfebe87a
commit 5c810c65cc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

2
stylesheets/_modules.scss
View file

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

22
ts/components/CompositionInput.tsx
View file

@ -400,26 +400,6 @@ export const CompositionInput: React.ComponentType<Props> = props => {
return true; 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 onBackspace = () => {
const quill = quillRef.current; const quill = quillRef.current;
@ -576,8 +556,6 @@ export const CompositionInput: React.ComponentType<Props> = props => {
handler: onShortKeyEnter, handler: onShortKeyEnter,
}, },
onEscape: { key: 27, handler: onEscape }, // 27 = Escape 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 onBackspace: { key: 8, handler: onBackspace }, // 8 = Backspace
}, },
}, },

14
ts/quill/mentions/blot.tsx
View file

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