Use when adding user-facing text to Handsontable, creating new language constants, updating translation files, or working with RTL layouts and internationalization
Golden rule: Never hardcode user-visible text in source code. All user-facing strings must go through the i18n system in src/i18n/.
src/i18n/constants.js using UPPER_SNAKE_CASE. Constants are built from a namespace prefix and a descriptive key:export const CONTEXTMENU_ITEMS_ROW_ABOVE = `${CM_ALIAS}.insertRowAbove`;
src/i18n/languages/. There are 20+ locale files (e.g., en-US.js, de-DE.js, ja-JP.js, zh-CN.js). Each file imports constants as * as C and maps them in a dictionary object:[C.CONTEXTMENU_ITEMS_ROW_ABOVE]: 'Insert row above',
For pluralizable strings, use an array: ['Remove row', 'Remove rows'].
src/i18n/languages/index.js if adding a new language file.Import constants and call getTranslatedPhrase():
import * as C from '../../i18n/constants';
// Inside a plugin method:
const label = this.hot.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ROW_ABOVE);
Handsontable supports RTL via layoutDirection: 'rtl'. When adding UI elements, ensure they render correctly in both LTR and RTL. Use logical CSS properties (inset-inline-start instead of left) where possible. Test with an RTL locale such as ar-AR or fa-IR.
The editor system handles IME composition events (compositionstart, compositionupdate, compositionend) for CJK input methods. Do not interfere with composition state when modifying editor behavior.
src/i18n/constants.jssrc/i18n/languages/this.hot.getTranslatedPhrase(C.CONSTANT_NAME) in source code| File | Purpose |
|---|---|
src/i18n/constants.js | All language constant definitions |
src/i18n/languages/ | Per-locale dictionary files (20+ locales) |
src/i18n/languages/index.js | Barrel export for language modules |