@ -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 `<rootDir>/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