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 GrapesJS/grapesjs#5549

I tried to do as @artf said in:
GrapesJS/grapesjs#5549 (comment)

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

[artf]

Try to check if this work

traits: [
          {
            label: 'Preview Text',
            getValue: ({ component }) => component.getInnerHTML(),
            setValue: ({ component, value }) => component.components(value)
          }
        ],

[adrianodias8]

Thanks for your reply! Will do that and then I ping back here if it works!
If I manage it I will create a PR for that.

[adrianodias8]

with this i couldn't make it work the value appears text box but it is added to the mjml tag as a empty attribute like ="whatever i wrote in my textbox"

traits: [
          {
            label: 'Preview Text',
            getValue: ({ component }) => component.getInnerHTML(),
            setValue: ({ component, value }) => component.components(value)
          }
        ],

with

changeProp: true,

i can change the content of the tag but i have trouble if i have already some text in the tag and i can't get it to persist or the moment i go to preview i lose whatever i wrote in the textbox