Skip to content

Commit 6c6e3a1

Browse files
DRoetDRoet
authored
feat: add i18n integration (#192)
1 parent 8fe1080 commit 6c6e3a1

23 files changed

+150
-72
lines changed

‎README.md

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# GrapesJS MJML
22

3-
> Requires GrapesJS v0.14.62 or higher
3+
> Requires GrapesJS v0.15.9 or higher
44
55
[![build](https://github.com/artf/grapesjs-mjml/workflows/build/badge.svg)](https://github.com/artf/grapesjs-mjml/actions)
66

@@ -31,13 +31,8 @@ Supported components:
3131

3232
|Option|Description|Default|
3333
|-|-|-
34-
|`categoryLabel`|Category for blocks|`''`|
3534
|`importPlaceholder`|Import placeholder MJML|`''`|
36-
|`modalTitleImport`|Title for the import modal|`Import MJML`|
37-
|`modalBtnImport`|Test for the import button|`Import`|
38-
|`modalLabelImport`|Description for the import modal|`''`|
39-
|`modalTitleExport`|Title for the export modal|`Export MJML`|
40-
|`modalLabelExport`|Description for the export modal|`''`|
35+
|`i18n`|I18n object containing language [more info](https://grapesjs.com/docs/modules/I18n.html#configuration)|`{}`|
4136
|`overwriteExport`|Overwrite default export command|`true`|
4237
|`preMjml`|String before the MJML in export code|`''`|
4338
|`postMjml`|String after the MJML in export code|`''`|
@@ -90,15 +85,19 @@ Supported components:
9085
import 'grapesjs/dist/css/grapes.min.css'
9186
import grapesJS from 'grapesjs'
9287
import grapesJSMJML from 'grapesjs-mjml'
88+
import nl from 'grapesjs-mjml/locale/nl'
9389

9490
grapesJS.init({
9591
fromElement: 1,
9692
container : '#gjs',
9793
avoidInlineStyle : false,
9894
plugins: [grapesJSMJML],
9995
pluginsOpts: {
100-
[grapesJSMJML]: {/* ...options */}
101-
}
96+
[grapesJSMJML]: {
97+
// Optional options
98+
i18n: { nl }
99+
}
100+
},
102101
});
103102
```
104103

‎src/blocks.js

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
export default (editor, opt = {}) => {
22
const bm = editor.BlockManager;
33
const allBlocks = {
4-
category: opt.categoryLabel,
4+
category: editor.I18n.t('grapesjs-mjml.category'),
55
};
66

77
opt.resetBlocks && bm.getAll().reset();
88

99
bm.add('mj-1-column', {
10-
label: '1 Column',
10+
label: editor.I18n.t('grapesjs-mjml.components.names.oneColumn'),
1111
content: `<mj-section>
1212
<mj-column><mj-text>Content 1</mj-text></mj-column>
1313
</mj-section>`,
@@ -16,7 +16,7 @@ export default (editor, opt = {}) => {
1616
});
1717

1818
bm.add('mj-2-columns', {
19-
label: '2 Columns',
19+
label: editor.I18n.t('grapesjs-mjml.components.names.twoColumn'),
2020
content: `<mj-section>
2121
<mj-column><mj-text>Content 1</mj-text></mj-column>
2222
<mj-column><mj-text>Content 2</mj-text></mj-column>
@@ -26,7 +26,7 @@ export default (editor, opt = {}) => {
2626
});
2727

2828
bm.add('mj-3-columns', {
29-
label: '3 Columns',
29+
label: editor.I18n.t('grapesjs-mjml.components.names.threeColumn'),
3030
content: `<mj-section>
3131
<mj-column><mj-text>Content 1</mj-text></mj-column>
3232
<mj-column><mj-text>Content 2</mj-text></mj-column>
@@ -37,35 +37,35 @@ export default (editor, opt = {}) => {
3737
});
3838

3939
bm.add('mj-text', {
40-
label: 'Text',
40+
label: editor.I18n.t('grapesjs-mjml.components.names.text'),
4141
content: '<mj-text>Insert text here</mj-text>',
4242
attributes: { class: 'gjs-fonts gjs-f-text' },
4343
...allBlocks,
4444
});
4545

4646
bm.add('mj-button', {
47-
label: 'Button',
47+
label: editor.I18n.t('grapesjs-mjml.components.names.button'),
4848
content: '<mj-button>Button</mj-button>',
4949
attributes: { class: 'gjs-fonts gjs-f-button' },
5050
...allBlocks,
5151
});
5252

5353
bm.add('mj-image', {
54-
label: 'Image',
54+
label: editor.I18n.t('grapesjs-mjml.components.names.image'),
5555
content: '<mj-image src="http://placehold.it/350x250/78c5d6/fff"/>',
5656
attributes: { class: 'fa fa-image' },
5757
...allBlocks,
5858
});
5959

6060
bm.add('mj-divider', {
61-
label: 'Divider',
61+
label: editor.I18n.t('grapesjs-mjml.components.names.divider'),
6262
content: '<mj-divider/>',
6363
attributes: { class: 'gjs-fonts gjs-f-divider' },
6464
...allBlocks,
6565
});
6666

6767
bm.add('mj-social-group', {
68-
label: 'Group Social',
68+
label: editor.I18n.t('grapesjs-mjml.components.names.socialGroup'),
6969
content: `<mj-social font-size="12px" icon-size="24px" border-radius="12px" mode="horizontal">
7070
<mj-social-element name="facebook"></mj-social-element>
7171
<mj-social-element name="google"></mj-social-element>
@@ -76,21 +76,21 @@ export default (editor, opt = {}) => {
7676
});
7777

7878
bm.add('mj-social-element', {
79-
label: 'Social Element',
79+
label: editor.I18n.t('grapesjs-mjml.components.names.socialElement'),
8080
content: '<mj-social-element name="facebook" />',
8181
attributes: { class: 'fa fa-share-alt' },
8282
...allBlocks,
8383
});
8484

8585
bm.add('mj-spacer', {
86-
label: 'Spacer',
86+
label: editor.I18n.t('grapesjs-mjml.components.names.spacer'),
8787
content: '<mj-spacer/>',
8888
attributes: { class: 'fa fa-arrows-v' },
8989
...allBlocks,
9090
});
9191

9292
bm.add('mj-navbar', {
93-
label: 'NavBar',
93+
label: editor.I18n.t('grapesjs-mjml.components.names.navBar'),
9494
content: `<mj-navbar>
9595
<mj-navbar-link>Getting started</mj-navbar-link>
9696
<mj-navbar-link>Try it live</mj-navbar-link>
@@ -102,14 +102,14 @@ export default (editor, opt = {}) => {
102102
});
103103

104104
bm.add('mj-navbar-link', {
105-
label: 'NavBar Link',
105+
label: editor.I18n.t('grapesjs-mjml.components.names.navLink'),
106106
content: `<mj-navbar-link>Link 1</mj-navbar-link>`,
107107
attributes: { class: 'gjs-fonts gjs-f-button' },
108108
...allBlocks,
109109
});
110110

111111
bm.add('mj-hero', {
112-
label: 'Hero Element',
112+
label: editor.I18n.t('grapesjs-mjml.components.names.hero'),
113113
content: `<mj-hero mode="fixed-height" height="469px" background-width="600px" background-height="469px" background-url="https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg" background-color="#2a3448" padding="100px 0px">
114114
<mj-text padding="20px" color="#ffffff" font-family="Helvetica" align="center" font-size="45px" line-height="45px" font-weight="900">
115115
GO TO SPACE
@@ -123,7 +123,7 @@ export default (editor, opt = {}) => {
123123
});
124124

125125
bm.add('mj-wrapper', {
126-
label: 'Wrapper',
126+
label: editor.I18n.t('grapesjs-mjml.components.names.wrapper'),
127127
content: `<mj-wrapper border="1px solid #000000" padding="50px 30px">
128128
<mj-section border-top="1px solid #aaaaaa" border-left="1px solid #aaaaaa" border-right="1px solid #aaaaaa" padding="20px">
129129
<mj-column>

‎src/buttons.js

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export default (editor, opt = {}) => {
1+
export default (editor) => {
22
const tltAttr = 'title';
33
const tltPosAttr = 'data-tooltip-pos';
44
const pnm = editor.Panels;
@@ -17,6 +17,7 @@ export default (editor, opt = {}) => {
1717
id: 'mjml-import',
1818
className: 'fa fa-download',
1919
command: 'mjml-import',
20+
attributes: { [tltAttr]: editor.I18n.t('grapesjs-mjml.panels.buttons.import') }
2021
});
2122

2223
if (optPanel) {
@@ -40,12 +41,12 @@ export default (editor, opt = {}) => {
4041
id: 'undo',
4142
className: 'fa fa-undo',
4243
command: 'undo',
43-
attributes: { [tltAttr]: opt.cmdBtnUndoLabel }
44+
attributes: { [tltAttr]: editor.I18n.t('grapesjs-mjml.panels.buttons.undo') }
4445
}, {
4546
id: 'redo',
4647
className: 'fa fa-repeat',
4748
command: 'redo',
48-
attributes: { [tltAttr]: opt.cmdBtnRedoLabel }
49+
attributes: { [tltAttr]: editor.I18n.t('grapesjs-mjml.panels.buttons.redo') }
4950
}]);
5051
updateTooltip(cmdBtns);
5152
}
@@ -57,14 +58,17 @@ export default (editor, opt = {}) => {
5758
id: 'deviceDesktop',
5859
command: 'set-device-desktop',
5960
className: 'fa fa-desktop',
61+
attributes: { [tltAttr]: editor.I18n.t('grapesjs-mjml.panels.buttons.desktop') }
6062
}, {
6163
id: 'deviceTablet',
6264
command: 'set-device-tablet',
6365
className: 'fa fa-tablet',
66+
attributes: { [tltAttr]: editor.I18n.t('grapesjs-mjml.panels.buttons.tablet') }
6467
}, {
6568
id: 'deviceMobile',
6669
command: 'set-device-mobile',
6770
className: 'fa fa-mobile',
71+
attributes: { [tltAttr]: editor.I18n.t('grapesjs-mjml.panels.buttons.mobile') }
6872
}]);
6973
updateTooltip(deviceBtns);
7074

‎src/command-export-mjml.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export default (editor, opt = {}) => {
5656

5757
run(editor, sender = {}) {
5858
const modal = editor.Modal;
59-
modal.setTitle(opt.modalTitleExport);
59+
modal.setTitle(editor.I18n.t('grapesjs-mjml.panels.export.title'));
6060
modal.setContent('');
6161
modal.setContent(container);
6262

‎src/command-import-mjml.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export default (editor, opt = {}) => {
66
const pfx = config.stylePrefix || '';
77

88
// Init import button
9-
btnImp.innerHTML = opt.modalBtnImport;
9+
btnImp.innerHTML = editor.I18n.t('grapesjs-mjml.panels.import.button');
1010
btnImp.className = `${pfx}btn-prim ${pfx}btn-import`;
1111
btnImp.onclick = () => {
1212
const code = codeViewer.editor.getValue();
@@ -26,12 +26,12 @@ export default (editor, opt = {}) => {
2626
run(editor, sender = {}) {
2727
const modal = editor.Modal;
2828
let viewer = codeViewer.editor;
29-
modal.setTitle(opt.modalTitleImport);
29+
modal.setTitle(editor.I18n.t('grapesjs-mjml.panels.import.title'));
3030

3131
// Init code viewer if not yet instantiated
3232
if (!viewer) {
3333
const txtarea = document.createElement('textarea');
34-
const labelImport = opt.modalLabelImport;
34+
const labelImport = editor.I18n.t('grapesjs-mjml.panels.import.label');
3535

3636
if (labelImport) {
3737
let labelEl = document.createElement('div');

‎src/components/Body.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export default (editor, { dc, coreMjmlModel, coreMjmlView }) => {
1313
model: {
1414
...coreMjmlModel,
1515
defaults: {
16+
name: editor.I18n.t('grapesjs-mjml.components.names.body'),
1617
droppable,
1718
draggable: false,
1819
copyable: false,

‎src/components/Button.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default (editor, { dc, coreMjmlModel, coreMjmlView }) => {
1212
model: {
1313
...coreMjmlModel,
1414
defaults: {
15-
name: 'Button',
15+
name: editor.I18n.t('grapesjs-mjml.components.names.button'),
1616
draggable: '[data-gjs-type=mj-column], [data-gjs-type=mj-hero]',
1717
highlightable: false,
1818
stylable: ['width', 'height',

‎src/components/Column.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default (editor, { dc, opt, coreMjmlModel, coreMjmlView, sandboxEl }) =>
1010
model: {
1111
...coreMjmlModel,
1212
defaults: {
13-
name: 'Column',
13+
name: editor.I18n.t('grapesjs-mjml.components.names.column'),
1414
draggable: '[data-gjs-type=mj-section]',
1515
stylable: [
1616
'background-color', 'vertical-align', 'width',

‎src/components/Divider.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default (editor, { dc, coreMjmlModel, coreMjmlView }) => {
1010
model: {
1111
...coreMjmlModel,
1212
defaults: {
13-
name: 'Divider',
13+
name: editor.I18n.t('grapesjs-mjml.components.names.divider'),
1414
draggable: '[data-gjs-type=mj-column],[data-gjs-type=mj-hero]',
1515
droppable: false,
1616
'style-default': {

‎src/components/Group.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default (editor, { dc, coreMjmlModel, coreMjmlView }) => {
1010
model: {
1111
...coreMjmlModel,
1212
defaults: {
13-
name: 'Group',
13+
name: editor.I18n.t('grapesjs-mjml.components.names.group'),
1414
draggable: '[data-gjs-type=mj-section]',
1515
droppable: '[data-gjs-type=mj-column]',
1616
},

‎src/components/Hero.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export default (editor, { dc, coreMjmlModel, coreMjmlView }) => {
1414
model: {
1515
...coreMjmlModel,
1616
defaults: {
17-
name: 'Hero',
17+
name: editor.I18n.t('grapesjs-mjml.components.names.hero'),
1818
draggable: '[data-gjs-type=mj-body]',
1919
droppable,
2020
},

‎src/components/Image.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default (editor, { dc, coreMjmlModel, coreMjmlView }) => {
1111
model: {
1212
...coreMjmlModel,
1313
defaults: {
14-
name: 'Image',
14+
name: editor.I18n.t('grapesjs-mjml.components.names.image'),
1515
resizable: false,
1616
highlightable: false,
1717
draggable: '[data-gjs-type=mj-column],[data-gjs-type=mj-section], [data-gjs-type=mj-hero]',

‎src/components/NavBar.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export default (editor, { dc, coreMjmlModel, coreMjmlView, sandboxEl }) => {
88
model: {
99
...coreMjmlModel,
1010
defaults: {
11-
name: 'NavBar',
11+
name: editor.I18n.t('grapesjs-mjml.components.names.navBar'),
1212
draggable: '[data-gjs-type=mj-column],[data-gjs-type=mj-hero]',
1313
droppable: '[data-gjs-type=mj-navbar-link]',
1414
'style-default': {

‎src/components/NavBarLink.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default (editor, { dc, coreMjmlModel, coreMjmlView }) => {
1111
...coreMjmlModel,
1212

1313
defaults: {
14-
name: 'NavBarLink',
14+
name: editor.I18n.t('grapesjs-mjml.components.names.navLink'),
1515
draggable: '[data-gjs-type=mj-navbar]',
1616
highlightable: false,
1717
stylable: [

‎src/components/Section.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default (editor, { dc, coreMjmlModel, coreMjmlView }) => {
1010
model: {
1111
...coreMjmlModel,
1212
defaults: {
13-
name: 'Section',
13+
name: editor.I18n.t('grapesjs-mjml.components.names.section'),
1414
draggable: '[data-gjs-type=mj-body], [data-gjs-type=mj-wrapper]',
1515
droppable: '[data-gjs-type=mj-column]',
1616
'style-default': {

‎src/components/Social.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default (editor, { dc, coreMjmlModel, coreMjmlView }) => {
1010
model: {
1111
...coreMjmlModel,
1212
defaults: {
13-
name: 'Social',
13+
name: editor.I18n.t('grapesjs-mjml.components.names.socialGroup'),
1414
draggable: '[data-gjs-type=mj-column], [data-gjs-type=mj-hero]',
1515
droppable: '[data-gjs-type=mj-social-element]',
1616
stylable: [

‎src/components/SocialElement.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default (editor, { dc, coreMjmlModel, coreMjmlView }) => {
1010
model: {
1111
...coreMjmlModel,
1212
defaults: {
13-
name: 'SocialElement',
13+
name: editor.I18n.t('grapesjs-mjml.components.names.socialElement'),
1414
draggable: '[data-gjs-type=mj-social]',
1515
stylable: [
1616
'text-decoration', 'align', 'font-family', 'font-size', 'line-height',

‎src/components/Spacer.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default (editor, { dc, coreMjmlModel, coreMjmlView }) => {
1010
model: {
1111
...coreMjmlModel,
1212
defaults: {
13-
name: 'Spacer',
13+
name: editor.I18n.t('grapesjs-mjml.components.names.spacer'),
1414
draggable: '[data-gjs-type=mj-column], [data-gjs-type=mj-hero]',
1515
droppable: false,
1616
'style-default': { height: '20px' },

‎src/components/Text.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export default (editor, { dc, coreMjmlModel, coreMjmlView }) => {
2020
model: {
2121
...coreMjmlModel,
2222
defaults: {
23-
name: 'Text',
23+
name: editor.I18n.t('grapesjs-mjml.components.names.text'),
2424
draggable: '[data-gjs-type=mj-column], [data-gjs-type=mj-hero]',
2525
highlightable: false,
2626
stylable: [

‎src/components/Wrapper.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default (editor, { dc, coreMjmlModel, coreMjmlView }) => {
1010
model: {
1111
...coreMjmlModel,
1212
defaults: {
13-
name: 'Wrapper',
13+
name: editor.I18n.t('grapesjs-mjml.components.names.wrapper'),
1414
draggable: '[data-gjs-type=mj-body]',
1515
droppable: '[data-gjs-type=mj-section]',
1616
},

0 commit comments

Comments
 (0)