chore: added edit feature to mentioned message

Author: bang9

packages/uikit-react-native/src/domain/groupChannel/component/GroupChannelInput/EditInput.tsx

@@ -50,7 +50,11 @@ const EditInput = forwardRef<RNTextInput, EditInputProps>(function EditInput(
 
   const onPressSave = () => {
     if (editMessage.isUserMessage()) {
-      onUpdateUserMessage(text, editMessage).catch(() => toast.show(STRINGS.TOAST.UPDATE_MSG_ERROR, 'error'));
+      const mention = {
+        userIds: mentionedUsers.map((it) => it.user.userId),
+        messageTemplate: mentionManager.textToMentionedMessageTemplate(text, mentionedUsers),
+      };
+      onUpdateUserMessage(text, editMessage, mention).catch(() => toast.show(STRINGS.TOAST.UPDATE_MSG_ERROR, 'error'));
     }
     setEditMessage();
     onChangeText('');

packages/uikit-react-native/src/domain/groupChannel/component/GroupChannelInput/SendInput.tsx

@@ -58,7 +58,11 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
   const toast = useToast();
 
   const onPressSend = () => {
-    onSendUserMessage(text).catch(() => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error'));
+    const mention = {
+      userIds: mentionedUsers.map((it) => it.user.userId),
+      messageTemplate: mentionManager.textToMentionedMessageTemplate(text, mentionedUsers),
+    };
+    onSendUserMessage(text, mention).catch(() => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error'));
     onChangeText('');
   };
 

packages/uikit-react-native/src/domain/groupChannel/component/GroupChannelInput/index.tsx

@@ -22,6 +22,7 @@ import SendInput from './SendInput';
 const AUTO_FOCUS = Platform.select({ ios: false, android: true, default: false });
 const KEYBOARD_AVOID_VIEW_BEHAVIOR = Platform.select({ ios: 'padding' as const, default: undefined });
 
+// TODO: Refactor 'Edit' mode to clearly
 const GroupChannelInput = (props: GroupChannelProps['Input']) => {
   const { top, left, right, bottom } = useSafeAreaInsets();
   const { colors } = useUIKitTheme();
@@ -39,11 +40,11 @@ const GroupChannelInput = (props: GroupChannelProps['Input']) => {
   const [inputHeight, setInputHeight] = useState(styles.inputDefault.height);
 
   const { selection, setSelection, onSelectionChange, textInputRef, text, onChangeText, mentionedUsers } =
-    useMentionTextInput();
+    useMentionTextInput({ editMessage });
 
   useTypingTrigger(text, channel);
   useTextPersistenceOnDisabled(text, onChangeText, chatAvailableState.disabled);
-  useAutoFocusOnEditMode(textInputRef, onChangeText, editMessage);
+  useAutoFocusOnEditMode(textInputRef, editMessage);
 
   const onPressToMention: GroupChannelProps['MentionSuggestionList']['onPressToMention'] = (
     user,
@@ -147,12 +148,10 @@ const useTextPersistenceOnDisabled = (text: string, setText: (val: string) => vo
 
 const useAutoFocusOnEditMode = (
   textInputRef: MutableRefObject<TextInput | undefined>,
-  setText: (val: string) => void,
   editMessage?: SendbirdUserMessage | SendbirdFileMessage,
 ) => {
   useEffect(() => {
     if (editMessage?.isUserMessage()) {
-      setText(editMessage.message ?? '');
       if (!AUTO_FOCUS) setTimeout(() => textInputRef.current?.focus(), 500);
     }
   }, [editMessage]);

packages/uikit-react-native/src/domain/groupChannel/types.ts

@@ -16,6 +16,11 @@ import type {
 import type { FileType } from '../../platform/types';
 import type { CommonComponent, MentionedUser, Range } from '../../types';
 
+type UserMessageMentionParams = {
+  messageTemplate: SendbirdUserMessageCreateParams['mentionedMessageTemplate'];
+  userIds: SendbirdUserMessageCreateParams['mentionedUserIds'];
+};
+
 export interface GroupChannelProps {
   Fragment: {
     channel: SendbirdGroupChannel;
@@ -92,9 +97,13 @@ export interface GroupChannelProps {
   Input: {
     shouldRenderInput: boolean;
     onSendFileMessage: (file: FileType) => Promise<void>;
-    onSendUserMessage: (text: string) => Promise<void>;
+    onSendUserMessage: (text: string, mention?: UserMessageMentionParams) => Promise<void>;
     onUpdateFileMessage: (editedFile: FileType, message: SendbirdFileMessage) => Promise<void>;
-    onUpdateUserMessage: (editedText: string, message: SendbirdUserMessage) => Promise<void>;
+    onUpdateUserMessage: (
+      editedText: string,
+      message: SendbirdUserMessage,
+      mention?: UserMessageMentionParams,
+    ) => Promise<void>;
     MentionSuggestionList: (props: GroupChannelProps['MentionSuggestionList']) => JSX.Element | null;
   };
 

packages/uikit-react-native/src/fragments/createGroupChannelFragment.tsx

@@ -75,19 +75,29 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
       const processedParams = await onBeforeSendFileMessage({ file });
       await sendFileMessage(processedParams);
     });
-    const onSendUserMessage: GroupChannelProps['Input']['onSendUserMessage'] = useFreshCallback(async (text) => {
-      const processedParams = await onBeforeSendUserMessage({ message: text });
-      await sendUserMessage(processedParams);
-    });
+    const onSendUserMessage: GroupChannelProps['Input']['onSendUserMessage'] = useFreshCallback(
+      async (text, mention) => {
+        const processedParams = await onBeforeSendUserMessage({
+          message: text,
+          mentionedUserIds: mention?.userIds,
+          mentionedMessageTemplate: mention?.messageTemplate,
+        });
+        await sendUserMessage(processedParams);
+      },
+    );
     const onUpdateFileMessage: GroupChannelProps['Input']['onUpdateFileMessage'] = useFreshCallback(
       async (editedFile, message) => {
         const processedParams = await onBeforeSendFileMessage({ file: editedFile });
         await updateFileMessage(message.messageId, processedParams);
       },
     );
     const onUpdateUserMessage: GroupChannelProps['Input']['onUpdateUserMessage'] = useFreshCallback(
-      async (editedText, message) => {
-        const processedParams = await onBeforeSendUserMessage({ message: editedText });
+      async (editedText, message, mention) => {
+        const processedParams = await onBeforeSendUserMessage({
+          message: editedText,
+          mentionedUserIds: mention?.userIds,
+          mentionedMessageTemplate: mention?.messageTemplate,
+        });
         await updateUserMessage(message.messageId, processedParams);
       },
     );

packages/uikit-react-native/src/hooks/useMentionTextInput.ts

@@ -1,12 +1,12 @@
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import type { NativeSyntheticEvent, TextInput, TextInputSelectionChangeEventData } from 'react-native';
 
-import { replace, useFreshCallback } from '@sendbird/uikit-utils';
+import { SendbirdFileMessage, SendbirdUserMessage, replace, useFreshCallback } from '@sendbird/uikit-utils';
 
 import type { MentionedUser, Range } from '../types';
 import { useSendbirdChat } from './useContext';
 
-const useMentionTextInput = () => {
+const useMentionTextInput = (params: { editMessage?: SendbirdUserMessage | SendbirdFileMessage }) => {
   const { mentionManager } = useSendbirdChat();
 
   const mentionedUsersRef = useRef<MentionedUser[]>([]);
@@ -15,6 +15,28 @@ const useMentionTextInput = () => {
   const [text, setText] = useState('');
   const [selection, setSelection] = useState({ start: 0, end: 0 });
 
+  // TODO: Refactor text edit logic more clearly
+  useEffect(() => {
+    if (
+      params.editMessage?.mentionedMessageTemplate &&
+      params.editMessage?.mentionedUsers &&
+      mentionManager.mentionEnabled
+    ) {
+      const result = mentionManager.templateToTextAndMentionedUsers(
+        params.editMessage.mentionedMessageTemplate,
+        params.editMessage.mentionedUsers,
+      );
+
+      mentionedUsersRef.current = result.mentionedUsers;
+      setText(result.mentionedText);
+    } else {
+      mentionedUsersRef.current = [];
+      if (params.editMessage?.isUserMessage()) {
+        setText(params.editMessage.message);
+      }
+    }
+  }, [params.editMessage]);
+
   const onChangeText = useFreshCallback((_nextText: string, addedMentionedUser?: MentionedUser) => {
     const prevText = text;
     let nextText = _nextText;

packages/uikit-react-native/src/libs/MentionManager.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { Text, createStyleSheet } from '@sendbird/uikit-react-native-foundation';
 import type { SendbirdUser } from '@sendbird/uikit-utils';
-import { createMentionTemplateRegex } from '@sendbird/uikit-utils';
+import { createMentionTemplateRegex, replaceWithRegex } from '@sendbird/uikit-utils';
 
 import type { MentionedUser, Range } from '../types';
 import type { MentionConfigInterface } from './MentionConfig';
@@ -171,9 +171,43 @@ class MentionManager {
    * @description Convert @{user.id} template to @user.nickname text and MentionedUser[] array.
    * */
   public templateToTextAndMentionedUsers = (template: string, mentionedUsers: SendbirdUser[]) => {
+    const actualMentionedUsers: MentionedUser[] = [];
+
+    let offsetToMove = 0;
+    const mentionedText = replaceWithRegex(
+      template,
+      this.templateRegex,
+      ({ match, matchIndex, groups }) => {
+        const user = mentionedUsers.find((it) => it.userId === groups[2]);
+        if (user && typeof matchIndex === 'number') {
+          const userIdSpan = match;
+          const userNicknameSpan = this.asMentionedMessageText(user);
+
+          const offsetAfterConverted = userNicknameSpan.length - userIdSpan.length;
+
+          const originalRange: Range = {
+            start: matchIndex,
+            end: matchIndex + userIdSpan.length,
+          };
+
+          const convertedRange: Range = {
+            start: Math.max(0, originalRange.start + offsetToMove),
+            end: originalRange.end + offsetToMove + offsetAfterConverted,
+          };
+
+          offsetToMove += offsetAfterConverted;
+
+          actualMentionedUsers.push({ range: convertedRange, user });
+          return userNicknameSpan;
+        }
+        return match;
+      },
+      '',
+    ).join('');
+
     return {
-      mentionedText: '',
-      mentionedUsers: [] as MentionedUser[],
+      mentionedText,
+      mentionedUsers: actualMentionedUsers,
     };
   };
 }

packages/uikit-utils/src/shared/regex.ts

@@ -33,23 +33,29 @@ export const createMentionTemplateRegex = (trigger: string) => new RegExp(`(${tr
 export const replaceWithRegex = <T>(
   text: string,
   regex: RegExp,
-  replacer: (params: { match: string; groups: string[]; index: number; keyPrefix: string }) => T,
+  replacer: (params: {
+    match: string;
+    groups: string[];
+    matchIndex: number | undefined;
+    index: number;
+    keyPrefix: string;
+  }) => T,
   keyPrefix: string,
 ) => {
   const matches = [...text.matchAll(regex)];
   const founds = matches.map((value) => {
     const text = value[0];
     const start = value.index ?? 0;
     const end = start + text.length;
-    return { text, start, end, groups: value };
+    return { text, start, end, groups: value, matchIndex: value.index };
   });
 
   const items: Array<T | string> = [text];
   let cursor = 0;
-  founds.forEach(({ text, start, end, groups }, index) => {
+  founds.forEach(({ text, start, end, groups, matchIndex }, index) => {
     const restText = items.pop() as string;
     const head = restText.slice(0, start - cursor);
-    const mid = replacer({ match: text, groups, index, keyPrefix });
+    const mid = replacer({ match: text, groups, matchIndex, index, keyPrefix });
     const tail = restText.slice(end - cursor);
     items.push(head, mid, tail);
     cursor = end;