fix(richtext-lexical, ui): ui errors with Slash Menu in Lexical and SearchBar component in RTL (#14231)

Fixes #14162 (partially)

This fixes two issues:

- The SearchBarIcon. It was using left and right padding instead of
inline-start and inline-end.
- SlashMenu. This one is more complex. I left a fairly specific test
because Lexical doesn't expose this logic and our fork has already
diverged quite a bit.

There's a third issue reported in the issue about checklists, but I've
confirmed it's a Lexical regression that occurred in v0.35.0, as the bug
is reproducible at https://playground.lexical.dev/. I've already
[reported it](facebook/lexical#7929).


Before
<img width="278" height="102" alt="image"
src="https://github.com/user-attachments/assets/efcb4deb-517d-4a3a-97d5-c28b0e981824"
/>

After
<img width="322" height="154" alt="image"
src="https://github.com/user-attachments/assets/af60cd88-93c8-4d6d-8695-b4caaf0e7054"
/>

Before
<img width="282" height="390" alt="image"
src="https://github.com/user-attachments/assets/2a51b419-37d4-4287-98c9-91b3f70dd06f"
/>


After
<img width="359" height="454" alt="image"
src="https://github.com/user-attachments/assets/20595c0a-674f-4960-8e94-7f55d0a0b258"
/>

Author: GermanJablo

packages/richtext-lexical/src/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/LexicalMenu.tsx

@@ -499,8 +499,15 @@ export function useMenuAnchorRef(
 
         const rootElementRect = rootElement.getBoundingClientRect()
 
-        if (left + menuWidth > rootElementRect.right) {
+        const isRTL = document.dir === 'rtl' || document.documentElement.dir === 'rtl'
+        const anchorRect = anchorElem.getBoundingClientRect()
+        const leftBoundary = Math.max(0, rootElementRect.left)
+
+        if (!isRTL && left + menuWidth > rootElementRect.right) {
           containerDiv.style.left = `${rootElementRect.right - menuWidth + window.scrollX}px`
+        } else if (isRTL && menuRect.left < leftBoundary) {
+          const newLeft = leftBoundary + menuWidth - anchorRect.left
+          containerDiv.style.left = `${newLeft + window.scrollX}px`
         }
 
         const wouldGoOffBottomOfScreen = rawTop + menuHeight + VERTICAL_OFFSET > window.innerHeight

packages/ui/src/elements/SearchBar/index.scss

@@ -39,7 +39,10 @@
       border-radius: inherit;
       input {
         height: 100%;
-        padding: calc(var(--base) * 0.5) var(--base) calc(var(--base) * 0.5) var(--icon-width);
+        padding-bottom: calc(var(--base) * 0.5);
+        padding-top: calc(var(--base) * 0.5);
+        padding-inline-start: var(--icon-width);
+        padding-inline-end: var(--base);
         background-color: transparent;
       }
     }

test/lexical/baseConfig.ts

@@ -1,3 +1,6 @@
+import { en } from '@payloadcms/translations/languages/en'
+import { es } from '@payloadcms/translations/languages/es'
+import { he } from '@payloadcms/translations/languages/he'
 import { fileURLToPath } from 'node:url'
 import path from 'path'
 import { type Config } from 'payload'
@@ -85,7 +88,14 @@ export const baseConfig: Partial<Config> = {
   localization: {
     defaultLocale: 'en',
     fallback: true,
-    locales: ['en', 'es'],
+    locales: ['en', 'es', 'he'],
+  },
+  i18n: {
+    supportedLanguages: {
+      en,
+      es,
+      he,
+    },
   },
   typescript: {
     outputFile: path.resolve(dirname, 'payload-types.ts'),

test/lexical/collections/_LexicalFullyFeatured/e2e.spec.ts

@@ -208,3 +208,92 @@ describe('Lexical Fully Featured', () => {
     await expect(codeBlock.locator('.monaco-editor .view-overlays .squiggly-error')).toHaveCount(0)
   })
 })
+
+describe('Lexical Fully Featured, admin panel in RTL', () => {
+  let lexical: LexicalHelpers
+  beforeAll(async ({ browser }, testInfo) => {
+    testInfo.setTimeout(TEST_TIMEOUT_LONG)
+    process.env.SEED_IN_CONFIG_ONINIT = 'false' // Makes it so the payload config onInit seed is not run. Otherwise, the seed would be run unnecessarily twice for the initial test run - once for beforeEach and once for onInit
+    ;({ payload, serverURL } = await initPayloadE2ENoConfig<Config>({ dirname }))
+
+    const page = await browser.newPage()
+    await ensureCompilationIsDone({ page, serverURL })
+    await page.close()
+  })
+  beforeEach(async ({ page }) => {
+    const url = new AdminUrlUtil(serverURL, lexicalFullyFeaturedSlug)
+    lexical = new LexicalHelpers(page)
+    await page.goto(url.account)
+    await page.locator('.payload-settings__language .react-select').click()
+    const options = page.locator('.rs__option')
+    await options.locator('text=עברית').click()
+    await expect(page.getByText('משתמשים').first()).toBeVisible()
+    await page.goto(url.create)
+    await lexical.editor.first().focus()
+  })
+  test('slash menu should be positioned correctly in RTL', async ({ page }) => {
+    await page.keyboard.type('/')
+    const menu = page.locator('#slash-menu .slash-menu-popup')
+    await expect(menu).toBeVisible()
+
+    // left edge (0 indents)
+    const menuBox = (await menu.boundingBox())!
+    const slashBox = (await lexical.paragraph.getByText('/', { exact: true }).boundingBox())!
+    await expect(() => {
+      expect(menuBox.x).toBeGreaterThan(0)
+      expect(menuBox.x).toBeLessThan(slashBox.x)
+    }).toPass({ timeout: 100 })
+    await page.keyboard.press('Backspace')
+    await expect(menu).toBeHidden()
+
+    // A bit separated (3 tabs)
+    for (let i = 0; i < 3; i++) {
+      await page.keyboard.press('Tab')
+    }
+    await page.keyboard.type('/')
+    await expect(menu).toBeVisible()
+    const menuBox2 = (await menu.boundingBox())!
+    const slashBox2 = (await lexical.paragraph.getByText('/', { exact: true }).boundingBox())!
+    await expect(() => {
+      expect(menuBox2.x).toBe(menuBox.x)
+      // indents should allways be 40px. Please don't change this! https://github.com/payloadcms/payload/pull/13274
+      expect(slashBox2.x).toBe(slashBox.x + 40 * 3)
+    }).toPass({ timeout: 100 })
+    await page.keyboard.press('Backspace')
+    await expect(menu).toBeHidden()
+
+    // middle approx (13 tabs)
+    for (let i = 0; i < 10; i++) {
+      await page.keyboard.press('Tab')
+    }
+    await page.keyboard.type('/')
+    await expect(menu).toBeVisible()
+    const menuBox3 = (await menu.boundingBox())!
+    const slashBox3 = (await lexical.paragraph.getByText('/', { exact: true }).boundingBox())!
+    await expect(() => {
+      // The right edge of the menu should be approximately the same as the left edge of the slash
+      expect(menuBox3.x + menuBox3.width).toBeLessThan(slashBox3.x + 15)
+      expect(menuBox3.x + menuBox3.width).toBeGreaterThan(slashBox3.x - 15)
+      // indents should allways be 40px. Please don't change this! https://github.com/payloadcms/payload/pull/13274
+      expect(slashBox3.x).toBe(slashBox.x + 40 * 13)
+    }).toPass({ timeout: 100 })
+    await page.keyboard.press('Backspace')
+    await expect(menu).toBeHidden()
+
+    // right edge (27 tabs)
+    for (let i = 0; i < 14; i++) {
+      await page.keyboard.press('Tab')
+    }
+    await page.keyboard.type('/')
+    await expect(menu).toBeVisible()
+    const menuBox4 = (await menu.boundingBox())!
+    const slashBox4 = (await lexical.paragraph.getByText('/', { exact: true }).boundingBox())!
+    await expect(() => {
+      // The right edge of the menu should be approximately the same as the left edge of the slash
+      expect(menuBox4.x + menuBox4.width).toBeLessThan(slashBox4.x + 15)
+      expect(menuBox4.x + menuBox4.width).toBeGreaterThan(slashBox4.x - 15)
+      // indents should allways be 40px. Please don't change this! https://github.com/payloadcms/payload/pull/13274
+      expect(slashBox4.x).toBe(slashBox.x + 40 * 27)
+    }).toPass({ timeout: 100 })
+  })
+})

test/lexical/payload-types.ts

@@ -142,7 +142,7 @@ export interface Config {
   globalsSelect: {
     tabsWithRichText: TabsWithRichTextSelect<false> | TabsWithRichTextSelect<true>;
   };
-  locale: 'en' | 'es';
+  locale: 'en' | 'es' | 'he';
   user: User & {
     collection: 'users';
   };
@@ -1666,6 +1666,6 @@ export interface Auth {
 
 
 declare module 'payload' {
-  // @ts-ignore
+  // @ts-ignore 
   export interface GeneratedTypes extends Config {}
-}
+}

test/localization-rtl/e2e.spec.ts

@@ -0,0 +1,4 @@
+// I'm not sure why this suite exists without tests.
+// I left some RTL tests in the Lexical suite because they were very lexical-related.
+// See: test/lexical/collections/_LexicalFullyFeatured/e2e.spec.ts
+// I thought about deleting this folder, but maybe it will be useful to someone in the future.