GrapesJS / mjml

Newsletter Builder with MJML components in GrapesJS
http://grapesjs.com/demo-mjml.html
BSD 3-Clause "New" or "Revised" License
624 stars 222 forks source link

[Fixes #295] Updating Section.draggable attribute to true to Enable Dropping Sections onto a Blank Canvas. #296

Closed Drew-Daniels closed 1 year ago

Drew-Daniels commented 1 year ago

What This PR Fixes:

There is currently a bug detailed in this issue where, when you are using grapesjs with the grapesjs-mjml plugin, and attempt to add a Section component to a blank Canvas, you are not able to, and receive this warning (logged to the browser console):

{
    "errors": [
        "Target collection not found",
        "Component not draggable, acceptable by [[data-gjs-type=mj-body], [data-gjs-type=mj-wrapper]]"
    ],
    "model": {
        "tagName": "mj-section",
        "type": "mj-section"
    },
    "context": "sorter",
    "level": "warning"
}

Video:

Shows me removing all Section components on a canvas, and then attempting to add a new Section component to the blank Canvas - Fails w/ Warning Logged to Console:

screen-capture (25).webm

What Caused This Bug:

The src/components/Section.js component currently has a draggable attribute set to:

draggable: '[data-gjs-type=mj-body], [data-gjs-type=mj-wrapper]',

However, when there are no components on the canvas (by deleting them all or starting with a blank canvas), you cannot drag and place a Section component onto the canvas because the accepted draggable parent components do not exist.

How to Fix This Bug:

If we set draggable to true, we are now able to successfully able to drag and drop Section components onto a blank canvas:

draggable: true,

Video:

Shows me adding a Section component to a Blank Canvas - Now works: screen-capture (24).webm