BUG: Running Headless Mode Returns Different HTML from Editor

Question

GrapesJS version

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

I agree to follow this project's Code of Conduct

Answers (3)

artf• September 16, 20230 reactions

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• September 16, 20230 reactions

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• September 16, 20230 reactions

@hannydevelop can you please show the code?

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

Presets Plugins Components Blocks Assets Commands I18n Layers Styles Storages RTE Newsletters Web pages Site builders

BUG: Running Headless Mode Returns Different HTML from Editor

Question

GrapesJS version

What browser are you using?

Reproducible demo link

Describe the bug

Code of Conduct

Answers (3)

Related Questions and Answers

BUG: Running in headless mode requires window

BUG: We are trying to store the data from grapesJS editor in Angular 10 application, getting CORS error, image attached below

BUG: Cannot read properties of undefined (reading 'uploadFile')

BUG: Target :null when adding video

Paid Plugins That Match This Issue

Browse Plugin Categories