Update API References with I18n module

docs/.vuepress/config.js

@@ -58,6 +58,7 @@ module.exports = {
       '/api/': [
         '',
         ['/api/editor', 'Editor'],
+        ['/api/i18n', 'I18n'],
         ['/api/canvas', 'Canvas'],
         ['/api/assets', 'Asset Manager'],
         ['/api/block_manager', 'Block Manager'],

docs/api.js

@@ -22,6 +22,7 @@ const cmds = [
   ['keymaps/index.js', 'keymaps.md'],
   ['undo_manager/index.js', 'undo_manager.md'],
   ['canvas/index.js', 'canvas.md'],
+  ['i18n/index.js', 'i18n.md'],
 ].map(entry =>
   `${binRoot}documentation build ${srcRoot}/${entry[0]} -o ${docRoot}/api/${entry[1]} -f md --shallow --markdown-toc false`)
 .join(' && ');

docs/api/device_manager.md

@@ -28,16 +28,19 @@ Add new device to the collection. URLs are supposed to be unique
 
 ### Parameters
 
--   `name` **[string][5]** Device name
+-   `id` **[String][5]** Device id
--   `width` **[string][5]** Width of the device
+-   `width` **[String][5]** Width of the device
--   `opts` **[Object][6]** Custom options
+-   `opts` **[Object][6]?** Custom options (optional, default `{}`)
 
 ### Examples
 
 ```javascript
-deviceManager.add('Tablet', '900px');
+deviceManager.add('tablet', '900px');
-deviceManager.add('Tablet2', '900px', {
+deviceManager.add('tablet2', '900px', {
  height: '300px',
+ // At first, GrapesJS tries to localize the name by device id.
+ // In case is not found, the `name` property is used (or `id` if name is missing)
+ name: 'Tablet 2',
  widthMedia: '810px', // the width that will be used for the CSS media
 });
 ```

docs/api/editor.md

@@ -538,6 +538,30 @@ editor.log('Something done!', { ns: 'from-plugin-x', level: 'info' });
 
 Returns **this** 
 
+## t
+
+Translate label
+
+### Parameters
+
+-   `args` **...any** 
+-   `key` **[String][2]** Label to translate
+-   `opts` **[Object][3]?** Options for the translation
+    -   `opts.params` **[Object][3]?** Params for the translation
+    -   `opts.noWarn` **[Boolean][4]?** Avoid warnings in case of missing resources
+
+### Examples
+
+```javascript
+editor.t('msg');
+// use params
+editor.t('msg2', { params: { test: 'hello' } });
+// custom local
+editor.t('msg2', { params: { test: 'hello' }, l: 'it' });
+```
+
+Returns **[String][2]** 
+
 ## on
 
 Attach event

docs/api/i18n.md

@@ -0,0 +1,157 @@
+<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
+
+## I18n
+
+You can customize the initial state of the module from the editor initialization
+
+```js
+const editor = grapesjs.init({
+ i18n: {
+   locale: 'en',
+   localeFallback: 'en',
+   messages: {
+     en: {
+      hello: 'Hello',
+     },
+     ...
+   }
+ }
+})
+```
+
+Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
+
+```js
+const i18n = editor.I18n;
+```
+
+### Events
+
+-   `i18n:add` - New set of messages is added
+-   `i18n:update` - The set of messages is updated
+-   `i18n:locale` - Locale changed
+
+## getConfig
+
+Get module configurations
+
+Returns **[Object][1]** Configuration object
+
+## setLocale
+
+Update current locale
+
+### Parameters
+
+-   `locale` **[String][2]** Locale value
+
+### Examples
+
+```javascript
+i18n.setLocale('it');
+```
+
+Returns **this** 
+
+## getLocale
+
+Get current locale
+
+Returns **[String][2]** Current locale value
+
+## getMessages
+
+Get all messages
+
+### Parameters
+
+-   `lang` **[String][2]?** Specify the language of messages to return
+-   `opts` **[Object][1]?** Options (optional, default `{}`)
+    -   `opts.debug` **[Boolean][3]?** Show warnings in case of missing language
+
+### Examples
+
+```javascript
+i18n.getMessages();
+// -> { en: { hello: '...' }, ... }
+i18n.getMessages('en');
+// -> { hello: '...' }
+```
+
+Returns **[Object][1]** 
+
+## setMessages
+
+Set new set of messages
+
+### Parameters
+
+-   `msg` **[Object][1]** Set of messages
+
+### Examples
+
+```javascript
+i18n.getMessages();
+// -> { en: { msg1: 'Msg 1', msg2: 'Msg 2', } }
+i18n.setMessages({ en: { msg2: 'Msg 2 up', msg3: 'Msg 3', } });
+// Set replaced
+i18n.getMessages();
+// -> { en: { msg2: 'Msg 2 up', msg3: 'Msg 3', } }
+```
+
+Returns **this** 
+
+## addMessages
+
+Update messages
+
+### Parameters
+
+-   `msg` **[Object][1]** Set of messages to add
+
+### Examples
+
+```javascript
+i18n.getMessages();
+// -> { en: { msg1: 'Msg 1', msg2: 'Msg 2', } }
+i18n.addMessages({ en: { msg2: 'Msg 2 up', msg3: 'Msg 3', } });
+// Set updated
+i18n.getMessages();
+// -> { en: { msg1: 'Msg 1', msg2: 'Msg 2 up', msg3: 'Msg 3', } }
+```
+
+Returns **this** 
+
+## t
+
+Translate the locale message
+
+### Parameters
+
+-   `key` **[String][2]** Label to translate
+-   `opts` **[Object][1]?** Options for the translation (optional, default `{}`)
+    -   `opts.params` **[Object][1]?** Params for the translation
+    -   `opts.debug` **[Boolean][3]?** Show warnings in case of missing resources
+
+### Examples
+
+```javascript
+obj.setMessages({
+ en: { msg: 'Msg', msg2: 'Msg {test}'},
+ it: { msg2: 'Msg {test} it'},
+});
+obj.t('msg');
+// -> outputs `Msg`
+obj.t('msg2', { params: { test: 'hello' } });  // use params
+// -> outputs `Msg hello`
+obj.t('msg2', { l: 'it', params: { test: 'hello' } });  // custom local
+// -> outputs `Msg hello it`
+```
+
+Returns **[String][2]** 
+
+[1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
+
+[2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+
+[3]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean

src/i18n/index.js

@@ -1,5 +1,5 @@
 /**
- * You can customize the initial state of the module from the editor initialization
+ * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/i18n/config.js)
  * ```js
  * const editor = grapesjs.init({
  *  i18n: {