diff --git a/packages/uikit-react-native/src/containers/SendbirdUIKitContainer.tsx b/packages/uikit-react-native/src/containers/SendbirdUIKitContainer.tsx index c56de5ad0..d7b28146a 100644 --- 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 index 3ca82edd3..c79e0dde9 100644 --- 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 index ffb2c0f6e..aa1296498 100644 --- 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; };