[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}