From 91ea90945761a2c6e83ab958d84399215d6431ad Mon Sep 17 00:00:00 2001
From: Matthew Healy <matthew.healy@tweag.io>
Date: Wed, 17 Aug 2022 17:19:00 +0200
Subject: [PATCH] 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.
---
 ormolu-live/src/Main.hs    | 15 ++++++++++++---
 ormolu-live/www/editor.css | 38 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 50 insertions(+), 3 deletions(-)
 create mode 100644 ormolu-live/www/editor.css

diff --git a/ormolu-live/src/Main.hs b/ormolu-live/src/Main.hs
index 5a03f24e..a5a111b0 100644
--- 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
new file mode 100644
index 00000000..c36433a3
--- /dev/null
+++ 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;
+}