Error on change trait in MJML component

[ronaldohoch]

Hello guys,
I have a custom component using MJML in a fork of https://github.com/artf/grapesjs-mjml

This is the block i'm using:

  let rssContent = `
    <mj-column width="100%" class='dinRssItem'>
      <mj-text class='dinRssTitle'>
        ${opts.dinEditorRssTitle}
      </mj-text>
      <mj-text class='dinRssDate'>
        ${opts.datezFull}
      </mj-text>
      <mj-text class='dinRssDescription'>
        ${opts.dinEditorRssContent}
      </mj-text>
    </mj-column>
  `;
  

  bm.add('dina-rss', {
    // category: opts.category,
    label: "RSS's",
    content: `
      <mj-section data-gjs-type="mj-rss"
        id="Rss" css-class='dinRss' 
        data-rss-url='' data-rss-lang-filter='pt_BR' 
        data-rss-days-filter='10' data-rss-link-filter='0' 
        data-rss-total-min-filter='1' data-rss-total-max-filter='3' 
        data-rss-show-date-filter='1' data-rss-show-content-filter='1'>

        ${rssContent}

      </mj-section>
    `,
    ...allBlocks,
  });

Rss.js

// Specs: https://mjml.io/documentation/#mjml-column
import { isComponentType, mjmlConvert } from './utils.js';

export default (editor, { dc, opt, coreMjmlModel, coreMjmlView, sandboxEl }) => {
    const type = 'mj-rss';
    const clmPadd = opt.columnsPadding;

    dc.addType(type, {
        isComponent: isComponentType(type),
        model: {
            ...coreMjmlModel,
            defaults: {
                name: "Risos risos",
                draggable: '[data-gjs-type=mj-body]',
                stylable: [
                    'background-color', 'vertical-align', 'width', 'background-image',
                    'border-radius', 'border-top-left-radius', 'border-top-right-radius', 'border-bottom-left-radius', 'border-bottom-right-radius',
                    'border', 'border-width', 'border-style', 'border-color', 'padding', 'padding-left', 'padding-right', 'padding-top', 'padding-bottom'
                ],
                'style-default': {
                    'vertical-align': 'top'
                },
                toolbar: [
                    {
                        attributes: {
                            class: 'fa fa-arrow-up'
                        },
                        command: e => e.runCommand('core:component-exit', {
                            force: 1
                        })
                    },
                    {
                        attributes: {
                            class: 'fa fa-arrows gjs-no-touch-actions',
                            draggable: true
                        },
                        command: 'tlb-move'
                    },
                    {
                        attributes: {
                            class: 'fa fa-clone'
                        },
                        command: 'tlb-clone'
                    },
                    {
                        attributes: {
                            class: 'fa fa-trash-o'
                        },
                        command: 'tlb-delete'
                    }
                ],
                traits: [
                    { type: 'text', label: 'URL', name: 'rssUrl', placeholder: "https://", changeProp: 1 },
                ]
            },
        },

        view: {
            ...coreMjmlView,
            tagName: 'div',
            attributes: {
                style: 'pointer-events: all;' + (clmPadd ? `padding: ${clmPadd};` : ''),
            },

            init() {
                console.log("init");

                this.listenTo(this.model, 'change:rssUrl', (e) => {
                    // console.log(e, e.changed.rssUrl);
                    let value = e.changed.rssUrl;
                    console.log(editor.DomComponents.componentsById['Rss'],value);
                    editor.DomComponents.componentsById['Rss'].addAttributes(
                        {"data-rss-url": value}
                    );
                });
            },

            getTemplateFromMjml() {
                let mjmlTmpl = this.getMjmlTemplate();
                let innerMjml = this.getInnerMjmlTemplate();
                const htmlOutput = mjmlConvert(`${mjmlTmpl.start} ${innerMjml.start}${innerMjml.end}${mjmlTmpl.end}`, opt.fonts);
                let html = htmlOutput.html;

                // I need styles for responsive columns
                let styles = [];
                sandboxEl.innerHTML = html;
                var styleArr = Array.from(sandboxEl.querySelectorAll('style'));
                styleArr.forEach((item) => {
                    styles.push(item.innerHTML);
                });


                let content = html.replace(/<body(.*)>/, '<body>');
                let start = content.indexOf('<body>') + 6;
                let end = content.indexOf('</body>');
                sandboxEl.innerHTML = content.substring(start, end).trim();
                let componentEl = this.getTemplateFromEl(sandboxEl);

                // Copy all rendered attributes (TODO need for all)
                let attributes = {};
                const elAttrs = componentEl.attributes;

                for (let elAttr, i = 0, len = elAttrs.length; i < len; i++) {
                    elAttr = elAttrs[i];
                    attributes[elAttr.name] = elAttr.value;
                }

                return {
                    attributes,
                    content: componentEl.innerHTML,
                    style: styles.join(' ')
                };
            },

            render() {
                this.renderAttributes();
                const mjmlResult = this.getTemplateFromMjml();
                this.el.innerHTML = mjmlResult.content;
                this.$el.attr(mjmlResult.attributes);
                editor.addComponents(`<style>${mjmlResult.style}</style>`);
                this.getChildrenContainer().innerHTML = this.model.get('content');
                this.renderChildren();
                this.renderStyle();
                return this;
            },

            renderStyle() {
                // Correção paleativa para a issue: https://github.com/artf/grapesjs-mjml/issues/199
                // Padding não funciona com background no mjml
                const model_style = this.model.get('style') || {}
                const style = Object.keys(this.model.get('style')).map(attr => `${attr}:${model_style[attr]};`)
                this.el.setAttribute('style', `${this.attributes.style} ${style.join(' ')} ${this.el.getAttribute('style')}`);
            },

            getMjmlTemplate() {
                // Need it for responsive columns
                let cols = this.model.collection.length - 1;
                cols = cols ? cols : 0;
                let addColmn = Array(cols).fill('<mj-column></mj-column>').join('');

                return {
                    start: `<mjml><mj-body><mj-section>`,
                    end: `${addColmn}</mj-section></mj-body></mjml>`,
                };
            },

            getTemplateFromEl(sandboxEl) {
                return sandboxEl.firstChild.querySelector('div > table > tbody > tr > td > div');
            },

            getChildrenSelector() {
                return 'table';
            },
        },
    });
};

In the block, i have this attributes:

Nothing wrong until now: (This part is already solved, but stills with the event problem)
When mjml compile to html, it takes all this data-something and turn it into styles:

So, i have this trait configured:

traits: [
          { type: 'text', label: 'URL', name: 'rssUrl', placeholder: "https://", changeProp: 1 },
]

And this event should change this attribute, the same code works if it is not in mjml.

this.listenTo(this.model, 'change:rssUrl', (e) => {
    // console.log(e, e.changed.rssUrl);
    let value = e.changed.rssUrl;
    console.log(editor.DomComponents.componentsById['dinaRss'],value);
    editor.DomComponents.componentsById['dinaRss'].addAttributes(
        {"data-rss-url": value}
    );
});

But, when i change it, the addAttribute remove all style from it and don't add the value from field neither the data-attributes in html

Tried this code too but it didn't listen on trait change:

this.on('change:rssUrl', (e) => {
    let value = e.changed.r;
    editor.DomComponents.componentsById[e.id].addAttributes({ "rss-url": value });
});

So, is there a way to listen to the change events and update these attributes and replace them in the html version?