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

Ensure emoji picker can insert without composition box focus

Browse source
This commit is contained in:
Chris Svenningsen 2020-11-02 14:07:52 -08:00 • committed by Evan Hahn
parent b7a1ddf628
commit ff18063f89
2 changed files with 31 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

24
ts/components/CompositionInput.tsx
View file

@ -8,7 +8,7 @@ import ReactQuill from 'react-quill';
import classNames from 'classnames'; import classNames from 'classnames';
import emojiRegex from 'emoji-regex'; import emojiRegex from 'emoji-regex';
import { Manager, Reference } from 'react-popper'; import { Manager, Reference } from 'react-popper';
import Quill, { KeyboardStatic } from 'quill'; import Quill, { KeyboardStatic, RangeStatic } from 'quill';
import Op from 'quill-delta/dist/Op'; import Op from 'quill-delta/dist/Op';
import { EmojiBlot, EmojiCompletion } from '../quill/emoji'; import { EmojiBlot, EmojiCompletion } from '../quill/emoji';
@ -89,6 +89,10 @@ export const CompositionInput: React.ComponentType<Props> = props => {
const [emojiCompletionElement, setEmojiCompletionElement] = React.useState< const [emojiCompletionElement, setEmojiCompletionElement] = React.useState<
JSX.Element JSX.Element
>(); >();
const [
lastSelectionRange,
setLastSelectionRange,
] = React.useState<RangeStatic | null>(null);
const emojiCompletionRef = React.useRef<EmojiCompletion>(); const emojiCompletionRef = React.useRef<EmojiCompletion>();
const quillRef = React.useRef<Quill>(); const quillRef = React.useRef<Quill>();
@ -168,19 +172,20 @@ export const CompositionInput: React.ComponentType<Props> = props => {
const range = quill.getSelection(); const range = quill.getSelection();
if (range === null) { const insertionRange = range || lastSelectionRange;
if (insertionRange === null) {
return; return;
} }
const emoji = convertShortName(e.shortName, e.skinTone); const emoji = convertShortName(e.shortName, e.skinTone);
const delta = new Delta() const delta = new Delta()
.retain(range.index) .retain(insertionRange.index)
.delete(range.length) .delete(insertionRange.length)
.insert({ emoji }); .insert({ emoji });
quill.updateContents(delta, 'user'); quill.updateContents(delta, 'user');
quill.setSelection(range.index + 1, 0, 'user'); quill.setSelection(insertionRange.index + 1, 0, 'user');
}; };
const reset = () => { const reset = () => {
@ -433,6 +438,15 @@ export const CompositionInput: React.ComponentType<Props> = props => {
quill.setSelection(quill.getLength(), 0); quill.setSelection(quill.getLength(), 0);
}); });
quill.on(
'selection-change',
(newRange: RangeStatic, oldRange: RangeStatic) => {
// If we lose focus, store the last edit point for emoji insertion
if (newRange === null) {
setLastSelectionRange(oldRange);
}
}
);
quillRef.current = quill; quillRef.current = quill;
emojiCompletionRef.current = quill.getModule('emojiCompletion'); emojiCompletionRef.current = quill.getModule('emojiCompletion');
} }

24
ts/util/lint/exceptions.json
View file

@ -14544,15 +14544,6 @@
"rule": "React-useRef", "rule": "React-useRef",
"path": "ts/components/CompositionInput.js", "path": "ts/components/CompositionInput.js",
"line": " const emojiCompletionRef = React.useRef();", "line": " const emojiCompletionRef = React.useRef();",
"lineNumber": 34,
"reasonCategory": "falseMatch",
"updated": "2020-10-26T19:12:24.410Z",
"reasonDetail": "Doesn't refer to a DOM element."
},
{
"rule": "React-useRef",
"path": "ts/components/CompositionInput.js",
"line": " const quillRef = React.useRef();",
"lineNumber": 35, "lineNumber": 35,
"reasonCategory": "falseMatch", "reasonCategory": "falseMatch",
"updated": "2020-10-26T19:12:24.410Z", "updated": "2020-10-26T19:12:24.410Z",
@ -14561,8 +14552,17 @@
{ {
"rule": "React-useRef", "rule": "React-useRef",
"path": "ts/components/CompositionInput.js", "path": "ts/components/CompositionInput.js",
"line": " const scrollerRef = React.useRef(null);", "line": " const quillRef = React.useRef();",
"lineNumber": 36, "lineNumber": 36,
"reasonCategory": "falseMatch",
"updated": "2020-10-26T19:12:24.410Z",
"reasonDetail": "Doesn't refer to a DOM element."
},
{
"rule": "React-useRef",
"path": "ts/components/CompositionInput.js",
"line": " const scrollerRef = React.useRef(null);",
"lineNumber": 37,
"reasonCategory": "usageTrusted", "reasonCategory": "usageTrusted",
"updated": "2020-10-26T19:12:24.410Z", "updated": "2020-10-26T19:12:24.410Z",
"reasonDetail": "Used with Quill for scrolling." "reasonDetail": "Used with Quill for scrolling."
@ -14571,7 +14571,7 @@
"rule": "React-useRef", "rule": "React-useRef",
"path": "ts/components/CompositionInput.js", "path": "ts/components/CompositionInput.js",
"line": " const propsRef = React.useRef(props);", "line": " const propsRef = React.useRef(props);",
"lineNumber": 37, "lineNumber": 38,
"reasonCategory": "falseMatch", "reasonCategory": "falseMatch",
"updated": "2020-10-26T19:12:24.410Z", "updated": "2020-10-26T19:12:24.410Z",
"reasonDetail": "Doesn't refer to a DOM element." "reasonDetail": "Doesn't refer to a DOM element."
@ -15116,4 +15116,4 @@
"reasonCategory": "falseMatch", "reasonCategory": "falseMatch",
"updated": "2020-09-08T23:07:22.682Z" "updated": "2020-09-08T23:07:22.682Z"
} }
] ]