Paste doesn't work #364

goflatworld · 2016-11-20T05:08:44Z

The issue I opened in below link, it is not fixed yet. The issue is that when I right click the and choose "paste", it doesn't paste anything.

#344

parisk · 2016-11-22T15:26:54Z

Thanks for opening this @goflatworld. I think I have spotted the bug and will get on top of this within the week hopefully.

goflatworld · 2016-11-28T21:49:04Z

Thanks Parisk. Great to know that you have spotted the bug. Waiting for your solution.

parisk · 2016-12-05T15:33:56Z

@goflatworld can you let us know if any of xterm.js' element parents use the transform CSS property?

Seems like this is causing an issue and misplaces the hidden textarea, so the right-click won't work.

fixed
Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled. When printing, position it at that fixed position on every page. This value always create a new stacking context. When an ancestor has the transform property set to something different than none then this ancestor is used as container instead of the viewport (see CSS Transforms Spec).

From: https://developer.mozilla.org/en/docs/Web/CSS/position#Values

Also, I am removing this from the milestone, as it will need more work than initially thought, in order to calculate appropriately the position of the hidden textarea on the user's right click.

goflatworld · 2016-12-05T21:26:39Z

Hi Parisk,

Below is all the HTML code I have (it is a PHP file). You can see that the CSS are from xterm.js. I suppose that they don't use transform? I also tried to search transform in these CSS. but did not see it.

<!doctype html>
<html>
    <head>
        <title>Stingray Solution</title>
        <link rel="stylesheet" href="xterminal.js/build/xterm.css" />
        <link rel="stylesheet" href="xterminal.js/addons/fullscreen/fullscreen.css" />
        <link rel="stylesheet" href="style.css" />
        <script>
		var hash= "<?php echo $_REQUEST['id']; ?>\n";
	</script>	
		
	<script src="xterminal.js/dist/xterm.js" ></script>
        <script src="xterminal.js/addons/attach/attach.js" ></script>
        <script src="xterminal.js/addons/fit/fit.js" ></script>
        <script src="xterminal.js/addons/fullscreen/fullscreen.js" ></script>
    </head>
    <body>
        <div id="terminal-container"></div>
        <script src="main.js" defer ></script>
    </body>
</html>

The main.js is the code from xterm.js example, I modified it a bit. and it is as follow:

var term,
    protocol,
    socketURL,
    socket,
    pid,
    charWidth,
    charHeight;

var terminalContainer = document.getElementById('terminal-container');

createTerminal();

function createTerminal() {

  while (terminalContainer.children.length) {
    terminalContainer.removeChild(terminalContainer.children[0]);
  }

  term = new Terminal({
    cursorBlink: true 
  });
  protocol = 'wss://';
  socketURL = 'wss://www.flatworld.com:443';

  term.open(terminalContainer);
  term.fit();
  
  var initialGeometry = term.proposeGeometry(),
	cols = 80,
	rows = 30;

    charWidth = Math.ceil(term.element.offsetWidth / cols);
    charHeight = Math.ceil(term.element.offsetHeight / rows);

      if (window.WebSocket === undefined)
      {
        state.innerHTML = "sockets not supported";
        state.className = "fail";
      }
      socket = new WebSocket(socketURL);
      socket.onopen = runRealTerminal;
      socket.onclose = onClose;
      socket.onerror = onError;
}


function runRealTerminal() {
  term.attach(socket);
  term._initialized = true;
  socket.send("C");

  term.on('key', function (key, ev) {
    var printable = (
      !ev.altKey && !ev.altGraphKey && !ev.ctrlKey && !ev.metaKey
    );
 
    var message ="A" + key;

    socket.send(message);

  });

  term.on('paste', function (data, ev) {
    socket.send(data);
  });
}


function onClose()
{
  term.write("\rDisconnected from server.");       
}
  

function onError()
{ 
  term.write("\rFail: ");
  term.write("Communication error");
}

For the attach.js, I modifed a bit, the modified part is as below:

 term._getMessage = function (ev) {
      if (buffered) {
        term._pushToBuffer(ev.data);
      } else if (ev.data==="Auth-Required")
      {
	socket.send(hash);      } else if (ev.data===" Auth OK!")
      {
 	term.write("Press Enter to Start.");
      } else
      {
        term.write(ev.data);
      }
    };

Would these modification cause any issue?

parisk · 2016-12-08T20:16:00Z

@goflatworld these modifications do not seem like causing issues.

OK, I put this in the 2.3.0 milestone, in order to find an appropriate solution for this issue.

What would help though are the following details:

The system that you tried this the most times and it didn't work (OS and Browser along with versions)
A production running application where I can get access to try this out as, I can't get it working in the demo

goflatworld · 2016-12-09T06:07:39Z

Hi Parisk,

I tried Firefox on MAC the most. However I also tried IE, Chrome on Windows, Linux. None of them worked for me.

The system is not in public domain yet, but you can test it via below:

Modify your windows\system32\driver\hosts file. Point www.flatworld.com to 52.65.93.0
Save below certificate as .cer file and import to you Web Browser.

In IE, you need import it under "Trusted Root Certification Authority". Need do it via the IE "Internet options"->Content -> certificates.
In Firefox, you need import it under "Options->Advanced->View Certificate->Authorities"

The certificate is not publicly signed because the DNS was registered by other party. that's why you need do above. We are working on different names but not now.

Once above is done:

Go to

www.flatworld.com

login username: demo@company1.com
password: test1

You can see "Dural" is green (if it is not green, please email me your prefered test time, I can make sure it is green), click it and then click "connect". You can test copy and paste in there.

uudruid74 · 2017-01-13T07:58:31Z

Basic paste works fine for me, but let me throw a monkey wrench into things. Use tmux to split the screen into two panes. Run something that repeatedly updates the display in one pane, such as top (I'm using htop). Now, try and cut text from either pane.

What happens is that the screen update on one pane either deselects the text before you can cut it or it acts as if you started selecting from the top of the screen and selects multiple lines (I was going for one word).

Update: just noticed #318 and #468 (likely dups), which is where this should have been noted. Sorry.

parisk · 2017-01-13T08:43:41Z

@uudruid74 no prob. Indeed what you describe is a side-effect of not optimal rendering.

The issue here is that the hidden textarea used for input is not positioned correctly in some cases.

uudruid74 · 2017-01-19T06:22:02Z

@parisk Getting more offtopic, but ... why would it need to be positioned at all? Aren't you just giving it focus and then stealing keyDown events with it? So, why would that have anything to do with the mouse?

Tyriar · 2017-01-19T16:47:21Z

The textarea needs to be positioned to support IMEs which popup at the cursor position. The only hooks we have to talk to the IME are the oncomposition* events, so we cannot tell the browser/OS where to position the IME.

This is also the reason we are using a textarea over some contenteditable tricks as it was briefly using since they didn't work nicely for internationalization.

goflatworld · 2017-04-03T00:54:11Z

Hi Parisk,

I have upgraded the website. Now, you can reproduce the issue follow below steps:

Go to

www.pickmyinfo.com

Username: demo@company1.com
Password: test1

Once you login, on the left pane, click "Menu->City->Stingray->Home Router"
On the Right Pane, click "Connect".

After that, a new window popup and states: "Press Enter to Start.". You can test copy and paste in this window.

Thanks

George

xujihui1985 · 2017-05-18T12:08:19Z

any update?

goflatworld · 2017-05-30T03:17:41Z

Do I need node.js to be able to use paste?

parisk · 2017-06-06T08:18:57Z

No, you do not need node.js to paste. Node.js lives outside the browser, while the paste happens inside the browser :).

goflatworld · 2017-08-12T23:44:37Z

I tried the demo application. When the demo server is active. I can paste to the terminal but when I stop the server, I can not paste to the terminal anymore. Do I need to write any special code on the server side to make copy and paste work?

mofux · 2017-08-12T23:48:47Z

@goflatworld Here is what happens: The demo sends your inputs to a tty process that is spawned by the server. Any input that you make on the console is sent to the server, received by the tty process, then output from the tty process is generated (for example it will echo the characters you just typed or pasted), sent from the tty to the server to the demo frontend client, and then rendered by xterm.js. If you kill the server, the data will never arrive at the tty, and no output from the tty will ever arrive at the client.

goflatworld · 2017-08-13T07:19:56Z

Thanks mofux. I get quite lost on this.

So the demo doesn't echo locally and it only display message from server. This is exactly what my application also behaviors. but why my application can not paste even when my server is active?

My client code has been pasted in previous post in the same thread. That code is a slightly modified demo client version. Is there anything wrong with my client code?

goflatworld · 2017-08-23T12:06:56Z

function runRealTerminal() {
  term.attach(socket);
  term._initialized = true;
  socket.send("C");

  term.on('key', function (key, ev) {
    var printable = (
      !ev.altKey && !ev.altGraphKey && !ev.ctrlKey && !ev.metaKey
    );
 
    var message ="A" + key;

    socket.send(message);

  });

  term.on('paste', function (data, ev) {
   term.write(data)   ------------------------------------ Added this line to see if I can see my pasted data, but I can not see anything.
    socket.send(data);
  });
}

Can you please shed some lights on whether the code is correct or not?

mofux · 2017-08-23T12:34:23Z

No, there is a much simpler way to do things. Instead of listening for the key and paste events,
you should actually listen to the data event. This event is emitted whenever you type or paste in the terminal, and it already contains the correct, xterm compatible data (string):

term.on('data', function(data) {
  socket.send(data);
})

goflatworld · 2017-08-24T02:44:01Z

Great mofux!

That fixed the issue after 8 months of wondering what am I doing wrong!... Thanks a lot for your great help.

Cheers

George

Tyriar · 2017-08-24T03:06:52Z

\(^_^)/

goflatworld · 2017-08-24T04:48:39Z

Hi Thomas, Paste works but I noticed that it doesn't paste "enter". Does it need special handling? Thanks George On Wednesday, 23 August 2017, 22:34, Thomas Zilz <notifications@github.com> wrote: No, there is a much simpler way to do things. Instead of listening for the key and paste events, you should actually listen to the data event. This event is emitted whenever you type or paste in the terminal, and it already contains the correct, xterm compatible data (string):term.on('data', function(data) { socket.send(data); }) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

Tyriar · 2017-08-24T15:27:33Z

You mean \n or \r\n? Both should work as the text is filtered through this function:

https://github.com/sourcelair/xterm.js/blob/6e9d60d76d6cfb3d279f9e58499ba62ca6af479c/src/handlers/Clipboard.ts#L23-L28

goflatworld · 2017-08-25T04:49:20Z

Hi Daniel, You are correct. I have found that paste works. Now I want to identify \n or \r\n in the text so that I can send this one by one to the server. Do you know a quick way to do it? I'll do my own research if you don't have one. Thanks George On Friday, 25 August 2017, 1:27, Daniel Imms <notifications@github.com> wrote: You mean \n or \r\n? Both should work as the text is filtered through this function: https://github.com/sourcelair/xterm.js/blob/6e9d60d76d6cfb3d279f9e58499ba62ca6af479c/src/handlers/Clipboard.ts#L23— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

parisk added this to the 2.2.0 milestone Nov 22, 2016

parisk added the type/bug Something is misbehaving label Nov 22, 2016

parisk self-assigned this Nov 22, 2016

parisk removed this from the 2.2.0 milestone Dec 5, 2016

parisk added this to the 2.3.0 milestone Dec 8, 2016

parisk added the area/clipboard label Dec 13, 2016

Tyriar removed this from the 2.3.0 milestone Feb 9, 2017

Tyriar closed this as completed Aug 24, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Paste doesn't work #364

Paste doesn't work #364

goflatworld commented Nov 20, 2016

parisk commented Nov 22, 2016

goflatworld commented Nov 28, 2016

parisk commented Dec 5, 2016

goflatworld commented Dec 5, 2016

parisk commented Dec 8, 2016

goflatworld commented Dec 9, 2016

uudruid74 commented Jan 13, 2017 •

edited

Loading

parisk commented Jan 13, 2017 •

edited

Loading

uudruid74 commented Jan 19, 2017

Tyriar commented Jan 19, 2017

goflatworld commented Apr 3, 2017

xujihui1985 commented May 18, 2017

goflatworld commented May 30, 2017

parisk commented Jun 6, 2017

goflatworld commented Aug 12, 2017

mofux commented Aug 12, 2017 •

edited

Loading

goflatworld commented Aug 13, 2017

goflatworld commented Aug 23, 2017

mofux commented Aug 23, 2017

goflatworld commented Aug 24, 2017

Tyriar commented Aug 24, 2017 •

edited

Loading

goflatworld commented Aug 24, 2017 via email

Tyriar commented Aug 24, 2017 •

edited

Loading

goflatworld commented Aug 25, 2017 via email

Paste doesn't work #364

Paste doesn't work #364

Comments

goflatworld commented Nov 20, 2016

parisk commented Nov 22, 2016

goflatworld commented Nov 28, 2016

parisk commented Dec 5, 2016

goflatworld commented Dec 5, 2016

parisk commented Dec 8, 2016

goflatworld commented Dec 9, 2016

uudruid74 commented Jan 13, 2017 • edited Loading

parisk commented Jan 13, 2017 • edited Loading

uudruid74 commented Jan 19, 2017

Tyriar commented Jan 19, 2017

goflatworld commented Apr 3, 2017

xujihui1985 commented May 18, 2017

goflatworld commented May 30, 2017

parisk commented Jun 6, 2017

goflatworld commented Aug 12, 2017

mofux commented Aug 12, 2017 • edited Loading

goflatworld commented Aug 13, 2017

goflatworld commented Aug 23, 2017

mofux commented Aug 23, 2017

goflatworld commented Aug 24, 2017

Tyriar commented Aug 24, 2017 • edited Loading

goflatworld commented Aug 24, 2017 via email

Tyriar commented Aug 24, 2017 • edited Loading

goflatworld commented Aug 25, 2017 via email

uudruid74 commented Jan 13, 2017 •

edited

Loading

parisk commented Jan 13, 2017 •

edited

Loading

mofux commented Aug 12, 2017 •

edited

Loading

Tyriar commented Aug 24, 2017 •

edited

Loading

Tyriar commented Aug 24, 2017 •

edited

Loading