Working notebook for docs, initial component

dev/mathlive/clerk_ui.cljc

@@ -1,6 +1,6 @@
 (ns mathlive.clerk-ui
   (:require #?(:cljs [mathlive.core])
-            #?(:clj [nextjournal.clerk :as clerk])
+            #?(:clj  [nextjournal.clerk :as clerk])
             #?(:cljs [nextjournal.clerk.sci-viewer :as sv])
             #?(:cljs [sci.core :as sci]))
   #?(:cljs
@@ -15,9 +15,10 @@
    (swap! sv/!sci-ctx
           sci/merge-opts
           {:classes    {'Math js/Math}
-           :aliases    {'jsx 'mathlive.core}
+           :aliases    {'ml 'mathlive.core}
            :namespaces {'mathlive.core
-                        (sci/copy-ns mathlive.core (sci/create-ns 'mathlive.core))}}))
+                        (sci/copy-ns mathlive.core
+                                     (sci/create-ns 'mathlive.core))}}))
 
 ;; ## Example Macro
 
@@ -31,4 +32,5 @@
                           (if (vector? result#)
                             result#
                             [v/inspect result#]))))}
+        {}
         {})))

dev/mathlive/notebook.clj

@@ -1,14 +1,9 @@
 ;; # Mathlive.cljs
 ;;
-;; _alpha - [feedback welcome](https://github.com/mentat-collective/mathlive.cljs)_
+;; _Generated from [this notebook](https://github.com/mentat-collective/mathlive.cljs/blob/$GIT_SHA/dev/mathlive/notebook.clj)._
 ;;
-;; Dynamic geometry!
-;;
-;; ## Features
-;;
-;; 1. First feature!
-;;
-;; 2. Second feature.
+;; Reagent component wrapping the `math-field` web component from
+;; the [Mathlive](https://github.com/arnog/mathlive) JS library.
 ;;
 ;; ## Usage
 ;;
@@ -18,11 +13,9 @@
 ;;
 ;; ;; namespace
 ;; (ns my-app
-;;   (:require [mathlive.core :as jsx]
+;;   (:require [mathlive.core :as ml]
 ;;             [reagent.core :as reagent]))
 ;;```
-;;
-;; Hi!
 
 ^#:nextjournal.clerk
 {:toc true
@@ -31,7 +24,74 @@
 (ns mathlive.notebook
   (:require [mathlive.clerk-ui :refer [cljs]]))
 
+^{:nextjournal.clerk/visibility
+  {:code :hide}}
+(cljs
+ ;; These are some styles.
+ [:style "
+math-field {
+  font-size: 24px;
+  border-radius: 4px;
+  border: .5px solid;
+  padding: 8px;
+}
+math-field:focus-within {
+  outline: Highlight auto 1px;
+  outline: -webkit-focus-ring-color auto 1px
+}"])
+
 ;; ## Demo
+;;
+;; Let's get some shared state:
 
 (cljs
- {:face "cake"})
+ (defonce state
+   (reagent/atom {:text "1+x"})))
+
+;; Then a mathfield, and [note this
+;; page](https://cortexjs.io/mathlive/reference/commands/) for tex
+;; and [keybindings](https://cortexjs.io/mathlive/reference/keybindings/).
+
+(cljs
+ [ml/Mathfield
+  {:options {:virtualKeyboardMode "manual"}
+   :value   (:text @state)
+   :on-change
+   (fn [x]
+     (swap! state assoc
+            :text     (.getValue (.-target x))
+            :mathjson (ml/->math-json (.-target x))))}])
+
+;; On every change the `Mathfield` mirrors its value into `state`. We can render
+;; the value stored under `:text` as TeX using Clerk:
+
+(cljs
+ (v/tex (:text @state)))
+
+;; We can also pull the expression out as MathJSON:
+
+(cljs
+ (v/code (:mathjson @state)))
+
+;; ## Controlled Mathfield
+;;
+;; This is the demo from ["changing the
+;; content"](https://cortexjs.io/mathlive/guides/interacting/#changing-the-content-of-a-mathfield).
+
+(cljs
+ (reagent/with-let
+   [text (reagent/atom
+          "x=\\frac{-b\\pm\\sqrt{b^2-4ac}}{2a}")
+    on-change #(reset! text (.. % -target -value))]
+   [:<>
+    [:h4 "Math Field"]
+    [ml/Mathfield
+     {:value @text
+      :on-change on-change}]
+    [:h4 "Text Area"]
+    [:textarea
+     {:style {:width "100%" :border "0.5px solid"}
+      :value @text
+      :on-change on-change}]]))
+
+;; More coming soon!

dev/user.clj

@@ -1,7 +1,27 @@
 (ns user
-  (:require [nextjournal.clerk :as clerk]
+  (:require [hiccup.page :as hiccup]
+            [nextjournal.clerk :as clerk]
             [nextjournal.clerk.config :as config]
-            [nextjournal.clerk.viewer]))
+            [nextjournal.clerk.view]))
+
+(defn rebind [^clojure.lang.Var v f]
+  (let [old (.getRawRoot v)]
+    (.bindRoot v (f old))))
+
+;; my attempt at injecting the CSS for my viewers...
+(defonce _ignore
+  (rebind
+   #'nextjournal.clerk.view/include-viewer-css
+   (fn [old]
+     (fn []
+       (concat
+        (list
+         (hiccup/include-css
+          "https://unpkg.com/mathlive@0.83.0/dist/mathlive-static.css")
+         (hiccup/include-css
+          "https://unpkg.com/mathlive@0.83.0/dist/mathlive-fonts.css"))
+        (old))))))
+
 
 (defn start! []
   (swap! config/!resource->url merge {"/js/viewer.js" "http://localhost:8765/js/main.js"})

package.json

@@ -2,7 +2,7 @@
   "name": "mathlive.cljs",
   "version": "0.0.1",
   "dependencies": {
-    "mathlive": "^0.83.0"
+    "@mentatcollective/mathlive": "^0.85.0"
   },
   "devDependencies": {
     "@babel/core": "^7.17.9",

src/deps.cljs

@@ -1,2 +1,2 @@
 {:npm-deps
- {"mathlive" "^0.83.0"}}
+ {"@mentatcollective/mathlive" "^0.85.0"}}