Skip to main content

Easy Email Pro Localization

The easy-email-pro-localization package provides translation files for multiple languages, enabling internationalization support for the Easy Email Pro editor.

Overview​

The localization package contains JSON translation files for various languages. These translations are used by the editor's UI components and can be accessed through the t() function from easy-email-pro-core.

Installation​

The localization package is typically included as a dependency and doesn't need separate installation. Translation files are located in the locales directory.

Supported Languages​

The package supports the following languages:

  • English (en)
  • Arabic (ar)
  • Chinese Simplified (zh-Hans)
  • Danish (da)
  • Dutch (nl)
  • Finnish (fi)
  • French (fr)
  • German (de)
  • Greek (el)
  • Croatian (hr)
  • Hungarian (hu)
  • Indonesian (id)
  • Italian (it)
  • Japanese (ja)
  • Norwegian BokmÃ¥l (nb)
  • Polish (pl)
  • Portuguese (pt)
  • Romanian (ro)
  • Russian (ru)
  • Slovenian (sl)
  • Spanish (es)
  • Swedish (sv)
  • Turkish (tr)

Usage​

Using the Translation Function​

Translations are accessed through the t() function from easy-email-pro-core:

import { t } from "easy-email-pro-core";

// Use in components
const label = t("Text");
const buttonLabel = t("Button");

Setting Language​

The language is set through the editor configuration using the localeData prop:

import { EmailEditorProvider } from "easy-email-pro-editor";
import { Retro } from "easy-email-pro-theme";
import { get } from "lodash";
import localsData from "easy-email-pro-localization/locales/locales.json";

const config = Retro.useCreateConfig({
  localeData: get(localsData, "zh-Hans"), // Chinese Simplified
  // ... other config
});

Or you can manually set locale data using I18nManager:

import { I18nManager } from "easy-email-pro-core";
import localsData from "easy-email-pro-localization/locales/locales.json";

// Set locale data directly
I18nManager.setLocaleData(localsData["zh-Hans"]);

Translation File Structure​

Translation files are JSON objects with key-value pairs:

{
  "Text": "Text",
  "Button": "Button",
  "Image": "Image",
  "Asset Manager": "Asset Manager",
  "Untitled": "Untitled"
}

Custom Translations​

You can override translations by providing a custom translation object through the localeData config option or by using I18nManager:

import { I18nManager } from "easy-email-pro-core";
import { Retro } from "easy-email-pro-theme";

// Option 1: Through config
const config = Retro.useCreateConfig({
  localeData: {
    Text: "Custom Text",
    Button: "Custom Button",
    // ... other translations
  },
  // ... other config
});

// Option 2: Directly using I18nManager
I18nManager.setLocaleData({
  Text: "Custom Text",
  Button: "Custom Button",
});

Adding Custom Language​

To add support for a new language:

  1. Create a new JSON file in packages/easy-email-pro-localization/locales/
  2. Add translations following the structure of en.json
  3. Register the language in the localization system

Example (locales/custom.json):

{
  "Text": "Tekst",
  "Button": "Knop",
  "Image": "Afbeelding"
}

Translation Keys​

Common translation keys used throughout the editor include:

  • Block names: "Text", "Button", "Image", "Section", etc.
  • UI labels: "Asset Manager", "Untitled", "Done", "Cancel"
  • Actions: "Click", "Save", "Delete"
  • Messages: "Create folder failed", "Update failed"

Notes​

  • The t() function returns the key itself if no translation is found
  • Translations are loaded from JSON files in the locales directory
  • The overwrite.json file can be used to override specific translations
  • Language switching requires re-initializing the editor in some cases