BUG: Running Headless Mode Returns Different HTML from Editor

hannydevelop commented 1 year ago

GrapesJS version

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

What browser are you using?

ChromeV117.0.5938.62

Reproducible demo link

https://codesandbox.io/embed/quizzical-galileo-cqldjh?fontsize=14&hidenavigation=1&theme=dark

Describe the bug

How to reproduce the bug?

Store pages using the store manager
Try to retrieve them using headless mode

What is the expected behavior? HTML created should be the same as that of the editor, including custom tags.

What is the current behavior? Custom tags and other non-default tags like input is transformed into div. For example, below is the normal behaviour from the editor:

<body id="ieug"><button type="button" id="i3bz">Send</button><div id="is0j" class="gjs-row"><div id="i93o" class="gjs-cell"><input type="text" id="inco"/></div></div></body>

However, here's the code from the headless mode:

    <body id="ieug"><div type="button" id="i3bz">Send</div><div id="is0j" class="gjs-row"><div id="i93o" class="gjs-cell"><div type="text" id="inco"/></div></div></body>

See how input is transformed into div.

Code of Conduct

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

artf commented 1 year ago

Hi @hannydevelop you have custom component types but you didn't pass any plugins on grapesjs.init that's why the default div is applied

hannydevelop commented 1 year ago

Hi @hannydevelop you have custom component types but you didn't pass any plugins on grapesjs.init that's why the default div is applied

I'm sorry that I am opening this again, adding the plugin in the normal way returns an error:

TypeError: e is not a function
    at /Users/ukpaiugochi/Peppu-gen/node_modules/grapesjs/dist/grapes.min.js:2:966276
    at Array.forEach (<anonymous>)
    at Object.init (/Users/ukpaiugochi/Peppu-gen/node_modules/grapesjs/dist/grapes.min.js:2:966215)

artf commented 1 year ago

@hannydevelop can you please show the code?

hannydevelop commented 1 year ago

@hannydevelop can you please show the code?

Thank you so much for responding. Here's my code.

import gjsForms from 'grapesjs-plugin-forms'

let editor = grapesjs.grapesjs.init({
        headless: true,
        pageManager: {
            pages: pages
        },
        plugins: [gjsForms],
        pluginsOpts: {
            gjsForms: {}
        }
    });

The addition of gjsForms to plugins throws an error.

hannydevelop commented 1 year ago

@hannydevelop can you please show the code?

Upon further investigation, I realised that adding a plugin to the plugins section throws an error in r.plugins.forEach(function (t) { at grapes.min.js for the Headless option

artf commented 1 year ago

sorry but I see no issues here https://stackblitz.com/edit/typescript-khi9by Ensure the plugin is properly installed (e is not a function looks like it's not).

Please read carefully how to use plugins as from your usage of pluginsOpts it's a bit confusing (it's not how you're supposed to use a function there)

GrapesJS / grapesjs