Spam Reporting UI changes

ts/components/MediaEditor.tsx

@@ -176,13 +176,12 @@ export function MediaEditor({
   const [isEmojiPopperOpen, setEmojiPopperOpen] = useState<boolean>(false);
 
   const [caption, setCaption] = useState(draftText ?? '');
-  const [captionBodyRanges, setCaptionBodyRanges] = useState<
-    DraftBodyRanges | undefined
-  >(draftBodyRanges);
+  const [captionBodyRanges, setCaptionBodyRanges] =
+    useState<DraftBodyRanges | null>(draftBodyRanges);
 
   const conversationSelector = useSelector(getConversationSelector);
   const hydratedBodyRanges = useMemo(
-    () => hydrateRanges(captionBodyRanges, conversationSelector),
+    () => hydrateRanges(captionBodyRanges ?? undefined, conversationSelector),
     [captionBodyRanges, conversationSelector]
   );
 
@@ -1297,7 +1296,7 @@ export function MediaEditor({
               <div className="MediaEditor__tools--input dark-theme">
                 <CompositionInput
                   draftText={caption}
-                  draftBodyRanges={hydratedBodyRanges}
+                  draftBodyRanges={hydratedBodyRanges ?? null}
                   getPreferredBadge={getPreferredBadge}
                   i18n={i18n}
                   inputApi={inputApiRef}
@@ -1308,6 +1307,7 @@ export function MediaEditor({
                     setCaptionBodyRanges(bodyRanges);
                     setCaption(messageText);
                   }}
+                  skinTone={skinTone ?? null}
                   onPickEmoji={onPickEmoji}
                   onSubmit={noop}
                   onTextTooLong={onTextTooLong}
@@ -1316,6 +1316,16 @@ export function MediaEditor({
                   sendCounter={0}
                   sortedGroupMembers={sortedGroupMembers}
                   theme={ThemeType.dark}
+                  // Only needed for state updates and we need to override those
+                  conversationId={null}
+                  // Cannot enter media editor while editing
+                  draftEditMessage={null}
+                  // We don't use the large editor mode
+                  large={null}
+                  // panels do not appear over the media editor
+                  shouldHidePopovers={null}
+                  // link previews not displayed with media
+                  linkPreviewResult={null}
                 >
                   <EmojiButton
                     className="StoryViewsNRepliesModal__emoji-button"
@@ -1394,7 +1404,7 @@ export function MediaEditor({
                     contentType: IMAGE_PNG,
                     data,
                     caption: caption !== '' ? caption : undefined,
-                    captionBodyRanges,
+                    captionBodyRanges: captionBodyRanges ?? undefined,
                     blurHash,
                   });
                 }}