learningequality / learningequality/studio
[RTE] Unify how the TipTap editor determines RTL
Nobody has claimed this yet.
- Dominant language
- Python
- Stars
- 191
- Forks
- 307
- Avg merge
- 5d 6h
- Merged PRs (30d)
- 10
Description
❌ This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.
Overview
The TipTap editor resolves the page direction four different ways, so an RTL fix applied to one control does not carry to the others. Reduce them to a single source.
Complexity: Low
Target branch: unstable
Context
TipTapEditor/composables/useRovingTabIndex.jsreadswindow.isRTL.TipTapEditor/components/toolbar/ToolbarButton.vuereadsdocument.diror<html dir>.TipTapEditor/composables/useLinkHandling.jsreadsdocument.dir.TipTapEditor/components/image/ImageNodeView.vuewalks up from the editor DOM to the nearest[dir="rtl"].- Studio sets
window.isRTLintemplates/base.htmland re-exposes it asVue.prototype.$isRTLinshared/i18n/setup.js.
The Change
- Every JavaScript RTL check under
shared/views/TipTapEditor/should resolve from one source. ImageNodeView's ancestor walk is the only one that can report a direction differing from the page's; whether that difference is worth keeping is part of this task.
Out of Scope
- RTL reads elsewhere in Studio.
[dir='rtl']CSS selectors, which RTLCSS handles.
Acceptance Criteria
- Every JavaScript RTL check under
shared/views/TipTapEditor/reads from one source - In RTL, toolbar icons still flip, the link popover still anchors on the correct side, image resize handles still track the drag direction, and toolbar arrow keys still move in reverse
- Jest tests that exercise RTL set the direction through that single source
References
- Review comment that raised this: https://github.com/learningequality/studio/pull/6108#discussion_r3896468660
AI usage
Claude Code drafted this issue from a review comment on #6108. It grepped shared/views/TipTapEditor/ for the direction checks and listed the four call sites it found; the acceptance criteria were reviewed against those call sites before filing.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by comparing the RTL checks in shared/views/TipTapEditor/composables/useRovingTabIndex.js, useLinkHandling.js, components/toolbar/ToolbarButton.vue, and components/image/ImageNodeView.vue with window.isRTL and Vue.prototype.$isRTL in templates/base.html and shared/i18n/setup.js. Run the relevant Jest RTL tests and confirm that all four behaviors use one direction source and still satisfy the listed acceptance criteria.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, internationalization
- Issue type
- Refactor
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 25/100