The display in xtermjs appears distorted, showing skewed text instead of displaying correctly

After saving data from a tmux session using capture-pane into a file.txt, the output can look like this:

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 you try cat file.txt, it displays correctly with colors. But transferring that data to xtermjs results in a distorted view:

https://i.sstatic.net/sH5YK.png

Various attempts have been made:

  • Adjusting the columns and rows on Terminal options
  • Using "xterm-addon-fit"
  • Loading the file in different ways to avoid loss of information
  • Experimenting with xterm-for-reacth package
  • Testing vanilla JS solutions

Unfortunately, none of these approaches have resolved the issue. The main goal now is to find a way to display text from a tmux session accurately on xtermjs.

To witness the problem firsthand, check out this codesandbox.

javascriptlayoutxtermjs

Answer №1

update:

xtermjs only recognizes CRLF (carriage return line feed, also known as \r\n), so converting \r to \r\n will resolve the issue.

I made a few incorrect assumptions:

  • I assumed that xtermjs write would handle line endings like it does with other text processing
  • There were tabs present in my text

I discovered the problem when I visualized the line endings and observed the absence of tabs at the beginning.

The strange formatting in the above image is simply due to word wrapping. xterm focuses on adding lines rather than loading entire screens.

The following example functions properly 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>
  );
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to see the countdown timers in Angular 7?

Is there a way for me to view my timer's countdown as it starts? I have attempted to bind it to a variable, but all I see is [object Object]: setTime(time) { if (this.settime >= 5 ) { this.currentTime = time; this.alerttime = thi ...

javascripttypescriptangular7

What is the inner workings of stream.Transform in Node.js?

Recently, I stumbled upon a code snippet on a blog showcasing the usage of the stream Transform class to modify data streams and display the altered output. However, there are certain aspects of this code that leave me puzzled. var stream = require(&apos ...

javascriptnode.jsexpressconstructorprototype

Having trouble retrieving the value from the input text in a dynamically generated table

How can I retrieve values from a dynamically generated table after clicking a button? Below is the code I have implemented to create a table with input fields: function createTable(rows, cols){ var body = document.body, table = document.createEl ...

javascriptjqueryhtml

Angular JS Troubleshooting: Application Not Functioning Properly

I've been learning AngularJS on codeSchool and I ran into an issue with my simple hello world app. It was working fine at first but then stopped completely. I can't seem to find the bug, so any help would be appreciated. Here is the HTML code: & ...

javascriptangularjs

Transformation of JSON output from the controller into a sophisticated entity: Razor

I have a partial view called "_SearchPanel" which includes a dropdown list for selecting years, a multiselect control for classes (along with some other drop downs - omitted), and a search button. My goal is to only refresh/update the classes list when ch ...

javascriptc#jsonasp.net-mvcrazor

The mobile menu is not responding to the click event

Upon clicking the mobile menu hamburger button, I am experiencing a lack of response. I expected the hamburger menu to transition and display the mobile menu, but it seems that neither action is being triggered. Even though I can confirm that my javascrip ...

javascriptjqueryhtmlcss

How can I initialize an empty promise using AngularJS?

I am looking for a way to achieve the following: var promise = IAmAEmptyPromise; if(condition){ promise = ApiService.getRealPromise(); } promise.then(function(){ //perform some actions }); I want to define a promise that can be resolved with a ...

javascriptangularjs

Why doesn't angular generate ng-reflect-_opened="false" in its production build?

We are currently utilizing the following technologies (which cannot be changed in the near future): Angular 2 RC5 Angular CLI 1.0.0-beta.10 Material Design Side Nav Control Node 6.9.1 npm 3.10.8 Windows 10 When we compile the code (using ng serve with d ...

javascriptnode.jsangular

Tips for integrating the react-financial-charts library into your React and JavaScript project

While exploring the react-financial-charts library, I discovered that it is written in TypeScript (TS). Despite my lack of expertise in TypeScript, I am interested in using this library in my React+JS project due to its active contributions. However, I hav ...

javascriptreactjstypescriptnpm

Error message: Unable to locate the 'npm' task in Visual Studio Code

When attempting to execute a JavaScript or Python file in VS Code, an error message consistently pops up: Even after reinstalling node, the issue persists. Clicking on configure reveals various options, each leading me to a json file. New to coding, I ma ...

javascriptnpmvisual-studio-codenpm-install

What is the best way to pass a module from the controller to a Jade/Pug template and then use it as an argument in an event handler within the template?

I passed the module 'naija' to a template from the controller in this way: res.render('testing', {title:"filter setting page", nigeria:naija }); The func ...

javascriptnode.jsexpresspug

The TypeScript @types version's compatibility with the Library version is interconnected

Seeking clarity on the versioning system used for TypeScript @types. Visit https://github.com/DefinitelyTyped/DefinitelyTyped For instance: I presumed that if I was utilizing [email protected], then I would need to install @types/[email protecte ...

javascripttypescript

What is the best way to activate a function within an npm package in a Vue application?

I'm just starting out with Vuejs and I've recently installed the vue-countup-v2 npm package. I successfully imported it into my Vue component and noticed that it works perfectly when the page loads. However, I am interested in triggering the Coun ...

javascriptvue.jsnpmwebpackvue-component

When using the Node.js drive API, setting the emailMessage while creating a permission does not trigger the sending of an

Working with Node.js and the googleapis v61.0.0 client to utilize drive api v3. Strange issue encountered when attempting to create a permission: setting the 'emailMessage' param to anything other than an empty string (or not specifying it at all ...

javascriptnode.jsgoogle-drive-api

NextJS React - WebpackError: Cannot access 'window' before initialization

I'm delving into the world of React and recently completed the "Getting Started" tutorial for NextJs (link), successfully setting up a new project. However, when attempting to import third-party plugins like current-devices or smooth-scrollbar, I enc ...

javascriptreactjswebpack

Is web analytics done via client-side (JavaScript) or server-side logging on websites?

As I embark on creating a web application to track web statistics for my clients, I've run into a dilemma. With the rise of ajax usage, I'm unsure whether it's best to log a user visit using JavaScript or serverside. Additionally, I'm u ...

javascriptasp.netlogging

Guide on setting an array as the data for counts in charts.js

I am working with a chart.js graph and I need to assign an array to the data property. Below is my current code snippet: datasets: [ { data:[40,56,345,2354], backgroundColor: "#007BA7", hoverBackgroundColor: "#00CC99" } ] Howeve ...

javascriptangulartypescriptchart.js

Utilizing ReactJS and Plyr in tandem for Vimeo API Integration

I'm encountering an issue with my React component that utilizes the https://github.com/selz/plyr media player. Everything works as expected until I unmount the component, triggering an error from the Vimeo API. The specific error is: Uncaught (in prom ...

javascriptreactjsecmascript-6plyr.js

Utilize Paper.js to adjust the size of a raster background image

I'm attempting to apply a background image to a canvas element using a script tag at the bottom of my HTML file. When I execute this code, it renders a scaled-down version - essentially just one tile - of the original image. The canvas processing in ...

javascriptjqueryhtmlimagehtml5-canvas

Tips for utilizing the Struts2 submit tag as a button without triggering form submission

I am currently utilizing the Struts2 framework in my application, and I have a button on my JSP page. Here is the code for the button: <s:submit type="button" name="btnSave" /> However, I want this button to act like a normal HTML button, meaning i ...

javajavascriptajaxjspstruts2