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?