Updating trait value

[brunoocrv]

Hi everyone, I´m building a page builder with grapesJS and I need to build a icon block, where i have to load a svg icon and update the svg content to render a new svg icon. I created a block using data-gjs-type="icon" and a trait to this block, but I cannot update the svg value. I will let the code below:

editor.BlockManager.add('icon', {
		label: 'Ícone',
		content: {
			components: `<div data-gjs-type="icon" style="width: 40px;">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-activity-square"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M17 12h-2l-2 5-2-10-2 5H7"/></svg>
			</div>`,
			traits: [
				{
					type: 'text',
					name: 'iconContent',
					label: 'svg',
					placeholder: 'Insira seu SVG aqui'
				}
			]
		}
	})

[javadsamiee]

First of all create a block with "icon" type, then with creating a new type you can do everything you want like add traits and change your icon content.

An example:

bm.add('icon', {
  label: 'Icon',
  content: {
    type: 'icon',
  },
});
  
domc.addType('icon', {
  model: {
    defaults: {
      name: 'Icon',
      traits: [
        {
          type: 'text',
          name: 'iconContent',
          label: 'svg',
          placeholder: 'Insira seu SVG aqui'
        }
      ],
      components: `
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-activity-square"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M17 12h-2l-2 5-2-10-2 5H7"/></svg>
        `,
    },
  },
  view: {
    init() {
      this.listenTo(
        this.model,
        'change:attributes:iconContent',
        this.updateIconContent,
      );
    },
    updateIconContent(model, iconContent) {
      editor.getSelected().components(iconContent);
      editor.getSelected().view.render();
    },
  },
  isComponent() {
    return { type: 'icon' };
  },
});

[brunoocrv]

Unfortunately this example doesn't work. I tried to implement, but now the editor doesn't render my component and the value passed to trait field is ignored

[javadsamiee]

Live demo

const editor = grapesjs.init({
  height: "100%",
  container: "#gjs",
  showOffsets: true,
  fromElement: true,
  noticeOnUnload: false,
  storageManager: false,
  selectorManager: {
    componentFirst: true
  }
});

editor.BlockManager.add('icon', {
  label: 'Icon',
  content: {
    type: 'icon',
  },
});

editor.DomComponents.addType('icon', {
  model: {
    defaults: {
      name: 'Icon',
      traits: [
        {
          type: 'text',
          name: 'iconContent',
          label: 'svg',
          placeholder: 'Insira seu SVG aqui'
        }
      ],
      attributes: { class: 'icon' },
      components: `
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-activity-square"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M17 12h-2l-2 5-2-10-2 5H7"/></svg>
        `,
      styles: `
      .icon svg {
        width: 100px
      }
      `
    },
    
  },
    view: {
    init() {
      this.listenTo(
        this.model,
        'change:attributes:iconContent',
        this.updateIconContent,
      );
    },
    updateIconContent(model, iconContent) {
      editor.getSelected().components(iconContent);
      editor.getSelected().view.render();
    },
  },
});

[brunoocrv]

This example appears to work fine. I'm thankfull so much your help!!

[artf]

Thanks @javadsamiee
I will post below a small improvement:

1. Extending the view here is unnecessary (required only for custom element behaviors in the canvas)
2. Use changeProp: true in your trait to avoid having iconContent as an attribute in the exported HTML <div class="icon" iconContent="...">...

editor.Components.addType("icon", {
  model: {
    defaults: {
      // ...
      iconContent: '',
      traits: [
        {
          type: "text",
          name: "iconContent",
          label: "svg",
          placeholder: "Insira seu SVG aqui",
          changeProp: true,
        }
      ],
      attributes: { class: "icon" },
      components: `<svg ...></svg>`,
      styles: `.icon ... { ... }`
    },
    
    init() {
      this.on('change:iconContent', this.upIcon)
    },
    
    upIcon(cmp, value) {
      this.components(value);
    }
  },
});