PREGUNTA: Añadir estilo por defecto a un componente

Tu cambio en el bloque no funciona porque no cambias el componente real (solo la propiedad del bloque). '''js editor. BlockManager.get('image').get('content').style = { 'max-width':'100%' }

Con 'cssComposer' en su lugar, por defecto, SelectorManager acepta clases
'''js
...
var sel1 = sm.add('img'); Aquí estás añadiendo el selector '.img' y no 'IMG'

Una forma más sencilla de añadir CSS personalizado podría ser esta '''js editor.addComponents('<style> ... </style>');

Pero ten cuidado, si guardas tus plantillas y luego ejecutas este comando en cualquier actualización, esto seguirá creando estilos. Para CSS por defecto recomendaría:
'''js
grapesjs.init({
  CSS que solo podía verse (por ejemplo, dentro del visor de código)
  protectedCss: 'img { ... }',
  
Si tienes un archivo externo, por ejemplo, algo de reinicio CSS
  Puedes usar esto
  lienzo: {
	Styles: ['https://... file.css']
  }
})

¡Gracias! Pude conseguirlo funcionando con: 'protectedCss: 'img {max-width:100%;}',' Tengo el mismo problema con vídeos e iframes (para YouTube) que se colocan en la plantilla más grandes que el tamaño de pantalla y la solución protectedCss no funcionó para eso. ¿Alguna sugerencia?

'protectedCss' está cargado, así que el CSS está aquí; si no funciona, probablemente tu técnica CSS no sea correcta