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

Fix enter/ctrl+enter in expanded composer

Browse source 
Co-authored-by: Sidney Keese <sidney@carbonfive.com>
This commit is contained in:
Chris Svenningsen 2020-10-22 16:33:53 -07:00 • committed by Evan Hahn
parent 3f623d9348
commit 13333e0b0d
1 changed files with 47 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

85
ts/components/CompositionInput.tsx
View file

@ -71,21 +71,18 @@ export interface Props {
const MAX_LENGTH = 64 * 1024; const MAX_LENGTH = 64 * 1024;
export const CompositionInput: React.ComponentType<Props> = ({ export const CompositionInput: React.ComponentType<Props> = props => {
i18n, const {
disabled, i18n,
large, disabled,
inputApi, large,
onDirtyChange, inputApi,
onEditorStateChange, onPickEmoji,
onTextTooLong, onSubmit,
onPickEmoji, skinTone,
onSubmit, startingText,
skinTone, } = props;
startingText,
getQuotedMessage,
clearQuotedMessage,
}) => {
const [emojiCompletionElement, setEmojiCompletionElement] = React.useState< const [emojiCompletionElement, setEmojiCompletionElement] = React.useState<
JSX.Element JSX.Element
>(); >();
@ -93,6 +90,7 @@ export const CompositionInput: React.ComponentType<Props> = ({
const emojiCompletionRef = React.useRef<EmojiCompletion>(); const emojiCompletionRef = React.useRef<EmojiCompletion>();
const quillRef = React.useRef<Quill>(); const quillRef = React.useRef<Quill>();
const scrollerRef = React.useRef<HTMLDivElement>(null); const scrollerRef = React.useRef<HTMLDivElement>(null);
const propsRef = React.useRef<Props>(props);
const generateDelta = (text: string): Delta => { const generateDelta = (text: string): Delta => {
const re = emojiRegex(); const re = emojiRegex();
@ -217,7 +215,10 @@ export const CompositionInput: React.ComponentType<Props> = ({
return; return;
} }
onSubmit(getText()); const text = getText();
if (text.length > 0) {
onSubmit(text);
}
}; };
if (inputApi) { if (inputApi) {
@ -231,7 +232,16 @@ export const CompositionInput: React.ComponentType<Props> = ({
}; };
} }
const onEnter = React.useCallback(() => { React.useEffect(() => {
propsRef.current = props;
}, [props]);
const onShortKeyEnter = () => {
submit();
return false;
};
const onEnter = () => {
const quill = quillRef.current; const quill = quillRef.current;
const emojiCompletion = emojiCompletionRef.current; const emojiCompletion = emojiCompletionRef.current;
@ -248,20 +258,16 @@ export const CompositionInput: React.ComponentType<Props> = ({
return false; return false;
} }
if (large) { if (propsRef.current.large) {
return true; return true;
} }
const text = getText(); submit();
if (text.length > 0) {
onSubmit(text);
reset();
}
return false; return false;
}, [large, onSubmit]); };
const onTab = React.useCallback(() => { const onTab = () => {
const quill = quillRef.current; const quill = quillRef.current;
const emojiCompletion = emojiCompletionRef.current; const emojiCompletion = emojiCompletionRef.current;
@ -279,9 +285,9 @@ export const CompositionInput: React.ComponentType<Props> = ({
} }
return true; return true;
}, []); };
const onEscape = React.useCallback(() => { const onEscape = () => {
const quill = quillRef.current; const quill = quillRef.current;
if (quill === undefined) { if (quill === undefined) {
@ -297,15 +303,15 @@ export const CompositionInput: React.ComponentType<Props> = ({
} }
} }
if (getQuotedMessage()) { if (propsRef.current.getQuotedMessage()) {
clearQuotedMessage(); propsRef.current.clearQuotedMessage();
return false; return false;
} }
return true; return true;
}, [getQuotedMessage, clearQuotedMessage]); };
const onChange = React.useCallback(() => { const onChange = () => {
const text = getText(); const text = getText();
const quill = quillRef.current; const quill = quillRef.current;
@ -314,20 +320,23 @@ export const CompositionInput: React.ComponentType<Props> = ({
if (text.length > MAX_LENGTH) { if (text.length > MAX_LENGTH) {
historyModule.undo(); historyModule.undo();
onTextTooLong(); propsRef.current.onTextTooLong();
return; return;
} }
if (onEditorStateChange) { if (propsRef.current.onEditorStateChange) {
const selection = quill.getSelection(); const selection = quill.getSelection();
onEditorStateChange(text, selection ? selection.index : undefined); propsRef.current.onEditorStateChange(
text,
selection ? selection.index : undefined
);
} }
} }
if (onDirtyChange) { if (propsRef.current.onDirtyChange) {
onDirtyChange(text.length > 0); propsRef.current.onDirtyChange(text.length > 0);
} }
}, [onDirtyChange, onEditorStateChange, onTextTooLong]); };
React.useEffect(() => { React.useEffect(() => {
const quill = quillRef.current; const quill = quillRef.current;
@ -386,7 +395,7 @@ export const CompositionInput: React.ComponentType<Props> = ({
onShortKeyEnter: { onShortKeyEnter: {
key: 13, // 13 = Enter key: 13, // 13 = Enter
shortKey: true, shortKey: true,
handler: onEnter, handler: onShortKeyEnter,
}, },
onEscape: { key: 27, handler: onEscape }, // 27 = Escape onEscape: { key: 27, handler: onEscape }, // 27 = Escape
}, },