Proper way to update just rendered part of component

[aleksandar-kordic]

Hi, I'm working on interesting problem, creating components that contain handlebars placeholders but are rendered for preview. Basically, when you add component it prefills with some default data but in the background MJML remains with placeholders and handlebars logic. So far, it works (example at the end) but issue is that using el.innerHTML to update content in onRender method kills Style Manager functionality for this component. Couldn't find any appropriate method to update content and keep full style functionality so decided to ask community for help, ty.

Example of component
`
grapesjs.plugins.add('test-components', (editor, opts = {}) => {
const blockManager = editor.BlockManager
const domc = editor.DomComponents

  domc.addType('my-first-block', {
    model: {
      defaults: {
        name: 'Test block',
        tagName: 'mj-column',
        draggable: true,
        droppable: true,
        components: `<mj-column>
                        <mj-text style="font-size: 20px;" class="placeholder">{{myText}}</mj-text>
                    </mj-column>`,
        traits: [
          {
            type: 'text',
            label: 'Text',
            name: 'myText',
            placeholder: 'Insert your text here',
            default: 'Initial value'
          }
        ]
      },
      init ( ) {
        this.on('component:update', () => {
          this.view.render()
        })
      }
    },
    view: {
      onRender(opts) {
        const output = this.renderTemplate(opts.el.innerHTML, opts.model.attributes?.attributes)
        opts.el.innerHTML = output
      },
      renderTemplate (content: string, scope: any){
        const template = Handlebars.compile(content)
        const context = { ...scope }
        return template(context)
      }
    }
  })

  blockManager.add('my-first-block', {
    label: 'Simple text',
    attributes: { class: 'fa fa-text' },
    content: { type: 'my-first-block' },
    category: 'Custom category',
  })
})`

[artf]

Using simply innerHTML will "skip" elements from the editor parsing/component creation, so you won't be able to "interact" with them as components.
You can create new components from the view in this way:

onRender({ model }) {
 // ...
 model.components('<div>New component</div>');
}

[aleksandar-kordic]

Hey, thank you for answer. This approach works but in the end doesn't solve my issue, since we need to handle things on two levels. We want to display user rendered handlebars template with possibility to style it and keep raw template in background with all logic and placeholders so it can be saved to backend. mode.component() will remove all handlebars logic if we provide it with rendered output while approach with innerHTML works in every aspect but styling, styles are applied to template but not visually displayed. Is there a way to tell editor to reinitialize component and display latest style updates?