@zzish/math-rich-input 0.1.4 → 0.1.5

package/src/EquationEditor.jsx

@@ -1,52 +1,71 @@
-import React from 'react'
-import { addStyles, EditableMathField } from 'react-mathquill'
-import SymbolButton from './SymbolButton'
-import { getSymbolsForButtonArea, getLatexInsertionParams} from './equationEditorButtonsHelper.js';
+import React from "react";
+import { addStyles, EditableMathField } from "react-mathquill";
+import SymbolButton from "./SymbolButton";
+import {
+  getSymbolsForButtonArea,
+  getLatexInsertionParams,
+} from "./equationEditorButtonsHelper.js";
 
-import './EquationEditor.css';
+import "./EquationEditor.css";
 
 // Katex setup
 import katex from "katex";
-const MARK = "_M_A_R_K_"
+const MARK = "_M_A_R_K_";
 
 // MathQuill setup
-addStyles()
-const AUTO_OPERATOR_NAMES = 'sin cos tan sec cosec cot log ln lim min max'
-
+addStyles();
+const AUTO_OPERATOR_NAMES = "sin cos tan sec cosec cot log ln lim min max";
 
 // Recent button bar
-const RECENT_WEIGHT = 15
-const RECENT_DECAY_FACTOR = 0.95
-const RECENT_MAX = 11
-let GLOBAL_recentSymbols = []
-let GLOBAL_lastSymbols = ["","",""]
+const RECENT_WEIGHT = 15;
+const RECENT_DECAY_FACTOR = 0.95;
+const RECENT_MAX = 11;
+let GLOBAL_recentSymbols = [];
+let GLOBAL_lastSymbols = ["", "", ""];
 
 // Genreal constants
-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"]
-const TAB_NAMES_EXPERT = ["Common", "More", "Greek", "Expert"]
-const BUTTON_AREA_NAMES_EXPERT = ["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"}
+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",
+];
+const TAB_NAMES_EXPERT = ["Common", "More", "Greek", "Expert"];
+const BUTTON_AREA_NAMES_EXPERT = [
+  "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",
+};
 
 let GLOBAL_buttonAreasWidths = null;
 let GLOBAL_buttonAreasWidthsExpert = null;
-let GLOBAL_last_selected_tab = TAB_NAMES[0]
+let GLOBAL_last_selected_tab = TAB_NAMES[0];
 
 export default class EquationEditor extends React.Component {
-    
   constructor(props) {
     super(props);
     this.state = {
@@ -56,19 +75,19 @@ export default class EquationEditor extends React.Component {
       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)
-  }
+    this.handleInsertCallback(this.state.latex);
+  };
 
   handleCancel = () => {
-    this.handleCancelCallback()
-  }
-  
+    this.handleCancelCallback();
+  };
+
   prettifyLatex(latex) {
     // NB:  replaceAll not suported on safari
     // console.log("Before: "+latex)
@@ -84,295 +103,288 @@ export default class EquationEditor extends React.Component {
     // latex = latex.replaceAll("  "," ")
     // latex = latex.trim()
     // console.log("Prettified: "+latex)
-    return latex 
+    return latex;
   }
 
   handleChange = (mathQuill) => {
-    this.setState({latex:mathQuill.latex(),
-                   pretty:false})
-  }
+    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()
+        this.handleInsertCallback(this.state.latex);
+        e.preventDefault();
       }
     } catch (error) {
-      console.error(error)
+      console.error(error);
     }
-  }
+  };
 
   updateRecentSymbols(symbol) {
-    let recentSymbols = GLOBAL_recentSymbols
-    let symbolIndex = -1
-    let minIndex = -1
-    let min = 999999
+    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].name === symbol) symbolIndex = i;
       if (recentSymbols[i].count > 0)
-        recentSymbols[i].count = recentSymbols[i].count * RECENT_DECAY_FACTOR
+        recentSymbols[i].count = recentSymbols[i].count * RECENT_DECAY_FACTOR;
       if (recentSymbols[i].count <= min) {
-        min = recentSymbols[i].count
-        minIndex = i
+        min = recentSymbols[i].count;
+        minIndex = i;
       }
     }
     if (symbolIndex >= 0) {
-      recentSymbols[symbolIndex].count = recentSymbols[symbolIndex].count + RECENT_WEIGHT
+      recentSymbols[symbolIndex].count =
+        recentSymbols[symbolIndex].count + RECENT_WEIGHT;
     } else {
       if (recentSymbols.length >= RECENT_MAX) {
-        recentSymbols.splice(minIndex, 1)
+        recentSymbols.splice(minIndex, 1);
       }
-      recentSymbols.push({name:symbol, count:RECENT_WEIGHT})
+      recentSymbols.push({ name: symbol, 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)
+    GLOBAL_recentSymbols = recentSymbols;
+    GLOBAL_lastSymbols.pop();
+    GLOBAL_lastSymbols.unshift(symbol);
 
-
-    this.setState({recentSymbolsCount:this.state.recentSymbolsCount + 1})
+    this.setState({ recentSymbolsCount: this.state.recentSymbolsCount + 1 });
   }
 
   handleInsertSymbol = (symbol) => {
-    if (this.props.useExpertMode)
-      this.handleInsertSymbolKatex(symbol)
-    else
-      this.handleInsertSymbolMathQuill(symbol)
-  }
+    if (this.props.useExpertMode) this.handleInsertSymbolKatex(symbol);
+    else this.handleInsertSymbolMathQuill(symbol);
+  };
 
   isLetter = (char) => {
-    return ('a' <= char && char <= 'z') || ('A' <= char && char <= 'Z')
-  }
+    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
+    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
+    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
+    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    
+    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
+      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()
+      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)
+      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("##")
+      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
+          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
+          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("##", "#")
+          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
+        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,"#")
+      insert = insert.replace("#", MARK);
+      insert = insert.replaceAll("#", "");
+      insert = insert.replace(MARK, "#");
 
       // Construct new latex
-      let newLatex = 
-        oldLatex.substring(0,start) +
+      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("#")
+        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)
+        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()
-        })
+      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)
+      console.error(error);
+      console.log("Inserting: " + symbol);
+      console.log("into: " + this.latexInput.value);
+      console.log("at: " + start + ":" + end);
     }
-  }
-
+  };
 
   handleInsertSymbolMathQuill = (symbol) => {
     try {
-      this.updateRecentSymbols(symbol)
+      this.updateRecentSymbols(symbol);
 
-      let insert = getLatexInsertionParams(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
+        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)
+      if (insert.typedText) this.mathQuill.typedText(insert.mathQuillLatex);
+      else this.mathQuill.write(insert.mathQuillLatex);
 
-      this.mathQuill.focus()
+      this.mathQuill.focus();
 
       for (let i = 0; i < insert.moveCursor; i++)
-        this.mathQuill.keystroke('Right')
+        this.mathQuill.keystroke("Right");
       for (let i = 0; i > insert.moveCursor; i--)
-        this.mathQuill.keystroke('Left')
+        this.mathQuill.keystroke("Left");
     } catch (error) {
-      console.error(error)
-      console.log("Symbol: "+symbol)
+      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"})
-          }
+    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()
+    this.mathQuill = mathQuill;
+    mathQuill.focus();
   }
 
-  componentDidMount(){
+  componentDidMount() {
     // let thisComponentNode = ReactDOM.findDOMNode(this);
-    this.equationEditorDiv.addEventListener('keydown',this.handleKeyDown);
+    this.equationEditorDiv.addEventListener("keydown", this.handleKeyDown);
 
     // Restore scroll position for tab to last selected
-    let buttonAreas = this.symbolButtonAreasInnerContainer.childNodes
+    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"})
+      if (
+        buttonAreas[i].id === TAB_STARTS_AT_AREA_NAMED[GLOBAL_last_selected_tab]
+      ) {
+        buttonAreas[i].scrollIntoView({ behavior: "auto", inline: "start" });
       }
     }
   }
 
-  componentWillUnmount(){
+  componentWillUnmount() {
     // let thisComponentNode = ReactDOM.findDOMNode(this);
-    this.equationEditorDiv.removeEventListener('keydown',this.handleKeyDown);
+    this.equationEditorDiv.removeEventListener("keydown", this.handleKeyDown);
   }
 
   isMobile() {
     return (
-      (window.innerHeight > window.innerWidth) && 
-      (window.innerHeight < 820)) || (window.innerHeight < 500)
+      (window.innerHeight > window.innerWidth && window.innerHeight < 820) ||
+      window.innerHeight < 500
+    );
   }
 
-  isTouchDevice() { 
-    return ( 'ontouchstart' in window ) ||  
-           ( navigator.maxTouchPoints > 0 ) ||  
-           ( navigator.msMaxTouchPoints > 0 );
+  isTouchDevice() {
+    return (
+      "ontouchstart" in window ||
+      navigator.maxTouchPoints > 0 ||
+      navigator.msMaxTouchPoints > 0
+    );
   }
 
   handleCursorLeft = () => {
-    this.mathQuill.keystroke('Left')
-    this.mathQuill.focus()
-  }
+    this.mathQuill.keystroke("Left");
+    this.mathQuill.focus();
+  };
 
   handleCursorRight = () => {
-    this.mathQuill.keystroke('Right')
-    this.mathQuill.focus()
-  }
+    this.mathQuill.keystroke("Right");
+    this.mathQuill.focus();
+  };
 
   handleLatexInputChange = (event) => {
-    this.setState({latex:event.target.value,
-                  pretty:true})    
-  }
+    this.setState({ latex: event.target.value, pretty: true });
+  };
 
   renderLatexString = (latex) => {
-    
     const options = {
       children: "",
       displayMode: false,
@@ -385,199 +397,235 @@ export default class EquationEditor extends React.Component {
       minRuleThickness: 0,
       colorIsTextColor: false,
       strict: "warn",
-      trust: false
-    }
+      trust: false,
+    };
 
     try {
-        // returns HTML markup
-        return katex.renderToString(latex, options);
+      // 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";
+      console.error("Could not convert latex string to html: ", latex);
+      return "Error: Unable to render latex";
     }
   };
 
   render() {
-    console.log("Rendering EquationEditor. Latex: "+this.state.latex)
-    let katexHtml = null
-    let prettyLatex = null
+    console.log("Rendering EquationEditor. Latex: " + this.state.latex);
+    let katexHtml = null;
+    let prettyLatex = null;
     if (this.props.useExpertMode) {
-      katexHtml = this.renderLatexString(this.state.latex)
-      if (this.state.pretty)
-        prettyLatex = this.state.latex
+      katexHtml = this.renderLatexString(this.state.latex);
+      if (this.state.pretty) prettyLatex = this.state.latex;
       else {
-        prettyLatex = this.prettifyLatex(this.state.latex)
+        prettyLatex = this.prettifyLatex(this.state.latex);
       }
     }
 
-    let tabNames = TAB_NAMES
-    let buttonAreaNames = BUTTON_AREA_NAMES
-    let buttonAreaWidths = GLOBAL_buttonAreasWidths
+    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
+      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 
+    const recentButtons = GLOBAL_recentSymbols.slice(0, RECENT_MAX).map(
+      (symbol, index) => {
+        return (
+          <SymbolButton
             className="SymbolButton"
-            key={"recent=symbol-"+index}
+            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" 
+              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 = []
+      let widths = [];
       for (let i = 0; i < buttonAreaNames.length; i++) {
-        widths[i] = Math.ceil(getSymbolsForButtonArea(buttonAreaNames[i]).length/MAX_BUTTON_ROWS)
+        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 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>}
+        {!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>
-        </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.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
+        {/* 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() &&
+        {this.isMobile() && (
+          <button
+            className="cancelButton"
+            type="button"
+            onClick={this.handleCancel}
+          >
+            Cancel
+          </button>
+        )}
         <button
-          className="cancelButton"
-          type="button" onClick={this.handleCancel}>
-          Cancel
+          className="insertButton"
+          type="button"
+          onClick={this.handleInsert}
+        >
+          Insert
         </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>
-      }
 
+        {/* 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>
 
-      {/* 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-"+buttonAreaWidths[index]}>
-                  {button}
-                </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>
+    );
   }
-}
+}