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

Question

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

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

Question

GrapesJS version

What browser are you using?

Reproducible demo link

Describe the bug

Code of Conduct

Answers (1)

Related Questions and Answers

BUG: Tabs behaviour after HTML import

BUG: When drag and drop block into editor in Chrome, not able to drag and drop block

BUG: Unable to create a link to image

BUG: Error autoplay youtube

Paid Plugins That Match This Issue

Browse Plugin Categories