diff --git a/docs/modules/Style-manager.md b/docs/modules/Style-manager.md index 008fbc97d..99836061d 100644 --- a/docs/modules/Style-manager.md +++ b/docs/modules/Style-manager.md @@ -84,35 +84,6 @@ grapesjs.init({ }, }); ``` -The label of the sector you see in the editor is using directly the `name` but you can also rely on the [I18n] module via sector's `id` in case you plan to have a multi-language editor. - -```js -grapesjs.init({ - i18n: { - // Use `messagesAdd` in order to extend the default set - messagesAdd: { - en: { - styleManager: { - sectors: { - 'first-sector-id': 'First sector EN' - } - } - } - } - }, - // ... - styleManager: { - sectors: [ - { - id: 'first-sector-id', - // You can leave the name as a fallback in case the i18n definition is missing - name: 'First sector', - }, - // ... - ], - }, -}); -``` ### Property defintions @@ -315,6 +286,63 @@ editor.StyleManager.getBuiltInAll(); ``` ::: +## I18n + +If you're planning to have a multi-language editor you can easily connect sector and property labels to the [I18n] module via their IDs. + +```js +grapesjs.init({ + styleManager: { + sectors: [ + { + id: 'first-sector-id', + // You can leave the name as a fallback in case the i18n definition is missing + name: 'First sector', + properties: [ + 'width', + { + id: 'display-prop-id', // By default the id is the same as its property name + label: 'Display', + type: 'select', + property: 'display', + default: 'block', + options: [ + {id: 'block', label: 'Block'}, + {id: 'inline', label: 'Inline'}, + {id: 'none', label: 'None'}, + ] + }, + ], + }, + // ... + ], + }, + i18n: { + // Use `messagesAdd` in order to extend the default set + messagesAdd: { + en: { + styleManager: { + sectors: { + 'first-sector-id': 'First sector EN' + }, + properties: { + width: 'Width EN', + 'display-prop-id': 'Display EN', + }, + options: { + 'display-prop-id': { + block: 'Block EN', + inline: 'Inline EN', + none: 'None EN', + } + } + } + } + } + }, +}); +``` + ## Components constraints * Components constraint props