GrapesJS / grapesjs

Free and Open source Web Builder Framework. Next generation tool for building templates without coding
https://grapesjs.com
BSD 3-Clause "New" or "Revised" License
22.37k stars 4.05k forks source link

BUG: Cannot Drop MJML Components onto Blank Canvas after version 0.19.4 #4612

Closed Drew-Daniels closed 2 years ago

Drew-Daniels commented 2 years ago

GrapesJS version

What browser are you using?

105.0.5195.125 (Official Build) (x86_64)

Reproducible demo link

https://codesandbox.io/s/grapesjs-grapesjs-mjml-react-bug-w7qtec?file=/src/index.js

Describe the bug

How to reproduce the bug?

  1. Start with a blank canvas
  2. Try dragging a grapesjs-mjml block editor component onto the blank canvas.
  3. See that you cannot, and receive this warning logged to console: image

Video:

There's a delay in the logged warning because CodeSandbox is being slow: screen-capture (3).webm

Code:

I've reproduced the code in this repository as it's easier to test with than in CodeSandbox IMO: https://github.com/Drew-Daniels/grapesjs-react-bug

What is the expected behavior? I would expect to be able to drop components from the grapesjs-mjml block editor onto a blank canvas.

What is the current behavior? I am not able to drop components from the grapesjs-mjml block editor onto a blank canvas. This only occurs after upgrading grapesjs from 0.18.4 to 0.19.4 or above.

If is necessary to execute some code in order to reproduce the bug, paste it here below:

Notes: I created a bug ticket in the grapesjs-mjml repository for this as I originally thought it might have been due to a bug in that plugin. However, after doing some more research I noticed that this problem started occurring after this commit in grapesjs.

Code of Conduct

artf commented 2 years ago

Thanks for the report Drew, this seems to be related to the Standards mode of the iframes. At the moment to fix it, I'd suggest switching to the Quirks mode by removing the doctype:

grapesjs.init({
  // ...
  canvas: {
    frameContent: '', // default is '<!DOCTYPE html>'
  },
})

I'm closing the issue as it's not really related to the core, soon I'll update the mjml plugin in order to support properly the Standards mode.