Show line numbers in file editor

[jelly]

Currently our editor lacks line numbers, ideally we add them via CSS.

[garrett]

Note: I have a proof of concept in #509, which I have a demo of (with updated CSS) at https://codepen.io/garrett/pen/qBGPzWZ ... where I just added some additional CSS I suggested in that discussion thread (white-space-collapse: break-spaces; hyphens: none;), to cover the edge cases brought up.

[Mash707]

Hi @garrett I would like to explore this. From what I understand is that the changes should be made in editor.scss and editor.tsx. Is there any other information you could provide which can make the implementation simple? I am familiar with CSS and tailwind CSS but haven't explored SCSS much.

[jelly]

@Mash707 you don't really need to know SCSS to work on this, you indeed need to edit the editor files you pointed out.

Look at the demo and try to understand what it does, most importantly test it out while resizing the browser. The resizing case will likely be the most difficult thing to handle.

[Mash707]

Thanks for the information @jelly . I'll begin with implementing the demo first and then moving forward we can test out the resizing part.

[jelly]

I looked at the proof of concept from @garrett again, this seems to require a few per-requirsites:

• fixed line-height for editor
• fixed column count (we can obtain this from JavaScript)

The text is then iterated over and it is assumed that the word length of a JavaScript string is equal to the width when rendered. Creating a line <-> wrapCount which is a quite elegant solution combined with css variables for the line number container. (Basically removes the need for "empty" elements which other examples do by inserting a non breaking space element for a wrapped line).

However this does not work well with internationalization I tried Japanese with a Japanese Lorem Ipsum and it looks wrong for example in Gedit this renders as:

In your demo:

The main take away here is that I quite like the approach with the line number height and line number container ie.

 .line-number {
    height: calc(var(--character-height) * var(--mod));
    padding: 0 var(--padding-width);
    min-width: 2ch;
  }

But this seems to not apply to Japanese and possibly other languages?

[madsoliver]

First of all: thank you for your great work 🙂

About like numbers, wouldnt it be easier to use a ready code editor lib for such a thing?
Like https://codemirror.net

It would add like numbers, but also syntax highlighting and many other (optional) useful features.

Using the code editor could be optional when opening documents, so those that dont need the features, can open a plain textarea like today.

Implementering codemirror (or another lib) might not be more complex than making line numbers from scratch.

[Mash707]

@madsoliver From some previous discussions in matrix the team is not looking towards adding a code editor lib like codemirror as it would add way too many dependencies which are currently not needed for the text editor.
For now only line numbers are needed that is why they were considering a minimal approach of using CSS to add them.

[jmiaje]

Im pretty much agree with @madsoliver, Having a code editor instead is a big plus i believe.

Btw, @Mash707 do you guys have any progress on this? I have found a pull request in regards but seems this is pending for a long.

[Mash707]

Having a code editor instead is a big plus i believe.

I can't say much about it since I am not part of the cockpit team. I am a fellow outside contributor. It is up to them to decide.
@garrett could you have a look.

Btw, @Mash707 do you guys have any progress on this? I have found a pull request in regards but seems this is pending for a long.

@jmiaje I was trying to work on this but wasn't able to figure out the css part and also got occupied with other stuff. It is also not in priority so thats why it is pending for a long time. Feel free to contribute if you have a solution in mind.