feat: add sass/scss/less modes to codemirror and highlight active line

src/main/frontend/extensions/code.cljs

@@ -13,6 +13,7 @@
             ["codemirror" :as cm]
             ["codemirror/addon/edit/matchbrackets"]
             ["codemirror/addon/edit/closebrackets"]
+            ["codemirror/addon/selection/active-line"]
             ["codemirror/mode/clojure/clojure"]
             ["codemirror/mode/powershell/powershell"]
             ["codemirror/mode/javascript/javascript"]
@@ -22,6 +23,7 @@
             ["codemirror/mode/commonlisp/commonlisp"]
             ["codemirror/mode/coffeescript/coffeescript"]
             ["codemirror/mode/css/css"]
+            ["codemirror/mode/sass/sass"]
             ["codemirror/mode/dart/dart"]
             ["codemirror/mode/dockerfile/dockerfile"]
             ["codemirror/mode/elm/elm"]
@@ -105,6 +107,8 @@
         "typescript" "text/typescript"
         "ts" "text/typescript"
         "tsx" "text/typescript-jsx"
+        "scss" "text/x-scss"
+        "less" "text/x-less"
         mode))))
 
 (defn render!
@@ -129,6 +133,7 @@
                                           :matchBrackets lisp?
                                           :autoCloseBrackets true
                                           :lineNumbers true
+                                          :styleActiveLine true
                                           :extraKeys #js {"Esc" (fn [cm]
                                                                   (let [save! #(save-file-or-block-when-blur-or-esc! cm textarea config state)]
                                                                     (if-let [block-id (:block/uuid config)]

src/main/frontend/extensions/code.css

@@ -14,5 +14,10 @@
     padding: 6px 0 0 0;
     font-family: Fira Code, Monaco, Menlo, Consolas, 'COURIER NEW', monospace;
     max-width: 86vw;
+    &:not(.CodeMirror-focused) {
+      .CodeMirror-activeline-background {
+        background: unset;
+      }
+    }
   }
 }