fix: RTL content option no longer flips the whole page (#7900)

JohnMcLear · claude · JohnMcLear · commit a164a6393c74 · 2026-06-05T12:39:57.000+01:00
The pad's RTL content option (rtlIsTrue) is a per-pad setting that should
only change the direction of the editor's text contents. The setter in
ace2_inner.ts wrote the direction to the top-level `document.documentElement`
(`document` there resolves to the main pad page, since the editor iframes are
derived from it), which flipped the entire page — toolbar and chrome included.

The page direction is owned solely by the UI language (l10n.ts sets it from
html10n.getDirection()). Apply the content direction to the inner editor
document (`targetDoc.documentElement`) instead, so enabling RTL content leaves
the surrounding interface untouched.

Adds a frontend test asserting the inner editor flips to RTL while the
top-level &lt;html&gt; dir stays ltr.

Co-Authored-By: Claude Opus 4.8 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/src/static/js/ace2_inner.ts b/src/static/js/ace2_inner.ts
@@ -683,7 +683,11 @@ function Ace2Inner(editorInfo, cssManagers) {
       rtlistrue: (value) => {
         targetBody.classList.toggle('rtl', value);
         targetBody.classList.toggle('ltr', !value);
-        document.documentElement.dir = value ? 'rtl' : 'ltr';
+        // Apply the base direction to the inner editor document only. Using the
+        // top-level `document` here would flip the whole page (toolbar, chrome)
+        // even though this is a per-pad content option — see issue #7900. The
+        // page direction is governed solely by the UI language (see l10n.ts).
+        targetDoc.documentElement.dir = value ? 'rtl' : 'ltr';
       },
       fadeinactiveauthorcolors: (value) => {
         fadeInactiveAuthorColors = `${value}` !== 'false';
diff --git a/src/tests/frontend-new/specs/rtl_url_param.spec.ts b/src/tests/frontend-new/specs/rtl_url_param.spec.ts
@@ -34,4 +34,20 @@ test.describe('RTL URL parameter', function () {
     await page.waitForSelector('#editorcontainer.initialized');
     await expect(page.locator('#options-rtlcheck')).not.toBeChecked();
   });
+
+  test('rtl content option flips only the pad inner contents, not the whole page', {tag: '@feature:rtl-toggle'}, async function ({page}) {
+    await appendQueryParams(page, {rtl: 'true'});
+    await expect(page.locator('#options-rtlcheck')).toBeChecked();
+
+    // The inner editor document is flipped to RTL...
+    const innerBody = page.frame('ace_inner')!.locator('#innerdocbody');
+    await expect(innerBody).toHaveClass(/\brtl\b/);
+    const innerDirection = await innerBody.evaluate((el) =>
+      el.ownerDocument.defaultView!.getComputedStyle(el).direction);
+    expect(innerDirection).toBe('rtl');
+
+    // ...but the top-level page (toolbar, chrome) is governed by the UI
+    // language, not the pad's RTL content option, and must stay LTR.
+    await expect(page.locator('html')).toHaveAttribute('dir', 'ltr');
+  });
 });
