IonicaBizau / web-term

:tv: A fullscreen terminal in your browser.
MIT License
168 stars 21 forks source link

copy/paste api #33

Closed micimize closed 4 years ago

micimize commented 8 years ago

Could use the new clipboard api to make copy/pasting from shell tools like vim and tmux possible via a command similar to pbcopy or xclip

IonicaBizau commented 8 years ago

@michaeljosephrosenthal That's really good point. If possible Having the pasting working using Shift + Ctrl + V would be great. Ctrl + V does other things in the context of terminal (e.g. vertical select in VIM).

But it would be awesome! :grin:

And yes, I'm using xclip too (for now). :joy:

micimize commented 8 years ago

what I was thinking of is you define a terminal command that sends the input to web-term, which then copies it to the clipboard via the browser, like xclip would. That way any utility can interface with the native clipboard. For example, tmux bind-key -t vi-copy y copy-pipe "web-term-copy" would make tmux copy to the system clipboard through the browser.

I'm creating a docker container that exposes a VM via web-term to make a cross-platform terminal environment available with electron

micimize commented 8 years ago

I got a draft of the above working with a new lien route using curl -X PUT -d "test" localhost:9000/copy, but discovered there are some security restrictions on the clipboard api. Mainly, in chrome, the copy has to be triggered by a user click event of some kind. Here's what i have so far:

screen shot 2016-01-08 at 15 39 41

I think it might be best as a theme - will probably see about integrating web-term directly with electron to avoid requiring the button.

IonicaBizau commented 8 years ago

@michaeljosephrosenthal If web-term works on the same machine where it is displayed in the browser, I'm sure we could use the pty.js module (or some other module on the server) to manipulate the clipboard data.

Any ideas what shortcuts should we use? Maybe Ctrl + Shift + C and Ctrl + Shift + V?

I know that pty.js has a paste functionality which probably allows to paste the things in the right place.

micimize commented 8 years ago

@IonicaBizau The main use case I'm thinking of right now is for a conceptually "remote" connection, as in to a virtual machine running locally or in the cloud. The real difficulty is when something like tmux is involved, which really needs to be able to pipe to a command.

The hotkey issue isn't really a problem for me because Cmd+C/V work fine on osx, but I would think Alt+C/V would be preferable to trying to hit shift every time you copy? Also, a lot of terminals have an "automatically copy on select" option, which I think selection constitutes a user action we could use as a trigger for the clipboard

Also, how are you making that hotkey formatting?

IonicaBizau commented 8 years ago

I see. That means, we should take care of that only on the client. Something like:

$(document).on("keydown", function (e) {
   if (/* paste shortcut */) {
     terminal.send(clipboardPasteData);
   }
});

I would prefer the Ctrl + Shift + V, but this should be configurable in the config. :sparkle:

IonicaBizau commented 8 years ago

I'm creating a docker container that exposes a VM via web-term to make a cross-platform terminal environment available with electron

Awesome. I already had some code written before to combine web-term with Electron. I made a git repository out of it and just open-sourced it: https://github.com/IonicaBizau/magnesium

Maybe we can unify our work together. Having cross-platform support provided by docker containers would be amazing! :sparkles:

micimize commented 8 years ago

Awesome. I already had some code written before to combine web-term with Electron. I made a git repository out of it and just open-sourced it: https://github.com/IonicaBizau/magnesium

Awesome! I'll take a look at this in a second.

The way that I have copy from the server working on my fork right now is with a PUT endpoint in the server:

app.page.add("/copy", 'put', function(lien){
    lien.req.on('data', function(chunk) {
        app.io.emit('copy', chunk.toString());
        lien.end();
    });
});

and then on the client using the complex example from this answer for copyTextToClipboard:

if(document.copyEnabled == true){
    console.log('enabling copy')
    // Listen for copy commands
    $('button.copy').click(function(event) {
        copyTextToClipboard($('.clipboard').text());
    });
    term.socket.on("copy", function(text) {
        $('.clipboard').text(text);
    });
}

Resulting in something like this:

screen shot 2016-01-12 at 13 48 06

I'll open a pull request later for a /clipboard theme.

IonicaBizau commented 4 years ago

I think we will just stick to right click + Paste on Linux/Windows and command + v on Mac.

SterlingButters commented 4 years ago

@IonicaBizau On windows firefox I cannot paste items using right-click + Paste