Make it possible to use drag and drop in a webview

[f111fei]

• VSCode Version: 1.3.0-insider
• OS Version: windows7

Steps to Reproduce:

1. Download My extension: https://github.com/f111fei/test-files/raw/master/webview-test-0.0.1.vsix
2. Run command Hello Webview to open my webview.

Problem:

1. Drag Button into TextArea. Dragfeedback overlay will prevent my dragging action.
2. Typing some text in the textarea. Use Ctrl+A to select all, Nothing happen.

Reason

1. see https://github.com/Microsoft/vscode/blob/master/src/vs/workbench/electron-browser/window.ts#L91, the default drag handler is prevented.
2. see https://github.com/Microsoft/vscode/blob/master/src/vs/platform/keybinding/browser/keybindingServiceImpl.ts#L380, selectAll handler is prevented.

[bpasero]

Taking out the preventDefault() from the dragover allows to drop any file/url into the window to open it and replace all of VS Code, so I am not easy to make a change there...

[bpasero]

@jrieken for the second issue.

[jrieken]

Problem is that Cmd+A is not guarded by when and which is done here

[alexdima]

@jrieken @bpasero As I am working on a Windows machine, I can definitely remove that.

IIRC there was something inherently broken on the Mac (cmd+a not working in dev tools or something weird like that) that made @bpasero and I do that change and not have a when for cmd+a.

[alexdima]

Moreover, regardless of our changing the rule for cmd+a, I think the problem on the mac is that:

• cmd+a appears in the menu
• the menu natively captures the keydown
• the menu sends to the wrong renderer process the command invocation

But maybe things have changed since we last looked at this.

[bpasero]

My workaround to make it happen in dev tools is in https://github.com/Microsoft/vscode/blob/fix-8324-8569/src/vs/code/electron-main/menus.ts#L790

[alexdima]

@bpasero @jrieken I have pushed the fix you suggested, but I don't have a mac to try it out. Please try to do Ctrl+A in a native input such as the find widget or the git commit input box and check if it still works. If it does not work, then please revert 151d236

[bpasero]

@alexandrudima I can confirm that Cmd+A selects all in input fields and still in the editor. It does not select all in the though.

There is another bug where Undo/Redo do no work in native input fields and I guess that is related. Can we apply your fix for these commands too?

[jrieken]

@alexandrudima I see an issue when selecting an item in the explorer and pressing Cmd+A it selects all of the editor tho it doesn't have focus. Is that the intent?

[alexdima]

@jrieken That is what I'm trying to explain here unsuccessfully. It is not the keybindings service that executes editor.action.selectAll, but on the mac cmd+a is captured by the menu (because it appears as an accelerator in the menus) and then the menu sends a vscode:runAction ipc message to the focused renderer process and executes editor.action.selectAll.

[alexdima]

In fact, that is the case with all accelerators that appear in the menu on the mac. This is not the case under windows.

[alexdima]

The select all code falls back as a last chance to select last active editor:

https://github.com/Microsoft/vscode/blob/master/src/vs/editor/common/config/config.ts#L397

[alexdima]

It also does the manual select all on input fields:

    // Ignore this action when user is focussed on an element that allows for entering text
    let activeElement = <HTMLElement>document.activeElement;
    if (activeElement && ['input', 'textarea'].indexOf(activeElement.tagName.toLowerCase()) >= 0) {
        (<any>activeElement).select();
        return;
    }

[bpasero]

The select all behaviour in the explorer has been like that before already because we do not have multi select in the explorer. The fact that focus does not move has been reported already as far as I remember and is not very nice.

[jrieken]

yeah - we should either focus the editor after selecting all or ignore the command if the editor isn't focused

[bpasero]

I would just focus the editor, many people actually find it useful that Ctrl+A always goes to the editor, so I would not disable that.

[bpasero]

I like it.

@alexandrudima what do you think? seems as easy as adding editor.focus() before https://github.com/Microsoft/vscode/blob/master/src/vs/editor/common/config/config.ts#L401

[alexdima]

@bpasero 👍 Please do the change, we wrote that code together at your machine a long time ago :)

[bpasero]

Pushed via #9329

[alexdima]

@jrieken It is not clear to me if my change fixed this issue.

[mjbvz]

Reopening this to track just the drag and drop part. Select all was added by #54851

[donaldoakes]

It would be fantastic to enable drag and drop into webviews. This screenshot shows how my extension's toolbox palette is able to render in the sidebar thanks to #46585. However, that doesn't do much good unless the user can drag items from the palette onto the canvas webview displayed in the editor.

Is this enhancement so foundational a change that it's unlikely to be considered?

[magrawa]

I have a similar problem as Donald is having above. This looks like a fundamental problem with this framework. Are there any design patterns or workaround to drag and drop functionality in webview? What was the rationale to not support this kind of feature?

[mjbvz]

The original example seems to work for me in iframe based webviews (which are now the default in the latest VS Code insiders)

The original linked extension no longer works since previewHTML was removed so I pasted this in the webview sample extension instead:

<style type="text/css">
    #div1 {
        width: 488px;
        height: 70px;
        padding: 10px;
        border: 1px solid #aaaaaa;
    }
</style>

<script type="text/javascript">
    function dragover(ev) {
        ev.preventDefault();
    }

    function dragstart(ev) {
        ev.dataTransfer.setData("Text", ev.target.id);
    }

    function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("Text");
        ev.target.value = 'The element\'s id is \"' + data + '\"';
    }
</script>

<p>Please Drag Button into here：</p>

<textarea id="div1" ondrop="drop(event)" ondragover="dragover(event)"></textarea>
<br />
<button id="button" draggable="true" ondragstart="dragstart(event)">
    Button
</button>

If you are still seeing issues with drag/drop in webviews, please open a new issue with an example extension so we can investigate