0
118
Vistasxtermjs doesn't display correctly and shows crooked text
I'm saving data from a tmux session with capture-pane into a file.txt and I get for instance this result:
PC1:/path$ cd /usr
PC1:/usr$ ll
total 0
drwxr-xr-x 1 root root 4096 May 21 2019 [1;34m.[0;39m/
drwxr-xr-x 1 root root 4096 Aug 1 2019 [1;34m..[0;39m/
drwxr-xr-x 1 root root 4096 Mar 17 15:09 [1;34mbin[0;39m/
drwxr-xr-x 1 root root 4096 Apr 12 2016 [1;34mgames[0;39m/
drwxr-xr-x 1 root root 4096 Feb 8 09:44 [1;34minclude[0;39m/
drwxr-xr-x 1 root root 4096 Feb 8 09:44 [1;34mlib[0;39m/
drwxr-xr-x 1 root root 4096 Nov 26 14:52 [1;34mlocal[0;39m/
drwxr-xr-x 1 root root 4096 May 21 2019 [1;34msbin[0;39m/
drwxr-xr-x 1 root root 4096 Feb 8 09:44 [1;34mshare[0;39m/
drwxr-xr-x 1 root root 4096 May 21 2019 [1;34msrc[0;39m/
PC1:/usr$`
If I do cat file.txt it displays correctly with colors. If I write that some data to xtermjs it shows all crooked:
I've tried:
- Adjusting the cols, rows on the Terminal options (I get the current columns and rows with
tput colsandtput lineson linux) - Using "xterm-addon-fit"
- I've tried several ways of loading the file just to see if I'm not losing some information in the copy/pasting
- I tried with the package xterm-for-reacth
- I also tried vanilla js but had the same issues
Nothing worked. At this moment I just want to find a way of getting the text from a tmux session and display it correctly on xtermjs.
You can see the issue in this codesandbox.
1 Respuestas
Responde la pregunta0
edit:
xtermjs only accepts CRLF (aka \r\n) so if the \r is converted to \r\n will make it work.
I had several wrong assumptions:
- That xtermjs
writewould process line endings (as it processes everything else) - There were tabs on my text
I only found out the issue when I rendered the line endings and noticed there were no tabs at the start.
The weirdness in the image above is just the word wrap. xterm works focused on adding lines and not loading full screens.
The example below works albeit only for testing purposes.
import { useEffect } from "react";
import { Terminal } from "xterm";
import "./styles.css";
import "xterm/css/xterm.css";
const txt = `
PC1:/path$ cd /usr
PC1:/usr$ ll
total 0
drwxr-xr-x 1 root root 4096 May 21 2019 [1;34m.[0;39m/
drwxr-xr-x 1 root root 4096 Aug 1 2019 [1;34m..[0;39m/
drwxr-xr-x 1 root root 4096 Mar 17 15:09 [1;34mbin[0;39m/
drwxr-xr-x 1 root root 4096 Apr 12 2016 [1;34mgames[0;39m/
drwxr-xr-x 1 root root 4096 Feb 8 09:44 [1;34minclude[0;39m/
drwxr-xr-x 1 root root 4096 Feb 8 09:44 [1;34mlib[0;39m/
drwxr-xr-x 1 root root 4096 Nov 26 14:52 [1;34mlocal[0;39m/
drwxr-xr-x 1 root root 4096 May 21 2019 [1;34msbin[0;39m/
drwxr-xr-x 1 root root 4096 Feb 8 09:44 [1;34mshare[0;39m/
drwxr-xr-x 1 root root 4096 May 21 2019 [1;34msrc[0;39m/
PC1:/usr$`;
let terminal;
export default function App() {
useEffect(() => {
terminal = new Terminal();
terminal.open(document.getElementById("terminal"));
const lines = txt.split(/\n/);
lines.forEach((l) => terminal.write(l + "\r\n"));
}, []);
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<div id="terminal" />
</div>
);
}