i18n

@stesura/i18n holds the strings for all editor UI: toolbar, menus, dialogs, panels, toasts and screen-reader text. Built-in components read them with useT.

Supported locales

The locale only changes UI strings and the chrome’s lang attribute. It does not mirror the chrome for he or ar, and it does not set the document’s text direction: that is a property of the content (dir, resolved paragraph → section → document). See text direction resolution for an RTL-by-default editor.

Setting the locale

Pass a SupportedLocale code as locale to StesuraEditor. It defaults to "en".

<StesuraEditor
  state={editorState}
  dispatchTransaction={dispatch}
  schema={schema}
  pluginFactory={pluginFactory}
  locale="fr"
/>

The editor applies it with useApplyLocale(locale), which writes one page-wide locale state. useT reads that state, not a React context. So:

• All editors on the page share one locale. With several mounted, the last one to apply wins, and an editor without locale applies "en".
• "en" is bundled. Other locales load as separate chunks through loadLocale; the previous strings (English on first mount) show until the chunk arrives.
• If a locale fails to load, the editor logs an error and falls back to English.

Your own components read the active strings with useT, which returns the translation map itself, and the code with useLocale:

import { useLocale, useT } from "@stesura/editor-react";
 
const MyButton = () => {
  const t = useT();
  const locale = useLocale(); // e.g. "fr"
  return <button lang={locale}>{t.export.docxExport}</button>;
};

useApplyLocale is exported from @stesura/editor-react/hooks for shells that set the locale outside the editor. loadLocale(locale) from @stesura/i18n resolves to a locale’s TranslationKeys if you need the strings directly.

Custom locales and overrides

Neither is supported. SupportedLocale is a fixed union and loadLocale handles exactly those codes, so you cannot register a locale. You cannot override individual strings either; the locale state is not public API.

The one exception is toasts: configuration.toastText on useLocalEditor (or useEditorCore) replaces the function that turns a toast key into text.

TranslationKeys structure

TranslationKeys (from @stesura/i18n) types every string. Each locale file is typed against it, so no locale can ship with a missing key. Top-level groups:

• Toolbar: tabs, then one group per tab: home, insert, table, page, view, references, review, image, export, headerFooterTab.
• Dialogs and panels: formatting, tocSettings, styleSheet, settings, leftPanel, bottomPanel, panelRegions, headerFooters, keyboardShortcuts, and the pickers (colorPicker, symbolPicker, emojiPicker, numberPicker).
• Features: docx, proofRead, pagination, lineNumbering, ai, collab, commentsPlaceholder, uploadBlock, fileNode, pdfPreview, mathNode, searchBar, contextMenu, slashMenu, linkMenu, statusBar, toasts.
• Chrome and accessibility: editorChrome (region names, mode announcements, keyboard hint), accessibility, plus top-level strings such as close, cancel, submit, undo, moreOptionsFor, groupSettingsFor and ribbonDensity.

Next steps

• Getting Started — editor setup.
• Customizing the Toolbar — adding custom toolbar tabs that use useT.
• UI Extensions — bundling custom toolbar and menu components.