Upgrade CodeMirror 6 to 0.18

* Upgrade CodeMirror 6 to 0.18

Author: mk

demo/src/nextjournal/clojure_mode/demo.cljs

@@ -26,21 +26,21 @@
 
 (def theme
   (.theme EditorView
-          (j/lit {:$content {:white-space "pre-wrap"
-                             :padding "10px 0"}
-                  :$$focused {:outline "none"}
-                  :$line {:padding "0 9px"
-                          :line-height "1.6"
-                          :font-size "16px"
-                          :font-family "var(--code-font)"}
-                  :$matchingBracket {:border-bottom "1px solid var(--teal-color)"
-                                     :color "inherit"}
-                  :$gutters {:background "transparent"
-                             :border "none"}
-                  :$gutterElement {:margin-left "5px"}
+          (j/lit {".cm-content" {:white-space "pre-wrap"
+                                 :padding "10px 0"}
+                  "&.cm-focused" {:outline "none"}
+                  ".cm-line" {:padding "0 9px"
+                              :line-height "1.6"
+                              :font-size "16px"
+                              :font-family "var(--code-font)"}
+                  ".cm-matchingBracket" {:border-bottom "1px solid var(--teal-color)"
+                                         :color "inherit"}
+                  ".cm-gutters" {:background "transparent"
+                                 :border "none"}
+                  ".cm-gutterElement" {:margin-left "5px"}
                   ;; only show cursor when focused
-                  :$cursor {:visibility "hidden"}
-                  "$$focused $cursor" {:visibility "visible"}})))
+                  ".cm-cursor" {:visibility "hidden"}
+                  "&.cm-focused .cm-cursor" {:visibility "visible"}})))
 
 (defonce extensions #js[theme
                         (history)

package.json

@@ -1,20 +1,20 @@
 {
     "dependencies": {
-        "@codemirror/autocomplete": "^0.17.0",
-        "@codemirror/closebrackets": "^0.17.0",
-        "@codemirror/commands": "^0.17.0",
-        "@codemirror/comment": "^0.17.0",
-        "@codemirror/fold": "^0.17.0",
-        "@codemirror/gutter": "^0.17.0",
-        "@codemirror/highlight": "^0.17.0",
-        "@codemirror/history": "^0.17.0",
-        "@codemirror/language": "^0.17.0",
-        "@codemirror/lint": "^0.17.0",
-        "@codemirror/matchbrackets": "^0.17.0",
-        "@codemirror/rectangular-selection": "^0.17.0",
-        "@codemirror/search": "^0.17.0",
-        "@codemirror/state": "^0.17.0",
-        "@codemirror/view": "^0.17.0",
+        "@codemirror/autocomplete": "^0.18.0",
+        "@codemirror/closebrackets": "^0.18.0",
+        "@codemirror/commands": "^0.18.0",
+        "@codemirror/comment": "^0.18.0",
+        "@codemirror/fold": "^0.18.0",
+        "@codemirror/gutter": "^0.18.0",
+        "@codemirror/highlight": "^0.18.3",
+        "@codemirror/history": "^0.18.0",
+        "@codemirror/language": "^0.18.0",
+        "@codemirror/lint": "^0.18.0",
+        "@codemirror/matchbrackets": "^0.18.0",
+        "@codemirror/rectangular-selection": "^0.18.0",
+        "@codemirror/search": "^0.18.0",
+        "@codemirror/state": "^0.18.0",
+        "@codemirror/view": "^0.18.0",
         "lezer": "^0.13.1",
         "lezer-clojure": "0.1.10",
         "lezer-generator": "^0.13.0",

src/nextjournal/clojure_mode/extensions/match_brackets.cljs

@@ -3,7 +3,7 @@
    ["@codemirror/state" :refer [EditorState
                                 StateField
                                 Extension]]
-   ["@codemirror/view" :refer [EditorView themeClass
+   ["@codemirror/view" :refer [EditorView
                                Decoration DecorationSet]]
    [applied-science.js-interop :as j]
    [nextjournal.clojure-mode.node :as n]
@@ -15,8 +15,8 @@
             :$nonmatchingBracket {:color "#a22"}})
     (.baseTheme EditorView)))
 
-(def ^js matching-mark (.mark Decoration (j/obj :class (themeClass "matchingBracket"))))
-(def ^js nonmatching-mark (.mark Decoration (j/obj :class (themeClass "nonmatchingBracket"))))
+(def ^js matching-mark (.mark Decoration (j/obj :class "cm-matchingBracket")))
+(def ^js nonmatching-mark (.mark Decoration (j/obj :class "cm-nonmatchingBracket")))
 
 (defn mark-node [node ^js mark]
   (.range mark (n/start node) (n/end node)))