CodeMirror 6 Improvements ✨

* Preserve newlines on kill
* Use spliceString
* Show alternate keybindings on demo
* Also show eval keybindings on demo
* Don't scroll editor into view after kill command

Co-authored-by: Martin Kavalar <[email protected]>
Co-authored-by: Martin Kavalar <[email protected]>
Co-authored-by: Martin Kavalar <[email protected]>
Co-authored-by: Martin Kavalar <[email protected]>
Co-authored-by: Martin Kavalar <[email protected]>

Author: 2 people

src/demo/nextjournal/clojure_mode/demo.cljs

@@ -108,12 +108,14 @@
   (cond-> {"ArrowUp" "↑"
            "ArrowDown" "↓"
            "ArrowRight" "→"
-           "ArrowLeft" "←"}
+           "ArrowLeft" "←"
+           "Mod" "Ctrl"}
     (mac?)
     (merge {"Alt" "⌥"
             "Shift" "⇧"
             "Enter" "⏎"
-            "Ctrl" "⌃"})))
+            "Ctrl" "⌃"
+            "Mod" "⌘"})))
 
 (defn render-key [key]
   (let [keys (into [] (map #(get ((memoize key-mapping)) % %) (str/split key #"-")))]
@@ -126,22 +128,31 @@
             :innerHTML
             (tag :div
                  (tag :h3 {:class "m-3" } "Keybindings")
-                 (tag :table {:cellpadding 0 :class "w-full"}
+                 (tag :table {:cellpadding 0 :class "w-full text-sm"}
+                      (tag :tr
+                           {:class "border-t even:bg-gray-100"}
+                           (tag :td {:class "px-3 py-1 align-top text-sm"} "Command")
+                           (tag :td {:class "px-3 py-1 align-top text-sm"} "Keybinding")
+                           (tag :td {:class "px-3 py-1 align-top text-sm"} "Alternate Binding")
+                           (tag :td {:class "px-3 py-1 align-top text-sm"} "Description"))
                       (->> keymap/paredit-keymap*
+                           (merge (sci/keymap* "Alt"))
                            (sort-by first)
-                           (reduce (fn [out [command [{:keys [key shift doc]}]]]
+                           (reduce (fn [out [command [{:keys [key shift doc]} & [{alternate-key :key}]]]]
                                      (str out
                                           (tag :tr
                                                {:class "border-t even:bg-gray-100"}
                                                (tag :td {:class "px-3 py-1 align-top"} (tag :b (name command)))
                                                (tag :td {:class "px-3 py-1 align-top text-sm"} (render-key key))
+                                               (tag :td {:class "px-3 py-1 align-top text-sm"} (some-> alternate-key render-key))
                                                (tag :td {:class "px-3 py-1 align-top"} doc))
                                           (when shift
                                             (tag :tr
                                                  {:class "border-t even:bg-gray-100"}
                                                  (tag :td {:class "px-3 py-1 align-top"} (tag :b (name shift)))
                                                  (tag :td {:class "px-3 py-1 align-top text-sm"}
                                                       (render-key (str "Shift-" key)))
+                                                 (tag :td {:class "px-3 py-1 align-top text-sm"})
                                                  (tag :td {:class "px-3 py-1 align-top"} ""))))) ""))
                       "</table>"))))
 

src/demo/nextjournal/clojure_mode/demo/sci.cljs

@@ -31,6 +31,17 @@
       (on-result))
   true)
 
+(defn keymap* [modifier]
+  {:eval-cell
+   [{:key "Mod-Enter"
+     :doc "Evaluate cell"}]
+   :eval-at-cursor
+   [{:key (str modifier "-Enter")
+     :doc "Evaluates form at cursor"}]
+   :eval-top-level
+   [{:key (str modifier "-Shift-Enter")
+     :doc "Evaluates top-level form at cursor"}]})
+
 (defn extension [{:keys [modifier
                          on-result]}]
   (.of view/keymap

src/main/nextjournal/clojure_mode/commands.cljs

@@ -28,15 +28,15 @@
 
 (defn copy-to-clipboard! [text]
   (let [^js focus-el (j/get js/document :activeElement)
-        input-el (js/document.createElement "input")]
+        input-el (js/document.createElement "textarea")]
     (.setAttribute input-el "class" "clipboard-input")
-    (.setAttribute input-el "value" text)
+    (j/assoc! input-el :innerHTML text)
     (-> js/document .-body (.appendChild input-el))
     (.focus input-el)
     (.select input-el)
     (js/document.execCommand "copy")
-    (-> js/document .-body (.removeChild input-el))
-    (.focus focus-el)))
+    (.focus focus-el #js {:preventScroll true})
+    (-> js/document .-body (.removeChild input-el))))
 
 (defn kill* [^js state]
   (u/update-ranges state

src/main/nextjournal/clojure_mode/node.cljs

@@ -210,7 +210,7 @@
   ([^js state node]
    (string state (start node) (end node)))
   ([^js state from to]
-   (.slice (.-doc state) from to)))
+   (.sliceString (.-doc state) from to \newline)))
 
 (defn ancestor? [parent child]
   (boolean
@@ -373,7 +373,7 @@
                     L
                     R
                     mid)
-              -1 (or (u/guard L (every-pred some? #(or (same-edge? %) (not (left-edge? %)))))
-                     R
-                     L
-                     mid))))
+          -1 (or (u/guard L (every-pred some? #(or (same-edge? %) (not (left-edge? %)))))
+                 R
+                 L
+                 mid))))