fix: improve RTL rendering for paragraphs, quotes, and lists

src/app/components/message/layout/Base.tsx

@@ -34,7 +34,11 @@ export const MessageTextBody = as<'div', css.MessageTextBodyVariants & { notice?
       as={asComp}
       size="T400"
       priority={notice ? '300' : '400'}
-      className={classNames(css.MessageTextBody({ preWrap, jumboEmoji, emote }), className)}
+      className={classNames(
+        css.MessageTextBody({ preWrap, jumboEmoji, emote }),
+        css.MessageTextBodyBidi,
+        className
+      )}
       {...props}
       ref={ref}
     />

src/app/components/message/layout/layout.css.ts

@@ -1,4 +1,4 @@
-import { createVar, keyframes, style, styleVariants } from '@vanilla-extract/css';
+import { createVar, globalStyle, keyframes, style, styleVariants } from '@vanilla-extract/css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { DefaultReset, color, config, toRem } from 'folds';
 
@@ -179,9 +179,25 @@ export const UsernameBold = style({
   fontWeight: 550,
 });
 
+export const MessageTextBodyBidi = style({
+  unicodeBidi: 'plaintext',
+});
+
+globalStyle(`${MessageTextBodyBidi} p`, { unicodeBidi: 'plaintext' });
+globalStyle(`${MessageTextBodyBidi} li`, { unicodeBidi: 'plaintext' });
+globalStyle(`${MessageTextBodyBidi} blockquote`, { unicodeBidi: 'plaintext' });
+globalStyle(`${MessageTextBodyBidi} pre`, { unicodeBidi: 'plaintext' });
+globalStyle(`${MessageTextBodyBidi} h1`, { unicodeBidi: 'plaintext' });
+globalStyle(`${MessageTextBodyBidi} h2`, { unicodeBidi: 'plaintext' });
+globalStyle(`${MessageTextBodyBidi} h3`, { unicodeBidi: 'plaintext' });
+globalStyle(`${MessageTextBodyBidi} h4`, { unicodeBidi: 'plaintext' });
+globalStyle(`${MessageTextBodyBidi} h5`, { unicodeBidi: 'plaintext' });
+globalStyle(`${MessageTextBodyBidi} h6`, { unicodeBidi: 'plaintext' });
+
 export const MessageTextBody = recipe({
   base: {
     wordBreak: 'break-word',
+    unicodeBidi: 'plaintext',
   },
   variants: {
     preWrap: {

src/app/components/room-card/style.css.ts

@@ -24,6 +24,7 @@ export const RoomCardTopic = style({
   WebkitBoxOrient: 'vertical',
   overflow: 'hidden',
   cursor: 'pointer',
+  unicodeBidi: 'plaintext',
 
   ':hover': {
     textDecoration: 'underline',

src/app/components/room-intro/RoomIntro.tsx

@@ -66,7 +66,9 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
             {name}
           </Text>
           <Text size="T400" priority="400">
-            {typeof topic === 'string' ? topic : 'This is the beginning of conversation.'}
+            <span style={{ unicodeBidi: 'plaintext' }}>
+              {typeof topic === 'string' ? topic : 'This is the beginning of conversation.'}
+            </span>
           </Text>
           {creatorName && ts && (
             <Text size="T200" priority="300">

src/app/components/room-topic-viewer/style.css.ts

@@ -20,4 +20,5 @@ export const ModalContent = style({
 export const ModalTopic = style({
   whiteSpace: 'pre-wrap',
   wordBreak: 'break-word',
+  unicodeBidi: 'plaintext',
 });

src/app/plugins/react-custom-html-parser.tsx

@@ -46,6 +46,34 @@ const ReactPrism = lazy(() => import('./react-prism/ReactPrism'));
 
 const EMOJI_REG_G = new RegExp(`${URL_NEG_LB}(${EMOJI_PATTERN})`, 'g');
 
+const RTL_CHAR_REG = /[\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC]/;
+const LTR_CHAR_REG = /[A-Za-z\u00C0-\u00FF]/;
+
+const collectDomText = (nodes: ChildNode[] | undefined, textParts: string[]) => {
+  if (!nodes) return;
+  nodes.forEach((node) => {
+    if (node instanceof DOMText) {
+      textParts.push(node.data);
+      return;
+    }
+    if (node instanceof Element) {
+      collectDomText(node.children as ChildNode[] | undefined, textParts);
+    }
+  });
+};
+
+const detectDomDirection = (nodes: ChildNode[] | undefined): 'rtl' | 'ltr' | undefined => {
+  const textParts: string[] = [];
+  collectDomText(nodes, textParts);
+  const text = textParts.join('');
+  for (let i = 0; i < text.length; i += 1) {
+    const ch = text[i];
+    if (RTL_CHAR_REG.test(ch)) return 'rtl';
+    if (LTR_CHAR_REG.test(ch)) return 'ltr';
+  }
+  return undefined;
+};
+
 export const LINKIFY_OPTS: LinkifyOpts = {
   attributes: {
     target: '_blank',
@@ -376,8 +404,14 @@ export const getReactCustomHtmlParser = (
         }
 
         if (name === 'p') {
+          const dir = detectDomDirection(children as unknown as ChildNode[]);
           return (
-            <Text {...props} className={classNames(css.Paragraph, css.MarginSpaced)} size="Inherit">
+            <Text
+              {...props}
+              dir={dir ?? 'auto'}
+              className={classNames(css.Paragraph, css.MarginSpaced)}
+              size="Inherit"
+            >
               {domToReact(children, opts)}
             </Text>
           );
@@ -388,28 +422,46 @@ export const getReactCustomHtmlParser = (
         }
 
         if (name === 'blockquote') {
+          const dir = detectDomDirection(children as unknown as ChildNode[]);
           return (
-            <Text {...props} size="Inherit" as="blockquote" className={css.BlockQuote}>
+            <Text
+              {...props}
+              dir={dir ?? 'auto'}
+              size="Inherit"
+              as="blockquote"
+              className={css.BlockQuote}
+            >
               {domToReact(children, opts)}
             </Text>
           );
         }
 
         if (name === 'ul') {
+          const dir = detectDomDirection(children as unknown as ChildNode[]);
           return (
-            <ul {...props} className={css.List}>
+            <ul {...props} dir={dir ?? 'auto'} className={css.List}>
               {domToReact(children, opts)}
             </ul>
           );
         }
         if (name === 'ol') {
+          const dir = detectDomDirection(children as unknown as ChildNode[]);
           return (
-            <ol {...props} className={css.List}>
+            <ol {...props} dir={dir ?? 'auto'} className={css.List}>
               {domToReact(children, opts)}
             </ol>
           );
         }
 
+        if (name === 'li') {
+          const dir = detectDomDirection(children as unknown as ChildNode[]);
+          return (
+            <li {...props} dir={dir ?? 'auto'}>
+              {domToReact(children, opts)}
+            </li>
+          );
+        }
+
         if (name === 'code') {
           if (parent && 'name' in parent && parent.name === 'pre') {
             const codeReact = domToReact(children, opts);

src/app/styles/CustomHtml.css.ts

@@ -35,8 +35,8 @@ export const BlockQuote = style([
   DefaultReset,
   MarginSpaced,
   {
-    paddingLeft: config.space.S200,
-    borderLeft: `${config.borderWidth.B700} solid ${color.SurfaceVariant.ContainerLine}`,
+    paddingInlineStart: config.space.S200,
+    borderInlineStart: `${config.borderWidth.B700} solid ${color.SurfaceVariant.ContainerLine}`,
     fontStyle: 'italic',
   },
 ]);
@@ -125,7 +125,7 @@ export const List = style([
   MarginSpaced,
   {
     padding: `0 ${config.space.S100}`,
-    paddingLeft: config.space.S600,
+    paddingInlineStart: config.space.S600,
   },
 ]);