Adds equations to the paper UI!

tgui/packages/tgui/interfaces/PaperSheet.js

@@ -16,8 +16,29 @@ import { Box, Flex, Tabs, TextArea } from '../components';
 import { Window } from '../layouts';
 import { clamp } from 'common/math';
 import { sanitizeText } from '../sanitize';
+import katex from 'katex';
+
 const MAX_PAPER_LENGTH = 5000; // Question, should we send this with ui_data?
 
+// Find where people put in equations inside two $ symbols and convert them to proper LaTeX
+const equationRegex = (text) => {
+  logger.log("Starting to convert:", text)
+  const find_equation_formatting = /\$.*\$/igm;
+  const find_regex = find_equation_formatting.exec(text);
+  if (find_regex) {
+    for (let i = 0; i < find_regex.length; i++) {
+      const removeDollarSigns = find_regex[i].replace(/\$/g, '');
+      const convertToLatex = katex.renderToString(removeDollarSigns, {
+        throwOnError: false,
+      });
+      text = text.replace(find_regex[i], convertToLatex);
+      logger.log("Converting:", convertToLatex, i);
+    }
+  }
+  logger.log("Replaced Result", text)
+  return text;
+}
+
 // Hacky, yes, works?...yes
 const textWidth = (text, font, fontsize) => {
   // default font height is 12 in tgui
@@ -384,10 +405,11 @@ const createPreview = (
       signed_text, font, 12, color, field_counter);
     // Fourth, parse the text using markup
     const formatted_text = run_marked_default(fielded_text.text);
+    const replacedEquations = equationRegex(formatted_text)
     // Fifth, we wrap the created text in the pin color, and font.
     // crayon is bold (<b> tags), maybe make fountain pin italic?
     const fonted_text = setFontinText(
-      formatted_text, font, color, is_crayon);
+      replacedEquations, font, color, is_crayon);
     out.text += fonted_text;
     out.field_counter = fielded_text.counter;
   }

tgui/packages/tgui/package.json

@@ -7,6 +7,7 @@
     "dompurify": "^2.2.7",
     "inferno": "^7.4.8",
     "inferno-vnode-flags": "^7.4.8",
+    "katex": "^0.15.1",
     "marked": "^2.0.3",
     "tgui-dev-server": "workspace:*",
     "tgui-polyfill": "workspace:*"

tgui/packages/tgui/styles/atomic/TexMath.scss

@@ -0,0 +1,28 @@
+.katex {
+  font-size: 1.5em !important
+}
+
+eq {
+  display: inline-block
+}
+
+eqn {
+  display: block
+}
+
+section.eqno {
+  display: flex;
+  flex-direction: row;
+  align-content: space-between;
+  align-items: center
+}
+
+section.eqno>eqn {
+  width: 100%;
+  margin-left: 3em
+}
+
+section.eqno>span {
+  width: 3em;
+  text-align: right
+}

tgui/packages/tgui/styles/main.scss

@@ -15,6 +15,8 @@
 @include meta.load-css('./atomic/debug-layout.scss');
 @include meta.load-css('./atomic/outline.scss');
 @include meta.load-css('./atomic/text.scss');
+@include meta.load-css('./atomic/TexMath.scss');
+@include meta.load-css('./atomic/KaTeX.scss');
 
 // Components
 @include meta.load-css('./components/BlockQuote.scss');

tgui/yarn.lock

@@ -3036,6 +3036,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"commander@npm:^8.0.0":
+  version: 8.3.0
+  resolution: "commander@npm:8.3.0"
+  checksum: 0b818d97ca9c8ad461ff05f873082af0c1895e49984a2abf1090e4a85c3537c3c0f9921e38314a9de7e71941f00f710c204d3560e3a7bc0b1023eef92d6bbfc0
+  languageName: node
+  linkType: hard
+
 "common@workspace:*, common@workspace:packages/common":
   version: 0.0.0-use.local
   resolution: "common@workspace:packages/common"
@@ -5826,6 +5833,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"katex@npm:^0.15.1":
+  version: 0.15.1
+  resolution: "katex@npm:0.15.1"
+  dependencies:
+    commander: ^8.0.0
+  bin:
+    katex: cli.js
+  checksum: d1db044d8b2f37c70adb4c331dfe55b453f2fc4a0cc72e050e76ff372a7f74201a3ac96998bda3f63cafac3622b2e2e89aecc4b2ed960c5fdd2dda2d8bfe5757
+  languageName: node
+  linkType: hard
+
 "kind-of@npm:^3.0.2, kind-of@npm:^3.0.3, kind-of@npm:^3.2.0":
   version: 3.2.2
   resolution: "kind-of@npm:3.2.2"
@@ -8369,6 +8387,7 @@ resolve@^2.0.0-next.3:
     dompurify: ^2.2.7
     inferno: ^7.4.8
     inferno-vnode-flags: ^7.4.8
+    katex: ^0.15.1
     marked: ^2.0.3
     tgui-dev-server: "workspace:*"
     tgui-polyfill: "workspace:*"