Repository navigation
Conversation
The bubble menu, slash command menu, inspector and placeholder styles used physical properties (border-left, padding-right, margin-left, left: 0, text-align: left, float: left). In a right-to-left page these put separators, spacing, menu text and placeholders on the wrong side. They now use the logical equivalents (border-inline-start, padding-inline-end, margin-inline-start, inset-inline-start, text-align: start, float: inline-start), which resolve to the same values in left-to-right layouts. Styles that end up in the exported email HTML are left physical on purpose, since email clients don't support logical properties. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Contributor
|
@alon710 is attempting to deploy a commit to the resend Team on Vercel. A member of the Team first needs to authorize it. |
馃 Changeset detectedLatest commit: c4884ee The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Intent
Fixes #3806
Fix: the editor UI doesn't mirror in right-to-left pages. When
@react-email/editoris embedded in adir="rtl"app (Hebrew, Arabic), the bubble menu separators sit on the wrong side of each group, menu items and slash-command items stay left-aligned, the link form opens from the left edge, the inspector's unit and color triggers get their gap on the wrong side, and the empty-paragraph placeholder floats to the left while the caret sits on the right.Changes
Every physical-direction rule in the editor UI stylesheets now uses its logical equivalent:
ui/bubble-menu/bubble-menu.cssborder-lefton[data-re-bubble-menu-group]border-inline-startui/bubble-menu/bubble-menu.csspadding-right: 0on the last grouppadding-inline-end: 0ui/bubble-menu/bubble-menu.csstext-align: lefton[data-re-node-selector-item]text-align: startui/bubble-menu/bubble-menu.cssleft: 0on[data-re-link-selector-form]inset-inline-start: 0ui/slash-command/slash-command.csstext-align: lefton[data-re-slash-command-item]text-align: startui/inspector/inspector.cssmargin-lefton the unit and color triggersmargin-inline-startui/inspector/inspector.cssborder-leftbetween toggle itemsborder-inline-startui/themes/default.cssfloat: lefton the placeholdersfloat: inline-startIn left-to-right layouts each logical property resolves to the same value as before, so nothing changes there.
Not changed, on purpose
.tiptap [alignment="left"|"right"], the align-left and align-right buttons, and the'left'default alignment are explicit user choices that the email output depends on.left: 50%plustranslateX(-50%), which works the same in both directions.bottom-start. Floating-ui already resolves these against the element's computed direction.Testing
pnpm vitest run --project unitinpackages/editor: 54 files, 521 tests passed.tsc --noEmitandbiome checkon the changed files are clean.tsdownbuild passes. The logical properties survive thepostcss-importinlining intodist/ui/themes/default.css.@react-email/editor(patch).馃 Generated with Claude Code