tty.js icon indicating copy to clipboard operation
tty.js copied to clipboard

support pasting text

Open bkreider opened this issue 12 years ago • 2 comments

I can copy text just fine in my browser, but pasting doesn't seem to work. Is there some other way to paste into tty.js? (ie: right-click brings up a context menu for a div on a webpage not as if it is on an editable field).

bkreider avatar Jan 30 '14 22:01 bkreider

The problem I had was capturing a copy and paste. You can't, to my knowledge, alter the system action for copy and paste so the best thing you can do is listen for it and modify.

When the user copies text the javascript with capture that text highlighted and put it into the copy box so when the command gets passed to the system it copies the text within the box. Paste works in reverse; when the user pastes text, javascript makes the paste box active so the type goes into the paste box before getting send out to the server with the socket emit function. All boxes get wiped clean of course. I have tested this code and it works well. Users don't know the difference.

Heres the code:

HTML

<div id="pasteFields">
    <textarea id="pasteBoard"></textarea>
    <textarea id="copyBoard"></textarea>
</div>

Javascript

var jQ_id_copyBoard_obj = jQ('#copyBoard');
var jQ_id_pasteBoard_obj = jQ('#pasteBoard');


function copyToClipboard() {
    // Get Selection from page
    var text = '';
    if(window.getSelection){
        text = window.getSelection();
    }else if(document.getSelection){
        text = document.getSelection();
    }else if(document.selection){
        text = document.selection.createRange().text;
    }
    var selectedText = text.toString();

    console.log("Copy");
    console.log(selectedText);

    if (selectedText != '') {
        jQ_id_copyBoard_obj.val(selectedText);
        jQ_id_copyBoard_obj.select();
    }
}

function pasteToClipboard() {
    if (jQ_id_pasteBoard_obj.val() != '') {

        console.log("Paste");
        console.log(jQ_id_pasteBoard_obj.val());

        performPaste(jQ_id_pasteBoard_obj.val());
        jQ_id_pasteBoard_obj.val('');
        jQ_id_pasteBoard_obj.blur();
    }
}

function performPaste(input) {
    //alert(input);
    WebCRT.modules.tty.socket.emit('terminal', { id: WebCRT.terminals[1], string: input} );
}

jQ(document).bind('keydown',function(key) {
    //console.log(window.event);

    var evtobj=window.event? event : key;
    var keyPressed = evtobj.keyCode;

    var source = evtobj.target.nodeName.toLowerCase();
    var sourceID = evtobj.target.id;
    // If keypress is in an input or something other then body then dont send
    if (source !== 'body') { return; }

    console.log('Down Key: ' + evtobj.keyCode + ', Control: ' + evtobj.ctrlKey + ', Shift: ' + evtobj.shiftKey + ', Alt: ' + evtobj.altKey + ', Meta: ' + evtobj.metaKey);

    // System Copy Paste
    if (WebCRT._super_.navigator.platform.toLowerCase().search('mac') >= 0) {
        // Mac
        if ( (evtobj.metaKey && evtobj.keyCode == 67) && (!evtobj.altKey && !evtobj.shiftKey) ) {
          copyToClipboard()
          window.setTimeout(function () {jQ_id_copyBoard_obj.val(''); jQ_id_copyBoard_obj.blur()}, 100);
          return true;
        }
        if ( (evtobj.metaKey && evtobj.keyCode == 86) && (!evtobj.altKey && !evtobj.shiftKey) ) {
          jQ_id_pasteBoard_obj.focus();
          window.setTimeout(function () {pasteToClipboard()}, 100);
          return true;
        }
    } else if (WebCRT._super_.navigator.platform.toLowerCase().search('win') >= 0) {
        // Windows
        if ( (evtobj.ctrlKey && evtobj.keyCode == 67) && (!evtobj.altKey && !evtobj.shiftKey) ) {
          copyToClipboard()
          window.setTimeout(function () {jQ_id_copyBoard_obj.val(''); jQ_id_copyBoard_obj.blur()}, 100);
          return true;
        }
        if ( (evtobj.ctrlKey && evtobj.keyCode == 86) && (!evtobj.altKey && !evtobj.shiftKey) ) {
          jQ_id_pasteBoard_obj.focus();
          window.setTimeout(function () {pasteToClipboard()}, 100);
          return true;
        }
        // Alt +
        if ( (evtobj.altKey && evtobj.keyCode == 67) && (!evtobj.ctrlKey && !evtobj.shiftKey) ) {
            console.log('here');
            evtobj.altKey = false;
            evtobj.ctrlKey = true;
            WebCRT.modules.tty.socket.emit('terminal', { id: WebCRT.terminals[1], string: '\u0003' } );
        }
    }


    WebCRT.functions.sendActivity();
    return Terminal.focus.keyDown(evtobj);
});

joelcarlton avatar Jan 31 '14 00:01 joelcarlton

Still an issue, but thanks to https://gist.github.com/risacher/7837761 I managed to workaround this.

anthony-o avatar Jun 06 '16 12:06 anthony-o