Improvements to the media editor

ts/state/smart/CompositionArea.tsx

@@ -9,6 +9,10 @@ import { mapDispatchToProps } from '../actions';
 import type { Props as ComponentPropsType } from '../../components/CompositionArea';
 import { CompositionArea } from '../../components/CompositionArea';
 import type { StateType } from '../reducer';
+import type {
+  DraftBodyRanges,
+  HydratedBodyRangesType,
+} from '../../types/BodyRange';
 import { isConversationSMSOnly } from '../../util/isConversationSMSOnly';
 import { dropNull } from '../../util/dropNull';
 import { imageToBlurHash } from '../../util/imageToBlurHash';
@@ -53,7 +57,7 @@ import type { SmartCompositionRecordingProps } from './CompositionRecording';
 import { SmartCompositionRecording } from './CompositionRecording';
 import type { SmartCompositionRecordingDraftProps } from './CompositionRecordingDraft';
 import { SmartCompositionRecordingDraft } from './CompositionRecordingDraft';
-import { BodyRange } from '../../types/BodyRange';
+import { hydrateRanges } from '../../types/BodyRange';
 
 type ExternalProps = {
   id: string;
@@ -133,6 +137,12 @@ const mapStateToProps = (state: StateType, props: ExternalProps) => {
 
   const lastEditableMessageId = getLastEditableMessageId(state);
 
+  const convertDraftBodyRangesIntoHydrated = (
+    bodyRanges: DraftBodyRanges | undefined
+  ): HydratedBodyRangesType | undefined => {
+    return hydrateRanges(bodyRanges, conversationSelector);
+  };
+
   return {
     // Base
     conversationId: id,
@@ -150,6 +160,7 @@ const mapStateToProps = (state: StateType, props: ExternalProps) => {
     sendCounter,
     shouldHidePopovers,
     theme: getTheme(state),
+    convertDraftBodyRangesIntoHydrated,
 
     // AudioCapture
     errorDialogAudioRecorderType:
@@ -204,19 +215,7 @@ const mapStateToProps = (state: StateType, props: ExternalProps) => {
     groupAdmins: getGroupAdminsSelector(state)(conversation.id),
 
     draftText: dropNull(draftText),
-    draftBodyRanges: draftBodyRanges?.map(bodyRange => {
-      if (BodyRange.isMention(bodyRange)) {
-        const mentionConvo = conversationSelector(bodyRange.mentionAci);
-
-        return {
-          ...bodyRange,
-          conversationID: mentionConvo.id,
-          replacementText: mentionConvo.title,
-        };
-      }
-
-      return bodyRange;
-    }),
+    draftBodyRanges: hydrateRanges(draftBodyRanges, conversationSelector),
     renderSmartCompositionRecording: (
       recProps: SmartCompositionRecordingProps
     ) => {