How to set both background and color?

[jcubic]

I've noticed that the demo doesn't render properly when you select the text. The charts should be reversed. To fix the issue the style should be both ervy.bg and ervy.fg. Is it possible to combine the styles?

[chunqiuyiyu]

Hi @jcubic, ANSI escape code support combine color and background, for example:

console.log('\x1b[36m\x1b[41mHello World\x1b[0m')

result:

I will add new mixin utils function to comine fg and bg styles if it is necessary.

[jcubic]

I know how to do this in raw text using ANSI escapes, the problem is the ervy API. Can I write code that will make both color and background?

[chunqiuyiyu]

Of course.

[jcubic]

So can I write it? Can you share the code on how to do this? I would update the demo, because it's looks weird when you select text.

[chunqiuyiyu]

You can use raw ANSI escapes to render ervy charts, for example:

const barData = [
    { key: 'A', value: 5, style: '\x1b[36m\x1b[41m#\x1b[0m' },
    { key: 'B', value: 3, style: '+' },
    { key: 'C', value: 11 },

]

console.log(ervy.bar(barData))

Output:

[jcubic]

It seems that for ervy.bg in demo the fix would be something like this (using existing API):

function bg(style, size) {
    var fg = ervy.fg(style, '?').replace(/\?.*/, '');
    return fg + ervy.bg(style, size);
}

and it will fix selection in a terminal. If you want to can create a PR. You can see how this works in in demo: https://codepen.io/jcubic/pen/gObPBdP?editors=1010

An alternative is to come up with a better API like ervy.color that will change both colors. And update documentation

Note that the error is not only in the web terminal the same happens in a real terminal emulator.