0
111
Vistasxtermjs no se muestra correctamente y muestra texto torcido
Estoy guardando datos de una sesión tmux con panel de captura en un archivo.txt y obtengo, por ejemplo, este resultado:
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$` Si hago cat file.txt , se muestra correctamente con colores. Si escribo algunos datos en xtermjs, se muestran todos torcidos:
He intentado:
- Ajuste de las columnas, filas en las opciones de la Terminal (obtengo las columnas y filas actuales con
tput colsytput linesen Linux) - Usando "xterm-addon-fit"
- He intentado varias formas de cargar el archivo solo para ver si no estoy perdiendo información al copiar/pegar
- Probé con el paquete xterm-for-reacth
- También probé vanilla js pero tuve los mismos problemas.
Nada funcionó. En este momento, solo quiero encontrar una forma de obtener el texto de una sesión de tmux y mostrarlo correctamente en xtermjs.
Puede ver el problema en estecodesandbox .
1 Respuestas
Responde la pregunta0
editar:
xtermjs solo acepta CRLF (también conocido como \r\n), por lo que si \r se convierte en \r\n, funcionará.
Tenía varias suposiciones incorrectas:
- Esa
writede xtermjs procesaría los finales de línea (como procesa todo lo demás) - Había pestañas en mi texto
Solo descubrí el problema cuando representé los finales de línea y noté que no había pestañas al principio.
La rareza en la imagen de arriba es solo el ajuste de palabra. xterm funciona enfocado en agregar líneas y no cargar pantallas completas.
El siguiente ejemplo funciona, aunque solo con fines de prueba.
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> ); }