Install Katex via NPM

Author: cpeel

package-lock.json

@@ -50,6 +50,7 @@
     "d3": "^6.6.2",
     "gettext.js": "^2.0.3",
     "jquery": "^3.5.1",
+    "katex": "^0.16.22",
     "quill": "^2.0.3",
     "resumablejs": "^1.1.0"
   },

package.json

@@ -457,6 +457,43 @@ export function makeProofTextWidget(container, projectId, userSettings, language
     const qHide = new Parchment.StyleAttributor("display", "display", config);
     Quill.register(qHide);
 
+    const Embed = Quill.import("blots/embed");
+    class DFormula extends Embed {
+        static blotName = "dformula";
+        static className = "ql-dformula";
+        static tagName = "SPAN";
+
+        static create(value) {
+            // @ts-expect-error
+            if (window.katex == null) {
+                throw new Error("Formula module requires KaTeX.");
+            }
+            const node = super.create(value);
+            if (typeof value === "string") {
+                // @ts-expect-error
+                window.katex.render(value, node, {
+                    throwOnError: false,
+                    errorColor: "#f00",
+                    displayMode: true,
+                    // output: "mathml",
+                });
+                node.setAttribute("data-value", value);
+            }
+            return node;
+        }
+
+        static value(domNode) {
+            return domNode.getAttribute("data-value");
+        }
+
+        html() {
+            const { dformula } = this.value();
+            return `<span>${dformula}</span>`;
+        }
+    }
+
+    Quill.register(DFormula);
+
     const { setup, reLayout, setText, quill, editBox, controlBar, setParaSpacing, qlEditor, extraSettings, onDoneSettings } = makeTextWidget(
         container,
         userSettings,

scripts/text_widget.js

@@ -18,10 +18,12 @@
     ],
     "js_files" => [
         "$code_url/scripts/misc.js",
+        "$code_url/node_modules/katex/dist/katex.min.js",
         "$code_url/node_modules/quill/dist/quill.js",
     ],
     "css_files" => [
         "$code_url/styles/struct.css",
+        "$code_url/node_modules/katex/dist/katex.min.css",
         "$code_url/node_modules/quill/dist/quill.core.css",
     ],
     "body_attributes" => 'class="no-margin overflow-hidden fix-full"',