Internationalization

The Stripo editor is multilingual and supports full localization of the user interface. The parameter that controls the interface language is passed during initialization:

const stripoConfig = {
  locale: 'en',
  ...
}

window.UIEditor.initEditor(domContainer, stripoConfig);

To support message localization, you need to:

1. Register a map of keys and values for each supported language
2. Call the translate API method where needed instead of plain text, passing the translation key and optional parameters for interpolation into the translated string

Additional Considerations

When modifying a template, the apply method accepts a ModificationDescription parameter with a description of the changes. To ensure this text is displayed in the version history in the user's language, it is strongly recommended to use translation keys in ModificationDescription as well.

Example

//------------en.js-------------
export default {
    "Buy": "Buy",
    "Sell": "Sell {count} units.",
    "Set event-id": "Set event-id {eventId}"
}
//------------uk.js-------------
export default {
    "Buy": "Купити",
    "Sell": "Продати {count} од.",
    "Set event-id": "Встановлено event-id {eventId}"
}
//------------SimpleBlock.js-------------
import {Block, ModificationDescription} from '@stripoinc/ui-editor-extensions';

export class SimpleBlock extends Block {
    getTemplate() {
        return `
            <td>
                <a href="https://stripo.email/">
                    ${this.api.translate('Buy')}
                </a>
                <a href="https://stripo.email/">
                    ${this.api.translate('Sell', {count: 2})}
                </a>
            </td>
        `
    }

    onCreated(node) {
        const eventId = '1234-56';
        this.api.getDocumentModifier()
            .modifyHtml(node)
            .setAttribute('event-id', eventId)
            .apply(new ModificationDescription('Set event-id')
                .withParams({ eventId: eventId }));
    }

    // Additional block configuration methods...
}

//------------Extension.js-------------
import uk from './uk';
import en from './en';
import {ExtensionBuilder} from '@stripoinc/ui-editor-extensions';
import {SimpleBlock} from './blocks/SimpleBlock';

export default new ExtensionBuilder()
    .withLocalization({
        'en': en,
        'uk': uk,
    })
    .addBlock(SimpleBlock)
    .build();