Can we change the default size of image? For example setting the default width to 100%?

[Lei-0513]

When I drag an image block into the editor, I want the default width of the image to be 100%, not auto.

[Lei-0513]

@artf Could you please help this one?
After I drag a image block into canvas, I want the default image width to be 100%. Do you know how to achieve it?
I tried to re-add image type, but it didn't work.

  editor.DomComponents.addType('image', {
    isComponent: (el) => el.tagName?.toLowerCase() === 'img',
    model: {
      defaults: {
        tagName: 'img',
        style: {
          width: '100%',
        },
      },
    },
  });

[artf]

You have to update the block as it's the one providing the default style

editor.Blocks.get('image').set({
    content: { type: 'image', style: { width: '100%' } } 
})

[teknosains]

you can also do it like this

// for every component dragged to canvas

editor.on('canvas:dragend', (dt) => {
   const comp = editor.current?.Canvas.getLastDragResult();
   
   if (comp?.is('image')) {
      comp?.setStyle({ width: '100%' }); // add other stylings if you like
   }
   
});

if you're using React and inits inside the useEffect, it should look like this

useEffect(() => {
  editor.current = grapesjs.init({
      // ...
  });

  editor.current?.on('canvas:dragend', (dt) => {
     // ...
  });

}, []);