feat: Support LaTeX and AsciiMath via MathJax on stem.excalidraw.com

src/packages/extensions/ts/mathjax/icon.tsx

@@ -0,0 +1,13 @@
+import { Theme } from "../../../../element/types";
+import { createIcon, iconFillColor } from "../../../../components/icons";
+
+// We inline font-awesome icons in order to save on js size rather than including the font awesome react library
+export const mathSubtypeIcon = ({ theme }: { theme: Theme }) =>
+  createIcon(
+    <path
+      fill={iconFillColor(theme)}
+      // fa-square-root-variable-solid
+      d="M289 24.2C292.5 10 305.3 0 320 0H544c17.7 0 32 14.3 32 32s-14.3 32-32 32H345L239 487.8c-3.2 13-14.2 22.6-27.6 24s-26.1-5.5-32.1-17.5L76.2 288H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H96c12.1 0 23.2 6.8 28.6 17.7l73.3 146.6L289 24.2zM393.4 233.4c12.5-12.5 32.8-12.5 45.3 0L480 274.7l41.4-41.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L525.3 320l41.4 41.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L480 365.3l-41.4 41.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L434.7 320l-41.4-41.4c-12.5-12.5-12.5-32.8 0-45.3z"
+    />,
+    { width: 576, height: 512, mirror: true, strokeWidth: 1.25 },
+  );

src/packages/extensions/ts/mathjax/index.ts

@@ -0,0 +1,32 @@
+import { useEffect } from "react";
+import { ExcalidrawImperativeAPI } from "../../../../types";
+import { addSubtypeMethods } from "../../../../subtypes";
+import { getMathSubtypeRecord } from "./types";
+import { prepareMathSubtype } from "./implementation";
+
+export const MathJaxExtension = "mathjax";
+
+// Extension authors: provide a hook like `useMyExtension` in `myextension/index`
+export const useMathJaxExtension = (api: ExcalidrawImperativeAPI | null) => {
+  const enabled = mathJaxExtensionLoadable;
+  useEffect(() => {
+    if (enabled && api) {
+      const prep = api.addSubtype(getMathSubtypeRecord(), prepareMathSubtype);
+      if (prep) {
+        addSubtypeMethods(getMathSubtypeRecord().subtype, prep.methods);
+      }
+    }
+  }, [enabled, api]);
+};
+
+// Extension authors: Use a variable like `myExtensionLoadable` to determine
+// whether or not to do anything in each of `useMyExtension` and `testMyExtension`.
+let mathJaxExtensionLoadable = false;
+
+export const getMathJaxExtensionLoadable = () => {
+  return mathJaxExtensionLoadable;
+};
+
+export const setMathJaxExtensionLoadable = (loadable: boolean) => {
+  mathJaxExtensionLoadable = loadable;
+};

src/packages/extensions/ts/mathjax/locales/en.json

@@ -0,0 +1,15 @@
+{
+  "labels": {
+    "changeMathOnly": "Math display",
+    "mathOnlyTrue": "Math only",
+    "mathOnlyFalse": "Mixed text",
+    "resetUseTex": "Reset math input type",
+    "useTexTrueActive": "✔ Standard input",
+    "useTexTrueInactive": "Standard input",
+    "useTexFalseActive": "✔ Simplified input",
+    "useTexFalseInactive": "Simplified input"
+  },
+  "toolBar": {
+    "math": "Math"
+  }
+}

src/packages/extensions/ts/mathjax/types.ts

@@ -0,0 +1,17 @@
+import { getShortcutKey } from "../../../../utils";
+import { SubtypeRecord } from "../../../../subtypes";
+
+// Exports
+export const getMathSubtypeRecord = () => mathSubtype;
+
+// Use `getMathSubtype` so we don't have to export this
+const mathSubtype: SubtypeRecord = {
+  subtype: "math",
+  parents: ["text"],
+  actionNames: ["useTexTrue", "useTexFalse", "resetUseTex", "changeMathOnly"],
+  disabledNames: ["changeFontFamily"],
+  shortcutMap: {
+    resetUseTex: [getShortcutKey("Shift+R")],
+  },
+  alwaysEnabledNames: ["useTexTrue", "useTexFalse"],
+};