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

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]