Default to ⌘ for regional evals & Name command fns (#38)

* Make Meta the default modifier for regional eval

* Make sure eval- cmds are named in bindings

* Update bindings in doc, demo & readme

---------

Co-authored-by: Martin Kavalar <martin@nextjournal.com>

Author: philippamarkovics

README.md

@@ -19,9 +19,9 @@ Enabling a decent Clojure/Script editor experience in the browser. Built for and
 * Expand/Contract: <kbd>Alt</kbd> + <kbd>↑</kbd> / <kbd>↓</kbd>	or <kbd>Mod</kbd> + <kbd>1</kbd> / <kbd>2</kbd>
 
 🧙 **Prepared for evaluation**
-* At Cursor: <kbd>Alt</kbd> + <kbd>⏎</kbd>
-* Top-level form: <kbd>Alt</kbd> + <kbd>⇧</kbd> + <kbd>⏎</kbd>
-* Cell: <kbd>Mod</kbd> + <kbd>⏎</kbd>
+* At Cursor: <kbd>Mod</kbd> + <kbd>⏎</kbd>
+* Top-level form: <kbd>Mod</kbd> + <kbd>⇧</kbd> + <kbd>⏎</kbd>
+* Cell: <kbd>Alt</kbd> + <kbd>⏎</kbd>
 
 **🧹 Autoformatting** following [Tonsky’s Better Clojure Formatting](https://tonsky.me/blog/clojurefmt/)
 

demo/src/nextjournal/clojure_mode/demo.cljs

@@ -64,8 +64,8 @@
                                              (j/obj :state
                                                     (test-utils/make-state
                                                      (cond-> #js [extensions]
-                                                       eval? (.concat #js [(eval-region/extension {:modifier "Alt"})
-                                                                           (demo.sci/extension {:modifier "Alt"
+                                                       eval? (.concat #js [(eval-region/extension {:modifier "Meta"})
+                                                                           (demo.sci/extension {:modifier "Meta"
                                                                                                 :on-result (partial reset! last-result)})]))
                                                      source)
                                                     :parent el)))))]
@@ -211,7 +211,7 @@
   (j/assoc! (js/document.getElementById "viewer-stylesheet")
             :innerHTML (rc/inline "stylesheets/viewer.css"))
 
-  (rdom/render [key-bindings-table (merge keymap/paredit-keymap* (demo.sci/keymap* "Alt"))] (js/document.getElementById "docs"))
+  (rdom/render [key-bindings-table (merge keymap/paredit-keymap* (demo.sci/keymap* "Mod"))] (js/document.getElementById "docs"))
   (rdom/render [:div.rounded-md.mb-0.text-sm.monospace.overflow-auto.relative.border.shadow-lg.bg-white
                 [markdown-editor {:doc "# Hello Markdown
 

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

@@ -14,13 +14,13 @@
           (catch js/Error e
             {:error (str (.-message e))})))))
 
-(j/defn eval-at-cursor [on-result ^:js {:keys [state]}]
+(j/defn eval-at-cursor* [on-result ^:js {:keys [state]}]
   (some->> (eval-region/cursor-node-string state)
            (eval-string)
            (on-result))
   true)
 
-(j/defn eval-top-level [on-result ^:js {:keys [state]}]
+(j/defn eval-top-level* [on-result ^:js {:keys [state]}]
   (some->> (eval-region/top-level-string state)
            (eval-string)
            (on-result))
@@ -35,7 +35,7 @@
 
 (defn keymap* [modifier]
   {:eval-cell
-   [{:key "Mod-Enter"
+   [{:key "Alt-Enter"
      :doc "Evaluate cell"}]
    :eval-at-cursor
    [{:key (str modifier "-Enter")
@@ -48,8 +48,10 @@
                          on-result]}]
   (.of view/keymap
        (j/lit
-        [{:key "Mod-Enter"
+        [{:key "Alt-Enter"
           :run (partial eval-cell on-result)}
          {:key (str modifier "-Enter")
-          :shift (partial eval-top-level on-result)
-          :run (partial eval-at-cursor on-result)}])))
+          :shift (j/fn eval-top-level [result]
+                   (eval-top-level* on-result result))
+          :run (j/fn eval-at-cursor [result]
+                 (eval-at-cursor* on-result result))}])))

public/index.html

@@ -166,23 +166,23 @@ <h3 class="text-center sans-serif font-bold text-lg mt-0 mb-1">Try evaluating an
                         At Cursor
                       </td>
                       <td class="py-1 text-right">
-                        <span class="kbd alt">Alt</span> + <span class="kbd">⏎</span>
+                        <span class="kbd alt">Mod</span> + <span class="kbd">⏎</span>
                       </td>
                     </tr>
                     <tr class="border-t">
                       <td class="py-1 pr-12">
                         Top-level form
                       </td>
                       <td class="py-1 text-right">
-                        <span class="kbd alt">Alt</span> + <span class="kbd">⇧</span> + <span class="kbd">⏎</span>
+                        <span class="kbd alt">Mod</span> + <span class="kbd">⇧</span> + <span class="kbd">⏎</span>
                       </td>
                     </tr>
                     <tr class="border-t">
                       <td class="py-1 pr-12">
                         Cell
                       </td>
                       <td class="py-1 text-right">
-                        <span class="kbd mod">Mod</span> + <span class="kbd">⏎</span>
+                        <span class="kbd mod">Alt</span> + <span class="kbd">⏎</span>
                       </td>
                     </tr>
                   </tbody>

src/nextjournal/clojure_mode/extensions/eval_region.cljs

@@ -137,7 +137,7 @@
                                :keyup   handle-key-event})]))
 
 (defn extension [{:keys [modifier]
-                  :or   {modifier "Alt"}}]
+                  :or   {modifier "Meta"}}]
   #js[(modifier-extension modifier)
       region-field
       (.. EditorView -decorations (from region-field))])