BUG: mj-preview is not editable

[driskell]

GrapesJS version

• [X] I confirm to use the latest version of GrapesJS

What browser are you using?

Safari 17

Reproducible demo link

https://grapesjs.com/demo-mjml.html

Describe the bug

How to reproduce the bug?

1. https://grapesjs.com/demo-mjml.html
2. Go to view code - copy the MJML
3. Go to import code - paste in the MJML and add to the top <mj-head><mj-preview>Some preview text</mj-preview></mj-head>
4. Now try to edit it

What is the expected behavior?

Should be able to edit - or it shouldn't be visible in the editor.

What is the current behavior? It displays top left, with default font, no padding, and is not editable. In previous versions of grapeJS builder it is in fact editable, but if you edit it too short the highlight "BODY" gets in the way and you can never get back to editing it. Further, if you empty it, it seems unreachable in the editor completely but the gap is still there.

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[artf]

This is not core related issue and probably not an issue at all as <mj-preview> is not supported by default in mjml plugin

[driskell]

@artf Sorry I don't understand. It’s an issue as detailed. Is it something to raise on the other repository? I’m not familiar with the internals here so don’t know what it is that the GrapesJS/mjml needs to support in order for this repository to not display it

[driskell]

It is noted in Head: https://github.com/GrapesJS/mjml/blob/master/src/components/Head.ts#L14

[artf]

Is it something to raise on the other repository?

Yes, as this is not related to the core.

I’m not familiar with the internals here so don’t know what it is that the GrapesJS/mjml needs to support in order for this repository to not display it

You have to register a new custom component similar to others and apply the logic you want for <mj-preview>