Missing mj-preview component

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**
```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: ``,
end: ``,
};
},

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

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

```

and I load it in here

```diff
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 `Hello MJML` "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