can't use grapesjs-mjml inside angular application

[mostafa-raafat]

There is 2 issues 1- unknown element

<div id="gjs">
  <mjml>       <----- unknown element 
    <mj-body>     <----- unknown element 
      <mj-container></mj-container>     <----- unknown element 
    </mj-body>
  </mjml>
</div>

2- if i didn't put this section

<mjml>       <----- unknown element 
    <mj-body>     <----- unknown element 
      <mj-container></mj-container>     <----- unknown element 
    </mj-body>
  </mjml>

i can't drop any component and i get this message in the console

Invalid target position: Target collection not found, Target is not droppable, accepts [undefined], Component not draggable, acceptable by [undefined]

[pivd89]

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

import 'grapesjs/dist/css/grapes.min.css';
import grapesJS from 'grapesjs';
import grapesJSMJML from 'grapesjs-mjml';
declare const grapesjs: any;

@Component({
  selector: 'app-ejemplo',
  template: '<button (click)="crearControl()" >generar</button><div id="gjs" #gjs></div>',
  styleUrls: ['./ejemplo.component.scss'],

})
export class EjemploComponent implements OnInit {

  constructor() { }
  @ViewChild('gjs', { static: true }) private gjs: ElementRef;
  ngOnInit() {

  }

  crearControl(): void {

    this.gjs.nativeElement.innerHTML = '<mjml><mj-body><mj-section><mj-column></mj-column></mj-section></mj-body></mjml>';

    const editor = grapesJS.init({
      container: '#gjs',
      fromElement: 1,
      plugins: [grapesJSMJML
      ],
      pluginsOpts: {
        [grapesJSMJML]: {
        }
      },
      style: '.txt-red{color: red}',
    });
  }
}