search

tweag / ormolu

A formatter for Haskell source code
https://ormolu-live.tweag.io
Other
956 stars 83 forks source link

[Ormolu-Live] Add line numbers to editor (Fixes #908) #920

Closed matthew-healy closed 2 years ago

matthew-healy commented 2 years ago

This uses a (mostly) pure-CSS solution (inspired by this post) to add line numbers to the text editor in Ormolu Live. It calculates the desired line number count from the input, and then creates an equivalent number of span elements. A CSS counter is then incremented for each span, and the content is set to the counter's value.

As part of this I had to stop letting Bulma style the editor, so I took the opportunity to give it a dark background & white text, which I think looks pretty nice. I'm also happy to try and find something closer to the original style if anyone has particularly strong feelings about it.

I initially looked at bringing in a dependency for this, but every one I found creates its own textarea rather than using the one provided, which means it'd be a huge pain to wire the browser input events back up to the SetInput action. Doing it this way has some drawbacks (primarily that the editor's textarea can no longer scroll separately from the rest of the page, as otherwise the line numbers would get out of sync) but is significantly simpler overall than the alternatives.

Merging this will close #908.

How it looks

ormolu-line-numbers

matthew-healy commented 2 years ago

@amesgen Totally agree that the overall editing experience can be improved further. It should be possible to integrate something like CodeFlask or CodeMirror with a medium amount of JSaddle wrangling, and either of those should improve the experience (& mean there's less that has to be maintained in Ormolu-Live). As mentioned in the PR description, the main issue I ran into there was that these libraries expect to introduce their own textarea, which means we have to find that object in the document and attach the onInput handler to it ourselves. It seemed to make sense to get the simplest version of this feature shipped ASAP, and come back to work out an improved version later on.

In the meantime, I've made the changes you requested, but I'm currently on free airport WiFi which for whatever reason won't let me push to GitHub, so I won't be able to update the PR for a few hours.