feat: RTL text direction support in email composer editor#491
Open
hamedf62 wants to merge 64 commits into
Open
feat: RTL text direction support in email composer editor#491hamedf62 wants to merge 64 commits into
hamedf62 wants to merge 64 commits into
Conversation
Add comprehensive Farsi translation for the webmail interface: - Create locales/fa/common.json with Farsi translations - Register 'fa' locale in i18n/routing.ts and i18n/request.ts - Add Iran flag component (FlagIR) to flag-icons.tsx - Add ف��رسی to language switcher dropdown - Add Farsi language name to English locale for language selector Translation covers login, sidebar, email viewer, composer, settings, notifications, calendar, contacts, errors, shortcuts, and more.
- Comprehensive Persian translation of all 2705 locale keys - Covers login, sidebar, email viewer, composer, settings, calendar, contacts, files, S/MIME, tour, and all other sections - 51 keys intentionally match English (language names, placeholders, templates) - 98.1% of all strings fully translated to Persian
- Add custom Tiptap TextDirection extension for managing dir attribute on paragraphs and headings - Add RTL/LTR toggle button to the rich text editor toolbar with visual direction indicator - Auto-detect RTL text on input: when the first strong character in a paragraph is from an RTL script (Arabic, Hebrew, etc.), automatically set dir="rtl" - Update TipTap editor CSS to use logical properties (padding-inline-start, border-inline-start, text-align: start) for proper RTL rendering - Add RTL-specific CSS overrides for blockquotes and lists in dir="rtl" contexts - Add i18n keys for text direction toggle in English and Farsi locales This enables proper Farsi/Arabic/Hebrew email composition with correct paragraph direction, blockquote/lists flipping, and automatic detection.
fetchUnifiedEmails, fanOutUnifiedQuery and the cross-account fanOutCrossQuery stamped accountId/accountLabel/source* directly onto each email object returned by the per-account client. Those objects are shared references; mutating them in place could surprise any caller that retained them (and corrupt an account-state snapshot). Decorate shallow copies instead, at all three fan-out sites. The original fix/unified-mailbox-no-mutation branch predated the cross-account "All accounts" feature and only covered two sites; this re-applies the fix to main's current code, including the third (shared/group) fan-out site, and preserves all five stamped fields. Flips the characterisation test to assert the client's object is left untouched.
…kmail#482) The forward quote header renders "From: Name <email>", but the HTML variant interpolated the sender string unescaped. In the rich-text composer the "<email>" portion is parsed by the browser as a bogus HTML tag and dropped, so the address silently disappears - the user sees only "From: Display Name". The plain-text variant and the details panel escape correctly, which is why the address shows there. This is the regression from bulwarkmail#367, which added the "<email>" into the HTML string without escaping it. Fix: HTML-escape the user-controlled values (sender, subject, date) in every HTML quote-header path - the production builder in lib/quote-header.ts and the composer's inline fallback (both htmlBody and plain-body branches), for forward and reply. The reply line keeps the bare display name by design (bulwarkmail#367), but its HTML form is now escaped too so a display name containing markup can't break out. As a side benefit this closes an HTML-injection vector: a crafted subject or display name was previously injected raw into the composer document. Adds lib/__tests__/quote-header.test.ts covering: forward text keeps "Name <email>"; forward HTML escapes the angle brackets (address survives) and a markup subject/display name; reply stays bare-name and HTML-safe.
selectRangeEmails was only wired to shift-clicking the row, but the checkbox handler called stopPropagation and a plain toggle — so shift- clicking checkboxes (the obvious affordance in selection mode) selected single messages instead of the range. Make all three checkbox handlers (email-list-item, thread single-email, thread header) shift-aware: shift -> selectRangeEmails, otherwise toggle. Adds a regression test.
Starting a new message while viewing a specific mailbox/account now defaults the From identity to that mailbox instead of the global primary identity, so composing from info@ sends as info@. Mirrors the existing reply-time identity match and rides the same autoSelectReplyIdentity setting; reply/replyAll/forward keep resolving from the original recipients. Matches exact then +tag-stripped. Extracts findComposeIdentityId into lib/reply-identity.ts with unit tests.
The message-viewer quick-reply box only sent via the Send button. Add a keyboard shortcut (Ctrl+Enter / Cmd+Enter) mirroring the composer (bulwarkmail#344), so a reply can be fired without reaching for the mouse. preventDefault stops the newline; the shortcut and button share one handleSendQuickReply().
Example of headers created by Stalwart below X-Spam-Result: TRUSTED_DOMAIN (-7.00), PROB_HAM_LOW (-2.00), RBL_SENDERSCORE_REPUT_9 (-1.00), DMARC_POLICY_ALLOW (-0.50), RCVD_DKIM_ARC_DNSWL_MED (-0.50) X-Spam-Score: ham, score=-5.60, avg_confidence=0.26 X-Spam-Status: No Only need to add small tweak by detecting spam|ham as well as Yes|No The most useful header is X-Spam-Score, so we make sure to parse that before X-Spam-Status
The sidebar registers a global window keydown listener that expands/collapses the selected mailbox's subfolders on ArrowLeft/ArrowRight. It didn't check where focus was, so pressing Left/Right while typing in a new email (the contentEditable composer, the subject field, search, etc.) toggled the inbox's subfolders open/closed. Bail out of the handler when the event target is an editable element (INPUT/TEXTAREA/SELECT/contentEditable). Folder-tree arrow navigation still works when focus isn't in an input.
The account switcher now always renders the default (starred) account first and lets you drag the remaining accounts into any order. Default stays pinned; only non-default rows are draggable (shown via a grip handle on hover). Wraps each row in a draggable container and persists the new order through the existing reorderAccounts store action. Ordering logic extracted to pure helpers (sortDefaultFirst, reorderNonDefaultIds) in account-utils with unit tests.
The sound picker's preview always played the default beep, even for the other choices, on a subpath deployment. playFile() used a raw '/notification/x.mp3' path, which 404s under a deployment base path (e.g. /webmail); audio.play() then rejected and fell back to the beep for every non-default choice. Prefix the file with withBasePath(). The default beep was a 150 ms tone with no envelope - easy to miss on Bluetooth outputs, whose audio path can take 100-200 ms to wake up and route. Lengthen it to ~0.45 s with a fade in/out (also removes click artifacts).
Clicking Send while attachments were still uploading silently dropped them from the outgoing message: every place that builds the outgoing attachment list filters on att.blobId && !att.uploading, and the Send button never accounted for uploads still in flight. Attach a few files, hit Send right away, and the email could go out missing some of them with no warning. handleSend now detects pending uploads before validating: - Send is disabled with an explanatory tooltip (validation.attachments_uploading) while it waits. - Once uploads finish cleanly, the send proceeds automatically - no second click needed. - If an upload FAILS while waiting, the send is aborted with an error toast (validation.attachment_upload_failed) instead of silently shipping the email without the failed attachment - the user may not be looking at the composer to notice the red error chip. - If the draft is closed or discarded while waiting, the pending send is cancelled cleanly. The wait/decision logic lives in waitForPendingUploads() in lib/email-composer-utils.ts (returns completed | cancelled | failed) with unit tests covering all three outcomes. Outgoing-attachment call sites read the freshest state via attachmentsRef since the render closure captured at click time won't reflect uploads that finished during the wait. Both new i18n keys added to all 20 locales under email_composer.validation.
Shortcuts were matched against event.key, which returns a layout-dependent character. On non-Latin layouts (Cyrillic, Greek, ...) the physical letter keys produce non-Latin characters, so single-letter shortcuts (c, j, k, r, e, ...) never fire and users must switch layout to use them. Derive the letter from event.code (KeyA..KeyZ) instead, which is layout-independent. Non-letter keys keep event.key (arrows/Enter are already layout-independent; #, !, ?, / stay symbol-based).
Extend the layout-agnostic handling to the symbol shortcuts. On non-Latin layouts the characters '/', '?', '#', '!' are often unreachable or on different keys, so map them from their US-QWERTY physical codes (Slash, shifted Digit1 / Digit3). Fixes e.g. '?' (open shortcuts help) on a Cyrillic layout.
The service worker hard-coded the notification icon and badge to the bundled /icon-192x192.png, so push notifications always showed the default Bulwark logo even when an admin had configured a custom PWA/favicon icon (which the manifest already honors via /api/pwa-icon). Point both notifications at /api/pwa-icon/192, and make that endpoint fall back to the bundled default icon instead of returning 404 when no custom icon is set - so it always returns an app icon and the service worker (which can't run the custom-vs-default check itself) has a single stable URL.
Compose recipient fields only suggested existing contacts and directory users, so people you had emailed before but never saved as a contact never came up. This adds an Outlook-Web-style suggestion flow. On startup the Sent folder is read once (metadata only) to build a cache of addresses you have written to; those are merged into the autocomplete after contacts and directory principals, deduped, contacts winning. When the recipient is not in the cache, the dropdown offers a "search the server" row that queries the Sent folder on demand. That lookup fetches only the to/cc fields (no subject, body or attachments) and returns the matching addresses, deduped. New strings are added to all 20 locales.
…ith no conversation selected
Login header customization for white-label deployments, all defaults
preserve current behaviour:
- LOGIN_LOGO_MAX_HEIGHT / LOGIN_LOGO_MAX_WIDTH (any CSS length): the logo
box is otherwise a fixed 64x64 (w-16/h-16), which fits a wide wordmark to
~13px tall. When either is set, the fixed box is dropped and the logo
renders at the configured size.
- LOGIN_SHOW_HEADING / LOGIN_SHOW_SUBTITLE (default true): hide the
{appName} heading and/or the subtitle when the logo already reads as the
brand (e.g. a wordmark) and they'd be redundant.
Applied to the standard login header; wired through the existing config
registry (CONFIG_ENV_MAP) -> /api/config -> useConfig.
Refs bulwarkmail#519.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…-style) Wrap the message-list avatar in a SelectableAvatar control: clicking the avatar toggles the row into the current selection instead of opening it, matching Thunderbird's correspondent-avatar selection affordance. A check overlay appears on hover (hinting it is clickable) and stays while selected. - email-list-item + thread single-email: toggle that message's id - thread header: toggle the whole thread (reuses existing thread-select logic) - focused-mail and extra-compact layouts render no avatar, so unaffected
- Add apple-touch-icon.png (180x180) - default iOS icon - Add apple-touch-icon-120x120.png - iPhone retina - Add apple-touch-icon-152x152.png - iPad retina - Add apple-touch-icon-167x167.png - iPad Pro - Add apple-touch-icon-180x180.png - iPhone Plus/Pro iOS automatically detects these icons when users add the PWA to their home screen. No code changes required - icons are discovered by convention. Fixes: PWA icon not appearing on iOS home screen Co-authored-by: Cursor <cursoragent@cursor.com>
The page CSP set font-src 'self', which blocked fonts referenced by rendered email CSS (brand webfonts loaded over https). Allow https:/data: for font-src. Email bodies render inside the sandboxed iframe, which keeps its own stricter blocking-mode font-src for privacy.
Instead of leaving the browser's broken-image placeholder + alt text (which reads as stray label text — e.g. a 'logo' alt — in an otherwise image-only email), hide any image that fails to load. Sanitizer-blocked images already use a 1x1 transparent pixel with display:none, so they're unaffected.
Marking mail as spam (or not spam) updated the email list but nothing else, unlike delete/move which patch the folder counters optimistically. Without a connected JMAP push the sidebar badges simply never moved, and "not spam" additionally left the reading pane stuck on the message that had just left the folder. markAsSpam now mirrors moveToMailbox: source folder counts down, junk counts up (honoring that trash-and-read delivers the mail to junk already read). batchMarkAsSpam and batchUndoSpam mirror the batch move pattern the same way. undoSpam advances the selection to the next message like markAsSpam already did, and refreshes the mailbox list instead of patching counts: in the undo-toast path the email is no longer in the list, so its unread state is unknown and an optimistic patch is not possible.
Marking your own outgoing mail as spam makes no sense, but the action was offered in every non-junk folder: context menu, hover quick-actions, viewer toolbar and its overflow menu, plus the "!" shortcut. All surfaces now skip the action when the folder role is sent, drafts or scheduled, and the shortcut is a no-op there. Scheduled messages were already covered per-email via isScheduled; the role check additionally covers the server-side Scheduled folder before that annotation loads. The hover quick-actions bar gets a spamApplicable prop for this, since it renders its buttons without knowing the folder.
Outlook-Web-style pinning: a context-menu Pin/Unpin action stores a $pinned keyword on the message (plain IMAP-compatible flag, survives other clients), and pinned mails stay at the top of the folder list regardless of age, marked with a pin icon. Ordering is done server-side via the hasKeyword sort comparator (RFC 8621), applied consistently to the folder fetch, pagination and the push-refresh so page windows stay stable. The client-side safety sort in getEmails mirrors it, and sortThreadGroups keeps threads containing a pinned mail on top so the client-side thread grouping does not undo the order. The new-mail notification in refreshCurrentMailbox now checks the first non-pinned entry: with pinned mails on top, the newest mail is no longer at index 0 and arrivals would never have notified. The toggle reuses the color-tag pathway (routed keyword write for unified views, in-place local patch), then refetches the first page so the mail floats or sinks immediately. Search and unified views keep their existing order. Pin/Unpin strings are added to all 21 locales.
The Slovak translation was based on a slightly older en catalog, so the translation parity test currently fails on main. sk was missing ten keys that landed around the same time: the composer attachment-upload validation strings, the recipient autocomplete strings (translated to Slovak here) and the settings date_locale block (kept as the same English values every other locale currently has). The other twenty locales were missing language.sk in return - added as the endonym "Slovenčina" (matching how the other entries are written), and as "Slovacă" in ro, which translates its language names.
Any transient failure used to end the session: the token route deleted the refresh cookies on every non-OK answer from the OAuth endpoint, refreshAccessToken logged out on any non-OK status or network error, and the startup restore evicted the account and deleted its session cookie. A server restart, a proxy hiccup, a Wi-Fi switch or a laptop waking before the network is back all kicked the user out despite "stay signed in". Failures are now classified. Only a definitive rejection (400/401/403 from the OAuth endpoint, 401 from the token route) tears the session down and deletes cookies, exactly as before. Network errors and 5xx keep the session: the token refresh re-arms itself and retries every ~30 seconds until the server is back, and the startup restore keeps the account, marked unreachable - the same treatment the rate-limit carve-out (bulwarkmail#104) already applies. Token validity stays entirely server-enforced: the first definitive 401 after an outage still logs out as before.
…p retired sendTo/replyTo bulwarkmail#500
Message-list rows are tinted with the first tag's color, which becomes overwhelming when a label applies to most messages (for example per-account labels). Add a `tintListRowsByTag` setting (default true, so current behavior is unchanged) with a toggle in Settings beside "Colorful Sidebar Icons". When off, rows are not tinted; tag dots and chips still show the color. Gated in both list renderers (email-list-item and thread-list-item).
Some HTML emails set height:100% on a full-bleed wrapper table/div rather
than html/body. With the viewer's body{overflow:hidden}, this collapses
documentElement.scrollHeight to the iframe's 150px default, so the
scrollHeight-based auto-resize locks the iframe short and the body renders
blank below the fold. A Box.co.il verification email rendered as a
logo-only 150px strip.
- Neutralise height:100% on any element so the body grows to its content.
- Measure max(documentElement, body).scrollHeight, and re-measure on a
fixed cadence over a short settle window so a late reflow (height:100%
wrapper, or images that resize after onload) is caught even when no
ResizeObserver/image event fires.
…e conflicts Resolved conflicts: - rich-text-editor.tsx: Keep both SignatureBlock (HEAD) and TextDirection (PR) - flag-icons.tsx: Keep Israel (FlagIL), Slovakia (FlagSK), and Iran (FlagIR) flags - i18n/request.ts: Keep both 'he' (Hebrew) and 'fa' (Farsi) locale cases - i18n/routing.ts: Merge locale arrays with 'fa', 'he', 'sk' - locales/fa/common.json: Use upstream main version (more complete) + add text_direction keys from PR
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
14 participants
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.
Summary
Adds full Right-to-Left (RTL) text direction support to the email composer's Tiptap rich text editor, enabling proper Farsi (Persian), Arabic, Hebrew, and other RTL language composition.
Changes
1. New
TextDirectionTiptap extension (components/email/text-direction-extension.ts)dirattribute support to heading and paragraph nodessetTextDirectionandtoggleTextDirectionchain commandsdetectTextDirection()utility that scans for the first strong RTL character using Unicode ranges (Arabic, Hebrew, Syriac, Thaana, N'Ko, etc.)2. Rich text editor toolbar (
components/email/rich-text-editor.tsx)dir="rtl"for RTL scripts3. CSS updates (
app/globals.css)padding-left→padding-inline-startborder-left→border-inline-starttext-align: left→text-align: startfloat: left→float: inline-startright→inset-inline-end[dir="rtl"]contexts4. i18n labels
email_composer.text_directionkeys in English (en) and Farsi (fa) locale filesHow it works
dir="rtl"on the paragraph