@zzish/math-rich-input 0.1.26 → 0.1.28

package/dist/index.js

@@ -21007,7 +21007,7 @@ function addTextForNode(node, arrayOfText) {
       arrayOfText.push(useHtmlMath ? RAW_TEXT_MATH_END_TAG_HTML_MATH : RAW_TEXT_MATH_END_TAG_TEX);
       if (mark) arrayOfText.push(MARK$1);
     } else {
-      console.error("Cant render node in editable div: Unknown node type");
+      console.error("Can't render node in editable div: Unknown node type");
       console.log(node);
       console.log("Node.type:" + node.type);
       console.log("Node.tagName:" + node.tagName);
@@ -21032,8 +21032,11 @@ function elementToMarkedRawText(element) {
   var nodeToMark = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
   var offset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
   var useHtmlMath = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
-  // console.log("Node to mark:")
+  console.log("elementToMarkedRawText");
+  console.log(element.innerHTML);
+  if (element.innerHTML === "<p><br></p>") throw new Error("We are here"); // console.log("Node to mark:")
   // console.log(nodeToMark)
+
   var nodes = element.childNodes; // console.log(nodes)
 
   var result = [];
@@ -21348,6 +21351,7 @@ function findNodeAndOffsetForGlobalOffset(node, globalOffset) {
 
   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)
 
@@ -21387,8 +21391,37 @@ function findFirstTextNode(node) {
   }
 
   return null;
+}
+
+function findNodeAndOffsetForGlobalOffsetInEditableDiv(editableDiv, globalOffset) {
+  var result = {
+    offset: 0
+  };
+  findNodeAndOffsetForGlobalOffset(editableDiv, globalOffset, result);
+  console.log(result);
+
+  if (result.node === null) {
+    if (globalOffset > 0 && result.lastTextNode !== null) {
+      result.node = result.lastTextNode;
+      result.offset = result.lastTextNode.nodeValue.length;
+    } else {
+      console.warn("Unable to find node and offset for global offset: " + globalOffset);
+      console.log(editableDiv.innerHTML);
+      console.log(result);
+      result.node = findFirstTextNode(editableDiv);
+      result.offset = 0;
+    }
+  } // if (result.offset === 0 && 
+  //   result.node.nodeValue.length > 0 && 
+  //   nodeStartsWithSmallSpace(result.node)) {
+  //   result.offset = 1
+  // }
+
+
+  return result;
 } // https://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html
 
+
 function getRangeParams(editableDiv) {
   // console.log ("getRangeParams")
   // console.log("Inner html: "+editableDiv.innerHTML)
@@ -21469,36 +21502,20 @@ function setRangeParamsFromGlobalOffsets(editableDiv, params) {
 
   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)
-
-    if (!startResult.node || !endResult.node || !startResult.offset || !endResult.offset) {
-      console.log("Can't set range with start and end results");
-      console.log(startResult);
-      console.log(endResult);
-      throw new Error("Could not extract valid nodes and offsets from params");
-    }
-
-    if (startResult.offset === 0 && startResult.node.nodeValue.length > 0 && nodeStartsWithSmallSpace(startResult.node)) {
-      startResult.offset = 1;
+    var startResult = findNodeAndOffsetForGlobalOffsetInEditableDiv(editableDiv, params.startGlobalOffset);
+    var endResult = findNodeAndOffsetForGlobalOffsetInEditableDiv(editableDiv, params.endGlobalOffset);
+
+    if (startResult.node !== null) {
+      console.log("Setting range to start in node:");
+      console.log("  node type: " + startResult.node.nodeType);
+      console.log("  tag name: " + startResult.node.tagName);
+      console.log("  node value: " + startResult.node.nodeValue);
+      console.log("  offset:" + startResult.offset);
+    } else {
+      console.warn("Can't set range, null start node returned");
+      return;
     }
 
-    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);
@@ -21522,12 +21539,14 @@ function setRangeParams(editableDiv, params) {
     if (params === null || params === undefined) {
       console.error("Can't set range params: params === " + params);
       return;
-    }
+    } // New way of doing things
+
 
-    if (params.startGlobalOffset) {
+    if (params.startGlobalOffset !== null && params.startGlobalOffset !== undefined) {
       setRangeParamsFromGlobalOffsets(editableDiv, params);
       return;
-    }
+    } // Otherwise use the old way of doing things
+
 
     if (params.startNodeIndex === null || params.startNodeIndex === undefined) {
       console.error("Can't set range params: params.startNodeIndex === " + params.startNodeIndex);
@@ -22068,17 +22087,19 @@ 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("", _this2.getMimeType(false, false), _new_rangeParams, _this2.props.useExpertMode, _this2.props.selectedTab);
 
+        e.preventDefault();
         return;
       } // Treat backspace normally in the following situations
 
@@ -22164,11 +22185,14 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
       rangeParams.startNodeIndex;
       rangeParams.startOffset;
+      console.log("handleKeyDownArrowLeft");
+      console.log(rangeParams);
       var new_globalOffset = rangeParams.startGlobalOffset - 1;
       var new_rangeParams = {
         startGlobalOffset: new_globalOffset,
         endGlobalOffset: new_globalOffset
       };
+      console.log(new_rangeParams);
       e.preventDefault();
 
       _this2._setRangeParams(new_rangeParams);
@@ -22540,8 +22564,11 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
         if (_this2.handleKeyDownAccentHelper(e)) return; // Check if inserting character in element that starts with small space
 
-        if (e.key.length === 1 && params.startOffset === 0 && _this2.nodeStartsWithSmallSpace(startNode)) {
-          _this2.replaceNextLetter(e.key);
+        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");
+
+          _this2.insertAfterSmallSpace(e.key, params);
 
           e.preventDefault();
           return;
@@ -22639,8 +22666,9 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this2), "handleInput", function (event) {
       try {
-        // console.log("handleInput")
+        console.log("handleInput");
         var raw_text = elementToMarkedRawText(_this2.editableDiv, null, 0, _this2.enableHtml());
+        console.log("handleInput 2");
 
         var params = _this2._getRangeParams();
 
@@ -22944,8 +22972,10 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
         var end_pos = _this2.markedRawText.indexOf(MARK, start_pos + MARK.length);
 
-        var oldRangeParams = _this2.getOldRangeParams(); // Handle case of empty string returned
+        var oldRangeParams = _this2.getOldRangeParams();
 
+        console.log("Old range params");
+        console.log(oldRangeParams); // Handle case of empty string returned
 
         if (latex === "") {
           // console.log("Empty latex returned from equation editor")
@@ -23332,15 +23362,14 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
         var offset = rangeParams.endOffset;
         var raw_text = elementToMarkedRawText(_this2.editableDiv, node, offset, _this2.enableHtml());
+        console.log("Raw text before line insert");
+        console.log(raw_text);
+        console.log("Range params before line insert");
+        console.log(rangeParams);
         var new_raw_text = null;
 
         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>";
@@ -23348,6 +23377,11 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
           new_rangeParams.startOffset = 0;
           new_rangeParams.endNodeIndex = rangeParams.endNodeIndex + 1;
           new_rangeParams.endOffset = 0;
+
+          if (new_rangeParams.startGlobalOffset) {
+            new_rangeParams.startGlobalOffset++;
+            new_rangeParams.endGlobalOffset++;
+          }
         } else {
           new_raw_text = removeMarks(insertCharacterBeforeMarks(raw_text, "\n"));
           new_rangeParams.startOffset++;
@@ -23355,30 +23389,10 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         }
 
         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), "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.props.mimeType, _this2.enableHtml());
+        console.log("New raw text after line insert");
+        console.log(new_raw_text);
+        console.log("New range params after line insert");
+        console.log(new_rangeParams);
 
         _this2.applyChangesToComponent(new_raw_text, _this2.props.mimeType, new_rangeParams, _this2.props.useExpertMode, _this2.props.selectedTab);
       } catch (error) {
@@ -23390,22 +23404,29 @@ 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);
-
-        new_rangeParams.startGlobalOffset++;
-        new_rangeParams.endGlobalOffset++;
+        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.props.mimeType, _this2.enableHtml());
 
@@ -23645,6 +23666,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() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zzish/math-rich-input",
-  "version": "0.1.26",
+  "version": "0.1.28",
   "description": "React component for user to enter rich text with embedded math equations.",
   "repository": {
     "type": "git",

package/src/MathRichInput.jsx

@@ -461,11 +461,12 @@ export default class MathRichInput extends React.Component {
     }
 
     if (deleteToEmpty) {
+      console.log("deleteToEmpty")
       let new_rangeParams = {
         startNodeIndex: 0,
-        startOffset: 0,
+        startOffset: 1,
         endNodeIndex: 0,
-        endOffset: 0,
+        endOffset: 1,
         startGlobalOffset: 0,
         endGlobalOffset: 0,
       };
@@ -476,6 +477,7 @@ export default class MathRichInput extends React.Component {
         this.props.useExpertMode,
         this.props.selectedTab
       );
+      e.preventDefault()
       return;
     }
 
@@ -588,11 +590,15 @@ export default class MathRichInput extends React.Component {
     let index = rangeParams.startNodeIndex;
     let offset = rangeParams.startOffset;
 
+    console.log("handleKeyDownArrowLeft")
+    console.log(rangeParams)
     let new_globalOffset = rangeParams.startGlobalOffset - 1;
+
     let new_rangeParams = {
       startGlobalOffset: new_globalOffset,
       endGlobalOffset: new_globalOffset,
     };
+    console.log(new_rangeParams)
     e.preventDefault();
     this._setRangeParams(new_rangeParams);
     return;
@@ -1193,15 +1199,15 @@ export default class MathRichInput extends React.Component {
         }
       }
 
-      if (this.handleKeyDownAccentHelper(e)) return;
+      if (this.handleKeyDownAccentHelper(e)) 
+        return;
 
       // Check if inserting character in element that starts with small space
-      if (
-        e.key.length === 1 &&
-        params.startOffset === 0 &&
-        this.nodeStartsWithSmallSpace(startNode)
-      ) {
-        this.replaceNextLetter(e.key);
+      if (e.key.length === 1 && // ie, it's not something like "arrowLeft"
+         params.startOffset === 0 &&
+         this.nodeStartsWithSmallSpace(startNode)) {
+        console.log("Handling character input at start of text node with small space")
+        this.insertAfterSmallSpace(e.key, params);
         e.preventDefault();
         return;
       }
@@ -1305,13 +1311,14 @@ export default class MathRichInput extends React.Component {
 
   handleInput = (event) => {
     try {
-      // console.log("handleInput")
+      console.log("handleInput")
       let raw_text = elementToMarkedRawText(
         this.editableDiv,
         null,
         0,
         this.enableHtml()
       );
+      console.log("handleInput 2")
       const params = this._getRangeParams();
       if (params === null || params === undefined)
         console.error("Could not get range params from input field");
@@ -1658,6 +1665,8 @@ export default class MathRichInput extends React.Component {
       let start_pos = this.markedRawText.indexOf(MARK);
       let end_pos = this.markedRawText.indexOf(MARK, start_pos + MARK.length);
       let oldRangeParams = this.getOldRangeParams();
+      console.log("Old range params")
+      console.log(oldRangeParams)
 
       // Handle case of empty string returned
       if (latex === "") {
@@ -1910,6 +1919,7 @@ export default class MathRichInput extends React.Component {
       console.error(error);
     }
   };
+
   // https://stackoverflow.com/questions/6690752/insert-html-at-caret-in-a-contenteditable-div
   pasteHtmlAtCaret = (html, selectPastedContent) => {
     var sel, range;
@@ -1957,6 +1967,7 @@ export default class MathRichInput extends React.Component {
       }
     }
   };
+
   insertHtml = (new_html) => {
     try {
       // console.log("New html: "+new_html)
@@ -2111,14 +2122,15 @@ export default class MathRichInput extends React.Component {
         offset,
         this.enableHtml()
       );
+
+      console.log("Raw text before line insert")
+      console.log(raw_text)
+      console.log("Range params before line insert")
+      console.log(rangeParams)
+
       let new_raw_text = null;
       let new_rangeParams = { ...rangeParams };
 
-      if (new_rangeParams.startGlobalOffset) {
-        new_rangeParams.startGlobalOffset++;
-        new_rangeParams.endGlobalOffset++;
-      }
-
       if (this.enableHtml()) {
         new_raw_text = removeMarks(
           insertCharacterBeforeMarks(raw_text, "</p><p>")
@@ -2130,6 +2142,11 @@ export default class MathRichInput extends React.Component {
         new_rangeParams.startOffset = 0;
         new_rangeParams.endNodeIndex = rangeParams.endNodeIndex + 1;
         new_rangeParams.endOffset = 0;
+        if (new_rangeParams.startGlobalOffset) {
+          new_rangeParams.startGlobalOffset++;
+          new_rangeParams.endGlobalOffset++;
+        }
+  
       } else {
         new_raw_text = removeMarks(insertCharacterBeforeMarks(raw_text, "\n"));
         new_rangeParams.startOffset++;
@@ -2141,6 +2158,12 @@ export default class MathRichInput extends React.Component {
         this.props.mimeType,
         this.enableHtml()
       );
+      
+      console.log("New raw text after line insert")
+      console.log(new_raw_text)
+      console.log("New range params after line insert")
+      console.log(new_rangeParams)
+
 
       this.applyChangesToComponent(
         new_raw_text,
@@ -2154,37 +2177,40 @@ export default class MathRichInput extends React.Component {
     }
   };
 
-  replaceNextLetter = (new_char) => {
+  insertAfterSmallSpace(new_char, rangeParams) {
     try {
-      let rangeParams = this._getRangeParams();
-      let node = this._findNodeWithIndex(rangeParams.endNodeIndex);
-      let offset = rangeParams.endOffset + 1; // next letter
+      if (rangeParams === null || rangeParams === undefined)
+        rangeParams = this._getRangeParams();
 
+      if (rangeParams.startOffset !== 0)
+        console.warn("Unexpected startOffset "+rangeParams.startOffset+" in insertAfterSmallSpace")
+      
+      let node = this._findNodeWithIndex(rangeParams.startNodeIndex);
       let raw_text = elementToMarkedRawText(
-        this.editableDiv,
-        node,
-        offset,
-        this.enableHtml()
-      );
-      let new_raw_text = null;
-      let new_rangeParams = { ...rangeParams };
-      new_raw_text = removeMarks(
-        insertCharacterBeforeMarks(raw_text, new_char)
-      );
-      if (
-        rangeParams.startNodeIndex === rangeParams.endNodeIndex &&
-        rangeParams.startOffset === rangeParams.endOffset
-      )
-        new_rangeParams.startOffset =
-          new_rangeParams.startOffset + new_char.length + 1;
-      new_rangeParams.endOffset =
-        new_rangeParams.endOffset + new_char.length + 1;
+          this.editableDiv,
+          node,
+          1, // after small space
+          this.enableHtml()
+        );
+
+      let new_raw_text = removeMarks(
+        insertCharacterBeforeMarks(raw_text, new_char))
 
+      let new_rangeParams = {
+        startNodeIndex:rangeParams.startNodeIndex,
+        startNodeOffset:1+new_char.length,
+        endNodeIndex:rangeParams.startNodeIndex,
+        endNodeOffset:1+new_char.length,
+        startGlobalOffset:rangeParams.startGlobalOffset+new_char.length,
+        endGlobalOffset:rangeParams.endGlobalOffset+new_char.length,
+      }
+      
       new_raw_text = removeEncodingIfPlainText(
         new_raw_text,
         this.props.mimeType,
         this.enableHtml()
       );
+      
       this.applyChangesToComponent(
         new_raw_text,
         this.props.mimeType,
@@ -2200,8 +2226,8 @@ export default class MathRichInput extends React.Component {
   insertAccentLetter = (event, old_char, new_char) => {
     try {
       let rangeParams = this._getRangeParams();
-      let node = this._findNodeWithIndex(rangeParams.endNodeIndex);
-      let offset = rangeParams.endOffset;
+      let node = this._findNodeWithIndex(rangeParams.startNodeIndex);
+      let offset = rangeParams.startOffset;
 
       let raw_text = elementToMarkedRawText(
         this.editableDiv,
@@ -2209,32 +2235,31 @@ export default class MathRichInput extends React.Component {
         offset,
         this.enableHtml()
       );
+
       let new_raw_text = null;
-      let new_rangeParams = { ...rangeParams };
-      new_rangeParams.startGlobalOffset++;
-      new_rangeParams.endGlobalOffset++;
+      let new_rangeParams = null;
 
-      if (old_char === null) {
-        new_raw_text = removeMarks(
-          insertCharacterBeforeMarks(raw_text, new_char)
-        );
-        if (
-          rangeParams.startNodeIndex === rangeParams.endNodeIndex &&
-          rangeParams.startOffset === rangeParams.endOffset
-        )
-          new_rangeParams.startOffset =
-            new_rangeParams.startOffset + new_char.length;
-        new_rangeParams.endOffset = new_rangeParams.endOffset + new_char.length;
-      } else
-        new_raw_text = removeMarks(
-          replaceCharacterBeforeMarks(raw_text, new_char)
-        );
+      if (old_char === null) { // insert new char
+        new_raw_text = removeMarks(insertCharacterBeforeMarks(raw_text, new_char));
+        new_rangeParams = {
+          startNodeIndex:rangeParams.startNodeIndex,
+          startOffset:rangeParams.startOffset + new_char.length,
+          endNodeIndex:rangeParams.startNodeIndex,
+          endOffset:rangeParams.startOffset + new_char.length,
+          startGlobalOffset:rangeParams.startGlobalOffset + new_char.length,
+          endGlobalOffset:rangeParams.startGlobalOffset + new_char.length
+        }
+      } else { // replace old char
+        new_raw_text = removeMarks(replaceCharacterBeforeMarks(raw_text, new_char));
+        new_rangeParams = { ...rangeParams };
+      }
 
       new_raw_text = removeEncodingIfPlainText(
         new_raw_text,
         this.props.mimeType,
         this.enableHtml()
       );
+      
       this.applyChangesToComponent(
         new_raw_text,
         this.props.mimeType,

package/src/mathRichInputHelper.js

@@ -360,7 +360,7 @@ function addTextForNode(node, arrayOfText, nodeToMark=null, offset=0, useHtmlMat
       if (mark)
         arrayOfText.push(MARK)
     } else {
-      console.error("Cant render node in editable div: Unknown node type")
+      console.error("Can't render node in editable div: Unknown node type")
       console.log(node)
       console.log("Node.type:"+node.type)
       console.log("Node.tagName:"+node.tagName)
@@ -382,6 +382,10 @@ function addTextForNode(node, arrayOfText, nodeToMark=null, offset=0, useHtmlMat
 // Marked nodes are useful if a node may need to be deleted and allows the node to be
 // deleted by stripping it out of the raw text. 
 export function elementToMarkedRawText(element, nodeToMark=null, offset=0, useHtmlMath=true) {
+  console.log("elementToMarkedRawText")
+  console.log(element.innerHTML)
+  if (element.innerHTML === "<p><br></p>")
+    throw new Error ("We are here")
   // console.log("Node to mark:")
   // console.log(nodeToMark)
   let nodes = element.childNodes
@@ -729,6 +733,7 @@ function findNodeAndOffsetForGlobalOffset(node, globalOffset, result=null) {
   }
   if (isTextNode(node)) {
     result.node = node
+    result.lastTextNode = node
     result.offset += node.nodeValue.length
     if (nodeStartsWithSmallSpace(node))
       result.offset -= 1
@@ -756,7 +761,7 @@ function findNodeAndOffsetForGlobalOffset(node, globalOffset, result=null) {
     result.node = null
     result.offset ++
   }
-    return false;
+  return false;
 }
 
 export function findFirstTextNode(node) {
@@ -773,6 +778,33 @@ export function findFirstTextNode(node) {
   return null
 }
 
+function findNodeAndOffsetForGlobalOffsetInEditableDiv(editableDiv, globalOffset) {
+  let result = {offset:0}
+  findNodeAndOffsetForGlobalOffset(editableDiv, globalOffset, result)
+  console.log(result)
+
+  if (result.node === null) {
+    if (globalOffset > 0 && result.lastTextNode !== null) {
+      result.node = result.lastTextNode
+      result.offset = result.lastTextNode.nodeValue.length
+    } else {
+      console.warn("Unable to find node and offset for global offset: "+globalOffset)
+      console.log(editableDiv.innerHTML)
+      console.log(result)
+      result.node = findFirstTextNode(editableDiv)
+      result.offset = 0
+    }
+  }
+
+  // if (result.offset === 0 && 
+  //   result.node.nodeValue.length > 0 && 
+  //   nodeStartsWithSmallSpace(result.node)) {
+  //   result.offset = 1
+  // }
+
+  return result
+}
+
 // https://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html
 export function getRangeParams(editableDiv) {
   // console.log ("getRangeParams")
@@ -851,34 +883,23 @@ function setRangeParamsFromGlobalOffsets(editableDiv, params) {
   try {
     if (params === null || params === undefined)
       throw new Error("Can't set range params: params === "+params)
-    let startResult = {offset:0}
-    findNodeAndOffsetForGlobalOffset(editableDiv, params.startGlobalOffset, startResult)
-    // console.log(startResult.node.nodeType+":"+startResult.node.tagName+":"+
-    //             startResult.node.nodeValue+":"+startResult.offset)
-    let endResult = {offset:0}
-    findNodeAndOffsetForGlobalOffset(editableDiv, params.endGlobalOffset, endResult)
-    // console.log(endResult.node.nodeType+":"+endResult.node.tagName+":"+
-    //             endResult.node.nodeValue+":"+endResult.offset)
-    if (!startResult.node || !endResult.node ||
-        !startResult.offset || !endResult.offset) {
-      console.log("Can't set range with start and end results")
-      console.log(startResult)
-      console.log(endResult) 
-      throw new Error("Could not extract valid nodes and offsets from params")
-    }
-    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
+    let startResult = 
+      findNodeAndOffsetForGlobalOffsetInEditableDiv(editableDiv, params.startGlobalOffset)
+
+    let endResult = 
+      findNodeAndOffsetForGlobalOffsetInEditableDiv(editableDiv, params.endGlobalOffset)
+
+    if (startResult.node !== null) {
+      console.log("Setting range to start in node:")
+      console.log("  node type: "+startResult.node.nodeType)
+      console.log("  tag name: "+startResult.node.tagName)
+      console.log("  node value: "+startResult.node.nodeValue)
+      console.log("  offset:"+startResult.offset)
+    } else {
+      console.warn("Can't set range, null start node returned")
+      return      
     }
-    // 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);
@@ -903,12 +924,15 @@ export function setRangeParams(editableDiv, params) {
       console.error("Can't set range params: params === "+params)
       return
     }
-      
-    if (params.startGlobalOffset) {
+    
+    // New way of doing things
+    if (params.startGlobalOffset !== null && params.startGlobalOffset !== undefined) {
       setRangeParamsFromGlobalOffsets(editableDiv, params)
       return
     }
-      
+
+    // Otherwise use the old way of doing things
+
     if (params.startNodeIndex === null || params.startNodeIndex === undefined) {
       console.error("Can't set range params: params.startNodeIndex === "+params.startNodeIndex)
       return