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

Problem/Motivation

The Canvas visual editor UI hardcoded physical CSS properties (margin-left/right, padding-left/right, left/right, float: left) and lacked dynamic direction propagation (dir="rtl"). In Right-to-Left (RTL) language environments (such as Hebrew or Arabic), panel layouts, tab triggers, inputs, timelines, and editor frame scroll coordinates remained aligned to the left or broke visual layout structure.

Proposed Changes & RTL Feature Overview

1. Editor Frame & "Scale to Fit" RTL Centering

  • Added explicit dir="ltr" and direction: ltr to .editorPane in EditorFrame.tsx and EditorFrame.module.css.
  • Preserves standard horizontal scroll coordinate space (scrollLeft) when Canvas runs under <html dir="rtl">, ensuring Scale to Fit on load and on button click centers the preview iframe correctly without jumping off-screen.

2. Dynamic Document Direction & Radix DirectionProvider

  • Integrated @radix-ui/react-direction <DirectionProvider> at the visual editor root and component levels.
  • Created getDocDir() utility in function-utils.ts to dynamically resolve document direction (document.documentElement.dir).
  • Configured Radix UI primitives (Tabs, ScrollArea, DropdownMenu, Tooltip) to inherit dir={getDocDir()} dynamically.

3. Logical CSS Properties Migration

  • Converted all physical directional styles across 21 UI CSS modules to modern logical CSS properties:
    • margin-left / margin-right ➔ margin-inline-start / margin-inline-end
    • padding-left / padding-right ➔ padding-inline-start / padding-inline-end
    • left / right ➔ inset-inline-start / inset-inline-end
    • text-align: left|right ➔ text-align: start|end
  • Refactored PrimaryPanel, ContextualPanel, LinkedFieldBox, PropLinker, DrupalInputMultivalueForm, AiPanel, LanguageSelect, ConflictBanner, PublishReview, ChangeGroup, SideMenu, Topbar, BrandKitPanel, CodeEditorUi, EditorFrame, ComponentLayer, LayersDropZone, ViewportToolbar, and base.css.

4. RTL Search Magnifier & Caret Mirroring

  • Re-aligned search input icon slots (.searchSlot) with logical inset positioning (inset-inline-start).
  • Applied CSS transform mirroring (transform: scaleX(-1)) in RTL mode for search magnifier icons, back arrows, and dropdown carets.

5. Flipped Undo/Redo Visual Timeline

  • Mirrored visual timeline stack indicators, step history connections, and action arrows in <UndoRedo /> for RTL layout contexts.

6. Form Control Alignment & Entity Decoding

  • Updated <LinkedFieldBox /> and <PropLinker /> form controls with logical borders, caret positions, and HTML entity decoding for localized property labels.

Testing Instructions

  1. Install Drupal Canvas with an RTL language enabled (e.g. Hebrew he or Arabic ar) or set <html dir="rtl">.
  2. Open the Canvas visual editor (/canvas/editor/...).
  3. Verify that:
    • Editor frame canvas and "Scale to fit" center correctly on load and when clicking the Scale to Fit button.
    • Primary panel and contextual panels align seamlessly on the right/left per RTL standards.
    • Tabs, scrollbars, dropdown menus, and tooltips follow RTL direction without horizontal scroll overflows.
    • Search magnifier icons and Undo/Redo timelines mirror correctly.
    • Component prop linkers and multi-value field boxes align correctly.
Edited by Lionel Enkaoua