Close/cancel draft "reply to" on Escape (#4387)

js/views/conversation_view.js

@@ -458,6 +458,8 @@
           this.onEditorStateChange(msg, caretLocation),
         onTextTooLong: () => this.showToast(Whisper.MessageBodyTooLongToast),
         onChooseAttachment: this.onChooseAttachment.bind(this),
+        getQuotedMessage: () => this.model.get('quotedMessageId'),
+        clearQuotedMessage: () => this.setQuoteMessage(null),
         micCellEl,
         attachmentListEl,
       };
@@ -2582,8 +2584,7 @@
         this.quotedMessage = message;
 
         if (message) {
-          const quote = await this.model.makeQuote(this.quotedMessage);
-          this.quote = quote;
+          this.quote = await this.model.makeQuote(this.quotedMessage);
 
           this.focusMessageFieldAndClearDisabled();
         }

ts/components/CompositionArea.tsx

@@ -43,7 +43,7 @@ export type Props = Pick<
   | 'onEditorSizeChange'
   | 'onEditorStateChange'
   | 'onTextTooLong'
-  | 'startingText'
+  | 'startingText' | 'clearQuotedMessage' | 'getQuotedMessage'
 > &
   Pick<
     EmojiButtonProps,
@@ -102,6 +102,8 @@ export const CompositionArea = ({
   clearShowIntroduction,
   showPickerHint,
   clearShowPickerHint,
+  clearQuotedMessage,
+  getQuotedMessage,
 }: Props) => {
   const [disabled, setDisabled] = React.useState(false);
   const [showMic, setShowMic] = React.useState(!startingText);
@@ -339,6 +341,8 @@ export const CompositionArea = ({
             onDirtyChange={setDirty}
             skinTone={skinTone}
             startingText={startingText}
+            clearQuotedMessage={clearQuotedMessage}
+            getQuotedMessage={getQuotedMessage}
           />
         </div>
         {!large ? (

ts/components/CompositionInput.tsx

@@ -42,6 +42,8 @@ export type Props = {
   onTextTooLong(): unknown;
   onPickEmoji(o: EmojiPickDataType): unknown;
   onSubmit(message: string): unknown;
+  getQuotedMessage(): unknown;
+  clearQuotedMessage(): unknown;
 };
 
 export type InputApi = {
@@ -217,6 +219,8 @@ export const CompositionInput = ({
   onSubmit,
   skinTone,
   startingText,
+  getQuotedMessage,
+  clearQuotedMessage,
 }: Props) => {
   const [editorRenderState, setEditorRenderState] = React.useState(
     getInitialEditorState(startingText)
@@ -462,6 +466,8 @@ export const CompositionInput = ({
       if (emojiResults.length > 0) {
         e.preventDefault();
         resetEmojiResults();
+      } else if (getQuotedMessage()) {
+        clearQuotedMessage();
       }
     },
     [resetEmojiResults, emojiResults]