why is the cursor messed like this?

Question

My terminal goes like this:

import { useEffect } from "react";
import { Terminal as TerminalType } from 'xterm';
import { FitAddon } from 'xterm-addon-fit';
//import { SearchAddon } from 'xterm-addon-search'
import 'xterm/css/xterm.css';

export const Terminal = ({
    initialValue
  } : {
    initialValue?: string
  }) => {

  const id = 'xterm-container';
  useEffect(() => {
    const terminal = new TerminalType({
      cursorBlink: true,
      cursorStyle: window.api.isWindows ? "bar" : "underline"
    });

    const fitAddon = new FitAddon();
    terminal.loadAddon(fitAddon);

    window.api.receive('terminal.incomingData', (data) => {
      terminal.write(data);
    });
    
    terminal.open(document.getElementById(id) as HTMLElement);
    terminal.onData(key => {
      window.api.send('terminal.keystroke', key);
    });
    
    terminal.focus();
    window.api.send('terminal.keystroke', "cd C:\\\r\n");

  }, []);

  return (
    <div id={id}></div>
  )
}

where in the backend I connect xterm to real terminal like this:

ipcMain.on('terminal.keystroke', (_, key) => {
  ptyProcess.write(key);
});

  const shell = isWindows ? 'powershell.exe' : 'bash';
  ptyProcess = spawn(shell, [], {
    name: 'xterm-color',
    cols: 80,
    rows: 30,
    cwd: isWindows ? process.env.USERPROFILE : process.env.HOME,
    env: process.env as INonUndefinedEnv
  });
  ptyProcess.onData(data =>
    EnforceNonNull(win).webContents.send('terminal.incomingData', data)
  );

but when send the text, the cursor for some reason gets messed like in the below image. Sending a text like this reproduce the error:

window.api.send('terminal.keystroke', "cd C:\\\r\n");

By messed I mean this. cd is on top, then cd c:\ and the >> below PS. it's supposed to be something like this:

EDIT 2:

if i went to say type dir it goes like this:

EDIT 2: this seems to happen only in the very first line. After that, the curson position didn't seem to get messed anymore

I'm assuming the `\n` (= Ctrl+J) you are sending is messing things up. You only need `\r` (= Ctrl+M, aka Enter). — CherryDT, Jun 22 '22 at 21:12
i just tried that but got same behavior `window.api.send('terminal.keystroke', "cd C:\\\r");` — Jack, Jun 22 '22 at 23:14
You could redirect your command to a file and look at it in a hex editor. That should reveal weird keystrokes I would assume. Also consider using `os.EOL`: [How to append to new line in NodeJS](https://stackoverflow.com/questions/10384340/how-to-append-to-new-line-in-node-js) — Peter Krebs, Jun 23 '22 at 07:34
@PeterKrebs I managed to fix the issue. I was debugging the data passed from the real terminal to xterm.js and did notice strings that didn't show up in xterm.js terminal so I guessed they would be out of sync, one was starting to the other so that xterm.js wasn't ready to receive data (for example, the initial powershell string, with Microsoft copyright message, etc) that result in that mess with the cursor position — Jack, Jun 23 '22 at 20:16

why is the cursor messed like this?

0 Answers0