wip

demo/nextjournal/clerk/markdown_editor.cljs

@@ -1,10 +1,69 @@
 (ns nextjournal.clerk.markdown-editor
   (:require
    ["katex" :as katex]
+   ["@codemirror/language" :refer [defaultHighlightStyle syntaxHighlighting LanguageSupport]]
+   ["@codemirror/state" :refer [EditorState]]
+   ["@codemirror/view" :refer [EditorView keymap]]
+   ["@codemirror/lang-markdown" :as MD :refer [markdown markdownLanguage]]
+   ["react" :as react]
    [nextjournal.markdown :as md]
    [nextjournal.clerk.viewer :as v]
    [nextjournal.clerk.render.hooks :as hooks]
-   [nextjournal.markdown.transform :as md.transform]))
+   [nextjournal.markdown.transform :as md.transform]
+   [nextjournal.clojure-mode :as clojure-mode]
+   [nextjournal.clerk.render.code :as code]
+   [reagent.core :as r]
+   [clojure.string :as str]
+   [sci.ctx-store]
+   [nextjournal.clerk.render :as render]))
+
+(def theme #js {"&.cm-editor.cm-focused" #js {:outline "none"}
+                ".cm-activeLine" #js {:background-color "rgb(226 232 240)"}
+                ".cm-line" #js {:padding "0"
+                                :line-height "1.6"
+                                :font-size "15px"
+                                :font-family "\"Fira Mono\", monospace"}})
+
+;; syntax (an LRParser) + support (a set of extensions)
+(def clojure-lang (LanguageSupport. (clojure-mode/syntax)
+                                    (.. clojure-mode/default-extensions (slice 1))))
+(defn on-change-ext [f]
+  (.. EditorState -transactionExtender
+      (of (fn [^js tr]
+            (when (.-docChanged tr) (f (.. tr -state sliceDoc)))
+            #js {}))))
+
+
+
+(defn eval-string [source]
+  (when-some [code (not-empty (str/trim source))]
+    (try {:result  #_:clj-kondo/ignore (load-string source)}
+         (catch js/Error e
+           {:error (str (.-message e))}))))
+
+(defn editor [{:keys [doc lang editable? on-change] :or {editable? true}}]
+  (let [!editor-el (hooks/use-ref)
+        extensions (into-array (cond-> [(syntaxHighlighting defaultHighlightStyle)
+                                        (.. EditorState -allowMultipleSelections (of editable?))
+                                        #_(foldGutter)
+                                        (.. EditorView -editable (of editable?))
+                                        (.of keymap clojure-mode/complete-keymap)
+                                        (.theme EditorView theme)]
+
+                                 #_#_#_#_#_#_on-change
+                                 (conj (on-change-ext on-change))
+
+                                 (= :clojure lang)
+                                 (conj (.-extension clojure-lang))
+
+                                 (= :markdown lang)
+                                 (conj (markdown #js {:base markdownLanguage
+                                                      :defaultCodeLanguage clojure-lang}))))]
+    (hooks/use-effect
+     (fn []
+       (let [editor-view* (code/make-view (code/make-state doc extensions) @!editor-el)]
+         #(.destroy editor-view*))) [doc])
+    [:div {:ref !editor-el}]))
 
 (defn clojure-editor [{:as opts :keys [doc]}]
   (let [!result (hooks/use-state nil)]
@@ -17,7 +76,7 @@
         (cond
           error [:div.red error]
           (react/isValidElement result) result
-          'else [render/inspect result]))]]))
+          :else [render/inspect result]))]]))
 
 (def renderers
   (assoc md.transform/default-hiccup-renderers
@@ -29,7 +88,12 @@
          :block-formula (fn [_ctx node]
                           [:div {:dangerouslySetInnerHTML {:__html (.renderToString katex (md.transform/->text node) #js {:displayMode true})}}])))
 
-(defn editor [_]
+(defn inspect-expanded [x]
+  (r/with-let [expanded-at (r/atom {:hover-path [] :prompt-multi-expand? false})]
+    (render/inspect-presented {:!expanded-at expanded-at}
+                              (v/present x))))
+
+(defn markdown-editor [_]
   (let [init-text "# 👋 Hello Markdown
 
 ```clojure id=xxyyzzww
@@ -52,5 +116,4 @@
                                    [:div.m-2.p-2.overflow-x-scroll
                                     [inspect-expanded (:hiccup @!state)]]
                                    [:div.m-2.p-2.bg-slate-50.viewer-markdown
-                                    [v/html (:hiccup @!state)]]])
-  )
+                                    [v/html (:hiccup @!state)]]]))

notebooks/markdown_try.clj

@@ -5,7 +5,7 @@
 
 (def markdown-editor
   {:require-cljs true
-   :render-fn 'nextjournal.clerk.markdown-editor/editor
+   :render-fn 'nextjournal.clerk.markdown-editor/markdown-editor
    ::clerk/width :full
    ::clerk/visibility {:code :fold}})
 

src/nextjournal/clerk/cljs_libs.clj

@@ -93,6 +93,7 @@
   (doseq [ns nss]
     (when-not (or (contains? @already-loaded-sci-namespaces ns)
                   (contains? (:loaded-libs @state) ns))
+      (prn :ns ns)
       (when-let [cljs-file (ns->resource ns)]
         (let [ns-decl (with-open [^java.io.Closeable rdr (e/reader (io/reader cljs-file))]
                         (read-ns-decl rdr))