Internationalization (I18n)

The Sequential Workflow Editor supports internationalization (i18n). This allows you to translate the user interface into different languages.

Example

Check the Internationalization Example.

The editor doesn't provide built-in translations, but you can easily add your own translations. To do this, you need to create a function that returns the translation for a given key. The function accepts three arguments: the key, the default value and the dictionary with the replacements. The default value is a default english translation. If you don't provide a translation for a key, the default value should be returned.

Some translations have placeholders that need to be replaced with the actual values. For example, the translation for the key string.valueTooShort contains the placeholder :min. This placeholder should be replaced by the value of the min property from the replacements object. You don't need to implement this logic in your translation function. The editor provides a helper function defaultI18n that does this for you.

import { defaultI18n } from 'sequential-workflow-editor-model';

const DICTIONARY = {
  'string.valueTooShort': 'O valor deve ter no mínimo :min caracteres.',
  'string.valueDoesNotMatchPattern': 'O valor não corresponde ao padrão esperado.',
};

function i18n(key: string, defaultValue: string, replacements?: Record<string, string>): string {
  const value = DICTIONARY[key] || defaultValue;
  return defaultI18n(key, value, replacements);
}

The list of all used keys by the editor you can find in the I18N-KEYS.md.

Next, you need to pass your function to the editor provider configuration.

const editorProvider = EditorProvider.create(definitionModel, {
  i18n: i18n,
  // ...
});

Pro Only

This part of the article is available only for subscribers of the pro package. Buy the pro package to get an access to this part.

If you have already subscription please log in.