Question: Is it possible to write an inline `grapes-mjml` custom component? (ie. no build system)

Hello,

I’m working in an environment without a build system, so as a result I have to use the pre-built grapesjs-mjml plugin in my grapesjs.init(). I am trying to write a custom grapejs-mjml component as a function expression (ie. const customComponentTypes = (editor) => {}; that can then be included via the grapesjs.init() plugins list.

However, I’m running into the obvious problems of not having access to the coreMjmlModel and coreMjmlView expressions along with other utilities such as mjmlConvert since those are part of the pre-built plugin script and I have no way of importing them separately for inline use.

Is there any way to gain a reference to the utilities and expressions required to create an inline grapesjs-mjml component? Or, am I going to have to find a way to incorporate a build system into my project, clone the full grapesjs-mjml, write the component as a stand-alone component js file, and run a build to get a complete minified file?

const placeholderComponents = function(editor) {
    const type = 'spc-placeholder';
    editor.DomComponents.addType(type, {
        extend: 'text',
        extendFnView: ['onActive'],
        isComponent: function(el) {
            if (el.tagName === type.toUpperCase()) {
                return {
                    type: type,
                    content: el.innerHTML,
                    components: [],
                };
            }
        },
        model: {
            ...coreMjmlModel,
            defaults: {
                name: 'placeholder',
                draggable: '[data-gjs-type=mj-column], [data-gjs-type=mj-hero]',
                highlightable: false,
                stylable: [
                    'height', 'font-style', 'font-size', 'font-weight', 'font-family', 'color',
                    'line-height', 'letter-spacing', 'text-decoration', 'align', 'text-transform',
                    'padding', 'padding-top', 'padding-left', 'padding-right', 'padding-bottom',
                    'container-background-color'
                ],
                'style-default': {
                    'padding-top': '10px',
                    'padding-bottom': '10px',
                    'padding-right': '25px',
                    'padding-left': '25px',
                    'font-size': '13px',
                    'line-height': '22px',
                    'align': 'left',
                },
            },
        },
        view: {
            ...coreMjmlView,
            tagName: 'tr',
            attributes: {
            style: 'pointer-events: all; display: table; width: 100%',
        },
        getMjmlTemplate: function() {
            return {
                start: `<mjml><mj-body><mj-column>`,
                end: `</mj-column></mj-body></mjml>`,
            };
        },
        getTemplateFromEl: function(sandboxEl) {
            return sandboxEl.querySelector('tr').innerHTML;
        },
        getChildrenSelector: function() {
            return 'td > div';
        },
        /**
        * Prevent content repeating
        */
        renderChildren: function() {
            coreMjmlView.renderChildren.call(this);
        },
        /**
        * Need to make text selectable.
        */
        onActive: function() {
            this.getChildrenContainer().style.pointerEvents = 'all';
        },
     },
    });
};

[HeyWrecker]

@DRoet actually, I think a custom block would work just fine. My use case is adding static custom placeholders (ex. [: email :] that would then get parsed server-side. So if I can do that as a block with a little mjml wrapping it, that should do nicely. That looks like what you’re suggesting via the example.

const block_manager = editor.BlockManager;

block_manager.add('placeholder-location', {
    category: 'Placeholders',
    label: 'Location',
    content: '<mj-text>[: location :]</mj-text>',
    attributes: { class: 'gjs-fonts gjs-f-text' },
});

Is there a way to make a block like that not editable?

[DRoet]

Are you looking to add a new mjml-component or do you just want to create a custom block that you can drag and drop into your editor?

To add a custom block you can add it to the BlockManager like so:

editor.BlockManager.add('custom-block', {
   category: 'section',
   label: '3/7 split',
   attributes: {
      title: '3/7 split',
      class: 'gjs-fonts gjs-f-b37'
   },
   class: 'gjs-fonts gjs-f-b37',
   content: `<mj-section background-color="#FFFFFF">
                <mj-column width="30%" border-radius="0 0 0 0" padding="10px">
                   <mj-text font-family="Roboto, Helvetica, sans-serif" font-size="17px" line-height="24px" color="#616161" align="center">
                      default text
                   </mj-text>
                </mj-column>
                <mj-column width="70%" border-radius="0 0 0 0" padding="10px">
                   <mj-text font-family="Roboto, Helvetica, sans-serif" font-size="17px" line-height="24px" color="#616161" align="center">
                      default text
                   </mj-text>
                </mj-column>
             </mj-section>`
})

If you want to add a new mjml component (for example mj-carousel) feel free to submit a PR and I can take a look to merge it in.