Missing mj-preview component

[adrianodias8]

Hi there!

First of all I would like to say that the tool is really nice! I was looking forward to use it and I'm currently trying to understand how grapesjs and this mjml plugin works.

I faced similar issue with mj-preview has https://github.com/GrapesJS/grapesjs/issues/5549

I tried to do as @artf said in: https://github.com/GrapesJS/grapesjs/issues/5549#issuecomment-1848949947

and here is what I did: (sorry my bad code I'm not proficient in typescript or js)

So I tried to register a new custom component: Preview.ts

// Specs: https://documentation.mjml.io/#mj-preview
import type { Editor } from 'grapesjs';
import {isComponentType } from './utils';

export const type = 'mj-preview';

export default (editor: Editor, { opt, coreMjmlModel, coreMjmlView, sandboxEl }: any) => {
  editor.Components.addType(type, {
    isComponent: isComponentType(type),

    model: {
      ...coreMjmlModel,
      defaults: {
        draggable: false,
        highlightable: true,
        stylable: false,
        traits: [{ label: 'Preview Text', type: 'text', name: 'content', changeProp: true }],
        copyable: false,
      },
    },

    view: {
      ...coreMjmlView,
      tagName: 'mj-preview',

      getMjmlTemplate() {
        return {
          start: `<mjml><mj-head>`,
          end: `</mj-head></mj-body></mjml>`,
        };
      },

      getTemplateFromEl(sandboxEl: any) {
        return sandboxEl.querySelector('div').innerHTML;
      },

      render() {
        return this;
      },
    }
  });
};

and I load it in here

diff --git a/src/components/index.ts b/src/components/index.ts
index 0b6c09c..1396601 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -20,6 +20,7 @@ import loadNavBar from './NavBar';
 import loadNavBarLink from './NavBarLink';
 import loadHero from './Hero';
 import loadRaw from './Raw';
+import loadPreview from './Preview';
 import { RequiredPluginOptions } from '..';

 export default (editor: Editor, opt: RequiredPluginOptions) => {
@@ -303,6 +304,7 @@ export default (editor: Editor, opt: RequiredPluginOptions) => {
     loadNavBarLink,
     loadHero,
     loadRaw,
+    loadPreview,
   ]
   .forEach(module => module(editor, compOpts));
 };

And I almost got it working as it supposed to with a trait to control the text.

Problem:

if in my mjml template i have <mj-preview>Hello MJML</mj-preview> "Hello MJML" is not loaded into the trait field.

when i type something it will add to the existing value

I saw this: https://github.com/GrapesJS/grapesjs/issues?q=is%3Aissue+trait+change+value+is%3Aclosed+#issuecomment-1192600885

but it's not picking up the initial value or (most probably i'm missing something)

Can someone give me some guidance? Appreciate your time and effort!

Best, Adriano Dias