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 :+1: Please do the change, we wrote that code together at your machine a long time ago :)

[bpasero]

Pushed via https://github.com/Microsoft/vscode/issues/9329

[alexdima]

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

[jrieken]

@f111fei Did the changes resolve your issue?

[f111fei]

@jrieken selectAll is ok now. But Problem1(drag in webview) is still unresolved.

[jrieken]

Thanks for the feedback. Assigning to @bpasero for the dnd part

[bpasero]

@f111fei I tried your suggested change from https://github.com/f111fei/vscode/commit/36a8dcda5548ab61dbd3f15de993b2e2688f27fb and it causes an issue as you can see from the GIF below.

Please feel free to provide another PR with a solution, I am not sure though it is that easy. Your change is preventing all DND operations from happening in the webview and this means you cannot drop a tab or file anymore onto the editor area to open it. Worse, it opens the actual file as source into the webview.

[f111fei]

it opens the actual file as source into the webview.

@bpasero We maybe can add some code in webview.html ?

// Prevent some events
window.addEventListener('dragover', (e) => {
    e.preventDefault();
});

window.addEventListener('drop', (e) => {
    e.preventDefault();
});

[bpasero]

I would appreciate a PR in this area that solves it because this is not really on the radar for August (given other priorities) and I think it is "nice to have" and stretches the ability what you can do with webviews (which I find questionable).

[bpasero]

Also, I find it bad UX if it blocks a user from dropping a tab into the editor area because to a user it might totally not obvious that something inside the webview accepts the drop and we will get many bugs for that.

[f111fei]

yeah, this issue is contradictory. it impossible to meet all requirements simultaneously.

[bpasero]

The Ctrl+A issue is back on the table and if you find a solution via PR that does not break the world, we would be happy to review :)

[Huachao]

@bpasero, can we also have the function to use mouse right click in webview, and I also want native support ctrl+F to find

[bpasero]

@Huachao yes, but please follow our issue guidelines and create separate issues for separate issues.

[Huachao]

@bpasero I already include this request in my original issue, however you closed it...

[bpasero]

@Huachao trying to teach you how to write good issues :)

[Huachao]

@bpasero , sorry for the inconvenience, I thought the title and the description is easy to read, while in fact it's poor. Anyway, is this feature request in your recent schedule?

[bpasero]

@Huachao currently not, but if someone is willing to help, we accept pull requests.

[Huachao]

@bpasero thanks 😃

[Huachao]

@mjbvz any progress about this?

[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