macOS: some commands no longer work inside iframe inside webview

[bpasero]

With 8a58c3e some commands no longer work when inside a webview, for example:

• Copy
• Paste
• Cut
• Undo
• Redo

[njzydark]

I ran into this problem and thought it was the reason for the plugin at first.
It’s too annoying to perform the undo operation.

[bpasero]

While this seems to work fine for e.g. markdown preview it does not seem to work for an extension that allows to live preview. Steps:

• install negokaz.live-server-preview
• preview a simple HTML file that has <input> as content
• try to Select All, Cut, Copy, Paste etc
• 🐛 does not seem to work anymore (works fine in stable)

[mjbvz]

Since we've unblocked the github pr extension and most other users of the webview api, I'm not going to try fixing this for iframe extensions in iteration

[mrmeku]

You can try out nrlw.angular-console to reproduce the bug too. It might be helpful for whomever looks into this bug in the future

[ivankravets]

Do we have any workarounds?

Similar issue with PlatformIO IDE => platformio/platformio-vscode-ide#606

[askhogan]

@mjbvz Copy Paste for me (VS Code Insiders - latest version) doesn't work on any of the extension pages within the app. Example trying to copy configuration settings inside of a page that is describing the extension. The keybindings never even register.

[arduinotech]

Fix it please!

[ivankravets]

@mjbvz could you explain what should be done from the extension side to make it work? I've just downloaded the latest insiders build and it does not work for me:

Version: 1.43.0-insider
Commit: beaf391bc53136912e4f0bbdfb7844ad954247db
Date: 2020-02-07T05:30:08.850Z
Electron: 7.1.11
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Darwin x64 19.3.0

I opened PIO Home, selected some library example and pressed Cmd+C and a buffer is empty. What is more, the right-click context menu is empty too.

These source code of how do we initialize WebView => https://github.com/platformio/platformio-vscode-ide/blob/develop/src/home.js#L47

Thanks!

[vladimiry]

Keyboard shortcuts for copy, paste, cut, undo, redo work for me in a textarea inside a webview

@mjbvz can you point me to the code change / commit that fixed the issue?

[ivankravets]

@mjbvz could you reopen this issue?

[mjbvz]

Is it not working?

[ivankravets]

Yes, it does not work. Re-tested again with

Version: 1.43.0-insider
Commit: 1fbacccbc900bb59ba8a8f26a4128d48a1c97842
Date: 2020-02-13T05:38:41.855Z
Electron: 7.1.11
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Darwin x64 19.3.0

[mjbvz]

Please provide repo steps and an example extension that demonstrates this issue

[ivankravets]

Could you install https://marketplace.visualstudio.com/items?itemName=platformio.platformio-ide ? It will open PIO Home, then try to copy something from it.

[mjbvz]

Confirmed that platformIO still doesn't work

@ivankravets Your extension uses an iframe inside a webview to display all of its content. This is why the commands still don't work for PlatformIO but work fine in other webview based extensions. Since this scenario is important to you but not terribly common (or recommended) for webview extensions more broadly, please look into contributing a PR

I've update the issue title to make it more clear what is still blocked.

[ivankravets]

Thanks that checked it. So, is this issue on our side? Do you have any hints on how to resolve this issue?

[mjbvz]

@ivankravets The more I think the problem, the more it seems like something that individual extensions need to workaround.

To explain, here's how events such as copy are handled in webviews:

• When a webview is focused, all keyboard events go to this webview. This means that the main VS Code window does not see these keypresses, so actions such as copy or open command palette would normally not work when the user is focused on a webview

• To workaround this, we capture keyboard events inside the webview and rebroadcast them to the main VS Code process:

  vscode/src/vs/workbench/contrib/webview/browser/pre/main.js

  Line 256 in 8a2cae9

  const handleInnerKeydown = (e) => {

• Then the main renderer process can handle these commands if needed

However, once you add an iframe inside of a webview, we run into the same problem all over again:

• If the user is focused on the iframe in the webview, now all keypresses go to the iframe. The webview containing the iframe does not get any keyboard events

• Which means we never can rebroadcast the keypresses back to the main VS Code renderer

To make matters worse, since the iframes used by most extension (including PlatformIO) are served up in a different origin from the webview itself, there is no way that I'm aware of for VS Code webview's to automatically add keypress listeners into these iframe. This is a dom security limitation and I'm not sure if there is any reasonable workaround.

---

Given that I tried and failed to fix keyboard events for PlatformIO with changes in VS Code itself, I think you should try adding a workaround in your extension itself.

Specifically, try adding code into your iframe that rebroadcasts keyboard events up to the webview so it can send then back to VS Code:

document.addEventListener('keydown', e => {
     window.parent.dispatchEvent(new KeyboardEvent('keydown', e));
})

I tested this and it works in a simple extension

[arduinotech]

But for some reason, menu items work (edit -> paste). And since they work, it’s probably possible to somehow use the hotkey.
Or not and I don’t understand something?

[mjbvz]

@arduinotech I don't see undo and redo working, even using the menus. And remember that we also want keyboard shortcuts for VS Code specific action to work when you are in a webview, such as opening the command palette. These work fine for normal webviews, but not when you are focused on an iframe inside a webview

If someone has any ideas of how to workaround this, please let me know (ideally the workaround should also work in browsers but that may be a stretch)

[tamuratak]

I have tried rebroadcasting keyboard events on the pdf viewer of LaTeX Workshop. It works well.

Because the source of the iframe is http://localhost/... in LaTeX Workshop,
window.parent.dispatchEvent causes an error due to the same-origin policy. We have to use postMessage instead of dispatchEvent. The following are the snippets.

In the frame, we call:

document.addEventListener('keydown', e => {
    const obj = {
        altKey: e.altKey,
        code: e.code,
        ctrlKey: e.ctrlKey,
        isComposing: e.isComposing,
        key: e.key,
        location: e.location,
        metaKey: e.metaKey,
        repeat: e.repeat,
        shiftKey: e.shiftKey
    }
    window.parent.postMessage( JSON.stringify(obj), '*')
})

In the parent webview, we call:

window.addEventListener("message", (e) => {
    window.dispatchEvent(new KeyboardEvent('keydown', JSON.parse(e.data)));
}, false);

[ivankravets]

@mjbvz is it possible to pass HTTP link to WebView via src instead of using IFRAME?

• https://developer.chrome.com/apps/tags/webview

Will this resolve the issue without any hooks?

[mjbvz]

@ivankravets Not currently. One reason is that we need to control aspects of the webview's content, such as setting the vscode css variables and the post message scripts

The ideal fix would be not to use an iframe inside the webview at all. Then other webview features, such as link handling, should also work as expected

[mjbvz]

I'm closing this issue because, as I explained, I don't think we can workaround it on the VS Code side.

Using iframes in webviews is not ideal, but if your extension absolutely need to use them, make sure to rebroadcast the events as described above