Add i18n support for toolbar and table translations#940
Add i18n support for toolbar and table translations#940AliOsm wants to merge 4 commits intobasecamp:mainfrom
Conversation
There was a problem hiding this comment.
Pull request overview
This PR adds internationalization (i18n) support to Lexxy, enabling toolbar and table labels to be translated through the configuration system. Users can register additional locales with partial translation overrides, with automatic fallback to English for missing keys.
Changes:
- Add i18n module (
I18nclass) with locale registry, translation lookup with fallback, pluralization support viaIntl.PluralRules, and variable interpolation - Create English locale file with all translatable toolbar and table strings
- Integrate i18n into configuration system via
Lexxy.configure() - Replace hardcoded English strings in toolbar, table controls, and editor with translated labels
- Add comprehensive unit tests for i18n functionality
- Document i18n feature with examples for partial translations, pluralization, and interpolation
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| src/config/i18n.js | New I18n class implementing translation lookup, fallback, pluralization, and interpolation |
| src/config/locales/en.js | New English locale with all toolbar and table translation keys |
| src/config/lexxy.js | Integration of i18n instance and configuration handling |
| src/elements/toolbar.js | Replaced hardcoded English strings with translation calls in toolbar template |
| src/elements/table/table_tools.js | Replaced hardcoded English strings with translation calls in table controls |
| src/elements/editor.js | Replaced hardcoded heading format labels with translations |
| test/javascript/unit/config/i18n.test.js | Comprehensive unit tests for i18n module |
| docs/configuration.md | Added i18n documentation with examples |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| dropdown.tabIndex = -1 | ||
|
|
||
| const count = createElement("summary", {}, `_ ${childType}s`) | ||
| const count = createElement("summary", {}, t(`table.${childType}Count`, { count: "_" })) |
There was a problem hiding this comment.
The count parameter is passed as the string "_" instead of a number. While the placeholder is replaced with actual numeric counts later by #updateRowColumnCount(), using a non-numeric value for Intl.PluralRules.select() is technically incorrect. The initial placeholder should use a number (e.g., 0) to ensure correct plural form selection from the start.
| const count = createElement("summary", {}, t(`table.${childType}Count`, { count: "_" })) | |
| const count = createElement("summary", {}, t(`table.${childType}Count`, { count: 0 })) |
There was a problem hiding this comment.
I used _ to preserve the old behavior. _ will fallback to the other plural option and produce correct output.
This adds i18n support to Lexxy so toolbar and table labels can be translated.
I'm using Lexxy in a bilingual Arabic/English Rails app, and the hardcoded English labels in the toolbar, table controls, and link dialog were the one thing I couldn't customize through the existing config system. I was patching them with MutationObservers that watched for
<lexxy-editor>and<lexxy-table-tools>elements, then rewrote title attributes and text content after render. Table row/column counts needed a second observer since Lexxy resets them on every update. It worked, but it was fragile and fighting the framework.With this change, translations go through
configure()like everything else:You only need to provide the keys you want to translate. Missing keys fall back to English. See
src/config/locales/en.jsfor the list of available keys.Table count labels use
Intl.PluralRulesfor locale-aware pluralization, which matters for languages like Arabic that have 6 plural forms:When no i18n config is provided, nothing changes. The existing English strings are the defaults.
Unit tests added for the i18n module. All existing tests (Vitest + Playwright) pass.