Wrong escapes, am I doing something wrong?

[gillchristian]

Hi! This is a really cool library, it made the problem of the rendering of ANSI for a project I work just stupidly easy 😅 Thanks!

I found a problem with some stuff that is not properly rendered and I'm not sure if I'm doing something wrong (with the input) or if it is a bug.

I have the following text:

$ docker-compose down
Stopping server_tsplay_1 ... ^M
^[[1A^[[2K^MStopping server_tsplay_1 ... ^[[32mdone^[[0m^M^[[1BRemoving server_tsplay_1 ... ^M
^[[1A^[[2K^MRemoving server_tsplay_1 ... ^[[32mdone^[[0m^M^[[1BRemoving network server_default
$ docker-compose up -d
Creating network "server_default" with the default driver
Creating server_tsplay_1 ... ^M
^[[1A^[[2K^MCreating server_tsplay_1 ... ^[[32mdone^[[0m^M^[[1B$ docker-compose logs
Attaching to server_tsplay_1

This is how it looks on the terminal:

And this is how it looks rendered (split by line):

<div className="logs">
  {log.split('\n').map((line, index) => (
    <Ansi key={index}>{line}</Ansi>
  ))}
</div>

This is just the text, just in case it serves as reference.

$ docker-compose down
Stopping server_tsplay_1 ... done
Removing server_tsplay_1 ... done
Removing network server_default
$ docker-compose up -d
Creating network "server_default" with the default driver
Creating server_tsplay_1 ... done
$ docker-compose logs
Attaching to server_tsplay_1

[captainsafia]

@gillchristian Glad this library was helpful for you.

Can you share what the HTML generated from the component looks like? It might be the case that the color key codes are not properly mapped to classnames for styling.

[gillchristian]

Using the inline styles mode instead of the classes one. I guess it should not change the parsing, right?

<code>
  <span>$ docker-compose down</span>
</code>
<code>
  <span>Stopping server_tsplay_1 ... </span>
</code>
<code>
  <span>Removing server_tsplay_1 ... mdone</span>
  <span> </span>
</code>
<code>
  <span>Removing network server_defaultone</span>
</code>
<code>
  <span>$ docker-compose up -d</span>
</code>
<code>
  <span>Creating network "server_default" with the default driver</span>
</code
<code>
  <span>Creating server_tsplay_1 ... </span>
</code>
<code>
 <span>$ docker-compose logs... </span>
 <span style="color: rgb(0, 187, 0);">done</span>
</code>
<code>
  <span>Attaching to server_tsplay_1</span>
</code>

[captainsafia]

OK. I looked into this. I'm not sure why that lonesome "done" renders with the correct color codes but when I tried to repro this nothing was colorizing for me.

I noticed in the input text that the color codes are not prefixed with \u001b (which is expected for ANSI color codes) so that might be the issue. Where is the input text coming from?