Translating Widgets

In order to translate your widget fully you need to make translatable:

The JS component

The JavaScript component powering the widget. This is usually interface text. Each framework has their own way (or multiple) to translate components. Refer to their documentation to handle translation.

The CMS is in charge of providing the language code that the widget should be rendered in. Widget developers can trigger translation in the render file.

Take this React example of the render file:

src/components/notification/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.scss';
import ToastNotification from './components/Widget';
import * as serviceWorker from './core/bin/serviceWorker';
import { IntlProvider } from 'react-intl';
import i18n from './core/bin/i18n.js';

/**
 * Renders the widget.
 *
 * It renders a react application as the widget.
 *
 * @param {string} instanceId
 *   The already present HTML element ID where the react app will be rendered.
 * @param {string} langCode
 *   The language code for internationalization purposes.
 * @param {string} origin
 *   Protocol and hostname where a JSONAPI endpoint is available.
 * @param {Function} cb
 *   A callback that executes after the widget has been rendered.
 */
function render(instanceId, langCode, origin, cb) {
  const element = document.getElementById(instanceId);
  const translation = new i18n(langCode || serviceWorker.getUrlLocale());

  ReactDOM.render(
    <React.StrictMode>
      <IntlProvider locale={translation.locale} messages={translation.messages}>
        <ToastNotification
          title={element.getAttribute('data-title')}
          subtitle={element.getAttribute('data-description')}
          caption={element.getAttribute('data-caption')}
          kind={element.getAttribute('data-kind')}
        />
      </IntlProvider>
    </React.StrictMode>,
    element,
    () => cb(element),
  );
  serviceWorker.unregister();
}

window.renderToastNotification = render;

The editorial input

The editorial input needs to be handled at the CMS integration level. As a widget developer, there is nothing you can do. This is because you only feed the data the CMS gives you (as data attributes) in the component props. The CMS should give you the data translated in the correct language.

The Drupal integration has full support for editorial input translation.