Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Webview: Copy to clipboard within internal IFRAME does not work on macOS #135017

Closed
ivankravets opened this issue Oct 13, 2021 · 4 comments
Closed

Webview: Copy to clipboard within internal IFRAME does not work on macOS #135017

ivankravets opened this issue Oct 13, 2021 · 4 comments
Assignees
@mjbvz
Labels
*dev-question VS Code Extension Development Question webview Webview issues

Comments

@ivankravets
Copy link

ivankravets commented Oct 13, 2021 •
edited

Does this issue occur when all extensions are disabled?: Yes

  • VS Code Version: 1.61.1
  • OS Version: macOS 11.6

Steps to Reproduce:

  1. Add the next code to WebView:
<!DOCTYPE html>
<html lang="en">
<head>
  <script>
    window.addEventListener('message', (e) => {
      switch (e.data.command) {
        case 'kbd-event': {
          console.log("Outside IFRAME", e);
          window.dispatchEvent(new KeyboardEvent('keydown', e.data.data));
          break;
        }
      }
    }, false);
  </script>
</head>
<body style="margin: 0; padding: 0; height: 100%; overflow: hidden;">
  <iframe src="https://dl.platformio.org/vscode-issue-135017-iframe.html"
    width="100%"
    height="100%"
    frameborder="0"
    style="border: 0; left: 0; right: 0; bottom: 0; top: 0; position:absolute;" />
</body>
</html>
  1. Try to copy the text "Try to copy me!". Keyboard events are logged in the console.

Related issues:
@mjbvz mjbvz self-assigned this Oct 13, 2021
@mjbvz
Copy link
Contributor

mjbvz commented Oct 13, 2021

I can't reproduce this using the webview sample on VS Code Insiders

Please share a minimal example extension that demonsates this issue

@mjbvz mjbvz added info-needed Issue requires more information from poster webview Webview issues labels Oct 13, 2021
@ivankravets ivankravets changed the title Webview: Adding "keydown" event listener does not work on macOS Webview: Copy to clipboard within internal IFRAME does not work on macOS Oct 15, 2021
@ivankravets
Copy link
Author

@mjbvz I updated the topic and steps to reproduce the issue. This time I see events in the console but copy to the clipboard still does not work.

I have a few questions:

  1. How does Copy/Paste work WITHOUT iframe? I tried to debug HTML DOM and see that VSCode uses a few nested IFRAME. Why the 3rd IFRAME needs this "hook" with rebroadcasting of "keydown" events?
  2. Could it be linked with any security settings for IFRAME that is located via HTTP?

@mjbvz
Copy link
Contributor

mjbvz commented Oct 26, 2021 •
edited

Thanks for the example

Looks like cmd+c triggers copy properly but the inner iframe never gets it. Relevant code for keyboard dispatch:

vscode/src/vs/workbench/contrib/webview/browser/webviewElement.ts

Line 631 in 6e5b172

this.execCommand('copy');

To fix this, listen for copy in the outer webview content and then trigger a real copy inside the iframe.

// In webview
document.addEventListener('copy', (e) => {
    // Trigger copy in the iframe
})

VS Code already does this when dispatching copy from the editor into the base webview:

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

Line 975 in ec6ee19

hostMessaging.onMessage('execCommand', (_event, data) => {

@mjbvz mjbvz closed this as completed Oct 26, 2021
@mjbvz mjbvz added *dev-question VS Code Extension Development Question and removed info-needed Issue requires more information from poster labels Oct 26, 2021
@ivankravets
Copy link
Author

Thanks, @mjbvz ! It finally works! Resolved via platformio/platformio-vscode-ide@a1acff8

@github-actions github-actions bot locked and limited conversation to collaborators Dec 10, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@mjbvz mjbvz

Labels
*dev-question VS Code Extension Development Question webview Webview issues
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@ivankravets @mjbvz