fix(richtext-lexical): richtext fields don't respect RTL direction for Arabic and other RTL locales (#15964)

# Overview

Fixes RTL text direction not working in Lexical richtext fields when
using Arabic (or other RTL) locales. Text/Textarea fields worked fine —
Lexical just wasn't wired up to detect the locale direction.

## Key Changes

`Field.tsx` now calls `useLocale()` + `isFieldRTL()` and passes `rtl`
down through `LexicalProvider` → `LexicalEditor`, setting `dir="rtl"` on
the `editor-container` div when the locale is RTL.

Lexical always sets `dir="auto"` on paragraph nodes, which defaults to
LTR for empty content regardless of the parent's `dir` attribute. A CSS
rule in `LexicalEditor.scss` fixes this by forcing `direction: rtl` on
`[dir="auto"]` elements inside an RTL container.

`fieldRTL` and `fieldLocalized` in `isFieldRTL()` were typed as
`boolean` but callers already pass `boolean | undefined`. `packages/ui`
has `strict: false` so this was hidden there;
`packages/richtext-lexical` has `strict: true` and surfaced it. Made
both optional and exported `isFieldRTL` from `@payloadcms/ui` client
exports.

Author: PatrikKozak

packages/richtext-lexical/src/field/Field.tsx

@@ -6,10 +6,13 @@ import {
   FieldDescription,
   FieldError,
   FieldLabel,
+  isFieldRTL,
   RenderCustomComponent,
+  useConfig,
   useEditDepth,
   useEffectEvent,
   useField,
+  useLocale,
 } from '@payloadcms/ui'
 import { mergeFieldStyles } from '@payloadcms/ui/shared'
 import { dequal } from 'dequal/lite'
@@ -51,6 +54,17 @@ const RichTextComponent: React.FC<
 
   const readOnlyFromProps = readOnlyFromTopLevelProps || readOnlyFromAdmin
 
+  const locale = useLocale()
+  const {
+    config: { localization: localizationConfig },
+  } = useConfig()
+
+  const rtl = isFieldRTL({
+    fieldLocalized: localized,
+    locale,
+    localizationConfig: localizationConfig || undefined,
+  })
+
   const editDepth = useEditDepth()
 
   const memoizedValidate = useCallback<Validate>(
@@ -193,6 +207,7 @@ const RichTextComponent: React.FC<
               key={JSON.stringify({ path, rerenderProviderKey })} // makes sure lexical is completely re-rendered when initialValue changes, bypassing the lexical-internal value memoization. That way, external changes to the form will update the editor. More infos in PR description (https://github.com/payloadcms/payload/pull/5010)
               onChange={handleChange}
               readOnly={disabled}
+              rtl={rtl}
               value={value}
             />
           </BulkUploadProvider>

packages/richtext-lexical/src/lexical/LexicalEditor.scss

@@ -12,6 +12,10 @@
       font-family: var(--font-serif);
       font-size: base(0.8);
       letter-spacing: 0.02em;
+
+      &[dir='rtl'] [dir='auto'] {
+        direction: rtl;
+      }
     }
 
     &--show-gutter {

packages/richtext-lexical/src/lexical/LexicalEditor.tsx

@@ -30,9 +30,9 @@ export const LexicalEditor: React.FC<
   {
     editorContainerRef: React.RefObject<HTMLDivElement | null>
     isSmallWidthViewport: boolean
-  } & Pick<LexicalProviderProps, 'editorConfig' | 'onChange'>
+  } & Pick<LexicalProviderProps, 'editorConfig' | 'onChange' | 'rtl'>
 > = (props) => {
-  const { editorConfig, editorContainerRef, isSmallWidthViewport, onChange } = props
+  const { editorConfig, editorContainerRef, isSmallWidthViewport, onChange, rtl } = props
   const editorConfigContext = useEditorConfigContext()
   const [editor] = useLexicalComposerContext()
   const isEditable = useLexicalEditable()
@@ -93,7 +93,7 @@ export const LexicalEditor: React.FC<
           return <EditorPlugin clientProps={plugin.clientProps} key={plugin.key} plugin={plugin} />
         }
       })}
-      <div className="editor-container" ref={editorContainerRef}>
+      <div className="editor-container" dir={rtl ? 'rtl' : undefined} ref={editorContainerRef}>
         {editorConfig.features.plugins?.map((plugin) => {
           if (plugin.position === 'top') {
             return (

packages/richtext-lexical/src/lexical/LexicalProvider.tsx

@@ -24,6 +24,7 @@ export type LexicalProviderProps = {
   isSmallWidthViewport: boolean
   onChange: (editorState: EditorState, editor: LexicalEditor, tags: Set<string>) => void
   readOnly: boolean
+  rtl?: boolean
   value: SerializedEditorState
 }
 
@@ -50,8 +51,16 @@ const NestProviders = ({
 }
 
 export const LexicalProvider: React.FC<LexicalProviderProps> = (props) => {
-  const { composerKey, editorConfig, fieldProps, isSmallWidthViewport, onChange, readOnly, value } =
-    props
+  const {
+    composerKey,
+    editorConfig,
+    fieldProps,
+    isSmallWidthViewport,
+    onChange,
+    readOnly,
+    rtl,
+    value,
+  } = props
 
   const parentContext = useEditorConfigContext()
 
@@ -117,6 +126,7 @@ export const LexicalProvider: React.FC<LexicalProviderProps> = (props) => {
             editorContainerRef={editorContainerRef}
             isSmallWidthViewport={isSmallWidthViewport}
             onChange={onChange}
+            rtl={rtl}
           />
         </NestProviders>
       </EditorConfigProvider>

packages/ui/src/exports/client/index.ts

@@ -233,7 +233,7 @@ export { UIField } from '../../fields/UI/index.js'
 export { UploadField, UploadInput } from '../../fields/Upload/index.js'
 export type { UploadInputProps } from '../../fields/Upload/index.js'
 
-export { fieldBaseClass } from '../../fields/shared/index.js'
+export { fieldBaseClass, isFieldRTL } from '../../fields/shared/index.js'
 
 // forms
 

packages/ui/src/fields/shared/index.tsx

@@ -14,8 +14,8 @@ export function isFieldRTL({
   locale,
   localizationConfig,
 }: {
-  fieldLocalized: boolean
-  fieldRTL: boolean
+  fieldLocalized?: boolean
+  fieldRTL?: boolean
   locale: Locale
   localizationConfig?: SanitizedLocalizationConfig
 }) {

test/localization/collections/RichText/index.ts

@@ -1,6 +1,6 @@
 import type { CollectionConfig } from 'payload/types'
 
-import { lexicalEditor, TreeViewFeature } from '@payloadcms/richtext-lexical'
+import { FixedToolbarFeature, lexicalEditor, TreeViewFeature } from '@payloadcms/richtext-lexical'
 import { slateEditor } from '@payloadcms/richtext-slate'
 
 export const richTextSlug = 'richText'
@@ -24,7 +24,11 @@ export const RichTextCollection: CollectionConfig = {
       type: 'richText',
       localized: true,
       editor: lexicalEditor({
-        features: ({ defaultFeatures }) => [...defaultFeatures, TreeViewFeature()],
+        features: ({ defaultFeatures }) => [
+          ...defaultFeatures,
+          FixedToolbarFeature(),
+          TreeViewFeature(),
+        ],
       }),
     },
   ],

test/localization/e2e.spec.ts

@@ -933,6 +933,45 @@ describe('Localization', () => {
     })
   })
 
+  describe('RTL Lexical richtext', () => {
+    test('should render the Lexical editor with RTL direction when Arabic locale is active', async () => {
+      await page.goto(richTextURL.create)
+      await changeLocale(page, 'ar')
+
+      const editorContainer = page.locator('.rich-text-lexical .editor-container')
+      await expect(editorContainer).toBeVisible()
+
+      // editor-container should have dir="rtl" from locale detection
+      await expect(editorContainer).toHaveAttribute('dir', 'rtl')
+
+      // The paragraph element should have direction: rtl (from CSS rule targeting [dir="auto"] inside RTL container)
+      const paragraph = page.locator('.rich-text-lexical .ContentEditable__root p').first()
+      await expect(paragraph).toHaveCSS('direction', 'rtl')
+    })
+
+    test('should not render the Lexical editor with RTL direction when English locale is active', async () => {
+      await page.goto(richTextURL.create)
+
+      const editorContainer = page.locator('.rich-text-lexical .editor-container')
+      await expect(editorContainer).toBeVisible()
+
+      await expect(editorContainer).not.toHaveAttribute('dir', 'rtl')
+
+      const paragraph = page.locator('.rich-text-lexical .ContentEditable__root p').first()
+      await expect(paragraph).not.toHaveCSS('direction', 'rtl')
+    })
+
+    test('should have RTL direction in the Lexical editor before typing', async () => {
+      await page.goto(richTextURL.create)
+      await changeLocale(page, 'ar')
+
+      // Even before typing, the empty paragraph should be RTL due to our CSS fix.
+      // Without the fix, dir="auto" on an empty paragraph defaults to LTR.
+      const paragraph = page.locator('.rich-text-lexical .ContentEditable__root p').first()
+      await expect(paragraph).toHaveCSS('direction', 'rtl')
+    })
+  })
+
   describe('A11y', () => {
     test.fixme('Locale picker should have no accessibility violations', async ({}, testInfo) => {
       await page.goto(url.list)

test/localization/payload-types.ts

@@ -145,6 +145,9 @@ export interface Config {
     'global-drafts': GlobalDraftsSelect<false> | GlobalDraftsSelect<true>;
   };
   locale: 'xx' | 'en' | 'es' | 'pt' | 'ar' | 'hu';
+  widgets: {
+    collections: CollectionsWidget;
+  };
   user: User;
   jobs: {
     tasks: unknown;
@@ -1816,6 +1819,16 @@ export interface GlobalDraftsSelect<T extends boolean = true> {
   createdAt?: T;
   globalType?: T;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "collections_widget".
+ */
+export interface CollectionsWidget {
+  data?: {
+    [k: string]: unknown;
+  };
+  width: 'full';
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "auth".