Skip to content

Translate the html field editor into the backend locale - #3825

Open
Vondry wants to merge 1 commit into
bolt:6.2from
Vondry:feature/html-editor-locale
Open

Vondry wants to merge 1 commit into
bolt:6.2from
Vondry:feature/html-editor-locale

Conversation

@Vondry

@Vondry Vondry commented Oct 7, 2026

Copy link
Copy Markdown
Contributor

The html field's Trumbowyg editor always shows its toolbar in English, regardless of the backend locale. Trumbowyg ships translations for 46 languages (trumbowyg/dist/langs), but Bolt never loaded one or set the editor's lang option, so it always used the built-in English.

This is part of an effort to localize the Bolt admin UI, alongside the related PRs for the other rich-text editors:

All three take the editor's UI language from the Bolt backend locale, so the core html field and both extension fields behave consistently.

Changes

  • html.html.twig passes app.request.locale to <editor-html>. This is the locale the surrounding backend UI is rendered in, and the same one the Redactor and Article PRs use. The content edit locale (edit_locale) is separate and does not affect it.
  • Html.vue bundles Trumbowyg's language files with require.context. In created(), before Trumbowyg initialises, it runs only the matching file and sets config.lang. Locales without a translation keep the built-in English, so existing behaviour is unchanged.

This follows the same approach as the date field, which bundles flatpickr's locales.

Locale matching

Bolt locales are lowercased and matched from the most to the least specific part: sr_Latn_RS → sr_latn → sr, de_AT → de.

Trumbowyg uses non-ISO names for some languages, so these are aliased:

Bolt / ISO Trumbowyg
uk ua
sr, sr_Latn rs, rs_latin
be by
fil, tl ph
ms my
no, nn nb
zh, zh_Hans zh_cn
zh_Hant, zh_HK, zh_MO zh_tw

ISO my is Burmese, while Trumbowyg's my is Malay, so my is never matched as-is and falls back to English.

Right-to-left languages

Trumbowyg's ar, he and fa translations also set _dir: 'rtl', which Trumbowyg applies to the editable area. Text direction belongs to the content being edited, not to the backend language, so _dir is removed after loading. Only the labels are translated, and editing stays left-to-right as before.

Bundle size

All 46 language files are bundled (about 57 KB raw, 16 KB gzipped), but only one is executed per page. Loading them lazily would delay the editor's initialisation until the file has been fetched. For comparison, the date field bundles flatpickr's locales the same way, at roughly four times the size.

Testing

html-testing.mp4

The html field's Trumbowyg editor always showed its toolbar in English,
although Trumbowyg ships translations for 46 languages. They were never
loaded, and the editor was never told which language to use.

The field template now passes the request locale to the component, the
same locale the rest of the backend UI is rendered in. The component
bundles Trumbowyg's language files and, before the editor initialises,
runs only the one matching the locale and sets it as the editor
language. Locales without a translation keep the built-in English.

Locales are matched from the most to the least specific part
(sr_Latn_RS -> sr_latn -> sr), with aliases for the codes Trumbowyg
names differently from ISO (uk -> ua, sr -> rs, nn -> nb, zh_Hant ->
zh_tw, ...). ISO `my` is Burmese while Trumbowyg's `my` is Malay, so it
is never matched as-is.

The Arabic, Hebrew and Persian translations also switch the editable
area to right-to-left. That direction belongs to the content being
edited, not to the backend language, so it is dropped and only the
labels are used.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant