Browser Copy/Paste support documentation

[glennflanagan]

I'm using xterm.js in the browser and it seems copy/and paste functionality varies depending on the users browser and/or platform.

I can copy and paste using the standard Cmd + C and Cmd + V in Google Chrome and Firefox on Mac, but my Linux users are saying that Ctrl + C and Ctrl + V don't work for them in Google Chrome, but Ctrl + Shift + V does (But not Ctrl + Shift + C).

It would be good to get some documentation around what are the default keybindings and whether they are supported in all browsers – or some form of matrix to show which commands and browsers are supported so the information can be forwarded to users?

[Tyriar]

Basically xterm.js doesn't do anything special with copy and paste, it leaves it up to embedders. ctrl+c and ctrl+v don't work because they're needed for terminal operation. You can hook up a custom key event handler to prevent the terminal from processing them and instead copying and pasting though:

xterm.js/typings/xterm.d.ts

Line 517 in bd57e30

attachCustomKeyEventHandler(customKeyEventHandler: (event: KeyboardEvent) => boolean): void;

Not sure why ctrl+shift+v works for you. You'll want to have your own keybinding system handle ctrl+shift+c/v and fire browser copy/paste events that xterm.js can handle, you might run into permissions problems/dialogs when doing this though.

[wallrj]

I found that this has also been discussed in #292 where someone suggested:

• copy: ctrl+insert
• paste: shift+insert

and it turns out that works for me with Linux and Firefox 70.

I also found those shortcuts documented here: https://en.wikipedia.org/wiki/Cut,_copy,_and_paste#Common_keyboard_shortcuts

[aufabdulnafea]

I am using onkey instead of onDate, and it is working for me

I can not copy the keycode here, but you can find it using this code

term.onKey(({ key }) => {
      console.log(key)
})

term.onKey(({ key }) => {
  // put the keycode you copied from the console
  if (term.hasSelection() && key === "�") {
    document.execCommand('copy')
  } else {
    // you can do whatever you want here
    ipcRenderer.send('terminal-data', key)
  }
})

for the right-click, I am using this code

terminal_div.addEventListener('contextmenu', () => {
  if (term.hasSelection()) {
    document.execCommand('copy')
    term.select(0, 0, 0)
  } else {
    ipcRenderer.send('terminal-data', clipboard.readText())
  }
})

[Tyriar]

@aufabdulnafea attachCustomKeyEventHandler is the preferred way to intercept keystrokes as on your copy/paste keystrokes you want to cancel the event from proceeding in xterm.js.

[wangzongming]

//  ctrl + c for copy when selecting data, default otherwise
term.attachCustomKeyEventHandler((arg) => { 
    if (arg.ctrlKey && arg.code === "KeyC" && arg.type === "keydown") {
	    const selection = term.getSelection();
	    if (selection) {
		    copyText(selection);
		    return false;
	    }
    }
    return true;
}); 

[afi-dev]

Hey everyone, I stumbled upon your issue so I thought I'd put up a working example of CTRL + V

    term.attachCustomKeyEventHandler((arg) => {
        if (arg.ctrlKey && arg.code === "KeyV" && arg.type === "keydown") {
            navigator.clipboard.readText()
              .then(text => {
                term.write(text);
              })
        };
        return true;
    });

by the way if someone has a way to detect the right click and copy it it would be very useful for me because I tried various tricks but it's complicated, I just find it a thinks and incomprehensible that the proposal to add the support of the mouse #2336 was refused, but it is a necessity for me.

[hello-smile6]

Hey everyone, I stumbled upon your issue so I thought I'd put up a working example of CTRL + V

    term.attachCustomKeyEventHandler((arg) => {
        if (arg.ctrlKey && arg.code === "KeyV" && arg.type === "keydown") {
            navigator.clipboard.readText()
              .then(text => {
                term.write(text);
              })
        };
        return true;
    });

by the way if someone has a way to detect the right click and copy it it would be very useful for me because I tried various tricks but it's complicated, I just find it a thinks and incomprehensible that the proposal to add the support of the mouse #2336 was refused, but it is a necessity for me.

hterm supports copy/paste via right-click perfectly, and it also has mouse support (and programmatically copying data)

[Tyriar]

@afi-dev mouse events are supported, we just don't expose a puppeteer-like synthetic mouse event API.

[nmz787-intel]

thanks @wangzongming. I had to dig for this... xterm.js devs/maintainers, it would great to pull this into the docs/examples... somewhere better indexed by google