[RFC] Use css counter for line numbers

[fantactuka]

Alternative approach for line numbers. Current implementation adds data-gutter attribute that includes line numbers that are rendered via code_block:before content. It has issues with line-wraps as data-gutter does not calculate amount of visible lines taken by one line of code. On top of it, it uses caching logic to throttle gutter recalculation and its value might become invalid.

This approach uses css counters. Spans or line breaks that are preceded by a line break are line starters, so we could use those to count lines and style their :before to include counter content. It requires zero javascript and its only downside is it can't render line numbers for empty lines because br:before is not accepting much of styles:

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
lexical	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 5, 2023 9:31pm
lexical-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 5, 2023 9:31pm

[github-actions]

size-limit report 📦

Path	Size	Loading time (3g)	Running time (snapdragon)	Total time
packages/lexical/dist/Lexical.js	27.95 KB (0%)	560 ms (0%)	245 ms (+66.83% 🔺)	804 ms
packages/lexical-rich-text/dist/LexicalRichText.js	39.01 KB (0%)	781 ms (0%)	277 ms (-24.92% 🔽)	1.1 s
packages/lexical-plain-text/dist/LexicalPlainText.js	38.98 KB (0%)	780 ms (0%)	268 ms (-23.85% 🔽)	1.1 s

[ibastawisi]

incredible! btw you can display content before the <br> tag; this worked for me 😊

.PlaygroundTheme__code>br+br {
  display: block;
  content: counter(line-number);
  height: 20px;
}

.PlaygroundTheme__code>br+br:before {
  color: #777;
  content: counter(line-number);
  user-select: none;
  position: absolute;
  left: 5px;
  width: 50px;
}

[HarshithMjh]

Hi @fantactuka , I too needed this fix. Since you closed this, Are you planning on any alternate fix for code block line numbers issue?

[thorn0]

@ibastawisi That doesn't work in Firefox and Safari, unfortunately. Also in Chrome the caret starts behaving funny around empty lines. If you move it with the left/right arrow keys, it needs two key presses instead of one.

[2wheeh]

For me, I just needed this to style exported html without data-gutter. It helped me a lot thanks !

[ibastawisi]

For me, I just needed this to style exported html without data-gutter. It helped me a lot thanks !

It's quite buggy as @thorn0 said, though I'm still using it on my project. But I plan to set data-gutter to the exported markup in my custom code node.