Loading
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 viaDirectionProvider, placed insideTheme(which hard-codes its ownltrprovider). Accordion and Menubar getdirexplicitly because they pin their own@radix-ui/react-directioncopy. - 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
dirfrom thelanguagequery parameter's direction, falling back to the UI direction. - Form text inputs use
dir="auto"for mixed-direction content. - Playwright test
rtl.spec.tscovers panel placement and computed direction, search icon, sidebar resize, scale-to-fit centering and undo icon.
Testing instructions
- Site with English + Hebrew/Arabic. Open the editor in English: library on the left, settings on the right.
- 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.
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