fix: metion block should be grouped

sendbird · Nov 21, 2024 · 662e6f8 · 662e6f8
1 parent 89401bb
commit 662e6f8
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 21 deletions.
diff --git a/packages/uikit-react-native/src/containers/SendbirdUIKitContainer.tsx b/packages/uikit-react-native/src/containers/SendbirdUIKitContainer.tsx
@@ -412,7 +412,6 @@ const useConfigInstance = ({ imageCompression, userMention, voiceMessage }: Send
       debounceMills: userMention?.debounceMills ?? MentionConfig.DEFAULT.DEBOUNCE_MILLS,
       delimiter: MentionConfig.DEFAULT.DELIMITER,
       trigger: MentionConfig.DEFAULT.TRIGGER,
-      forceTriggerLeftInRTL: MentionConfig.DEFAULT.FORCE_TRIGGER_LEFT_IN_RTL,
     });
   }, [userMention?.mentionLimit, userMention?.suggestionLimit, userMention?.debounceMills]);
 

diff --git a/packages/uikit-react-native/src/libs/MentionConfig.ts b/packages/uikit-react-native/src/libs/MentionConfig.ts
@@ -4,13 +4,6 @@ export interface MentionConfigInterface {
   debounceMills: number;
   delimiter: string;
   trigger: string;
-  /**
-   * This configuration keeps the trigger positioned to the left in RTL mode, instead of being placed after `username@`.
-   * @example
-   *  RTL: `@username`
-   *  LTR: `@username`
-   */
-  forceTriggerLeftInRTL: boolean;
 }
 
 class MentionConfig {
@@ -20,7 +13,6 @@ class MentionConfig {
     DEBOUNCE_MILLS: 300,
     DELIMITER: ' ',
     TRIGGER: '@',
-    FORCE_TRIGGER_LEFT_IN_RTL: true,
   };
   constructor(private _config: MentionConfigInterface) {}
 
@@ -43,10 +35,6 @@ class MentionConfig {
   get trigger() {
     return this._config.trigger;
   }
-
-  get forceTriggerLeftInRTL() {
-    return this._config.forceTriggerLeftInRTL;
-  }
 }
 
 export default MentionConfig;
diff --git a/packages/uikit-react-native/src/libs/MentionManager.tsx b/packages/uikit-react-native/src/libs/MentionManager.tsx
@@ -22,12 +22,15 @@ class MentionManager {
     this._templateRegex = createMentionTemplateRegex(this.config.trigger);
   }
 
-  get triggerDirPrefixForDisplay() {
-    if (this.config.forceTriggerLeftInRTL) {
-      return SPAN_DIRECTION.LRM;
-    }
-    return I18nManager.isRTL ? SPAN_DIRECTION.RLM : SPAN_DIRECTION.LRM;
-  }
+  // Note: When the input starts in LTR and a mentioned user's name is in RTL, it appears as "Hello @{cibarA}."
+  // If typing continues in RTL, the mention is rendered as: "Hello @{txeTlanoitiddA}{cibarA}."
+  //
+  // This appears natural in RTL, but the mention syntax becomes unclear.
+  // To address this, if RTL is active, we reset subsequent spans using the LRM(Left-To-Right-Mark) Unicode character.
+  // By applying this trick, the result will be "Hello @{cibarA} {txeTlanoitiddA}," where the mention block remains distinct.
+  getDirectionOfNextSpan = () => {
+    return I18nManager.isRTL ? SPAN_DIRECTION.LRM : '';
+  };
 
   public rangeHelpers = {
     inRangeUnderOver(start: number, num: number, end: number) {
@@ -131,9 +134,9 @@ class MentionManager {
    * @description User to @user.nickname text format
    * */
   public asMentionedMessageText = (user: SendbirdUser, delimiter = false) => {
-    const prefix = this.triggerDirPrefixForDisplay;
+    const prefix = '';
     const content = `${this.config.trigger}${user.nickname}`;
-    const postfix = delimiter ? this.config.delimiter : '';
+    const postfix = this.getDirectionOfNextSpan() + (delimiter ? this.config.delimiter : '');
 
     return prefix + content + postfix;
   };