@zzish/math-rich-input 0.1.42 → 0.1.44

package/src/MathRichInput.jsx

@@ -3,31 +3,31 @@ import React from "react";
 import katex from "katex";
 import { setupKatex } from "./katexHelper";
 
-import EquationEditorModal from "./EquationEditorModal";
-import Toolbar from "./Toolbar";
+import EquationEditorModal from "./EquationEditorModal.jsx";
+import Toolbar from "./Toolbar.jsx";
 
 import {
-  getMark,
-  isKatexNode,
-  elementToMarkedRawText,
-  removeEncodingIfPlainText,
-  rawTextToHtml,
-  getLatex,
-  setRangeParams,
-  getRangeParams,
-  getNodeTextLength,
-  findNodeWithIndex,
-  findIndexOfNode,
-  findFirstTextNode,
-  countNodeTypes,
-  startsWithSmallSpace,
-  getCharacterBeforeMarks,
-  replaceCharacterBeforeMarks,
-  replaceStringBeforeMarks,
-  insertCharacterBeforeMarks,
-  removeMarks,
-  replaceMarksWithMath,
-  sanitiseHtml,
+    getMark,
+    isKatexNode,
+    elementToMarkedRawText,
+    removeEncodingIfPlainText,
+    rawTextToHtml,
+    getLatex,
+    setRangeParams,
+    getRangeParams,
+    getNodeTextLength,
+    findNodeWithIndex,
+    findIndexOfNode,
+    findFirstTextNode,
+    countNodeTypes,
+    startsWithSmallSpace,
+    getCharacterBeforeMarks,
+    replaceCharacterBeforeMarks,
+    replaceStringBeforeMarks,
+    insertCharacterBeforeMarks,
+    removeMarks,
+    replaceMarksWithMath,
+    sanitiseHtml,
 } from "./mathRichInputHelper";
 
 import "./MathRichInput.css";
@@ -52,2193 +52,2104 @@ const MARK_REG_EXP = new RegExp(MARK, "g");
 const MAX_HISTORY_LENGTH = 100;
 
 const DEFAULT_OPTIONS = {
-  useExpertMode: false,
-  selectedTab: null,
+    useExpertMode: false,
+    selectedTab: null,
 };
 
 // Consts for creating accented letters in handleKeyDownAccentHelper
 const GRAVE_LETTERS = {
-  a: "à",
-  e: "è",
-  i: "ì",
-  o: "ò",
-  u: "ù",
-  d: "ð",
-  A: "À",
-  E: "È",
-  I: "Ì",
-  O: "Ò",
-  U: "Ù",
-  D: "Ð",
+    a: "à",
+    e: "è",
+    i: "ì",
+    o: "ò",
+    u: "ù",
+    d: "ð",
+    A: "À",
+    E: "È",
+    I: "Ì",
+    O: "Ò",
+    U: "Ù",
+    D: "Ð",
 };
 const ACCUTE_LETTERS = {
-  a: "á",
-  e: "é",
-  i: "í",
-  n: "ń",
-  o: "ó",
-  u: "ú",
-  y: "ý",
-  A: "Á",
-  E: "É",
-  I: "Í",
-  N: "Ń",
-  O: "Ó",
-  U: "Ú",
-  Y: "Ý",
+    a: "á",
+    e: "é",
+    i: "í",
+    n: "ń",
+    o: "ó",
+    u: "ú",
+    y: "ý",
+    A: "Á",
+    E: "É",
+    I: "Í",
+    N: "Ń",
+    O: "Ó",
+    U: "Ú",
+    Y: "Ý",
 };
 const CARET_LETTERS = {
-  a: "â",
-  e: "ê",
-  i: "î",
-  o: "ô",
-  u: "û",
-  A: "Â",
-  E: "Ê",
-  I: "Î",
-  O: "Ô",
-  U: "Û",
+    a: "â",
+    e: "ê",
+    i: "î",
+    o: "ô",
+    u: "û",
+    A: "Â",
+    E: "Ê",
+    I: "Î",
+    O: "Ô",
+    U: "Û",
 };
 const TILDE_LETTERS = { a: "ã", n: "ñ", o: "õ", A: "Ã", N: "Ñ", O: "Õ" };
 const COLON_LETTERS = {
-  a: "ä",
-  e: "ë",
-  i: "ï",
-  o: "ö",
-  u: "ü",
-  y: "ÿ",
-  A: "Ä",
-  E: "Ë",
-  I: "Ï",
-  O: "Ö",
-  U: "Ü",
-  Y: "Ÿ",
+    a: "ä",
+    e: "ë",
+    i: "ï",
+    o: "ö",
+    u: "ü",
+    y: "ÿ",
+    A: "Ä",
+    E: "Ë",
+    I: "Ï",
+    O: "Ö",
+    U: "Ü",
+    Y: "Ÿ",
 };
 const AT_LETTERS = { a: "å", A: "Å" };
 const AND_LETTERS = { a: "æ", o: "œ", s: "ß", A: "Æ", O: "Œ", S: "ß" };
 const COMMA_LETTERS = { c: "ç", C: "Ç" };
 const SLASH_LETTERS = { o: "ø", O: "Ø" };
 const MINUS_LETTERS = {
-  a: "ā",
-  e: "ē",
-  i: "ī",
-  o: "ō",
-  u: "ū",
-  A: "Ā",
-  E: "Ē",
-  I: "Ī",
-  O: "Ō",
-  U: "Ū",
+    a: "ā",
+    e: "ē",
+    i: "ī",
+    o: "ō",
+    u: "ū",
+    A: "Ā",
+    E: "Ē",
+    I: "Ī",
+    O: "Ō",
+    U: "Ū",
 };
 const CTRL_ALT_SHIFT_LETTERS = { "?": "¿", "!": "¡", "/": "¿", 1: "¡" }; // Necessary
 const LETTERS = {
-  "`": GRAVE_LETTERS,
-  "'": ACCUTE_LETTERS,
-  '"': ACCUTE_LETTERS, // Necessary
-  "^": CARET_LETTERS,
-  6: CARET_LETTERS,
-  "~": TILDE_LETTERS,
-  ":": COLON_LETTERS,
-  "@": AT_LETTERS,
-  2: AT_LETTERS,
-  "&": AND_LETTERS,
-  7: AND_LETTERS, // Necessary
-  ",": COMMA_LETTERS,
-  "/": SLASH_LETTERS,
-  "-": MINUS_LETTERS,
+    "`": GRAVE_LETTERS,
+    "'": ACCUTE_LETTERS,
+    '"': ACCUTE_LETTERS, // Necessary
+    "^": CARET_LETTERS,
+    6: CARET_LETTERS,
+    "~": TILDE_LETTERS,
+    ":": COLON_LETTERS,
+    "@": AT_LETTERS,
+    2: AT_LETTERS,
+    "&": AND_LETTERS,
+    7: AND_LETTERS, // Necessary
+    ",": COMMA_LETTERS,
+    "/": SLASH_LETTERS,
+    "-": MINUS_LETTERS,
 };
 const ACCENT_KEYS = ["`", "'", "^", "~", ":", "@", "&", ",", "/", "-"];
 const CTRL_ALT_SHIFT_KEYS = ["?", "!"];
 // End of consts for creating accented letters in handleKeyDownAccentHelper
 
 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: "",
-    };
+    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);
+        // 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;
+        // 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 = "";
+        // 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;
+        // 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.afterComponentUpdateData = 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 = [];
-    this.accent = "";
-
-    // keeps track of whether user is composing in an IME - see https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent
-    this.isComposing = false;
-  }
-
-  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(hasHtml, hasMath) {
-    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;
-    }
+        // 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;
 
-    if (hasMath) return MIME_TYPE_ZZISH_HTML_MATH;
-    if (hasHtml || !outputPlainText) return MIME_TYPE_HTML;
-
-    return MIME_TYPE_PLAIN_TEXT;
-  }
-
-  _countNodeTypes = () => {
-    return countNodeTypes(this.editableDiv);
-  };
-
-  applyChangesToComponent = (
-    value,
-    mimeType,
-    rangeParams,
-    isExpertMode,
-    selectedTab
-  ) => {
-
-    // rangeParams, isExpertMode and selectedTab can be null, in which case we will set them
-    if (rangeParams === null) rangeParams = this.lastSetRangeParams;
-    
-    this.afterComponentUpdateData = {rangeParams, value}
-
-    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;
-  };
+        // Elements defining the current state of range
+        this.afterComponentUpdateData = 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
 
-  undo = () => {
-    const currentState = this.undoHistory.pop();
+        this.lastSetActiveButtons = null;
 
-    let previousState = this.undoHistory.pop();
-    if (previousState === null || previousState === undefined) {
-      previousState = this.initialHistoryState;
-    }
+        this.onChangeCallback = this.props.onChange;
 
-    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);
-
-    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) {
-    this.oldRangeParams = params;
-  }
-
-  getOldRangeParams() {
-    if (this.oldRangeParams === null || this.oldRangeParams === undefined)
-      return null;
-    let params = { ...this.oldRangeParams };
-    return params;
-  }
-
-  _getRangeParams(editableDiv = null) {
-    if (editableDiv === null) editableDiv = this.editableDiv;
-    let rangeParams = getRangeParams(editableDiv);
-    return rangeParams;
-  }
-
-  _setRangeParams = (params) => {
-    try {
-      setRangeParams(this.editableDiv, params);
-      this.setOldRangeParams(params);
-      this.lastSetRangeParmas = params;
-    } catch (error) {
-      console.error(error);
-      console.log(this.editableDiv.childNodes);
+        // 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.accent = "";
+
+        // keeps track of whether user is composing in an IME - see https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent
+        this.isComposing = false;
     }
-  };
-
-  _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();
+
+    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;
     }
 
-    // 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;
+    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 (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;
+
+    enableHtml() {
+        let outputTex = this.props.outputTex ?? false;
+        return !outputTex;
     }
 
-    if (deleteToEmpty) {
-      // console.log("deleteToEmpty")
-      let new_rangeParams = {
-        startNodeIndex: 0,
-        startOffset: 1,
-        endNodeIndex: 0,
-        endOffset: 1,
-        startGlobalOffset: 0,
-        endGlobalOffset: 0,
-      };
-      this.applyChangesToComponent(
-        "",
-        this.getMimeType(false, false),
-        new_rangeParams,
-        this.props.useExpertMode,
-        this.props.selectedTab
-      );
-      e.preventDefault()
-      return;
+    enableMath() {
+        if (this.props.enableMath !== null && this.props.enableMath !== undefined)
+            return this.props.enableMath;
+        return true;
     }
 
-    // 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;
+    // 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)
+    // }
 
-    // At this point we must have start_offset === 0 or 1 and a previous node
+    getMimeType(hasHtml, hasMath) {
+        let outputTex = this.props.outputTex ?? false;
+        let outputPlainText = this.props.outputPlainText ?? false;
 
-    let prevNode = this._findNodeWithIndex(start_node_index - 1);
+        if (outputTex) {
+            if (hasMath || !outputPlainText) return MIME_TYPE_TEX;
+            else return MIME_TYPE_PLAIN_TEXT;
+        }
 
-    if (!isKatexNode(prevNode)) {
-      if (this.nodeStartsWithSmallSpace(startNode)) {
-        this.removeNewLine();
-        e.preventDefault();
-      }
-      return;
-    }
+        if (hasMath) return MIME_TYPE_ZZISH_HTML_MATH;
+        if (hasHtml || !outputPlainText) return MIME_TYPE_HTML;
 
-    // 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;
+        return MIME_TYPE_PLAIN_TEXT;
     }
 
-    let new_rangeParams = {
-      startNodeIndex: new_index,
-      startOffset: new_offset,
-      endNodeIndex: new_index,
-      endOffset: new_offset,
+    _countNodeTypes = () => {
+        return countNodeTypes(this.editableDiv);
     };
 
-    // 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);
-    raw_text = removeEncodingIfPlainText(raw_text, mimeType, this.enableHtml());
-
-    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("handleKeyDownArrowLeft")
-    // console.log(rangeParams)
-    let new_globalOffset = rangeParams.endGlobalOffset - 1;
-    let new_rangeParams = null
-    if (e.shiftKey && new_globalOffset > rangeParams.startGlobalOffset) {
-        new_rangeParams = {
-          startGlobalOffset: rangeParams.startGlobalOffset,
-          endGlobalOffset: new_globalOffset,
+    applyChangesToComponent = (value, mimeType, rangeParams, isExpertMode, selectedTab) => {
+        // rangeParams, isExpertMode and selectedTab can be null, in which case we will set them
+        if (rangeParams === null) rangeParams = this.lastSetRangeParams;
+
+        this.afterComponentUpdateData = { rangeParams, value };
+
+        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;
         }
-    } else {
-      new_rangeParams = {
-        startGlobalOffset: new_globalOffset,
-        endGlobalOffset: new_globalOffset,
-      };
-    }
-    // console.log(new_rangeParams)
-    e.preventDefault();
-    this._setRangeParams(new_rangeParams);
-    return;
-  };
-
-  handleKeyDownArrowRight = (e) => {
-    // console.log("handleKeyDownArrowRight")
-    let rangeParams = this._getRangeParams();
-    let index = rangeParams.startNodeIndex;
-    let offset = rangeParams.startOffset;
-
-    let new_rangeParams = null
-    let new_globalOffset = rangeParams.endGlobalOffset + 1;
-    if (e.shiftKey && new_globalOffset > rangeParams.startGlobalOffset) {
-      new_rangeParams = {
-        startGlobalOffset: rangeParams.startGlobalOffset,
-        endGlobalOffset: new_globalOffset,
-      };
-    } else {
-      new_rangeParams = {
-        startGlobalOffset: new_globalOffset,
-        endGlobalOffset: new_globalOffset,
-      };
+        return true;
+    };
+
+    undo = () => {
+        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);
+
+        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) {
+        this.oldRangeParams = params;
     }
-    e.preventDefault();
-    this._setRangeParams(new_rangeParams);
-    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;
-
-      // So we will convert to latex
-      // If we get the raw text without replacing the dollars with marks, the dollars
-      // will be converted to html codes. So we will replace them with marks and then
-      // replace the marks with dollars later
-      // Remove first dollar and insert marks into the node instead of dollars
-      let latex = node.nodeValue.substring(
-        first_dollar_pos + 1,
-        second_dollar_pos
-      );
-
-      node.nodeValue =
-        node.nodeValue.substring(0, first_dollar_pos) +
-        MARK +
-        latex +
-        MARK +
-        node.nodeValue.substring(second_dollar_pos);
-
-      // Get the raw text and now put the dollars back
-      let raw_text = elementToMarkedRawText(
-        e.target,
-        null,
-        0,
-        this.enableHtml()
-      );
-      // now replace the marks with math
-      raw_text = replaceMarksWithMath(raw_text, latex, this.enableHtml());
-
-      // 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
-      );
-    } catch (error) {
-      console.error(error);
+
+    getOldRangeParams() {
+        if (this.oldRangeParams === null || this.oldRangeParams === undefined) return null;
+        let params = { ...this.oldRangeParams };
+        return params;
     }
 
-    e.preventDefault();
-  };
+    _getRangeParams(editableDiv = null) {
+        if (editableDiv === null) editableDiv = this.editableDiv;
+        let rangeParams = getRangeParams(editableDiv);
+        return rangeParams;
+    }
 
-  showEquationEditorOnKeyDown = (e) => {
-    this.showEquationEditor(true);
-    e.preventDefault();
-  };
+    _setRangeParams = (params) => {
+        try {
+            setRangeParams(this.editableDiv, params);
+            this.setOldRangeParams(params);
+            this.lastSetRangeParmas = params;
+        } catch (error) {
+            console.error(error);
+            console.log(this.editableDiv.childNodes);
+        }
+    };
 
-  handleKeyDownEnter = (e) => {
-    try {
-      if (this.enableMultiline()) this.insertNewLine(e);
-    } catch (error) {
-      console.error(error);
-    }
-    e.preventDefault();
-  };
-
-  handleKeyDownAccentHelper = (e) => {
-    // console.log(e.ctrlKey)
-    // console.log(e.altKey)
-    // console.log(e.shiftKey)
-    let new_accent = "";
-    let new_char = "";
-    // console.log(e.key)
-    if (e.ctrlKey) {
-      // First check for CTRL+ALT+SHIFT keys
-      if (e.shiftKey && e.altKey) {
-        console.log(e.key);
-        if (CTRL_ALT_SHIFT_LETTERS.hasOwnProperty(e.key))
-          new_char = CTRL_ALT_SHIFT_LETTERS[e.key];
-      }
-      // Second check special case of CTRL-tilde
-      else if (e.shiftKey && e.key === "`") new_accent = "~";
-      // Finally check for normal accent keys
-      else if (LETTERS.hasOwnProperty(e.key)) new_accent = e.key;
-    } else if (this.accent !== "") {
-      // Ignore key events for shift and caps lock as that can mean the user
-      // is simply changing to or from capitals and we don't want to reset
-      // this.accent in this case
-      if (e.key === "Shift") return false;
-      if (e.key === "CapsLock") return false;
-      // Get the possible letters that use this accent and test to see if the
-      // current key pressed is one of those letters.
-      let letters = LETTERS[this.accent];
-      if (letters.hasOwnProperty(e.key)) new_char = letters[e.key];
+    _findNodeWithIndex(index) {
+        return findNodeWithIndex(this.editableDiv, index);
     }
-    // If a new accent has been set, store it in this.accent, otherwise clear this.accent
-    if (new_accent === "") this.accent = "";
-    else {
-      e.preventDefault();
-      this.accent = new_accent;
-      // console.log("Accent set: " + this.accent);
-      return true;
+
+    _findIndexOfNode(node) {
+        return findIndexOfNode(this.editableDiv, node);
     }
-    if (new_char !== "") {
-      // Prevent the original character being insereted
-      e.preventDefault();
-      // Insert the accented character a the cursor position
-      this.insertRawText(new_char, false);
-      return true;
+
+    _findFirstTextNode() {
+        return findFirstTextNode(this.editableDiv);
     }
-    // Mechanism 2 : Automatically convert a/` into à, for example
-    // if (ACCENT_KEYS.includes(e.key)) {
-    //   let pos = e.target.selectionStart
-    //   let text = e.target.value
-    //   if (pos < 2)
-    //     return
-    //   if (text.charAt(pos-1) !== '/')
-    //     return
-    //   let letters = LETTERS[e.key]
-    //   let old_letter = text.charAt(pos-2)
-    //   if (letters.hasOwnProperty(old_letter)) {
-    //     e.preventDefault()
-    //     text = text.substring(0,pos-2) + letters[old_letter] + text.substring(pos)
-    //     this.setState({value:text},
-    //       () => {e.target.selectionStart = e.target.selectionEnd = pos - 1
-    //     })
-    //     return true
-    //   }
-    // }
-    // if (CTRL_ALT_SHIFT_KEYS.includes(e.key)) {
-    //   let pos = e.target.selectionStart
-    //   let text = e.target.value
-    //   if (pos < 1)
-    //     return
-    //   if (text.charAt(pos-1) !== '/')
-    //     return
-    //   e.preventDefault()
-    //   text = text.substring(0,pos-1) + CTRL_ALT_SHIFT_LETTERS[e.key] + text.substring(pos)
-    //   this.setState({value:text},
-    //     () => {e.target.selectionStart = e.target.selectionEnd = pos
-    //   })
-    //   return true
-    // }
-  };
 
-  handleKeyDown = (e) => {
-    try {
-      // Lets set up or update the undo redo history
-      this.initialiseHistory();
+    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 ((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 === "_" ||
-          e.key === "+" ||
-          e.key === "=") &&
-        this.enableHtml()
-      ) {
-        if (e.key === "b") this.styleText(e, "Bold");
-        if (e.key === "i") this.styleText(e, "Italic");
-        if (e.key === "u") this.styleText(e, "Underline");
-
-        // Don't apply superscript is ctrl ^, this is reserved for creating accents
+        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 (
-          /(Win)/i.test(window.navigator.platform) &&
-          e.ctrlKey &&
-          (e.key === "6" || e.key === "^")
+            start_node_index === 0 &&
+            start_offset === 1 &&
+            end_node_index === 0 &&
+            end_offset === 1
         ) {
-          // do nothing
-        } else {
-          // otherwise
-          if (e.key === "6" || e.key === "^" || e.key === "+" || 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;
+            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 ((e.metaKey || e.ctrlKey) && e.key === "v") {
-        // console.log("Executing paste");
-        document.execCommand("paste");
-        return;
-      }
-      if ((e.metaKey || e.ctrlKey) && e.key === "c") {
-        // console.log("Executing copy");
-        document.execCommand("copy");
-        return;
-      }
-      if ((e.metaKey || e.ctrlKey) && e.key === "x") {
-        // console.log("Executing cut");
-        document.execCommand("cut");
-        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 === "?")
-          ) {
+        if (deleteToEmpty) {
+            // console.log("deleteToEmpty")
+            let new_rangeParams = {
+                startNodeIndex: 0,
+                startOffset: 1,
+                endNodeIndex: 0,
+                endOffset: 1,
+                startGlobalOffset: 0,
+                endGlobalOffset: 0,
+            };
+            this.applyChangesToComponent(
+                "",
+                this.getMimeType(false, false),
+                new_rangeParams,
+                this.props.useExpertMode,
+                this.props.selectedTab
+            );
             e.preventDefault();
             return;
-          }
         }
-      }
 
-      if (e.altKey && e.key === "Alt") {
-        let key = this.fetchAccentLetter();
+        // 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);
+        raw_text = removeEncodingIfPlainText(raw_text, mimeType, this.enableHtml());
+
+        this.applyChangesToComponent(
+            raw_text,
+            mimeType,
+            new_rangeParams,
+            this.props.useExpertMode,
+            this.props.selectedTab
+        );
+
+        // Consume the event
+        e.preventDefault();
+    };
+
+    nodeStartsWithSmallSpace(node) {
         if (
-          key === "a" ||
-          key === "e" ||
-          key === "i" ||
-          key === "o" ||
-          key === "u" ||
-          key === "c" ||
-          key === "l" ||
-          key === "n" ||
-          key === "s" ||
-          key === "?" ||
-          key === "!"
-        ) {
-          console.log("showing/hiding accent bar")
-          this.setState({ showAccentBar: !this.state.showAccentBar});
+            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("handleKeyDownArrowLeft")
+        // console.log(rangeParams)
+        let new_globalOffset = rangeParams.endGlobalOffset - 1;
+        let new_rangeParams = null;
+        if (e.shiftKey && new_globalOffset > rangeParams.startGlobalOffset) {
+            new_rangeParams = {
+                startGlobalOffset: rangeParams.startGlobalOffset,
+                endGlobalOffset: new_globalOffset,
+            };
         } else {
-          console.log("hiding accent bar")
-          this.setState({ showAccentBar: false });
+            new_rangeParams = {
+                startGlobalOffset: new_globalOffset,
+                endGlobalOffset: new_globalOffset,
+            };
         }
-        e.preventDefault()
+        // console.log(new_rangeParams)
+        e.preventDefault();
+        this._setRangeParams(new_rangeParams);
         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) {
-          console.log("Hiding accent bar 2")
-          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);
+    handleKeyDownArrowRight = (e) => {
+        // console.log("handleKeyDownArrowRight")
+        let rangeParams = this._getRangeParams();
+        let index = rangeParams.startNodeIndex;
+        let offset = rangeParams.startOffset;
+
+        let new_rangeParams = null;
+        let new_globalOffset = rangeParams.endGlobalOffset + 1;
+        if (e.shiftKey && new_globalOffset > rangeParams.startGlobalOffset) {
+            new_rangeParams = {
+                startGlobalOffset: rangeParams.startGlobalOffset,
+                endGlobalOffset: new_globalOffset,
+            };
+        } else {
+            new_rangeParams = {
+                startGlobalOffset: new_globalOffset,
+                endGlobalOffset: new_globalOffset,
+            };
+        }
+        e.preventDefault();
+        this._setRangeParams(new_rangeParams);
         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;
+    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;
+
+            // So we will convert to latex
+            // If we get the raw text without replacing the dollars with marks, the dollars
+            // will be converted to html codes. So we will replace them with marks and then
+            // replace the marks with dollars later
+            // Remove first dollar and insert marks into the node instead of dollars
+            let latex = node.nodeValue.substring(first_dollar_pos + 1, second_dollar_pos);
+
+            node.nodeValue =
+                node.nodeValue.substring(0, first_dollar_pos) +
+                MARK +
+                latex +
+                MARK +
+                node.nodeValue.substring(second_dollar_pos);
+
+            // Get the raw text and now put the dollars back
+            let raw_text = elementToMarkedRawText(e.target, null, 0, this.enableHtml());
+            // now replace the marks with math
+            raw_text = replaceMarksWithMath(raw_text, latex, this.enableHtml());
+
+            // 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
+            );
+        } catch (error) {
+            console.error(error);
         }
-      }
 
-      // Lets handle the enter key (new line) ourselves
-      if (e.key === "Enter") {
-        this.handleKeyDownEnter(e);
-        return;
-      }
+        e.preventDefault();
+    };
 
-      // 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 () {
-            if (_this.keyPressStartTime > 0)
-              if (Date.now() - _this.keyPressStartTime > 450)
-                _this.setState({ showAccentBar: true });
-          }, 500);
+    showEquationEditorOnKeyDown = (e) => {
+        this.showEquationEditor(true);
+        e.preventDefault();
+    };
+
+    handleKeyDownEnter = (e) => {
+        try {
+            if (this.enableMultiline()) this.insertNewLine(e);
+        } catch (error) {
+            console.error(error);
         }
-      }
-
-      // 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()) {
-        if (params.startNodeIndex === -1) {
-          console.error("Couldn't get range params");
-          return;
+        e.preventDefault();
+    };
+
+    handleKeyDownAccentHelper = (e) => {
+        // console.log(e.ctrlKey)
+        // console.log(e.altKey)
+        // console.log(e.shiftKey)
+        let new_accent = "";
+        let new_char = "";
+        // console.log(e.key)
+        if (e.ctrlKey) {
+            // First check for CTRL+ALT+SHIFT keys
+            if (e.shiftKey && e.altKey) {
+                console.log(e.key);
+                if (CTRL_ALT_SHIFT_LETTERS.hasOwnProperty(e.key))
+                    new_char = CTRL_ALT_SHIFT_LETTERS[e.key];
+            }
+            // Second check special case of CTRL-tilde
+            else if (e.shiftKey && e.key === "`") new_accent = "~";
+            // Finally check for normal accent keys
+            else if (LETTERS.hasOwnProperty(e.key)) new_accent = e.key;
+        } else if (this.accent !== "") {
+            // Ignore key events for shift and caps lock as that can mean the user
+            // is simply changing to or from capitals and we don't want to reset
+            // this.accent in this case
+            if (e.key === "Shift") return false;
+            if (e.key === "CapsLock") return false;
+            // Get the possible letters that use this accent and test to see if the
+            // current key pressed is one of those letters.
+            let letters = LETTERS[this.accent];
+            if (letters.hasOwnProperty(e.key)) new_char = letters[e.key];
         }
-        if (isKatexNode(startNode) || isKatexNode(endNode)) {
-          console.error("User trying to edit inside latex node");
-          e.preventDefault();
-          return;
+        // If a new accent has been set, store it in this.accent, otherwise clear this.accent
+        if (new_accent === "") this.accent = "";
+        else {
+            e.preventDefault();
+            this.accent = new_accent;
+            // console.log("Accent set: " + this.accent);
+            return true;
         }
-      }
+        if (new_char !== "") {
+            // Prevent the original character being insereted
+            e.preventDefault();
+            // Insert the accented character a the cursor position
+            this.insertRawText(new_char, false);
+            return true;
+        }
+        // Mechanism 2 : Automatically convert a/` into à, for example
+        // if (ACCENT_KEYS.includes(e.key)) {
+        //   let pos = e.target.selectionStart
+        //   let text = e.target.value
+        //   if (pos < 2)
+        //     return
+        //   if (text.charAt(pos-1) !== '/')
+        //     return
+        //   let letters = LETTERS[e.key]
+        //   let old_letter = text.charAt(pos-2)
+        //   if (letters.hasOwnProperty(old_letter)) {
+        //     e.preventDefault()
+        //     text = text.substring(0,pos-2) + letters[old_letter] + text.substring(pos)
+        //     this.setState({value:text},
+        //       () => {e.target.selectionStart = e.target.selectionEnd = pos - 1
+        //     })
+        //     return true
+        //   }
+        // }
+        // if (CTRL_ALT_SHIFT_KEYS.includes(e.key)) {
+        //   let pos = e.target.selectionStart
+        //   let text = e.target.value
+        //   if (pos < 1)
+        //     return
+        //   if (text.charAt(pos-1) !== '/')
+        //     return
+        //   e.preventDefault()
+        //   text = text.substring(0,pos-1) + CTRL_ALT_SHIFT_LETTERS[e.key] + text.substring(pos)
+        //   this.setState({value:text},
+        //     () => {e.target.selectionStart = e.target.selectionEnd = pos
+        //   })
+        //   return true
+        // }
+    };
 
-      if (this.handleKeyDownAccentHelper(e)) 
-        return;
+    handleKeyDown = (e) => {
+        try {
+            // Lets set up or update the undo redo history
+            this.initialiseHistory();
 
-      // Check if inserting character in element that starts with small space
-      if (e.key.length === 1 && // ie, it's not something like "arrowLeft"
-         params.startOffset === 0 &&
-         this.nodeStartsWithSmallSpace(startNode)) {
-        // console.log("Handling character input at start of text node with small space")
-        this.insertAfterSmallSpace(e.key, params);
-        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
-      );
-    }
-  };
+            if ((e.key === "z" || e.key === "Z") && (e.ctrlKey || e.metaKey)) {
+                if (e.shiftKey) this.redo();
+                else this.undo();
+                e.preventDefault();
+                return;
+            }
 
-  handleKeyUp = (e) => {
-    try {
-      this.keyPressed = e.key;
-      this.keyPressStartTime = -1;
+            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 === "_" ||
+                    e.key === "+" ||
+                    e.key === "=") &&
+                this.enableHtml()
+            ) {
+                if (e.key === "b") this.styleText(e, "Bold");
+                if (e.key === "i") this.styleText(e, "Italic");
+                if (e.key === "u") this.styleText(e, "Underline");
+
+                // Don't apply superscript is ctrl ^, this is reserved for creating accents
+                if (
+                    /(Win)/i.test(window.navigator.platform) &&
+                    e.ctrlKey &&
+                    (e.key === "6" || e.key === "^")
+                ) {
+                    // do nothing
+                } else {
+                    // otherwise
+                    if (e.key === "6" || e.key === "^" || e.key === "+" || 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;
+                }
+            }
 
-      // 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 ((e.metaKey || e.ctrlKey) && e.key === "v") {
+                // console.log("Executing paste");
+                document.execCommand("paste");
+                return;
+            }
+            if ((e.metaKey || e.ctrlKey) && e.key === "c") {
+                // console.log("Executing copy");
+                document.execCommand("copy");
+                return;
+            }
+            if ((e.metaKey || e.ctrlKey) && e.key === "x") {
+                // console.log("Executing cut");
+                document.execCommand("cut");
+                return;
+            }
 
-        if (index >= 0) {
-          if (isKatexNode(this._findNodeWithIndex(index))) {
-            let new_index = 0;
-            let new_offset = 0;
+            // 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;
+                    }
+                }
+            }
 
-            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;
-              }
+            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 === "!"
+                ) {
+                    console.log("showing/hiding accent bar");
+                    this.setState({ showAccentBar: !this.state.showAccentBar });
+                } else {
+                    console.log("hiding accent bar");
+                    this.setState({ showAccentBar: false });
+                }
+                e.preventDefault();
+                return;
             }
 
-            let new_rangeParams = {
-              startNodeIndex: new_index,
-              startOffset: new_offset,
-              endNodeIndex: new_index,
-              endOffset: new_offset,
-            };
-            this._setRangeParams(new_rangeParams);
-          }
+            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) {
+                    console.log("Hiding accent bar 2");
+                    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 () {
+                        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()) {
+                if (params.startNodeIndex === -1) {
+                    console.error("Couldn't get range params");
+                    return;
+                }
+                if (isKatexNode(startNode) || isKatexNode(endNode)) {
+                    console.error("User trying to edit inside latex node");
+                    e.preventDefault();
+                    return;
+                }
+            }
+
+            if (this.handleKeyDownAccentHelper(e)) return;
+
+            // Check if inserting character in element that starts with small space
+            if (
+                e.key.length === 1 && // ie, it's not something like "arrowLeft"
+                params.startOffset === 0 &&
+                this.nodeStartsWithSmallSpace(startNode)
+            ) {
+                // console.log("Handling character input at start of text node with small space")
+                this.insertAfterSmallSpace(e.key, params);
+                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
+            );
         }
-      }
+    };
 
-      if (e.key === "ArrowLeft") {
-        let rangeParams = this._getRangeParams();
-        let index = rangeParams.startNodeIndex;
+    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 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;
+            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);
+                    }
+                }
             }
 
-            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);
         }
-      }
+    };
 
-      this.updateActiveButtons();
-    } catch (error) {
-      console.error(error);
-    }
-  };
-
-  handleInput = (event) => {
-    try {
-      // console.log("handleInput")
-      if (this.isComposing) return;
-
-      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
-        );
-      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
-      );
-    } catch (error) {
-      console.error(error);
-    }
-  };
-
-  updateActiveButtons = () => {
-    try {
-      // console.log("updateActiveButtons")
-      let rangeParams = this._getRangeParams();
-      if (rangeParams === null || rangeParams === undefined) {
-        console.warn(
-          "Unable to updateActiveButtons. rangeParams: " + rangeParams
-        );
-        return;
-      }
-      if (rangeParams.startNodeIndex < 0) {
-        console.warn(
-          "Unable to updateActiveButtons. rangeParams.startNodeIndex: " +
-            rangeParams.startNodeIndex
-        );
-        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;
-          }
+    handleInput = (event) => {
+        try {
+            // console.log("handleInput")
+            if (this.isComposing) return;
+
+            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
+                );
+            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
+            );
+        } catch (error) {
+            console.error(error);
         }
-      }
-      if (update) {
-        this.lastSetActiveButtons = activeButtons;
-        this.setState({ activeButtons: activeButtons });
-      }
-    } catch (error) {
-      console.error(error);
-    }
-  };
+    };
 
-  handlePaste = (event) => {
-    let clipboardData = event.clipboardData || window.clipboardData;
-    if (clipboardData === null || clipboardData === undefined) {
-      console.warn("handlePaste called, but no clipboard data");
-      return;
-    }
-    // for (let i = 0; i < clipboardData.types.length; i++)
-    //   console.log(
-    //     clipboardData.types[i] +
-    //       ": " +
-    //       clipboardData.getData(clipboardData.types[i])
-    //   );
-    let pasteHtml = clipboardData.getData("text/html");
-    if (pasteHtml !== null && pasteHtml.length > 0) {
-      // console.log("** Paste html");
-      // console.log(pasteHtml);
-      pasteHtml = sanitiseHtml(pasteHtml);
-      // console.log("** Santised paste html");
-      // console.log(pasteHtml);
-      this.insertHtml(pasteHtml);
-      event.preventDefault();
-    } else {
-      let paste = clipboardData.getData("text");
-      const selection = window.getSelection();
-      if (!selection.rangeCount) {
-        console.warn("handlePaste called, but unable to get selection");
-        return false;
-      }
-      event.preventDefault();
-      selection.deleteFromDocument();
-      this.insertRawText(paste);
-    }
-  };
-
-  componentDidMount() {
-    try {
-      setupKatex();
-
-      this.editableDiv.addEventListener("keydown", this.handleKeyDown);
-      this.editableDiv.addEventListener("keyup", this.handleKeyUp);
-      this.editableDiv.addEventListener("paste", this.handlePaste);
-      if (this.props.autofocus === true) this.editableDiv.focus();
-    } catch (error) {
-      console.error(error);
+    updateActiveButtons = () => {
+        try {
+            // console.log("updateActiveButtons")
+            let rangeParams = this._getRangeParams();
+            if (rangeParams === null || rangeParams === undefined) {
+                console.warn("Unable to updateActiveButtons. rangeParams: " + rangeParams);
+                return;
+            }
+            if (rangeParams.startNodeIndex < 0) {
+                console.warn(
+                    "Unable to updateActiveButtons. rangeParams.startNodeIndex: " +
+                        rangeParams.startNodeIndex
+                );
+                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);
+        }
+    };
+
+    handlePaste = (event) => {
+        let clipboardData = event.clipboardData || window.clipboardData;
+        if (clipboardData === null || clipboardData === undefined) {
+            console.warn("handlePaste called, but no clipboard data");
+            return;
+        }
+        // for (let i = 0; i < clipboardData.types.length; i++)
+        //   console.log(
+        //     clipboardData.types[i] +
+        //       ": " +
+        //       clipboardData.getData(clipboardData.types[i])
+        //   );
+        let pasteHtml = clipboardData.getData("text/html");
+        if (pasteHtml !== null && pasteHtml.length > 0) {
+            // console.log("** Paste html");
+            // console.log(pasteHtml);
+            pasteHtml = sanitiseHtml(pasteHtml);
+            // console.log("** Santised paste html");
+            // console.log(pasteHtml);
+            this.insertHtml(pasteHtml);
+            event.preventDefault();
+        } else {
+            let paste = clipboardData.getData("text");
+            const selection = window.getSelection();
+            if (!selection.rangeCount) {
+                console.warn("handlePaste called, but unable to get selection");
+                return false;
+            }
+            event.preventDefault();
+            selection.deleteFromDocument();
+            this.insertRawText(paste);
+        }
+    };
+
+    componentDidMount() {
+        try {
+            setupKatex();
+
+            this.editableDiv.addEventListener("keydown", this.handleKeyDown);
+            this.editableDiv.addEventListener("keyup", this.handleKeyUp);
+            this.editableDiv.addEventListener("paste", this.handlePaste);
+            if (this.props.autofocus === true) this.editableDiv.focus();
+        } catch (error) {
+            console.error(error);
+        }
     }
-  }
-
-  componentWillUnmount() {
-    try {
-      this.editableDiv.removeEventListener("keydown", this.handleKeyDown);
-      this.editableDiv.removeEventListener("keyup", this.handleKeyUp);
-      this.editableDiv.removeEventListener("paste", this.handlePaste);
-    } catch (error) {
-      console.error(error);
+
+    componentWillUnmount() {
+        try {
+            this.editableDiv.removeEventListener("keydown", this.handleKeyDown);
+            this.editableDiv.removeEventListener("keyup", this.handleKeyUp);
+            this.editableDiv.removeEventListener("paste", this.handlePaste);
+        } catch (error) {
+            console.error(error);
+        }
     }
-  }
-
-  componentDidUpdate() {
-    try {
-      // console.log("componentDidUpdate")
-      if (
-        this.afterComponentUpdateData !== null &&
-        this.afterComponentUpdateData !== undefined &&
-        this.afterComponentUpdateData.value === this.props.value
-      ) {
-        this._setRangeParams(this.afterComponentUpdateData.rangeParams);
-        this.afterComponentUpdateData = null;
-        this.updateActiveButtons();
-      }
-    } catch (error) {
-      console.error(error);
+
+    componentDidUpdate() {
+        try {
+            // console.log("componentDidUpdate")
+            if (
+                this.afterComponentUpdateData !== null &&
+                this.afterComponentUpdateData !== undefined &&
+                this.afterComponentUpdateData.value === this.props.value
+            ) {
+                this._setRangeParams(this.afterComponentUpdateData.rangeParams);
+                this.afterComponentUpdateData = 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");
-
-        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;
+    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");
+
+                this.setOldRangeParams({
+                    startNodeIndex: 2,
+                    startOffset: 1,
+                    endNodeIndex: 2,
+                    endOffset: 1,
+                });
+                this.markedRawText = MARK + " " + MARK;
+                this.moveCursorOnInsert = moveCursorOnInsert;
+                this.setState({
+                    showEquationEditor: true,
+                    equationEditorLatex: "",
+                });
+                return;
+            }
 
-      if (node === null)
-        node = this._findNodeWithIndex(rangeParams.startNodeIndex);
+            let latex = "";
+            let offset = 0;
 
-      // console.log(rangeParams)
-      // console.log(this.editableDiv.childNodes)
-      // console.log(node)
+            if (node === null) node = this._findNodeWithIndex(rangeParams.startNodeIndex);
 
-      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;
+            // 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);
         }
-        node = node.parentNode;
-      } while (node !== this.editableDiv && node !== null);
+    };
 
-      if (!isLatex) {
-        return;
-      }
+    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);
 
-      this.showEquationEditorOnMouseUp = true;
-      // Save current range parameters so that we can restore them later if we wish
-      this.setOldRangeParams(this._getRangeParams());
+            if (!isLatex) {
+                return;
+            }
 
-      // this.editableDiv.focus()
-      // this.showEquationEditor(false, node)
+            this.showEquationEditorOnMouseUp = true;
+            // Save current range parameters so that we can restore them later if we wish
+            this.setOldRangeParams(this._getRangeParams());
 
-      // event.preventDefault()
-    } catch (error) {
-      console.error(error);
-      console.log(node);
-    }
-  };
+            // this.editableDiv.focus()
+            // this.showEquationEditor(false, node)
 
-  handleMouseUp = (event) => {
-    try {
-      this.initialiseHistory();
+            // event.preventDefault()
+        } catch (error) {
+            console.error(error);
+            console.log(node);
+        }
+    };
 
-      let params = this._getRangeParams();
-      let startNode = this._findNodeWithIndex(params.startNodeIndex);
-      let endNode = this._findNodeWithIndex(params.endNodeIndex);
+    handleMouseUp = (event) => {
+        try {
+            this.initialiseHistory();
 
-      if (startNode === null || endNode === null) {
-        console.warn("Start or end node was null");
-        return;
-      }
+            let params = this._getRangeParams();
+            let startNode = this._findNodeWithIndex(params.startNodeIndex);
+            let endNode = this._findNodeWithIndex(params.endNodeIndex);
 
-      if (
-        params.startNodeIndex === params.endNodeIndex &&
-        params.startOffset === params.endOffset &&
-        this.showEquationEditorOnMouseUp
-      ) {
-        this.editableDiv.focus();
-        this.showEquationEditor(false, startNode);
-        return;
-      }
+            if (startNode === null || endNode === null) {
+                console.warn("Start or end node was null");
+                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 (
+                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);
         }
-      }
-      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);
+        }
+    };
 
-  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();
-      // console.log("Old range params")
-      // console.log(oldRangeParams)
-
-      // 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;
-          }
+    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();
+            // console.log("Old range params")
+            // console.log(oldRangeParams)
+
+            // 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);
+                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_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,
+                    };
+                // normal case
+                else
+                    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);
+            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);
         }
+    };
 
-        let new_rangeParams = {
-          startNodeIndex: new_index,
-          startOffset: new_offset,
-          endNodeIndex: new_index,
-          endOffset: new_offset,
-        };
-        this.setOldRangeParams(new_rangeParams);
+    // 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);
+    // }
 
-        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
-          );
-        new_raw_text = removeEncodingIfPlainText(
-          new_raw_text,
-          mimeType,
-          this.enableHtml()
-        );
+    styleText = (event, style) => {
+        try {
+            style = style.toLowerCase();
+            let success = false;
+            // This first part is a workaround whereby executing subscript or superscript
+            // within an existing subscript or superscript makes the text even smaller instead
+            // of toggling it off. Thus we manually toggle it off with some jigerry pokery!
+            if (
+                (style === "subscript" && this.state.activeButtons.subscript) ||
+                (style === "superscript" && this.state.activeButtons.superscript)
+            ) {
+                const selection = document.getSelection();
+                let range = selection.getRangeAt(0);
+                if (
+                    range.endContainer === range.startContainer &&
+                    range.endOffset === range.startOffset
+                ) {
+                    success = document.execCommand("insertText", false, " ");
+                    range.setEnd(range.endContainer, range.endOffset + 1);
+                    selection.removeAllRanges();
+                    selection.addRange(range);
+                }
+                success = document.execCommand("removeFormat", false, null);
+                if (this.state.activeButtons.bold)
+                    success = document.execCommand("bold", false, null);
+                if (this.state.activeButtons.italic)
+                    success = document.execCommand("italic", false, null);
+                if (this.state.activeButtons.underline)
+                    success = document.execCommand("underline", false, null);
+            } else {
+                // This is the normal code ...
+                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);
+        }
+    };
 
-        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_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,
-          };
-        // normal case
-        else
-          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);
-      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);
-    }
-  };
-
-  // 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 = false;
-      // This first part is a workaround whereby executing subscript or superscript
-      // within an existing subscript or superscript makes the text even smaller instead
-      // of toggling it off. Thus we manually toggle it off with some jigerry pokery!
-      if (
-        (style === "subscript" && this.state.activeButtons.subscript) ||
-        (style === "superscript" && this.state.activeButtons.superscript)
-      ) {
-        const selection = document.getSelection();
-        let range = selection.getRangeAt(0);
-        if (
-          range.endContainer === range.startContainer &&
-          range.endOffset === range.startOffset
-        ) {
-          success = document.execCommand("insertText", false, " ");
-          range.setEnd(range.endContainer, range.endOffset + 1);
-          selection.removeAllRanges();
-          selection.addRange(range);
+    handleToolbarButtonClick = (event, 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);
         }
-        success = document.execCommand("removeFormat", false, null);
-        if (this.state.activeButtons.bold)
-          success = document.execCommand("bold", false, null);
-        if (this.state.activeButtons.italic)
-          success = document.execCommand("italic", false, null);
-        if (this.state.activeButtons.underline)
-          success = document.execCommand("underline", false, null);
-      } else {
-        // This is the normal code ...
-        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) => {
-    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 = (new_text, selectInsertedText = true) => {
-    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)
-      );
-
-      // console.log("Range params before insert")
-      // console.log(rangeParams)
-
-      if (selectInsertedText) {
-        new_rangeParams.startNodeIndex = rangeParams.endNodeIndex;
-        new_rangeParams.startOffset = rangeParams.endOffset;
-        new_rangeParams.endNodeIndex = rangeParams.endNodeIndex;
-        new_rangeParams.endOffset = rangeParams.endOffset + new_text.length;
-        new_rangeParams.startGlobalOffset = rangeParams.endGlobalOffset;
-        new_rangeParams.endGlobalOffset = rangeParams.endGlobalOffset+ new_text.length;
-      } else {
-        new_rangeParams.startNodeIndex = rangeParams.endNodeIndex;
-        new_rangeParams.startOffset = rangeParams.endOffset + new_text.length;
-        new_rangeParams.endNodeIndex = rangeParams.endNodeIndex;
-        new_rangeParams.endOffset = rangeParams.endOffset + new_text.length;
-        new_rangeParams.startGlobalOffset = rangeParams.endGlobalOffset + new_text.length;
-        new_rangeParams.endGlobalOffset = rangeParams.endGlobalOffset + new_text.length;
-      }
-
-      // console.log("Range params after insert")
-      // console.log(new_rangeParams)
-
-      new_raw_text = removeEncodingIfPlainText(
-        new_raw_text,
-        this.props.mimeType,
-        this.enableHtml()
-      );
-      this.applyChangesToComponent(
-        new_raw_text,
-        this.props.mimeType,
-        new_rangeParams,
-        this.props.useExpertMode,
-        this.props.selectedTab
-      );
-    } catch (error) {
-      console.error(error);
-    }
-  };
-
-  // https://stackoverflow.com/questions/6690752/insert-html-at-caret-in-a-contenteditable-div
-  pasteHtmlAtCaret = (html, selectPastedContent) => {
-    var sel, range;
-    if (window.getSelection) {
-      // IE9 and non-IE
-      sel = window.getSelection();
-      if (sel.getRangeAt && sel.rangeCount) {
-        range = sel.getRangeAt(0);
-        range.deleteContents();
-        // Range.createContextualFragment() would be useful here but is
-        // only relatively recently standardized and is not supported in
-        // some browsers (IE9, for one)
-        var el = document.createElement("div");
-        el.innerHTML = html;
-        var frag = document.createDocumentFragment(),
-          node,
-          lastNode;
-        while ((node = el.firstChild)) {
-          lastNode = frag.appendChild(node);
+    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);
         }
-        var firstNode = frag.firstChild;
-        range.insertNode(frag);
-        // Preserve the selection
-        if (lastNode) {
-          range = range.cloneRange();
-          range.setStartAfter(lastNode);
-          if (selectPastedContent) {
-            range.setStartBefore(firstNode);
-          } else {
-            range.collapse(true);
-          }
-          sel.removeAllRanges();
-          sel.addRange(range);
+    };
+
+    insertRawText = (new_text, selectInsertedText = true) => {
+        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));
+
+            // console.log("Range params before insert")
+            // console.log(rangeParams)
+
+            if (selectInsertedText) {
+                new_rangeParams.startNodeIndex = rangeParams.endNodeIndex;
+                new_rangeParams.startOffset = rangeParams.endOffset;
+                new_rangeParams.endNodeIndex = rangeParams.endNodeIndex;
+                new_rangeParams.endOffset = rangeParams.endOffset + new_text.length;
+                new_rangeParams.startGlobalOffset = rangeParams.endGlobalOffset;
+                new_rangeParams.endGlobalOffset = rangeParams.endGlobalOffset + new_text.length;
+            } else {
+                new_rangeParams.startNodeIndex = rangeParams.endNodeIndex;
+                new_rangeParams.startOffset = rangeParams.endOffset + new_text.length;
+                new_rangeParams.endNodeIndex = rangeParams.endNodeIndex;
+                new_rangeParams.endOffset = rangeParams.endOffset + new_text.length;
+                new_rangeParams.startGlobalOffset = rangeParams.endGlobalOffset + new_text.length;
+                new_rangeParams.endGlobalOffset = rangeParams.endGlobalOffset + new_text.length;
+            }
+
+            // console.log("Range params after insert")
+            // console.log(new_rangeParams)
+
+            new_raw_text = removeEncodingIfPlainText(
+                new_raw_text,
+                this.props.mimeType,
+                this.enableHtml()
+            );
+            this.applyChangesToComponent(
+                new_raw_text,
+                this.props.mimeType,
+                new_rangeParams,
+                this.props.useExpertMode,
+                this.props.selectedTab
+            );
+        } catch (error) {
+            console.error(error);
         }
-      }
-    } else if ((sel = document.selection) && sel.type != "Control") {
-      // IE < 9
-      var originalRange = sel.createRange();
-      originalRange.collapse(true);
-      sel.createRange().pasteHTML(html);
-      if (selectPastedContent) {
-        range = sel.createRange();
-        range.setEndPoint("StartToStart", originalRange);
-        range.select();
-      }
-    }
-  };
-
-  insertHtml = (new_html) => {
-    try {
-      // console.log("New html: "+new_html)
-      // console.log("inserting: "+new_html)
-      this.pasteHtmlAtCaret(new_html, true);
-      let new_rangeParams = null;
-      // console.log("New range params: ")
-      try {
-        new_rangeParams = this._getRangeParams();
-        // console.log("New range params: ")
-        // console.log(new_rangeParams)
-      } catch (error) {
-        console.error(error);
-      }
-      // TODO: Fix the bug that fails to get range params correctly
-      if (
-        new_rangeParams.startNodeIndex < 0 ||
-        new_rangeParams.endNodeIndex < 0
-      ) {
-        console.warn(
-          "Selection range params were not fetched correctly. Unable to set highlight inserted text."
-        );
-      }
-      // Even if fetches valid range params, they are probably incorrect
-      // So lets clear them for now
-      new_rangeParams = {
-        startNodeIndex: 0,
-        startOffset: 0,
-        endNodeIndex: 0,
-        endOffset: 0,
-      };
-      let new_raw_text = elementToMarkedRawText(
-        this.editableDiv,
-        null,
-        -1,
-        this.enableHtml()
-      );
-      // console.log("New raw text:"+new_raw_text)
-      let nodeCounts = this._countNodeTypes();
-      let mimeType = this.getMimeType(nodeCounts.html > 0, nodeCounts.math > 0);
-      new_raw_text = removeEncodingIfPlainText(
-        new_raw_text,
-        mimeType,
-        this.enableHtml()
-      );
-      // OK, got to remove the double <p> and double </p> inserted
-      // After inserting <p>a</p><p>b</p> into <p>xy</p> we will have
-      // <P>x<P>a</P><P>b</P>y</P> and we want <P>xa</P><P>by</P>
-      try {
-        let i = -1;
-        do {
-          i = new_raw_text.indexOf("<P>", i + 1);
-          if (i >= 0) {
-            let j = new_raw_text.indexOf("<P>", i + 1);
-            let k = new_raw_text.indexOf("</P>", i + 1);
-            if (j >= 0) {
-              if (k < 0 || k > j) {
-                new_raw_text =
-                  new_raw_text.substring(0, j) +
-                  new_raw_text.substring(j + 3, new_raw_text.length);
-                i = -1;
-              }
+    };
+
+    // https://stackoverflow.com/questions/6690752/insert-html-at-caret-in-a-contenteditable-div
+    pasteHtmlAtCaret = (html, selectPastedContent) => {
+        var sel, range;
+        if (window.getSelection) {
+            // IE9 and non-IE
+            sel = window.getSelection();
+            if (sel.getRangeAt && sel.rangeCount) {
+                range = sel.getRangeAt(0);
+                range.deleteContents();
+                // Range.createContextualFragment() would be useful here but is
+                // only relatively recently standardized and is not supported in
+                // some browsers (IE9, for one)
+                var el = document.createElement("div");
+                el.innerHTML = html;
+                var frag = document.createDocumentFragment(),
+                    node,
+                    lastNode;
+                while ((node = el.firstChild)) {
+                    lastNode = frag.appendChild(node);
+                }
+                var firstNode = frag.firstChild;
+                range.insertNode(frag);
+                // Preserve the selection
+                if (lastNode) {
+                    range = range.cloneRange();
+                    range.setStartAfter(lastNode);
+                    if (selectPastedContent) {
+                        range.setStartBefore(firstNode);
+                    } else {
+                        range.collapse(true);
+                    }
+                    sel.removeAllRanges();
+                    sel.addRange(range);
+                }
+            }
+        } else if ((sel = document.selection) && sel.type != "Control") {
+            // IE < 9
+            var originalRange = sel.createRange();
+            originalRange.collapse(true);
+            sel.createRange().pasteHTML(html);
+            if (selectPastedContent) {
+                range = sel.createRange();
+                range.setEndPoint("StartToStart", originalRange);
+                range.select();
+            }
+        }
+    };
+
+    insertHtml = (new_html) => {
+        try {
+            // console.log("New html: "+new_html)
+            // console.log("inserting: "+new_html)
+            this.pasteHtmlAtCaret(new_html, true);
+            let new_rangeParams = null;
+            // console.log("New range params: ")
+            try {
+                new_rangeParams = this._getRangeParams();
+                // console.log("New range params: ")
+                // console.log(new_rangeParams)
+            } catch (error) {
+                console.error(error);
             }
-          }
-        } while (i >= 0 && i < new_raw_text.length - 4);
-        i = -1;
-        do {
-          i = new_raw_text.indexOf("</P>", i + 1);
-          if (i >= 0) {
-            let j = new_raw_text.indexOf("</P>", i + 1);
-            let k = new_raw_text.indexOf("<P>", i + 1);
-            if (j >= 0) {
-              if (k < 0 || k > j) {
-                new_raw_text =
-                  new_raw_text.substring(0, i) +
-                  new_raw_text.substring(i + 4, new_raw_text.length);
+            // TODO: Fix the bug that fails to get range params correctly
+            if (new_rangeParams.startNodeIndex < 0 || new_rangeParams.endNodeIndex < 0) {
+                console.warn(
+                    "Selection range params were not fetched correctly. Unable to set highlight inserted text."
+                );
+            }
+            // Even if fetches valid range params, they are probably incorrect
+            // So lets clear them for now
+            new_rangeParams = {
+                startNodeIndex: 0,
+                startOffset: 0,
+                endNodeIndex: 0,
+                endOffset: 0,
+            };
+            let new_raw_text = elementToMarkedRawText(
+                this.editableDiv,
+                null,
+                -1,
+                this.enableHtml()
+            );
+            // console.log("New raw text:"+new_raw_text)
+            let nodeCounts = this._countNodeTypes();
+            let mimeType = this.getMimeType(nodeCounts.html > 0, nodeCounts.math > 0);
+            new_raw_text = removeEncodingIfPlainText(new_raw_text, mimeType, this.enableHtml());
+            // OK, got to remove the double <p> and double </p> inserted
+            // After inserting <p>a</p><p>b</p> into <p>xy</p> we will have
+            // <P>x<P>a</P><P>b</P>y</P> and we want <P>xa</P><P>by</P>
+            try {
+                let i = -1;
+                do {
+                    i = new_raw_text.indexOf("<P>", i + 1);
+                    if (i >= 0) {
+                        let j = new_raw_text.indexOf("<P>", i + 1);
+                        let k = new_raw_text.indexOf("</P>", i + 1);
+                        if (j >= 0) {
+                            if (k < 0 || k > j) {
+                                new_raw_text =
+                                    new_raw_text.substring(0, j) +
+                                    new_raw_text.substring(j + 3, new_raw_text.length);
+                                i = -1;
+                            }
+                        }
+                    }
+                } while (i >= 0 && i < new_raw_text.length - 4);
                 i = -1;
-              }
+                do {
+                    i = new_raw_text.indexOf("</P>", i + 1);
+                    if (i >= 0) {
+                        let j = new_raw_text.indexOf("</P>", i + 1);
+                        let k = new_raw_text.indexOf("<P>", i + 1);
+                        if (j >= 0) {
+                            if (k < 0 || k > j) {
+                                new_raw_text =
+                                    new_raw_text.substring(0, i) +
+                                    new_raw_text.substring(i + 4, new_raw_text.length);
+                                i = -1;
+                            }
+                        }
+                    }
+                } while (i >= 0 && i < new_raw_text.length - 4);
+            } catch (error) {
+                console.error(error);
             }
-          }
-        } while (i >= 0 && i < new_raw_text.length - 4);
-      } catch (error) {
-        console.error(error);
-      }
-      // console.log("New raw text:"+new_raw_text)
-      this.applyChangesToComponent(
-        new_raw_text,
-        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;
-      new_rangeParams.srartGlobalOffset--;
-      new_rangeParams.endGlobalOffset--;
-
-      new_raw_text = removeEncodingIfPlainText(
-        new_raw_text,
-        this.props.mimeType,
-        this.enableHtml()
-      );
-
-      this.applyChangesToComponent(
-        new_raw_text,
-        this.props.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()
-      );
-
-      // console.log("Raw text before line insert")
-      // console.log(raw_text)
-      // console.log("Range params before line insert")
-      // console.log(rangeParams)
-
-      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;
-        if (new_rangeParams.startGlobalOffset) {
-          new_rangeParams.startGlobalOffset++;
-          new_rangeParams.endGlobalOffset++;
+            // console.log("New raw text:"+new_raw_text)
+            this.applyChangesToComponent(
+                new_raw_text,
+                mimeType,
+                new_rangeParams,
+                this.props.useExpertMode,
+                this.props.selectedTab
+            );
+        } catch (error) {
+            console.error(error);
         }
-  
-      } else {
-        new_raw_text = removeMarks(insertCharacterBeforeMarks(raw_text, "\n"));
-        new_rangeParams.startOffset++;
-        new_rangeParams.endOffset++;
-      }
-
-      new_raw_text = removeEncodingIfPlainText(
-        new_raw_text,
-        this.props.mimeType,
-        this.enableHtml()
-      );
-      
-      // console.log("New raw text after line insert")
-      // console.log(new_raw_text)
-      // console.log("New range params after line insert")
-      // console.log(new_rangeParams)
-
-
-      this.applyChangesToComponent(
-        new_raw_text,
-        this.props.mimeType,
-        new_rangeParams,
-        this.props.useExpertMode,
-        this.props.selectedTab
-      );
-    } catch (error) {
-      console.error(error);
-    }
-  };
-
-  insertAfterSmallSpace(new_char, rangeParams) {
-    try {
-      if (rangeParams === null || rangeParams === undefined)
-        rangeParams = this._getRangeParams();
-
-      if (rangeParams.startOffset !== 0)
-        console.warn("Unexpected startOffset "+rangeParams.startOffset+" in insertAfterSmallSpace")
-      
-      let node = this._findNodeWithIndex(rangeParams.startNodeIndex);
-      let raw_text = elementToMarkedRawText(
-          this.editableDiv,
-          node,
-          1, // after small space
-          this.enableHtml()
-        );
+    };
 
-      let new_raw_text = removeMarks(
-        insertCharacterBeforeMarks(raw_text, new_char))
-
-      let new_rangeParams = {
-        startNodeIndex:rangeParams.startNodeIndex,
-        startNodeOffset:1+new_char.length,
-        endNodeIndex:rangeParams.startNodeIndex,
-        endNodeOffset:1+new_char.length,
-        startGlobalOffset:rangeParams.startGlobalOffset+new_char.length,
-        endGlobalOffset:rangeParams.endGlobalOffset+new_char.length,
-      }
-      
-      new_raw_text = removeEncodingIfPlainText(
-        new_raw_text,
-        this.props.mimeType,
-        this.enableHtml()
-      );
-      
-      this.applyChangesToComponent(
-        new_raw_text,
-        this.props.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.startNodeIndex);
-      let offset = rangeParams.startOffset;
-
-      let raw_text = elementToMarkedRawText(
-        this.editableDiv,
-        node,
-        offset,
-        this.enableHtml()
-      );
-
-      let new_raw_text = null;
-      let new_rangeParams = null;
-
-      if (old_char === null) { // insert new char
-        new_raw_text = removeMarks(insertCharacterBeforeMarks(raw_text, new_char));
-        new_rangeParams = {
-          startNodeIndex:rangeParams.startNodeIndex,
-          startOffset:rangeParams.startOffset + new_char.length,
-          endNodeIndex:rangeParams.startNodeIndex,
-          endOffset:rangeParams.startOffset + new_char.length,
-          startGlobalOffset:rangeParams.startGlobalOffset + new_char.length,
-          endGlobalOffset:rangeParams.startGlobalOffset + new_char.length
+    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;
+            new_rangeParams.srartGlobalOffset--;
+            new_rangeParams.endGlobalOffset--;
+
+            new_raw_text = removeEncodingIfPlainText(
+                new_raw_text,
+                this.props.mimeType,
+                this.enableHtml()
+            );
+
+            this.applyChangesToComponent(
+                new_raw_text,
+                this.props.mimeType,
+                new_rangeParams,
+                this.props.useExpertMode,
+                this.props.selectedTab
+            );
+        } catch (error) {
+            console.error(error);
         }
-      } else { // replace old char
-        new_raw_text = removeMarks(replaceCharacterBeforeMarks(raw_text, new_char));
-        new_rangeParams = { ...rangeParams };
-      }
-
-      new_raw_text = removeEncodingIfPlainText(
-        new_raw_text,
-        this.props.mimeType,
-        this.enableHtml()
-      );
-      
-      this.applyChangesToComponent(
-        new_raw_text,
-        this.props.mimeType,
-        new_rangeParams,
-        this.props.useExpertMode,
-        this.props.selectedTab
-      );
-    } catch (error) {
-      console.error(error);
-    }
-  };
-
-  handleAccentButtonClick = (event, oldCharacter, newCharacter) => {
-    try {
-      this.insertAccentLetter(event, oldCharacter, newCharacter);
-      console.log("Hiding accent bar 3")
-      this.setState({ showAccentBar: false });
-    } catch (error) {
-      console.error(error);
-    }
-  };
+    };
 
-  focus = () => {
-    this.editableDiv.focus();
-  };
+    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()
+            );
+
+            // console.log("Raw text before line insert")
+            // console.log(raw_text)
+            // console.log("Range params before line insert")
+            // console.log(rangeParams)
+
+            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;
+                if (new_rangeParams.startGlobalOffset) {
+                    new_rangeParams.startGlobalOffset++;
+                    new_rangeParams.endGlobalOffset++;
+                }
+            } else {
+                new_raw_text = removeMarks(insertCharacterBeforeMarks(raw_text, "\n"));
+                new_rangeParams.startOffset++;
+                new_rangeParams.endOffset++;
+            }
 
-  handleFocus = (event) => {
-    const { onFocus } = this.props;
-    if (onFocus != null) {
-      onFocus();
-    }
-    try {
-      this._setRangeParams(this.getOldRangeParams());
-      this.setState({ hasFocus: true });
-    } catch (error) {
-      console.error(error);
-    }
-  };
+            new_raw_text = removeEncodingIfPlainText(
+                new_raw_text,
+                this.props.mimeType,
+                this.enableHtml()
+            );
 
-  handleBlur = (event) => {
-    const { onBlur } = this.props;
-    if (onBlur != null) {
-      onBlur();
-    }
-    try {
-      console.log("Hiding accent bar 4")
-      this.setState({ hasFocus: false, showAccentBar: false });
-    } catch (error) {
-      console.error(error);
-    }
-  };
+            // console.log("New raw text after line insert")
+            // console.log(new_raw_text)
+            // console.log("New range params after line insert")
+            // console.log(new_rangeParams)
+
+            this.applyChangesToComponent(
+                new_raw_text,
+                this.props.mimeType,
+                new_rangeParams,
+                this.props.useExpertMode,
+                this.props.selectedTab
+            );
+        } catch (error) {
+            console.error(error);
+        }
+    };
+
+    insertAfterSmallSpace(new_char, rangeParams) {
+        try {
+            if (rangeParams === null || rangeParams === undefined)
+                rangeParams = this._getRangeParams();
+
+            if (rangeParams.startOffset !== 0)
+                console.warn(
+                    "Unexpected startOffset " +
+                        rangeParams.startOffset +
+                        " in insertAfterSmallSpace"
+                );
 
-  handleCompositionStart = (event) => {
-    this.isComposing = true ;
-  }
+            let node = this._findNodeWithIndex(rangeParams.startNodeIndex);
+            let raw_text = elementToMarkedRawText(
+                this.editableDiv,
+                node,
+                1, // after small space
+                this.enableHtml()
+            );
 
-  handleCompositionEnd = (event) => {
-    this.isComposing = false;
-  }
+            let new_raw_text = removeMarks(insertCharacterBeforeMarks(raw_text, new_char));
 
-  render() {
-    if (this.props.value == null) {
-      console.error('MathRichInput must have prop called "value"');
-      console.log(this.props);
+            let new_rangeParams = {
+                startNodeIndex: rangeParams.startNodeIndex,
+                startNodeOffset: 1 + new_char.length,
+                endNodeIndex: rangeParams.startNodeIndex,
+                endNodeOffset: 1 + new_char.length,
+                startGlobalOffset: rangeParams.startGlobalOffset + new_char.length,
+                endGlobalOffset: rangeParams.endGlobalOffset + new_char.length,
+            };
+
+            new_raw_text = removeEncodingIfPlainText(
+                new_raw_text,
+                this.props.mimeType,
+                this.enableHtml()
+            );
+
+            this.applyChangesToComponent(
+                new_raw_text,
+                this.props.mimeType,
+                new_rangeParams,
+                this.props.useExpertMode,
+                this.props.selectedTab
+            );
+        } catch (error) {
+            console.error(error);
+        }
     }
 
-    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}
-              onCompositionStart={this.handleCompositionStart}
-              onCompositionEnd={this.handleCompositionEnd}
-              dangerouslySetInnerHTML={{ __html: html }}
-              data-placeholder={this.props.placeholder || ""}
-            ></span>
-          </div>
-        </div>
-        {this.state.showEquationEditor && (
-          <EquationEditorModal
-            ref={(r) => (this.equationEditorModal = r)}
-            handleClose={this.handleEquationEditorClose}
-            handleInsert={this.handleEquationEditorInsert}
-            latex={this.state.equationEditorLatex}
-          />
-        )}
-      </>
-    );
-  }
+    insertAccentLetter = (event, old_char, new_char) => {
+        try {
+            let rangeParams = this._getRangeParams();
+            let node = this._findNodeWithIndex(rangeParams.startNodeIndex);
+            let offset = rangeParams.startOffset;
+
+            let raw_text = elementToMarkedRawText(
+                this.editableDiv,
+                node,
+                offset,
+                this.enableHtml()
+            );
+
+            let new_raw_text = null;
+            let new_rangeParams = null;
+
+            if (old_char === null) {
+                // insert new char
+                new_raw_text = removeMarks(insertCharacterBeforeMarks(raw_text, new_char));
+                new_rangeParams = {
+                    startNodeIndex: rangeParams.startNodeIndex,
+                    startOffset: rangeParams.startOffset + new_char.length,
+                    endNodeIndex: rangeParams.startNodeIndex,
+                    endOffset: rangeParams.startOffset + new_char.length,
+                    startGlobalOffset: rangeParams.startGlobalOffset + new_char.length,
+                    endGlobalOffset: rangeParams.startGlobalOffset + new_char.length,
+                };
+            } else {
+                // replace old char
+                new_raw_text = removeMarks(replaceCharacterBeforeMarks(raw_text, new_char));
+                new_rangeParams = { ...rangeParams };
+            }
+
+            new_raw_text = removeEncodingIfPlainText(
+                new_raw_text,
+                this.props.mimeType,
+                this.enableHtml()
+            );
+
+            this.applyChangesToComponent(
+                new_raw_text,
+                this.props.mimeType,
+                new_rangeParams,
+                this.props.useExpertMode,
+                this.props.selectedTab
+            );
+        } catch (error) {
+            console.error(error);
+        }
+    };
+
+    handleAccentButtonClick = (event, oldCharacter, newCharacter) => {
+        try {
+            this.insertAccentLetter(event, oldCharacter, newCharacter);
+            console.log("Hiding accent bar 3");
+            this.setState({ showAccentBar: false });
+        } catch (error) {
+            console.error(error);
+        }
+    };
+
+    focus = () => {
+        this.editableDiv.focus();
+    };
+
+    handleFocus = (event) => {
+        const { onFocus } = this.props;
+        if (onFocus != null) {
+            onFocus();
+        }
+        try {
+            this._setRangeParams(this.getOldRangeParams());
+            this.setState({ hasFocus: true });
+        } catch (error) {
+            console.error(error);
+        }
+    };
+
+    handleBlur = (event) => {
+        const { onBlur } = this.props;
+        if (onBlur != null) {
+            onBlur();
+        }
+        try {
+            console.log("Hiding accent bar 4");
+            this.setState({ hasFocus: false, showAccentBar: false });
+        } catch (error) {
+            console.error(error);
+        }
+    };
+
+    handleCompositionStart = (event) => {
+        this.isComposing = true;
+    };
+
+    handleCompositionEnd = (event) => {
+        this.isComposing = false;
+    };
+
+    render() {
+        if (this.props.value == null) {
+            console.error('MathRichInput must have prop called "value"');
+            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);
+
+        let toolbarExtraMargin = 0;
+        if (this.props.className.includes("answer-edit-input")) {
+            toolbarExtraMargin = 20;
+        }
+        console.log("Toolbar extra margin: " + toolbarExtraMargin);
+
+        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}
+                                extraMargin={toolbarExtraMargin}
+                            />
+                        )}
+                        {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}
+                            onCompositionStart={this.handleCompositionStart}
+                            onCompositionEnd={this.handleCompositionEnd}
+                            dangerouslySetInnerHTML={{ __html: html }}
+                            data-placeholder={this.props.placeholder || ""}
+                        ></span>
+                    </div>
+                </div>
+                {this.state.showEquationEditor && (
+                    <EquationEditorModal
+                        ref={(r) => (this.equationEditorModal = r)}
+                        handleClose={this.handleEquationEditorClose}
+                        handleInsert={this.handleEquationEditorInsert}
+                        latex={this.state.equationEditorLatex}
+                    />
+                )}
+            </>
+        );
+    }
 }