BUG: Block drag and drop interaction fails within vscode extension webview #4253

protozoo · 2022-04-07T19:54:08Z

protozoo
Apr 7, 2022

GrapesJS version

I confirm to use the latest version of GrapesJS

What browser are you using?

VSCode (WebView within VSCode extension)

Reproducible demo link

https://grapesjs.com/demo.html

Describe the bug

How to reproduce the bug?

Create a new vscode extension (or use one that you already have)
Create a Webview that contains an HTML document with an iframe loading the GrapesJS demo (see example code below)
Run the extension and webview to load the GrapesJS demo
Try to drag a Grapes Block in the canvas

What is the expected behavior?
The dragged block should be added to the canvas

What is the current behavior?
The dragged component is NOT added to the canvas.
You can watch a video showing the problem here: https://www.protozoo.com/tests/grapesjs/vscode_extension_grapes.mov. As demonstrated in the video, other dragging interactions work as expected. The issue can be seen near the end.

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

// Here's a simplified code example on how to create a webview within a vscode example, and load grapesjs demo inside.
// You can download a ready-to-build-and-run project here: 
// http://www.protozoo.com/tests/grapesjs/visualEditor_vscode_extension.zip

const vscode = require('vscode');

/**
 * @param {vscode.ExtensionContext} context
 */
function activate(context) {
	console.log('Congratulations, your extension "visualEditor" is now active!');
	let disposable = vscode.commands.registerCommand('visualeditor.openVisualEditor', function () {
		const panel = vscode.window.createWebviewPanel(
			'visualEditor',
			'Visual Editor',
			vscode.ViewColumn.One,
			{	enableScripts: true	}
		  );
	
		  
		  panel.webview.html = `<!DOCTYPE html>
		  <html lang="en">
		  <head>
			  <meta charset="UTF-8">
			  <meta name="viewport" content="width=device-width, initial-scale=1.0">
			  <title>Visual Editor</title>
		  </head>
		  <body style="padding: 0 0px;">
			  <iframe src="https://grapesjs.com/demo.html" style="position: fixed; width: 100%; height: 100%;">
			</iframe>
		  </body>
		  </html>`
	});

	context.subscriptions.push(disposable);
}

function deactivate() {}

module.exports = {
	activate,
	deactivate
}

Code of Conduct

I agree to follow this project's Code of Conduct

artf · 2022-04-12T14:01:29Z

artf
Apr 12, 2022
Maintainer

Hi @protozoo I'm not sure exactly why but looks like the vscode iframe (probably sandboxed) is blocking the native HTML5 Drag & Drop (this is what is used on Blocks).
As this is not strictly related to the core I'll move this one to the discussion.

8 replies

protozoo Oct 5, 2022
Author

Hi @artf . I never got a useful response to my issue at vscode's repo but the workaround I mentioned above (disabling the "draggable" attribute) proved good enough until now.

However I am now needing to customize the block manager quite a lot (not only look and feel, but also behavior), so I created my own block manager component in Vue, following the instructions at Grapesjs docs.

So far so good, the blocks are listed properly and work as expected... in the browser. But, once again, inside vscode (as a webview) drag and dropping blocks to the canvas will not work. I tried adding the attribute draggable=false but it didn't work this time. I've been trying to debug it and looks like the drag events that the default block manager assigns to the block elements are not being assigned to the block elements of the custom block manager.

I see this by opening the devtools, selecting one of the block elements, and checking the Event Listeners tab.
The block elements of the default manager list many of them, including drag, dragend, dragenter, dragstart....

If I switch to the custom manager, most of these are missing.

Any idea how I could fix this?

Thanks a lot

artf Oct 20, 2022
Maintainer

If you've only implemented the native HTML5 D&D in your custom block manager, removing the draggable won't dispatch any event (the default block manager has a fallback). You should probably implement your own D&D implementation (eg. using pointer events) so it can also work in the vscode iframe.

protozoo Dec 9, 2022
Author

Thanks for the response @artf. Please could you point to where/how you do that in the default block manager so I can try to do the same or similar? I've been trying to find it without success. Thanks

artf Dec 13, 2022
Maintainer

You can find it here: https://github.com/artf/grapesjs/blob/9a3a5f06d315430f108f74773e87d357183603e1/src/block_manager/view/BlockView.ts#L23-L24

protozoo Dec 13, 2022
Author

Checking it out, many thanks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

BUG: Block drag and drop interaction fails within vscode extension webview #4253

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 8 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

BUG: Block drag and drop interaction fails within vscode extension webview #4253

Uh oh!

protozoo Apr 7, 2022

GrapesJS version

What browser are you using?

Reproducible demo link

Describe the bug

Code of Conduct

Replies: 1 comment · 8 replies

Uh oh!

artf Apr 12, 2022 Maintainer

Uh oh!

protozoo Oct 5, 2022 Author

Uh oh!

artf Oct 20, 2022 Maintainer

Uh oh!

protozoo Dec 9, 2022 Author

Uh oh!

artf Dec 13, 2022 Maintainer

Uh oh!

protozoo Dec 13, 2022 Author

protozoo
Apr 7, 2022

Replies: 1 comment 8 replies

artf
Apr 12, 2022
Maintainer

protozoo Oct 5, 2022
Author

artf Oct 20, 2022
Maintainer

protozoo Dec 9, 2022
Author

artf Dec 13, 2022
Maintainer

protozoo Dec 13, 2022
Author