@zzish/math-rich-input 0.1.48 → 0.1.49

package/src/EquationEditor.jsx

@@ -1,7 +1,10 @@
 import React from "react";
 import { addStyles, EditableMathField } from "react-mathquill";
 import SymbolButton from "./SymbolButton.jsx";
-import { getSymbolsForButtonArea, getLatexInsertionParams } from "./equationEditorButtonsHelper.js";
+import {
+  getSymbolsForButtonArea,
+  getLatexInsertionParams,
+} from "./equationEditorButtonsHelper.js";
 
 import "./EquationEditor.css";
 
@@ -24,38 +27,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;
@@ -63,536 +66,563 @@ 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,
-        };
-
-        this.mathQuill = null;
-        this.handleInsertCallback = props.handleInsert;
-        this.handleCancelCallback = props.handleCancel;
-    }
-
-    handleInsert = () => {
-        this.handleInsertCallback(this.state.latex);
+  constructor(props) {
+    super(props);
+    this.state = {
+      latex: props.latex,
+      pretty: false,
+      selectedTab: GLOBAL_last_selected_tab,
+      recentSymbolsCount: 0,
     };
 
-    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;
+    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) => {
+    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 {
+      if (recentSymbols.length >= RECENT_MAX) {
+        recentSymbols.splice(minIndex, 1);
+      }
+      recentSymbols.push({ name: symbol, count: RECENT_WEIGHT });
     }
 
-    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;
+    // 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;
         } else {
-            if (recentSymbols.length >= RECENT_MAX) {
-                recentSymbols.splice(minIndex, 1);
-            }
-            recentSymbols.push({ name: symbol, count: RECENT_WEIGHT });
+          insert = insert.replace("##", "#");
         }
-
-        // 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 });
+      }
+      // 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);
     }
+  };
 
-    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;
+  handleInsertSymbolMathQuill = (symbol) => {
+    try {
+      this.updateRecentSymbols(symbol);
 
-        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;
+      let insert = getLatexInsertionParams(symbol);
+      if (insert === null || insert === undefined) {
+        console.err(
+          "Could not get latex insertion parameters for symbol: " + symbol
+        );
+        this.mathQuill.focus();
+        return;
+      }
 
-        // 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 (insert.typedText) this.mathQuill.typedText(insert.mathQuillLatex);
+      else this.mathQuill.write(insert.mathQuillLatex);
 
-        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;
+      this.mathQuill.focus();
 
-        return -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);
     }
-
-    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);
+  };
+
+  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;
+  }
+
+  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,
     };
 
-    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();
+    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";
     }
-
-    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" });
-            }
-        }
+  };
+
+  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);
+      }
     }
 
-    componentWillUnmount() {
-        // let thisComponentNode = ReactDOM.findDOMNode(this);
-        this.equationEditorDiv.removeEventListener("keydown", this.handleKeyDown);
+    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;
     }
 
-    isMobile() {
+    const recentButtons = GLOBAL_recentSymbols.slice(0, RECENT_MAX).map(
+      (symbol, index) => {
         return (
-            (window.innerHeight > window.innerWidth && window.innerHeight < 820) ||
-            window.innerHeight < 500
+          <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)}
+          />
         );
+      }
+    );
+
+    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;
     }
 
-    isTouchDevice() {
+    const buttonAreasButtons = buttonAreaNames.map((buttonArea, index) => {
+      return getSymbolsForButtonArea(buttonArea).map((symbol, index) => {
         return (
-            "ontouchstart" in window ||
-            navigator.maxTouchPoints > 0 ||
-            navigator.msMaxTouchPoints > 0
+          <SymbolButton
+            className="SymbolButton"
+            key={buttonArea + "-symbol-" + index}
+            highlight={buttonArea.toLowerCase()}
+            symbol={symbol}
+            handleClick={() => this.handleInsertSymbol(symbol)}
+          />
         );
-    }
-
-    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)}
-                />
-            );
-        });
-
-        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) => {
-                return (
-                    <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 
+    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>
+        {!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>
 
-                {/* Cancel and submit button row. Cancel button is only shown on mobile devices as
+            {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>
+        {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>
+    );
+  }
 }