simon/mw-scittle
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix codemirror

Browse source
This commit is contained in:
Michiel Borkent 2022-10-10 15:28:42 +02:00
parent a1c4464fdc
commit c9741b235e
2 changed files with 9 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

54
resources/public/codemirror.cljs
View file

@ -1,54 +0,0 @@
(require '[clojure.string :as str])
(declare cm)
(defn eval-me []
(js/scittle.core.eval_string (-> cm .-state .-doc .toString)))
(def extension
(.of js/cv.keymap
(clj->js [{:key "Mod-Enter"
:run (fn []
(prn :hoeooo)
(eval-me))}
#_{:key (str modifier "-Enter")
:shift (partial eval-top-level on-result)
:run (partial eval-at-cursor on-result)}])))
(def cm
(let [doc (str/trim "
(require '[reagent.core :as r]
'[reagent.dom :as rdom])
(defonce state (r/atom {:clicks 0}))
(defn my-component []
[:div
[:p \"Clicks: \" (:clicks @state)]
[:p [:button {:on-click #(swap! state update :clicks inc)}
\"Click me!\"]]])
(rdom/render [my-component] (.getElementById js/document \"reagent\"))
")]
(js/cm.EditorView. #js {:doc doc
:extensions #js [js/cm.basicSetup, (js/lc.clojure), (.highest js/cs.Prec extension)]
:parent (js/document.querySelector "#app")
#_#_:dispatch (fn [tr] (-> cm (.update #js [tr])) (eval-me))
})))
(set! (.-eval_me js/globalThis) eval-me)
(set! (.-cm_instance js/globalThis) cm)
(defn linux? []
(some? (re-find #"(Linux)|(X11)" js/navigator.userAgent)))
(defn mac? []
(and (not (linux?))
(some? (re-find #"(Mac)|(iPhone)|(iPad)|(iPod)" js/navigator.platform))))
(let [elt (js/document.getElementById "evalMe")
txt (.-innerText elt)
mod-symbol (if (mac?)
"⌘"
"⌃")
txt (str txt " " mod-symbol"-⏎")]
(set! (.-innerHTML elt) txt))
(eval-me)

14
resources/public/codemirror.html
View file

@ -29,14 +29,18 @@
} }
</script> </script>
<script type="module" type="application/javascript"> <script type="module" type="application/javascript">
globalThis.cm = await import('codemirror'); import * as cm from 'codemirror';
globalThis.lc = await import('@nextjournal/lang-clojure'); import * as lc from '@nextjournal/lang-clojure'
globalThis.cv = await import('@codemirror/view'); import * as cv from '@codemirror/view';
globalThis.cs = await import('@codemirror/state') import * as cs from '@codemirror/state';
globalThis.cm = cm;
globalThis.lc = lc;
globalThis.cv = cv;
globalThis.cs = cs;
scittle.core.eval_script_tags(); scittle.core.eval_script_tags();
</script> </script>
<script type="application/x-scittle" src="codemirror.cljs"></script> <script type="application/x-scittle" src="cljs/codemirror.cljs"></script>
</head> </head>
<body> <body>
<h1>Using <a href="https://www.npmjs.com/package/@nextjournal/lang-clojure">@nextjournal/lang-clojure</a> directly from npm in HTML!</h1> <h1>Using <a href="https://www.npmjs.com/package/@nextjournal/lang-clojure">@nextjournal/lang-clojure</a> directly from npm in HTML!</h1>