@zzish/math-rich-input 0.1.5 → 0.1.7

package/src/MathRichInput.jsx

@@ -1,10 +1,10 @@
-import React from 'react'
+import React from "react";
 
 import katex from "katex";
-import {setupKatex} from "./katexHelper"
+import { setupKatex } from "./katexHelper";
 
-import EquationEditorModal from './EquationEditorModal';
-import Toolbar from './Toolbar'
+import EquationEditorModal from "./EquationEditorModal";
+import Toolbar from "./Toolbar";
 
 import {
   isKatexNode,
@@ -12,7 +12,7 @@ import {
   removeEncodingIfPlainText,
   rawTextToHtml,
   getLatex,
-  setRangeParams, 
+  setRangeParams,
   getRangeParams,
   getNodeTextLength,
   findNodeWithIndex,
@@ -25,51 +25,50 @@ import {
   replaceStringBeforeMarks,
   insertCharacterBeforeMarks,
   removeMarks,
-  replaceMarksWithMath} 
-  from './mathRichInputHelper';
+  replaceMarksWithMath,
+} from "./mathRichInputHelper";
 
-import './MathRichInput.css';
-import AccentBar from './AccentBar';
+import "./MathRichInput.css";
+import AccentBar from "./AccentBar";
 
-const MIME_TYPE_PLAIN_TEXT = "text/plain"
-const MIME_TYPE_HTML = "text/html"
-const MIME_TYPE_TEX = "application/x-tex"
-const MIME_TYPE_ZZISH_HTML_MATH = "application/x-zzish-html-math"
+const MIME_TYPE_PLAIN_TEXT = "text/plain";
+const MIME_TYPE_HTML = "text/html";
+const MIME_TYPE_TEX = "application/x-tex";
+const MIME_TYPE_ZZISH_HTML_MATH = "application/x-zzish-html-math";
 
-const SMALL_SPACE_CHAR_CODE = 8203
-const SMALL_SPACE = String.fromCharCode(SMALL_SPACE_CHAR_CODE)
-const SMALL_SPACE_LENGTH = SMALL_SPACE.length
+const SMALL_SPACE_CHAR_CODE = 8203;
+const SMALL_SPACE = String.fromCharCode(SMALL_SPACE_CHAR_CODE);
+const SMALL_SPACE_LENGTH = SMALL_SPACE.length;
 // const SMALL_SPACE_REG_EXP = new RegExp(SMALL_SPACE, "g")
 
-const MARK = "_M_A_R_K_"
-const MARK_REG_EXP = new RegExp(MARK, "g")
+const MARK = "_M_A_R_K_";
+const MARK_REG_EXP = new RegExp(MARK, "g");
 
 // const LATEX_MARKER_START = "<annotation encoding=\"application/x-tex\">"
 // const LATEX_MARKER_END = "</annotation>"
 
-const MAX_HISTORY_LENGTH = 100
+const MAX_HISTORY_LENGTH = 100;
 
 const DEFAULT_OPTIONS = {
-  useExpertMode:false, 
-  selectedTab: null
-}
+  useExpertMode: false,
+  selectedTab: null,
+};
 
 export default class MathRichInput extends React.Component {
-    
   constructor(props) {
     super(props);
     this.state = {
       showEquationEditor: false,
       equationEditorLatex: "",
-      showAccentBar:false,
+      showAccentBar: false,
       activeButtons: {
         bold: false,
         italic: false,
         underline: false,
         subscript: false,
-        superscript: false
+        superscript: false,
       },
-      keyPressed:""
+      keyPressed: "",
     };
 
     // this.handleInput   = this.handleInput.bind(this);
@@ -77,66 +76,81 @@ export default class MathRichInput extends React.Component {
     // this.handleKeyUp   = this.handleKeyUp.bind(this);
 
     // Remember the last key pressed
-    this.keyPressed = null; 
+    this.keyPressed = null;
     this.keyPressStartTime = -1;
 
     // This gets updated in coomponent did mount, used to position the toolbar correctly
-    this.translateToolbar = ""; 
+    this.translateToolbar = "";
 
     // Whether the text contains HTML or Maths
-    this.isHtml = false
-    this.hasMath = false
+    this.isHtml = false;
+    this.hasMath = false;
 
     // Elements that need to be set before the equation editor is shown
-    this.markedRawText = null
-    this.oldRangeParams = {startNodeIndex:0,startOffset:0,endNodeIndex:0,endOffset:0};
-    this.moveCursorOnInsert = false
+    this.markedRawText = null;
+    this.oldRangeParams = {
+      startNodeIndex: 0,
+      startOffset: 0,
+      endNodeIndex: 0,
+      endOffset: 0,
+    };
+    this.moveCursorOnInsert = false;
 
     // Elements defining the current state of range
-    this.rangeParamsToSetAfterComponentUpdate = null // Set this to update the selection after rendering
-    this.lastSetRangeParmas = null // This is set automatically each time the range params are set with setRangeParams
+    this.rangeParamsToSetAfterComponentUpdate = null; // Set this to update the selection after rendering
+    this.lastSetRangeParmas = null; // This is set automatically each time the range params are set with setRangeParams
 
-    this.lastSetActiveButtons = null
+    this.lastSetActiveButtons = null;
 
-    this.onChangeCallback = this.props.onChange
+    this.onChangeCallback = this.props.onChange;
 
     // set the initialHistoryState the first time an action is done that allows us to identify the cursor position
     // 1. When the first mouse click is released (see onMouseUp)
     // 2. When the first key is pressed (see handleKeyDown)
-    this.initialHistoryState = null
-    this.undoHistory = [] 
-    this.redoHistory = []
+    this.initialHistoryState = null;
+    this.undoHistory = [];
+    this.redoHistory = [];
   }
 
   enableFontStyling() {
-    if (this.props.outputTex !== null && this.props.outputTex !== undefined &&
-        this.props.outputTex === true)
-      return false
-    else if (this.props.enableFontStyling !== null && this.props.enableFontStyling !== undefined)
-      return this.props.enableFontStyling
-    else
-      return true   
+    if (
+      this.props.outputTex !== null &&
+      this.props.outputTex !== undefined &&
+      this.props.outputTex === true
+    )
+      return false;
+    else if (
+      this.props.enableFontStyling !== null &&
+      this.props.enableFontStyling !== undefined
+    )
+      return this.props.enableFontStyling;
+    else return true;
   }
 
   enableMultiline() {
-    if (this.props.outputTex !== null && this.props.outputTex !== undefined &&
-      this.props.outputTex === true)
-      return false
-    else if (this.props.enableMultiline !== null && this.props.enableMultiline !== undefined)
-      return this.props.enableMultiline
-    else
-      return true   
+    if (
+      this.props.outputTex !== null &&
+      this.props.outputTex !== undefined &&
+      this.props.outputTex === true
+    )
+      return false;
+    else if (
+      this.props.enableMultiline !== null &&
+      this.props.enableMultiline !== undefined
+    )
+      return this.props.enableMultiline;
+    else return true;
   }
 
   enableHtml() {
-    let outputTex = this.props.outputTex ?? false
-    return !outputTex
+    let outputTex = this.props.outputTex ?? false;
+    return !outputTex;
   }
 
   enableMath() {
     if (this.props.enableMath !== null && this.props.enableMath !== undefined)
-      return this.props.enableMath
-    return true   
+      return this.props.enableMath;
+    return true;
   }
 
   // static isHtml(text) {
@@ -147,33 +161,34 @@ export default class MathRichInput extends React.Component {
   //           /<\s*sup[^>]*>(.*?)<\s*\/\s*sup\s*>/i.test(text) ||
   //           /<\s*sub[^>]*>(.*?)<\s*\/\s*sub\s*>/i.test(text)
   // }
-  
+
   getMimeType(hasHtml, hasMath) {
-    let outputTex = this.props.outputTex ?? false
-    let outputPlainText = this.props.outputPlainText ?? false
-    
+    let outputTex = this.props.outputTex ?? false;
+    let outputPlainText = this.props.outputPlainText ?? false;
+
     if (outputTex) {
-      if (hasMath || !outputPlainText)
-        return MIME_TYPE_TEX
-      else 
-        return MIME_TYPE_PLAIN_TEXT
+      if (hasMath || !outputPlainText) return MIME_TYPE_TEX;
+      else return MIME_TYPE_PLAIN_TEXT;
     }
 
-    if (hasMath)
-      return MIME_TYPE_ZZISH_HTML_MATH
-    if (hasHtml || !outputPlainText)
-      return MIME_TYPE_HTML
+    if (hasMath) return MIME_TYPE_ZZISH_HTML_MATH;
+    if (hasHtml || !outputPlainText) return MIME_TYPE_HTML;
 
-    return MIME_TYPE_PLAIN_TEXT
+    return MIME_TYPE_PLAIN_TEXT;
   }
 
   _countNodeTypes = () => {
-    return countNodeTypes(this.editableDiv)
-  }
-
-  applyChangesToComponent = (value, mimeType, rangeParams, 
-                             isExpertMode, selectedTab) => {
-    console.log("applyChangesToComponent")
+    return countNodeTypes(this.editableDiv);
+  };
+
+  applyChangesToComponent = (
+    value,
+    mimeType,
+    rangeParams,
+    isExpertMode,
+    selectedTab
+  ) => {
+    console.log("applyChangesToComponent");
 
     // if (this.props.outputTex !== null && this.props.outputTex !== undefined && this.props.outputTex) {
     //   if (mimeType === MIME_TYPE_HTML) {
@@ -185,163 +200,179 @@ export default class MathRichInput extends React.Component {
     //     mimeType = MIME_TYPE_TEX
     //   }
     // }
-              
+
     // rangeParams, isExpertMode and selectedTab can be null, in which case we will set them
-    if (rangeParams === null)
-      rangeParams = this.lastSetRangeParams
-    else
-      this.rangeParamsToSetAfterComponentUpdate = rangeParams
-
-    let options = this.props.options || DEFAULT_OPTIONS
-    if (isExpertMode === null)
-      isExpertMode = options.isExpertMode
-    if (selectedTab === null)
-      selectedTab = options.selectedTab
-    
+    if (rangeParams === null) rangeParams = this.lastSetRangeParams;
+    else this.rangeParamsToSetAfterComponentUpdate = rangeParams;
+
+    let options = this.props.options || DEFAULT_OPTIONS;
+    if (isExpertMode === null) isExpertMode = options.isExpertMode;
+    if (selectedTab === null) selectedTab = options.selectedTab;
+
     // Add this to the history
-    this.undoHistory.push({value, mimeType, rangeParams})
-    if (this.undoHistory.length > MAX_HISTORY_LENGTH)
-      this.undoHistory.shift()
+    this.undoHistory.push({ value, mimeType, rangeParams });
+    if (this.undoHistory.length > MAX_HISTORY_LENGTH) this.undoHistory.shift();
 
     // Call the parent handler to apply the changes
-    this.onChangeCallback({value, mimeType},
-                          {isExpertMode, selectedTab})
-  }
+    this.onChangeCallback({ value, mimeType }, { isExpertMode, selectedTab });
+  };
 
   initialiseHistory = () => {
     if (this.initialHistoryState == null)
-      this.initialHistoryState = {value:this.props.value, 
-                              mimeType:this.props.mimeType, 
-                              rangeParams:this._getRangeParams()}
-  }
+      this.initialHistoryState = {
+        value: this.props.value,
+        mimeType: this.props.mimeType,
+        rangeParams: this._getRangeParams(),
+      };
+  };
 
   resetHistoryRedo = () => {
-    this.redoHistory = []    
-  }
+    this.redoHistory = [];
+  };
 
   deepEqual = (v1, v2) => {
-    if (v1 === v2) return true
+    if (v1 === v2) return true;
+
+    if (
+      v1 == null ||
+      v2 == null ||
+      typeof v1 != "object" ||
+      typeof v2 != "object"
+    )
+      return false;
 
-    if (v1 == null || v2 == null || typeof v1 != "object" || typeof v2 != "object") return false
+    let v1keys = Object.keys(v1);
+    let v2keys = Object.keys(v2);
+    if (v1keys.length !== v2keys.length) return false;
 
-    let v1keys = Object.keys(v1)
-    let v2keys = Object.keys(v2)
-    if (v1keys.length !== v2keys.length) return false
-    
     for (let key of v1keys) {
-      if (!v2keys.includes(key) || !this.deepEqual(v1[key], v2[key])) return false
+      if (!v2keys.includes(key) || !this.deepEqual(v1[key], v2[key]))
+        return false;
     }
-    return true
-  }
+    return true;
+  };
 
   undo = () => {
-    console.log("undo")
-    console.log(this.undoHistory)
-    const currentState = this.undoHistory.pop()
-    
-    let previousState = this.undoHistory.pop()
+    console.log("undo");
+    console.log(this.undoHistory);
+    const currentState = this.undoHistory.pop();
+
+    let previousState = this.undoHistory.pop();
     if (previousState === null || previousState === undefined) {
-      previousState = this.initialHistoryState
+      previousState = this.initialHistoryState;
     }
 
     if (this.redoHistory.length > 0) {
-      let redoLast = this.redoHistory[this.redoHistory.length-1]
+      let redoLast = this.redoHistory[this.redoHistory.length - 1];
       if (!this.deepEqual(redoLast, currentState))
-        this.redoHistory.push(currentState)
-    } else
-      this.redoHistory.push(currentState)
-    
-    console.log(previousState)
+        this.redoHistory.push(currentState);
+    } else this.redoHistory.push(currentState);
 
-    this.applyChangesToComponent(previousState.value, previousState.mimeType, previousState.rangeParams)
-  }
+    console.log(previousState);
+
+    this.applyChangesToComponent(
+      previousState.value,
+      previousState.mimeType,
+      previousState.rangeParams
+    );
+  };
 
   redo = () => {
-    const redoState = this.redoHistory.pop()    
-    if (redoState !== null  & redoState !== undefined) {
-      this.applyChangesToComponent(redoState.value, redoState.mimeType, redoState.rangeParams)
+    const redoState = this.redoHistory.pop();
+    if ((redoState !== null) & (redoState !== undefined)) {
+      this.applyChangesToComponent(
+        redoState.value,
+        redoState.mimeType,
+        redoState.rangeParams
+      );
     }
-  }
+  };
 
   setOldRangeParams(params) {
     // console.log("Setting old range params: "+params.startNodeIndex+"->"+params.startOffset)
-    this.oldRangeParams = params
+    this.oldRangeParams = params;
   }
 
   getOldRangeParams() {
     if (this.oldRangeParams === null || this.oldRangeParams === undefined)
-      return null
-    let params = {...this.oldRangeParams}
+      return null;
+    let params = { ...this.oldRangeParams };
     // console.log("Getting old range params: "+params.startNodeIndex+"->"+params.startOffset)
-    return params
+    return params;
   }
 
-  _getRangeParams(editableDiv=null) {
+  _getRangeParams(editableDiv = null) {
     // console.log("_getRangeParams")
-    if (editableDiv === null)
-      editableDiv = this.editableDiv
-    let rangeParams = getRangeParams(editableDiv)
+    if (editableDiv === null) editableDiv = this.editableDiv;
+    let rangeParams = getRangeParams(editableDiv);
     // console.log(rangeParams)
-    return rangeParams
+    return rangeParams;
   }
 
   _setRangeParams = (params) => {
     try {
-      console.log("_setRangeParams")
-      console.log(params)
-      setRangeParams(this.editableDiv, params)
+      console.log("_setRangeParams");
+      console.log(params);
+      setRangeParams(this.editableDiv, params);
 
-      this.setOldRangeParams(params)
-      this.lastSetRangeParmas = params
+      this.setOldRangeParams(params);
+      this.lastSetRangeParmas = params;
     } catch (error) {
-      console.error(error)
-      console.log(this.editableDiv.childNodes)
+      console.error(error);
+      console.log(this.editableDiv.childNodes);
     }
-  }
+  };
 
   _findNodeWithIndex(index) {
-    return findNodeWithIndex(this.editableDiv, index)
+    return findNodeWithIndex(this.editableDiv, index);
   }
 
   _findIndexOfNode(node) {
-    return findIndexOfNode(this.editableDiv, node)
+    return findIndexOfNode(this.editableDiv, node);
   }
 
   _findFirstTextNode() {
-    return findFirstTextNode(this.editableDiv)
+    return findFirstTextNode(this.editableDiv);
   }
 
   handleKeyDownBackspace = (e) => {
-    let rangeParams = this._getRangeParams()
-    let start_node_index = rangeParams.startNodeIndex
-    let end_node_index = rangeParams.endNodeIndex
-    let start_offset = rangeParams.startOffset
-    let end_offset = rangeParams.endOffset
-
-    if (start_node_index < 0) // Empty input field
-      return
-
-    let startNode = this._findNodeWithIndex(start_node_index)
-    let endNode = this._findNodeWithIndex(end_node_index)
-    
+    let rangeParams = this._getRangeParams();
+    let start_node_index = rangeParams.startNodeIndex;
+    let end_node_index = rangeParams.endNodeIndex;
+    let start_offset = rangeParams.startOffset;
+    let end_offset = rangeParams.endOffset;
+
+    if (start_node_index < 0)
+      // Empty input field
+      return;
+
+    let startNode = this._findNodeWithIndex(start_node_index);
+    let endNode = this._findNodeWithIndex(end_node_index);
+
     // Prevent backspace if start or end of selected region is in a katex node
     if (isKatexNode(startNode) || isKatexNode(endNode)) {
-      console.error("Backspace inside latex node. This shouln't happen.")
-      e.preventDefault()
+      console.error("Backspace inside latex node. This shouln't happen.");
+      e.preventDefault();
     }
 
     // Handle special case of deleting last character when in bold etc text
     // in order to resolve a bug
-    let deleteToEmpty = false
-    if (start_node_index === 0 && start_offset === 1 && 
-        end_node_index === 0 && end_offset === 1) {
+    let deleteToEmpty = false;
+    if (
+      start_node_index === 0 &&
+      start_offset === 1 &&
+      end_node_index === 0 &&
+      end_offset === 1
+    ) {
       if (!isKatexNode(startNode) && getNodeTextLength(startNode) === 1)
-        deleteToEmpty = true
+        deleteToEmpty = true;
     }
     if (start_node_index === 0 && start_offset === 0 && end_node_index !== 0) {
-      if (getNodeTextLength(endNode) === end_offset && 
-          this._findNodeWithIndex(end_node_index + 1) === null)
-        deleteToEmpty = true
+      if (
+        getNodeTextLength(endNode) === end_offset &&
+        this._findNodeWithIndex(end_node_index + 1) === null
+      )
+        deleteToEmpty = true;
     }
 
     if (deleteToEmpty) {
@@ -349,32 +380,37 @@ export default class MathRichInput extends React.Component {
         startNodeIndex: 0,
         startOffset: 0,
         endNodeIndex: 0,
-        endOffset: 0
-      }
-      this.applyChangesToComponent("", MIME_TYPE_PLAIN_TEXT, new_rangeParams, 
-                                    this.props.useExpertMode, this.props.selectedTab)
-      return
+        endOffset: 0,
+      };
+      this.applyChangesToComponent(
+        "",
+        MIME_TYPE_PLAIN_TEXT,
+        new_rangeParams,
+        this.props.useExpertMode,
+        this.props.selectedTab
+      );
+      return;
     }
 
     // Treat backspace normally in the following situations
-    if (start_offset > 1)
-      return
-    if (start_node_index <= 0)
-      return
-    if (start_node_index !== rangeParams.endNodeIndex ||
-        start_offset !== rangeParams.endOffset)
-      return
-    
+    if (start_offset > 1) return;
+    if (start_node_index <= 0) return;
+    if (
+      start_node_index !== rangeParams.endNodeIndex ||
+      start_offset !== rangeParams.endOffset
+    )
+      return;
+
     // At this point we must have start_offset === 0 or 1 and a previous node
 
-    let prevNode = this._findNodeWithIndex(start_node_index-1)
+    let prevNode = this._findNodeWithIndex(start_node_index - 1);
 
     if (!isKatexNode(prevNode)) {
       if (this.nodeStartsWithSmallSpace(startNode)) {
-        this.removeNewLine()
-        e.preventDefault()
+        this.removeNewLine();
+        e.preventDefault();
       }
-      return
+      return;
     }
 
     // The previous node is a katex node
@@ -383,994 +419,1120 @@ export default class MathRichInput extends React.Component {
     // console.log("Deleting content before: "+start_node_index+"->"+start_offset)
     // console.log(rangeParams)
 
-    let node = prevNode
+    let node = prevNode;
     let new_index = 0;
     let new_offset = 0;
 
-    // Note that if startNodeIndex == 2, then that means that the latex node is at the start 
+    // Note that if startNodeIndex == 2, then that means that the latex node is at the start
     // of the whole input at index 1. This is because we insert a SMALL_SPACE
     // at the beginning in index 0, if the whole input starts with a latex node
     if (start_node_index === 2) {
       if (this.inputStartsWithSmallSpace()) {
-        new_index = 0
-        new_offset = 0
+        new_index = 0;
+        new_offset = 0;
       } else {
-        new_index = 0
-        new_offset = getNodeTextLength(this._findFirstTextNode())
+        new_index = 0;
+        new_offset = getNodeTextLength(this._findFirstTextNode());
       }
     } else {
-      new_index = start_node_index - 2
-      let new_node = this._findNodeWithIndex(new_index)
+      new_index = start_node_index - 2;
+      let new_node = this._findNodeWithIndex(new_index);
       if (isKatexNode(new_node)) {
-        console.error("Two adjacent latex nodes. This should not happen!")
-        new_index = 0
-        new_offset = 0
+        console.error("Two adjacent latex nodes. This should not happen!");
+        new_index = 0;
+        new_offset = 0;
       }
-      new_node = this._findNodeWithIndex(new_index)
-      new_offset = getNodeTextLength(new_node)
-      if (new_offset < 0)
-        new_offset = 0
+      new_node = this._findNodeWithIndex(new_index);
+      new_offset = getNodeTextLength(new_node);
+      if (new_offset < 0) new_offset = 0;
     }
 
     let new_rangeParams = {
       startNodeIndex: new_index,
       startOffset: new_offset,
       endNodeIndex: new_index,
-      endOffset: new_offset
-    }
+      endOffset: new_offset,
+    };
 
     // OK, time to delete the katex node!
-    node.parentNode.removeChild(node)
-    let raw_text = elementToMarkedRawText(this.editableDiv, null, 0, this.enableHtml())
+    node.parentNode.removeChild(node);
+    let raw_text = elementToMarkedRawText(
+      this.editableDiv,
+      null,
+      0,
+      this.enableHtml()
+    );
     // console.log("After deleting katex: "+raw_text)
 
-    let nodeCounts = this._countNodeTypes()
-    let mimeType = this.getMimeType(nodeCounts.html > 0, nodeCounts.math > 0)
-    raw_text = removeEncodingIfPlainText(raw_text, mimeType, this.enableHtml())
+    let nodeCounts = this._countNodeTypes();
+    let mimeType = this.getMimeType(nodeCounts.html > 0, nodeCounts.math > 0);
+    raw_text = removeEncodingIfPlainText(raw_text, mimeType, this.enableHtml());
+
+    this.applyChangesToComponent(
+      raw_text,
+      mimeType,
+      new_rangeParams,
+      this.props.useExpertMode,
+      this.props.selectedTab
+    );
 
-    this.applyChangesToComponent(raw_text, mimeType, new_rangeParams, 
-                                this.props.useExpertMode, this.props.selectedTab)
-    
     // Consume the event
-    e.preventDefault()
-  }  
+    e.preventDefault();
+  };
 
   nodeStartsWithSmallSpace(node) {
-    if(node.nodeValue !== null && node.nodeValue !== undefined && node.nodeValue.length > 0 &&
-      node.nodeValue.charAt(0) === SMALL_SPACE)
-       return true
-
-    return false
+    if (
+      node.nodeValue !== null &&
+      node.nodeValue !== undefined &&
+      node.nodeValue.length > 0 &&
+      node.nodeValue.charAt(0) === SMALL_SPACE
+    )
+      return true;
+
+    return false;
   }
 
   inputStartsWithSmallSpace = () => {
-    return startsWithSmallSpace(this.editableDiv)
-  }
+    return startsWithSmallSpace(this.editableDiv);
+  };
 
   handleKeyDownArrowLeft = (e) => {
-    let rangeParams = this._getRangeParams()
-    let index = rangeParams.startNodeIndex
-    let offset = rangeParams.startOffset
+    let rangeParams = this._getRangeParams();
+    let index = rangeParams.startNodeIndex;
+    let offset = rangeParams.startOffset;
 
     // console.log("Old: "+index+"->"+offset)
- 
+
     // The user shouldn't be in a katex node, but lets deal with it anyway
-    let node = this._findNodeWithIndex(index)
+    let node = this._findNodeWithIndex(index);
     if (isKatexNode(node)) {
-      console.warn("Cursor is inside katex node")
-      let new_index = index-1 // Jump out of the latex node
-      let prev_node = this._findNodeWithIndex(index-1)
-      let new_offset = getNodeTextLength(prev_node)
+      console.warn("Cursor is inside katex node");
+      let new_index = index - 1; // Jump out of the latex node
+      let prev_node = this._findNodeWithIndex(index - 1);
+      let new_offset = getNodeTextLength(prev_node);
 
       let new_rangeParams = {
         startNodeIndex: new_index,
         startOffset: new_offset,
         endNodeIndex: new_index,
-        endOffset: new_offset
-      }
-      this._setRangeParams(new_rangeParams)
-      e.preventDefault()
-      return      
+        endOffset: new_offset,
+      };
+      this._setRangeParams(new_rangeParams);
+      e.preventDefault();
+      return;
     }
 
-    if (offset > 2)
-      return
+    if (offset > 2) return;
 
-    let new_index = -1
-    let new_offset = -1
+    let new_index = -1;
+    let new_offset = -1;
 
     // Deal with case of inserted small space at start of <p> element or after katex node
     if (offset === 2) {
-      new_index = index
+      new_index = index;
       if (this.nodeStartsWithSmallSpace(node)) {
-        if (index > 0 && isKatexNode(this._findNodeWithIndex(index-1)))
-          new_offset = 1
-        else
-          new_offset = 0
-      } else
-        new_offset = 1
+        if (index > 0 && isKatexNode(this._findNodeWithIndex(index - 1)))
+          new_offset = 1;
+        else new_offset = 0;
+      } else new_offset = 1;
     }
-    
+
     if (offset === 1) {
       if (this.nodeStartsWithSmallSpace(node)) {
         if (index === 0) {
-          e.preventDefault()
-          return
+          e.preventDefault();
+          return;
         }
-        let prev_node = this._findNodeWithIndex(index-1)
-        if (index >= 2 && isKatexNode(prev_node))
-          new_index = index - 2
-        else
-          new_index = index - 1
+        let prev_node = this._findNodeWithIndex(index - 1);
+        if (index >= 2 && isKatexNode(prev_node)) new_index = index - 2;
+        else new_index = index - 1;
 
-        let new_node = this._findNodeWithIndex(new_index)
-        new_offset = getNodeTextLength(new_node)
+        let new_node = this._findNodeWithIndex(new_index);
+        new_offset = getNodeTextLength(new_node);
       } else {
-        new_index = index
-        new_offset = 0
+        new_index = index;
+        new_offset = 0;
       }
     }
 
     if (offset === 0) {
-      let prev_node = this._findNodeWithIndex(index-1)
-      if (index >= 2 && isKatexNode(prev_node))
-        new_index = index - 2
-      else
-        new_index = index - 1
-      let new_node = this._findNodeWithIndex(new_index)
-      new_offset = getNodeTextLength(new_node)
+      let prev_node = this._findNodeWithIndex(index - 1);
+      if (index >= 2 && isKatexNode(prev_node)) new_index = index - 2;
+      else new_index = index - 1;
+      let new_node = this._findNodeWithIndex(new_index);
+      new_offset = getNodeTextLength(new_node);
       if (new_offset === 1) {
         if (this.nodeStartsWithSmallSpace(new_node)) {
-          if (index > 0 && isKatexNode(this._findNodeWithIndex(index-1)))
-            new_offset = 1
-          else
-            new_offset = 0
+          if (index > 0 && isKatexNode(this._findNodeWithIndex(index - 1)))
+            new_offset = 1;
+          else new_offset = 0;
         }
       }
     }
 
-
     // Move cursor to start of field if in starting small space
-    if (new_index === 0 && new_offset === 1 && this.inputStartsWithSmallSpace()) {
-      new_offset = 0
+    if (
+      new_index === 0 &&
+      new_offset === 1 &&
+      this.inputStartsWithSmallSpace()
+    ) {
+      new_offset = 0;
     }
 
-    if (new_index === -1 || new_offset === -1)
-      return
+    if (new_index === -1 || new_offset === -1) return;
 
     let new_rangeParams = {
       startNodeIndex: new_index,
       startOffset: new_offset,
       endNodeIndex: new_index,
-      endOffset: new_offset
-    }
-    this._setRangeParams(new_rangeParams)
+      endOffset: new_offset,
+    };
+    this._setRangeParams(new_rangeParams);
 
-    e.preventDefault()
-  }
+    e.preventDefault();
+  };
 
   handleKeyDownArrowRight = (e) => {
     // console.log("handleKeyDownArrowRight")
-    let rangeParams = this._getRangeParams()
-    let index = rangeParams.startNodeIndex
-    let offset = rangeParams.startOffset
+    let rangeParams = this._getRangeParams();
+    let index = rangeParams.startNodeIndex;
+    let offset = rangeParams.startOffset;
 
-    if (index < 0) // Empty input field
-      return
+    if (index < 0)
+      // Empty input field
+      return;
 
-    let node = this._findNodeWithIndex(index)
-    let length = getNodeTextLength(node)
+    let node = this._findNodeWithIndex(index);
+    let length = getNodeTextLength(node);
 
     // The user shouldn't be in a katex node, but lets deal with it anyway
     if (isKatexNode(node)) {
-      console.warn("Cursor is inside katex node")
-      let new_index = index+1 // Jump out of the latex node
-      let new_offset = SMALL_SPACE_LENGTH // As there will be a SMALL_SPACE at the start of the text node
+      console.warn("Cursor is inside katex node");
+      let new_index = index + 1; // Jump out of the latex node
+      let new_offset = SMALL_SPACE_LENGTH; // As there will be a SMALL_SPACE at the start of the text node
 
       let new_rangeParams = {
         startNodeIndex: new_index,
         startOffset: new_offset,
         endNodeIndex: new_index,
-        endOffset: new_offset
-      }
-      this._setRangeParams(new_rangeParams)
-      e.preventDefault()
-      return      
+        endOffset: new_offset,
+      };
+      this._setRangeParams(new_rangeParams);
+      e.preventDefault();
+      return;
     }
 
     // Deal with case of inserted small space at start of <p> element
     if (offset === 0) {
       if (this.nodeStartsWithSmallSpace(node)) {
-        console.log("Offset = 0 and node starts with small space")
-        let new_index = -1
-        let new_offset = -1
-      
+        console.log("Offset = 0 and node starts with small space");
+        let new_index = -1;
+        let new_offset = -1;
+
         if (node.nodeValue.length > 1) {
-          new_index = index
-          new_offset = SMALL_SPACE_LENGTH + 1
+          new_index = index;
+          new_offset = SMALL_SPACE_LENGTH + 1;
         } else {
-          new_index = index + 1
-          let next_node = this._findNodeWithIndex(new_index)
+          new_index = index + 1;
+          let next_node = this._findNodeWithIndex(new_index);
           if (next_node !== null) {
             if (isKatexNode(next_node)) {
-              new_index = index + 2
-              new_offset = SMALL_SPACE_LENGTH
+              new_index = index + 2;
+              new_offset = SMALL_SPACE_LENGTH;
             } else {
-              new_index = index + 1
-              new_offset = 0
+              new_index = index + 1;
+              new_offset = 0;
             }
           } else {
-            new_index = index
-            new_offset = offset
-          }    
+            new_index = index;
+            new_offset = offset;
+          }
         }
         let new_rangeParams = {
           startNodeIndex: new_index,
           startOffset: new_offset,
           endNodeIndex: new_index,
-          endOffset: new_offset
-        }
-        console.log(new_rangeParams)
-        this._setRangeParams(new_rangeParams)
-  
-        e.preventDefault()
-        return  
+          endOffset: new_offset,
+        };
+        console.log(new_rangeParams);
+        this._setRangeParams(new_rangeParams);
+
+        e.preventDefault();
+        return;
       }
     }
 
-
     // If at the end of a text node
-    if (offset === length || (index === 0 && this.inputStartsWithSmallSpace())) {
-      let next_node = this._findNodeWithIndex(index+1)
+    if (
+      offset === length ||
+      (index === 0 && this.inputStartsWithSmallSpace())
+    ) {
+      let next_node = this._findNodeWithIndex(index + 1);
 
       // If there is no next node, then we can't move, so do the default action
       // If the next node is a normal node, do the default action
-      if (next_node === null || !isKatexNode(next_node))
-        return
+      if (next_node === null || !isKatexNode(next_node)) return;
 
-      let new_index = index+2 // Jump over the latex node
-      let new_offset = SMALL_SPACE_LENGTH // As there will be a SMALL_SPACE at the start of the text node
+      let new_index = index + 2; // Jump over the latex node
+      let new_offset = SMALL_SPACE_LENGTH; // As there will be a SMALL_SPACE at the start of the text node
 
       let new_rangeParams = {
         startNodeIndex: new_index,
         startOffset: new_offset,
         endNodeIndex: new_index,
-        endOffset: new_offset
-      }
-      this._setRangeParams(new_rangeParams)
+        endOffset: new_offset,
+      };
+      this._setRangeParams(new_rangeParams);
 
-      e.preventDefault()
-      return
+      e.preventDefault();
+      return;
     }
-  }
+  };
 
   editableDivIsPlainText = () => {
-    return this.editableDiv.childNodes === null || this.editableDiv.childNodes.length === 0
-  }
+    return (
+      this.editableDiv.childNodes === null ||
+      this.editableDiv.childNodes.length === 0
+    );
+  };
 
   handleKeyDownDollar = (e) => {
-
     // This method automatically converts text between a pair of typed dollars into
     // a latex math component. It only does this when the second dollar is preceded by certain
     // characters and NOT when the second dollar is preceded by a space.
-    // 
-    // This is because when the user actually wants actual dollar symbols for ammounts 
+    //
+    // This is because when the user actually wants actual dollar symbols for ammounts
     // the dollar symbol will usually be preceded by a space, eg:
     //
-    //    "The pie was $3.50 and the cheese was $1.30" 
+    //    "The pie was $3.50 and the cheese was $1.30"
     //
     // will not be converted as the $1.30 is preceded by a space.
     //
     try {
-      let params = this._getRangeParams()
-      let node = this._findNodeWithIndex(params.startNodeIndex)
-      if (node.nodeType !== 3) // text node
-        return
-      let text = node.nodeValue
+      let params = this._getRangeParams();
+      let node = this._findNodeWithIndex(params.startNodeIndex);
+      if (node.nodeType !== 3)
+        // text node
+        return;
+      let text = node.nodeValue;
       // Look for starting dollar to match this new second dollar
-      let first_dollar_pos = text.indexOf("$")
-      if (first_dollar_pos < 0)
-        return
-      if (first_dollar_pos >= params.startOffset)
-        return
-      let second_dollar_pos = params.startOffset
-
-      let c = text.charAt(second_dollar_pos-1)
-      let convert_to_latex = false
-      if ((c >= 'a' && c <= 'z') ||
-          (c >= 'A' && c <= 'Z') ||
-          (c >= '0' && c <= '9') ||
-          c === ')' || c === '}') {
-        convert_to_latex = true
+      let first_dollar_pos = text.indexOf("$");
+      if (first_dollar_pos < 0) return;
+      if (first_dollar_pos >= params.startOffset) return;
+      let second_dollar_pos = params.startOffset;
+
+      let c = text.charAt(second_dollar_pos - 1);
+      let convert_to_latex = false;
+      if (
+        (c >= "a" && c <= "z") ||
+        (c >= "A" && c <= "Z") ||
+        (c >= "0" && c <= "9") ||
+        c === ")" ||
+        c === "}"
+      ) {
+        convert_to_latex = true;
       }
-      if (!convert_to_latex)
-        return
-
-      node.nodeValue = 
-        node.nodeValue.substring(0,first_dollar_pos) + MARK +
-        node.nodeValue.substring(first_dollar_pos+1, second_dollar_pos) + MARK +
-        node.nodeValue.substring(second_dollar_pos)
+      if (!convert_to_latex) return;
+
+      node.nodeValue =
+        node.nodeValue.substring(0, first_dollar_pos) +
+        MARK +
+        node.nodeValue.substring(first_dollar_pos + 1, second_dollar_pos) +
+        MARK +
+        node.nodeValue.substring(second_dollar_pos);
+
+      let raw_text = elementToMarkedRawText(
+        e.target,
+        null,
+        0,
+        this.enableHtml()
+      );
+      raw_text = raw_text.replace(MARK_REG_EXP, "$");
 
-      let raw_text = elementToMarkedRawText(e.target, null, 0, this.enableHtml())
-      raw_text = raw_text.replace(MARK_REG_EXP,"$")
-      
       // We are turning one node into three and want the cursor at the start of the third node
       let new_rangeParams = {
         startNodeIndex: params.startNodeIndex + 2,
         startOffset: SMALL_SPACE_LENGTH,
         endNodeIndex: params.startNodeIndex + 2,
-        endOffset: SMALL_SPACE_LENGTH
-      }
-
-      let nodeCounts = this._countNodeTypes()
-      let mimeType = this.getMimeType(nodeCounts.html > 0, true)
-      raw_text = removeEncodingIfPlainText(raw_text, mimeType, this.enableHtml())
-
-      this.applyChangesToComponent(raw_text,
-                                  mimeType,
-                                  new_rangeParams, 
-                                  this.props.useExpertMode,
-                                  this.props.selectedTab)
+        endOffset: SMALL_SPACE_LENGTH,
+      };
+
+      let nodeCounts = this._countNodeTypes();
+      let mimeType = this.getMimeType(nodeCounts.html > 0, true);
+      raw_text = removeEncodingIfPlainText(
+        raw_text,
+        mimeType,
+        this.enableHtml()
+      );
+
+      this.applyChangesToComponent(
+        raw_text,
+        mimeType,
+        new_rangeParams,
+        this.props.useExpertMode,
+        this.props.selectedTab
+      );
     } catch (error) {
-      console.error(error)
+      console.error(error);
     }
 
-    e.preventDefault()
-  }
+    e.preventDefault();
+  };
 
   showEquationEditorOnKeyDown = (e) => {
-    this.showEquationEditor(true)
-    e.preventDefault()
-  }
+    this.showEquationEditor(true);
+    e.preventDefault();
+  };
 
   handleKeyDownEnter = (e) => {
     try {
-      console.log("handleKeyDownEnter")
-      if (this.enableMultiline())
-        this.insertNewLine(e)
+      console.log("handleKeyDownEnter");
+      if (this.enableMultiline()) this.insertNewLine(e);
     } catch (error) {
-      console.error(error)
+      console.error(error);
     }
-    e.preventDefault()
-  }
+    e.preventDefault();
+  };
 
   handleKeyDown = (e) => {
     try {
       // Lets set up or update the undo redo history
-      this.initialiseHistory()
+      this.initialiseHistory();
 
       if ((e.key === "z" || e.key === "Z") && (e.ctrlKey || e.metaKey)) {
-        if (e.shiftKey)
-          this.redo()
-        else
-          this.undo()
-        e.preventDefault()
-        return
+        if (e.shiftKey) this.redo();
+        else this.undo();
+        e.preventDefault();
+        return;
       }
-  
-      if (!(e.ctrlKey || e.metaKey))
-        this.resetHistoryRedo()
-
-      if ((e.metaKey || e.ctrlKey) && 
-          (e.key === "b" || e.key === "i" || e.key === "u" || 
-           e.key === "6" || e.key === "^" || 
-           e.key === "-" || e.key === "_")) {
+
+      if (!(e.ctrlKey || e.metaKey)) this.resetHistoryRedo();
+
+      if (
+        (e.metaKey || e.ctrlKey) &&
+        (e.key === "b" ||
+          e.key === "i" ||
+          e.key === "u" ||
+          e.key === "6" ||
+          e.key === "^" ||
+          e.key === "-" ||
+          e.key === "_")
+      ) {
         if (!this.enableHtml()) {
-          e.preventDefault()
-          return
+          e.preventDefault();
+          return;
         }
-        if (e.key === "b")
-          this.styleText(e, "Bold")
-        if (e.key === "i")
-          this.styleText(e, "Italic")
-        if (e.key === "u")
-          this.styleText(e, "Underline")        
-        if (e.key === "6" || e.key === "^")
-          this.styleText(e, "Superscript")
+        if (e.key === "b") this.styleText(e, "Bold");
+        if (e.key === "i") this.styleText(e, "Italic");
+        if (e.key === "u") this.styleText(e, "Underline");
+        if (e.key === "6" || e.key === "^") this.styleText(e, "Superscript");
 
         // don't apply subscript if it is the browser command key for "smaller"
-        if (/(Win)/i.test(window.navigator.platform) && e.ctrlKey && e.key === "-")
-          return
-        if (/(Mac)/i.test(window.navigator.platform) && e.metaKey && e.key === "-")
-          return
+        if (
+          /(Win)/i.test(window.navigator.platform) &&
+          e.ctrlKey &&
+          e.key === "-"
+        )
+          return;
+        if (
+          /(Mac)/i.test(window.navigator.platform) &&
+          e.metaKey &&
+          e.key === "-"
+        )
+          return;
         // otherwise
-        if (e.key === "-" || e.key === "_")
-          this.styleText(e, "Subscript")        
+        if (e.key === "-" || e.key === "_") this.styleText(e, "Subscript");
 
-        e.preventDefault()
-        return
+        e.preventDefault();
+        return;
       }
 
-
       // Ignore automatic key repeat presses on Windows so that we can show an accent bar on
       // long key press
       if (!/(Win)/i.test(window.navigator.platform)) {
         if (e.key === this.keyPressed && this.keyPressStartTime > 0) {
-          if (e.key.length === 1 && (
-              ("a" <= e.key && e.key <= "z") || 
-              ("A" <= e.key && e.key <= "Z") || 
+          if (
+            e.key.length === 1 &&
+            (("a" <= e.key && e.key <= "z") ||
+              ("A" <= e.key && e.key <= "Z") ||
               e.key === "!" ||
-              e.key === "?")) {
-            e.preventDefault()
-            return
+              e.key === "?")
+          ) {
+            e.preventDefault();
+            return;
           }
         }
       }
 
       if (e.altKey && e.key === "Alt") {
-        let key = this.fetchAccentLetter()
-        if (key === "a" || key === "e" || key === "i" || key === "o" || key === "u" ||
-            key === "c" || key === "l" || key === "n" || key === "s" || key === "?" || key === "!") {
-          this.setState({showAccentBar:!this.state.showAccentBar})
+        let key = this.fetchAccentLetter();
+        if (
+          key === "a" ||
+          key === "e" ||
+          key === "i" ||
+          key === "o" ||
+          key === "u" ||
+          key === "c" ||
+          key === "l" ||
+          key === "n" ||
+          key === "s" ||
+          key === "?" ||
+          key === "!"
+        ) {
+          this.setState({ showAccentBar: !this.state.showAccentBar });
         } else {
-          this.setState({showAccentBar:false})
+          this.setState({ showAccentBar: false });
         }
-        return
+        return;
       }
 
-      this.keyPressed = e.key // store for use in methods
-      this.setState({keyPressed:e.key})
+      this.keyPressed = e.key; // store for use in methods
+      this.setState({ keyPressed: e.key });
 
       // Hide the accent bar if a key is typed except when it is an automatic key repeat press
-      // If it is automatic key repeat, then keyPressStartTime will be greater than 0 
+      // If it is automatic key repeat, then keyPressStartTime will be greater than 0
       // (keyPressStartTime is reset to -1 on key up)
-      if (this.keyPressStartTime < 0) { 
-        this.keyPressStartTime = Date.now()
-        if (this.state.showAccentBar)
-          this.setState({showAccentBar:false})
+      if (this.keyPressStartTime < 0) {
+        this.keyPressStartTime = Date.now();
+        if (this.state.showAccentBar) this.setState({ showAccentBar: false });
       }
 
       if (e.key === "Backspace") {
-        this.handleKeyDownBackspace(e)
-        return
+        this.handleKeyDownBackspace(e);
+        return;
       }
       if (e.key === "ArrowLeft") {
-        this.handleKeyDownArrowLeft(e)
-        return
+        this.handleKeyDownArrowLeft(e);
+        return;
       }
       if (e.key === "ArrowRight") {
-        this.handleKeyDownArrowRight(e)
-        return
+        this.handleKeyDownArrowRight(e);
+        return;
       }
       if (e.key === "$") {
-        this.handleKeyDownDollar(e)
-        return
+        this.handleKeyDownDollar(e);
+        return;
       }
 
       // Implement special command + keys
       if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
-        this.showEquationEditorOnKeyDown(e)
-        return
+        this.showEquationEditorOnKeyDown(e);
+        return;
       } else if (/(Mac)/i.test(window.navigator.platform)) {
-        if (e.ctrlKey && e.key === "=") { // CTRL+= inserts equation in Word on Mac
-          this.showEquationEditorOnKeyDown(e)
-          return
+        if (e.ctrlKey && e.key === "=") {
+          // CTRL+= inserts equation in Word on Mac
+          this.showEquationEditorOnKeyDown(e);
+          return;
         }
       } else if (/(Win)/i.test(window.navigator.platform)) {
-        if (e.altKey && e.key === "=") { // ALT+= inserts equation in Word on PC
-          this.showEquationEditorOnKeyDown(e)
-          return
+        if (e.altKey && e.key === "=") {
+          // ALT+= inserts equation in Word on PC
+          this.showEquationEditorOnKeyDown(e);
+          return;
         }
       }
-      
+
       // Lets handle the enter key (new line) ourselves
       if (e.key === "Enter") {
-        this.handleKeyDownEnter(e)
-        return
+        this.handleKeyDownEnter(e);
+        return;
       }
 
       // Show the accent bar on long key presses
       if (/(Win)/i.test(window.navigator.platform)) {
-        let key= e.key.toLowerCase()
-        if (key === "a" || key === "e" || key === "i" || key === "o" || key === "u" ||
-            key === "c" || key === "l" || key === "n" || key === "s" || key === "?" || key === "!") {
-          let _this = this
-          setTimeout(function(){
-            console.log(Date.now() - _this.keyPressStartTime)
+        let key = e.key.toLowerCase();
+        if (
+          key === "a" ||
+          key === "e" ||
+          key === "i" ||
+          key === "o" ||
+          key === "u" ||
+          key === "c" ||
+          key === "l" ||
+          key === "n" ||
+          key === "s" ||
+          key === "?" ||
+          key === "!"
+        ) {
+          let _this = this;
+          setTimeout(function () {
+            console.log(Date.now() - _this.keyPressStartTime);
             if (_this.keyPressStartTime > 0)
               if (Date.now() - _this.keyPressStartTime > 450)
-                _this.setState({showAccentBar:true})   
+                _this.setState({ showAccentBar: true });
           }, 500);
         }
       }
-      
+
       // Stop editing if within rendered katex node, if somehow the cursor ends up there (it shouldn't)
-      let params = this._getRangeParams()
-      let startNode = this._findNodeWithIndex(params.startNodeIndex)
-      let endNode = this._findNodeWithIndex(params.endNodeIndex)
+      let params = this._getRangeParams();
+      let startNode = this._findNodeWithIndex(params.startNodeIndex);
+      let endNode = this._findNodeWithIndex(params.endNodeIndex);
       if (!this.editableDivIsPlainText()) {
         // console.log(params)
         if (params.startNodeIndex === -1) {
-          console.error("Couldn't get range params")
-          return
+          console.error("Couldn't get range params");
+          return;
         }
         // console.log("Start node: "+startNode)
         // console.log("End node: "+endNode)
-        
+
         if (isKatexNode(startNode) || isKatexNode(endNode)) {
-          console.error("User trying to edit inside latex node")
-          e.preventDefault()
-          return
+          console.error("User trying to edit inside latex node");
+          e.preventDefault();
+          return;
         }
-      } 
+      }
 
       // Check if inserting character in element that starts with small space
-      if (e.key.length === 1 && params.startOffset === 0 && this.nodeStartsWithSmallSpace(startNode)) {
-        this.replaceNextLetter(e.key)
-        e.preventDefault()
-        return
+      if (
+        e.key.length === 1 &&
+        params.startOffset === 0 &&
+        this.nodeStartsWithSmallSpace(startNode)
+      ) {
+        this.replaceNextLetter(e.key);
+        e.preventDefault();
+        return;
       }
-
     } catch (error) {
-      console.error(error)
-      console.log("Key pressed: " + 
-      (e.metaKey ? "META+" : "") +
-      (e.ctrlKey ? "CTRL+" : "") +
-      (e.altKey  ? "ALT+"  : "") +
-      (e.shiftKey ? "SHIFT+"  : "") +
-      e.key
-        )
+      console.error(error);
+      console.log(
+        "Key pressed: " +
+          (e.metaKey ? "META+" : "") +
+          (e.ctrlKey ? "CTRL+" : "") +
+          (e.altKey ? "ALT+" : "") +
+          (e.shiftKey ? "SHIFT+" : "") +
+          e.key
+      );
     }
-  }
+  };
 
   handleKeyUp = (e) => {
     try {
-      this.keyPressed = e.key
-      this.keyPressStartTime = -1
+      this.keyPressed = e.key;
+      this.keyPressStartTime = -1;
 
       // If the cursor is in a katex node, then move it to the next node (unless there is no
       // net node in which case move it to the previous node)
       if (e.key === "ArrowRight") {
-        let rangeParams = this._getRangeParams()
-        let index = rangeParams.startNodeIndex
+        let rangeParams = this._getRangeParams();
+        let index = rangeParams.startNodeIndex;
 
         if (index >= 0) {
           if (isKatexNode(this._findNodeWithIndex(index))) {
-            let new_index = 0
-            let new_offset = 0
+            let new_index = 0;
+            let new_offset = 0;
 
-            let nextNode = this._findNodeWithIndex(index+1)
+            let nextNode = this._findNodeWithIndex(index + 1);
             if (nextNode === null) {
-              new_index = index + 1
-              new_offset = SMALL_SPACE_LENGTH // Nominally should be 0, but 1 due to inserted SMALL_SPACE
+              new_index = index + 1;
+              new_offset = SMALL_SPACE_LENGTH; // Nominally should be 0, but 1 due to inserted SMALL_SPACE
             } else {
-              new_index = index - 1
-              new_offset = getNodeTextLength(this._findNodeWithIndex(new_index))
-              if (new_offset < 0)
-              {
-                console.error("Failed to get node text length")
-                new_offset = 0
+              new_index = index - 1;
+              new_offset = getNodeTextLength(
+                this._findNodeWithIndex(new_index)
+              );
+              if (new_offset < 0) {
+                console.error("Failed to get node text length");
+                new_offset = 0;
               }
             }
 
             let new_rangeParams = {
-              startNodeIndex:new_index,
+              startNodeIndex: new_index,
               startOffset: new_offset,
               endNodeIndex: new_index,
-              endOffset: new_offset
-            }
-            this._setRangeParams(new_rangeParams)
+              endOffset: new_offset,
+            };
+            this._setRangeParams(new_rangeParams);
           }
         }
       }
 
       if (e.key === "ArrowLeft") {
-        let rangeParams = this._getRangeParams()
-        let index = rangeParams.startNodeIndex
+        let rangeParams = this._getRangeParams();
+        let index = rangeParams.startNodeIndex;
 
         // If the cursor is in a katex node, then move it to the previous node (unless there is no
         // previous node in which case move it to the next node)
         if (index >= 0) {
           if (isKatexNode(this._findNodeWithIndex(index))) {
-            let new_index = 0
-            let new_offset = 0
+            let new_index = 0;
+            let new_offset = 0;
 
             if (index - 1 >= 0) {
-              new_index = index - 1
-              new_offset = getNodeTextLength(this._findNodeWithIndex(new_index))
-              if (new_offset < 0)
-              {
-                console.error("Failed to get node text length")
-                new_offset = 0
+              new_index = index - 1;
+              new_offset = getNodeTextLength(
+                this._findNodeWithIndex(new_index)
+              );
+              if (new_offset < 0) {
+                console.error("Failed to get node text length");
+                new_offset = 0;
               }
             } else {
-              new_index = index + 1
-              new_offset = SMALL_SPACE_LENGTH
+              new_index = index + 1;
+              new_offset = SMALL_SPACE_LENGTH;
             }
 
             let new_rangeParams = {
-              startNodeIndex:new_index,
+              startNodeIndex: new_index,
               startOffset: new_offset,
               endNodeIndex: new_index,
-              endOffset: new_offset
-            }
+              endOffset: new_offset,
+            };
             // console.log(new_rangeParams)
-            this._setRangeParams(new_rangeParams)
+            this._setRangeParams(new_rangeParams);
           }
         }
       }
 
-      this.updateActiveButtons()
+      this.updateActiveButtons();
     } catch (error) {
-      console.error(error)
+      console.error(error);
     }
-  }
+  };
 
   handleInput = (event) => {
     try {
       // console.log("handleInput")
-      let raw_text = elementToMarkedRawText(this.editableDiv, null, 0, this.enableHtml())
-      const params = this._getRangeParams()
+      let raw_text = elementToMarkedRawText(
+        this.editableDiv,
+        null,
+        0,
+        this.enableHtml()
+      );
+      const params = this._getRangeParams();
       if (params === null || params === undefined)
-        console.error("Could not get range params from input field")
-      else if (params.startNodeIndex === null || params.startNodeIndex === undefined)
-        console.error("Could not get range params from input field, startNodeIndex==="+params.startNodeIndex)
+        console.error("Could not get range params from input field");
+      else if (
+        params.startNodeIndex === null ||
+        params.startNodeIndex === undefined
+      )
+        console.error(
+          "Could not get range params from input field, startNodeIndex===" +
+            params.startNodeIndex
+        );
       else {
         // console.log("Current range params:")
         // console.log(params)
       }
 
-      let nodeCounts = this._countNodeTypes()
-      let mimeType = this.getMimeType(nodeCounts.html > 0, nodeCounts.math > 0)
-      raw_text = removeEncodingIfPlainText(raw_text, mimeType, this.enableHtml())
-
-      this.applyChangesToComponent(raw_text, mimeType, params, 
-        this.props.useExpertMode, this.props.selectedTab)
+      let nodeCounts = this._countNodeTypes();
+      let mimeType = this.getMimeType(nodeCounts.html > 0, nodeCounts.math > 0);
+      raw_text = removeEncodingIfPlainText(
+        raw_text,
+        mimeType,
+        this.enableHtml()
+      );
+
+      this.applyChangesToComponent(
+        raw_text,
+        mimeType,
+        params,
+        this.props.useExpertMode,
+        this.props.selectedTab
+      );
     } catch (error) {
-      console.error(error)
+      console.error(error);
     }
-  }
+  };
 
   updateActiveButtons = () => {
     try {
-      let rangeParams = this._getRangeParams()
-      if (rangeParams.startNodeIndex < 0)
-        return
-      let node = this._findNodeWithIndex(rangeParams.startNodeIndex)
-      let bold = false
-      let italic = false
-      let underline = false
-      let superscript = false
-      let subscript = false
+      let rangeParams = this._getRangeParams();
+      if (rangeParams.startNodeIndex < 0) return;
+      let node = this._findNodeWithIndex(rangeParams.startNodeIndex);
+      let bold = false;
+      let italic = false;
+      let underline = false;
+      let superscript = false;
+      let subscript = false;
       do {
         if (node.nodeType === 1) {
-          let nodeName = node.nodeName.toLowerCase()
-          if (nodeName === "b" || nodeName === "strong")
-            bold = true
-          else if (nodeName === "i" || nodeName === "em")
-            italic = true
-          else if (nodeName === "u")
-            underline = true
-          else if (nodeName === "sub")
-            subscript = true
-          else if (nodeName === "sup")
-            superscript = true
-        }
-        else if (node.classList !== null && node.classList !== undefined &&
-          node.classList.contains("MathRichInput"))
-          break
-        node = node.parentNode
-      } while (node !== null)
+          let nodeName = node.nodeName.toLowerCase();
+          if (nodeName === "b" || nodeName === "strong") bold = true;
+          else if (nodeName === "i" || nodeName === "em") italic = true;
+          else if (nodeName === "u") underline = true;
+          else if (nodeName === "sub") subscript = true;
+          else if (nodeName === "sup") superscript = true;
+        } else if (
+          node.classList !== null &&
+          node.classList !== undefined &&
+          node.classList.contains("MathRichInput")
+        )
+          break;
+        node = node.parentNode;
+      } while (node !== null);
 
-      let activeButtons = {bold, italic, underline, subscript, superscript}
+      let activeButtons = { bold, italic, underline, subscript, superscript };
       // console.log(activeButtons)
 
-      let update = true
+      let update = true;
       if (this.lastSetActiveButtons !== null) {
-        update = false
-        for(var style in activeButtons) {
-          if(activeButtons[style] !== this.lastSetActiveButtons[style]) {
-            update = true
-            break
+        update = false;
+        for (var style in activeButtons) {
+          if (activeButtons[style] !== this.lastSetActiveButtons[style]) {
+            update = true;
+            break;
           }
         }
       }
       if (update) {
-        this.lastSetActiveButtons = activeButtons
-        this.setState({activeButtons:activeButtons})
+        this.lastSetActiveButtons = activeButtons;
+        this.setState({ activeButtons: activeButtons });
       }
     } catch (error) {
-      console.error(error)
+      console.error(error);
     }
-  }
+  };
 
-  componentDidMount(){
+  componentDidMount() {
     try {
-      setupKatex()
+      setupKatex();
 
-      this.editableDiv.addEventListener('keydown',this.handleKeyDown);
-      this.editableDiv.addEventListener('keyup',this.handleKeyUp);
+      this.editableDiv.addEventListener("keydown", this.handleKeyDown);
+      this.editableDiv.addEventListener("keyup", this.handleKeyUp);
     } catch (error) {
-      console.error(error)
+      console.error(error);
     }
   }
 
-  componentWillUnmount(){
+  componentWillUnmount() {
     try {
-      this.editableDiv.removeEventListener('keydown',this.handleKeyDown);
-      this.editableDiv.removeEventListener('keyup',this.handleKeyUp);
+      this.editableDiv.removeEventListener("keydown", this.handleKeyDown);
+      this.editableDiv.removeEventListener("keyup", this.handleKeyUp);
     } catch (error) {
-      console.error(error)
+      console.error(error);
     }
   }
 
   componentDidUpdate() {
-    try {    
+    try {
       // console.log("Component updated:")
       // console.log(this.editableDiv.childNodes)
-      if (this.rangeParamsToSetAfterComponentUpdate !== null &&
-          this.rangeParamsToSetAfterComponentUpdate !== undefined ) {
-        this._setRangeParams(this.rangeParamsToSetAfterComponentUpdate)
-        this.rangeParamsToSetAfterComponentUpdate = null
-        this.updateActiveButtons()
+      if (
+        this.rangeParamsToSetAfterComponentUpdate !== null &&
+        this.rangeParamsToSetAfterComponentUpdate !== undefined
+      ) {
+        this._setRangeParams(this.rangeParamsToSetAfterComponentUpdate);
+        this.rangeParamsToSetAfterComponentUpdate = null;
+        this.updateActiveButtons();
       }
     } catch (error) {
-      console.error(error)
+      console.error(error);
     }
   }
 
-  showEquationEditor = (moveCursorOnInsert=false, node=null) => {
+  showEquationEditor = (moveCursorOnInsert = false, node = null) => {
     try {
-      let rangeParams = this._getRangeParams()
+      let rangeParams = this._getRangeParams();
       if (rangeParams.startNodeIndex < 0) {
-        console.error("Could not find position of cursor in node list")
-        console.log(rangeParams)
-        console.log(this.editableDiv.childNodes)
-  
-        this.setOldRangeParams({startNodeIndex:2, startOffset:1,
-                              endNodeIndex:2, endOffset:1})
-        this.markedRawText = MARK + " " + MARK
-        this.moveCursorOnInsert = moveCursorOnInsert
+        console.error("Could not find position of cursor in node list");
+        console.log(rangeParams);
+        console.log(this.editableDiv.childNodes);
+
+        this.setOldRangeParams({
+          startNodeIndex: 2,
+          startOffset: 1,
+          endNodeIndex: 2,
+          endOffset: 1,
+        });
+        this.markedRawText = MARK + " " + MARK;
+        this.moveCursorOnInsert = moveCursorOnInsert;
         this.setState({
-          showEquationEditor:true,
-          equationEditorLatex:""
-          });
-        return
+          showEquationEditor: true,
+          equationEditorLatex: "",
+        });
+        return;
       }
 
-      let latex = ""
-      let offset = 0
+      let latex = "";
+      let offset = 0;
 
-      if (node === null) 
-        node = this._findNodeWithIndex(rangeParams.startNodeIndex)
+      if (node === null)
+        node = this._findNodeWithIndex(rangeParams.startNodeIndex);
 
       // console.log(rangeParams)
       // console.log(this.editableDiv.childNodes)
       // console.log(node)
 
       if (node === null || node === undefined) {
-        console.error("Could not find node with index: "+rangeParams.startNodeIndex)
-        console.log("Child nodes:")
-        console.log(this.editableDiv.childNodes)
-        node = this._findFirstTextNode()
-        offset = 0
+        console.error(
+          "Could not find node with index: " + rangeParams.startNodeIndex
+        );
+        console.log("Child nodes:");
+        console.log(this.editableDiv.childNodes);
+        node = this._findFirstTextNode();
+        offset = 0;
       }
-      
-      if (isKatexNode(node)){
-        latex = getLatex(node)
-        offset = 0
-        this.editingExistingEquation = true
-        this.editingNode = node
+
+      if (isKatexNode(node)) {
+        latex = getLatex(node);
+        offset = 0;
+        this.editingExistingEquation = true;
+        this.editingNode = node;
       } else {
-        latex = ""
-        offset = rangeParams.startOffset
-        this.editingExistingEquation = false
-        this.editingNode = null
+        latex = "";
+        offset = rangeParams.startOffset;
+        this.editingExistingEquation = false;
+        this.editingNode = null;
       }
-  
-      this.markedRawText = elementToMarkedRawText(this.editableDiv, node, offset, this.enableHtml())
+
+      this.markedRawText = elementToMarkedRawText(
+        this.editableDiv,
+        node,
+        offset,
+        this.enableHtml()
+      );
       // console.log("Marked text:"+this.markedRawText)
-      this.moveCursorOnInsert = moveCursorOnInsert
+      this.moveCursorOnInsert = moveCursorOnInsert;
       this.setState({
-        showEquationEditor:true,
-        equationEditorLatex:latex
-        });
+        showEquationEditor: true,
+        equationEditorLatex: latex,
+      });
     } catch (error) {
-      console.error(error)
+      console.error(error);
     }
-  }
+  };
 
-  handleMouseDown = (event) => {    
-    this.showEquationEditorOnMouseUp = false
-    let node = null
+  handleMouseDown = (event) => {
+    this.showEquationEditorOnMouseUp = false;
+    let node = null;
     try {
-      node = event.target
-      let isLatex = false
+      node = event.target;
+      let isLatex = false;
       do {
         if (isKatexNode(node)) {
-          isLatex = true
-          break
+          isLatex = true;
+          break;
         }
-        node = node.parentNode
-      } while (node !== this.editableDiv && node !== null)
+        node = node.parentNode;
+      } while (node !== this.editableDiv && node !== null);
 
-      if (!isLatex)
-        return
+      if (!isLatex) return;
 
-      this.showEquationEditorOnMouseUp = true
+      this.showEquationEditorOnMouseUp = true;
       // Save current range parameters so that we can restore them later if we wish
-      this.setOldRangeParams(this._getRangeParams()) 
+      this.setOldRangeParams(this._getRangeParams());
 
       // this.editableDiv.focus()
       // this.showEquationEditor(false, node)
 
       // event.preventDefault()
     } catch (error) {
-      console.error(error)
-      console.log(node)
+      console.error(error);
+      console.log(node);
     }
-  }
+  };
 
   handleMouseUp = (event) => {
     try {
-      this.initialiseHistory()
+      this.initialiseHistory();
+
+      let params = this._getRangeParams();
+      let startNode = this._findNodeWithIndex(params.startNodeIndex);
+      let endNode = this._findNodeWithIndex(params.endNodeIndex);
 
-      let params = this._getRangeParams()
-      let startNode = this._findNodeWithIndex(params.startNodeIndex)
-      let endNode = this._findNodeWithIndex(params.endNodeIndex)
-      
       if (startNode === null || endNode === null) {
-        console.warn("Start or end node was null")
-        return
+        console.warn("Start or end node was null");
+        return;
       }
 
-      if (params.startNodeIndex === params.endNodeIndex && 
+      if (
+        params.startNodeIndex === params.endNodeIndex &&
         params.startOffset === params.endOffset &&
-        this.showEquationEditorOnMouseUp) {
-          this.editableDiv.focus()
-          this.showEquationEditor(false, startNode)
-          return
-        }
+        this.showEquationEditorOnMouseUp
+      ) {
+        this.editableDiv.focus();
+        this.showEquationEditor(false, startNode);
+        return;
+      }
 
       // If our range starts or ends inside a katex node, move it out
-      let new_rangeParams = null
+      let new_rangeParams = null;
       if (isKatexNode(startNode)) {
-        if (new_rangeParams === null)
-          new_rangeParams = {...params}
-        if (params.startNodeIndex === params.endNodeIndex &&
-            params.startOffset === params.endOffset) {
-            new_rangeParams.startNodeIndex = params.startNodeIndex + 1 
-            new_rangeParams.startOffset = SMALL_SPACE_LENGTH
+        if (new_rangeParams === null) new_rangeParams = { ...params };
+        if (
+          params.startNodeIndex === params.endNodeIndex &&
+          params.startOffset === params.endOffset
+        ) {
+          new_rangeParams.startNodeIndex = params.startNodeIndex + 1;
+          new_rangeParams.startOffset = SMALL_SPACE_LENGTH;
         } else {
-          new_rangeParams.startNodeIndex = params.startNodeIndex - 1 
-          let prev_node = this._findNodeWithIndex(params.startNodeIndex - 1)
-          new_rangeParams.startOffset = getNodeTextLength(prev_node)
+          new_rangeParams.startNodeIndex = params.startNodeIndex - 1;
+          let prev_node = this._findNodeWithIndex(params.startNodeIndex - 1);
+          new_rangeParams.startOffset = getNodeTextLength(prev_node);
         }
       }
       if (isKatexNode(endNode)) {
-        if (new_rangeParams === null)
-          new_rangeParams = {...params}
-        new_rangeParams.endNodeIndex = params.endNodeIndex + 1
-        new_rangeParams.endOffset = SMALL_SPACE_LENGTH
+        if (new_rangeParams === null) new_rangeParams = { ...params };
+        new_rangeParams.endNodeIndex = params.endNodeIndex + 1;
+        new_rangeParams.endOffset = SMALL_SPACE_LENGTH;
       }
 
       if (new_rangeParams !== null) {
-        this._setRangeParams(new_rangeParams)
-        event.preventDefault()
-        return      
+        this._setRangeParams(new_rangeParams);
+        event.preventDefault();
+        return;
       }
 
-      this.updateActiveButtons()
+      this.updateActiveButtons();
     } catch (error) {
-      console.error(error)
+      console.error(error);
     }
-
-  }
+  };
 
   handleEquationEditorClose = () => {
     try {
-      this.setState({showEquationEditor:false}, () => {
-        this.editableDiv.focus()
+      this.setState({ showEquationEditor: false }, () => {
+        this.editableDiv.focus();
         // this._setRangeParams(getOldRangeParams)
-      })
+      });
     } catch (error) {
-      console.error(error)
+      console.error(error);
     }
-  }
+  };
 
   handleEquationEditorInsert = (latex) => {
     try {
       // console.log("Inserting latex: "+latex)
- 
-      let start_pos = this.markedRawText.indexOf(MARK)
-      let end_pos = this.markedRawText.indexOf(MARK, start_pos + MARK.length)
-      let oldRangeParams = this.getOldRangeParams()
-      
+
+      let start_pos = this.markedRawText.indexOf(MARK);
+      let end_pos = this.markedRawText.indexOf(MARK, start_pos + MARK.length);
+      let oldRangeParams = this.getOldRangeParams();
+
       // Handle case of empty string returned
       if (latex === "") {
         // console.log("Empty latex returned from equation editor")
-        let new_raw_text = 
-          this.markedRawText.substring(0,start_pos) + 
-          this.markedRawText.substring(end_pos + MARK.length)
+        let new_raw_text =
+          this.markedRawText.substring(0, start_pos) +
+          this.markedRawText.substring(end_pos + MARK.length);
 
         // Delete node if it was a latex node
-        let new_index = -1
-        let new_offset = -1
+        let new_index = -1;
+        let new_offset = -1;
         if (this.editingExistingEquation) {
-
-          let indexOfEditedNode = this._findIndexOfNode(this.editingNode)
+          let indexOfEditedNode = this._findIndexOfNode(this.editingNode);
 
           if (oldRangeParams.startNodeIndex === indexOfEditedNode + 1) {
-            new_index = oldRangeParams.startNodeIndex-2
-            new_offset = getNodeTextLength(this._findNodeWithIndex(new_index)) 
+            new_index = oldRangeParams.startNodeIndex - 2;
+            new_offset = getNodeTextLength(this._findNodeWithIndex(new_index));
           } else if (oldRangeParams.startNodeIndex > indexOfEditedNode + 1) {
-            new_index = oldRangeParams.startNodeIndex-2
-            new_offset = oldRangeParams.startOffset
+            new_index = oldRangeParams.startNodeIndex - 2;
+            new_offset = oldRangeParams.startOffset;
           } else {
-            new_index = oldRangeParams.startNodeIndex
-            new_offset = oldRangeParams.startOffset  
+            new_index = oldRangeParams.startNodeIndex;
+            new_offset = oldRangeParams.startOffset;
           }
         }
 
         let new_rangeParams = {
-          startNodeIndex:new_index,
-          startOffset:new_offset,
-          endNodeIndex:new_index,
-          endOffset:new_offset}
-        this.setOldRangeParams(new_rangeParams)
-
-        let nodeCounts = this._countNodeTypes()
-        let mimeType = null
+          startNodeIndex: new_index,
+          startOffset: new_offset,
+          endNodeIndex: new_index,
+          endOffset: new_offset,
+        };
+        this.setOldRangeParams(new_rangeParams);
+
+        let nodeCounts = this._countNodeTypes();
+        let mimeType = null;
         if (this.editingExistingEquation)
-          mimeType = this.getMimeType(nodeCounts.html > 0, nodeCounts.katex > 1)
+          mimeType = this.getMimeType(
+            nodeCounts.html > 0,
+            nodeCounts.katex > 1
+          );
         else
-          mimeType = this.getMimeType(nodeCounts.html > 0, nodeCounts.katex > 0)
-        new_raw_text = removeEncodingIfPlainText(new_raw_text, mimeType, this.enableHtml())
-
-        this.applyChangesToComponent(new_raw_text, mimeType, new_rangeParams, 
-                                  this.props.useExpertMode, this.props.selectedTab)
-        this.setState({showEquationEditor:false})
-        return
+          mimeType = this.getMimeType(
+            nodeCounts.html > 0,
+            nodeCounts.katex > 0
+          );
+        new_raw_text = removeEncodingIfPlainText(
+          new_raw_text,
+          mimeType,
+          this.enableHtml()
+        );
+
+        this.applyChangesToComponent(
+          new_raw_text,
+          mimeType,
+          new_rangeParams,
+          this.props.useExpertMode,
+          this.props.selectedTab
+        );
+        this.setState({ showEquationEditor: false });
+        return;
       }
 
       // Handle case of latex returned, in which case we update the katex node
       // console.log("Latex returned from equation editor: "+latex)
-      let new_raw_text = replaceMarksWithMath(this.markedRawText, latex, this.enableHtml())    
-      // let new_raw_text = 
-      //   this.markedRawText.substring(0,start_pos) + 
+      let new_raw_text = replaceMarksWithMath(
+        this.markedRawText,
+        latex,
+        this.enableHtml()
+      );
+      // let new_raw_text =
+      //   this.markedRawText.substring(0,start_pos) +
       //   RAW_TEXT_MATH_START_TAG + latex + RAW_TEXT_MATH_END_TAG +
       //   this.markedRawText.substring(end_pos + MARK.length)
 
-      console.log("Old cursor pos: "+oldRangeParams.startNodeIndex+"->"+oldRangeParams.startOffset)
-      console.log("Old raw text: "+this.props.value)
-      console.log("Old raw text length: "+this.props.value.length)
-      console.log("Old marked raw text:"+this.markedRawText)
-      console.log("New raw text: "+new_raw_text)
-
-      let new_rangeParams = this.getOldRangeParams()
+      console.log(
+        "Old cursor pos: " +
+          oldRangeParams.startNodeIndex +
+          "->" +
+          oldRangeParams.startOffset
+      );
+      console.log("Old raw text: " + this.props.value);
+      console.log("Old raw text length: " + this.props.value.length);
+      console.log("Old marked raw text:" + this.markedRawText);
+      console.log("New raw text: " + new_raw_text);
+
+      let new_rangeParams = this.getOldRangeParams();
       if (this.moveCursorOnInsert) {
-        if (this.props.value === "") // Special case of previously empty text input
+        if (this.props.value === "")
+          // Special case of previously empty text input
           new_rangeParams = {
-            startNodeIndex:2,
-            startOffset:SMALL_SPACE_LENGTH,
-            endNodeIndex:2,
-            endOffset:SMALL_SPACE_LENGTH }
-        else // normal case
+            startNodeIndex: 2,
+            startOffset: SMALL_SPACE_LENGTH,
+            endNodeIndex: 2,
+            endOffset: SMALL_SPACE_LENGTH,
+          };
+        // normal case
+        else
           new_rangeParams = {
-            startNodeIndex:oldRangeParams.startNodeIndex+2,
-            startOffset:SMALL_SPACE_LENGTH,
-            endNodeIndex:oldRangeParams.startNodeIndex+2,
-            endOffset:SMALL_SPACE_LENGTH }
+            startNodeIndex: oldRangeParams.startNodeIndex + 2,
+            startOffset: SMALL_SPACE_LENGTH,
+            endNodeIndex: oldRangeParams.startNodeIndex + 2,
+            endOffset: SMALL_SPACE_LENGTH,
+          };
       }
       // console.log("New cursor pos: "+new_rangeParams.startNodeIndex+"->"+new_rangeParams.startOffset)
-      this.setOldRangeParams(new_rangeParams)
-
-      let nodeCounts = this._countNodeTypes()
-      let mimeType = this.getMimeType(nodeCounts.html > 0, true)
-      new_raw_text = removeEncodingIfPlainText(new_raw_text, mimeType, this.enableHtml())
-
-      this.applyChangesToComponent(new_raw_text, mimeType, new_rangeParams, 
-                                this.props.useExpertMode, this.props.selectedTab)
-      this.setState({showEquationEditor:false})
+      this.setOldRangeParams(new_rangeParams);
+
+      let nodeCounts = this._countNodeTypes();
+      let mimeType = this.getMimeType(nodeCounts.html > 0, true);
+      new_raw_text = removeEncodingIfPlainText(
+        new_raw_text,
+        mimeType,
+        this.enableHtml()
+      );
+
+      this.applyChangesToComponent(
+        new_raw_text,
+        mimeType,
+        new_rangeParams,
+        this.props.useExpertMode,
+        this.props.selectedTab
+      );
+      this.setState({ showEquationEditor: false });
     } catch (error) {
-      console.error(error)
+      console.error(error);
     }
-  }
+  };
 
   // findEditableDiv = (node) => {
   //   if (node === null)
   //     return null
-  //   if (node.classList !== null && node.classList !== undefined && 
+  //   if (node.classList !== null && node.classList !== undefined &&
   //      node.classList.contains("MathRichInput"))
   //     return node
   //   return this.findEditableDiv(node.parentNode);
@@ -1378,294 +1540,393 @@ export default class MathRichInput extends React.Component {
 
   styleText = (event, style) => {
     try {
-      style = style.toLowerCase()
-      let success = document.execCommand(style,false, null)
-      let buttonState = this.state.activeButtons[style]
-      if (buttonState === null || buttonState === undefined)
-        return success
-
-      buttonState = !buttonState
-      let new_activeButtons = {...this.state.activeButtons}
-      new_activeButtons[style] = buttonState
-      this.setState({activeButtons:new_activeButtons})
-      return success
+      style = style.toLowerCase();
+      let success = document.execCommand(style, false, null);
+      let buttonState = this.state.activeButtons[style];
+      if (buttonState === null || buttonState === undefined) return success;
+
+      buttonState = !buttonState;
+      let new_activeButtons = { ...this.state.activeButtons };
+      new_activeButtons[style] = buttonState;
+      this.setState({ activeButtons: new_activeButtons });
+      return success;
     } catch (error) {
-      console.error(error)
+      console.error(error);
     }
-  }
+  };
 
   handleToolbarButtonClick = (event, buttonName) => {
-    console.log("button name: ",buttonName)
+    console.log("button name: ", buttonName);
     try {
       if (buttonName === "Equation") {
-        this.showEquationEditor(true)
+        this.showEquationEditor(true);
       }
-      let style = buttonName
-      let success = this.styleText(event, style)
-      if (!success)
-        console.warn("execCommand returned false: "+style)
+      let style = buttonName;
+      let success = this.styleText(event, style);
+      if (!success) console.warn("execCommand returned false: " + style);
     } catch (error) {
-      console.error(error)
+      console.error(error);
     }
-  }
+  };
 
   fetchAccentLetter = (event) => {
     try {
-      let rangeParams = this._getRangeParams()
+      let rangeParams = this._getRangeParams();
       if (rangeParams === null) {
-        console.error("Cound not get range params")
-        return null
+        console.error("Cound not get range params");
+        return null;
       }
-      let node = this._findNodeWithIndex(rangeParams.endNodeIndex)
-      let offset = rangeParams.endOffset
+      let node = this._findNodeWithIndex(rangeParams.endNodeIndex);
+      let offset = rangeParams.endOffset;
 
-      let raw_text = elementToMarkedRawText(this.editableDiv, node, offset, this.enableHtml())
+      let raw_text = elementToMarkedRawText(
+        this.editableDiv,
+        node,
+        offset,
+        this.enableHtml()
+      );
 
-      return getCharacterBeforeMarks(raw_text)
+      return getCharacterBeforeMarks(raw_text);
     } catch (error) {
-      console.error(error)
+      console.error(error);
     }
-  }
+  };
 
   insertRawText = (event, new_text) => {
     try {
-      let rangeParams = this._getRangeParams()
-      let node = this._findNodeWithIndex(rangeParams.endNodeIndex)
-      let offset = rangeParams.endOffset
-
-      let raw_text = elementToMarkedRawText(this.editableDiv, node, offset, this.enableHtml())
-      let new_raw_text = null
-      let new_rangeParams = {...rangeParams}
-      new_raw_text = removeMarks(insertCharacterBeforeMarks(raw_text, new_text))
-      if (rangeParams.startNodeIndex === rangeParams.endNodeIndex &&
-          rangeParams.startOffset === rangeParams.endOffset)
-        new_rangeParams.startOffset = new_rangeParams.startOffset + new_text.length
-      new_rangeParams.endOffset = new_rangeParams.endOffset + new_text.length
-
-      new_raw_text = removeEncodingIfPlainText(new_raw_text, this.state.mimeType, this.enableHtml())
-
-      this.applyChangesToComponent(new_raw_text, this.state.mimeType, new_rangeParams, 
-                                  this.props.useExpertMode, this.props.selectedTab)
+      let rangeParams = this._getRangeParams();
+      let node = this._findNodeWithIndex(rangeParams.endNodeIndex);
+      let offset = rangeParams.endOffset;
+
+      let raw_text = elementToMarkedRawText(
+        this.editableDiv,
+        node,
+        offset,
+        this.enableHtml()
+      );
+      let new_raw_text = null;
+      let new_rangeParams = { ...rangeParams };
+      new_raw_text = removeMarks(
+        insertCharacterBeforeMarks(raw_text, new_text)
+      );
+      if (
+        rangeParams.startNodeIndex === rangeParams.endNodeIndex &&
+        rangeParams.startOffset === rangeParams.endOffset
+      )
+        new_rangeParams.startOffset =
+          new_rangeParams.startOffset + new_text.length;
+      new_rangeParams.endOffset = new_rangeParams.endOffset + new_text.length;
+
+      new_raw_text = removeEncodingIfPlainText(
+        new_raw_text,
+        this.state.mimeType,
+        this.enableHtml()
+      );
+
+      this.applyChangesToComponent(
+        new_raw_text,
+        this.state.mimeType,
+        new_rangeParams,
+        this.props.useExpertMode,
+        this.props.selectedTab
+      );
     } catch (error) {
-      console.error(error)
-    }                          
-  }
+      console.error(error);
+    }
+  };
 
   removeNewLine = () => {
     try {
-      let rangeParams = this._getRangeParams()
-      let node = this._findNodeWithIndex(rangeParams.endNodeIndex)
-      let prevNode = this._findNodeWithIndex(rangeParams.endNodeIndex-1)
-      let offset = rangeParams.endOffset
-
-      let raw_text = elementToMarkedRawText(this.editableDiv, node, offset, this.enableHtml())
-      let new_raw_text = null
-      new_raw_text = removeMarks(replaceStringBeforeMarks(raw_text, "</p><p>",""))
-
-      let new_rangeParams = {...rangeParams}
-      let new_offset = getNodeTextLength(prevNode)
-      new_rangeParams.startNodeIndex = rangeParams.startNodeIndex - 1
-      new_rangeParams.startOffset = new_offset
-      new_rangeParams.endNodeIndex = rangeParams.endNodeIndex - 1
-      new_rangeParams.endOffset = new_offset
-
-      console.log("About to apply new range params")
-      console.log(new_rangeParams)
-      console.log("Old nodes")
-      console.log(this.editableDiv.childNodes)
-
-      new_raw_text = removeEncodingIfPlainText(new_raw_text, this.state.mimeType, this.enableHtml())
-
-      this.applyChangesToComponent(new_raw_text, this.state.mimeType, new_rangeParams, 
-                                  this.props.useExpertMode, this.props.selectedTab)
+      let rangeParams = this._getRangeParams();
+      let node = this._findNodeWithIndex(rangeParams.endNodeIndex);
+      let prevNode = this._findNodeWithIndex(rangeParams.endNodeIndex - 1);
+      let offset = rangeParams.endOffset;
+
+      let raw_text = elementToMarkedRawText(
+        this.editableDiv,
+        node,
+        offset,
+        this.enableHtml()
+      );
+      let new_raw_text = null;
+      new_raw_text = removeMarks(
+        replaceStringBeforeMarks(raw_text, "</p><p>", "")
+      );
+
+      let new_rangeParams = { ...rangeParams };
+      let new_offset = getNodeTextLength(prevNode);
+      new_rangeParams.startNodeIndex = rangeParams.startNodeIndex - 1;
+      new_rangeParams.startOffset = new_offset;
+      new_rangeParams.endNodeIndex = rangeParams.endNodeIndex - 1;
+      new_rangeParams.endOffset = new_offset;
+
+      console.log("About to apply new range params");
+      console.log(new_rangeParams);
+      console.log("Old nodes");
+      console.log(this.editableDiv.childNodes);
+
+      new_raw_text = removeEncodingIfPlainText(
+        new_raw_text,
+        this.state.mimeType,
+        this.enableHtml()
+      );
+
+      this.applyChangesToComponent(
+        new_raw_text,
+        this.state.mimeType,
+        new_rangeParams,
+        this.props.useExpertMode,
+        this.props.selectedTab
+      );
     } catch (error) {
-      console.error(error)
-    }                          
-  }
+      console.error(error);
+    }
+  };
 
   insertNewLine = () => {
     try {
-      let rangeParams = this._getRangeParams()
-      let node = this._findNodeWithIndex(rangeParams.endNodeIndex)
-      let offset = rangeParams.endOffset
-
-      let raw_text = elementToMarkedRawText(this.editableDiv, node, offset, this.enableHtml())
-      let new_raw_text = null
-      let new_rangeParams = {...rangeParams}
+      let rangeParams = this._getRangeParams();
+      let node = this._findNodeWithIndex(rangeParams.endNodeIndex);
+      let offset = rangeParams.endOffset;
+
+      let raw_text = elementToMarkedRawText(
+        this.editableDiv,
+        node,
+        offset,
+        this.enableHtml()
+      );
+      let new_raw_text = null;
+      let new_rangeParams = { ...rangeParams };
 
       if (this.enableHtml()) {
-        new_raw_text = removeMarks(insertCharacterBeforeMarks(raw_text, "</p><p>"))
-        if (new_raw_text.substring(0,3).toLowerCase() !== "<p>")
-          new_raw_text = "<p>" + new_raw_text + "</p>"
- 
-        new_rangeParams.startNodeIndex = rangeParams.startNodeIndex + 1
-        new_rangeParams.startOffset = 0
-        new_rangeParams.endNodeIndex = rangeParams.endNodeIndex + 1
-        new_rangeParams.endOffset = 0 
+        new_raw_text = removeMarks(
+          insertCharacterBeforeMarks(raw_text, "</p><p>")
+        );
+        if (new_raw_text.substring(0, 3).toLowerCase() !== "<p>")
+          new_raw_text = "<p>" + new_raw_text + "</p>";
+
+        new_rangeParams.startNodeIndex = rangeParams.startNodeIndex + 1;
+        new_rangeParams.startOffset = 0;
+        new_rangeParams.endNodeIndex = rangeParams.endNodeIndex + 1;
+        new_rangeParams.endOffset = 0;
       } else {
-        new_raw_text = removeMarks(insertCharacterBeforeMarks(raw_text, "\n"))
-        new_rangeParams.startOffset ++
-        new_rangeParams.endOffset ++ 
+        new_raw_text = removeMarks(insertCharacterBeforeMarks(raw_text, "\n"));
+        new_rangeParams.startOffset++;
+        new_rangeParams.endOffset++;
       }
 
-
-      console.log("About to apply new range params")
-      console.log(new_rangeParams)
-      console.log("Old nodes")
-      console.log(this.editableDiv.childNodes)
-
-      new_raw_text = removeEncodingIfPlainText(new_raw_text, this.state.mimeType, this.enableHtml())
-
-      this.applyChangesToComponent(new_raw_text, this.state.mimeType, new_rangeParams, 
-                                  this.props.useExpertMode, this.props.selectedTab)
+      console.log("About to apply new range params");
+      console.log(new_rangeParams);
+      console.log("Old nodes");
+      console.log(this.editableDiv.childNodes);
+
+      new_raw_text = removeEncodingIfPlainText(
+        new_raw_text,
+        this.state.mimeType,
+        this.enableHtml()
+      );
+
+      this.applyChangesToComponent(
+        new_raw_text,
+        this.state.mimeType,
+        new_rangeParams,
+        this.props.useExpertMode,
+        this.props.selectedTab
+      );
     } catch (error) {
-      console.error(error)
-    }                          
-  }
+      console.error(error);
+    }
+  };
 
   replaceNextLetter = (new_char) => {
     try {
-      console.log("Replace next letter")
-      let rangeParams = this._getRangeParams()
-      let node = this._findNodeWithIndex(rangeParams.endNodeIndex)
-      let offset = rangeParams.endOffset+1 // next letter
-
-      let raw_text = elementToMarkedRawText(this.editableDiv, node, offset, this.enableHtml())
-      let new_raw_text = null
-      let new_rangeParams = {...rangeParams}
-      new_raw_text = removeMarks(insertCharacterBeforeMarks(raw_text, new_char))
-      if (rangeParams.startNodeIndex === rangeParams.endNodeIndex &&
-          rangeParams.startOffset === rangeParams.endOffset)
-        new_rangeParams.startOffset = new_rangeParams.startOffset + new_char.length + 1
-      new_rangeParams.endOffset = new_rangeParams.endOffset + new_char.length + 1
-
-      new_raw_text = removeEncodingIfPlainText(new_raw_text, this.state.mimeType, this.enableHtml())
-      this.applyChangesToComponent(new_raw_text, this.state.mimeType, new_rangeParams, 
-                                  this.props.useExpertMode, this.props.selectedTab)
+      console.log("Replace next letter");
+      let rangeParams = this._getRangeParams();
+      let node = this._findNodeWithIndex(rangeParams.endNodeIndex);
+      let offset = rangeParams.endOffset + 1; // next letter
+
+      let raw_text = elementToMarkedRawText(
+        this.editableDiv,
+        node,
+        offset,
+        this.enableHtml()
+      );
+      let new_raw_text = null;
+      let new_rangeParams = { ...rangeParams };
+      new_raw_text = removeMarks(
+        insertCharacterBeforeMarks(raw_text, new_char)
+      );
+      if (
+        rangeParams.startNodeIndex === rangeParams.endNodeIndex &&
+        rangeParams.startOffset === rangeParams.endOffset
+      )
+        new_rangeParams.startOffset =
+          new_rangeParams.startOffset + new_char.length + 1;
+      new_rangeParams.endOffset =
+        new_rangeParams.endOffset + new_char.length + 1;
+
+      new_raw_text = removeEncodingIfPlainText(
+        new_raw_text,
+        this.state.mimeType,
+        this.enableHtml()
+      );
+      this.applyChangesToComponent(
+        new_raw_text,
+        this.state.mimeType,
+        new_rangeParams,
+        this.props.useExpertMode,
+        this.props.selectedTab
+      );
     } catch (error) {
-      console.error(error)
+      console.error(error);
     }
-  }
+  };
 
   insertAccentLetter = (event, old_char, new_char) => {
     try {
-      let rangeParams = this._getRangeParams()
-      let node = this._findNodeWithIndex(rangeParams.endNodeIndex)
-      let offset = rangeParams.endOffset
-
-      let raw_text = elementToMarkedRawText(this.editableDiv, node, offset, this.enableHtml())
-      let new_raw_text = null
-      let new_rangeParams = {...rangeParams}
+      let rangeParams = this._getRangeParams();
+      let node = this._findNodeWithIndex(rangeParams.endNodeIndex);
+      let offset = rangeParams.endOffset;
+
+      let raw_text = elementToMarkedRawText(
+        this.editableDiv,
+        node,
+        offset,
+        this.enableHtml()
+      );
+      let new_raw_text = null;
+      let new_rangeParams = { ...rangeParams };
       if (old_char === null) {
-        new_raw_text = removeMarks(insertCharacterBeforeMarks(raw_text, new_char))
-        if (rangeParams.startNodeIndex === rangeParams.endNodeIndex &&
-            rangeParams.startOffset === rangeParams.endOffset)
-          new_rangeParams.startOffset = new_rangeParams.startOffset + new_char.length
-        new_rangeParams.endOffset = new_rangeParams.endOffset + new_char.length
-      }
-      else
-        new_raw_text = removeMarks(replaceCharacterBeforeMarks(raw_text, new_char))
-
-      new_raw_text = removeEncodingIfPlainText(new_raw_text, this.state.mimeType, this.enableHtml())
-      this.applyChangesToComponent(new_raw_text, this.state.mimeType, new_rangeParams, 
-                                  this.props.useExpertMode, this.props.selectedTab)
+        new_raw_text = removeMarks(
+          insertCharacterBeforeMarks(raw_text, new_char)
+        );
+        if (
+          rangeParams.startNodeIndex === rangeParams.endNodeIndex &&
+          rangeParams.startOffset === rangeParams.endOffset
+        )
+          new_rangeParams.startOffset =
+            new_rangeParams.startOffset + new_char.length;
+        new_rangeParams.endOffset = new_rangeParams.endOffset + new_char.length;
+      } else
+        new_raw_text = removeMarks(
+          replaceCharacterBeforeMarks(raw_text, new_char)
+        );
+
+      new_raw_text = removeEncodingIfPlainText(
+        new_raw_text,
+        this.state.mimeType,
+        this.enableHtml()
+      );
+      this.applyChangesToComponent(
+        new_raw_text,
+        this.state.mimeType,
+        new_rangeParams,
+        this.props.useExpertMode,
+        this.props.selectedTab
+      );
     } catch (error) {
-      console.error(error)
+      console.error(error);
     }
-  }
+  };
 
   handleAccentButtonClick = (event, oldCharacter, newCharacter) => {
     try {
-      this.insertAccentLetter(event, oldCharacter, newCharacter)
-      this.setState({showAccentBar:false})
+      this.insertAccentLetter(event, oldCharacter, newCharacter);
+      this.setState({ showAccentBar: false });
     } catch (error) {
-      console.error(error)
+      console.error(error);
     }
-  }
-
+  };
 
   handleFocus = (event) => {
     // console.log("handleFocus")
     try {
-      this._setRangeParams(this.getOldRangeParams())
-      this.setState({hasFocus:true})
+      this._setRangeParams(this.getOldRangeParams());
+      this.setState({ hasFocus: true });
     } catch (error) {
-      console.error(error)
+      console.error(error);
     }
-  }
+  };
 
   handleBlur = (event) => {
     try {
-      this.setState({hasFocus:false, showAccentBar:false})
+      this.setState({ hasFocus: false, showAccentBar: false });
     } catch (error) {
-      console.error(error)
+      console.error(error);
     }
-  }
-  
+  };
+
   render() {
-    console.log("Rendering MathRichInput. Latex: "+this.props.value)
+    console.log("Rendering MathRichInput. Latex: " + this.props.value);
 
-    if (this.props.value === undefined ) {
-      console.error("MathRichInput must have prop called \"text\"")
-      console.log(this.props)
+    if (this.props.value === undefined) {
+      console.error('MathRichInput must have prop called "text"');
+      console.log(this.props);
     }
 
-    const html = rawTextToHtml(katex, this.props.value || "", this.props.mimeType);
+    const html = rawTextToHtml(
+      katex,
+      this.props.value || "",
+      this.props.mimeType
+    );
 
-    let useClassName = "MathRichInput-Container" // Don't change this name - used by various components to find node
+    let useClassName = "MathRichInput-Container"; // Don't change this name - used by various components to find node
     if (this.props.className)
-      useClassName = this.props.className + " " + useClassName
-
-    let accentLetter = null
-    if (this.state.showAccentBar) 
-      accentLetter = this.fetchAccentLetter(null)
-
-    return <>
-      <div className={useClassName}>
-        <div className="MathRichInput-scrollview">
-          {this.state.hasFocus &&
-            <Toolbar 
-              className="Toolbar" 
-              enableMath={this.enableMath()}
-              enableFontStyling={this.enableFontStyling()}
-              style={this.translateToolbar}
-              keyPressed={this.state.keyPressed}
-              activeButtons={this.state.activeButtons}
-              onButtonClick={this.handleToolbarButtonClick}
-              fetchAccentLetter={this.fetchAccentLetter}
-              insertAccentLetter={this.insertAccentLetter}
-            />
-          }
-          {this.state.showAccentBar &&
-            <AccentBar 
-              compactMode={true}
-              accentLetter={accentLetter}
-              keyPressed={this.state.keyPressed}
-              fetchAccentLetter={this.fetchAccentLetter}
-              onButtonClick={(e, oldCharacter, newCharacter) => 
-                this.handleAccentButtonClick(e, oldCharacter, newCharacter)}/>
-          }
-          <span
-            className="MathRichInput" // Don't change this name - used to various components to find node
-            contentEditable="true"
-            ref={(r) => this.editableDiv = r} 
-            onInput={this.handleInput}
-            onMouseDown={this.handleMouseDown}
-            onMouseUp={this.handleMouseUp}
-            onFocus={this.handleFocus}
-            onBlur={this.handleBlur}
-            dangerouslySetInnerHTML={{__html: html}}
-            >
-          </span>
+      useClassName = this.props.className + " " + useClassName;
+
+    let accentLetter = null;
+    if (this.state.showAccentBar) accentLetter = this.fetchAccentLetter(null);
+
+    return (
+      <>
+        <div className={useClassName}>
+          <div className="MathRichInput-scrollview">
+            {this.state.hasFocus && (
+              <Toolbar
+                className="Toolbar"
+                enableMath={this.enableMath()}
+                enableFontStyling={this.enableFontStyling()}
+                style={this.translateToolbar}
+                keyPressed={this.state.keyPressed}
+                activeButtons={this.state.activeButtons}
+                onButtonClick={this.handleToolbarButtonClick}
+                fetchAccentLetter={this.fetchAccentLetter}
+                insertAccentLetter={this.insertAccentLetter}
+              />
+            )}
+            {this.state.showAccentBar && (
+              <AccentBar
+                compactMode={true}
+                accentLetter={accentLetter}
+                keyPressed={this.state.keyPressed}
+                fetchAccentLetter={this.fetchAccentLetter}
+                onButtonClick={(e, oldCharacter, newCharacter) =>
+                  this.handleAccentButtonClick(e, oldCharacter, newCharacter)
+                }
+              />
+            )}
+            <span
+              className="MathRichInput" // Don't change this name - used to various components to find node
+              contentEditable="true"
+              ref={(r) => (this.editableDiv = r)}
+              onInput={this.handleInput}
+              onMouseDown={this.handleMouseDown}
+              onMouseUp={this.handleMouseUp}
+              onFocus={this.handleFocus}
+              onBlur={this.handleBlur}
+              dangerouslySetInnerHTML={{ __html: html }}
+            ></span>
+          </div>
         </div>
-      </div>
-      { this.state.showEquationEditor &&
-        <EquationEditorModal
-          ref={(r) => this.equationEditorModal = r} 
-          handleClose={this.handleEquationEditorClose}
-          handleInsert={this.handleEquationEditorInsert}
-          latex={this.state.equationEditorLatex}/>
-      }
- </>
+        {this.state.showEquationEditor && (
+          <EquationEditorModal
+            ref={(r) => (this.equationEditorModal = r)}
+            handleClose={this.handleEquationEditorClose}
+            handleInsert={this.handleEquationEditorInsert}
+            latex={this.state.equationEditorLatex}
+          />
+        )}
+      </>
+    );
   }
-}
+}