[rtibblesbot]

Summary

• Toolbar buttons and the link popover read window.isRTL, as toolbar arrow keys already did.
• Image resize reads the handle's computed direction, which follows the content (dir="auto").
• Right-aligned images put the handle on the inline start; centered images grow by twice the drag; compact image actions scale from the inline end.

References

Fixes #6114. Raised in: #6108 (comment)

Reviewer guidance

Suggested review: Full code review, then manual QA once the reviewer sets Needs QA.

• User-visible files changed: contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/image/ImageNodeView.vue, contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/ToolbarButton.vue, contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useLinkHandling.js.
• Decide whether image resize may follow the content direction through the handle's computed direction, which leaves the issue's two "one source" criteria unmet, or must read window.isRTL.
• Confirm that the changes outside the issue belong here: [dir='rtl'] cursor and transform-origin rules rewritten as :dir(rtl) with rtl:ignore, plus LTR resize changes for right-aligned and centered images.
• In Arabic and English UIs, with Arabic-first, English-first and image-only content at each alignment, check that the handle side, cursor, drag direction, arrow keys and compact action-bar scaling all agree.

QA team: the toolbar and image resize handle follow the text direction. Regressions are most probable in image resize.

Open an exercise you can edit, Questions tab. Click "Edit" on a question, then click its text.

1. Toolbar in Arabic

   1. Change the UI language to العَرَبِيَّة.
   2. Focus تراجع (Undo) and press the Left arrow key.

   Focus moves to إعادة (Redo). Numbered list, Subscript and Superscript show numbers on the left.

2. Image resize in English and Arabic UI

   1. Click "Insert image" (إدراج صورة) and insert a PNG.
   2. Click "Align right" (محاذاة إلى اليمين). Drag the handle outward, then inward. Press the arrow keys on it.
   3. Click "Align left" (محاذاة إلى اليسار) and do step 2 again.
   4. Do steps 2–3 with Arabic text in the question.

   Without text, a right-aligned image has the handle at the bottom left. With Arabic text, the handle is on the image side nearer the editor middle. The diagonal cursor points along the handle corner. The handle stays under the pointer. An outward drag makes the image larger. Below 200 px, smaller edit and delete buttons show at the top right, or top left with Arabic text. Save and reopen the question. The width and alignment stay.

3. Uploaded image after reload

   1. Insert a PNG with "Select file to upload", then save the question.
   2. Reload the page and reopen the question.

Manual QA cannot reach the link editor, because it does not open in the question editor.

Evidence

Image resize, English UI

s5-english-ui-resize-handle.webm

Image resize, Arabic UI

Step	Screenshot
Reopened: width and handle kept

s6-arabic-ui-resize-handle.webm

Toolbar

Step	Screenshot
Arabic: RTL icons
English: no mirroring

Image alignment

Step	Screenshot
Left-aligned: handle bottom right
Narrow right-aligned: handle bottom left, small actions top right

ar-rtl-content-align-toggle-resize.webm

More captures (13)

Step	Screenshot
English text, after drag
English text, after arrow keys
English UI, Arabic text: handle left
English UI, no text: handle right
Arabic UI, Arabic text: handle left
Arabic UI, English text: handle right
Arabic UI, no text: handle right
No link button
Arabic text, Align right
Arabic text, Align left
Arabic UI, narrow right-aligned
English, reopened at 300 px
Arabic, reopened right-aligned

AI usage

Used Claude Code to implement the change and its tests. Verified with the TipTap editor Jest suite, pre-commit, and manual QA in Chromium.

🤖 Generated with Claude Code

Deviations from the issue spec

Criterion	Why not
Every JavaScript RTL check reads from one source	Image resize reads the handle's computed direction; window.isRTL reversed the drag in 4 of 6 page/content direction mixes.
RTL Jest tests set direction through that source	Image resize tests set direction on the handle.

---

Written by rtibblesbot, an LLM-based coding agent.

🟡 Waiting for feedback Last updated: 2026-10-26 20:32 UTC