Clojurians Log v2
reagent
I have a reagent app that uses katex, and I'm having trouble including a formula as an SVG element
this is my tex rendering function
(defn tex [text]
[:span {:ref (fn [el]
(when el
(try
(katex/render text el (clj->js
{:throwOnError false}))
(catch :default e
(js/console.warn "Unexpected KaTeX error" e)
(aset el "innerHTML" text)))))}])it works if I put it in an h1 or whatever
but fails inside an SVG text element:
[:text {:transform (str "scale(1) translate(" (+ x 150) "," (+ y 150) ")")
:fill "#ffcc00"} (tex "z=z\\cdot 1")]I suppose that's not how refs work
This component will have its :ref changed on each re-render.
Don't know for sure whether it's the culprit or even a problem, but I'd turn the tex function in a form-2 component and use it as a proper component - i.e. [tex ...] instead of (tex ...).
ah, that makes sense
And if you need to react to the changes of text, you'll have to use a form-3 component and its :component-did-update lifecycle function.
Also, don't use aset for anything but arrays, as its docstring says.
For setting JS fields that aren't supposed to be renamed in an optimized build, use externs inference.
In this case, you can write (fn [^js el] ... (set! el -innerHTML text) ...).
oh ok, I just ripped that function from some other app so I don't fully understand how it works
Finally, for shallow objects and arrays with a static shape and keys you can replace (clj->js ...) with #js ..., i.e. here you can use #js {:throwOnError false} - that object will be created at compile time as opposed to transforming a CLJS map in run time.
But those two things have nothing to do with your issue at hand - just a general advice.
that's helpful, thanks
this is the basic thing I'm trying to do, so I can probably figure it out from that https://observablehq.com/@mcmcclur/overlay-katex-on-top-of-an-svg
I got it working! I used a foreignObject
"SynthWave math". :)