@zzish/math-rich-input 0.1.25 → 0.1.27

package/dist/index.js

@@ -18167,6 +18167,18 @@ var LATEX_SYMBOLS = [// {name:"Times",latex:"\\times",tooltip:"Times [#X)"},
   buttonLatex: "\\oint",
   tooltip: "Contour integral",
   moveCursor: -2
+}, {
+  name: "Surface integral",
+  latex: "\\oiint_{#}^{#}",
+  buttonLatex: "\\oiint",
+  tooltip: "Surface integral",
+  moveCursor: -2
+}, {
+  name: "Volume integral",
+  latex: "\\oiiint_{#}^{#}",
+  buttonLatex: "\\oiiint",
+  tooltip: "Volume integral",
+  moveCursor: -2
 }, {
   name: "Integral a b",
   latex: "\\int_{#}^{#}",
@@ -18235,6 +18247,11 @@ var LATEX_SYMBOLS = [// {name:"Times",latex:"\\times",tooltip:"Times [#X)"},
   latex: "\\pm",
   buttonLatex: "\\pm",
   tooltip: "Plus or minus"
+}, {
+  name: "Minus or plus",
+  latex: "\\mp",
+  buttonLatex: "\\mp",
+  tooltip: "Minus or plus"
 }, {
   name: "Times",
   latex: "\\times",
@@ -18620,7 +18637,7 @@ var BUTTON_AREAS = {
   "Common": ["Squared", "Power", "Subscript", "Over", "Surd", "Root", "Nth root", "Hat", "Line", "Ray", "Line segment", "Dot", "dxdy", "Partial dxdy", "Integral a b", "Sum a b", "Product a b", "Right arrow", "Infinity", "Limit x to infinity"],
   "Operators": ["Plus", "Minus", "Center dot", "Times", "Divide", "Equals", "Less than", "Greater than", "Not equal", "Less than or equal", "Greater than or equal", "Plus or minus", "Proportionate", "Approximately", "Implies"],
   "Angles": ["degree", "theta", "phi", "pi", "alpha", "beta", "gamma", "delta", "epsilon", "Delta", "angle", "Parallel", "Perpendicular", "Similar", "Congruent"],
-  "GreekLower": ["alpha", "beta", "gamma", "delta", "epsilon", "zeta", "eta", "theta", "iota", "kappa", "lambda", "mu", "nu", "xi", "omicron", "pi", "rho", "sigma", "tau", "upsilon", "phi", "chi", "psi", "omega"],
+  "GreekLower": ["alpha", "beta", "gamma", "delta", "epsilon", "zeta", "eta", "theta", "iota", "kappa", "lambda", "mu", "nu", "xi", "omicron", "pi", "rho", "sigma", "tau", "upsilon", "phi", "varphi", "chi", "psi", "omega"],
   "GreekUpper": ["Gamma", "Delta", "Theta", "Lambda", "Xi", "Pi", "Sigma", "Phi", "Psi", "Omega", "nabla"],
   "Sets": ["cup", "cap", "in", "notin", "emptyset", "forall", "exists", "nexists", "subset", "subseteq", "supset", "supseteq", "nsubset", "nsubseteq", "neg", "Complex numbers", "Natural numbers", "Rational numbers", "Real numbers", "Integers"],
   "Misc": ["because", "therefore", "dots", "cdots", "ll", "gg", "leftarrow", "leftrightarrow", "Leftrightarrow", "mapsto", "bullet", "circ", "Box", "bigcirc", "bigtriangleup", "bigtriangledown", "heartsuit", "diamondsuit", "clubsuit", "spadesuit"],
@@ -18633,8 +18650,8 @@ var BUTTON_AREAS = {
   //              "_Cu"]
   "Physics1": ["Squared", "Power", "Subscript", "Over", "Root", "Nth root", "Surd", "Root a over b", "Half", "Third", "Over root 2", "Over root 3", "sum", "delta", "Delta", "Capacitor discharge", "Radioactive decay", "Attenuation of rays", "Delta x over delta t", "dxdt"],
   "Physics2": ["Plus", "Minus", "Plus or minus", "Times", "Equals", "Approximately", "Proportionate"],
-  "Physics3": ["alpha", "varepsilon", "eta", "gamma", "lambda", "omega", "mu", "nu", "pi", "rho", "sigma", "phi", "varPhi", "theta", "overline{v_e}", "overline{v_\\mu}", "Subscript zero", "Subscript max", "Subscript min", "Subscript rms"],
-  "Expert": ["langle", "rangle", "Double integral", "Triple integral", "Contour integral", "Double dot", "Widehat", "Check", "Tilde", "Mathring", "Right arrow with text", "rightleftharpoons"],
+  "Physics3": ["alpha", "varepsilon", "eta", "gamma", "lambda", "omega", "mu", "nu", "pi", "rho", "sigma", "phi", "Phi", "theta", "overline{v_e}", "overline{v_\\mu}", "Subscript zero", "Subscript max", "Subscript min", "Subscript rms"],
+  "Expert": ["langle", "rangle", "Double integral", "Triple integral", "Contour integral", "Surface integral", "Volume integral", "Double dot", "Widehat", "Check", "Tilde", "Mathring", "Right arrow with text", "rightleftharpoons", "Minus or plus"],
   "Matrices": ["1-vector", "1x2 matrix", "1x3 matrix", "2-vector", "2x2 matrix", "2x3 matrix", "3-vector", "3x2 matrix", "3x3 matrix", "cdots", "vdots", "ddots", "vec{a}", "2x2 matrix round brackets", "2x2 matrix curly brackets"]
 };
 
@@ -18690,10 +18707,16 @@ function toDict(symbols) {
   return dict;
 }
 
-var LATEX_SYMBOLS_DICT = toDict(LATEX_SYMBOLS);
-var NORMAL_SYMBOLS_DICT = toDict(NORMAL_SYMBOLS);
+var LATEX_SYMBOLS_DICT = null;
+var NORMAL_SYMBOLS_DICT = null;
+
+function initialise() {
+  LATEX_SYMBOLS_DICT = toDict(LATEX_SYMBOLS);
+  NORMAL_SYMBOLS_DICT = toDict(NORMAL_SYMBOLS);
+}
 
 function getSymbolData(name) {
+  if (LATEX_SYMBOLS_DICT === null) initialise();
   if (name in LATEX_SYMBOLS_DICT) return LATEX_SYMBOLS_DICT[name];
   if (name in NORMAL_SYMBOLS_DICT) return NORMAL_SYMBOLS_DICT[name];
 
@@ -20699,7 +20722,7 @@ var SPAN_OPEN_BASE = "<span class=\"base\">";
 var SPAN_CLOSE = "</span>";
 var MARK$1 = String.fromCharCode(0); // const MARK = "_M_A_R_K_"
 
-var MARK_REG_EXP$1 = new RegExp(MARK$1, "g");
+var MARK_REG_EXP = new RegExp(MARK$1, "g");
 var TEMP_CHAR = String.fromCharCode(1);
 var TEMP_CHAR_REG_EXP = new RegExp(TEMP_CHAR, "g");
 var DOLLAR_SLASH_REG_EXP = /\\\$/g;
@@ -20713,6 +20736,9 @@ var MIME_TYPE_HTML$1 = "text/html";
 var MIME_TYPE_TEX$1 = "application/x-tex";
 var MIME_TYPE_LATEX = "application/x-latex";
 var MIME_TYPE_ZZISH_HTML_MATH$1 = "application/x-zzish-html-math";
+function getMark() {
+  return MARK$1;
+}
 function isKatexNode(node) {
   return node.className === "katex" || node.className === "katex-error";
 }
@@ -20724,7 +20750,8 @@ function isTextNode(node) {
 function isBIUNode(node) {
   if (node.nodeType !== 1) return false;
   var tagName = node.tagName.toLowerCase();
-  return tagName === "b" || tagName === "i" || tagName === "u" || tagName === "sup" || tagName === "sub" || tagName === "p";
+  if (tagName === "span") return !isKatexNode(node);
+  return tagName === "b" || tagName === "strong" || tagName === "i" || tagName === "em" || tagName === "u" || tagName === "sup" || tagName === "sub" || tagName === "p";
 }
 
 function isBrNode(node) {
@@ -20732,13 +20759,18 @@ function isBrNode(node) {
   return node.tagName.toLowerCase() === "br";
 }
 
+function nodeStartsWithSmallSpace(node) {
+  if (node.nodeType === 3 && node.nodeValue.length >= 1 && node.nodeValue.charCodeAt(0) === SMALL_SPACE_CHAR_CODE$1) return true;
+  return false;
+}
+
 function isSmallSpace(node) {
   if (node.nodeType === 3 && node.nodeValue.length === 1 && node.nodeValue.charCodeAt(0) === SMALL_SPACE_CHAR_CODE$1) return true;
   return false;
 }
 
-function startsWithSmallSpace(node) {
-  var textNode = findFirstTextNode(node);
+function startsWithSmallSpace(editableDiv) {
+  var textNode = findFirstTextNode(editableDiv);
   return isSmallSpace(textNode);
 }
 function countNodeTypes(node) {
@@ -20782,7 +20814,7 @@ function getNodeTextLength(node) {
   return text.length;
 }
 function removeMarks(raw_text) {
-  return raw_text.replace(MARK_REG_EXP$1, "");
+  return raw_text.replace(MARK_REG_EXP, "");
 }
 function getCharacterBeforeMarks(text) {
   var start = text.indexOf(MARK$1);
@@ -20960,8 +20992,6 @@ function addTextForNode(node, arrayOfText) {
   try {
     if (isTextNode(node)) {
       addText(arrayOfText, useHtmlMath ? encodeToHtml(node.nodeValue) : encodeToLatex(node.nodeValue), mark, offset, useHtmlMath);
-    } else if (isBrNode(node)) {
-      useHtmlMath && arrayOfText.push("<br>");
     } else if (isBIUNode(node)) {
       useHtmlMath && arrayOfText.push("<" + node.nodeName + ">");
 
@@ -21097,8 +21127,12 @@ function renderLatexString(katex, s, t) {
   return renderedString;
 }
 function rawTextToHtml(katex, string, mimeType) {
-  if (string === "") return "";
-  if (mimeType === null || mimeType === undefined || mimeType === "") mimeType = determineMimeType(string);
+  if (string === "") return "<p>" + SMALL_SPACE$1 + "</p>";
+
+  if (mimeType == null || mimeType === "") {
+    mimeType = determineMimeType(string);
+  }
+
   if (mimeType === MIME_TYPE_PLAIN_TEXT$1) return encodeToHtml(string);
   var parseAsTex;
   if (mimeType === MIME_TYPE_TEX$1 || mimeType === MIME_TYPE_LATEX) parseAsTex = true;else if (mimeType === MIME_TYPE_HTML$1 || mimeType === MIME_TYPE_ZZISH_HTML_MATH$1) parseAsTex = false;else {
@@ -21256,6 +21290,94 @@ function findNodeWithIndex(node, index) {
 
   return null;
 }
+
+function findGlobalOffset(node, nodeToFind, offset) {
+  var result = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+  // console.log(node.nodeType+":"+node.nodeValue+" === "+ nodeToFind.nodeType+":"+nodeToFind.nodeValue)
+  // console.log(node === nodeToFind)
+  if (result === null || result === undefined) throw error;
+
+  if (node === nodeToFind) {
+    result.offset = result.offset + offset; // console.log("result.offset now: "+result.offset)
+
+    if (isTextNode(node) && nodeStartsWithSmallSpace(node)) {
+      if (offset > 0) result.offset = result.offset - 1;
+    }
+
+    return true;
+  }
+
+  if (isKatexNode(node)) {
+    if (node === nodeToFind || node.contains(nodeToFind)) return true;else {
+      result.offset++;
+      return false;
+    }
+  }
+
+  if (isTextNode(node)) {
+    result.offset += node.nodeValue.length;
+    if (nodeStartsWithSmallSpace(node)) result.offset -= 1;
+    return false;
+  }
+
+  var childNodes = node.childNodes;
+  if (childNodes === null || childNodes === undefined) return false;
+
+  for (var i = 0; i < childNodes.length; i++) {
+    var child = childNodes[i]; // console.log("Checking child:"+child.nodeType+":"+child.tagName+":"+child.nodeValue)
+
+    var found = findGlobalOffset(child, nodeToFind, offset, result);
+    if (found) return true;
+  }
+
+  if (node.nodeType === 1 && node.tagName === "P") {
+    result.offset++;
+  }
+
+  return false;
+}
+
+function findNodeAndOffsetForGlobalOffset(node, globalOffset) {
+  var result = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+
+  if (isKatexNode(node)) {
+    result.node = null;
+    result.offset++;
+    return false;
+  }
+
+  if (isTextNode(node)) {
+    result.node = node;
+    result.lastTextNode = node;
+    result.offset += node.nodeValue.length;
+    if (nodeStartsWithSmallSpace(node)) result.offset -= 1; // console.log("result.offset now: "+result.offset)
+
+    return false;
+  }
+
+  var childNodes = node.childNodes;
+  if (childNodes === null || childNodes === undefined) return false;
+
+  for (var i = 0; i < childNodes.length; i++) {
+    var found = findNodeAndOffsetForGlobalOffset(childNodes[i], globalOffset, result);
+    if (found) return true;
+
+    if (result.node !== null && result.node !== undefined) {
+      if (result.offset >= globalOffset) {
+        result.offset = globalOffset - (result.offset - result.node.nodeValue.length);
+        return true;
+      }
+    }
+  }
+
+  if (node.nodeType === 1 && node.tagName === "P") {
+    result.node = null;
+    result.offset++;
+  }
+
+  return false;
+}
+
 function findFirstTextNode(node) {
   if (isTextNode(node)) return node;
   var nodes = node.childNodes;
@@ -21266,7 +21388,8 @@ function findFirstTextNode(node) {
   }
 
   return null;
-}
+} // https://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html
+
 function getRangeParams(editableDiv) {
   // console.log ("getRangeParams")
   // console.log("Inner html: "+editableDiv.innerHTML)
@@ -21284,22 +21407,135 @@ function getRangeParams(editableDiv) {
     return null;
   }
 
-  var range = selection.getRangeAt(0);
+  var range = selection.getRangeAt(0); // logAllDescendants(editableDiv)
+  // If the range is not within a text node, move it to a text node
+  // This typically happens when the end of a range is at the start of a new line
+
+  if (range.startContainer.nodeType !== 3) {
+    var textNode = findFirstTextNode(range.startContainer);
+
+    if (textNode !== null) {
+      console.warn("Adjusting start pos in getRangeParams as container was of type: " + range.startContainer.nodeName);
+      range.setStart(textNode, 0);
+    } else {
+      console.error("Unable to getRangeParams. seletion.startContainer is not a text node. " + "Node type: " + range.startContainer.nodeName);
+      return null;
+    }
+  }
+
+  if (range.endContainer.nodeType !== 3) {
+    var _textNode = findFirstTextNode(range.endContainer);
+
+    if (_textNode !== null) {
+      console.warn("Adjusting end pos in getRangeParams as container was of type: " + range.endContainer.nodeName);
+      range.setEnd(_textNode, 0);
+    } else {
+      console.error("Unable to getRangeParams. seletion.endContainer is not a text node. " + "Node type: " + range.endContainer.nodeName);
+      return null;
+    }
+  } // Find the index of the start and end nodes
+
+
   var startNodeIndex = findIndexOfNode(editableDiv, range.startContainer);
   var endNodeIndex = findIndexOfNode(editableDiv, range.endContainer); // console.log(editableDiv)
   // console.log("Start node: "+range.startContainer)
   // console.log("Start node: |"+range.startContainer.nodeValue+"|")
   // console.log("Start node index found: "+startNodeIndex)
   // console.log("Start node offset: "+range.startOffset)
+  // Find the global offset of the start and end nodes
+
+  var startResult = {
+    offset: 0
+  };
+  findGlobalOffset(editableDiv, range.startContainer, range.startOffset, startResult); // console.log("Global offset of start: "+startResult.offset)
+
+  var endResult = {
+    offset: 0
+  };
+  findGlobalOffset(editableDiv, range.endContainer, range.endOffset, endResult); // console.log("Global offset of end: "+endResult.offset)
 
   var rangeParams = {
     startNodeIndex: startNodeIndex,
     startOffset: range.startOffset,
     endNodeIndex: endNodeIndex,
-    endOffset: range.endOffset
+    endOffset: range.endOffset,
+    startGlobalOffset: startResult.offset,
+    endGlobalOffset: endResult.offset
   };
   return rangeParams;
 }
+
+function setRangeParamsFromGlobalOffsets(editableDiv, params) {
+  var new_range = null;
+
+  try {
+    if (params === null || params === undefined) throw new Error("Can't set range params: params === " + params);
+    var startResult = {
+      offset: 0
+    };
+    findNodeAndOffsetForGlobalOffset(editableDiv, params.startGlobalOffset, startResult); // console.log(startResult.node.nodeType+":"+startResult.node.tagName+":"+
+    //             startResult.node.nodeValue+":"+startResult.offset)
+
+    var endResult = {
+      offset: 0
+    };
+    findNodeAndOffsetForGlobalOffset(editableDiv, params.endGlobalOffset, endResult); // console.log(endResult.node.nodeType+":"+endResult.node.tagName+":"+
+    //             endResult.node.nodeValue+":"+endResult.offset)
+    // So the next bit of code should never be called in principle, but if we have
+    // failed to find an appropriate node (this could happen if the global offset is bigger
+    // than the length of the text in the node), then lets try and fix it
+
+    if (startResult.node === null || endResult.node === null) {
+      console.warn("Can't set range from global offsets, as could not find text nodes");
+      console.log(startResult);
+      console.log(endResult);
+
+      if (startResult.node === null) {
+        if (params.startGlobalOffset > 0 && startResult.lastTextNode !== null) {
+          startResult.node = startResult.lastTextNode;
+          startResult.offset = startResult.lastTextNode.nodeValue.length;
+        } else {
+          startResult.node = findFirstTextNode(editableDiv);
+          startResult.offset = 0;
+        }
+      }
+
+      if (endResult.node === null) {
+        if (params.endGlobalOffset > 0 && endResult.lastTextNode !== null) {
+          endResult.node = endResult.lastTextNode;
+          endResult.offset = endResult.lastTextNode.nodeValue.length;
+        } else {
+          endResult.node = findFirstTextNode(editableDiv);
+          endResult.offset = 0;
+        }
+      }
+    }
+
+    if (startResult.offset === 0 && startResult.node.nodeValue.length > 0 && nodeStartsWithSmallSpace(startResult.node)) {
+      startResult.offset = 1;
+    }
+
+    if (endResult.offset === 0 && endResult.node.nodeValue.length > 0 && nodeStartsWithSmallSpace(endResult.node)) {
+      endResult.offset = 1;
+    } // console.log("Setting range to:")
+    // console.log(startResult.node.nodeType+":"+startResult.node.tagName+":"+
+    //             startResult.node.nodeValue+":"+startResult.offset)
+
+
+    new_range = document.createRange();
+    new_range.setStart(startResult.node, startResult.offset);
+    new_range.setEnd(endResult.node, endResult.offset);
+    var selection = window.getSelection();
+    selection.removeAllRanges();
+    selection.addRange(new_range);
+  } catch (error) {
+    console.error(error);
+    console.log("Trying to set range:");
+    console.log(new_range);
+    console.log(editableDiv.childNodes);
+  }
+}
+
 function setRangeParams(editableDiv, params) {
   // console.log("setRangeParams")
   // console.log(params)
@@ -21311,6 +21547,11 @@ function setRangeParams(editableDiv, params) {
       return;
     }
 
+    if (params.startGlobalOffset) {
+      setRangeParamsFromGlobalOffsets(editableDiv, params);
+      return;
+    }
+
     if (params.startNodeIndex === null || params.startNodeIndex === undefined) {
       console.error("Can't set range params: params.startNodeIndex === " + params.startNodeIndex);
       return;
@@ -21369,7 +21610,7 @@ function setRangeParams(editableDiv, params) {
     }
 
     if (endNode === null) {
-      console.error("Could not set range to start node with index " + params.endNodeIndex);
+      console.error("Could not set range to end node with index " + params.endNodeIndex);
       endNode = findFirstTextNode(editableDiv);
       endOffset = 0;
     }
@@ -21386,6 +21627,12 @@ function setRangeParams(editableDiv, params) {
 
     new_range = document.createRange();
     new_range.setStart(startNode, startOffset);
+
+    if (endOffset > endNode.length) {
+      console.warn("endOffset > endNode.length when setting range: " + endOffset + " > " + endNode.length + " - " + endNode.nodeType + " - " + endNode.nodeValue);
+      endOffset = endNode.length;
+    }
+
     new_range.setEnd(endNode, endOffset); // console.log("Setting range")
     // console.log(new_range)
 
@@ -21400,6 +21647,163 @@ function setRangeParams(editableDiv, params) {
   }
 } // https://stackoverflow.com/questions/6659351/removing-all-script-tags-from-html-with-js-regular-expression
 
+function sanitiseHtmlForElement(element) {
+  if (isTextNode(element)) return document.createTextNode(element.nodeValue);
+
+  if (isKatexNode(element)) {
+    // console.log("Copying katex node")
+    var clone = element.cloneNode(true);
+    return clone;
+  }
+
+  if (element.tagName === "HEAD" || element.tagName === "STYLE" || element.tagName === "LINK") return null;
+  var new_element = null;
+
+  if (isBIUNode(element)) {
+    // console.log("Updating descendent: "+element.textContent)
+    new_element = document.createElement(element.tagName);
+  } else if (element.nodeType === 1 && (element.tagName === "LI" || element.tagName === "DT" || element.tagName === "DD" || element.tagName === "THEAD" || element.tagName === "TR" || element.tagName === "H1" || element.tagName === "H2" || element.tagName === "H3" || element.tagName === "H4" || element.tagName === "H5" || element.tagName === "H6")) {
+    // console.log("Converting descendent: <"+element.tagName+">"+element.textContent)
+    new_element = document.createElement('p');
+  } else {
+    // console.log("Stripping descendent:  <"+element.tagName+">"+element.textContent)
+    new_element = document.createElement('span');
+  }
+
+  if (element.hasChildNodes()) {
+    for (var i = 0; i < element.childNodes.length; i++) {
+      var new_child = sanitiseHtmlForElement(element.childNodes[i]);
+      if (new_child !== null) new_element.appendChild(new_child);
+      if (element.childNodes[i].tagName === "TH" || element.childNodes[i].tagName === "TD") new_element.appendChild(document.createTextNode(" "));
+    }
+  }
+
+  return new_element;
+}
+
+var SPAN_TAG = new RegExp("<span>|</span>", "g"); // const BR_TAG_REG_EXP = new RegExp("<br[\s\S]*?>","g")
+// const COMMENT_TAG_REG_EXP = new RegExp("<!--.+?-->","g")
+// const COMMENT_TAG_REG_EXP = new RegExp("(?=<!--([\s\S]*?)-->","g")
+// const COMMENT_TAG_REG_EXP = new RegExp("<!--[\s\S]*?-->","gm")
+// const MULTI_WHITE_SPACE_REG_EXP = new RegExp("\s{2,}","gm")
+
+var KATEX_START_HTML = "<span class=\"katex\"";
+var KATEX_END_HTML = "</span></span></span></span>";
+function sanitiseHtml(s) {
+  // Remove all <br> tags (as some of these can be inside katex tags)
+  s = s.replace(/<br[\s\S]*?>/gm, ""); // console.log("After removing comments:")
+  // console.log(s)
+  // Next, convert all elements to supported elements
+
+  var div = document.createElement('div');
+  div.innerHTML = s;
+  var sanitisedElement = sanitiseHtmlForElement(div);
+  var sanitised = sanitisedElement.innerHTML; // Next, remove all span tags, except those for katex span nodes
+  // NB: A simpler solution may have been to create something other than
+  // span tags in the sanitiseHtmlForElement(div) method and then simply
+  // remove all span tags.
+
+  var i = 0;
+  var j = 0;
+  var its = 0;
+  var output = [];
+
+  do {
+    its++;
+    j = sanitised.indexOf(KATEX_START_HTML, i);
+
+    if (j < 0) {
+      var _part = sanitised.substring(i, sanitised.length);
+
+      _part = _part.replace(SPAN_TAG, "");
+      output.push(_part);
+      break;
+    }
+
+    var part = sanitised.substring(i, j);
+    part = part.replace(SPAN_TAG, "");
+    output.push(part);
+    var k = sanitised.indexOf(KATEX_END_HTML, j) + KATEX_END_HTML.length;
+
+    if (k < 0) {
+      console.warn("Unable to find closing katex tag");
+      k = sanitised.length;
+    }
+
+    output.push(sanitised.substring(j, k));
+    i = k;
+  } while (j > 0 && its < 20);
+
+  sanitised = output.join(""); // Remove new lines
+
+  sanitised = sanitised.replace(/(\r\n|\r|\n)/gm, ""); // new line
+  // Convert any multispaces to a single space
+
+  sanitised = sanitised.replace(/\s{2,}/gm, " "); // 2 or more white spaces
+  // Next, make sure that each line of html is wrapped in paragraph tags
+
+  i = 0;
+  j = 0;
+  its = 0;
+  output = [];
+
+  do {
+    its++;
+    j = sanitised.indexOf("</p>", i);
+
+    if (j < 0) {
+      output.push(sanitised.substring(i, sanitised.length));
+      break;
+    }
+
+    j = j + 4; // Move j four characters to end of </p> tag
+
+    output.push(sanitised.substring(i, j)); // copy as far as </p>
+    // if we have reached the end of the string, finish
+
+    if (j === sanitised.length) break; // if not enough characters for a <p> then can't be a <p>
+
+    if (j + 3 > sanitised.length) {
+      output.push("<p>");
+      output.push(sanitised.substring(j, sanitised.length));
+      output.push("</p>");
+      break;
+    } // If the next characters are the start of a paragraph tag then continue
+
+
+    var nextChars = sanitised.substring(j, j + 3);
+
+    if (nextChars === "<p>") {
+      i = j;
+      continue;
+    } // If the next characters are the start of a katex tag then continue
+
+
+    if (j + KATEX_START_HTML.length < sanitised.length) {
+      nextChars = sanitised.substring(j, j + KATEX_START_HTML.length);
+
+      if (nextChars === KATEX_START_HTML) {
+        i = j;
+        continue;
+      }
+    } // Ok! We have found some html that is not wrapped in a paragraph tag
+    // Lets insert the paragraph tags
+
+
+    output.push("<p>");
+
+    var _k = sanitised.indexOf("<p>", j);
+
+    if (_k < 0) _k = sanitised.length;
+    output.push(sanitised.substring(j, _k));
+    output.push("</p>");
+    i = _k;
+  } while (j > 0 && its < 20);
+
+  sanitised = output.join("");
+  return sanitised;
+}
+
 var MIME_TYPE_PLAIN_TEXT = "text/plain";
 var MIME_TYPE_HTML = "text/html";
 var MIME_TYPE_TEX = "application/x-tex";
@@ -21408,14 +21812,135 @@ var SMALL_SPACE_CHAR_CODE = 8203;
 var SMALL_SPACE = String.fromCharCode(SMALL_SPACE_CHAR_CODE);
 var SMALL_SPACE_LENGTH = SMALL_SPACE.length; // const SMALL_SPACE_REG_EXP = new RegExp(SMALL_SPACE, "g")
 
-var MARK = "_M_A_R_K_";
-var MARK_REG_EXP = new RegExp(MARK, "g"); // const LATEX_MARKER_START = "<annotation encoding=\"application/x-tex\">"
+var MARK = getMark();
 // const LATEX_MARKER_END = "</annotation>"
 
 var MAX_HISTORY_LENGTH = 100;
 var DEFAULT_OPTIONS = {
   useExpertMode: false,
   selectedTab: null
+}; // Consts for creating accented letters in handleKeyDownAccentHelper
+
+var GRAVE_LETTERS = {
+  a: "à",
+  e: "è",
+  i: "ì",
+  o: "ò",
+  u: "ù",
+  d: "ð",
+  A: "À",
+  E: "È",
+  I: "Ì",
+  O: "Ò",
+  U: "Ù",
+  D: "Ð"
+};
+var ACCUTE_LETTERS = {
+  a: "á",
+  e: "é",
+  i: "í",
+  n: "ń",
+  o: "ó",
+  u: "ú",
+  y: "ý",
+  A: "Á",
+  E: "É",
+  I: "Í",
+  N: "Ń",
+  O: "Ó",
+  U: "Ú",
+  Y: "Ý"
+};
+var CARET_LETTERS = {
+  a: "â",
+  e: "ê",
+  i: "î",
+  o: "ô",
+  u: "û",
+  A: "Â",
+  E: "Ê",
+  I: "Î",
+  O: "Ô",
+  U: "Û"
+};
+var TILDE_LETTERS = {
+  a: "ã",
+  n: "ñ",
+  o: "õ",
+  A: "Ã",
+  N: "Ñ",
+  O: "Õ"
+};
+var COLON_LETTERS = {
+  a: "ä",
+  e: "ë",
+  i: "ï",
+  o: "ö",
+  u: "ü",
+  y: "ÿ",
+  A: "Ä",
+  E: "Ë",
+  I: "Ï",
+  O: "Ö",
+  U: "Ü",
+  Y: "Ÿ"
+};
+var AT_LETTERS = {
+  a: "å",
+  A: "Å"
+};
+var AND_LETTERS = {
+  a: "æ",
+  o: "œ",
+  s: "ß",
+  A: "Æ",
+  O: "Œ",
+  S: "ß"
+};
+var COMMA_LETTERS = {
+  c: "ç",
+  C: "Ç"
+};
+var SLASH_LETTERS = {
+  o: "ø",
+  O: "Ø"
+};
+var MINUS_LETTERS = {
+  a: "ā",
+  e: "ē",
+  i: "ī",
+  o: "ō",
+  u: "ū",
+  A: "Ā",
+  E: "Ē",
+  I: "Ī",
+  O: "Ō",
+  U: "Ū"
+};
+var CTRL_ALT_SHIFT_LETTERS = {
+  "?": "¿",
+  "!": "¡",
+  "/": "¿",
+  1: "¡"
+}; // Necessary
+
+var 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
 };
 
 var MathRichInput = /*#__PURE__*/function (_React$Component) {
@@ -21566,14 +22091,17 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       }
 
       if (deleteToEmpty) {
+        console.log("deleteToEmpty");
         var _new_rangeParams = {
           startNodeIndex: 0,
-          startOffset: 0,
+          startOffset: 1,
           endNodeIndex: 0,
-          endOffset: 0
+          endOffset: 1,
+          startGlobalOffset: 0,
+          endGlobalOffset: 0
         };
 
-        _this2.applyChangesToComponent("", MIME_TYPE_PLAIN_TEXT, _new_rangeParams, _this2.props.useExpertMode, _this2.props.selectedTab);
+        _this2.applyChangesToComponent("", _this2.getMimeType(false, false), _new_rangeParams, _this2.props.useExpertMode, _this2.props.selectedTab);
 
         return;
       } // Treat backspace normally in the following situations
@@ -21658,202 +22186,36 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this2), "handleKeyDownArrowLeft", function (e) {
       var rangeParams = _this2._getRangeParams();
 
-      var index = rangeParams.startNodeIndex;
-      var offset = rangeParams.startOffset; // console.log("Old: "+index+"->"+offset)
-      // The user shouldn't be in a katex node, but lets deal with it anyway
-
-      var node = _this2._findNodeWithIndex(index);
-
-      if (isKatexNode(node)) {
-        console.warn("Cursor is inside katex node");
-
-        var _new_index = index - 1; // Jump out of the latex node
-
-
-        var prev_node = _this2._findNodeWithIndex(index - 1);
-
-        var _new_offset = getNodeTextLength(prev_node);
-
-        var _new_rangeParams2 = {
-          startNodeIndex: _new_index,
-          startOffset: _new_offset,
-          endNodeIndex: _new_index,
-          endOffset: _new_offset
-        };
-
-        _this2._setRangeParams(_new_rangeParams2);
-
-        e.preventDefault();
-        return;
-      }
-
-      if (offset > 2) return;
-      var new_index = -1;
-      var new_offset = -1; // Deal with case of inserted small space at start of <p> element or after katex node
-
-      if (offset === 2) {
-        new_index = index;
-
-        if (_this2.nodeStartsWithSmallSpace(node)) {
-          if (index > 0 && isKatexNode(_this2._findNodeWithIndex(index - 1))) new_offset = 1;else new_offset = 0;
-        } else new_offset = 1;
-      }
-
-      if (offset === 1) {
-        if (_this2.nodeStartsWithSmallSpace(node)) {
-          if (index === 0) {
-            e.preventDefault();
-            return;
-          }
-
-          var _prev_node = _this2._findNodeWithIndex(index - 1);
-
-          if (index >= 2 && isKatexNode(_prev_node)) new_index = index - 2;else new_index = index - 1;
-
-          var new_node = _this2._findNodeWithIndex(new_index);
-
-          new_offset = getNodeTextLength(new_node);
-        } else {
-          new_index = index;
-          new_offset = 0;
-        }
-      }
-
-      if (offset === 0) {
-        var _prev_node2 = _this2._findNodeWithIndex(index - 1);
-
-        if (index >= 2 && isKatexNode(_prev_node2)) new_index = index - 2;else new_index = index - 1;
-
-        var _new_node = _this2._findNodeWithIndex(new_index);
-
-        new_offset = getNodeTextLength(_new_node);
-
-        if (new_offset === 1) {
-          if (_this2.nodeStartsWithSmallSpace(_new_node)) {
-            if (index > 0 && isKatexNode(_this2._findNodeWithIndex(index - 1))) new_offset = 1;else new_offset = 0;
-          }
-        }
-      } // Move cursor to start of field if in starting small space
-
-
-      if (new_index === 0 && new_offset === 1 && _this2.inputStartsWithSmallSpace()) {
-        new_offset = 0;
-      }
-
-      if (new_index === -1 || new_offset === -1) return;
+      rangeParams.startNodeIndex;
+      rangeParams.startOffset;
+      var new_globalOffset = rangeParams.startGlobalOffset - 1;
       var new_rangeParams = {
-        startNodeIndex: new_index,
-        startOffset: new_offset,
-        endNodeIndex: new_index,
-        endOffset: new_offset
+        startGlobalOffset: new_globalOffset,
+        endGlobalOffset: new_globalOffset
       };
+      e.preventDefault();
 
       _this2._setRangeParams(new_rangeParams);
 
-      e.preventDefault();
+      return; // console.log("Old: "+index+"->"+offset)
     });
 
     _defineProperty(_assertThisInitialized(_this2), "handleKeyDownArrowRight", function (e) {
       // console.log("handleKeyDownArrowRight")
       var rangeParams = _this2._getRangeParams();
 
-      var index = rangeParams.startNodeIndex;
-      var offset = rangeParams.startOffset;
-      if (index < 0) // Empty input field
-        return;
-
-      var node = _this2._findNodeWithIndex(index);
-
-      var length = getNodeTextLength(node); // The user shouldn't be in a katex node, but lets deal with it anyway
-
-      if (isKatexNode(node)) {
-        console.warn("Cursor is inside katex node");
-        var new_index = index + 1; // Jump out of the latex node
-
-        var new_offset = SMALL_SPACE_LENGTH; // As there will be a SMALL_SPACE at the start of the text node
-
-        var new_rangeParams = {
-          startNodeIndex: new_index,
-          startOffset: new_offset,
-          endNodeIndex: new_index,
-          endOffset: new_offset
-        };
-
-        _this2._setRangeParams(new_rangeParams);
-
-        e.preventDefault();
-        return;
-      } // Deal with case of inserted small space at start of <p> element
-
-
-      if (offset === 0) {
-        if (_this2.nodeStartsWithSmallSpace(node)) {
-          // console.log("Offset = 0 and node starts with small space");
-          var _new_index2 = -1;
-
-          var _new_offset2 = -1;
-
-          if (node.nodeValue.length > 1) {
-            _new_index2 = index;
-            _new_offset2 = SMALL_SPACE_LENGTH + 1;
-          } else {
-            _new_index2 = index + 1;
-
-            var next_node = _this2._findNodeWithIndex(_new_index2);
-
-            if (next_node !== null) {
-              if (isKatexNode(next_node)) {
-                _new_index2 = index + 2;
-                _new_offset2 = SMALL_SPACE_LENGTH;
-              } else {
-                _new_index2 = index + 1;
-                _new_offset2 = 0;
-              }
-            } else {
-              _new_index2 = index;
-              _new_offset2 = offset;
-            }
-          }
-
-          var _new_rangeParams3 = {
-            startNodeIndex: _new_index2,
-            startOffset: _new_offset2,
-            endNodeIndex: _new_index2,
-            endOffset: _new_offset2
-          };
-
-          _this2._setRangeParams(_new_rangeParams3);
-
-          e.preventDefault();
-          return;
-        }
-      } // If at the end of a text node
-
-
-      if (offset === length || index === 0 && _this2.inputStartsWithSmallSpace()) {
-        var _next_node = _this2._findNodeWithIndex(index + 1); // If there is no next node, then we can't move, so do the default action
-        // If the next node is a normal node, do the default action
-
-
-        if (_next_node === null || !isKatexNode(_next_node)) return;
-
-        var _new_index3 = index + 2; // Jump over the latex node
-
-
-        var _new_offset3 = SMALL_SPACE_LENGTH; // As there will be a SMALL_SPACE at the start of the text node
-
-        var _new_rangeParams4 = {
-          startNodeIndex: _new_index3,
-          startOffset: _new_offset3,
-          endNodeIndex: _new_index3,
-          endOffset: _new_offset3
-        };
+      rangeParams.startNodeIndex;
+      rangeParams.startOffset;
+      var new_globalOffset = rangeParams.startGlobalOffset + 1;
+      var new_rangeParams = {
+        startGlobalOffset: new_globalOffset,
+        endGlobalOffset: new_globalOffset
+      };
+      e.preventDefault();
 
-        _this2._setRangeParams(_new_rangeParams4);
+      _this2._setRangeParams(new_rangeParams);
 
-        e.preventDefault();
-        return;
-      }
+      return;
     });
 
     _defineProperty(_assertThisInitialized(_this2), "editableDivIsPlainText", function () {
@@ -21892,10 +22254,18 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
           convert_to_latex = true;
         }
 
-        if (!convert_to_latex) return;
-        node.nodeValue = node.nodeValue.substring(0, first_dollar_pos) + MARK + node.nodeValue.substring(first_dollar_pos + 1, second_dollar_pos) + MARK + node.nodeValue.substring(second_dollar_pos);
-        var raw_text = elementToMarkedRawText(e.target, null, 0, _this2.enableHtml());
-        raw_text = raw_text.replace(MARK_REG_EXP, "$"); // We are turning one node into three and want the cursor at the start of the third node
+        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
+
+        var 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
+
+        var raw_text = elementToMarkedRawText(e.target, null, 0, _this2.enableHtml()); // now replace the marks with math
+
+        raw_text = replaceMarksWithMath(raw_text, latex, _this2.enableHtml()); // We are turning one node into three and want the cursor at the start of the third node
 
         var new_rangeParams = {
           startNodeIndex: params.startNodeIndex + 2,
@@ -21934,6 +22304,84 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       e.preventDefault();
     });
 
+    _defineProperty(_assertThisInitialized(_this2), "handleKeyDownAccentHelper", function (e) {
+      // console.log(e.ctrlKey)
+      // console.log(e.altKey)
+      // console.log(e.shiftKey)
+      var new_accent = "";
+      var 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 (_this2.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.
+
+        var letters = LETTERS[_this2.accent];
+        if (letters.hasOwnProperty(e.key)) new_char = letters[e.key];
+      } // If a new accent has been set, store it in this.accent, otherwise clear this.accent
+
+
+      if (new_accent === "") _this2.accent = "";else {
+        e.preventDefault();
+        _this2.accent = new_accent;
+        console.log("Accent set: " + _this2.accent);
+        return true;
+      }
+
+      if (new_char !== "") {
+        // Prevent the original character being insereted
+        e.preventDefault(); // Insert the accented character a the cursor position
+
+        _this2.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
+      // }
+
+    });
+
     _defineProperty(_assertThisInitialized(_this2), "handleKeyDown", function (e) {
       try {
         // Lets set up or update the undo redo history
@@ -21947,23 +22395,41 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
         if (!(e.ctrlKey || e.metaKey)) _this2.resetHistoryRedo();
 
-        if ((e.metaKey || e.ctrlKey) && (e.key === "b" || e.key === "i" || e.key === "u" || e.key === "6" || e.key === "^" || e.key === "-" || e.key === "_")) {
-          if (!_this2.enableHtml()) {
-            e.preventDefault();
-            return;
-          }
-
+        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 === "=") && _this2.enableHtml()) {
           if (e.key === "b") _this2.styleText(e, "Bold");
           if (e.key === "i") _this2.styleText(e, "Italic");
-          if (e.key === "u") _this2.styleText(e, "Underline");
-          if (e.key === "6" || e.key === "^") _this2.styleText(e, "Superscript"); // don't apply subscript if it is the browser command key for "smaller"
+          if (e.key === "u") _this2.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 === "-") return;
-          if (/(Mac)/i.test(window.navigator.platform) && e.metaKey && e.key === "-") return; // otherwise
+          if (/(Win)/i.test(window.navigator.platform) && e.ctrlKey && (e.key === "6" || e.key === "^")) return; // otherwise
+
+          if (e.key === "6" || e.key === "^" || e.key === "+" || e.key === "=") _this2.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 === "_") _this2.styleText(e, "Subscript");
           e.preventDefault();
           return;
+        }
+
+        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
 
@@ -22094,11 +22560,15 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
             e.preventDefault();
             return;
           }
-        } // Check if inserting character in element that starts with small space
+        }
+
+        if (_this2.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 && _this2.nodeStartsWithSmallSpace(startNode)) {
+          console.log("Handling character input at start of text node with small space");
 
-        if (e.key.length === 1 && params.startOffset === 0 && _this2.nodeStartsWithSmallSpace(startNode)) {
-          _this2.replaceNextLetter(e.key);
+          _this2.insertAfterSmallSpace(e.key, params);
 
           e.preventDefault();
           return;
@@ -22176,14 +22646,14 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
                 _new_offset4 = SMALL_SPACE_LENGTH;
               }
 
-              var _new_rangeParams5 = {
+              var _new_rangeParams7 = {
                 startNodeIndex: _new_index4,
                 startOffset: _new_offset4,
                 endNodeIndex: _new_index4,
                 endOffset: _new_offset4
               }; // console.log(new_rangeParams)
 
-              _this2._setRangeParams(_new_rangeParams5);
+              _this2._setRangeParams(_new_rangeParams7);
             }
           }
         }
@@ -22221,7 +22691,15 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       try {
         var rangeParams = _this2._getRangeParams();
 
-        if (rangeParams.startNodeIndex < 0) return;
+        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;
+        }
 
         var node = _this2._findNodeWithIndex(rangeParams.startNodeIndex);
 
@@ -22273,6 +22751,46 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this2), "handlePaste", function (event) {
+      var clipboardData = event.clipboardData || window.clipboardData;
+
+      if (clipboardData === null || clipboardData === undefined) {
+        console.warn("handlePaste called, but no clipboard data");
+        return;
+      }
+
+      for (var i = 0; i < clipboardData.types.length; i++) {
+        console.log(clipboardData.types[i] + ": " + clipboardData.getData(clipboardData.types[i]));
+      }
+
+      var 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);
+
+        _this2.insertHtml(pasteHtml);
+
+        event.preventDefault();
+      } else {
+        var paste = clipboardData.getData("text");
+        var selection = window.getSelection();
+
+        if (!selection.rangeCount) {
+          console.warn("handlePaste called, but unable to get selection");
+          return false;
+        }
+
+        event.preventDefault();
+        selection.deleteFromDocument();
+
+        _this2.insertRawText(paste);
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_this2), "showEquationEditor", function () {
       var moveCursorOnInsert = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       var node = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
@@ -22282,8 +22800,6 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
         if (rangeParams.startNodeIndex < 0) {
           console.error("Could not find position of cursor in node list");
-          console.log(rangeParams);
-          console.log(_this2.editableDiv.childNodes);
 
           _this2.setOldRangeParams({
             startNodeIndex: 2,
@@ -22359,7 +22875,10 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
           node = node.parentNode;
         } while (node !== _this2.editableDiv && node !== null);
 
-        if (!isLatex) return;
+        if (!isLatex) {
+          return;
+        }
+
         _this2.showEquationEditorOnMouseUp = true; // Save current range parameters so that we can restore them later if we wish
 
         _this2.setOldRangeParams(_this2._getRangeParams()); // this.editableDiv.focus()
@@ -22478,14 +22997,14 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
             }
           }
 
-          var _new_rangeParams6 = {
+          var _new_rangeParams8 = {
             startNodeIndex: new_index,
             startOffset: new_offset,
             endNodeIndex: new_index,
             endOffset: new_offset
           };
 
-          _this2.setOldRangeParams(_new_rangeParams6);
+          _this2.setOldRangeParams(_new_rangeParams8);
 
           var _nodeCounts = _this2._countNodeTypes();
 
@@ -22493,7 +23012,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
           if (_this2.editingExistingEquation) _mimeType = _this2.getMimeType(_nodeCounts.html > 0, _nodeCounts.katex > 1);else _mimeType = _this2.getMimeType(_nodeCounts.html > 0, _nodeCounts.katex > 0);
           _new_raw_text = removeEncodingIfPlainText(_new_raw_text, _mimeType, _this2.enableHtml());
 
-          _this2.applyChangesToComponent(_new_raw_text, _mimeType, _new_rangeParams6, _this2.props.useExpertMode, _this2.props.selectedTab);
+          _this2.applyChangesToComponent(_new_raw_text, _mimeType, _new_rangeParams8, _this2.props.useExpertMode, _this2.props.selectedTab);
 
           _this2.setState({
             showEquationEditor: false
@@ -22504,20 +23023,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         // console.log("Latex returned from equation editor: "+latex)
 
 
-        var new_raw_text = replaceMarksWithMath(_this2.markedRawText, latex, _this2.enableHtml()); // let new_raw_text =
-        //   this.markedRawText.substring(0,start_pos) +
-        //   RAW_TEXT_MATH_START_TAG + latex + RAW_TEXT_MATH_END_TAG +
-        //   this.markedRawText.substring(end_pos + MARK.length)
-        //   console.log(
-        //     "Old cursor pos: " +
-        //       oldRangeParams.startNodeIndex +
-        //       "->" +
-        //       oldRangeParams.startOffset
-        //   );
-        //   console.log("Old raw text: " + this.props.value);
-        //   console.log("Old raw text length: " + this.props.value.length);
-        //   console.log("Old marked raw text:" + this.markedRawText);
-        //   console.log("New raw text: " + new_raw_text);
+        var new_raw_text = replaceMarksWithMath(_this2.markedRawText, latex, _this2.enableHtml());
 
         var new_rangeParams = _this2.getOldRangeParams();
 
@@ -22559,7 +23065,30 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this2), "styleText", function (event, style) {
       try {
         style = style.toLowerCase();
-        var success = document.execCommand(style, false, null);
+        var 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" && _this2.state.activeButtons.subscript || style === "superscript" && _this2.state.activeButtons.superscript) {
+          var selection = document.getSelection();
+          var 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 (_this2.state.activeButtons.bold) success = document.execCommand("bold", false, null);
+          if (_this2.state.activeButtons.italic) success = document.execCommand("italic", false, null);
+          if (_this2.state.activeButtons.underline) success = document.execCommand("underline", false, null);
+        } else {
+          // This is the normal code ...
+          success = document.execCommand(style, false, null);
+        }
+
         var buttonState = _this2.state.activeButtons[style];
         if (buttonState === null || buttonState === undefined) return success;
         buttonState = !buttonState;
@@ -22613,7 +23142,9 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this2), "insertRawText", function (event, new_text) {
+    _defineProperty(_assertThisInitialized(_this2), "insertRawText", function (new_text) {
+      var selectInsertedText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+
       try {
         var rangeParams = _this2._getRangeParams();
 
@@ -22625,12 +23156,166 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
         var new_rangeParams = _objectSpread2({}, rangeParams);
 
-        new_raw_text = removeMarks(insertCharacterBeforeMarks(raw_text, new_text));
-        if (rangeParams.startNodeIndex === rangeParams.endNodeIndex && rangeParams.startOffset === rangeParams.endOffset) new_rangeParams.startOffset = new_rangeParams.startOffset + new_text.length;
+        new_raw_text = removeMarks(insertCharacterBeforeMarks(raw_text, new_text)); // console.log("New raw text:")
+        // console.log(new_raw_text)
+        // if (rangeParams.startNodeIndex === rangeParams.endNodeIndex &&
+        //     rangeParams.startOffset === rangeParams.endOffset)
+        //   new_rangeParams.startOffset = new_rangeParams.startOffset + new_text.length
+
         new_rangeParams.endOffset = new_rangeParams.endOffset + new_text.length;
-        new_raw_text = removeEncodingIfPlainText(new_raw_text, _this2.state.mimeType, _this2.enableHtml());
 
-        _this2.applyChangesToComponent(new_raw_text, _this2.state.mimeType, new_rangeParams, _this2.props.useExpertMode, _this2.props.selectedTab);
+        if (!selectInsertedText) {
+          new_rangeParams.startNodeIndex = new_rangeParams.endNodeIndex;
+          new_rangeParams.startOffset = new_rangeParams.endOffset;
+        } // console.log("Setting new range params: ")
+        // console.log(new_rangeParams)
+        // console.log("Setting new mime-type: ")
+        // console.log(this.props.mimeType)
+
+
+        new_raw_text = removeEncodingIfPlainText(new_raw_text, _this2.props.mimeType, _this2.enableHtml());
+
+        _this2.applyChangesToComponent(new_raw_text, _this2.props.mimeType, new_rangeParams, _this2.props.useExpertMode, _this2.props.selectedTab);
+      } catch (error) {
+        console.error(error);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this2), "pasteHtmlAtCaret", function (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();
+        }
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this2), "insertHtml", function (new_html) {
+      try {
+        // console.log("New html: "+new_html)
+        // console.log("inserting: "+new_html)
+        _this2.pasteHtmlAtCaret(new_html, true);
+
+        var new_rangeParams = null; // console.log("New range params: ")
+
+        try {
+          new_rangeParams = _this2._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
+        };
+        var new_raw_text = elementToMarkedRawText(_this2.editableDiv, null, -1, _this2.enableHtml()); // console.log("New raw text:"+new_raw_text)
+
+        var nodeCounts = _this2._countNodeTypes();
+
+        var mimeType = _this2.getMimeType(nodeCounts.html > 0, nodeCounts.math > 0);
+
+        new_raw_text = removeEncodingIfPlainText(new_raw_text, mimeType, _this2.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 {
+          var i = -1;
+
+          do {
+            i = new_raw_text.indexOf("<P>", i + 1);
+
+            if (i >= 0) {
+              var j = new_raw_text.indexOf("<P>", i + 1);
+              var 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) {
+              var _j = new_raw_text.indexOf("</P>", i + 1);
+
+              var _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);
+        } // console.log("New raw text:"+new_raw_text)
+
+
+        _this2.applyChangesToComponent(new_raw_text, mimeType, new_rangeParams, _this2.props.useExpertMode, _this2.props.selectedTab);
       } catch (error) {
         console.error(error);
       }
@@ -22655,14 +23340,12 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         new_rangeParams.startNodeIndex = rangeParams.startNodeIndex - 1;
         new_rangeParams.startOffset = new_offset;
         new_rangeParams.endNodeIndex = rangeParams.endNodeIndex - 1;
-        new_rangeParams.endOffset = new_offset; //   console.log("About to apply new range params");
-        //   console.log(new_rangeParams);
-        //   console.log("Old nodes");
-        //   console.log(this.editableDiv.childNodes);
-
-        new_raw_text = removeEncodingIfPlainText(new_raw_text, _this2.state.mimeType, _this2.enableHtml());
+        new_rangeParams.endOffset = new_offset;
+        new_rangeParams.srartGlobalOffset--;
+        new_rangeParams.endGlobalOffset--;
+        new_raw_text = removeEncodingIfPlainText(new_raw_text, _this2.props.mimeType, _this2.enableHtml());
 
-        _this2.applyChangesToComponent(new_raw_text, _this2.state.mimeType, new_rangeParams, _this2.props.useExpertMode, _this2.props.selectedTab);
+        _this2.applyChangesToComponent(new_raw_text, _this2.props.mimeType, new_rangeParams, _this2.props.useExpertMode, _this2.props.selectedTab);
       } catch (error) {
         console.error(error);
       }
@@ -22680,6 +23363,11 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
         var new_rangeParams = _objectSpread2({}, rangeParams);
 
+        if (new_rangeParams.startGlobalOffset) {
+          new_rangeParams.startGlobalOffset++;
+          new_rangeParams.endGlobalOffset++;
+        }
+
         if (_this2.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>";
@@ -22691,39 +23379,11 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
           new_raw_text = removeMarks(insertCharacterBeforeMarks(raw_text, "\n"));
           new_rangeParams.startOffset++;
           new_rangeParams.endOffset++;
-        } //   console.log("About to apply new range params");
-        //   console.log(new_rangeParams);
-        //   console.log("Old nodes");
-        //   console.log(this.editableDiv.childNodes);
-
-
-        new_raw_text = removeEncodingIfPlainText(new_raw_text, _this2.state.mimeType, _this2.enableHtml());
-
-        _this2.applyChangesToComponent(new_raw_text, _this2.state.mimeType, new_rangeParams, _this2.props.useExpertMode, _this2.props.selectedTab);
-      } catch (error) {
-        console.error(error);
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this2), "replaceNextLetter", function (new_char) {
-      try {
-        var rangeParams = _this2._getRangeParams();
-
-        var node = _this2._findNodeWithIndex(rangeParams.endNodeIndex);
-
-        var offset = rangeParams.endOffset + 1; // next letter
-
-        var raw_text = elementToMarkedRawText(_this2.editableDiv, node, offset, _this2.enableHtml());
-        var new_raw_text = null;
-
-        var new_rangeParams = _objectSpread2({}, rangeParams);
+        }
 
-        new_raw_text = removeMarks(insertCharacterBeforeMarks(raw_text, new_char));
-        if (rangeParams.startNodeIndex === rangeParams.endNodeIndex && rangeParams.startOffset === rangeParams.endOffset) new_rangeParams.startOffset = new_rangeParams.startOffset + new_char.length + 1;
-        new_rangeParams.endOffset = new_rangeParams.endOffset + new_char.length + 1;
-        new_raw_text = removeEncodingIfPlainText(new_raw_text, _this2.state.mimeType, _this2.enableHtml());
+        new_raw_text = removeEncodingIfPlainText(new_raw_text, _this2.props.mimeType, _this2.enableHtml());
 
-        _this2.applyChangesToComponent(new_raw_text, _this2.state.mimeType, new_rangeParams, _this2.props.useExpertMode, _this2.props.selectedTab);
+        _this2.applyChangesToComponent(new_raw_text, _this2.props.mimeType, new_rangeParams, _this2.props.useExpertMode, _this2.props.selectedTab);
       } catch (error) {
         console.error(error);
       }
@@ -22733,23 +23393,33 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       try {
         var rangeParams = _this2._getRangeParams();
 
-        var node = _this2._findNodeWithIndex(rangeParams.endNodeIndex);
+        var node = _this2._findNodeWithIndex(rangeParams.startNodeIndex);
 
-        var offset = rangeParams.endOffset;
+        var offset = rangeParams.startOffset;
         var raw_text = elementToMarkedRawText(_this2.editableDiv, node, offset, _this2.enableHtml());
         var new_raw_text = null;
-
-        var new_rangeParams = _objectSpread2({}, rangeParams);
+        var new_rangeParams = null;
 
         if (old_char === null) {
+          // insert new char
           new_raw_text = removeMarks(insertCharacterBeforeMarks(raw_text, new_char));
-          if (rangeParams.startNodeIndex === rangeParams.endNodeIndex && rangeParams.startOffset === rangeParams.endOffset) new_rangeParams.startOffset = new_rangeParams.startOffset + new_char.length;
-          new_rangeParams.endOffset = new_rangeParams.endOffset + new_char.length;
-        } else new_raw_text = removeMarks(replaceCharacterBeforeMarks(raw_text, new_char));
+          new_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 = _objectSpread2({}, rangeParams);
+        }
 
-        new_raw_text = removeEncodingIfPlainText(new_raw_text, _this2.state.mimeType, _this2.enableHtml());
+        new_raw_text = removeEncodingIfPlainText(new_raw_text, _this2.props.mimeType, _this2.enableHtml());
 
-        _this2.applyChangesToComponent(new_raw_text, _this2.state.mimeType, new_rangeParams, _this2.props.useExpertMode, _this2.props.selectedTab);
+        _this2.applyChangesToComponent(new_raw_text, _this2.props.mimeType, new_rangeParams, _this2.props.useExpertMode, _this2.props.selectedTab);
       } catch (error) {
         console.error(error);
       }
@@ -22767,6 +23437,10 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this2), "focus", function () {
+      _this2.editableDiv.focus();
+    });
+
     _defineProperty(_assertThisInitialized(_this2), "handleFocus", function (event) {
       var onFocus = _this2.props.onFocus;
 
@@ -22848,6 +23522,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     _this2.initialHistoryState = null;
     _this2.undoHistory = [];
     _this2.redoHistory = [];
+    _this2.accent = "";
     return _this2;
   }
 
@@ -22949,6 +23624,8 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         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);
       }
@@ -22959,6 +23636,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       try {
         this.editableDiv.removeEventListener("keydown", this.handleKeyDown);
         this.editableDiv.removeEventListener("keyup", this.handleKeyUp);
+        this.editableDiv.removeEventListener("paste", this.handlePaste);
       } catch (error) {
         console.error(error);
       }
@@ -22977,6 +23655,32 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         console.error(error);
       }
     }
+  }, {
+    key: "insertAfterSmallSpace",
+    value: function 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");
+
+        var node = this._findNodeWithIndex(rangeParams.startNodeIndex);
+
+        var raw_text = elementToMarkedRawText(this.editableDiv, node, 1, // after small space
+        this.enableHtml());
+        var new_raw_text = removeMarks(insertCharacterBeforeMarks(raw_text, new_char));
+        var 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);
+      }
+    }
   }, {
     key: "render",
     value: function render() {