Merge remote-tracking branch 'origin/master' into what-should-i-name-this-branch

tgui/package.json

@@ -30,6 +30,7 @@
     "jest": "^27.0.6",
     "jest-circus": "^27.0.6",
     "jsdom": "^16.7.0",
+    "katex": "^0.15.1",
     "mini-css-extract-plugin": "^1.6.2",
     "sass": "^1.37.5",
     "sass-loader": "^11.1.1",

tgui/packages/tgui/interfaces/ChemMaster.js

@@ -400,6 +400,9 @@ const AnalysisResults = (props, context) => {
         <LabeledList.Item label="Addiction Threshold">
           {analyzeVars.addicD}
         </LabeledList.Item>
+        <LabeledList.Item label="Metabolized by">
+          {analyzeVars.processType}
+        </LabeledList.Item>
         <LabeledList.Item label="Purity">
           {analyzeVars.purityF}
         </LabeledList.Item>

tgui/packages/tgui/interfaces/PaperSheet.js

@@ -4,6 +4,7 @@
  * @author Original WarlockD (https://github.com/warlockd)
  * @author Changes stylemistake
  * @author Changes ThePotato97
+ * @author Changes Ghommie
  * @license MIT
  */
 
@@ -15,8 +16,27 @@ 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) => {
+  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);
+    }
+  }
+  return text;
+};
+
 // Hacky, yes, works?...yes
 const textWidth = (text, font, fontsize) => {
   // default font height is 12 in tgui
@@ -30,7 +50,7 @@ const textWidth = (text, font, fontsize) => {
 
 const setFontinText = (text, font, color, bold=false) => {
   return "<span style=\""
-    + "color:'" + color + "';"
+    + "color:" + color + ";"
     + "font-family:'" + font + "';"
     + ((bold)
       ? "font-weight: bold;"
@@ -54,7 +74,7 @@ const createInputField = (length, width, font,
       + "type=\"text\" "
       + "style=\""
       + "font:'" + fontsize + "x " + font + "';"
-      + "color:'" + color + "';"
+      + "color:" + color + ";"
       + "min-width:" + width + ";"
       + "max-width:" + width + ";"
       + "\" "
@@ -235,7 +255,6 @@ const PaperSheetView = (props, context) => {
       height="100%" >
       <Box
         className="Paper__Page"
-        color="black"
         fillPositionedParent
         width="100%"
         height="100%"
@@ -357,6 +376,53 @@ class PaperSheetStamper extends Component {
   }
 }
 
+// This creates the html from marked text as well as the form fields
+const createPreview = (
+  value, 
+  text,
+  do_fields = false,
+  field_counter,
+  color,
+  font,
+  user_name,
+  is_crayon = false,
+) => {
+  const out = { text: text };
+  // check if we are adding to paper, if not
+  // we still have to check if someone entered something
+  // into the fields
+  value = value.trim();
+  if (value.length > 0) {
+    // First lets make sure it ends in a new line
+    value += value[value.length] === "\n" ? " \n" : "\n \n";
+    // Second, we sanitize the text of html
+    const sanitized_text = sanitizeText(value);
+    const signed_text = signDocument(sanitized_text, color, user_name);
+    // Third we replace the [__] with fields as markedjs fucks them up
+    const fielded_text = createFields(
+      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(
+      replacedEquations, font, color, is_crayon);
+    out.text += fonted_text;
+    out.field_counter = fielded_text.counter;
+  }
+  if (do_fields) {
+    // finally we check all the form fields to see
+    // if any data was entered by the user and
+    // if it was return the data and modify the text
+    const final_processing = checkAllFields(
+      out.text, font, color, user_name, is_crayon);
+    out.text = final_processing.text;
+    out.form_fields = final_processing.fields;
+  }
+  return out;
+};
+
 // ugh.  So have to turn this into a full
 // component too if I want to keep updates
 // low and keep the weird flashing down
@@ -366,58 +432,24 @@ class PaperSheetEdit extends Component {
     this.state = {
       previewSelected: "Preview",
       old_text: props.value || "",
+      counter: props.counter || 0,
       textarea_text: "",
       combined_text: props.value || "",
     };
   }
 
-  // This is the main rendering part, this creates the html from marked text
-  // as well as the form fields
-  createPreview(value, do_fields = false) {
+  createPreviewFromData(value, do_fields = false) {
     const { data } = useBackend(this.context);
-    const {
-      text,
-      pen_color,
-      pen_font,
-      is_crayon,
-      field_counter,
-      edit_usr,
-    } = data;
-    const out = { text: text };
-    // check if we are adding to paper, if not
-    // we still have to check if someone entered something
-    // into the fields
-    value = value.trim();
-    if (value.length > 0) {
-      // First lets make sure it ends in a new line
-      value += value[value.length] === "\n" ? " \n" : "\n \n";
-      // Second, we sanitize the text of html
-      const sanitized_text = sanitizeText(value);
-      const signed_text = signDocument(sanitized_text, pen_color, edit_usr);
-      // Third we replace the [__] with fields as markedjs fucks them up
-      const fielded_text = createFields(
-        signed_text, pen_font, 12, pen_color, field_counter);
-      // Fourth, parse the text using markup
-      const formatted_text = run_marked_default(fielded_text.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, pen_font, pen_color, is_crayon);
-      out.text += fonted_text;
-      out.field_counter = fielded_text.counter;
-    }
-    if (do_fields) {
-      // finally we check all the form fields to see
-      // if any data was entered by the user and
-      // if it was return the data and modify the text
-      const final_processing = checkAllFields(
-        out.text, pen_font, pen_color, edit_usr, is_crayon);
-      out.text = final_processing.text;
-      out.form_fields = final_processing.fields;
-    }
-    return out;
+    return createPreview(value, 
+      this.state.old_text,
+      do_fields,
+      this.state.counter,
+      data.pen_color,
+      data.pen_font,
+      data.edit_usr,
+      data.is_crayon,
+    );
   }
-
   onInputHandler(e, value) {
     if (value !== this.state.textarea_text) {
       const combined_length = this.state.old_text.length
@@ -438,19 +470,21 @@ class PaperSheetEdit extends Component {
       }
       this.setState(() => ({
         textarea_text: value,
-        combined_text: this.createPreview(value),
+        combined_text: this.createPreviewFromData(value),
       }));
     }
   }
   // the final update send to byond, final upkeep
   finalUpdate(new_text) {
     const { act } = useBackend(this.context);
-    const final_processing = this.createPreview(new_text, true);
+    const final_processing = this.createPreviewFromData(new_text, true);
     act('save', final_processing);
     this.setState(() => { return {
       textarea_text: "",
       previewSelected: "save",
       combined_text: final_processing.text,
+      old_text: final_processing.text,
+      counter: final_processing.field_counter,
     }; });
     // byond should switch us to readonly mode from here
   }
@@ -489,7 +523,7 @@ class PaperSheetEdit extends Component {
                 const new_state = {
                   previewSelected: "Preview",
                   textarea_text: this.state.textarea_text,
-                  combined_text: this.createPreview(
+                  combined_text: this.createPreviewFromData(
                     this.state.textarea_text).text,
                 };
                 return new_state;
@@ -515,7 +549,7 @@ class PaperSheetEdit extends Component {
                     const new_state = {
                       previewSelected: "confirm",
                       textarea_text: this.state.textarea_text,
-                      combined_text: this.createPreview(
+                      combined_text: this.createPreviewFromData(
                         this.state.textarea_text).text,
                     };
                     return new_state;
@@ -566,7 +600,33 @@ export const PaperSheet = (props, context) => {
     sizeX,
     sizeY,
     name,
+    add_text,
+    add_font,
+    add_color,
+    add_sign,
+    field_counter,
   } = data;
+  // some features can add text to a paper sheet outside of this ui
+  // we need to parse, sanitize and add any of it to the text value.
+  const values = { text: text, field_counter: field_counter };
+  if (add_text) {
+    for (let index = 0; index < add_text.length; index++) {
+      const used_color = add_color[index];
+      const used_font = add_font[index];
+      const used_sign = add_sign[index];
+      const processing = createPreview(
+        add_text[index],
+        values.text,
+        false,
+        values.field_counter,
+        used_color,
+        used_font,
+        used_sign
+      );
+      values.text = processing.text;
+      values.field_counter = processing.field_counter;
+    }
+  }
   const stamp_list = !stamps
     ? []
     : stamps;
@@ -575,14 +635,15 @@ export const PaperSheet = (props, context) => {
       case 0:
         return (
           <PaperSheetView
-            value={text}
+            value={values.text}
             stamps={stamp_list}
             readOnly />
         );
       case 1:
         return (
           <PaperSheetEdit
-            value={text}
+            value={values.text}
+            counter={values.field_counter}
             textColor={pen_color}
             fontFamily={pen_font}
             stamps={stamp_list}
@@ -591,7 +652,7 @@ export const PaperSheet = (props, context) => {
       case 2:
         return (
           <PaperSheetStamper
-            value={text}
+            value={values.text}
             stamps={stamp_list}
             stamp_class={stamp_class} />
         );

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

@@ -16,6 +16,8 @@
 @include meta.load-css('./atomic/links.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

@@ -3013,6 +3013,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"commander@npm:^8.0.0":
+  version: 8.3.0
+  resolution: "commander@npm:8.3.0"
+  checksum: 0f82321821fc27b83bd409510bb9deeebcfa799ff0bf5d102128b500b7af22872c0c92cb6a0ebc5a4cf19c6b550fba9cedfa7329d18c6442a625f851377bacf0
+  languageName: node
+  linkType: hard
+
 "common@workspace:*, common@workspace:packages/common":
   version: 0.0.0-use.local
   resolution: "common@workspace:packages/common"
@@ -5511,6 +5518,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: eab97bbe292cc60b15fec264cba86d110e5e089045de084cd3a0f27b21ef65857a4d296c418ec3b397ff987671a20c6a9a1fd30f1862b86a0e6b7dbe3fb893f6
+  languageName: node
+  linkType: hard
+
 "kind-of@npm:^6.0.2":
   version: 6.0.3
   resolution: "kind-of@npm:6.0.3"
@@ -7676,6 +7694,7 @@ resolve@^2.0.0-next.3:
     jest: ^27.0.6
     jest-circus: ^27.0.6
     jsdom: ^16.7.0
+    katex: ^0.15.1
     mini-css-extract-plugin: ^1.6.2
     sass: ^1.37.5
     sass-loader: ^11.1.1