[CLNP-4596] feat: add forceLeftToRightMessageLayout to enable LTR message layout display in RTL mode (#1184)

Addresses https://sendbird.atlassian.net/browse/CLNP-4596

This PR addresses the layout issues and CSS
[specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)
improvements for right-to-left (RTL) text direction in the Sendbird
UIKit React components.

The background for adding the `forceLeftToRightMessageLayout` flag is
that some of our users in the middle-east want to set
`htmlTextDirection='rtl'` while keeping the message layout in
left-to-right (LTR) format (outgoing messages on the right, incoming
messages on the left).


### Todo
- [x] The postcssRtl plugin options were modified.
- [x] Layout adjustments were made to ensure proper alignment and
behavior.

Author: AhyoungRyu

.storybook/main.ts

@@ -1,6 +1,7 @@
 import { mergeConfig } from 'vite';
 import svgr from 'vite-plugin-svgr';
 import { dirname, join } from 'path';
+import postcssRTLOptions from "../postcssRtlOptions.mjs";
 
 /**
  * This function is used to resolve the absolute path of a package.
@@ -22,9 +23,7 @@ export default {
       css: {
         postcss: {
           plugins: [
-            require('postcss-rtlcss')({
-              mode: 'override',
-            }),
+            require('postcss-rtlcss')(postcssRTLOptions),
           ],
         },
       },

apps/testing/src/utils/paramsBuilder.ts

@@ -30,6 +30,7 @@ export const useConfigParams = (initParams: InitialParams): ParamsAsProps => {
     isMultipleFilesMessageEnabled: parseValue(searchParams.get('enableMultipleFilesMessage')) ?? true,
     enableLegacyChannelModules: parseValue(searchParams.get('enableLegacyChannelModules')) ?? false,
     htmlTextDirection: parseValue(searchParams.get('htmlTextDirection')) ?? 'ltr',
+    forceLeftToRightMessageLayout: parseValue(searchParams.get('forceLeftToRightMessageLayout')) ?? false,
     uikitOptions: {},
   } as ParamsAsProps;
 

apps/testing/vite.config.ts

@@ -2,13 +2,15 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import vitePluginSvgr from 'vite-plugin-svgr';
 import postcssRtl from "postcss-rtlcss";
+// @ts-ignore
+import postcssRtlOptions from '../../postcssRtlOptions.mjs';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react(), vitePluginSvgr({ include: '**/*.svg' })],
   css: {
     postcss: {
-      plugins: [postcssRtl({ mode: 'override' })],
+      plugins: [postcssRtl(postcssRtlOptions)],
     },
   },
 });

postcssRtlOptions.mjs

@@ -0,0 +1,66 @@
+const CLASS_NAMES_TO_CHECK = [
+  // Normal message list
+  'sendbird-message-content',
+  // Thread message list
+  'sendbird-thread-list-item-content',
+  'sendbird-parent-message-info'
+];
+
+export default {
+  prefixSelectorTransformer: (prefix, selector) => {
+    // To increase specificity https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity 
+    // for certain classnames within .sendbird-conversation__messages context.
+    // This only applies when the root dir is set as 'rtl' but forceLeftToRightMessageLayout is true.
+    if (CLASS_NAMES_TO_CHECK.some(cls => selector.includes(cls))) {
+      return `.sendbird-conversation__messages${prefix} ${selector}`;
+    }
+    return `${prefix} ${selector}`;
+  },
+}
+
+// Why we're doing this:
+// Let's say a root div element has `dir="rtl"` (with `htmlTextDirection={'rtl'}` prop setting).
+
+/*
+<div class="sendbird-root" dir="rtl">
+  ...
+  // Message list
+  <div class="sendbird-conversation__messages" dir="ltr">
+     <div class="emoji-container">
+       <span class="emoji-inner">😀</span>
+     </div>
+  </div>
+</div>
+*/
+
+// Even though the message list element has dir="ltr" attribute,
+// some children elements of the message list would have their styles overridden by the root one with the CSS settings below.
+// Why? postcss-rtlcss plugin generates the CSS settings in order of rtl -> ltr.
+
+/*
+[dir="rtl"] .sendbird-message-content .emoji-container .emoji-inner {
+    right: -84px; // Specificity (0.6.0)
+}
+[dir="ltr"] .sendbird-message-content .emoji-container .emoji-inner {
+    left: -84px; // Specificity (0.6.0)
+}
+*/
+
+// If both CSS settings have the same specificity, the one generated first (rtl) will be applied,
+// which is not the desired result since we want the `.emoji-inner` element to have the ltr setting.
+
+// To increase the specificity of the ltr setting,
+// we can directly connect the classname of the element which has `dir='ltr'` to the children's selector in this way:
+
+/*
+.sendbird-conversation__messages[dir="ltr"] .sendbird-message-content .emoji-container .emoji-inner {
+  left: -84px; // Specificity (0.7.0), will be applied
+}
+
+[dir="rtl"] .sendbird-message-content .emoji-container .emoji-inner {
+    right: -84px; // Specificity (0.6.0), will be ignored
+}
+[dir="ltr"] .sendbird-message-content .emoji-container .emoji-inner {
+    left: -84px; // Specificity (0.6.0), will be ignored
+}
+*/

rollup.config.mjs

@@ -16,6 +16,7 @@ import ts2 from "rollup-plugin-typescript2"
 import pkg from "./package.json" assert {type: "json"};
 import inputs from "./rollup.module-exports.mjs";
 import { readFileSync, writeFileSync } from 'fs';
+import postcssRTLOptions from "./postcssRtlOptions.mjs";
 
 const APP_VERSION_STRING = "__react_dev_mode__";
 
@@ -59,7 +60,7 @@ export default {
           const result = scss.renderSync({ file: id });
           resolvecss({ code: result.css.toString() });
         }),
-      plugins: [autoprefixer, postcssRtl({ mode: 'override' })],
+      plugins: [autoprefixer, postcssRtl(postcssRTLOptions)],
       sourceMap: false,
       extract: "dist/index.css",
       extensions: [".sass", ".scss", ".css"],

src/hooks/useHTMLTextDirection.tsx

@@ -15,4 +15,18 @@ const useHTMLTextDirection = (direction: HTMLTextDirection) => {
   }, [direction]);
 };
 
+export const useMessageLayoutDirection = (direction: HTMLTextDirection, forceLeftToRightMessageLayout: boolean, loading: boolean) => {
+  useEffect(() => {
+    if (loading) return;
+    const messageListElements = document.getElementsByClassName('sendbird-conversation__messages');
+    if (messageListElements.length > 0) {
+      Array.from(messageListElements).forEach((elem: HTMLElement) => {
+        elem.dir = forceLeftToRightMessageLayout
+          ? 'ltr'
+          : direction;
+      });
+    }
+  }, [direction, forceLeftToRightMessageLayout, loading]);
+};
+
 export default useHTMLTextDirection;

src/lib/Sendbird.tsx

@@ -103,6 +103,7 @@ export interface SendbirdProviderProps extends CommonUIKitConfigProps, React.Pro
   disableMarkAsDelivered?: boolean;
   breakpoint?: string | boolean;
   htmlTextDirection?: HTMLTextDirection;
+  forceLeftToRightMessageLayout?: boolean;
   renderUserProfile?: (props: RenderUserProfileProps) => React.ReactElement;
   onUserProfileMessage?: (channel: GroupChannel) => void;
   uikitOptions?: UIKitOptions;
@@ -178,6 +179,7 @@ const SendbirdSDK = ({
   isMultipleFilesMessageEnabled = false,
   eventHandlers,
   htmlTextDirection = 'ltr',
+  forceLeftToRightMessageLayout = false,
 }: SendbirdProviderProps): React.ReactElement => {
   const { logLevel = '', userMention = {}, isREMUnitEnabled = false, pubSub: customPubSub } = config;
   const { isMobile } = useMediaQueryContext();
@@ -400,6 +402,7 @@ const SendbirdSDK = ({
           isMessageReceiptStatusEnabledOnChannelList: configs.groupChannel.channelList.enableMessageReceiptStatus,
           showSearchIcon: sdkInitialized && configsWithAppAttr(sdk).groupChannel.setting.enableMessageSearch,
           htmlTextDirection,
+          forceLeftToRightMessageLayout,
         },
         eventHandlers,
         emojiManager,

src/lib/index.scss

@@ -3,3 +3,4 @@
 @import '../styles/light-theme';
 @import '../styles/dark-theme';
 @import '../styles/misc-colors';
+@import '../styles/postcss-rtl';

src/lib/types.ts

@@ -73,6 +73,7 @@ export interface SendBirdStateConfig {
   accessToken?: string;
   theme: string;
   htmlTextDirection: HTMLTextDirection;
+  forceLeftToRightMessageLayout: boolean;
   pubSub: SBUGlobalPubSub;
   logger: Logger;
   setCurrentTheme: (theme: 'light' | 'dark') => void;

src/modules/App/index.tsx

@@ -45,6 +45,7 @@ export interface AppProps {
   disableAutoSelect?: AppLayoutProps['disableAutoSelect'];
   onProfileEditSuccess?: AppLayoutProps['onProfileEditSuccess'];
   htmlTextDirection?: AppLayoutProps['htmlTextDirection'];
+  forceLeftToRightMessageLayout?: AppLayoutProps['forceLeftToRightMessageLayout'];
 
   /**
    * The default value is false.
@@ -102,6 +103,7 @@ export default function App(props: AppProps) {
     enableLegacyChannelModules = false,
     uikitOptions,
     htmlTextDirection = 'ltr',
+    forceLeftToRightMessageLayout = false,
     // The below configs are duplicates of the Dashboard UIKit Configs.
     // Since their default values will be set in the Sendbird component,
     // we don't need to set them here.
@@ -158,6 +160,7 @@ export default function App(props: AppProps) {
       isMentionEnabled={isMentionEnabled}
       isVoiceMessageEnabled={isVoiceMessageEnabled}
       htmlTextDirection={htmlTextDirection}
+      forceLeftToRightMessageLayout={forceLeftToRightMessageLayout}
     >
       <AppLayout
         isMessageGroupingEnabled={isMessageGroupingEnabled}

src/modules/App/types.ts

@@ -15,6 +15,7 @@ export interface AppLayoutProps {
   isReactionEnabled?: boolean;
   replyType?: 'NONE' | 'QUOTE_REPLY' | 'THREAD';
   htmlTextDirection?: HTMLTextDirection;
+  forceLeftToRightMessageLayout?: boolean;
   isMessageGroupingEnabled?: boolean;
   isMultipleFilesMessageEnabled?: boolean;
   allowProfileEdit?: boolean;

src/modules/Channel/context/ChannelProvider.tsx

@@ -51,6 +51,7 @@ import { useSendMultipleFilesMessage } from './hooks/useSendMultipleFilesMessage
 import { useHandleChannelPubsubEvents } from './hooks/useHandleChannelPubsubEvents';
 import { PublishingModuleType } from '../../internalInterfaces';
 import { ChannelActionTypes } from './dux/actionTypes';
+import { useMessageLayoutDirection } from '../../../hooks/useHTMLTextDirection';
 
 export interface MessageListParams extends Partial<SDKMessageListParams> { // make `prevResultSize` and `nextResultSize` to optional
   /** @deprecated It won't work even if you activate this props */
@@ -211,6 +212,8 @@ const ChannelProvider = (props: ChannelContextProps) => {
     onUserProfileMessage,
     markAsReadScheduler,
     groupChannel,
+    htmlTextDirection,
+    forceLeftToRightMessageLayout,
   } = config;
   const sdk = globalStore?.stores?.sdkStore?.sdk;
   const sdkInit = globalStore?.stores?.sdkStore?.initialized;
@@ -378,6 +381,12 @@ const ChannelProvider = (props: ChannelContextProps) => {
     markAsReadScheduler,
   });
 
+  useMessageLayoutDirection(
+    htmlTextDirection,
+    forceLeftToRightMessageLayout,
+    loading,
+  );
+
   // callbacks for Message CURD actions
   const deleteMessage = useDeleteMessageCallback(
     { currentGroupChannel, messagesDispatcher },

src/modules/GroupChannel/context/GroupChannelProvider.tsx

@@ -26,6 +26,7 @@ import PUBSUB_TOPICS, { PubSubSendMessagePayload } from '../../../lib/pubSub/top
 import { PubSubTypes } from '../../../lib/pubSub';
 import { useMessageActions } from './hooks/useMessageActions';
 import { getIsReactionEnabled } from '../../../utils/getIsReactionEnabled';
+import { useMessageLayoutDirection } from '../../../hooks/useHTMLTextDirection';
 
 type OnBeforeHandler<T> = (params: T) => T | Promise<T>;
 type MessageListQueryParamsType = Omit<MessageCollectionParams, 'filter'> & MessageFilterParams;
@@ -47,6 +48,7 @@ interface ContextBaseType {
   disableUserProfile?: boolean;
   disableMarkAsRead?: boolean;
   scrollBehavior?: 'smooth' | 'auto';
+  forceLeftToRightMessageLayout?: boolean;
 
   startingPoint?: number;
 
@@ -141,7 +143,7 @@ export const GroupChannelProvider = (props: GroupChannelProviderProps) => {
   const { config, stores } = useSendbirdStateContext();
 
   const { sdkStore } = stores;
-  const { markAsReadScheduler, logger } = config;
+  const { markAsReadScheduler, logger, htmlTextDirection, forceLeftToRightMessageLayout } = config;
 
   // State
   const [quoteMessage, setQuoteMessage] = useState<SendableMessageType | null>(null);
@@ -253,6 +255,12 @@ export const GroupChannelProvider = (props: GroupChannelProviderProps) => {
     if (_animatedMessageId) setAnimatedMessageId(_animatedMessageId);
   }, [_animatedMessageId]);
 
+  useMessageLayoutDirection(
+    htmlTextDirection,
+    forceLeftToRightMessageLayout,
+    messageDataSource.loading,
+  );
+
   const scrollToBottom = usePreservedCallback(async (animated?: boolean) => {
     if (!scrollRef.current) return;
 

src/modules/Thread/components/ThreadUI/index.tsx

@@ -18,6 +18,7 @@ import Label, { LabelTypography, LabelColors } from '../../../../ui/Label';
 import { isAboutSame } from '../../context/utils';
 import { MessageProvider } from '../../../Message/context/MessageProvider';
 import { SendableMessageType } from '../../../../utils';
+import { classnames } from '../../../../utils/utils';
 
 export interface ThreadUIProps {
   renderHeader?: () => React.ReactElement;
@@ -148,7 +149,7 @@ const ThreadUI: React.FC<ThreadUIProps> = ({
         )
       }
       <div
-        className="sendbird-thread-ui--scroll"
+        className={classnames('sendbird-thread-ui--scroll, sendbird-conversation__messages')}
         ref={scrollRef}
         onScroll={onScroll}
       >

src/modules/Thread/context/ThreadProvider.tsx

@@ -33,6 +33,7 @@ import { PublishingModuleType, useSendMultipleFilesMessage } from './hooks/useSe
 import { SendableMessageType } from '../../../utils';
 import { useThreadFetchers } from './hooks/useThreadFetchers';
 import type { OnBeforeDownloadFileMessageType } from '../../GroupChannel/context/GroupChannelProvider';
+import { useMessageLayoutDirection } from '../../../hooks/useHTMLTextDirection';
 
 export type ThreadProviderProps = {
   children?: React.ReactElement;
@@ -93,7 +94,7 @@ export const ThreadProvider = (props: ThreadProviderProps) => {
   const { user } = userStore;
   const sdkInit = sdkStore?.initialized;
   // // config
-  const { logger, pubSub, onUserProfileMessage } = config;
+  const { logger, pubSub, onUserProfileMessage, htmlTextDirection, forceLeftToRightMessageLayout } = config;
 
   const isMentionEnabled = config.groupChannel.enableMention;
   const isReactionEnabled = config.groupChannel.enableReactions;
@@ -167,6 +168,13 @@ export const ThreadProvider = (props: ThreadProviderProps) => {
     }
   }, [stores.sdkStore.initialized, config.isOnline, initialize]);
 
+  useMessageLayoutDirection(
+    htmlTextDirection,
+    forceLeftToRightMessageLayout,
+    // we're assuming that if the thread message list is empty, it's in the loading state
+    allThreadMessages.length === 0,
+  );
+
   const toggleReaction = useToggleReactionCallback({ currentChannel }, { logger });
 
   // Send Message Hooks

src/stories/apps/GroupChannelApp.stories.tsx

@@ -30,6 +30,7 @@ const meta: Meta<typeof App> = {
         'isMessageGroupingEnabled',
         'disableAutoSelect',
         'htmlTextDirection',
+        'forceLeftToRightMessageLayout',
       ],
     },
   },
@@ -142,6 +143,12 @@ const meta: Meta<typeof App> = {
       description: 'A property that sets the text direction of the HTML. `ltr` is for left-to-right, and `rtl` is for right-to-left.',
       control: 'radio',
       options: ['ltr', 'rtl'],
+    },
+    forceLeftToRightMessageLayout: {
+      type: 'boolean',
+      description:
+        'A property that forces the layout of the message to be left-to-right. This would be only useful when the htmlTextDirection is set to right-to-left, but you want to display the message layout in left-to-right.',
+      control: 'boolean',
     }
   },
 };
@@ -177,4 +184,5 @@ Default.args = {
   isMessageGroupingEnabled: true,
   disableAutoSelect: false,
   htmlTextDirection: 'ltr',
+  forceLeftToRightMessageLayout: false,
 };

src/styles/_postcss-rtl.scss

@@ -0,0 +1,37 @@
+// This mixin adjusts CSS properties to handle RTL (right-to-left) layout fixes especially when 
+// - htmlTextDirection='rtl'
+// - forceLeftToRightMessageLayout=true
+// for specific components to increase specificity and ensure proper alignment.
+@mixin layout-adjustments() {
+  .sendbird-avatar-img {
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+  .sendbird-voice-message-item-body__playback-time {
+    position: absolute;
+    right: 12px;
+    left: unset;
+    top: 15px;
+  }
+  .sendbird-reaction-badge__inner {
+    padding-left: 20px;
+    padding-right: 4px;
+    .sendbird-reaction-badge__inner__icon {
+      left: 4px;
+      right: unset;
+    }
+  }
+}
+
+.sendbird-message-content {
+ @include layout-adjustments();
+}
+
+.sendbird-thread-list-item-content {
+  @include layout-adjustments();
+}
+
+.sendbird-parent-message-info {
+  @include layout-adjustments();
+}