How can I configure arrow key to work as a terminal arrow key

[bajrangCoder]

I have a created a terminal using xtermjs and it's working fine, I have configured all basic shortcut and configured arrows button to do stuff in xtermjs prompt area but I also want to to make arrow button to work in whole Terminal, mainly while using vite , user are not able to use up/down arrow key to choose from given option. Is there any guide for it? Or Any hint will be appreciated.

Note: I am using websocket and node-pty in backend.

And I have used .onData() for handling arrow key and key shortcuts , etc.

Demo of my Terminal

Here's how i write data to terminal, comes from websocket:

ws.onmessage = (ev) => {
  let data = ev.data;
  terminal.write(
    typeof data === "string" ? data : new Uint8Array(data)
   );
};

source

:)

[jerch]

Didnt we have a similar discussion recently? Seems I cant find it anymore...

The answer is still the same - it is almost impossible to marry your browser-local echo/history controller with that of the remote shell. Main issue - on what predicate you gonna decide, whether to route the the arrow key to your history controller or the remote shell? Because there is no reliable way to distinguish that...

You still can introduce an artificial distinction, e.g. by prepending all local commands with a token unique to browser commands, e.g. command_x becomes js_command_x. Then in your controller you can parse the input for the leading js_ and know that the command may not be sent to the backend, thus handle it locally. This is still wonky, as the sentinel still might occur in backend data as well and will break that logic then (can be mitigated to some degree by finding a very unique sentinel).
Same goes for arrow keystrokes - you will have to makes them local/remote distinguishable, e.g. use shift+arrow for local, and just arrow for remote.

And once again - if you want to avoid the headache to create that, just dump your local echo/history controller, and use the remote shell for all of that. Problem solved.

[bajrangCoder]

By remote shell what do you mean?, i guess just leave every thing on backend instead of handling in .onData()?

[jerch]

i guess just leave every thing on backend instead of handling in .onData()?

Yes, avoids all of these problems.

By remote shell what do you mean?

The controlling shell on the PTY slave (backend). That shell is remote to your browser, while your self-implemented history controller is browser-local (thus partially mimicks a local shell).

[jerch]

Do you have any in-browser command implemented, that you dont want to lose? Then you can cheat by moving its functionality into a custom terminal sequence. Then on PTY startup in the backend you can inject a shell alias/function as command triggering that terminal sequence.
This way the command gets handled transparently by the remote shell as well.

[bajrangCoder]

Thanks a lot , sir ❤️

You have saved me. Previously I think that I will need to configure every things manually to make a real terminal. I was literally in mesh.

Once again thanku!