@zzish/math-rich-input 0.1.0

package/src/MathRichInput.jsx

@@ -0,0 +1,1651 @@
+import React from 'react'
+
+import katex from "katex";
+import {setupKatex} from "./katexHelper"
+
+import EquationEditorModal from './EquationEditorModal';
+import Toolbar from './Toolbar'
+
+import {
+  isKatexNode,
+  elementToMarkedRawText,
+  rawTextToHtml,
+  getLatex,
+  setRangeParams, 
+  getRangeParams,
+  getNodeTextLength,
+  findNodeWithIndex,
+  findIndexOfNode,
+  findFirstTextNode,
+  countNodeTypes,
+  startsWithSmallSpace,
+  getCharacterBeforeMarks,
+  replaceCharacterBeforeMarks,
+  replaceStringBeforeMarks,
+  insertCharacterBeforeMarks,
+  removeMarks,
+  replaceMarksWithMath} 
+  from './mathRichInputHelper';
+
+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 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 LATEX_MARKER_START = "<annotation encoding=\"application/x-tex\">"
+// const LATEX_MARKER_END = "</annotation>"
+
+const MAX_HISTORY_LENGTH = 100
+
+const DEFAULT_OPTIONS = {
+  useExpertMode:false, 
+  selectedTab: null
+}
+
+export default class MathRichInput extends React.Component {
+    
+  constructor(props) {
+    super(props);
+    this.state = {
+      showEquationEditor: false,
+      equationEditorLatex: "",
+      showAccentBar:false,
+      activeButtons: {
+        bold: false,
+        italic: false,
+        underline: false,
+        subscript: false,
+        superscript: false
+      },
+      keyPressed:""
+    };
+
+    // this.handleInput   = this.handleInput.bind(this);
+    // this.handleKeyDown = this.handleKeyDown.bind(this);
+    // this.handleKeyUp   = this.handleKeyUp.bind(this);
+
+    // Remember the last key pressed
+    this.keyPressed = null; 
+    this.keyPressStartTime = -1;
+
+    // This gets updated in coomponent did mount, used to position the toolbar correctly
+    this.translateToolbar = ""; 
+
+    // Whether the text contains HTML or Maths
+    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
+
+    // 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.lastSetActiveButtons = null
+
+    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 = []
+  }
+
+  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   
+  }
+
+  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   
+  }
+
+  enableHtml() {
+    let outputTex = this.props.outputTex ?? false
+    return !outputTex
+  }
+
+  enableMath() {
+    if (this.props.enableMath !== null && this.props.enableMath !== undefined)
+      return this.props.enableMath
+    return true   
+  }
+
+  // static isHtml(text) {
+  //   return  /<\s*p[^>]*>(.*?)<\s*\/\s*p\s*>/i.test(text) ||
+  //           /<\s*b[^>]*>(.*?)<\s*\/\s*b\s*>/i.test(text) ||
+  //           /<\s*i[^>]*>(.*?)<\s*\/\s*i\s*>/i.test(text) ||
+  //           /<\s*u[^>]*>(.*?)<\s*\/\s*u\s*>/i.test(text) ||
+  //           /<\s*sup[^>]*>(.*?)<\s*\/\s*sup\s*>/i.test(text) ||
+  //           /<\s*sub[^>]*>(.*?)<\s*\/\s*sub\s*>/i.test(text)
+  // }
+  
+  getMimeType(isHtml, hasMath) {
+    if (isHtml) {
+      if (hasMath)
+        return MIME_TYPE_ZZISH_HTML_MATH
+      else 
+        return MIME_TYPE_HTML
+    } else {
+      if (hasMath)
+        return MIME_TYPE_TEX
+      else 
+        return MIME_TYPE_PLAIN_TEXT
+    }    
+  }
+
+  _countNodeTypes = () => {
+    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) {
+    //     console.warn("Html found when outputTex=true")
+    //     value = convertHtmlToPlainText(value)
+    //     mimeType = MIME_TYPE_PLAIN_TEXT
+    //   } else if (mimeType === MIME_TYPE_ZZISH_HTML_MATH) {
+    //     value = convertHtmlMathToTex(value)
+    //     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
+    
+    // Add this to the history
+    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})
+  }
+
+  initialiseHistory = () => {
+    if (this.initialHistoryState == null)
+      this.initialHistoryState = {value:this.props.value, 
+                              mimeType:this.props.mimeType, 
+                              rangeParams:this._getRangeParams()}
+  }
+
+  resetHistoryRedo = () => {
+    this.redoHistory = []    
+  }
+
+  deepEqual = (v1, v2) => {
+    if (v1 === v2) return true
+
+    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
+    
+    for (let key of v1keys) {
+      if (!v2keys.includes(key) || !this.deepEqual(v1[key], v2[key])) return false
+    }
+    return true
+  }
+
+  undo = () => {
+    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
+    }
+
+    if (this.redoHistory.length > 0) {
+      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.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)
+    }
+  }
+
+  setOldRangeParams(params) {
+    // console.log("Setting old range params: "+params.startNodeIndex+"->"+params.startOffset)
+    this.oldRangeParams = params
+  }
+
+  getOldRangeParams() {
+    if (this.oldRangeParams === null || this.oldRangeParams === undefined)
+      return null
+    let params = {...this.oldRangeParams}
+    // console.log("Getting old range params: "+params.startNodeIndex+"->"+params.startOffset)
+    return params
+  }
+
+  _getRangeParams(editableDiv=null) {
+    // console.log("_getRangeParams")
+    if (editableDiv === null)
+      editableDiv = this.editableDiv
+    let rangeParams = getRangeParams(editableDiv)
+    // console.log(rangeParams)
+    return rangeParams
+  }
+
+  _setRangeParams = (params) => {
+    try {
+      console.log("_setRangeParams")
+      console.log(params)
+      setRangeParams(this.editableDiv, params)
+
+      this.setOldRangeParams(params)
+      this.lastSetRangeParmas = params
+    } catch (error) {
+      console.error(error)
+      console.log(this.editableDiv.childNodes)
+    }
+  }
+
+  _findNodeWithIndex(index) {
+    return findNodeWithIndex(this.editableDiv, index)
+  }
+
+  _findIndexOfNode(node) {
+    return findIndexOfNode(this.editableDiv, node)
+  }
+
+  _findFirstTextNode() {
+    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)
+    
+    // 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()
+    }
+
+    // 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) {
+      if (!isKatexNode(startNode) && getNodeTextLength(startNode) === 1)
+        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 (deleteToEmpty) {
+      let new_rangeParams = {
+        startNodeIndex: 0,
+        startOffset: 0,
+        endNodeIndex: 0,
+        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
+    
+    // At this point we must have start_offset === 0 or 1 and a previous node
+
+    let prevNode = this._findNodeWithIndex(start_node_index-1)
+
+    if (!isKatexNode(prevNode)) {
+      if (this.nodeStartsWithSmallSpace(startNode)) {
+        this.removeNewLine()
+        e.preventDefault()
+      }
+      return
+    }
+
+    // The previous node is a katex node
+
+    // OK! We need to delete the whole Katex node and set the cursor
+    // console.log("Deleting content before: "+start_node_index+"->"+start_offset)
+    // console.log(rangeParams)
+
+    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 
+    // 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
+      } else {
+        new_index = 0
+        new_offset = getNodeTextLength(this._findFirstTextNode())
+      }
+    } else {
+      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
+      }
+      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
+    }
+
+    // OK, time to delete the katex node!
+    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)
+
+    this.applyChangesToComponent(raw_text, mimeType, new_rangeParams, 
+                                this.props.useExpertMode, this.props.selectedTab)
+    
+    // Consume the event
+    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
+  }
+
+  inputStartsWithSmallSpace = () => {
+    return startsWithSmallSpace(this.editableDiv)
+  }
+
+  handleKeyDownArrowLeft = (e) => {
+    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)
+    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)
+
+      let new_rangeParams = {
+        startNodeIndex: new_index,
+        startOffset: new_offset,
+        endNodeIndex: new_index,
+        endOffset: new_offset
+      }
+      this._setRangeParams(new_rangeParams)
+      e.preventDefault()
+      return      
+    }
+
+    if (offset > 2)
+      return
+
+    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
+      if (this.nodeStartsWithSmallSpace(node)) {
+        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
+        }
+        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)
+      } else {
+        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)
+      if (new_offset === 1) {
+        if (this.nodeStartsWithSmallSpace(new_node)) {
+          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 === -1 || new_offset === -1)
+      return
+
+    let new_rangeParams = {
+      startNodeIndex: new_index,
+      startOffset: new_offset,
+      endNodeIndex: new_index,
+      endOffset: new_offset
+    }
+    this._setRangeParams(new_rangeParams)
+
+    e.preventDefault()
+  }
+
+  handleKeyDownArrowRight = (e) => {
+    // console.log("handleKeyDownArrowRight")
+    let rangeParams = this._getRangeParams()
+    let index = rangeParams.startNodeIndex
+    let offset = rangeParams.startOffset
+
+    if (index < 0) // Empty input field
+      return
+
+    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
+
+      let new_rangeParams = {
+        startNodeIndex: new_index,
+        startOffset: new_offset,
+        endNodeIndex: new_index,
+        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
+      
+        if (node.nodeValue.length > 1) {
+          new_index = index
+          new_offset = SMALL_SPACE_LENGTH + 1
+        } else {
+          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
+            } else {
+              new_index = index + 1
+              new_offset = 0
+            }
+          } else {
+            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  
+      }
+    }
+
+
+    // If at the end of a text node
+    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
+
+      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)
+
+      e.preventDefault()
+      return
+    }
+  }
+
+  editableDivIsPlainText = () => {
+    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 
+    // the dollar symbol will usually be preceded by a space, eg:
+    //
+    //    "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
+      // 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
+      }
+      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,"$")
+      
+      // 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)
+
+      this.applyChangesToComponent(raw_text,
+                                  mimeType,
+                                  new_rangeParams, 
+                                  this.props.useExpertMode,
+                                  this.props.selectedTab)
+    } catch (error) {
+      console.error(error)
+    }
+
+    e.preventDefault()
+  }
+
+  showEquationEditorOnKeyDown = (e) => {
+    this.showEquationEditor(true)
+    e.preventDefault()
+  }
+
+  handleKeyDownEnter = (e) => {
+    try {
+      console.log("handleKeyDownEnter")
+      if (this.enableMultiline())
+        this.insertNewLine(e)
+    } catch (error) {
+      console.error(error)
+    }
+    e.preventDefault()
+  }
+
+  handleKeyDown = (e) => {
+    try {
+      // Lets set up or update the undo redo history
+      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.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
+        }
+        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
+        // otherwise
+        if (e.key === "-" || e.key === "_")
+          this.styleText(e, "Subscript")        
+
+        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") || 
+              e.key === "!" ||
+              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})
+        } else {
+          this.setState({showAccentBar:false})
+        }
+        return
+      }
+
+      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 
+      // (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 (e.key === "Backspace") {
+        this.handleKeyDownBackspace(e)
+        return
+      }
+      if (e.key === "ArrowLeft") {
+        this.handleKeyDownArrowLeft(e)
+        return
+      }
+      if (e.key === "ArrowRight") {
+        this.handleKeyDownArrowRight(e)
+        return
+      }
+      if (e.key === "$") {
+        this.handleKeyDownDollar(e)
+        return
+      }
+
+      // Implement special command + keys
+      if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
+        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
+        }
+      } else if (/(Win)/i.test(window.navigator.platform)) {
+        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
+      }
+
+      // 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)
+            if (_this.keyPressStartTime > 0)
+              if (Date.now() - _this.keyPressStartTime > 450)
+                _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)
+      if (!this.editableDivIsPlainText()) {
+        // console.log(params)
+        if (params.startNodeIndex === -1) {
+          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
+        }
+      } 
+
+      // 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
+      }
+
+    } catch (error) {
+      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
+
+      // 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
+
+        if (index >= 0) {
+          if (isKatexNode(this._findNodeWithIndex(index))) {
+            let new_index = 0
+            let new_offset = 0
+
+            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
+            } 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
+              }
+            }
+
+            let new_rangeParams = {
+              startNodeIndex:new_index,
+              startOffset: new_offset,
+              endNodeIndex: new_index,
+              endOffset: new_offset
+            }
+            this._setRangeParams(new_rangeParams)
+          }
+        }
+      }
+
+      if (e.key === "ArrowLeft") {
+        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
+
+            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
+              }
+            } else {
+              new_index = index + 1
+              new_offset = SMALL_SPACE_LENGTH
+            }
+
+            let new_rangeParams = {
+              startNodeIndex:new_index,
+              startOffset: new_offset,
+              endNodeIndex: new_index,
+              endOffset: new_offset
+            }
+            // console.log(new_rangeParams)
+            this._setRangeParams(new_rangeParams)
+          }
+        }
+      }
+
+      this.updateActiveButtons()
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  handleInput = (event) => {
+    try {
+      // console.log("handleInput")
+      const 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)
+      else {
+        // console.log("Current range params:")
+        // console.log(params)
+      }
+
+      let nodeCounts = this._countNodeTypes()
+      let mimeType = this.getMimeType(nodeCounts.html > 0, nodeCounts.math > 0)
+      this.applyChangesToComponent(raw_text, mimeType, params, 
+        this.props.useExpertMode, this.props.selectedTab)
+    } catch (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
+      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 activeButtons = {bold, italic, underline, subscript, superscript}
+      // console.log(activeButtons)
+
+      let update = true
+      if (this.lastSetActiveButtons !== null) {
+        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})
+      }
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  componentDidMount(){
+    try {
+      setupKatex()
+
+      this.editableDiv.addEventListener('keydown',this.handleKeyDown);
+      this.editableDiv.addEventListener('keyup',this.handleKeyUp);
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  componentWillUnmount(){
+    try {
+      this.editableDiv.removeEventListener('keydown',this.handleKeyDown);
+      this.editableDiv.removeEventListener('keyup',this.handleKeyUp);
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  componentDidUpdate() {
+    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()
+      }
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  showEquationEditor = (moveCursorOnInsert=false, node=null) => {
+    try {
+      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
+        this.setState({
+          showEquationEditor:true,
+          equationEditorLatex:""
+          });
+        return
+      }
+
+      let latex = ""
+      let offset = 0
+
+      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
+      }
+      
+      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
+      }
+  
+      this.markedRawText = elementToMarkedRawText(this.editableDiv, node, offset, this.enableHtml())
+      // console.log("Marked text:"+this.markedRawText)
+      this.moveCursorOnInsert = moveCursorOnInsert
+      this.setState({
+        showEquationEditor:true,
+        equationEditorLatex:latex
+        });
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  handleMouseDown = (event) => {    
+    this.showEquationEditorOnMouseUp = false
+    let node = null
+    try {
+      node = event.target
+      let isLatex = false
+      do {
+        if (isKatexNode(node)) {
+          isLatex = true
+          break
+        }
+        node = node.parentNode
+      } while (node !== this.editableDiv && node !== null)
+
+      if (!isLatex)
+        return
+
+      this.showEquationEditorOnMouseUp = true
+      // Save current range parameters so that we can restore them later if we wish
+      this.setOldRangeParams(this._getRangeParams()) 
+
+      // this.editableDiv.focus()
+      // this.showEquationEditor(false, node)
+
+      // event.preventDefault()
+    } catch (error) {
+      console.error(error)
+      console.log(node)
+    }
+  }
+
+  handleMouseUp = (event) => {
+    try {
+      this.initialiseHistory()
+
+      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
+      }
+
+      if (params.startNodeIndex === params.endNodeIndex && 
+        params.startOffset === params.endOffset &&
+        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
+      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
+        } else {
+          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) {
+        this._setRangeParams(new_rangeParams)
+        event.preventDefault()
+        return      
+      }
+
+      this.updateActiveButtons()
+    } catch (error) {
+      console.error(error)
+    }
+
+  }
+
+  handleEquationEditorClose = () => {
+    try {
+      this.setState({showEquationEditor:false}, () => {
+        this.editableDiv.focus()
+        // this._setRangeParams(getOldRangeParams)
+      })
+    } catch (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()
+      
+      // 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)
+
+        // Delete node if it was a latex node
+        let new_index = -1
+        let new_offset = -1
+        if (this.editingExistingEquation) {
+
+          let indexOfEditedNode = this._findIndexOfNode(this.editingNode)
+
+          if (oldRangeParams.startNodeIndex === indexOfEditedNode + 1) {
+            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
+          } else {
+            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
+        if (this.editingExistingEquation)
+          mimeType = this.getMimeType(nodeCounts.html > 0, nodeCounts.katex > 1)
+        else
+          mimeType = this.getMimeType(nodeCounts.html > 0, nodeCounts.katex > 0)
+
+        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) + 
+      //   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()
+      if (this.moveCursorOnInsert) {
+        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
+          new_rangeParams = {
+            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)
+
+      this.applyChangesToComponent(new_raw_text, mimeType, new_rangeParams, 
+                                this.props.useExpertMode, this.props.selectedTab)
+      this.setState({showEquationEditor:false})
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  // findEditableDiv = (node) => {
+  //   if (node === null)
+  //     return null
+  //   if (node.classList !== null && node.classList !== undefined && 
+  //      node.classList.contains("MathRichInput"))
+  //     return node
+  //   return this.findEditableDiv(node.parentNode);
+  // }
+
+  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
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  handleToolbarButtonClick = (event, buttonName) => {
+    console.log("button name: ",buttonName)
+    try {
+      if (buttonName === "Equation") {
+        this.showEquationEditor(true)
+      }
+      let style = buttonName
+      let success = this.styleText(event, style)
+      if (!success)
+        console.warn("execCommand returned false: "+style)
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  fetchAccentLetter = (event) => {
+    try {
+      let rangeParams = this._getRangeParams()
+      if (rangeParams === null) {
+        console.error("Cound not get range params")
+        return null
+      }
+      let node = this._findNodeWithIndex(rangeParams.endNodeIndex)
+      let offset = rangeParams.endOffset
+
+      let raw_text = elementToMarkedRawText(this.editableDiv, node, offset, this.enableHtml())
+
+      return getCharacterBeforeMarks(raw_text)
+    } catch (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
+
+      this.applyChangesToComponent(new_raw_text, this.state.mimeType, new_rangeParams, 
+                                  this.props.useExpertMode, this.props.selectedTab)
+    } catch (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)
+
+      this.applyChangesToComponent(new_raw_text, this.state.mimeType, new_rangeParams, 
+                                  this.props.useExpertMode, this.props.selectedTab)
+    } catch (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}
+
+      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 
+      } else {
+        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)
+
+      this.applyChangesToComponent(new_raw_text, this.state.mimeType, new_rangeParams, 
+                                  this.props.useExpertMode, this.props.selectedTab)
+    } catch (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
+
+      this.applyChangesToComponent(new_raw_text, this.state.mimeType, new_rangeParams, 
+                                  this.props.useExpertMode, this.props.selectedTab)
+    } catch (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}
+      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))
+
+      this.applyChangesToComponent(new_raw_text, this.state.mimeType, new_rangeParams, 
+                                  this.props.useExpertMode, this.props.selectedTab)
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  handleAccentButtonClick = (event, oldCharacter, newCharacter) => {
+    try {
+      this.insertAccentLetter(event, oldCharacter, newCharacter)
+      this.setState({showAccentBar:false})
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+
+  handleFocus = (event) => {
+    // console.log("handleFocus")
+    try {
+      this._setRangeParams(this.getOldRangeParams())
+      this.setState({hasFocus:true})
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  handleBlur = (event) => {
+    try {
+      this.setState({hasFocus:false, showAccentBar:false})
+    } catch (error) {
+      console.error(error)
+    }
+  }
+  
+  render() {
+    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)
+    }
+
+    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
+    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>
+        </div>
+      </div>
+      { this.state.showEquationEditor &&
+        <EquationEditorModal
+          ref={(r) => this.equationEditorModal = r} 
+          handleClose={this.handleEquationEditorClose}
+          handleInsert={this.handleEquationEditorInsert}
+          latex={this.state.equationEditorLatex}/>
+      }
+ </>
+  }
+}