Weird issue with internal drag&drop - Dropped contents === "null"

Hi @artf ,

I'm facing a very strange issue related to HTML5 drag & drop.

When I select some mixed contents within grapesjs, including editable text contents and the surrounding components as a whole selection with the mouse, the dropped (copied) contents is sometimes "null" (a string carrying the "null" text value, not a JavaScript null).

I've managed to reproduce the issue with the Newsletter demo, with Chrome 71.0.3578.98. I don't know whether it happens with other browsers, or not...

When the issue arises, I've noticed that, when catching the canvas:dragdata event, the result.content variable is "null" (string). I looked into the call stack and found that this value comes from the dataTransfer.getData("text/html") call in grapesjs' core Droppable.getContentByData() function:

} else if ((0, _underscore.indexOf)(types, 'text/html') >= 0) { content = dataTransfer.getData('text/html').replace(/<\/?meta[^>]*>/g, '');

I don't know why, and in which circumstances the browser sends "null" while fetching data in text/html format. All other formats seem to carry a correct value. You'll note that I use the CKEditor plugin, hence I have some additional "formats" related to CKEditor in dataTransfer:

Could you check whether you can reproduce this on your own side, and if you can do anything to handle this case within grapesjs? (assuming that it may be a browser-related bug).

In the meantime, I handled this on my own side by picking the value from dataTransfer.getData("text/plain") when possible, and returning empty stuff otherwise:

myGrapesJsObject.on('canvas:dragdata', function (dataTransfer, result) {
            if (result && result.content) {
                if (typeof (result.content) == "string" && result.content === "null" && dataTransfer.getData("text/html") === result.content) {
                    result.content = "";
                    if (dataTransfer.types && dataTransfer.types.length > 0) {
                        for (var i = 0; i < dataTransfer.types.length; i++) {
                            if (dataTransfer.types[i] == "text/plain") {
                                var altValue = dataTransfer.getData(dataTransfer.types[i]);
                                if (altValue && altValue != "") {
                                    result.content = altValue;
                                    break;
                                }
                            }
                        }
                    }
                }
            }
        }

As a side note, I sometimes found that the dataTransfer object carries some "old" dropped contents from previous drags, and not the latest stuff. But I've been unable to find when and why so far, so I'll not bother you with this for now (unless it's a known issue, and if you need additional information on this particular issue.)

Thanks for your thoughts!