diff --git a/docs/modules/I18n.md b/docs/modules/I18n.md index c1e56dfba..63c4e63ea 100644 --- a/docs/modules/I18n.md +++ b/docs/modules/I18n.md @@ -139,4 +139,81 @@ We need to find the way to update the UI ## Plugin development -If you're developing a plugin for GrapesJS and you need to support some string localization or simply... +::: warning +This section is dedicated **only** to plugin developers and can also be skipped in case you use [grapesjs-cli](https://github.com/artf/grapesjs-cli) to init your plugin project +::: + +If you're developing a plugin for GrapesJS and you need to support some string localization or simply change the default one, we recommend the following structure. + +``` +plugin-dir +- package.json +- README.md +- ... +- src + - index.js + - locale // create the locale foldar in your src + - en.js // All default strings should be placed here +``` + +For your plugin specific strings, place them under the plugin name key + +```js +// src/locale/en.js +export default { + 'grapesjs-plugin-name': { + yourKey: 'Your value', + } +} +``` + +In your `index.js` use the `en.js` file and add `i18n` option to allow import of other local files + +```js +// src/index.js +import en from 'locale/en'; + +export default (editor, opts = {}) => { + const options = { + i18n: {}, + // ... + ...opts, + }; + + // ... + + editor.I18n.addMessages({ + en, + ...i18n, + }); +} +``` + +The next step would be to compile your locale files into `/locale` directory to make easily accessible by your users. This folder could be ignored in your git repository be should be deployd to the npm registry + +::: warning +Remember that you can skip all these long steps and init your project with [grapesjs-cli](https://github.com/artf/grapesjs-cli). This will create all the necessary folders/files/commands for you (during `init` command this step is flagged `true` by default and we recommend to keep it even in case the i18n is not required in your project) +::: + + +At the end, your plugin users will be able to import other local files (if they exist) in this way + +```js +import grapesjs from 'grapesjs'; + +// Import from your plugin +import yourPlugin from 'grapesjs-your-plugin'; +import ch from 'grapesjs-your-plugin/locale/ch'; +import fr from 'grapesjs-your-plugin/locale/fr'; + +const editor = grapesjs.init({ + ... + plugins: [ yourPlugin ], + pluginsOpts: { + [yourPlugin]: { + i18n: { ch, fr } + } + } +}); +``` +