feat: apply rtl support to open channel fragments

sendbird · Nov 21, 2024 · ed9b5b5 · ed9b5b5
1 parent f72d672
commit ed9b5b5
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 58 deletions.
diff --git a/packages/uikit-react-native-foundation/src/ui/OpenChannelMessage/Message.user.og.tsx b/packages/uikit-react-native-foundation/src/ui/OpenChannelMessage/Message.user.og.tsx
@@ -24,38 +24,51 @@ const OpenGraphUserMessage = (props: OpenChannelMessageProps<SendbirdUserMessage
       <PressBox onPress={onPress} onLongPress={onLongPress}>
         {({ pressed }) => (
           <MessageContainer pressed={pressed} {...rest}>
-            <Text body3 color={color.enabled.textMsg}>
-              <RegexText
+            <Box alignItems={'flex-start'}>
+              <Text
                 body3
                 color={color.enabled.textMsg}
-                patterns={[
-                  {
-                    regex: urlRegexRough,
-                    replacer({ match, parentProps, keyPrefix, index }) {
-                      return (
-                        <Text
-                          {...parentProps}
-                          key={`${keyPrefix}-${index}`}
-                          onPress={() => onPressURL?.(match)}
-                          onLongPress={onLongPress}
-                          color={colors.primary}
-                          style={parentProps?.style}
-                        >
-                          {match}
-                        </Text>
-                      );
-                    },
-                  },
-                ]}
+                suppressHighlighting
+                supportRTLAlign
+                originalText={props.message.message}
               >
-                {props.message.message}
-              </RegexText>
-              {Boolean(props.message.updatedAt) && (
-                <Text body3 color={color.enabled.textMsgPostfix}>
-                  {props.strings?.edited ?? ' (edited)'}
-                </Text>
-              )}
-            </Text>
+                <RegexText
+                  body3
+                  suppressHighlighting
+                  supportRTLAlign
+                  originalText={props.message.message}
+                  color={color.enabled.textMsg}
+                  patterns={[
+                    {
+                      regex: urlRegexRough,
+                      replacer({ match, parentProps, keyPrefix, index }) {
+                        return (
+                          <Text
+                            {...parentProps}
+                            key={`${keyPrefix}-${index}`}
+                            onPress={() => onPressURL?.(match)}
+                            onLongPress={onLongPress}
+                            color={colors.primary}
+                            style={parentProps?.style}
+                            supportRTLAlign
+                            originalText={match}
+                          >
+                            {match}
+                          </Text>
+                        );
+                      },
+                    },
+                  ]}
+                >
+                  {props.message.message}
+                </RegexText>
+                {Boolean(props.message.updatedAt) && (
+                  <Text body3 color={color.enabled.textMsgPostfix}>
+                    {props.strings?.edited ?? ' (edited)'}
+                  </Text>
+                )}
+              </Text>
+            </Box>
           </MessageContainer>
         )}
       </PressBox>
@@ -73,6 +86,7 @@ const OpenGraphUserMessage = (props: OpenChannelMessageProps<SendbirdUserMessage
                   borderRadius={8}
                   style={styles.ogContainer}
                   backgroundColor={pressed ? color.pressed.bubbleBackground : color.enabled.bubbleBackground}
+                  alignItems={'flex-start'}
                 >
                   <Text numberOfLines={1} caption2 color={colors.onBackground02} style={styles.ogUrl}>
                     {props.message.ogMetaData.url}

diff --git a/packages/uikit-react-native-foundation/src/ui/OpenChannelMessage/Message.user.tsx b/packages/uikit-react-native-foundation/src/ui/OpenChannelMessage/Message.user.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import type { SendbirdUserMessage } from '@sendbird/uikit-utils';
 import { urlRegexStrict } from '@sendbird/uikit-utils';
 
+import Box from '../../components/Box';
 import PressBox from '../../components/PressBox';
 import RegexText from '../../components/RegexText';
 import Text from '../../components/Text';
@@ -20,38 +21,54 @@ const UserMessage = (props: OpenChannelMessageProps<SendbirdUserMessage, Props>)
     <PressBox onPress={onPress} onLongPress={onLongPress}>
       {({ pressed }) => (
         <MessageContainer pressed={pressed} {...rest}>
-          <Text body3 color={color.enabled.textMsg}>
-            <RegexText
+          <Box alignItems={'flex-start'}>
+            <Text
               body3
               color={color.enabled.textMsg}
-              patterns={[
-                {
-                  regex: urlRegexStrict,
-                  replacer({ match, parentProps, keyPrefix, index }) {
-                    return (
-                      <Text
-                        {...parentProps}
-                        key={`${keyPrefix}-${index}`}
-                        onPress={() => onPressURL?.(match)}
-                        onLongPress={onLongPress}
-                        color={colors.primary}
-                        style={parentProps?.style}
-                      >
-                        {match}
-                      </Text>
-                    );
-                  },
-                },
-              ]}
+              suppressHighlighting
+              supportRTLAlign
+              originalText={props.message.message}
             >
-              {props.message.message}
-            </RegexText>
-            {Boolean(props.message.updatedAt) && (
-              <Text body3 color={color.enabled.textMsgPostfix}>
-                {props.strings?.edited ?? ' (edited)'}
-              </Text>
-            )}
-          </Text>
+              <RegexText
+                body3
+                suppressHighlighting
+                supportRTLAlign
+                originalText={props.message.message}
+                color={color.enabled.textMsg}
+                patterns={[
+                  {
+                    regex: urlRegexStrict,
+                    replacer({ match, parentProps, keyPrefix, index }) {
+                      return (
+                        <Text
+                          {...parentProps}
+                          key={`${keyPrefix}-${index}`}
+                          onPress={() => onPressURL?.(match)}
+                          onLongPress={onLongPress}
+                          color={colors.primary}
+                          style={parentProps?.style}
+                        >
+                          {match}
+                        </Text>
+                      );
+                    },
+                  },
+                ]}
+              >
+                {props.message.message}
+              </RegexText>
+              {Boolean(props.message.updatedAt) && (
+                <Text
+                  body3
+                  color={color.enabled.textMsgPostfix}
+                  supportRTLAlign
+                  originalText={props.strings?.edited ?? ' (edited)'}
+                >
+                  {props.strings?.edited ?? ' (edited)'}
+                </Text>
+              )}
+            </Text>
+          </Box>
         </MessageContainer>
       )}
     </PressBox>