Toolbar Label

[ronaldohoch]

Hello Artf and Grapers \o.

Is there a way to change the Label? This print is a custom component.

Edit 1:
Also, i didn't find the label in the whole project

Edit 2:
Just fund the name property here: https://github.com/artf/grapesjs/blob/dev/src/dom_components/model/Component.js#L62
But didn't work.

[artf]

Hi @ronaldohoch try to check the logic behind component.getName (used in the badge label).
It should actually rely on the i18n path and fallback to the name in your case, but you might have other customizations from that point, so I'm not sure what might be the issue.

[ronaldohoch]

I have a fork on mjml-preset and tryied on a button and it worked, so my problem is on isComponent in a new component, if you can help with it, here is the code:

blocks.js

let productLine = `
<mj-section>
  <mj-column>
      <mj-image padding="0px" height="140px" src="http://placehold.it/179x140"></mj-image>
  </mj-column>
  <mj-column width="40%">
      <mj-text padding="0px">Guitarra</mj-text>
      <mj-text padding="0px">Descrição básica da guitarra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum pulvinar sapien vitae lacinia blandit.</mj-text>
  </mj-column>
  <mj-column width="25%">
      <mj-text padding="0px" font-size="12px">R$ 150,00</mj-text>
      <mj-spacer height="20px"></mj-spacer>
      <mj-button padding="0px">Saiba mais</mj-button>
  </mj-column>
</mj-section>
`

  bm.add('mj-cart', {
    name:"Carrinho",
    label: editor.I18n.t('mjml-preset.components.names.cart'),
    content: `<mj-cart data-dina-type="btn-create-cart">
                ${productLine}
              </mj-cart>`,
    attributes: { class: 'fa fa-shopping-cart' },
    ...allBlocks,
  });

Cart.js, the component, copy from Column.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-cart';
    const clmPadd = opt.columnsPadding;

    dc.addType(type, {
        // isComponent: el => {
        //     if(el.tagName==="DIV" && el.getAttribute('data-dina-type')==="btn-create-cart"){
        //         // if(el.getAttribute("data-dina-type")==="btn-create-cart"){
        //             return true;
        //         // }
        //     }
        // },
        model: {
            ...coreMjmlModel,
            defaults: {
                name:"Carrinho",
                // name: editor.I18n.t('dina-mjml-preset.components.names.column'),
                draggable: '[data-gjs-type=mj-body], [data-gjs-type=mj-wrapper]',
                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'
                },
                traits:[
                    "name",
                    "description"
                ]
            },
        },

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

            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';
            },
        },
    });
};