@zzish/math-rich-input 0.1.24 → 0.1.26

package/src/MathRichInput.jsx

@@ -7,6 +7,7 @@ import EquationEditorModal from "./EquationEditorModal";
 import Toolbar from "./Toolbar";
 
 import {
+  getMark,
   isKatexNode,
   elementToMarkedRawText,
   removeEncodingIfPlainText,
@@ -26,6 +27,7 @@ import {
   insertCharacterBeforeMarks,
   removeMarks,
   replaceMarksWithMath,
+  sanitiseHtml,
 } from "./mathRichInputHelper";
 
 import "./MathRichInput.css";
@@ -41,7 +43,7 @@ const SMALL_SPACE = String.fromCharCode(SMALL_SPACE_CHAR_CODE);
 const SMALL_SPACE_LENGTH = SMALL_SPACE.length;
 // const SMALL_SPACE_REG_EXP = new RegExp(SMALL_SPACE, "g")
 
-const MARK = "_M_A_R_K_";
+const MARK = getMark();
 const MARK_REG_EXP = new RegExp(MARK, "g");
 
 // const LATEX_MARKER_START = "<annotation encoding=\"application/x-tex\">"
@@ -54,6 +56,101 @@ const DEFAULT_OPTIONS = {
   selectedTab: null,
 };
 
+// Consts for creating accented letters in handleKeyDownAccentHelper
+const GRAVE_LETTERS = {
+  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: "Ý",
+};
+const CARET_LETTERS = {
+  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: "Ÿ",
+};
+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: "Ū",
+};
+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,
+};
+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);
@@ -110,6 +207,7 @@ export default class MathRichInput extends React.Component {
     this.initialHistoryState = null;
     this.undoHistory = [];
     this.redoHistory = [];
+    this.accent = "";
   }
 
   enableFontStyling() {
@@ -368,10 +466,12 @@ export default class MathRichInput extends React.Component {
         startOffset: 0,
         endNodeIndex: 0,
         endOffset: 0,
+        startGlobalOffset: 0,
+        endGlobalOffset: 0,
       };
       this.applyChangesToComponent(
         "",
-        MIME_TYPE_PLAIN_TEXT,
+        this.getMimeType(false, false),
         new_rangeParams,
         this.props.useExpertMode,
         this.props.selectedTab
@@ -488,6 +588,15 @@ export default class MathRichInput extends React.Component {
     let index = rangeParams.startNodeIndex;
     let offset = rangeParams.startOffset;
 
+    let new_globalOffset = rangeParams.startGlobalOffset - 1;
+    let new_rangeParams = {
+      startGlobalOffset: new_globalOffset,
+      endGlobalOffset: new_globalOffset,
+    };
+    e.preventDefault();
+    this._setRangeParams(new_rangeParams);
+    return;
+
     // console.log("Old: "+index+"->"+offset)
 
     // The user shouldn't be in a katex node, but lets deal with it anyway
@@ -503,6 +612,8 @@ export default class MathRichInput extends React.Component {
         startOffset: new_offset,
         endNodeIndex: new_index,
         endOffset: new_offset,
+        startGlobalOffset: new_globalOffset,
+        endGlobalOffset: new_globalOffset,
       };
       this._setRangeParams(new_rangeParams);
       e.preventDefault();
@@ -567,16 +678,18 @@ export default class MathRichInput extends React.Component {
     }
 
     if (new_index === -1 || new_offset === -1) return;
-
-    let new_rangeParams = {
-      startNodeIndex: new_index,
-      startOffset: new_offset,
-      endNodeIndex: new_index,
-      endOffset: new_offset,
-    };
-    this._setRangeParams(new_rangeParams);
-
-    e.preventDefault();
+    else {
+      let new_rangeParams = {
+        startNodeIndex: new_index,
+        startOffset: new_offset,
+        endNodeIndex: new_index,
+        endOffset: new_offset,
+        startGlobalOffset: new_globalOffset,
+        endGlobalOffset: new_globalOffset,
+      };
+      this._setRangeParams(new_rangeParams);
+      e.preventDefault();
+    }
   };
 
   handleKeyDownArrowRight = (e) => {
@@ -585,6 +698,15 @@ export default class MathRichInput extends React.Component {
     let index = rangeParams.startNodeIndex;
     let offset = rangeParams.startOffset;
 
+    let new_globalOffset = rangeParams.startGlobalOffset + 1;
+    let new_rangeParams = {
+      startGlobalOffset: new_globalOffset,
+      endGlobalOffset: new_globalOffset,
+    };
+    e.preventDefault();
+    this._setRangeParams(new_rangeParams);
+    return;
+
     if (index < 0)
       // Empty input field
       return;
@@ -720,20 +842,32 @@ export default class MathRichInput extends React.Component {
       }
       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 +
-        node.nodeValue.substring(first_dollar_pos + 1, second_dollar_pos) +
+        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()
       );
-      raw_text = raw_text.replace(MARK_REG_EXP, "$");
+      // 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 = {
@@ -779,6 +913,85 @@ export default class MathRichInput extends React.Component {
     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 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
+    // }
+  };
+
   handleKeyDown = (e) => {
     try {
       // Lets set up or update the undo redo history
@@ -801,37 +1014,53 @@ export default class MathRichInput extends React.Component {
           e.key === "6" ||
           e.key === "^" ||
           e.key === "-" ||
-          e.key === "_")
+          e.key === "_" ||
+          e.key === "+" ||
+          e.key === "=") &&
+        this.enableHtml()
       ) {
-        if (!this.enableHtml()) {
-          e.preventDefault();
-          return;
-        }
         if (e.key === "b") this.styleText(e, "Bold");
         if (e.key === "i") this.styleText(e, "Italic");
         if (e.key === "u") this.styleText(e, "Underline");
-        if (e.key === "6" || e.key === "^") this.styleText(e, "Superscript");
 
-        // don't apply subscript if it is the browser command key for "smaller"
+        // 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 === "-"
+          (e.key === "6" || e.key === "^")
         )
           return;
         // 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 ((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)) {
@@ -964,6 +1193,8 @@ export default class MathRichInput extends React.Component {
         }
       }
 
+      if (this.handleKeyDownAccentHelper(e)) return;
+
       // Check if inserting character in element that starts with small space
       if (
         e.key.length === 1 &&
@@ -1120,7 +1351,19 @@ export default class MathRichInput extends React.Component {
   updateActiveButtons = () => {
     try {
       let rangeParams = this._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;
+      }
       let node = this._findNodeWithIndex(rangeParams.startNodeIndex);
       let bold = false;
       let italic = false;
@@ -1166,12 +1409,48 @@ export default class MathRichInput extends React.Component {
     }
   };
 
+  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);
     }
@@ -1181,6 +1460,7 @@ export default class MathRichInput extends 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);
     }
@@ -1206,8 +1486,6 @@ export default class MathRichInput extends React.Component {
       let rangeParams = this._getRangeParams();
       if (rangeParams.startNodeIndex < 0) {
         console.error("Could not find position of cursor in node list");
-        console.log(rangeParams);
-        console.log(this.editableDiv.childNodes);
 
         this.setOldRangeParams({
           startNodeIndex: 2,
@@ -1287,7 +1565,9 @@ export default class MathRichInput extends React.Component {
         node = node.parentNode;
       } while (node !== this.editableDiv && node !== null);
 
-      if (!isLatex) return;
+      if (!isLatex) {
+        return;
+      }
 
       this.showEquationEditorOnMouseUp = true;
       // Save current range parameters so that we can restore them later if we wish
@@ -1448,21 +1728,6 @@ export default class MathRichInput extends React.Component {
         latex,
         this.enableHtml()
       );
-      // let new_raw_text =
-      //   this.markedRawText.substring(0,start_pos) +
-      //   RAW_TEXT_MATH_START_TAG + latex + RAW_TEXT_MATH_END_TAG +
-      //   this.markedRawText.substring(end_pos + MARK.length)
-
-      //   console.log(
-      //     "Old cursor pos: " +
-      //       oldRangeParams.startNodeIndex +
-      //       "->" +
-      //       oldRangeParams.startOffset
-      //   );
-      //   console.log("Old raw text: " + this.props.value);
-      //   console.log("Old raw text length: " + this.props.value.length);
-      //   console.log("Old marked raw text:" + this.markedRawText);
-      //   console.log("New raw text: " + new_raw_text);
 
       let new_rangeParams = this.getOldRangeParams();
       if (this.moveCursorOnInsert) {
@@ -1519,7 +1784,36 @@ export default class MathRichInput extends React.Component {
   styleText = (event, style) => {
     try {
       style = style.toLowerCase();
-      let success = document.execCommand(style, false, null);
+      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;
 
@@ -1569,7 +1863,7 @@ export default class MathRichInput extends React.Component {
     }
   };
 
-  insertRawText = (event, new_text) => {
+  insertRawText = (new_text, selectInsertedText = true) => {
     try {
       let rangeParams = this._getRangeParams();
       let node = this._findNodeWithIndex(rangeParams.endNodeIndex);
@@ -1586,23 +1880,171 @@ export default class MathRichInput extends React.Component {
       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;
+      // 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;
-
+      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,
-        this.state.mimeType,
+        this.props.mimeType,
         this.enableHtml()
       );
-
       this.applyChangesToComponent(
         new_raw_text,
-        this.state.mimeType,
+        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);
+        }
+        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);
+      }
+      // 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);
+      }
+      // console.log("New raw text:"+new_raw_text)
+      this.applyChangesToComponent(
+        new_raw_text,
+        mimeType,
         new_rangeParams,
         this.props.useExpertMode,
         this.props.selectedTab
@@ -1636,21 +2078,18 @@ export default class MathRichInput extends React.Component {
       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_rangeParams.srartGlobalOffset--;
+      new_rangeParams.endGlobalOffset--;
 
       new_raw_text = removeEncodingIfPlainText(
         new_raw_text,
-        this.state.mimeType,
+        this.props.mimeType,
         this.enableHtml()
       );
 
       this.applyChangesToComponent(
         new_raw_text,
-        this.state.mimeType,
+        this.props.mimeType,
         new_rangeParams,
         this.props.useExpertMode,
         this.props.selectedTab
@@ -1675,6 +2114,11 @@ export default class MathRichInput extends React.Component {
       let new_raw_text = null;
       let new_rangeParams = { ...rangeParams };
 
+      if (new_rangeParams.startGlobalOffset) {
+        new_rangeParams.startGlobalOffset++;
+        new_rangeParams.endGlobalOffset++;
+      }
+
       if (this.enableHtml()) {
         new_raw_text = removeMarks(
           insertCharacterBeforeMarks(raw_text, "</p><p>")
@@ -1692,20 +2136,15 @@ export default class MathRichInput extends React.Component {
         new_rangeParams.endOffset++;
       }
 
-      //   console.log("About to apply new range params");
-      //   console.log(new_rangeParams);
-      //   console.log("Old nodes");
-      //   console.log(this.editableDiv.childNodes);
-
       new_raw_text = removeEncodingIfPlainText(
         new_raw_text,
-        this.state.mimeType,
+        this.props.mimeType,
         this.enableHtml()
       );
 
       this.applyChangesToComponent(
         new_raw_text,
-        this.state.mimeType,
+        this.props.mimeType,
         new_rangeParams,
         this.props.useExpertMode,
         this.props.selectedTab
@@ -1743,12 +2182,12 @@ export default class MathRichInput extends React.Component {
 
       new_raw_text = removeEncodingIfPlainText(
         new_raw_text,
-        this.state.mimeType,
+        this.props.mimeType,
         this.enableHtml()
       );
       this.applyChangesToComponent(
         new_raw_text,
-        this.state.mimeType,
+        this.props.mimeType,
         new_rangeParams,
         this.props.useExpertMode,
         this.props.selectedTab
@@ -1772,6 +2211,9 @@ export default class MathRichInput extends React.Component {
       );
       let new_raw_text = null;
       let new_rangeParams = { ...rangeParams };
+      new_rangeParams.startGlobalOffset++;
+      new_rangeParams.endGlobalOffset++;
+
       if (old_char === null) {
         new_raw_text = removeMarks(
           insertCharacterBeforeMarks(raw_text, new_char)
@@ -1790,12 +2232,12 @@ export default class MathRichInput extends React.Component {
 
       new_raw_text = removeEncodingIfPlainText(
         new_raw_text,
-        this.state.mimeType,
+        this.props.mimeType,
         this.enableHtml()
       );
       this.applyChangesToComponent(
         new_raw_text,
-        this.state.mimeType,
+        this.props.mimeType,
         new_rangeParams,
         this.props.useExpertMode,
         this.props.selectedTab
@@ -1814,6 +2256,10 @@ export default class MathRichInput extends React.Component {
     }
   };
 
+  focus = () => {
+    this.editableDiv.focus();
+  };
+
   handleFocus = (event) => {
     const { onFocus } = this.props;
     if (onFocus != null) {