Don't see mj-group in block manager

[lechuhuuha]

What browser are you using? Firefox 107 on Windows 10

grapesjs-mjml : "1.0.2" grapesjs: "^0.20.1"

How to reproduce? Clone the latest grapesjs-mjml and run npm i Config exactly the same in the doc

<link href="path/to/grapes.min.css" rel="stylesheet"/>
<script src="path/to/grapes.min.js"></script>
<script src="path/to/grapesjs-mjml.min.js"></script>

<div id="gjs">
  <mjml>
    <mj-body>
      <!-- Your MJML body here -->
      <mj-section>
        <mj-column>
          <mj-text>My Company</mj-text>
        </mj-column>
      </mj-section>
    </mj-body>
  </mjml>
</div>

<script type="text/javascript">
  const editor = grapesjs.init({
      fromElement: true,
      container: '#gjs',
      plugins: ['grapesjs-mjml'],
      pluginsOpts: {
        'grapesjs-mjml': {/* ...options */}
      }
  });
</script>

After setup i open the browser with index.html and no sign of mj-group block

Tab block

[lechuhuuha]

I just add mj-group using this code

block_manager.add("mj-group", {
    category: "Bố cục",
    label: "Groups",
    media: `<i class="fa fa-object-group" style="font-size: 40px;" aria-hidden="true"></i> `,
    content: `  
    <mj-section>
    <mj-group>
      <mj-column>
        <mj-image width="137px" height="185px" padding="0"    src="https://mjml.io/assets/img/easy-and-quick.png"></mj-image>
        <mj-text align="center">
          <h2>Easy and quick</h2>
          <p>Write less code, save time and code more efficiently with MJML’s semantic syntax.</p>
        </mj-text>
      </mj-column>
      <mj-column>
        <mj-image width="166px" height="185px" padding="0" src="https://mjml.io/assets/img/responsive.png" ></mj-image>
        <mj-text align="center">
          <h2>Responsive</h2>
          <p>MJML is responsive by design on most-popular email clients, even Outlook.</p>
        </mj-text>
      </mj-column>
    </mj-group>
  </mj-section>`,
});