Improvements to the media editor

ts/state/ducks/conversations.ts

@@ -70,7 +70,7 @@ import type {
   AciString,
   PniString,
 } from '../../types/ServiceId';
-import { isAciString } from '../../types/ServiceId';
+import { isAciString } from '../../util/isAciString';
 import { MY_STORY_ID, StorySendMode } from '../../types/Stories';
 import * as Errors from '../../types/errors';
 import {

ts/state/ducks/stories.ts

@@ -21,7 +21,7 @@ import type { StoryViewTargetType, StoryViewType } from '../../types/Stories';
 import type { SyncType } from '../../jobs/helpers/syncHelpers';
 import type { StoryDistributionIdString } from '../../types/StoryDistributionId';
 import type { ServiceIdString } from '../../types/ServiceId';
-import { isAciString } from '../../types/ServiceId';
+import { isAciString } from '../../util/isAciString';
 import * as log from '../../logging/log';
 import { TARGETED_CONVERSATION_CHANGED } from './conversations';
 import { SIGNAL_ACI } from '../../types/SignalConversation';

ts/state/smart/CallManager.tsx

@@ -17,7 +17,7 @@ import type {
   ActiveCallType,
   GroupCallRemoteParticipantType,
 } from '../../types/Calling';
-import { isAciString } from '../../types/ServiceId';
+import { isAciString } from '../../util/isAciString';
 import type { AciString } from '../../types/ServiceId';
 import { CallMode, CallState } from '../../types/Calling';
 import type { StateType } from '../reducer';

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
     ) => {

ts/state/smart/StoryCreator.tsx

@@ -7,7 +7,6 @@ import { useSelector } from 'react-redux';
 import { ThemeType, type LocalizerType } from '../../types/Util';
 import type { StateType } from '../reducer';
 import { LinkPreviewSourceType } from '../../types/LinkPreview';
-import { SmartCompositionTextArea } from './CompositionTextArea';
 import { StoryCreator } from '../../components/StoryCreator';
 import {
   getAllSignalConnections,
@@ -18,29 +17,35 @@ import {
   selectMostRecentActiveStoryTimestampByGroupOrDistributionList,
 } from '../selectors/conversations';
 import { getDistributionListsWithMembers } from '../selectors/storyDistributionLists';
-import { getIntl, getUserConversationId } from '../selectors/user';
+import { getIntl, getPlatform, getUserConversationId } from '../selectors/user';
 import {
   getInstalledStickerPacks,
   getRecentStickers,
 } from '../selectors/stickers';
 import { getAddStoryData } from '../selectors/stories';
 import {
-  getEmojiSkinTone,
-  getHasSetMyStoriesPrivacy,
-} from '../selectors/items';
+  getIsFormattingFlagEnabled,
+  getIsFormattingSpoilersFlagEnabled,
+} from '../selectors/composer';
 import { getLinkPreview } from '../selectors/linkPreviews';
 import { getPreferredBadgeSelector } from '../selectors/badges';
+import {
+  getEmojiSkinTone,
+  getHasSetMyStoriesPrivacy,
+  getTextFormattingEnabled,
+} from '../selectors/items';
 import { imageToBlurHash } from '../../util/imageToBlurHash';
 import { processAttachment } from '../../util/processAttachment';
-import { useConversationsActions } from '../ducks/conversations';
 import { useActions as useEmojisActions } from '../ducks/emojis';
+import { useAudioPlayerActions } from '../ducks/audioPlayer';
+import { useComposerActions } from '../ducks/composer';
+import { useConversationsActions } from '../ducks/conversations';
 import { useGlobalModalActions } from '../ducks/globalModals';
 import { useItemsActions } from '../ducks/items';
 import { useLinkPreviewActions } from '../ducks/linkPreviews';
 import { useRecentEmojis } from '../selectors/emojis';
 import { useStoriesActions } from '../ducks/stories';
 import { useStoryDistributionListsActions } from '../ducks/storyDistributionLists';
-import { useAudioPlayerActions } from '../ducks/audioPlayer';
 
 export type PropsType = {
   file?: File;
@@ -99,6 +104,15 @@ export function SmartStoryCreator(): JSX.Element | null {
   const { onSetSkinTone } = useItemsActions();
   const { onUseEmoji } = useEmojisActions();
   const { pauseVoiceNotePlayer } = useAudioPlayerActions();
+  const { onTextTooLong } = useComposerActions();
+  const { onUseEmoji: onPickEmoji } = useEmojisActions();
+
+  const isFormattingEnabled = useSelector(getTextFormattingEnabled);
+  const isFormattingFlagEnabled = useSelector(getIsFormattingFlagEnabled);
+  const isFormattingSpoilersFlagEnabled = useSelector(
+    getIsFormattingSpoilersFlagEnabled
+  );
+  const platform = useSelector(getPlatform);
 
   return (
     <StoryCreator
@@ -113,6 +127,9 @@ export function SmartStoryCreator(): JSX.Element | null {
       i18n={i18n}
       imageToBlurHash={imageToBlurHash}
       installedPacks={installedPacks}
+      isFormattingEnabled={isFormattingEnabled}
+      isFormattingFlagEnabled={isFormattingFlagEnabled}
+      isFormattingSpoilersFlagEnabled={isFormattingSpoilersFlagEnabled}
       isSending={isSending}
       linkPreview={linkPreviewForSource(LinkPreviewSourceType.StoryCreator)}
       me={me}
@@ -123,19 +140,21 @@ export function SmartStoryCreator(): JSX.Element | null {
       onDeleteList={deleteDistributionList}
       onDistributionListCreated={createDistributionList}
       onHideMyStoriesFrom={hideMyStoriesFrom}
+      onMediaPlaybackStart={pauseVoiceNotePlayer}
+      onPickEmoji={onPickEmoji}
       onRemoveMembers={removeMembersFromDistributionList}
       onRepliesNReactionsChanged={allowsRepliesChanged}
       onSelectedStoryList={verifyStoryListMembers}
       onSend={sendStoryMessage}
       onSetSkinTone={onSetSkinTone}
+      onTextTooLong={onTextTooLong}
       onUseEmoji={onUseEmoji}
       onViewersUpdated={updateStoryViewers}
-      onMediaPlaybackStart={pauseVoiceNotePlayer}
       ourConversationId={ourConversationId}
+      platform={platform}
       processAttachment={processAttachment}
       recentEmojis={recentEmojis}
       recentStickers={recentStickers}
-      renderCompositionTextArea={SmartCompositionTextArea}
       sendStoryModalOpenStateChanged={sendStoryModalOpenStateChanged}
       setMyStoriesToAllSignalConnections={setMyStoriesToAllSignalConnections}
       signalConnections={signalConnections}