Adding default styling to a component

Your change on the block doesn't work because you don't change the actual component (just the block's property)

editor.BlockManager.get('image').get('content').style = { 'max-width':'100%' }

With cssComposer instead, by default, selectorManager accepts classes

...
var sel1 = sm.add('img'); // here you'r adding `.img` selector and not `img`

An easier way to add custom CSS might be this one

editor.addComponents('<style> ... </style>');

But be careful, if store your templates and then run this command on any refresh this will continue to create styles. For default CSS I'd recommend:

grapesjs.init({
  // CSS that could only be seen (for instance, inside the code viewer)
  protectedCss: 'img { ... }',
  
  // If have an external file, like for example, some reset CSS
  // you can use this
  canvas: {
	styles: ['https://...file.css']
  }
})

Thank you! I was able to get that working with: protectedCss: 'img {max-width:100%;}', I have the same issue with videos and iframes (for youtube) being dropped onto the template larger than the screen size and the protectedCss solution did not work for those. Any suggestions?

protectedCss is loaded so the CSS is here, if it doesn't work probably your CSS technique is not correct