chore: update MathJax widget in Wagtail admin

Author: SolarLiner

codeanon/templates/base.html

@@ -58,6 +58,8 @@
 {% endblock %}
 {# Global javascript #}
 <script type="text/javascript" src="{% static 'js/codeanon.js' %}"></script>
+<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
+<script src="{% static "wagtailmath/js/wagtailmath.public.js" %}"></script>
 {% block extra_js %}
     {# Override this in templates to add extra javascript #}
 {% endblock %}

contrib/wagtailmath/blocks.py

@@ -1,11 +1,11 @@
 import logging
 
-from django.forms import Widget, CharField, forms
-from django.template.loader import render_to_string
+from django.forms import Widget, CharField
 from django.templatetags.static import static
 from django.utils.functional import lazy
-from django.utils.safestring import mark_safe
 from wagtail.core.blocks import FieldBlock
+from wagtail.core.telepath import register
+from wagtail.core.widget_adapters import WidgetAdapter
 
 static_lazy = lazy(static, str)
 
@@ -16,7 +16,6 @@ class MathJaxWidget(Widget):
     class Media:
         js = (
             "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js",
-            static_lazy("wagtailmath/js/wagtailmath.js")
         )
 
     template_name = "wagtailmath/mathjax_widget.html"
@@ -33,9 +32,18 @@ def get_context(self, name, value, attrs):
             }
         }
 
-    def render(self, name, value, attrs=None, renderer=None):
-        context = self.get_context(name, value, attrs)
-        return mark_safe(render_to_string(self.template_name, context))
+
+class MathJaxAdapter(WidgetAdapter):
+    js_constructor = "contrib.wagtailmath.blocks.MathJaxWidget"
+
+    def js_args(self, _: MathJaxWidget):
+        return []
+
+    class Media:
+        js = [static_lazy("wagtailmath/js/wagtailmath.js")]
+
+
+register(MathJaxAdapter(), MathJaxWidget)
 
 
 class MathjaxBlock(FieldBlock):

contrib/wagtailmath/static/wagtailmath/js/wagtailmath.js

@@ -19,3 +19,61 @@ class Preview {
         }, 150);
     }
 }
+
+/** @typedef {{idForLabel: string, getValue(): string, getState(): unknown, setState(state: unknown): void, focus(soft: bool): void}} BoundWidget */
+
+class MathJaxWidget {
+    /**
+     * @param {string} idForLabel
+     * @param {string} initialValue
+     */
+    constructor(idForLabel, initialValue) {
+        this.idForLabel = idForLabel;
+        this.initialValue = initialValue;
+    }
+
+    /**
+     * @param {HTMLElement} container
+     * @param {string} name
+     * @param {string} id
+     * @param {unknown} initialState
+     * @returns {BoundWidget}
+     */
+    render(container, name, id, initialState) {
+        const inputEl = document.createElement("input");
+        const displayEl = document.createElement("div");
+        const update = () => displayEl.innerHTML = MathJax.tex2svg(inputEl.value).outerHTML;
+
+        if(this.initialValue)
+            inputEl.value = this.initialValue;
+        inputEl.id = this.idForLabel;
+        inputEl.name = name;
+        displayEl.attributes.cols = "50";
+        displayEl.attributes.rows = "10";
+        displayEl.classList.add("richtext");
+        displayEl.id = "mathjax-preview-"+id;
+
+        update();
+
+        inputEl.addEventListener("input", update);
+
+        container.append(inputEl, displayEl);
+
+        return {
+            idForLabel: this.idForLabel,
+            getValue() {
+                return inputEl.value;
+            },
+            getState() {
+                return initialState;
+            },
+            setState() {
+            },
+            focus() {
+                inputEl.focus();
+            }
+        }
+    }
+}
+
+window.telepath.register("contrib.wagtailmath.blocks.MathJaxWidget", MathJaxWidget);