@zzish/math-rich-input 0.1.41 → 0.1.43

package/src/EquationEditor.jsx

@@ -1,10 +1,7 @@
 import React from "react";
 import { addStyles, EditableMathField } from "react-mathquill";
-import SymbolButton from "./SymbolButton";
-import {
-  getSymbolsForButtonArea,
-  getLatexInsertionParams,
-} from "./equationEditorButtonsHelper.js";
+import SymbolButton from "./SymbolButton.jsx";
+import { getSymbolsForButtonArea, getLatexInsertionParams } from "./equationEditorButtonsHelper.js";
 
 import "./EquationEditor.css";
 
@@ -27,38 +24,38 @@ let GLOBAL_lastSymbols = ["", "", ""];
 const MAX_BUTTON_ROWS = 5;
 const TAB_NAMES = ["Common", "More", "Greek", "Chemistry", "Physics"];
 const BUTTON_AREA_NAMES = [
-  "Common",
-  "Operators",
-  "Angles",
-  "Misc",
-  "Sets",
-  "GreekLower",
-  "GreekUpper",
-  "Chemistry",
-  "Elements",
-  "Physics1",
-  "Physics2",
-  "Physics3",
+    "Common",
+    "Operators",
+    "Angles",
+    "Misc",
+    "Sets",
+    "GreekLower",
+    "GreekUpper",
+    "Chemistry",
+    "Elements",
+    "Physics1",
+    "Physics2",
+    "Physics3",
 ];
 const TAB_NAMES_EXPERT = ["Common", "More", "Greek", "Expert"];
 const BUTTON_AREA_NAMES_EXPERT = [
-  "Common",
-  "Operators",
-  "Angles",
-  "Misc",
-  "Sets",
-  "GreekLower",
-  "GreekUpper",
-  "Expert",
-  "Matrices",
+    "Common",
+    "Operators",
+    "Angles",
+    "Misc",
+    "Sets",
+    "GreekLower",
+    "GreekUpper",
+    "Expert",
+    "Matrices",
 ];
 const TAB_STARTS_AT_AREA_NAMED = {
-  Common: "Common",
-  More: "Misc",
-  Greek: "GreekLower",
-  Chemistry: "Chemistry",
-  Physics: "Physics1",
-  Expert: "Expert",
+    Common: "Common",
+    More: "Misc",
+    Greek: "GreekLower",
+    Chemistry: "Chemistry",
+    Physics: "Physics1",
+    Expert: "Expert",
 };
 
 let GLOBAL_buttonAreasWidths = null;
@@ -66,565 +63,536 @@ let GLOBAL_buttonAreasWidthsExpert = null;
 let GLOBAL_last_selected_tab = TAB_NAMES[0];
 
 export default class EquationEditor extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      latex: props.latex,
-      pretty: false,
-      selectedTab: GLOBAL_last_selected_tab,
-      recentSymbolsCount: 0,
-    };
+    constructor(props) {
+        super(props);
+        this.state = {
+            latex: props.latex,
+            pretty: false,
+            selectedTab: GLOBAL_last_selected_tab,
+            recentSymbolsCount: 0,
+        };
+
+        this.mathQuill = null;
+        this.handleInsertCallback = props.handleInsert;
+        this.handleCancelCallback = props.handleCancel;
+    }
 
-    this.mathQuill = null;
-    this.handleInsertCallback = props.handleInsert;
-    this.handleCancelCallback = props.handleCancel;
-  }
-
-  handleInsert = () => {
-    this.handleInsertCallback(this.state.latex);
-  };
-
-  handleCancel = () => {
-    this.handleCancelCallback();
-  };
-
-  prettifyLatex(latex) {
-    // NB:  replaceAll not suported on safari
-    // console.log("Before: "+latex)
-    // latex = latex.replaceAll(/\\\\/g,"_DOOUBLE_BCACKSLASH_")
-    // latex = latex.replace(/\\/g," \\")
-    // latex = latex.replaceAll("_DOOUBLE_BCACKSLASH_","\\\\")
-    // latex = latex.replaceAll("="," = ")
-    // latex = latex.replaceAll("+"," + ")
-    // latex = latex.replaceAll("-"," - ")
-    // latex = latex.replaceAll("{ ","{")
-    // latex = latex.replaceAll("( ","(")
-    // latex = latex.replaceAll("[ ","[")
-    // latex = latex.replaceAll("  "," ")
-    // latex = latex.trim()
-    // console.log("Prettified: "+latex)
-    return latex;
-  }
-
-  handleChange = (mathQuill) => {
-    this.setState({ latex: mathQuill.latex(), pretty: false });
-  };
-
-  handleKeyDown = (e) => {
-    // console.log(e.key)
-    try {
-      if (!this.props.useExpertMode && e.key === "Enter") {
+    handleInsert = () => {
         this.handleInsertCallback(this.state.latex);
-        e.preventDefault();
-      }
-    } catch (error) {
-      console.error(error);
-    }
-  };
-
-  updateRecentSymbols(symbol) {
-    let recentSymbols = GLOBAL_recentSymbols;
-    let symbolIndex = -1;
-    let minIndex = -1;
-    let min = 999999;
-    for (let i = 0; i < recentSymbols.length; i++) {
-      if (recentSymbols[i].name === symbol) symbolIndex = i;
-      if (recentSymbols[i].count > 0)
-        recentSymbols[i].count = recentSymbols[i].count * RECENT_DECAY_FACTOR;
-      if (recentSymbols[i].count <= min) {
-        min = recentSymbols[i].count;
-        minIndex = i;
-      }
-    }
-    if (symbolIndex >= 0) {
-      recentSymbols[symbolIndex].count =
-        recentSymbols[symbolIndex].count + RECENT_WEIGHT;
-    } else {
-      if (recentSymbols.length >= RECENT_MAX) {
-        recentSymbols.splice(minIndex, 1);
-      }
-      recentSymbols.push({ name: symbol, count: RECENT_WEIGHT });
+    };
+
+    handleCancel = () => {
+        this.handleCancelCallback();
+    };
+
+    prettifyLatex(latex) {
+        // NB:  replaceAll not suported on safari
+        // console.log("Before: "+latex)
+        // latex = latex.replaceAll(/\\\\/g,"_DOOUBLE_BCACKSLASH_")
+        // latex = latex.replace(/\\/g," \\")
+        // latex = latex.replaceAll("_DOOUBLE_BCACKSLASH_","\\\\")
+        // latex = latex.replaceAll("="," = ")
+        // latex = latex.replaceAll("+"," + ")
+        // latex = latex.replaceAll("-"," - ")
+        // latex = latex.replaceAll("{ ","{")
+        // latex = latex.replaceAll("( ","(")
+        // latex = latex.replaceAll("[ ","[")
+        // latex = latex.replaceAll("  "," ")
+        // latex = latex.trim()
+        // console.log("Prettified: "+latex)
+        return latex;
     }
 
-    // recentSymbols.sort((a, b) => b.count - a.count) // Order max to min
-
-    GLOBAL_recentSymbols = recentSymbols;
-    GLOBAL_lastSymbols.pop();
-    GLOBAL_lastSymbols.unshift(symbol);
-
-    this.setState({ recentSymbolsCount: this.state.recentSymbolsCount + 1 });
-  }
-
-  handleInsertSymbol = (symbol) => {
-    if (this.props.useExpertMode) this.handleInsertSymbolKatex(symbol);
-    else this.handleInsertSymbolMathQuill(symbol);
-  };
-
-  isLetter = (char) => {
-    return ("a" <= char && char <= "z") || ("A" <= char && char <= "Z");
-  };
-
-  // Returns:
-  // 1. the provided pos if pos is not inside a latex tag
-  // 2. a new pos if pos is close to the start or end of a tag (within 2 characters)
-  // 3. -1 if pos is not close to the start or end of a tag
-  movePosIfInsideTag(latex, pos) {
-    if (pos === 0 || pos === latex.length) return pos;
-
-    let c = latex.charAt(pos);
-    if (!this.isLetter(c)) return pos;
-    let cm1 = latex.charAt(pos - 1);
-    if (!this.isLetter(cm1) && cm1 !== "\\") return pos - 1;
-
-    // We are inside a latex tag, let's move out of it
-    if (pos === 1) return 0;
-    if (pos === latex.length - 1) return latex.length;
-
-    if (latex.charAt(pos - 1) === "\\") return pos - 1;
-    if (!this.isLetter(latex.charAt(pos + 1))) return pos + 1;
-    if (latex.charAt(pos - 2) === "\\") return pos - 2;
-    if (!this.isLetter(latex.charAt(pos + 2))) return pos + 2;
-
-    return -1;
-  }
-
-  handleInsertSymbolKatex = (symbol) => {
-    let oldLatex = null;
-    let start = -1;
-    let end = -1;
-    try {
-      this.updateRecentSymbols(symbol);
-      oldLatex = this.latexInput.value;
-      start = this.latexInput.selectionStart;
-      end = this.latexInput.selectionEnd;
-
-      start = this.movePosIfInsideTag(oldLatex, start);
-      end = this.movePosIfInsideTag(oldLatex, end);
-      if (start === -1 || end === -1) {
-        console.log(
-          "Can't insert as cursor position or start or end of selection is inside a tag"
-        );
-        return;
-      }
-
-      // if (this.latexInput !== document.activeElement)
-      this.latexInput.focus();
-
-      let insertParams = getLatexInsertionParams(symbol);
-      let insert = insertParams.latexWithMarks;
-      //   console.log("Insert params: ");
-      //   console.log(insertParams);
-      //   console.log(start + ":" + end);
-      //   console.log(oldLatex);
-
-      // Move text before cursor into latex if double mark exists in latex
-      let pos = insert.indexOf("##");
-      if (pos >= 0) {
-        if (start !== end) {
-          insert = insert.replace("##", oldLatex.substring(start, end));
-          //   console.log("insert: " + insert);
-          oldLatex = oldLatex.substring(0, start) + oldLatex.substring(end);
-          end = start;
-        } else if (start > 0) {
-          insert = insert.replace("##", oldLatex.charAt(start - 1));
-          oldLatex =
-            oldLatex.substring(0, start - 1) + oldLatex.substring(start);
-          start = start - 1;
-          end = start;
+    handleChange = (mathQuill) => {
+        this.setState({ latex: mathQuill.latex(), pretty: false });
+    };
+
+    handleKeyDown = (e) => {
+        // console.log(e.key)
+        try {
+            if (!this.props.useExpertMode && e.key === "Enter") {
+                this.handleInsertCallback(this.state.latex);
+                e.preventDefault();
+            }
+        } catch (error) {
+            console.error(error);
+        }
+    };
+
+    updateRecentSymbols(symbol) {
+        let recentSymbols = GLOBAL_recentSymbols;
+        let symbolIndex = -1;
+        let minIndex = -1;
+        let min = 999999;
+        for (let i = 0; i < recentSymbols.length; i++) {
+            if (recentSymbols[i].name === symbol) symbolIndex = i;
+            if (recentSymbols[i].count > 0)
+                recentSymbols[i].count = recentSymbols[i].count * RECENT_DECAY_FACTOR;
+            if (recentSymbols[i].count <= min) {
+                min = recentSymbols[i].count;
+                minIndex = i;
+            }
+        }
+        if (symbolIndex >= 0) {
+            recentSymbols[symbolIndex].count = recentSymbols[symbolIndex].count + RECENT_WEIGHT;
         } else {
-          insert = insert.replace("##", "#");
+            if (recentSymbols.length >= RECENT_MAX) {
+                recentSymbols.splice(minIndex, 1);
+            }
+            recentSymbols.push({ name: symbol, count: RECENT_WEIGHT });
         }
-      }
-      // Move text before cursor into latex if selection made and single mark exists in latex
-      // or otherwise delete selected text
-      if (start !== end) {
-        pos = insert.indexOf("#");
-        if (pos >= 0)
-          insert = insert.replace("#", oldLatex.substring(start, end));
-
-        oldLatex = oldLatex.substring(0, start) + oldLatex.substring(end);
-        end = start;
-      }
-
-      // Remove any extra marks after the first mark
-      insert = insert.replace("#", MARK);
-      insert = insert.replaceAll("#", "");
-      insert = insert.replace(MARK, "#");
-
-      // Construct new latex
-      let newLatex =
-        oldLatex.substring(0, start) +
-        insert +
-        MARK +
-        oldLatex.substring(start);
-      let newSelectionStart = newLatex.indexOf(MARK);
-      newLatex =
-        newLatex.substring(0, newSelectionStart) +
-        newLatex.substring(newSelectionStart + MARK.length);
-
-      // Move cursor position back to mark in inserted text if applicable
-      pos = insert.indexOf("#");
-      if (pos > 0) {
-        newSelectionStart = newLatex.lastIndexOf("#", newSelectionStart);
-        newLatex =
-          newLatex.substring(0, newSelectionStart) +
-          newLatex.substring(newSelectionStart + 1);
-      }
-
-      this.setState({ latex: newLatex }, () => {
-        this.latexInput.selectionStart = newSelectionStart;
-        this.latexInput.selectionEnd = newSelectionStart;
-        this.latexInput.focus();
-      });
-    } catch (error) {
-      console.error(error);
-      //   console.log("Inserting: " + symbol);
-      //   console.log("into: " + this.latexInput.value);
-      //   console.log("at: " + start + ":" + end);
+
+        // recentSymbols.sort((a, b) => b.count - a.count) // Order max to min
+
+        GLOBAL_recentSymbols = recentSymbols;
+        GLOBAL_lastSymbols.pop();
+        GLOBAL_lastSymbols.unshift(symbol);
+
+        this.setState({ recentSymbolsCount: this.state.recentSymbolsCount + 1 });
     }
-  };
 
-  handleInsertSymbolMathQuill = (symbol) => {
-    try {
-      this.updateRecentSymbols(symbol);
+    handleInsertSymbol = (symbol) => {
+        if (this.props.useExpertMode) this.handleInsertSymbolKatex(symbol);
+        else this.handleInsertSymbolMathQuill(symbol);
+    };
 
-      let insert = getLatexInsertionParams(symbol);
-      if (insert === null || insert === undefined) {
-        console.err(
-          "Could not get latex insertion parameters for symbol: " + symbol
-        );
-        this.mathQuill.focus();
-        return;
-      }
+    isLetter = (char) => {
+        return ("a" <= char && char <= "z") || ("A" <= char && char <= "Z");
+    };
 
-      if (insert.typedText) this.mathQuill.typedText(insert.mathQuillLatex);
-      else this.mathQuill.write(insert.mathQuillLatex);
+    // Returns:
+    // 1. the provided pos if pos is not inside a latex tag
+    // 2. a new pos if pos is close to the start or end of a tag (within 2 characters)
+    // 3. -1 if pos is not close to the start or end of a tag
+    movePosIfInsideTag(latex, pos) {
+        if (pos === 0 || pos === latex.length) return pos;
 
-      this.mathQuill.focus();
+        let c = latex.charAt(pos);
+        if (!this.isLetter(c)) return pos;
+        let cm1 = latex.charAt(pos - 1);
+        if (!this.isLetter(cm1) && cm1 !== "\\") return pos - 1;
 
-      for (let i = 0; i < insert.moveCursor; i++)
-        this.mathQuill.keystroke("Right");
-      for (let i = 0; i > insert.moveCursor; i--)
-        this.mathQuill.keystroke("Left");
-    } catch (error) {
-      console.error(error);
-      console.log("Symbol: " + symbol);
+        // We are inside a latex tag, let's move out of it
+        if (pos === 1) return 0;
+        if (pos === latex.length - 1) return latex.length;
+
+        if (latex.charAt(pos - 1) === "\\") return pos - 1;
+        if (!this.isLetter(latex.charAt(pos + 1))) return pos + 1;
+        if (latex.charAt(pos - 2) === "\\") return pos - 2;
+        if (!this.isLetter(latex.charAt(pos + 2))) return pos + 2;
+
+        return -1;
     }
-  };
-
-  handleSelectTab = (tab) => {
-    if (!this.props.useExpertMode) this.mathQuill.focus();
-    else this.latexInput.focus();
-
-    GLOBAL_last_selected_tab = tab;
-    this.setState({ selectedTab: tab }, () => {
-      let buttonAreas = this.symbolButtonAreasInnerContainer.childNodes;
-      for (let i = 0; i < buttonAreas.length; i++) {
-        if (buttonAreas[i].id === TAB_STARTS_AT_AREA_NAMED[tab]) {
-          buttonAreas[i].scrollIntoView({
-            behavior: "smooth",
-            inline: "start",
-          });
+
+    handleInsertSymbolKatex = (symbol) => {
+        let oldLatex = null;
+        let start = -1;
+        let end = -1;
+        try {
+            this.updateRecentSymbols(symbol);
+            oldLatex = this.latexInput.value;
+            start = this.latexInput.selectionStart;
+            end = this.latexInput.selectionEnd;
+
+            start = this.movePosIfInsideTag(oldLatex, start);
+            end = this.movePosIfInsideTag(oldLatex, end);
+            if (start === -1 || end === -1) {
+                console.log(
+                    "Can't insert as cursor position or start or end of selection is inside a tag"
+                );
+                return;
+            }
+
+            // if (this.latexInput !== document.activeElement)
+            this.latexInput.focus();
+
+            let insertParams = getLatexInsertionParams(symbol);
+            let insert = insertParams.latexWithMarks;
+            //   console.log("Insert params: ");
+            //   console.log(insertParams);
+            //   console.log(start + ":" + end);
+            //   console.log(oldLatex);
+
+            // Move text before cursor into latex if double mark exists in latex
+            let pos = insert.indexOf("##");
+            if (pos >= 0) {
+                if (start !== end) {
+                    insert = insert.replace("##", oldLatex.substring(start, end));
+                    //   console.log("insert: " + insert);
+                    oldLatex = oldLatex.substring(0, start) + oldLatex.substring(end);
+                    end = start;
+                } else if (start > 0) {
+                    insert = insert.replace("##", oldLatex.charAt(start - 1));
+                    oldLatex = oldLatex.substring(0, start - 1) + oldLatex.substring(start);
+                    start = start - 1;
+                    end = start;
+                } else {
+                    insert = insert.replace("##", "#");
+                }
+            }
+            // Move text before cursor into latex if selection made and single mark exists in latex
+            // or otherwise delete selected text
+            if (start !== end) {
+                pos = insert.indexOf("#");
+                if (pos >= 0) insert = insert.replace("#", oldLatex.substring(start, end));
+
+                oldLatex = oldLatex.substring(0, start) + oldLatex.substring(end);
+                end = start;
+            }
+
+            // Remove any extra marks after the first mark
+            insert = insert.replace("#", MARK);
+            insert = insert.replaceAll("#", "");
+            insert = insert.replace(MARK, "#");
+
+            // Construct new latex
+            let newLatex = oldLatex.substring(0, start) + insert + MARK + oldLatex.substring(start);
+            let newSelectionStart = newLatex.indexOf(MARK);
+            newLatex =
+                newLatex.substring(0, newSelectionStart) +
+                newLatex.substring(newSelectionStart + MARK.length);
+
+            // Move cursor position back to mark in inserted text if applicable
+            pos = insert.indexOf("#");
+            if (pos > 0) {
+                newSelectionStart = newLatex.lastIndexOf("#", newSelectionStart);
+                newLatex =
+                    newLatex.substring(0, newSelectionStart) +
+                    newLatex.substring(newSelectionStart + 1);
+            }
+
+            this.setState({ latex: newLatex }, () => {
+                this.latexInput.selectionStart = newSelectionStart;
+                this.latexInput.selectionEnd = newSelectionStart;
+                this.latexInput.focus();
+            });
+        } catch (error) {
+            console.error(error);
+            //   console.log("Inserting: " + symbol);
+            //   console.log("into: " + this.latexInput.value);
+            //   console.log("at: " + start + ":" + end);
+        }
+    };
+
+    handleInsertSymbolMathQuill = (symbol) => {
+        try {
+            this.updateRecentSymbols(symbol);
+
+            let insert = getLatexInsertionParams(symbol);
+            if (insert === null || insert === undefined) {
+                console.err("Could not get latex insertion parameters for symbol: " + symbol);
+                this.mathQuill.focus();
+                return;
+            }
+
+            if (insert.typedText) this.mathQuill.typedText(insert.mathQuillLatex);
+            else this.mathQuill.write(insert.mathQuillLatex);
+
+            this.mathQuill.focus();
+
+            for (let i = 0; i < insert.moveCursor; i++) this.mathQuill.keystroke("Right");
+            for (let i = 0; i > insert.moveCursor; i--) this.mathQuill.keystroke("Left");
+        } catch (error) {
+            console.error(error);
+            console.log("Symbol: " + symbol);
         }
-      }
-    });
-  };
-
-  mathquillDidMount(mathQuill) {
-    this.mathQuill = mathQuill;
-    mathQuill.focus();
-  }
-
-  componentDidMount() {
-    // let thisComponentNode = ReactDOM.findDOMNode(this);
-    this.equationEditorDiv.addEventListener("keydown", this.handleKeyDown);
-
-    // Restore scroll position for tab to last selected
-    let buttonAreas = this.symbolButtonAreasInnerContainer.childNodes;
-    for (let i = 0; i < buttonAreas.length; i++) {
-      if (
-        buttonAreas[i].id === TAB_STARTS_AT_AREA_NAMED[GLOBAL_last_selected_tab]
-      ) {
-        buttonAreas[i].scrollIntoView({ behavior: "auto", inline: "start" });
-      }
-    }
-  }
-
-  componentWillUnmount() {
-    // let thisComponentNode = ReactDOM.findDOMNode(this);
-    this.equationEditorDiv.removeEventListener("keydown", this.handleKeyDown);
-  }
-
-  isMobile() {
-    return (
-      (window.innerHeight > window.innerWidth && window.innerHeight < 820) ||
-      window.innerHeight < 500
-    );
-  }
-
-  isTouchDevice() {
-    return (
-      "ontouchstart" in window ||
-      navigator.maxTouchPoints > 0 ||
-      navigator.msMaxTouchPoints > 0
-    );
-  }
-
-  handleCursorLeft = () => {
-    this.mathQuill.keystroke("Left");
-    this.mathQuill.focus();
-  };
-
-  handleCursorRight = () => {
-    this.mathQuill.keystroke("Right");
-    this.mathQuill.focus();
-  };
-
-  handleLatexInputChange = (event) => {
-    this.setState({ latex: event.target.value, pretty: true });
-  };
-
-  renderLatexString = (latex) => {
-    const options = {
-      children: "",
-      displayMode: false,
-      output: "htmlAndMathml",
-      leqno: false,
-      fleqn: false,
-      throwOnError: false,
-      errorColor: "#cc0000",
-      macros: {},
-      minRuleThickness: 0,
-      colorIsTextColor: false,
-      strict: "warn",
-      trust: false,
     };
 
-    try {
-      // returns HTML markup
-      return katex.renderToString(latex, options);
-    } catch (err) {
-      console.error("Could not convert latex string to html: ", latex);
-      return "Error: Unable to render latex";
+    handleSelectTab = (tab) => {
+        if (!this.props.useExpertMode) this.mathQuill.focus();
+        else this.latexInput.focus();
+
+        GLOBAL_last_selected_tab = tab;
+        this.setState({ selectedTab: tab }, () => {
+            let buttonAreas = this.symbolButtonAreasInnerContainer.childNodes;
+            for (let i = 0; i < buttonAreas.length; i++) {
+                if (buttonAreas[i].id === TAB_STARTS_AT_AREA_NAMED[tab]) {
+                    buttonAreas[i].scrollIntoView({
+                        behavior: "smooth",
+                        inline: "start",
+                    });
+                }
+            }
+        });
+    };
+
+    mathquillDidMount(mathQuill) {
+        this.mathQuill = mathQuill;
+        mathQuill.focus();
     }
-  };
-
-  render() {
-    let katexHtml = null;
-    let prettyLatex = null;
-    if (this.props.useExpertMode) {
-      katexHtml = this.renderLatexString(this.state.latex);
-      if (this.state.pretty) prettyLatex = this.state.latex;
-      else {
-        prettyLatex = this.prettifyLatex(this.state.latex);
-      }
+
+    componentDidMount() {
+        // let thisComponentNode = ReactDOM.findDOMNode(this);
+        this.equationEditorDiv.addEventListener("keydown", this.handleKeyDown);
+
+        // Restore scroll position for tab to last selected
+        let buttonAreas = this.symbolButtonAreasInnerContainer.childNodes;
+        for (let i = 0; i < buttonAreas.length; i++) {
+            if (buttonAreas[i].id === TAB_STARTS_AT_AREA_NAMED[GLOBAL_last_selected_tab]) {
+                buttonAreas[i].scrollIntoView({ behavior: "auto", inline: "start" });
+            }
+        }
     }
 
-    let tabNames = TAB_NAMES;
-    let buttonAreaNames = BUTTON_AREA_NAMES;
-    let buttonAreaWidths = GLOBAL_buttonAreasWidths;
-    if (this.props.useExpertMode) {
-      tabNames = TAB_NAMES_EXPERT;
-      buttonAreaNames = BUTTON_AREA_NAMES_EXPERT;
-      buttonAreaWidths = GLOBAL_buttonAreasWidthsExpert;
+    componentWillUnmount() {
+        // let thisComponentNode = ReactDOM.findDOMNode(this);
+        this.equationEditorDiv.removeEventListener("keydown", this.handleKeyDown);
     }
 
-    const recentButtons = GLOBAL_recentSymbols.slice(0, RECENT_MAX).map(
-      (symbol, index) => {
+    isMobile() {
         return (
-          <SymbolButton
-            className="SymbolButton"
-            key={"recent=symbol-" + index}
-            symbol={symbol.name}
-            shouldUpdate={true}
-            highlight={
-              symbol.name === GLOBAL_lastSymbols[0]
-                ? "0"
-                : symbol.name === GLOBAL_lastSymbols[1]
-                ? "1"
-                : symbol.name === GLOBAL_lastSymbols[2]
-                ? "2"
-                : "none"
-            }
-            handleClick={(latex) => this.handleInsertSymbol(symbol.name)}
-          />
+            (window.innerHeight > window.innerWidth && window.innerHeight < 820) ||
+            window.innerHeight < 500
         );
-      }
-    );
-
-    if (buttonAreaWidths === null) {
-      let widths = [];
-      for (let i = 0; i < buttonAreaNames.length; i++) {
-        widths[i] = Math.ceil(
-          getSymbolsForButtonArea(buttonAreaNames[i]).length / MAX_BUTTON_ROWS
-        );
-      }
-      buttonAreaWidths = widths;
     }
 
-    const buttonAreasButtons = buttonAreaNames.map((buttonArea, index) => {
-      return getSymbolsForButtonArea(buttonArea).map((symbol, index) => {
+    isTouchDevice() {
         return (
-          <SymbolButton
-            className="SymbolButton"
-            key={buttonArea + "-symbol-" + index}
-            highlight={buttonArea.toLowerCase()}
-            symbol={symbol}
-            handleClick={() => this.handleInsertSymbol(symbol)}
-          />
+            "ontouchstart" in window ||
+            navigator.maxTouchPoints > 0 ||
+            navigator.msMaxTouchPoints > 0
         );
-      });
-    });
+    }
 
-    return (
-      <div className="EquationEditor" ref={(r) => (this.equationEditorDiv = r)}>
-        {/* Normal mode. Add cursor move buttons for mobile devices as they don't have 
-          cursor keys in the soft keyboard. */}
-        {!this.props.useExpertMode && (
-          <div className="editableAndCursorButtonsWrapper">
-            {this.isTouchDevice() && (
-              <button
-                className="cursorButton"
-                onClick={(t) => this.handleCursorLeft()}
-              >
-                {"\u25C1"}
-              </button>
-            )}
-
-            <div
-              ref={(r) => (this.editableWrapper = r)}
-              className="editableWrapper"
-            >
-              <div className="centerBox">
-                <EditableMathField
-                  className="editable"
-                  latex={this.state.latex}
-                  placeholder="Type equation .."
-                  config={{
-                    autoOperatorNames: AUTO_OPERATOR_NAMES,
-                  }}
-                  mathquillDidMount={(mathQuill) =>
-                    this.mathquillDidMount(mathQuill)
-                  }
-                  onChange={(mathQuill) => this.handleChange(mathQuill)}
+    handleCursorLeft = () => {
+        this.mathQuill.keystroke("Left");
+        this.mathQuill.focus();
+    };
+
+    handleCursorRight = () => {
+        this.mathQuill.keystroke("Right");
+        this.mathQuill.focus();
+    };
+
+    handleLatexInputChange = (event) => {
+        this.setState({ latex: event.target.value, pretty: true });
+    };
+
+    renderLatexString = (latex) => {
+        const options = {
+            children: "",
+            displayMode: false,
+            output: "htmlAndMathml",
+            leqno: false,
+            fleqn: false,
+            throwOnError: false,
+            errorColor: "#cc0000",
+            macros: {},
+            minRuleThickness: 0,
+            colorIsTextColor: false,
+            strict: "warn",
+            trust: false,
+        };
+
+        try {
+            // returns HTML markup
+            return katex.renderToString(latex, options);
+        } catch (err) {
+            console.error("Could not convert latex string to html: ", latex);
+            return "Error: Unable to render latex";
+        }
+    };
+
+    render() {
+        let katexHtml = null;
+        let prettyLatex = null;
+        if (this.props.useExpertMode) {
+            katexHtml = this.renderLatexString(this.state.latex);
+            if (this.state.pretty) prettyLatex = this.state.latex;
+            else {
+                prettyLatex = this.prettifyLatex(this.state.latex);
+            }
+        }
+
+        let tabNames = TAB_NAMES;
+        let buttonAreaNames = BUTTON_AREA_NAMES;
+        let buttonAreaWidths = GLOBAL_buttonAreasWidths;
+        if (this.props.useExpertMode) {
+            tabNames = TAB_NAMES_EXPERT;
+            buttonAreaNames = BUTTON_AREA_NAMES_EXPERT;
+            buttonAreaWidths = GLOBAL_buttonAreasWidthsExpert;
+        }
+
+        const recentButtons = GLOBAL_recentSymbols.slice(0, RECENT_MAX).map((symbol, index) => {
+            return (
+                <SymbolButton
+                    className="SymbolButton"
+                    key={"recent=symbol-" + index}
+                    symbol={symbol.name}
+                    shouldUpdate={true}
+                    highlight={
+                        symbol.name === GLOBAL_lastSymbols[0]
+                            ? "0"
+                            : symbol.name === GLOBAL_lastSymbols[1]
+                            ? "1"
+                            : symbol.name === GLOBAL_lastSymbols[2]
+                            ? "2"
+                            : "none"
+                    }
+                    handleClick={(latex) => this.handleInsertSymbol(symbol.name)}
                 />
-                {this.state.latex.length === 0 && (
-                  <div className="editable-placeholder">Type equation</div>
-                )}
-              </div>
-            </div>
+            );
+        });
+
+        if (buttonAreaWidths === null) {
+            let widths = [];
+            for (let i = 0; i < buttonAreaNames.length; i++) {
+                widths[i] = Math.ceil(
+                    getSymbolsForButtonArea(buttonAreaNames[i]).length / MAX_BUTTON_ROWS
+                );
+            }
+            buttonAreaWidths = widths;
+        }
 
-            {this.isTouchDevice() && (
-              <button
-                className="cursorButton"
-                onClick={(t) => this.handleCursorRight()}
-              >
-                {"\u25B7"}
-              </button>
-            )}
-          </div>
-        )}
-
-        {/* Expert mode */}
-        {this.props.useExpertMode && (
-          <div className="latexInputAreaWrapper">
-            <textarea
-              className="latexInput"
-              autoFocus
-              placeholder="Type latex"
-              spellCheck="false"
-              ref={(r) => (this.latexInput = r)}
-              onChange={this.handleLatexInputChange}
-              value={prettyLatex}
-            ></textarea>
-            <div
-              className="katexRenderedInput"
-              dangerouslySetInnerHTML={{ __html: katexHtml }}
-            />
-          </div>
-        )}
-
-        {/* Cancel and submit button row. Cancel button is only shown on mobile devices as
-          there may be no visible background to click on to close the modal. */}
-        {this.isMobile() && (
-          <button
-            className="cancelButton"
-            type="button"
-            onClick={this.handleCancel}
-          >
-            Cancel
-          </button>
-        )}
-        <button
-          className="insertButton"
-          type="button"
-          onClick={this.handleInsert}
-        >
-          Insert
-        </button>
-
-        {/* Recent symbols button bar */}
-        {!this.isMobile() && (
-          <div className="recentSymbolsButtonArea">
-            {GLOBAL_recentSymbols.length > 0 &&
-              GLOBAL_recentSymbols.length < 6 && (
-                <span className="recentSymbols-recentText-active">Recent:</span>
-              )}
-            {GLOBAL_recentSymbols.length === 0 && (
-              <span className="recentSymbols-recentText-not-active">
-                Recent:
-              </span>
-            )}
-            {recentButtons}
-          </div>
-        )}
-
-        {/* Symbol buttons area */}
-        <div>
-          <div className="tabBar">
-            {tabNames.map((tab, index) => {
-              return (
-                <span key={"tabBar-" + tab}>
-                  {this.state.selectedTab === tab ? (
-                    <span className="tab-selected" selected={true}>
-                      {tab}
-                    </span>
-                  ) : (
-                    <span
-                      className="tab"
-                      onClick={(t) => this.handleSelectTab(tab)}
-                    >
-                      {tab}
-                    </span>
-                  )}{" "}
-                </span>
-              );
-            })}
-          </div>
-
-          <div className="symbolButtonAreasOuterContainer">
-            <div
-              className="symbolButtonAreasInnerContainer"
-              ref={(r) => (this.symbolButtonAreasInnerContainer = r)}
-            >
-              {buttonAreasButtons.map((button, index) => {
+        const buttonAreasButtons = buttonAreaNames.map((buttonArea, index) => {
+            return getSymbolsForButtonArea(buttonArea).map((symbol, index) => {
                 return (
-                  <div
-                    id={buttonAreaNames[index]}
-                    key={buttonAreaNames[index]}
-                    className={
-                      "symbolButtonArea symbolButtonArea-" +
-                      buttonAreaWidths[index]
-                    }
-                  >
-                    {button}
-                  </div>
+                    <SymbolButton
+                        className="SymbolButton"
+                        key={buttonArea + "-symbol-" + index}
+                        highlight={buttonArea.toLowerCase()}
+                        symbol={symbol}
+                        handleClick={() => this.handleInsertSymbol(symbol)}
+                    />
                 );
-              })}
+            });
+        });
+
+        return (
+            <div className="EquationEditor" ref={(r) => (this.equationEditorDiv = r)}>
+                {/* Normal mode. Add cursor move buttons for mobile devices as they don't have 
+          cursor keys in the soft keyboard. */}
+                {!this.props.useExpertMode && (
+                    <div className="editableAndCursorButtonsWrapper">
+                        {this.isTouchDevice() && (
+                            <button
+                                className="cursorButton"
+                                onClick={(t) => this.handleCursorLeft()}
+                            >
+                                {"\u25C1"}
+                            </button>
+                        )}
+
+                        <div ref={(r) => (this.editableWrapper = r)} className="editableWrapper">
+                            <div className="centerBox">
+                                <EditableMathField
+                                    className="editable"
+                                    latex={this.state.latex}
+                                    placeholder="Type equation .."
+                                    config={{
+                                        autoOperatorNames: AUTO_OPERATOR_NAMES,
+                                    }}
+                                    mathquillDidMount={(mathQuill) =>
+                                        this.mathquillDidMount(mathQuill)
+                                    }
+                                    onChange={(mathQuill) => this.handleChange(mathQuill)}
+                                />
+                                {this.state.latex.length === 0 && (
+                                    <div className="editable-placeholder">Type equation</div>
+                                )}
+                            </div>
+                        </div>
+
+                        {this.isTouchDevice() && (
+                            <button
+                                className="cursorButton"
+                                onClick={(t) => this.handleCursorRight()}
+                            >
+                                {"\u25B7"}
+                            </button>
+                        )}
+                    </div>
+                )}
+
+                {/* Expert mode */}
+                {this.props.useExpertMode && (
+                    <div className="latexInputAreaWrapper">
+                        <textarea
+                            className="latexInput"
+                            autoFocus
+                            placeholder="Type latex"
+                            spellCheck="false"
+                            ref={(r) => (this.latexInput = r)}
+                            onChange={this.handleLatexInputChange}
+                            value={prettyLatex}
+                        ></textarea>
+                        <div
+                            className="katexRenderedInput"
+                            dangerouslySetInnerHTML={{ __html: katexHtml }}
+                        />
+                    </div>
+                )}
+
+                {/* Cancel and submit button row. Cancel button is only shown on mobile devices as
+          there may be no visible background to click on to close the modal. */}
+                {this.isMobile() && (
+                    <button className="cancelButton" type="button" onClick={this.handleCancel}>
+                        Cancel
+                    </button>
+                )}
+                <button className="insertButton" type="button" onClick={this.handleInsert}>
+                    Insert
+                </button>
+
+                {/* Recent symbols button bar */}
+                {!this.isMobile() && (
+                    <div className="recentSymbolsButtonArea">
+                        {GLOBAL_recentSymbols.length > 0 && GLOBAL_recentSymbols.length < 6 && (
+                            <span className="recentSymbols-recentText-active">Recent:</span>
+                        )}
+                        {GLOBAL_recentSymbols.length === 0 && (
+                            <span className="recentSymbols-recentText-not-active">Recent:</span>
+                        )}
+                        {recentButtons}
+                    </div>
+                )}
+
+                {/* Symbol buttons area */}
+                <div>
+                    <div className="tabBar">
+                        {tabNames.map((tab, index) => {
+                            return (
+                                <span key={"tabBar-" + tab}>
+                                    {this.state.selectedTab === tab ? (
+                                        <span className="tab-selected" selected={true}>
+                                            {tab}
+                                        </span>
+                                    ) : (
+                                        <span
+                                            className="tab"
+                                            onClick={(t) => this.handleSelectTab(tab)}
+                                        >
+                                            {tab}
+                                        </span>
+                                    )}{" "}
+                                </span>
+                            );
+                        })}
+                    </div>
+
+                    <div className="symbolButtonAreasOuterContainer">
+                        <div
+                            className="symbolButtonAreasInnerContainer"
+                            ref={(r) => (this.symbolButtonAreasInnerContainer = r)}
+                        >
+                            {buttonAreasButtons.map((button, index) => {
+                                return (
+                                    <div
+                                        id={buttonAreaNames[index]}
+                                        key={buttonAreaNames[index]}
+                                        className={
+                                            "symbolButtonArea symbolButtonArea-" +
+                                            buttonAreaWidths[index]
+                                        }
+                                    >
+                                        {button}
+                                    </div>
+                                );
+                            })}
+                        </div>
+                    </div>
+                </div>
             </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
+        );
+    }
 }