fix: #3591840 RTL support for Canvas visual editor (logical CSS properties, Radix DirectionProvider, autocomplete magnifier, and Undo/Redo timelines)

Problem/Motivation

The Canvas editor UI assumes LTR. In an RTL interface language (Hebrew, Arabic) panels are not mirrored, scale-to-fit centering is wrong, Radix primitives ignore the document direction, and a few directional icons are not flipped.

Proposed resolution

  • Provide the document direction (<html dir>) to Radix via DirectionProvider, placed inside Theme (which hard-codes its own ltr provider). Accordion and Menubar get dir explicitly because they pin their own @radix-ui/react-direction copy.
  • Convert physical CSS properties in the editor chrome to logical ones (margin-inline-*, padding-inline-*, inset-inline-*, border-inline-*).
  • Sidebar resize and scale-to-fit centering account for the direction; the editor pane stays dir="ltr" so scroll coordinates are stable.
  • Mirror the search magnifier, date/time icons, undo/redo icons and Radix Themes menu shortcut/chevron in RTL.
  • Component preview iframe gets dir from the language query parameter's direction, falling back to the UI direction.
  • Form text inputs use dir="auto" for mixed-direction content.
  • Playwright test rtl.spec.ts covers panel placement and computed direction, search icon, sidebar resize, scale-to-fit centering and undo icon.

Testing instructions

  1. Site with English + Hebrew/Arabic. Open the editor in English: library on the left, settings on the right.
  2. Switch to the RTL language: panels mirrored, scale-to-fit centers the canvas between the sidebars, search icon on the right, menus/submenus open inward.
  3. npx playwright test tests/src/Playwright/tests/isolatedPerTest/rtl.spec.ts

AI disclosure

Developed with AI assistance (coding agents); every change reviewed and tested by the author.

Closes #3591840

Edited by Lionel Enkaoua

Merge request reports

Loading
Loading