Skip to content

Commit

Permalink
Merge pull request #49 from LordRembo/update-grapesjs-compatibility-m5
Browse files Browse the repository at this point in the history 
Update grapesjs compatibility (Mautic 5)
@escopecz
escopecz authored Apr 19, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode
2 parents b1ee678 + 253d1d6 commit 81aef07
Showing 35 changed files with 851 additions and 467 deletions.
42 changes: 27 additions & 15 deletions dist/blocks.js
View file
Original file line number Diff line number Diff line change
@@ -1,114 +1,126 @@
import DynamicContentBlocks from './dynamicContent/dynamicContent.blocks';
import ContentService from './content.service';
import ButtonBlock from './buttonBlock';
import PanelsMjml from './panels/panels.mjml';
import BlocksMjml from './blocks/blocks.mjml';
export default ((editor, opts = {}) => {
const bm = editor.BlockManager;
const blocks = bm.getAll();
const mode = ContentService.getMode(editor);

if (mode === ContentService.modeEmailMjml) {
const panelMjml = new PanelsMjml(editor);
const blockMjml = new BlocksMjml(editor);
panelMjml.restylePanels();
blockMjml.addBlocks();
}
} // a add button block for landing page


// a add button block for landing page
if (mode === ContentService.modePageHtml) {
const buttonBlock = new ButtonBlock(editor);
buttonBlock.addButtonBlock();
} else {
// Add Dynamic Content block only for email modes
const dcb = new DynamicContentBlocks(editor, opts);
dcb.addDynamciContentBlock();
}
dcb.addDynamicContentBlock();
} // Add icon to mj-hero


// Add icon to mj-hero
if (typeof bm.get('mj-hero') !== 'undefined') {
bm.get('mj-hero').set({
attributes: {
class: 'gjs-fonts gjs-f-hero'
}
});
}
} // Delete mj-wrapper


// Delete mj-wrapper
if (typeof bm.get('mj-wrapper') !== 'undefined') {
bm.remove('mj-wrapper');
}
} // All block inside Blocks category


// All block inside Blocks category
blocks.forEach(block => {
block.set({
category: Mautic.translate('grapesjsbuilder.categoryBlockLabel')
});
});

/*
* Custom block inside Sections category
*/

// MJML columns

if (typeof bm.get('mj-1-column') !== 'undefined') {
bm.get('mj-1-column').set({
label: Mautic.translate('grapesjsbuilder.components.names.oneColumn'),
category: Mautic.translate('grapesjsbuilder.categorySectionLabel')
});
}

if (typeof bm.get('mj-2-columns') !== 'undefined') {
bm.get('mj-2-columns').set({
label: Mautic.translate('grapesjsbuilder.components.names.twoColumn'),
category: Mautic.translate('grapesjsbuilder.categorySectionLabel')
});
}

if (typeof bm.get('mj-3-columns') !== 'undefined') {
bm.get('mj-3-columns').set({
label: Mautic.translate('grapesjsbuilder.components.names.threeColumn'),
category: Mautic.translate('grapesjsbuilder.categorySectionLabel')
});
}

if (typeof bm.get('mj-37-columns') !== 'undefined') {
bm.get('mj-37-columns').set({
category: Mautic.translate('grapesjsbuilder.categorySectionLabel')
});
}
} // Newsletter columns


// Newsletter columns
if (typeof bm.get('sect100') !== 'undefined') {
bm.get('sect100').set({
category: Mautic.translate('grapesjsbuilder.categorySectionLabel')
});
}

if (typeof bm.get('sect50') !== 'undefined') {
bm.get('sect50').set({
category: Mautic.translate('grapesjsbuilder.categorySectionLabel')
});
}

if (typeof bm.get('sect30') !== 'undefined') {
bm.get('sect30').set({
category: Mautic.translate('grapesjsbuilder.categorySectionLabel')
});
}

if (typeof bm.get('sect37') !== 'undefined') {
bm.get('sect37').set({
category: Mautic.translate('grapesjsbuilder.categorySectionLabel')
});
}
} // Webpage columns


// Webpage columns
if (typeof bm.get('column1') !== 'undefined') {
bm.get('column1').set({
category: Mautic.translate('grapesjsbuilder.categorySectionLabel')
});
}

if (typeof bm.get('column2') !== 'undefined') {
bm.get('column2').set({
category: Mautic.translate('grapesjsbuilder.categorySectionLabel')
});
}

if (typeof bm.get('column3') !== 'undefined') {
bm.get('column3').set({
category: Mautic.translate('grapesjsbuilder.categorySectionLabel')
});
}

if (typeof bm.get('column3-7') !== 'undefined') {
bm.get('column3-7').set({
category: Mautic.translate('grapesjsbuilder.categorySectionLabel')
41 changes: 22 additions & 19 deletions dist/blocks/blocks.mjml.js
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,25 @@
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

export default class BlocksMjml {
constructor(editor) {
_defineProperty(this, "blockManager", void 0);

_defineProperty(this, "editor", void 0);

this.editor = editor;
this.blockManager = editor.BlockManager;
}

addBlocks() {
const sections37 = `<mj-column width="30%"><mj-text>Content 1</mj-text></mj-column>
<mj-column width="70%"><mj-text>Content 2</mj-text></mj-column>`;
this.blockManager.add('mj-37-columns', {
label: Mautic.translate('grapesjsbuilder.components.names.twoColumnThirdSevens'),
category: Mautic.translate('grapesjsbuilder.categorySectionLabel'),
attributes: {
class: 'gjs-fonts gjs-f-b37'
},
content: `<mj-section>${sections37}</mj-section>`
content: `<mj-section>${sections37}</mj-section>`,
media: `<svg viewBox="0 0 24 24">
<path fill="currentColor" d="M2 20h5V4H2v16Zm-1 0V4a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1ZM10 20h12V4H10v16Zm-1 0V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H10a1 1 0 0 1-1-1Z"></path>
</svg>`
});
const textSect = `<mj-column>
<mj-text font-size="18px" font-weight="bold">
@@ -30,10 +32,10 @@ export default class BlocksMjml {
this.blockManager.add('text-sect', {
label: Mautic.translate('grapesjsbuilder.components.names.textSectionBlkLabel'),
category: Mautic.translate('grapesjsbuilder.reusableDynamicContentBlockLabel'),
attributes: {
class: 'gjs-fonts gjs-f-h1p'
},
content: `<mj-section>${textSect}</mj-section>`
content: `<mj-section>${textSect}</mj-section>`,
media: `<svg viewBox="0 0 24 24">
<path fill="currentColor" d="M20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20M4,6V18H20V6H4M6,9H18V11H6V9M6,13H16V15H6V13Z" />
</svg>`
});
const gridItem = `<mj-group>
<mj-column>
@@ -58,10 +60,10 @@ export default class BlocksMjml {
this.blockManager.add('grid-items', {
label: Mautic.translate('grapesjsbuilder.components.names.gridItemsBlkLabel'),
category: Mautic.translate('grapesjsbuilder.reusableDynamicContentBlockLabel'),
attributes: {
class: 'fa fa-th'
},
content: `<mj-section>${gridItem}</mj-section>`
content: `<mj-section>${gridItem}</mj-section>`,
media: `<svg viewBox="0 0 24 24">
<path fill="currentColor" d="M3,11H11V3H3M3,21H11V13H3M13,21H21V13H13M13,3V11H21V3"/>
</svg>`
});
const listItem = `<mj-group>
<mj-column width="30%">
@@ -79,10 +81,11 @@ export default class BlocksMjml {
this.blockManager.add('list-items', {
label: Mautic.translate('grapesjsbuilder.components.names.listItemsBlkLabel'),
category: Mautic.translate('grapesjsbuilder.reusableDynamicContentBlockLabel'),
attributes: {
class: 'fa fa-th-list'
},
content: `<mj-section>${listItem}</mj-section>`
content: `<mj-section>${listItem}</mj-section>`,
media: `<svg viewBox="0 0 24 24">
<path fill="currentColor" d="M2 14H8V20H2M16 8H10V10H16M2 10H8V4H2M10 4V6H22V4M10 20H16V18H10M10 16H22V14H10"/>
</svg>`
});
}

}
13 changes: 9 additions & 4 deletions dist/buttonBlock.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

export default class ButtonBlock {
constructor(editor) {
_defineProperty(this, "blockManager", void 0);

this.blockManager = editor.BlockManager;
}

addButtonBlock() {
const style = `<style>
.button {
@@ -29,7 +30,11 @@ export default class ButtonBlock {
class: 'gjs-fonts gjs-f-button'
},
content: `${style}
<a href="#" target="_blank" class="button">Button</a>`
<a href="#" target="_blank" class="button">Button</a>`,
media: `<svg viewBox="0 0 24 24">
<path fill="currentColor" d="M20 20.5C20 21.3 19.3 22 18.5 22H13C12.6 22 12.3 21.9 12 21.6L8 17.4L8.7 16.6C8.9 16.4 9.2 16.3 9.5 16.3H9.7L12 18V9C12 8.4 12.4 8 13 8S14 8.4 14 9V13.5L15.2 13.6L19.1 15.8C19.6 16 20 16.6 20 17.1V20.5M20 2H4C2.9 2 2 2.9 2 4V12C2 13.1 2.9 14 4 14H8V12H4V4H20V12H18V14H20C21.1 14 22 13.1 22 12V4C22 2.9 21.1 2 20 2Z" />
</svg>`
});
}

}
Loading

0 comments on commit 81aef07

Please sign in to comment.