Rendering formulas in node descriptions is now possible.

Added KaTeX dependency.

knowledge-space.php

@@ -15,6 +15,7 @@ function ks_add_graph($atts = []): string
     $div = '<div id="knowledge-space-display"></div>'; // The id "3d-graph" indicates, that the javascript associated with this should automatically be executed
 
     ks_load_styles("frontend.css");
+    ks_load_styles("vendors.css");
     wp_enqueue_script("ks-runtime-js", plugins_url(get_script_path("runtime.js"), __FILE__), array('jquery'), false);
     wp_enqueue_script("ks-vendors-js", plugins_url(get_script_path("vendors.js"), __FILE__), array('jquery'), false);
     wp_enqueue_script("ks-display-js", plugins_url(get_script_path("frontend.js"), __FILE__), array('jquery'), false);
@@ -82,7 +83,7 @@ function ks_add_editor_dependencies()
 
 function ks_load_styles($styles_name) {
     $styles_path = 'build' . DIRECTORY_SEPARATOR . $GLOBALS['build'] . DIRECTORY_SEPARATOR . $styles_name;
-    wp_enqueue_style('ks-style', plugins_url($styles_path, __FILE__));
+    wp_enqueue_style('ks-style-' . $styles_name, plugins_url($styles_path, __FILE__));
 }
 
 

package.json

@@ -43,6 +43,7 @@
     "@babel/preset-react": "^7.16.7",
     "@babel/runtime": "^7.17.9",
     "@types/jquery": "^3.5.14",
+    "@types/katex": "^0.14.0",
     "@types/prop-types": "^15.7.5",
     "@types/react": "^18.0.6",
     "@types/react-dom": "^18.0.2",
@@ -70,6 +71,7 @@
   },
   "dependencies": {
     "jquery": "^3.6.0",
+    "katex": "^0.16.0",
     "prop-types": "^15.8.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",

src/display/components/nodeinfo/mediaarea.tsx

 import React from "react";
+import katex from "katex";
+import splitAtDelimiters from "./splitAtDelimiters";
 
+import "katex/dist/katex.css";
 import "./mediaarea.css";
 import References from "./references";
 
@@ -19,10 +22,37 @@ interface MediaAreaProps {
  * @constructor
  */
 function MediaArea({ description, image, video, references }: MediaAreaProps) {
+    const text = splitAtDelimiters(description, [
+        { left: "$$", right: "$$", display: true },
+        { left: "$", right: "$", display: true },
+    ]);
+
     return (
         <div className={"media-area"}>
             {image && <img src={image} />}
-            <p className={"media-area-description"}>{description}</p>
+            <p
+                className={"media-area-description"}
+                // dangerouslySetInnerHTML={{
+                //     __html: katex.renderToString(description, options),
+                // }}
+            >
+                {text.map((textObj, idx) => {
+                    if (textObj.type == "math") {
+                        return (
+                            <span
+                                key={idx}
+                                dangerouslySetInnerHTML={{
+                                    __html: katex.renderToString(textObj.data, {
+                                        output: "html",
+                                    }),
+                                }}
+                            ></span>
+                        );
+                    } else {
+                        return <span key={idx}>{textObj.data}</span>;
+                    }
+                })}
+            </p>
 
             {video && (
                 <video

src/display/components/nodeinfo/splitAtDelimiters.ts

+// Adapted from https://github.com/KaTeX/KaTeX/blob/main/contrib/auto-render/splitAtDelimiters.js
+
+interface Delimiter {
+    left: string;
+    right: string;
+    display: boolean;
+}
+
+interface TextElement {
+    type: string;
+    data: string;
+    rawData?: string;
+    display?: boolean;
+}
+
+const findEndOfMath = function (
+    delimiter: string,
+    text: string,
+    startIndex: number
+) {
+    let index = startIndex;
+    let braceLevel = 0;
+
+    const delimLength = delimiter.length;
+
+    while (index < text.length) {
+        const character = text[index];
+
+        if (
+            braceLevel <= 0 &&
+            text.slice(index, index + delimLength) === delimiter
+        ) {
+            return index;
+        } else if (character === "\\") {
+            index++;
+        } else if (character === "{") {
+            braceLevel++;
+        } else if (character === "}") {
+            braceLevel--;
+        }
+
+        index++;
+    }
+
+    return -1;
+};
+
+const escapeRegex = function (string: string) {
+    return string.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&");
+};
+
+const amsRegex = /^\\begin{/;
+
+const splitAtDelimiters = function (
+    text: string,
+    delimiters: Array<Delimiter>
+): Array<TextElement> {
+    let index;
+    const data = [];
+
+    const regexLeft = new RegExp(
+        "(" + delimiters.map((x) => escapeRegex(x.left)).join("|") + ")"
+    );
+
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+        index = text.search(regexLeft);
+        if (index === -1) {
+            break;
+        }
+        if (index > 0) {
+            data.push({
+                type: "text",
+                data: text.slice(0, index),
+            });
+            text = text.slice(index); // now text starts with delimiter
+        }
+        // ... so this always succeeds:
+        const i = delimiters.findIndex((delim) => text.startsWith(delim.left));
+        index = findEndOfMath(
+            delimiters[i].right,
+            text,
+            delimiters[i].left.length
+        );
+        if (index === -1) {
+            break;
+        }
+        const rawData = text.slice(0, index + delimiters[i].right.length);
+        const math = amsRegex.test(rawData)
+            ? rawData
+            : text.slice(delimiters[i].left.length, index);
+        data.push({
+            type: "math",
+            data: math,
+            rawData,
+            display: delimiters[i].display,
+        });
+        text = text.slice(index + delimiters[i].right.length);
+    }
+
+    if (text !== "") {
+        data.push({
+            type: "text",
+            data: text,
+        });
+    }
+
+    return data;
+};
+
+export default splitAtDelimiters;