Clean up inviteLink handling, harden compose input

ts/components/CompositionArea.stories.tsx

@@ -40,6 +40,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   clearQuotedMessage: action('clearQuotedMessage'),
   getQuotedMessage: action('getQuotedMessage'),
   sortedGroupMembers: [],
+  setSecureInput: action('setSecureInput'),
   // EmojiButton
   onPickEmoji: action('onPickEmoji'),
   onSetSkinTone: action('onSetSkinTone'),

ts/components/CompositionArea.tsx

@@ -67,6 +67,7 @@ export type Props = Pick<
   | 'draftBodyRanges'
   | 'clearQuotedMessage'
   | 'getQuotedMessage'
+  | 'setSecureInput'
 > &
   Pick<
     EmojiButtonProps,
@@ -113,6 +114,7 @@ export const CompositionArea = ({
   clearQuotedMessage,
   getQuotedMessage,
   sortedGroupMembers,
+  setSecureInput,
   // EmojiButton
   onPickEmoji,
   onSetSkinTone,
@@ -470,6 +472,7 @@ export const CompositionArea = ({
             clearQuotedMessage={clearQuotedMessage}
             getQuotedMessage={getQuotedMessage}
             sortedGroupMembers={sortedGroupMembers}
+            setSecureInput={setSecureInput}
           />
         </div>
         {!large ? (

ts/components/CompositionInput.stories.tsx

@@ -28,6 +28,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   getQuotedMessage: action('getQuotedMessage'),
   onPickEmoji: action('onPickEmoji'),
   large: boolean('large', overrideProps.large || false),
+  setSecureInput: action('setSecureInput'),
   sortedGroupMembers: overrideProps.sortedGroupMembers || [],
   skinTone: select(
     'skinTone',

ts/components/CompositionInput.tsx

@@ -76,6 +76,7 @@ export type Props = {
   onSubmit(message: string, mentions: Array<BodyRangeType>): unknown;
   getQuotedMessage(): unknown;
   clearQuotedMessage(): unknown;
+  setSecureInput(enabled: boolean): unknown;
 };
 
 const MAX_LENGTH = 64 * 1024;
@@ -103,6 +104,7 @@ export const CompositionInput: React.ComponentType<Props> = props => {
     skinTone,
     draftText,
     draftBodyRanges,
+    setSecureInput,
     getQuotedMessage,
     clearQuotedMessage,
     sortedGroupMembers,
@@ -259,6 +261,20 @@ export const CompositionInput: React.ComponentType<Props> = props => {
     return false;
   };
 
+  const onFocus = (): void => {
+    setSecureInput(true);
+  };
+
+  const onBlur = (): void => {
+    setSecureInput(false);
+  };
+
+  React.useEffect(() => {
+    return () => {
+      setSecureInput(false);
+    };
+  }, [setSecureInput]);
+
   const onEnter = (): boolean => {
     const quill = quillRef.current;
     const emojiCompletion = emojiCompletionRef.current;
@@ -494,6 +510,8 @@ export const CompositionInput: React.ComponentType<Props> = props => {
     onChange,
     onEnter,
     onEscape,
+    onFocus,
+    onBlur,
     onPickEmoji,
     onShortKeyEnter,
     onTab,
@@ -508,6 +526,8 @@ export const CompositionInput: React.ComponentType<Props> = props => {
       return (
         <ReactQuill
           className="module-composition-input__quill"
+          onFocus={() => callbacksRef.current.onFocus()}
+          onBlur={() => callbacksRef.current.onBlur()}
           onChange={() => callbacksRef.current.onChange()}
           defaultValue={delta}
           modules={{

ts/components/ForwardMessageModal.stories.tsx

@@ -53,6 +53,7 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   onSetSkinTone: action('onSetSkinTone'),
   recentEmojis: [],
   removeLinkPreview: action('removeLinkPreview'),
+  setSecureInput: action('setSecureInput'),
   skinTone: 0,
 });
 

ts/components/ForwardMessageModal.tsx

@@ -49,6 +49,7 @@ export type DataPropsType = {
     caretLocation?: number
   ) => unknown;
   onTextTooLong: () => void;
+  setSecureInput: (enabled: boolean) => void;
 } & Pick<EmojiButtonProps, 'recentEmojis' | 'skinTone'>;
 
 type ActionPropsType = Pick<
@@ -78,6 +79,7 @@ export const ForwardMessageModal: FunctionComponent<PropsType> = ({
   recentEmojis,
   removeLinkPreview,
   skinTone,
+  setSecureInput,
 }) => {
   const inputRef = useRef<null | HTMLInputElement>(null);
   const inputApiRef = React.useRef<InputApi | undefined>();
@@ -306,6 +308,7 @@ export const ForwardMessageModal: FunctionComponent<PropsType> = ({
                 onPickEmoji={onPickEmoji}
                 onSubmit={forwardMessage}
                 onTextTooLong={onTextTooLong}
+                setSecureInput={setSecureInput}
               />
               <div className="module-ForwardMessageModal__emoji">
                 <EmojiButton