Disable pasting in composer when in background

ts/components/CompositionArea.tsx

@@ -111,6 +111,7 @@ export type OwnProps = Readonly<{
   isGroupV1AndDisabled: boolean | null;
   isMissingMandatoryProfileSharing: boolean | null;
   isSignalConversation: boolean | null;
+  isActive: boolean;
   lastEditableMessageId: string | null;
   recordingState: RecordingState;
   messageCompositionId: string;
@@ -236,6 +237,7 @@ export const CompositionArea = memo(function CompositionArea({
   imageToBlurHash,
   isDisabled,
   isSignalConversation,
+  isActive,
   lastEditableMessageId,
   messageCompositionId,
   pushPanelForConversation,
@@ -1001,6 +1003,7 @@ export const CompositionArea = memo(function CompositionArea({
             i18n={i18n}
             inputApi={inputApiRef}
             isFormattingEnabled={isFormattingEnabled}
+            isActive={isActive}
             large={large}
             linkPreviewLoading={linkPreviewLoading}
             linkPreviewResult={linkPreviewResult}

ts/components/CompositionInput.stories.tsx

@@ -33,6 +33,7 @@ const useProps = (overrideProps: Partial<Props> = {}): Props => {
     clearQuotedMessage: action('clearQuotedMessage'),
     getPreferredBadge: () => undefined,
     getQuotedMessage: action('getQuotedMessage'),
+    isActive: true,
     isFormattingEnabled:
       overrideProps.isFormattingEnabled === false
         ? overrideProps.isFormattingEnabled

ts/components/CompositionInput.tsx

@@ -105,6 +105,7 @@ export type Props = Readonly<{
   large: boolean | null;
   inputApi: React.MutableRefObject<InputApi | undefined> | null;
   isFormattingEnabled: boolean;
+  isActive: boolean;
   sendCounter: number;
   skinTone: NonNullable<EmojiPickDataType['skinTone']> | null;
   draftText: string | null;
@@ -158,6 +159,7 @@ export function CompositionInput(props: Props): React.ReactElement {
     i18n,
     inputApi,
     isFormattingEnabled,
+    isActive,
     large,
     linkPreviewLoading,
     linkPreviewResult,
@@ -409,9 +411,14 @@ export function CompositionInput(props: Props): React.ReactElement {
     isMouseDown,
     previousFormattingEnabled,
     previousIsMouseDown,
-    quillRef,
   ]);
 
+  React.useEffect(() => {
+    quillRef.current?.getModule('signalClipboard').updateOptions({
+      isDisabled: !isActive,
+    });
+  }, [isActive]);
+
   const onEnter = (): boolean => {
     const quill = quillRef.current;
     const emojiCompletion = emojiCompletionRef.current;
@@ -702,7 +709,9 @@ export function CompositionInput(props: Props): React.ReactElement {
           defaultValue={delta}
           modules={{
             toolbar: false,
-            signalClipboard: true,
+            signalClipboard: {
+              isDisabled: !isActive,
+            },
             clipboard: {
               matchers: [
                 ['IMG', matchEmojiImage],

ts/components/CompositionTextArea.tsx

@@ -21,6 +21,7 @@ import * as grapheme from '../util/grapheme';
 export type CompositionTextAreaProps = {
   bodyRanges: HydratedBodyRangesType | null;
   i18n: LocalizerType;
+  isActive: boolean;
   isFormattingEnabled: boolean;
   maxLength?: number;
   placeholder?: string;
@@ -58,6 +59,7 @@ export function CompositionTextArea({
   draftText,
   getPreferredBadge,
   i18n,
+  isActive,
   isFormattingEnabled,
   maxLength,
   onChange,
@@ -139,6 +141,7 @@ export function CompositionTextArea({
         getPreferredBadge={getPreferredBadge}
         getQuotedMessage={noop}
         i18n={i18n}
+        isActive={isActive}
         isFormattingEnabled={isFormattingEnabled}
         inputApi={inputApiRef}
         large

ts/components/ForwardMessagesModal.stories.tsx

@@ -62,6 +62,7 @@ const useProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
       {...props}
       getPreferredBadge={() => undefined}
       i18n={i18n}
+      isActive
       isFormattingEnabled
       onPickEmoji={action('onPickEmoji')}
       onSetSkinTone={action('onSetSkinTone')}

ts/components/ForwardMessagesModal.tsx

@@ -492,6 +492,7 @@ function ForwardMessageEditor({
       <RenderCompositionTextArea
         bodyRanges={draft.bodyRanges ?? null}
         draftText={draft.messageBody ?? ''}
+        isActive
         onChange={onChange}
         onSubmit={onSubmit}
         theme={theme}

ts/components/MediaEditor.tsx

@@ -1300,6 +1300,7 @@ export function MediaEditor({
                   getPreferredBadge={getPreferredBadge}
                   i18n={i18n}
                   inputApi={inputApiRef}
+                  isActive
                   isFormattingEnabled={isFormattingEnabled}
                   moduleClassName="StoryViewsNRepliesModal__input"
                   onCloseLinkPreview={noop}

ts/components/StoryViewsNRepliesModal.tsx

@@ -236,6 +236,7 @@ export function StoryViewsNRepliesModal({
               getPreferredBadge={getPreferredBadge}
               i18n={i18n}
               inputApi={inputApiRef}
+              isActive
               isFormattingEnabled={isFormattingEnabled}
               moduleClassName="StoryViewsNRepliesModal__input"
               onCloseLinkPreview={noop}

ts/components/conversation/ConversationView.tsx

@@ -8,6 +8,7 @@ import { useEscapeHandling } from '../../hooks/useEscapeHandling';
 export type PropsType = {
   conversationId: string;
   hasOpenModal: boolean;
+  hasOpenPanel: boolean;
   isSelectMode: boolean;
   onExitSelectMode: () => void;
   processAttachments: (options: {
@@ -24,6 +25,7 @@ export type PropsType = {
 export function ConversationView({
   conversationId,
   hasOpenModal,
+  hasOpenPanel,
   isSelectMode,
   onExitSelectMode,
   processAttachments,
@@ -57,6 +59,10 @@ export function ConversationView({
 
   const onPaste = React.useCallback(
     (event: React.ClipboardEvent<HTMLDivElement>) => {
+      if (hasOpenModal || hasOpenPanel) {
+        return;
+      }
+
       if (!event.clipboardData) {
         return;
       }
@@ -102,7 +108,7 @@ export function ConversationView({
         event.preventDefault();
       }
     },
-    [conversationId, processAttachments]
+    [conversationId, processAttachments, hasOpenModal, hasOpenPanel]
   );
 
   useEscapeHandling(