Show Whitespace options

[CrossR]

There are certain things that I always struggled with in terminal based Vim/NeoVim.

I quite like how VS Code, Notepad++ and similar all show whitespace/tabs/etc, but I never really managed to find a decent way of mirroring it in the terminal versions of Vim because getting transparency of some form working was never very easy.

Similarly, things like column rulers where always these big thick lines that I wasn't a fan of, and indent guides were either big thick lines or made up of pipe symbols which again doesn't look the best.

Quick example from Code, but an option in general would be nice.

This seems like something Oni would be able to do a lot better, but I'm not sure.

[bryphe]

Great suggestion, @CrossR ! I agree 100% - I prefer the aesthetic of VSCode/Notepad++ show the column rules and whitespace symbols. Part of Oni's mission is to break free of terminal UI limitations, so this is definitely a place where Oni could provide value.

[CrossR]

I can see this was linked to over in #2188, what is left / needed now for something like this to be added? Or is all the structure there, but just requiring somebody to add it?

[bryphe]

@Akin909 's PR #2344 is a great starting point for this - I believe really all we need is to add the option of showing space / tab characters, too.

[akinsho]

@bryphe @CrossR its a relatively medium-small addition to get white space chars I just tried adding some and can get the result below by adding a whitespace component which is just a circle then for each indent drawing one

the issue with this approach is that it significantly slows the rendering down making everything feel less responsive looping in loops etc (the snippet below happens inside another loop path is -> loop through lines -> detect and calculate indent -> forEach indent -> find number of previous indents -> draw one for each at the same time draw one whitespace char for each space

            const chars: JSX.Element[] = []
            for (let i = 0; i < spaces; i++) {
                chars.push(
                    <WhiteSpace
                        top={top}
                        color={color}
                        height={height}
                        width={width}
                        left={left - width * i}
                    >
                        <WhitespaceCircle />
                    </WhiteSpace>,
                )
            }
            return chars
        },

[parkerault]

Would it be more performant to use unicode like • for space, ► for tab, and ⏎ for newline?