How to customize a component

I read this document https://grapesjs.com/docs/modules/Components.html#define-custom-component-type and tried to write the following code. I want to make mj-body impossible to delete:

const myNewComponentTypes = editor => {
          editor.DomComponents.addType("my-body-type",{
            isComponent: el => el.tagName === 'mj-body',
            model:{
              default:{
                removable:false,
                tagName:'mj-body',
              }
            }
          });
        };
var editor = grapesjs.init({
          container: '#gjs',
          // Get the content for the canvas directly from the element
          // As an alternative we could use: `components: '<h1>Hello World Component!</h1>'`,
          fromElement: true,
          // Size of the editor
          height:600,
          width: 'auto',
          // Disable the storage manager for the moment
          storageManager: false,
          // Avoid any default panel
          panels: { defaults: [] },

          plugins: ['grapesjs-mjml','gjs-plugin-ckeditor', myNewComponentTypes],
          pluginsOpts: {
            'grapesjs-mjml': {},
            'gjs-plugin-ckeditor': {/* ...options */}
          },
})

<div id="gjs" style="height: 0px; overflow: hidden">
      <mjml>
        <mj-head>
          <mj-font
            name="Barlow"
            href="https://fonts.googleapis.com/css?family=Barlow"
          />

          <mj-style> .slogan { background: #000; } </mj-style>
        </mj-head>
        <mj-body>

But I don't see the effect, please help me