BUG: mj-preview is not editable

GrapesJS version

• 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

<img width="878" alt="Screenshot 2023-12-06 at 14 23 53" src="https://github.com/GrapesJS/grapesjs/assets/939815/2d6ab784-c6b5-4de4-a522-d6f4ed076eee">

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

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