Add line numbers to Ormolu Live editor

This uses a pure-CSS solution 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.
tweag · Aug 22, 2022 · 91ea909 · 91ea909
1 parent 1dabb17
commit 91ea909
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 3 deletions.
diff --git a/ormolu-live/src/Main.hs b/ormolu-live/src/Main.hs
@@ -96,6 +96,7 @@ viewModel model@Model {..} =
   div_
     []
     [ link_ [rel_ "stylesheet", href_ "bulma.min.css"],
+      link_ [rel_ "stylesheet", href_ "editor.css"],
       script_ [] "new ClipboardJS('.copy-output');",
       section_ [class_ "section"] . pure . div_ [class_ "container is-fluid"] $
         [ h1_ [class_ "title"] [text "Ormolu Live"],
@@ -132,9 +133,15 @@ viewModel model@Model {..} =
             [class_ "columns"]
             [ div_
                 [class_ "column is-half is-flex"]
-                [ textarea_
-                    [class_ "textarea is-family-code", onInput SetInput, rows_ "20", autofocus_ True]
-                    [text input]
+                [ div_
+                    [class_ "editor"]
+                    [ div_
+                        [class_ "line-numbers"]
+                        (replicate (editorLineNumbers . fromMisoString $ input) (span_ [] [])),
+                      textarea_
+                        [class_ "is-family-code", onInput SetInput, rows_ "20", autofocus_ True]
+                        [text input]
+                    ]
                 ],
               div_
                 [id_ "output", class_ "column is-half is-flex card is-shadowless is-radiusless"]
@@ -253,6 +260,8 @@ viewModel model@Model {..} =
               $ prParsedSource
           O.RawSnippet r -> r
 
+    editorLineNumbers text = 1 + T.count "\n" text
+
 extractOrmoluException :: SomeException -> Either String O.OrmoluException
 extractOrmoluException = \case
   (fromException -> Just oe) -> Right oe

diff --git a/ormolu-live/www/editor.css b/ormolu-live/www/editor.css
@@ -0,0 +1,38 @@
+.editor {
+    width: 100%;
+    display: inline-flex;
+    gap: 10px;
+    font-family: monospace;
+    line-height: 21px;
+    background: #282a3a;
+    border-radius: 2px;
+    padding: 20px 10px;
+}
+
+.editor > textarea {
+    flex-grow: 1;
+    line-height: 21px;
+    font-size: 14px;
+    overflow-y: hidden;
+    padding: 0;
+    border: 0;
+    background: #282a3a;
+    color: #FFF;
+    outline: none;
+    resize: none;
+}
+
+.line-numbers {
+    width: 20px;
+    text-align: right;
+}
+
+.line-numbers span {
+    counter-increment: linenumber;
+}
+
+.line-numbers span::before {
+    content: counter(linenumber);
+    display: block;
+    color: #506882;
+}