diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index a9d4d5394..f5d1fc5bc 100644 --- a/docs/.vuepress/config.js +++ b/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'], diff --git a/docs/api.js b/docs/api.js index b98892483..541d0647b 100644 --- a/docs/api.js +++ b/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(' && '); diff --git a/docs/api/device_manager.md b/docs/api/device_manager.md index 6b03576f4..a3e938cb7 100644 --- a/docs/api/device_manager.md +++ b/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 -- `width` **[string][5]** Width of the device -- `opts` **[Object][6]** Custom options +- `id` **[String][5]** Device id +- `width` **[String][5]** Width of the device +- `opts` **[Object][6]?** Custom options (optional, default `{}`) ### Examples ```javascript -deviceManager.add('Tablet', '900px'); -deviceManager.add('Tablet2', '900px', { +deviceManager.add('tablet', '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 }); ``` diff --git a/docs/api/editor.md b/docs/api/editor.md index 8bca570d0..9ef9a7bd6 100644 --- a/docs/api/editor.md +++ b/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 diff --git a/docs/api/i18n.md b/docs/api/i18n.md new file mode 100644 index 000000000..4f1264268 --- /dev/null +++ b/docs/api/i18n.md @@ -0,0 +1,157 @@ + + +## 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 diff --git a/src/i18n/index.js b/src/i18n/index.js index 409cfb9a3..91179d3ba 100644 --- a/src/i18n/index.js +++ b/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: {