eval-at-point for ClojureScript

mk · mhuebert · philippamarkovics · nextjournal-ci · commit 31657f5e4565 · 2020-12-21T14:22:03.000Z
* Command/Ctrl to temporarily select form at cursor
* tweak how temp-selections behave around symbols and edges
* paste should insert, not replace, temporary selections
* cleanup
* support backspace with temp selection
* fix paste insertion
* .gitignore
* use keymap for paste-insert
* initial setup of eval with sci and temp-selections
* eval top-level
* Option + Enter for eval-at-point/run selection
* Adjust keybindings for demo
* Alt-Shift-Enter to eval top level
* temp-toplevel
* bring back eval-cell
* keep temp selection after grow/shrink, left/right moves cursor before/after toplevel
* re-use sci context across invocations
* top-level tempselection supports backspace
* render multiple, smaller cells
* formatting of demo cells
* temp-selections as decorations
* cleanup
* Upgrade sci to 0.2.0
* Change temp cm selectin color to a lighter blue

Co-authored-by: Matthew Huebert &lt;mhuebert@gmail.com&gt;
Co-authored-by: Matthew Huebert &lt;mhuebert@gmail.com&gt;
Co-authored-by: Matthew Huebert &lt;mhuebert@gmail.com&gt;
Co-authored-by: Matthew Huebert &lt;mhuebert@gmail.com&gt;
Co-authored-by: Matthew Huebert &lt;mhuebert@gmail.com&gt;
Co-authored-by: Matthew Huebert &lt;mhuebert@gmail.com&gt;
Co-authored-by: Matthew Huebert &lt;mhuebert@gmail.com&gt;
Co-authored-by: Matthew Huebert &lt;mhuebert@gmail.com&gt;
Co-authored-by: Matthew Huebert &lt;mhuebert@gmail.com&gt;
Co-authored-by: Matthew Huebert &lt;mhuebert@gmail.com&gt;
Co-authored-by: Matthew Huebert &lt;mhuebert@gmail.com&gt;
Co-authored-by: Matthew Huebert &lt;mhuebert@gmail.com&gt;
Co-authored-by: Matthew Huebert &lt;mhuebert@gmail.com&gt;
Co-authored-by: Matthew Huebert &lt;mhuebert@gmail.com&gt;
Co-authored-by: Matthew Huebert &lt;mhuebert@gmail.com&gt;
Co-authored-by: Matthew Huebert &lt;mhuebert@gmail.com&gt;
Co-authored-by: Matthew Huebert &lt;mhuebert@gmail.com&gt;
Co-authored-by: Matthew Huebert &lt;mhuebert@gmail.com&gt;
Co-authored-by: Matthew Huebert &lt;mhuebert@gmail.com&gt;
Co-authored-by: Philipp Markovics &lt;philipp@markovics.com&gt;
diff --git a/.github/workflows/clojure.yaml b/.github/workflows/clojure.yaml
@@ -54,7 +54,7 @@ jobs:
         run: yarn
 
       - name: Shadow-cljs
-        run: yarn shadow-cljs release app
+        run: yarn build
 
       - name: Deploy 🚀
         uses: JamesIves/github-pages-deploy-action@3.7.1
diff --git a/.gitignore b/.gitignore
@@ -3,3 +3,4 @@
 public/js
 node_modules
 public/test
+*.iml
diff --git a/deps.edn b/deps.edn
@@ -2,4 +2,8 @@
          "src/test"]
  :deps {applied-science/js-interop {:mvn/version "0.2.5"}
         org.clojure/clojurescript {:mvn/version "1.10.773"}
-        thheller/shadow-cljs {:mvn/version "2.11.1"}}}
+        thheller/shadow-cljs {:mvn/version "2.11.1"}}
+ :aliases
+ {:demo {:extra-deps {borkdude/sci {:mvn/version "0.2.0"}
+                      reagent/reagent {:mvn/version "0.9.1"}}
+         :extra-paths ["src/demo"]}}}
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
         "w3c-keyname": "^2.2.4"
     },
     "scripts": {
-        "watch": "shadow-cljs watch app test"
+        "watch": "shadow-cljs -A:demo watch demo test",
+        "build": "shadow-cljs -A:demo release demo"
     }
 }
diff --git a/public/index.html b/public/index.html
@@ -13,8 +13,8 @@
   </head>
   <body>
     <div class="landing-page">
-      <div class="hero">
-        <div class="lp-block">
+      <div class="hero pb-4">
+        <div>
           <h1>Clojure/Script mode for <a href="https://codemirror.net/6/">codemirror.next</a></h1>
           <p>
             Enable a decent Clojure/Script editor experience in the browser.
@@ -32,9 +32,9 @@ <h1>Clojure/Script mode for <a href="https://codemirror.net/6/">codemirror.next<
         </div>
       </div>
     </div>
-    <div class="bg-alt pb-12 px-6">
+    <div class="bg-alt pb-12 px-6 pt-3">
       <div class="max-w-4xl mx-auto">
-        <div id="editor" class="mt-4 rounded-lg border mb-0 text-sm monospace overflow-auto relative shadow-lg bg-white" style="max-height: 500px; top: -2.5rem;"></div>
+        <div id="editor"></div>
       </div>
       <div class="max-w-4xl mx-auto">
         <div id="docs" class="border-t-0 overflow-auto text-md p-0 m-0 mt-4 sans-serif"></div>
diff --git a/shadow-cljs.edn b/shadow-cljs.edn
@@ -2,11 +2,11 @@
  :dev-http {8002 "public"
             8001 "public/test"}
  :nrepl {:port 9000}
- :builds {:app {:compiler-options {:output-feature-set :es8}
-                :target :browser
-                :output-dir "public/js"
-                :asset-path "js"
-                :modules {:main {:init-fn codemirror-next.clojure.demo/render}}}
+ :builds {:demo {:compiler-options {:output-feature-set :es8}
+                 :target :browser
+                 :output-dir "public/js"
+                 :asset-path "js"
+                 :modules {:main {:init-fn codemirror-next.clojure.demo/render}}}
           :test {:compiler-options {:output-feature-set :es8}
                  :target :browser-test
                  :test-dir "public/test"
diff --git a/src/demo/codemirror_next/clojure/demo.cljs b/src/demo/codemirror_next/clojure/demo.cljs
@@ -12,6 +12,7 @@
             [applied-science.js-interop :as j]
             [clojure.string :as str]
             [codemirror-next.clojure :as cm-clj]
+            [codemirror-next.clojure.demo.sci :as sci]
             [codemirror-next.clojure.extensions.close-brackets :as close-brackets]
             [codemirror-next.clojure.extensions.formatting :as format]
             [codemirror-next.clojure.extensions.selection-history :as sel-history]
@@ -20,20 +21,25 @@
             [codemirror-next.clojure.node :as n]
             [codemirror-next.clojure.selections :as sel]
             [codemirror-next.test-utils :as test-utils]
-            [shadow.resource :as rc])
-  (:require-macros [codemirror-next.build :as build]))
+            [reagent.core :as r]
+            [reagent.dom :as rdom]
+            [shadow.resource :as rc]))
 
 (def theme
   (.theme EditorView
-          (j/lit {:$content {:white-space "pre-wrap"}
+          (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"}
-           ;; only show cursor when focused
+                  :$gutters {:background "transparent"
+                             :border "none"}
+                  :$gutterElement {:margin-left "5px"}
+                  ;; only show cursor when focused
                   :$cursor {:visibility "hidden"}
                   "$$focused $cursor" {:visibility "visible"}})))
 
@@ -42,7 +48,7 @@
                         (history)
                         highlight/defaultHighlightStyle
                         (view/drawSelection)
-                        (lineNumbers)
+                        ;(lineNumbers)
                         (fold/foldGutter)
                         (.. EditorState -allowMultipleSelections (of true))
                         (if false
@@ -53,45 +59,39 @@
                         (view/keymap cm-clj/complete-keymap)
                         (view/keymap historyKeymap)])
 
-(defn sample-text []
-  (str "(defn lezer-clojure
-  \"This is a showcase for `lezer-clojure`, a grammar for Clojure/Script to enable a decent editor experience in the browser.\"
-  {:added \"0.1\"}
-  [demo]
-  nil ;; nil
-  (+ 1 1.0 1/5 1E3 042 +042 -042) ;; numbers
-  :hi :hi/ho ::ho :*+!-_? :abc:def:ghi ;; keywords
-  true false ;; booleans
-  :hello #_ :ignored ;; ignore next form
-  #\"[A-Z]\" ;; regex
-  ^{:meta/data 'is-data} 'too
-  (if (test? <demo>)
-    (inc demo)|
-    (dec demo)))
-  #
-    [ ]
-    #\"a\""
-       \newline
-       "a b(c|)d e"
-       )
+(defn editor [source]
+  (r/with-let [!view (atom nil)
+               last-result (r/atom (sci/eval-string source))
+               mount! (fn [el]
+                        (when el
+                          (reset! !view (new EditorView
+                                             (j/obj :state
+                                                    (test-utils/make-state
+                                                     #js[extensions
+                                                         (sci/extension {:modifier  "Alt"
+                                                                         :on-result (partial reset! last-result)})] source)
+                                                    :parent el)))))]
+    [:div
+     [:div {:class "mt-4 rounded-md border mb-0 text-sm monospace overflow-auto relative shadow-md bg-white"
+            :ref mount!}]
+     [:div.mt-3.mv-4.pl-6 {:style {:white-space "pre-wrap" :font-family "monospace"}}
+      (prn-str @last-result)]]
+    (finally
+     (j/call @!view :destroy))))
 
-  )
-
-(defonce prev-views (atom []))
-
-(defn mount-editor! [dom-selector initial-value]
-  (let [state (test-utils/make-state extensions initial-value)]
-    (->> (j/obj :state state :parent (js/document.querySelector dom-selector))
-         (new EditorView)
-         (swap! prev-views conj))))
+(defn samples []
+  (into [:<>]
+        (for [source ["(rand-nth (range 1000))"
+                      "(defn greeting [first-name] \n  (str \"Hello, \" first-name))"
+                      "(greeting \"fido\")"]]
+          [editor source])))
 
 (defn tag [tag & s]
   (let [[opts s] (if (map? (first s)) [(first s) (rest s)] [nil s])]
     (str "<" (name tag) (reduce-kv #(str %1 " " (name %2) "=" "'" %3 "'") "" opts) ">" (apply str s) "</" (name tag) ">")))
 
 (defn ^:dev/after-load render []
-  (doseq [v @prev-views] (j/call v :destroy))
-  (mount-editor! "#editor" (sample-text))
+  (rdom/render [samples] (js/document.getElementById "editor"))
   (j/assoc! (js/document.getElementById "docs")
             :innerHTML
             (tag :div
@@ -112,15 +112,11 @@
                                                  (tag :td {:class "px-3 py-1 align-top monospace text-sm"}
                                                       (str "Shift-" key))
                                                  (tag :td {:class "px-3 py-1 align-top"} ""))))) ""))
-                      "</table>")))
-  #_(j/assoc! (js/document.getElementById "readme")
-            :innerHTML
-            (tag :pre {:class "mt-4"} (build/slurp "README.md")))
-  (.focus (last @prev-views)))
+                      "</table>"))))
 
 
 (comment
-  (let [s "#(a )"
-        state (test-utils/make-state default-extensions s)
-        tree (n/tree state)]
-    ))
+ (let [s "#(a )"
+       state (test-utils/make-state default-extensions s)
+       tree (n/tree state)]
+   ))
diff --git a/src/demo/codemirror_next/clojure/demo/sci.cljs b/src/demo/codemirror_next/clojure/demo/sci.cljs
@@ -0,0 +1,36 @@
+(ns codemirror-next.clojure.demo.sci
+  (:require ["@codemirror/next/view" :as view]
+            [applied-science.js-interop :as j]
+            [sci.core :as sci]
+            [codemirror-next.clojure.node :as n]
+            [codemirror-next.clojure.extensions.temp-selection :as temp-selection]
+            [codemirror-next.clojure.util :as u]))
+
+(defonce context (sci/init {}))
+
+(defn eval-string [source]
+  (try (sci/eval-string* context source)
+       (catch js/Error e
+         (str e))))
+
+(j/defn eval-current-range [on-result ^:js {:as view :keys [state]}]
+  (some->> (temp-selection/current-string state)
+           (eval-string)
+           (on-result))
+  true)
+
+(j/defn eval-cell [on-result ^:js {:as view :keys [state]}]
+  (-> (str "(do " (.-doc state) " )")
+      (eval-string)
+      (on-result))
+  true)
+
+(defn extension [{:keys [modifier
+                         on-result]}]
+  (view/keymap
+   (j/lit
+    [{:key "Mod-Enter"
+      :run (partial eval-cell on-result)}
+     {:key (str modifier "-Enter")
+      :shift (partial eval-current-range on-result)
+      :run (partial eval-current-range on-result)}])))
diff --git a/src/main/codemirror_next/build.clj b/src/main/codemirror_next/build.clj
diff --git a/src/main/codemirror_next/clojure.cljs b/src/main/codemirror_next/clojure.cljs
@@ -12,6 +12,7 @@
             [codemirror-next.clojure.extensions.match-brackets :as match-brackets]
             [codemirror-next.clojure.extensions.formatting :as format]
             [codemirror-next.clojure.extensions.selection-history :as sel-history]
+            [codemirror-next.clojure.extensions.temp-selection :as temp-selection]
             [codemirror-next.clojure.keymap :as keymap]
             [codemirror-next.clojure.node :as n]
             [codemirror-next.clojure.selections :as sel]
@@ -77,7 +78,8 @@
       (match-brackets/extension)
       (sel-history/extension)
       (format/ext-format-changed-lines)
-      (.-lineWrapping EditorView)])
+      (.-lineWrapping EditorView)
+      (temp-selection/as-decoration {:modifier "Alt"})])
 
 (comment
 
diff --git a/src/main/codemirror_next/clojure/commands.cljs b/src/main/codemirror_next/clojure/commands.cljs
@@ -118,50 +118,6 @@
                       1 (n/balanced-range state from (nav-position state to dir))
                       -1 (n/balanced-range state (nav-position state from dir) to)))})))))
 
-(defn nearest-touching [^js state pos dir]
-  (let [L (some-> (n/tree state pos -1)
-                  (u/guard (j/fn [^:js {:keys [to]}] (= pos to))))
-        R (some-> (n/tree state pos 1)
-                  (u/guard (j/fn [^:js {:keys [from]}]
-                             (= pos from))))
-        mid (n/tree state pos)]
-    (case dir 1 (or (u/guard R (every-pred some? (complement n/right-edge?)))
-                    L
-                    R
-                    mid)
-              -1 (or (u/guard L (every-pred some? (complement n/left-edge?)))
-                     R
-                     L
-                     mid))))
-
-(j/defn grow-1 [state start end]
-  (let [node (nearest-touching state end -1)]
-    (->> (n/ancestors node)
-         (mapcat (juxt n/inner-span identity))              ;; include inner-spans
-         (cons node)
-         (filter (j/fn [^:js {a-start :from a-end :to}]
-                   (and (<= a-start start)
-                        (>= a-end end)
-                        (not (and (== a-start start)
-                                  (== a-end end))))))
-         first)))
-
-(defn selection-grow* [^js state]
-  (u/update-ranges state
-    (j/fn [^:js {:as range :keys [from to empty]}]
-      (if empty
-        {:range (or (some->> (nearest-touching state from -1)
-                             (n/balanced-range state))
-                    range)}
-        {:range (or (some->> (grow-1 state from to)
-                             n/range)
-                    range)}))))
-
-(defn selection-return* [^js state]
-  (if-let [selection (sel-history/last-selection state)]
-    (.update state #js{:selection selection})
-    (u/update-ranges state (fn [^js range] {:cursor (.-from range)}))))
-
 (defn balance-ranges [^js state]
   (u/update-ranges state
     (j/fn [^:js {:keys [from to empty]}]
@@ -290,8 +246,8 @@
 (def slurp-backward (view-command (slurp -1)))
 (def barf-forward (view-command (barf 1)))
 (def barf-backward (view-command (barf -1)))
-(def selection-grow (view-command selection-grow*))
-(def selection-return (view-command selection-return*))
+(def selection-grow (view-command sel-history/selection-grow*))
+(def selection-return (view-command sel-history/selection-return*))
 (def enter-and-indent (view-command enter-and-indent*))
 
 (def paredit-index
diff --git a/src/main/codemirror_next/clojure/extensions/formatting.cljs b/src/main/codemirror_next/clojure/extensions/formatting.cljs
@@ -150,15 +150,16 @@
         (format-line state context from content line-num #js[] true)))))
 
 (defn format-transaction [^js tr]
-  (let [origin (.annotation tr (.-userEvent Transaction))]
+  (let [origin (u/get-user-event-annotation tr)]
     (if-let [changes
              (case origin
                ("input"
                 "delete"
                 "keyboardselection"
                 "pointerselection"
                 "cut"
-                "noformat") nil
+                "noformat"
+                "tempselection") nil
                "format-selections" (format-selection (.-state tr))
                (let [state (.-state tr)
                      context (make-indent-context state)]
diff --git a/src/main/codemirror_next/clojure/extensions/selection_history.cljs b/src/main/codemirror_next/clojure/extensions/selection_history.cljs
diff --git a/src/main/codemirror_next/clojure/extensions/temp_selection.cljs b/src/main/codemirror_next/clojure/extensions/temp_selection.cljs
diff --git a/src/main/codemirror_next/clojure/node.cljs b/src/main/codemirror_next/clojure/node.cljs
diff --git a/src/main/codemirror_next/clojure/util.cljs b/src/main/codemirror_next/clojure/util.cljs

Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,7 @@`
`13`	`13`	`"w3c-keyname": "^2.2.4"`
`14`	`14`	`},`
`15`	`15`	`"scripts": {`
`16`		`- "watch": "shadow-cljs watch app test"`
	`16`	`+ "watch": "shadow-cljs -A:demo watch demo test",`
	`17`	`+ "build": "shadow-cljs -A:demo release demo"`
`17`	`18`	`}`
`18`	`19`	`}`