mathquill_leptos/
components.rs

1use std::ops::Deref as _;
2
3use crate::prelude::*;
4
5#[component]
6pub fn MathQuillField(latex: RwSignal<String>) -> impl IntoView {
7  let sig = latex;
8  let node_ref = NodeRef::<leptos::html::Span>::new();
9  let handlers_drop_handle = RwSignal::new_local(None);
10
11  node_ref.on_load(move |el: web_sys::HtmlSpanElement| {
12    let mathquill = mathquill_js::MathQuill::get_global_interface();
13
14    let mut config = mathquill_js::Config::default();
15    config.handlers().on_edit_field(move || {
16      let mathquill = mathquill_js::MathQuill::get_global_interface();
17      let field = mathquill
18        .get_field(&node_ref.get_untracked().unwrap().into())
19        .expect("Not to be unmounted at this point, since mathquill is calling us");
20      let latex = field.latex();
21      // on_edit.run(latex);
22      sig.set(latex);
23    });
24
25    let field = mathquill.mount_field(&el, &config);
26
27    handlers_drop_handle.set(Some(config));
28
29    field.set_latex(&latex.get_untracked());
30    let current = field.latex();
31    info!(?current, "MathQuillField mounted");
32  });
33
34  view! {
35      <span class="mathquill" node_ref=node_ref />
36  }
37}
38
39#[component]
40pub fn MathQuillStatic(#[prop(into)] latex: Signal<String>) -> impl IntoView {
41  let node_ref = NodeRef::<leptos::html::Span>::new();
42
43  node_ref.on_load(move |el: web_sys::HtmlSpanElement| {
44    let mathquill = mathquill_js::MathQuill::get_global_interface();
45    let field = mathquill.mount_static_field(&el);
46    // sets initial value
47    field.set_latex(&latex.read_untracked());
48
49    // set latex on signal change
50    Effect::new(move || {
51      let node_ref = node_ref.read();
52      let Some(node_ref) = node_ref.deref() else {
53        warn!("Latex signal changed on non-existant el");
54        return;
55      };
56      let mathquill = mathquill_js::MathQuill::get_global_interface();
57      let Some(field) = mathquill.get_static_field(node_ref) else {
58        warn!(?node_ref, "MathQuillStatic field not found");
59        return;
60      };
61      let new = latex.read();
62      field.set_latex(&new);
63    });
64  });
65
66  view! {
67      <span class="mathquill" node_ref=node_ref />
68  }
69}
mathquill_leptos/components.rs

mathquill_leptos/
components.rs
