@zzish/math-rich-input 0.1.28 → 0.1.30

package/dist/index.js

@@ -21352,9 +21352,16 @@ function findNodeAndOffsetForGlobalOffset(node, globalOffset) {
   if (isTextNode(node)) {
     result.node = node;
     result.lastTextNode = node;
+    console.log("Found text node \'" + node.nodeValue + "\' of length " + node.nodeValue.length);
+    console.log("result.offset was: " + result.offset);
     result.offset += node.nodeValue.length;
-    if (nodeStartsWithSmallSpace(node)) result.offset -= 1; // console.log("result.offset now: "+result.offset)
 
+    if (nodeStartsWithSmallSpace(node)) {
+      console.log("Text node starts with small space");
+      result.offset -= 1;
+    }
+
+    console.log("result.offset now: " + result.offset);
     return false;
   }
 
@@ -21374,8 +21381,10 @@ function findNodeAndOffsetForGlobalOffset(node, globalOffset) {
   }
 
   if (node.nodeType === 1 && node.tagName === "P") {
+    console.log("Leaving p node");
     result.node = null;
     result.offset++;
+    console.log("result.offset now: " + result.offset);
   }
 
   return false;
@@ -21397,6 +21406,7 @@ function findNodeAndOffsetForGlobalOffsetInEditableDiv(editableDiv, globalOffset
   var result = {
     offset: 0
   };
+  console.log("Finding node and offset within: " + editableDiv.outerHTML);
   findNodeAndOffsetForGlobalOffset(editableDiv, globalOffset, result);
   console.log(result);
 
@@ -21411,20 +21421,28 @@ function findNodeAndOffsetForGlobalOffsetInEditableDiv(editableDiv, globalOffset
       result.node = findFirstTextNode(editableDiv);
       result.offset = 0;
     }
-  } // if (result.offset === 0 && 
-  //   result.node.nodeValue.length > 0 && 
-  //   nodeStartsWithSmallSpace(result.node)) {
-  //   result.offset = 1
-  // }
+  }
 
+  if (result.offset === 0 && result.node.nodeValue.length > 0 && nodeStartsWithSmallSpace(result.node)) {
+    result.offset = 1;
+  }
+
+  if (result.offset > result.node.nodeValue.length) {
+    console.warn("Unexpected offset when converting global offset to node and offset");
+    console.log("Global offset: " + globalOffset);
+    console.log("Result:");
+    console.log(result);
+    console.log("result.offset  > result.node.nodeValue.length");
+    result.offset = result.node.nodeValue.length;
+  }
 
   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)
+  console.log("getRangeParams"); // console.log("Inner html: "+editableDiv.innerHTML)
+
   var isSupported = typeof window.getSelection !== "undefined";
 
   if (!isSupported) {
@@ -21543,17 +21561,18 @@ function setRangeParams(editableDiv, params) {
 
 
     if (params.startGlobalOffset !== null && params.startGlobalOffset !== undefined) {
+      console.log("Setting range from global offsets");
       setRangeParamsFromGlobalOffsets(editableDiv, params);
       return;
     } // Otherwise use the old way of doing things
 
 
+    console.log("Setting range from node index and local offset");
+
     if (params.startNodeIndex === null || params.startNodeIndex === undefined) {
       console.error("Can't set range params: params.startNodeIndex === " + params.startNodeIndex);
       return;
-    } // console.log("Setting cursor to range params: "+params.startNodeIndex+"->"+params.startOffset)
-    // console.log(params)
-
+    }
 
     if (params.startNodeIndex < 0) {
       console.error("Can't set range params: params.startNodeIndex < 0");
@@ -21563,34 +21582,32 @@ function setRangeParams(editableDiv, params) {
     var nodes = editableDiv.childNodes;
 
     if (params.startNodeIndex === 0 && params.startOffset === 0 && nodes.length === 0) {
-      // console.log("Not setting range params")
       return;
-    } // console.log("Node["+params.startNodeIndex+"]:")
-    // console.log(nodes[params.startNodeIndex])
+    } // Set the offsets within the nodes
 
 
     var startOffset = params.startOffset;
     var endOffset = params.endOffset; // Handle special case of auto inserted SMALL CHAR at beginning of input
+    // TODO This sectin may no longer be neceesary and may be introducing a bug
 
     if (params.startNodeIndex === 0 && params.startOffset === 1 && isSmallSpace(nodes[0])) startOffset = 0;
-    if (params.endNodeIndex === 0 && params.endOffset === 1 && isSmallSpace(nodes[0])) endOffset = 0;
+    if (params.endNodeIndex === 0 && params.endOffset === 1 && isSmallSpace(nodes[0])) endOffset = 0; // Find the nodes
+
     var startNode = findNodeWithIndex(editableDiv, params.startNodeIndex);
-    var endNode = findNodeWithIndex(editableDiv, params.endNodeIndex); // Lets make sure we are setting 
-    // if (params.startNodeIndex !== 0 &&
-    //   params.startOffset === 0) {
-    //   if (getNodeText(startNode).charAt(0) === SMALL_SPACE)
-    //     startOffset = SMALL_SPACE.length
-    // }
-    // if (params.endNodeIndex !== 0 &&
-    //   params.endOffset === 0) {
-    //   if (getNodeText(endNode).charAt(0) === SMALL_SPACE)
-    //     endOffset = SMALL_SPACE.length
-    // }
-    // console.log("End: "+params.endNodeIndex+"->"+endOffset)
-    // Set range in document
+    var endNode = findNodeWithIndex(editableDiv, params.endNodeIndex);
+    console.log("Setting range to start in node:");
+    console.log("  node type: " + startNode.nodeType);
+    console.log("  tag name: " + startNode.tagName);
+    console.log("  node value: " + startNode.nodeValue);
+    console.log("  offset:" + startOffset);
+    console.log("Setting range to end in node:");
+    console.log("  node type: " + endNode.nodeType);
+    console.log("  tag name: " + endNode.tagName);
+    console.log("  node value: " + endNode.nodeValue);
+    console.log("  offset:" + endOffset); // Set range in document
 
     if (startNode === null) {
-      console.error("Could not set range to start node with index " + params.startNodeIndex);
+      console.warn("Could not set range to start node with index " + params.startNodeIndex);
       startNode = findFirstTextNode(editableDiv);
       startOffset = 0;
     }
@@ -21606,7 +21623,7 @@ function setRangeParams(editableDiv, params) {
     }
 
     if (endNode === null) {
-      console.error("Could not set range to end node with index " + params.endNodeIndex);
+      console.warn("Could not set range to end node with index " + params.endNodeIndex);
       endNode = findFirstTextNode(editableDiv);
       endOffset = 0;
     }
@@ -21622,11 +21639,17 @@ function setRangeParams(editableDiv, params) {
     }
 
     new_range = document.createRange();
+
+    if (startOffset > startNode.nodeValue.length) {
+      console.warn("endOffset > endNode.nodeValue.length when setting range: " + startOffset + " > " + startNode.nodeValue.length + " - " + stateNode.nodeType + " - " + startNode.nodeValue);
+      startOffset = startNode.nodeValue.length;
+    }
+
     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;
+    if (endOffset > endNode.nodeValue.length) {
+      console.warn("endOffset > endNode.nodeValue.length when setting range: " + endOffset + " > " + endNode.nodeValue.length + " - " + endNode.nodeType + " - " + endNode.nodeValue);
+      endOffset = endNode.nodeValue.length;
     }
 
     new_range.setEnd(endNode, endOffset); // console.log("Setting range")
@@ -21956,18 +21979,12 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this2), "applyChangesToComponent", function (value, mimeType, rangeParams, isExpertMode, selectedTab) {
-      // if (this.props.outputTex !== null && this.props.outputTex !== undefined && this.props.outputTex) {
-      //   if (mimeType === MIME_TYPE_HTML) {
-      //     console.warn("Html found when outputTex=true")
-      //     value = convertHtmlToPlainText(value)
-      //     mimeType = MIME_TYPE_PLAIN_TEXT
-      //   } else if (mimeType === MIME_TYPE_ZZISH_HTML_MATH) {
-      //     value = convertHtmlMathToTex(value)
-      //     mimeType = MIME_TYPE_TEX
-      //   }
-      // }
       // rangeParams, isExpertMode and selectedTab can be null, in which case we will set them
-      if (rangeParams === null) rangeParams = _this2.lastSetRangeParams;else _this2.rangeParamsToSetAfterComponentUpdate = rangeParams;
+      if (rangeParams === null) rangeParams = _this2.lastSetRangeParams;
+      _this2.afterComponentUpdateData = {
+        rangeParams: rangeParams,
+        value: value
+      };
       var options = _this2.props.options || DEFAULT_OPTIONS;
       if (isExpertMode === null) isExpertMode = options.isExpertMode;
       if (selectedTab === null) selectedTab = options.selectedTab; // Add this to the history
@@ -22187,17 +22204,27 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       rangeParams.startOffset;
       console.log("handleKeyDownArrowLeft");
       console.log(rangeParams);
-      var new_globalOffset = rangeParams.startGlobalOffset - 1;
-      var new_rangeParams = {
-        startGlobalOffset: new_globalOffset,
-        endGlobalOffset: new_globalOffset
-      };
+      var new_globalOffset = rangeParams.endGlobalOffset - 1;
+      var new_rangeParams = null;
+
+      if (e.shiftKey && new_globalOffset > rangeParams.startGlobalOffset) {
+        new_rangeParams = {
+          startGlobalOffset: rangeParams.startGlobalOffset,
+          endGlobalOffset: new_globalOffset
+        };
+      } else {
+        new_rangeParams = {
+          startGlobalOffset: new_globalOffset,
+          endGlobalOffset: new_globalOffset
+        };
+      }
+
       console.log(new_rangeParams);
       e.preventDefault();
 
       _this2._setRangeParams(new_rangeParams);
 
-      return; // console.log("Old: "+index+"->"+offset)
+      return;
     });
 
     _defineProperty(_assertThisInitialized(_this2), "handleKeyDownArrowRight", function (e) {
@@ -22206,11 +22233,21 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
       rangeParams.startNodeIndex;
       rangeParams.startOffset;
-      var new_globalOffset = rangeParams.startGlobalOffset + 1;
-      var new_rangeParams = {
-        startGlobalOffset: new_globalOffset,
-        endGlobalOffset: new_globalOffset
-      };
+      var new_rangeParams = null;
+      var new_globalOffset = rangeParams.endGlobalOffset + 1;
+
+      if (e.shiftKey && new_globalOffset > rangeParams.startGlobalOffset) {
+        new_rangeParams = {
+          startGlobalOffset: rangeParams.startGlobalOffset,
+          endGlobalOffset: new_globalOffset
+        };
+      } else {
+        new_rangeParams = {
+          startGlobalOffset: new_globalOffset,
+          endGlobalOffset: new_globalOffset
+        };
+      }
+
       e.preventDefault();
 
       _this2._setRangeParams(new_rangeParams);
@@ -22630,30 +22667,30 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
           if (_index >= 0) {
             if (isKatexNode(_this2._findNodeWithIndex(_index))) {
-              var _new_index4 = 0;
-              var _new_offset4 = 0;
+              var _new_index = 0;
+              var _new_offset = 0;
 
               if (_index - 1 >= 0) {
-                _new_index4 = _index - 1;
-                _new_offset4 = getNodeTextLength(_this2._findNodeWithIndex(_new_index4));
+                _new_index = _index - 1;
+                _new_offset = getNodeTextLength(_this2._findNodeWithIndex(_new_index));
 
-                if (_new_offset4 < 0) {
+                if (_new_offset < 0) {
                   console.error("Failed to get node text length");
-                  _new_offset4 = 0;
+                  _new_offset = 0;
                 }
               } else {
-                _new_index4 = _index + 1;
-                _new_offset4 = SMALL_SPACE_LENGTH;
+                _new_index = _index + 1;
+                _new_offset = SMALL_SPACE_LENGTH;
               }
 
-              var _new_rangeParams7 = {
-                startNodeIndex: _new_index4,
-                startOffset: _new_offset4,
-                endNodeIndex: _new_index4,
-                endOffset: _new_offset4
+              var _new_rangeParams2 = {
+                startNodeIndex: _new_index,
+                startOffset: _new_offset,
+                endNodeIndex: _new_index,
+                endOffset: _new_offset
               }; // console.log(new_rangeParams)
 
-              _this2._setRangeParams(_new_rangeParams7);
+              _this2._setRangeParams(_new_rangeParams2);
             }
           }
         }
@@ -22690,6 +22727,8 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this2), "updateActiveButtons", function () {
       try {
+        console.log("updateActiveButtons");
+
         var rangeParams = _this2._getRangeParams();
 
         if (rangeParams === null || rangeParams === undefined) {
@@ -23000,14 +23039,14 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
             }
           }
 
-          var _new_rangeParams8 = {
+          var _new_rangeParams3 = {
             startNodeIndex: new_index,
             startOffset: new_offset,
             endNodeIndex: new_index,
             endOffset: new_offset
           };
 
-          _this2.setOldRangeParams(_new_rangeParams8);
+          _this2.setOldRangeParams(_new_rangeParams3);
 
           var _nodeCounts = _this2._countNodeTypes();
 
@@ -23015,7 +23054,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_rangeParams8, _this2.props.useExpertMode, _this2.props.selectedTab);
+          _this2.applyChangesToComponent(_new_raw_text, _mimeType, _new_rangeParams3, _this2.props.useExpertMode, _this2.props.selectedTab);
 
           _this2.setState({
             showEquationEditor: false
@@ -23521,7 +23560,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     };
     _this2.moveCursorOnInsert = false; // Elements defining the current state of range
 
-    _this2.rangeParamsToSetAfterComponentUpdate = null; // Set this to update the selection after rendering
+    _this2.afterComponentUpdateData = null; // Set this to update the selection after rendering
 
     _this2.lastSetRangeParmas = null; // This is set automatically each time the range params are set with setRangeParams
 
@@ -23656,10 +23695,12 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
       try {
-        if (this.rangeParamsToSetAfterComponentUpdate !== null && this.rangeParamsToSetAfterComponentUpdate !== undefined) {
-          this._setRangeParams(this.rangeParamsToSetAfterComponentUpdate);
+        console.log("componentDidUpdate");
+
+        if (this.afterComponentUpdateData !== null && this.afterComponentUpdateData !== undefined && this.afterComponentUpdateData.value === this.props.value) {
+          this._setRangeParams(this.afterComponentUpdateData.rangeParams);
 
-          this.rangeParamsToSetAfterComponentUpdate = null;
+          this.afterComponentUpdateData = null;
           this.updateActiveButtons();
         }
       } catch (error) {

package/dist/math-rich-input.css

@@ -78,6 +78,136 @@
   padding: 2px;
   margin: 0px 2px;
 }
+/* Note that the top left position of the toolbar is set programatically in componentDidMount */
+
+.Toolbar {
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  height: 42px;
+  background-color: white;
+  border: 1px solid #d0d0d0;
+  border-radius: 5px;
+  box-shadow: 1px 1px 5px #a0a0a0;
+  animation: 0.5s fadeIn1;
+  animation-fill-mode: forwards;
+}
+
+@keyframes fadeIn1 {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.Toolbar-button {
+  font-family: sans-serif;
+  font-size: 16px;
+  width: 40px;
+  height: 36px;
+  background-color: white;
+  border-radius: 5px;
+  border: 0px;
+  padding: 1px;
+  margin: 2px;
+}
+
+.Toolbar-button:hover {
+  color: white;
+  background: #663676;
+  cursor: pointer;
+}
+
+.Toolbar-button:active {
+  background: #808080;
+  color: white;
+  cursor: pointer;
+}
+
+.TB-narrow {
+  width: 30px;
+}
+
+.TB-wide {
+  width: 46px;
+}
+
+.TB-selected {
+  background: #d0d0d0;
+  color: black;
+  cursor: pointer;
+  animation: 0.2s TB-fadeIn;
+  animation-fill-mode: forwards;
+}
+
+.TB-selected:hover {
+  color: white;
+  background: #663676;
+  cursor: pointer;
+}
+
+@keyframes TB-fadeIn {
+  00% {
+    background: white;
+  }
+  100% {
+    background: #d0d0d0;
+  }
+}
+
+/* Tooltip text */
+.Toolbar-button .tooltiptext {
+  font-weight: normal;
+  visibility: hidden;
+  width: 100px;
+  background-color: #222;
+  color: #fff;
+  /*font-weight: bold;*/
+  font-size: 12px;
+  text-align: center;
+  padding: 4px 10px;
+  border-radius: 6px;
+
+  /* Position the tooltip text - see examples below! */
+  position: absolute;
+  z-index: 2;
+  top: -90%; /* Must leave a small gap between tooltip and button */
+  left: 50px;
+
+  /* transform: translate (50%,0%); */
+}
+
+/* Show the tooltip text when you mouse over the tooltip container */
+.Toolbar-button:hover .tooltiptext {
+  animation: 0.8s fadeIn2;
+  animation-fill-mode: forwards;
+  visibility: visible;
+  /* width: 100px; */
+  /* top: -90%; */ /* Must leave a small gap between tooltip and button */
+  /* left: 20%; */
+  /* margin-left: -50px; */
+}
+
+@keyframes fadeIn2 {
+  00% {
+    opacity: 0;
+  }
+  70% {
+    opacity: 0;
+  }
+  100% {
+    visibility: visible;
+    opacity: 0.9;
+  }
+}
+
+/* .tooltip {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black; /* If you want dots under the hoverable text 
+} */
 .EquationEditorModal-background {
   position: fixed;
   top: 0;
@@ -233,136 +363,6 @@
 .EquationEditorModal .slider.round:before {
   border-radius: 50%;
 }
-/* Note that the top left position of the toolbar is set programatically in componentDidMount */
-
-.Toolbar {
-  position: absolute;
-  z-index: 1;
-  display: flex;
-  height: 42px;
-  background-color: white;
-  border: 1px solid #d0d0d0;
-  border-radius: 5px;
-  box-shadow: 1px 1px 5px #a0a0a0;
-  animation: 0.5s fadeIn1;
-  animation-fill-mode: forwards;
-}
-
-@keyframes fadeIn1 {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-.Toolbar-button {
-  font-family: sans-serif;
-  font-size: 16px;
-  width: 40px;
-  height: 36px;
-  background-color: white;
-  border-radius: 5px;
-  border: 0px;
-  padding: 1px;
-  margin: 2px;
-}
-
-.Toolbar-button:hover {
-  color: white;
-  background: #663676;
-  cursor: pointer;
-}
-
-.Toolbar-button:active {
-  background: #808080;
-  color: white;
-  cursor: pointer;
-}
-
-.TB-narrow {
-  width: 30px;
-}
-
-.TB-wide {
-  width: 46px;
-}
-
-.TB-selected {
-  background: #d0d0d0;
-  color: black;
-  cursor: pointer;
-  animation: 0.2s TB-fadeIn;
-  animation-fill-mode: forwards;
-}
-
-.TB-selected:hover {
-  color: white;
-  background: #663676;
-  cursor: pointer;
-}
-
-@keyframes TB-fadeIn {
-  00% {
-    background: white;
-  }
-  100% {
-    background: #d0d0d0;
-  }
-}
-
-/* Tooltip text */
-.Toolbar-button .tooltiptext {
-  font-weight: normal;
-  visibility: hidden;
-  width: 100px;
-  background-color: #222;
-  color: #fff;
-  /*font-weight: bold;*/
-  font-size: 12px;
-  text-align: center;
-  padding: 4px 10px;
-  border-radius: 6px;
-
-  /* Position the tooltip text - see examples below! */
-  position: absolute;
-  z-index: 2;
-  top: -90%; /* Must leave a small gap between tooltip and button */
-  left: 50px;
-
-  /* transform: translate (50%,0%); */
-}
-
-/* Show the tooltip text when you mouse over the tooltip container */
-.Toolbar-button:hover .tooltiptext {
-  animation: 0.8s fadeIn2;
-  animation-fill-mode: forwards;
-  visibility: visible;
-  /* width: 100px; */
-  /* top: -90%; */ /* Must leave a small gap between tooltip and button */
-  /* left: 20%; */
-  /* margin-left: -50px; */
-}
-
-@keyframes fadeIn2 {
-  00% {
-    opacity: 0;
-  }
-  70% {
-    opacity: 0;
-  }
-  100% {
-    visibility: visible;
-    opacity: 0.9;
-  }
-}
-
-/* .tooltip {
-  position: relative;
-  display: inline-block;
-  border-bottom: 1px dotted black; /* If you want dots under the hoverable text 
-} */
 /* Note that the top left position of the accent bar is set programatically in componentDidMount */
 
 .AccentBar {

package/package.json

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

package/src/MathRichInput.jsx

@@ -194,7 +194,7 @@ export default class MathRichInput extends React.Component {
     this.moveCursorOnInsert = false;
 
     // Elements defining the current state of range
-    this.rangeParamsToSetAfterComponentUpdate = null; // Set this to update the selection after rendering
+    this.afterComponentUpdateData = null; // Set this to update the selection after rendering
     this.lastSetRangeParmas = null; // This is set automatically each time the range params are set with setRangeParams
 
     this.lastSetActiveButtons = null;
@@ -286,20 +286,10 @@ export default class MathRichInput extends React.Component {
     isExpertMode,
     selectedTab
   ) => {
-    // if (this.props.outputTex !== null && this.props.outputTex !== undefined && this.props.outputTex) {
-    //   if (mimeType === MIME_TYPE_HTML) {
-    //     console.warn("Html found when outputTex=true")
-    //     value = convertHtmlToPlainText(value)
-    //     mimeType = MIME_TYPE_PLAIN_TEXT
-    //   } else if (mimeType === MIME_TYPE_ZZISH_HTML_MATH) {
-    //     value = convertHtmlMathToTex(value)
-    //     mimeType = MIME_TYPE_TEX
-    //   }
-    // }
-
     // rangeParams, isExpertMode and selectedTab can be null, in which case we will set them
     if (rangeParams === null) rangeParams = this.lastSetRangeParams;
-    else this.rangeParamsToSetAfterComponentUpdate = rangeParams;
+
+    this.afterComponentUpdateData = { rangeParams, value };
 
     let options = this.props.options || DEFAULT_OPTIONS;
     if (isExpertMode === null) isExpertMode = options.isExpertMode;
@@ -461,7 +451,7 @@ export default class MathRichInput extends React.Component {
     }
 
     if (deleteToEmpty) {
-      console.log("deleteToEmpty")
+      console.log("deleteToEmpty");
       let new_rangeParams = {
         startNodeIndex: 0,
         startOffset: 1,
@@ -477,7 +467,7 @@ export default class MathRichInput extends React.Component {
         this.props.useExpertMode,
         this.props.selectedTab
       );
-      e.preventDefault()
+      e.preventDefault();
       return;
     }
 
@@ -590,112 +580,25 @@ 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;
-
-    // console.log("Old: "+index+"->"+offset)
-
-    // The user shouldn't be in a katex node, but lets deal with it anyway
-    let node = this._findNodeWithIndex(index);
-    if (isKatexNode(node)) {
-      console.warn("Cursor is inside katex node");
-      let new_index = index - 1; // Jump out of the latex node
-      let prev_node = this._findNodeWithIndex(index - 1);
-      let new_offset = getNodeTextLength(prev_node);
-
-      let new_rangeParams = {
-        startNodeIndex: new_index,
-        startOffset: new_offset,
-        endNodeIndex: new_index,
-        endOffset: new_offset,
-        startGlobalOffset: new_globalOffset,
+    console.log("handleKeyDownArrowLeft");
+    console.log(rangeParams);
+    let new_globalOffset = rangeParams.endGlobalOffset - 1;
+    let new_rangeParams = null;
+    if (e.shiftKey && new_globalOffset > rangeParams.startGlobalOffset) {
+      new_rangeParams = {
+        startGlobalOffset: rangeParams.startGlobalOffset,
         endGlobalOffset: new_globalOffset,
       };
-      this._setRangeParams(new_rangeParams);
-      e.preventDefault();
-      return;
-    }
-
-    if (offset > 2) return;
-
-    let new_index = -1;
-    let new_offset = -1;
-
-    // Deal with case of inserted small space at start of <p> element or after katex node
-    if (offset === 2) {
-      new_index = index;
-      if (this.nodeStartsWithSmallSpace(node)) {
-        if (index > 0 && isKatexNode(this._findNodeWithIndex(index - 1)))
-          new_offset = 1;
-        else new_offset = 0;
-      } else new_offset = 1;
-    }
-
-    if (offset === 1) {
-      if (this.nodeStartsWithSmallSpace(node)) {
-        if (index === 0) {
-          e.preventDefault();
-          return;
-        }
-        let prev_node = this._findNodeWithIndex(index - 1);
-        if (index >= 2 && isKatexNode(prev_node)) new_index = index - 2;
-        else new_index = index - 1;
-
-        let new_node = this._findNodeWithIndex(new_index);
-        new_offset = getNodeTextLength(new_node);
-      } else {
-        new_index = index;
-        new_offset = 0;
-      }
-    }
-
-    if (offset === 0) {
-      let prev_node = this._findNodeWithIndex(index - 1);
-      if (index >= 2 && isKatexNode(prev_node)) new_index = index - 2;
-      else new_index = index - 1;
-      let new_node = this._findNodeWithIndex(new_index);
-      new_offset = getNodeTextLength(new_node);
-      if (new_offset === 1) {
-        if (this.nodeStartsWithSmallSpace(new_node)) {
-          if (index > 0 && isKatexNode(this._findNodeWithIndex(index - 1)))
-            new_offset = 1;
-          else new_offset = 0;
-        }
-      }
-    }
-
-    // Move cursor to start of field if in starting small space
-    if (
-      new_index === 0 &&
-      new_offset === 1 &&
-      this.inputStartsWithSmallSpace()
-    ) {
-      new_offset = 0;
-    }
-
-    if (new_index === -1 || new_offset === -1) return;
-    else {
-      let new_rangeParams = {
-        startNodeIndex: new_index,
-        startOffset: new_offset,
-        endNodeIndex: new_index,
-        endOffset: new_offset,
+    } else {
+      new_rangeParams = {
         startGlobalOffset: new_globalOffset,
         endGlobalOffset: new_globalOffset,
       };
-      this._setRangeParams(new_rangeParams);
-      e.preventDefault();
     }
+    console.log(new_rangeParams);
+    e.preventDefault();
+    this._setRangeParams(new_rangeParams);
+    return;
   };
 
   handleKeyDownArrowRight = (e) => {
@@ -704,103 +607,22 @@ 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;
-
-    let node = this._findNodeWithIndex(index);
-    let length = getNodeTextLength(node);
-
-    // The user shouldn't be in a katex node, but lets deal with it anyway
-    if (isKatexNode(node)) {
-      console.warn("Cursor is inside katex node");
-      let new_index = index + 1; // Jump out of the latex node
-      let new_offset = SMALL_SPACE_LENGTH; // As there will be a SMALL_SPACE at the start of the text node
-
-      let new_rangeParams = {
-        startNodeIndex: new_index,
-        startOffset: new_offset,
-        endNodeIndex: new_index,
-        endOffset: new_offset,
+    let new_rangeParams = null;
+    let new_globalOffset = rangeParams.endGlobalOffset + 1;
+    if (e.shiftKey && new_globalOffset > rangeParams.startGlobalOffset) {
+      new_rangeParams = {
+        startGlobalOffset: rangeParams.startGlobalOffset,
+        endGlobalOffset: new_globalOffset,
       };
-      this._setRangeParams(new_rangeParams);
-      e.preventDefault();
-      return;
-    }
-
-    // Deal with case of inserted small space at start of <p> element
-    if (offset === 0) {
-      if (this.nodeStartsWithSmallSpace(node)) {
-        // console.log("Offset = 0 and node starts with small space");
-        let new_index = -1;
-        let new_offset = -1;
-
-        if (node.nodeValue.length > 1) {
-          new_index = index;
-          new_offset = SMALL_SPACE_LENGTH + 1;
-        } else {
-          new_index = index + 1;
-          let next_node = this._findNodeWithIndex(new_index);
-          if (next_node !== null) {
-            if (isKatexNode(next_node)) {
-              new_index = index + 2;
-              new_offset = SMALL_SPACE_LENGTH;
-            } else {
-              new_index = index + 1;
-              new_offset = 0;
-            }
-          } else {
-            new_index = index;
-            new_offset = offset;
-          }
-        }
-        let new_rangeParams = {
-          startNodeIndex: new_index,
-          startOffset: new_offset,
-          endNodeIndex: new_index,
-          endOffset: new_offset,
-        };
-        this._setRangeParams(new_rangeParams);
-
-        e.preventDefault();
-        return;
-      }
-    }
-
-    // If at the end of a text node
-    if (
-      offset === length ||
-      (index === 0 && this.inputStartsWithSmallSpace())
-    ) {
-      let next_node = this._findNodeWithIndex(index + 1);
-
-      // If there is no next node, then we can't move, so do the default action
-      // If the next node is a normal node, do the default action
-      if (next_node === null || !isKatexNode(next_node)) return;
-
-      let new_index = index + 2; // Jump over the latex node
-      let new_offset = SMALL_SPACE_LENGTH; // As there will be a SMALL_SPACE at the start of the text node
-
-      let new_rangeParams = {
-        startNodeIndex: new_index,
-        startOffset: new_offset,
-        endNodeIndex: new_index,
-        endOffset: new_offset,
+    } else {
+      new_rangeParams = {
+        startGlobalOffset: new_globalOffset,
+        endGlobalOffset: new_globalOffset,
       };
-      this._setRangeParams(new_rangeParams);
-
-      e.preventDefault();
-      return;
     }
+    e.preventDefault();
+    this._setRangeParams(new_rangeParams);
+    return;
   };
 
   editableDivIsPlainText = () => {
@@ -1199,14 +1021,17 @@ 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 && // 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")
+      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;
@@ -1311,14 +1136,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")
+      console.log("handleInput 2");
       const params = this._getRangeParams();
       if (params === null || params === undefined)
         console.error("Could not get range params from input field");
@@ -1357,6 +1182,7 @@ export default class MathRichInput extends React.Component {
 
   updateActiveButtons = () => {
     try {
+      console.log("updateActiveButtons");
       let rangeParams = this._getRangeParams();
       if (rangeParams === null || rangeParams === undefined) {
         console.warn(
@@ -1475,12 +1301,14 @@ export default class MathRichInput extends React.Component {
 
   componentDidUpdate() {
     try {
+      console.log("componentDidUpdate");
       if (
-        this.rangeParamsToSetAfterComponentUpdate !== null &&
-        this.rangeParamsToSetAfterComponentUpdate !== undefined
+        this.afterComponentUpdateData !== null &&
+        this.afterComponentUpdateData !== undefined &&
+        this.afterComponentUpdateData.value === this.props.value
       ) {
-        this._setRangeParams(this.rangeParamsToSetAfterComponentUpdate);
-        this.rangeParamsToSetAfterComponentUpdate = null;
+        this._setRangeParams(this.afterComponentUpdateData.rangeParams);
+        this.afterComponentUpdateData = null;
         this.updateActiveButtons();
       }
     } catch (error) {
@@ -1665,8 +1493,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)
+      console.log("Old range params");
+      console.log(oldRangeParams);
 
       // Handle case of empty string returned
       if (latex === "") {
@@ -2123,10 +1951,10 @@ export default class MathRichInput extends React.Component {
         this.enableHtml()
       );
 
-      console.log("Raw text before line insert")
-      console.log(raw_text)
-      console.log("Range params before line insert")
-      console.log(rangeParams)
+      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 };
@@ -2146,7 +1974,6 @@ export default class MathRichInput extends React.Component {
           new_rangeParams.startGlobalOffset++;
           new_rangeParams.endGlobalOffset++;
         }
-  
       } else {
         new_raw_text = removeMarks(insertCharacterBeforeMarks(raw_text, "\n"));
         new_rangeParams.startOffset++;
@@ -2158,12 +1985,11 @@ 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)
 
+      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,
@@ -2183,34 +2009,39 @@ export default class MathRichInput extends React.Component {
         rangeParams = this._getRangeParams();
 
       if (rangeParams.startOffset !== 0)
-        console.warn("Unexpected startOffset "+rangeParams.startOffset+" in insertAfterSmallSpace")
-      
+        console.warn(
+          "Unexpected startOffset " +
+            rangeParams.startOffset +
+            " in insertAfterSmallSpace"
+        );
+
       let node = this._findNodeWithIndex(rangeParams.startNodeIndex);
       let raw_text = elementToMarkedRawText(
-          this.editableDiv,
-          node,
-          1, // after small space
-          this.enableHtml()
-        );
+        this.editableDiv,
+        node,
+        1, // after small space
+        this.enableHtml()
+      );
 
       let new_raw_text = removeMarks(
-        insertCharacterBeforeMarks(raw_text, new_char))
+        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,
-      }
-      
+        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,
@@ -2221,7 +2052,7 @@ export default class MathRichInput extends React.Component {
     } catch (error) {
       console.error(error);
     }
-  };
+  }
 
   insertAccentLetter = (event, old_char, new_char) => {
     try {
@@ -2239,18 +2070,24 @@ export default class MathRichInput extends React.Component {
       let new_raw_text = null;
       let new_rangeParams = null;
 
-      if (old_char === null) { // insert new char
-        new_raw_text = removeMarks(insertCharacterBeforeMarks(raw_text, new_char));
+      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));
+          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 };
       }
 
@@ -2259,7 +2096,7 @@ export default class MathRichInput extends React.Component {
         this.props.mimeType,
         this.enableHtml()
       );
-      
+
       this.applyChangesToComponent(
         new_raw_text,
         this.props.mimeType,

package/src/mathRichInputHelper.js

@@ -79,10 +79,10 @@ function isBrNode(node) {
 }
 
 function nodeStartsWithSmallSpace(node) {
-    if (node.nodeType === 3 &&
-        node.nodeValue.length >= 1 &&
-        node.nodeValue.charCodeAt(0) === SMALL_SPACE_CHAR_CODE)
-        return true;
+  if (node.nodeType === 3 &&
+      node.nodeValue.length >= 1 &&
+      node.nodeValue.charCodeAt(0) === SMALL_SPACE_CHAR_CODE)
+      return true;
   return false;
 }
 
@@ -722,7 +722,7 @@ function findGlobalOffset(node, nodeToFind, offset, result=null) {
     result.offset ++
   }
   
-    return false;
+  return false;
 }
 
 function findNodeAndOffsetForGlobalOffset(node, globalOffset, result=null) {
@@ -734,10 +734,14 @@ function findNodeAndOffsetForGlobalOffset(node, globalOffset, result=null) {
   if (isTextNode(node)) {
     result.node = node
     result.lastTextNode = node
+    console.log("Found text node \'"+node.nodeValue+"\' of length "+node.nodeValue.length)
+    console.log("result.offset was: "+result.offset)
     result.offset += node.nodeValue.length
-    if (nodeStartsWithSmallSpace(node))
+    if (nodeStartsWithSmallSpace(node)) {
+      console.log("Text node starts with small space")
       result.offset -= 1
-    // console.log("result.offset now: "+result.offset)
+    }
+    console.log("result.offset now: "+result.offset)
     return false
   }
   const childNodes = node.childNodes
@@ -758,8 +762,10 @@ function findNodeAndOffsetForGlobalOffset(node, globalOffset, result=null) {
   }
   
   if (node.nodeType === 1 && node.tagName === "P") {
+    console.log("Leaving p node")
     result.node = null
     result.offset ++
+    console.log("result.offset now: "+result.offset)
   }
   return false;
 }
@@ -780,6 +786,7 @@ export function findFirstTextNode(node) {
 
 function findNodeAndOffsetForGlobalOffsetInEditableDiv(editableDiv, globalOffset) {
   let result = {offset:0}
+  console.log("Finding node and offset within: "+editableDiv.outerHTML)
   findNodeAndOffsetForGlobalOffset(editableDiv, globalOffset, result)
   console.log(result)
 
@@ -796,18 +803,27 @@ function findNodeAndOffsetForGlobalOffsetInEditableDiv(editableDiv, globalOffset
     }
   }
 
-  // if (result.offset === 0 && 
-  //   result.node.nodeValue.length > 0 && 
-  //   nodeStartsWithSmallSpace(result.node)) {
-  //   result.offset = 1
-  // }
+  if (result.offset === 0 && 
+    result.node.nodeValue.length > 0 && 
+    nodeStartsWithSmallSpace(result.node)) {
+    result.offset = 1
+  }
+
+  if (result.offset > result.node.nodeValue.length) {
+    console.warn("Unexpected offset when converting global offset to node and offset")
+    console.log("Global offset: "+globalOffset)
+    console.log("Result:")
+    console.log(result)
+    console.log("result.offset  > result.node.nodeValue.length")
+    result.offset = result.node.nodeValue.length  
+  }
 
   return result
 }
 
 // https://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html
 export function getRangeParams(editableDiv) {
-  // console.log ("getRangeParams")
+  console.log ("getRangeParams")
   // console.log("Inner html: "+editableDiv.innerHTML)
   const isSupported = typeof window.getSelection !== "undefined";
   if (!isSupported) {
@@ -822,6 +838,7 @@ export function getRangeParams(editableDiv) {
   }
 
   const 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
@@ -927,38 +944,34 @@ export function setRangeParams(editableDiv, params) {
     
     // New way of doing things
     if (params.startGlobalOffset !== null && params.startGlobalOffset !== undefined) {
+      console.log("Setting range from global offsets")
       setRangeParamsFromGlobalOffsets(editableDiv, params)
       return
     }
 
     // Otherwise use the old way of doing things
+    console.log("Setting range from node index and local offset")
 
     if (params.startNodeIndex === null || params.startNodeIndex === undefined) {
       console.error("Can't set range params: params.startNodeIndex === "+params.startNodeIndex)
       return
     }
-
-    // console.log("Setting cursor to range params: "+params.startNodeIndex+"->"+params.startOffset)
-    // console.log(params)
-
     if (params.startNodeIndex < 0) {
       console.error("Can't set range params: params.startNodeIndex < 0")
       return
     }
 
-
     let nodes = editableDiv.childNodes
     if (params.startNodeIndex === 0 && params.startOffset === 0 && nodes.length === 0) {
-      // console.log("Not setting range params")
       return
     }
 
-    // console.log("Node["+params.startNodeIndex+"]:")
-    // console.log(nodes[params.startNodeIndex])
+    // Set the offsets within the nodes
     let startOffset = params.startOffset
     let endOffset = params.endOffset
 
     // Handle special case of auto inserted SMALL CHAR at beginning of input
+    // TODO This sectin may no longer be neceesary and may be introducing a bug
     if (params.startNodeIndex === 0 &&
         params.startOffset === 1 &&
         isSmallSpace(nodes[0]))
@@ -969,25 +982,26 @@ export function setRangeParams(editableDiv, params) {
         isSmallSpace(nodes[0]))
       endOffset = 0
 
+
+    // Find the nodes
     let startNode = findNodeWithIndex(editableDiv, params.startNodeIndex)
     let endNode = findNodeWithIndex(editableDiv, params.endNodeIndex)
 
-    // Lets make sure we are setting 
-    // if (params.startNodeIndex !== 0 &&
-    //   params.startOffset === 0) {
-    //   if (getNodeText(startNode).charAt(0) === SMALL_SPACE)
-    //     startOffset = SMALL_SPACE.length
-    // }
-    // if (params.endNodeIndex !== 0 &&
-    //   params.endOffset === 0) {
-    //   if (getNodeText(endNode).charAt(0) === SMALL_SPACE)
-    //     endOffset = SMALL_SPACE.length
-    // }
-    // console.log("End: "+params.endNodeIndex+"->"+endOffset)
+    console.log("Setting range to start in node:")
+    console.log("  node type: "+startNode.nodeType)
+    console.log("  tag name: "+startNode.tagName)
+    console.log("  node value: "+startNode.nodeValue)
+    console.log("  offset:"+startOffset)
+
+    console.log("Setting range to end in node:")
+    console.log("  node type: "+endNode.nodeType)
+    console.log("  tag name: "+endNode.tagName)
+    console.log("  node value: "+endNode.nodeValue)
+    console.log("  offset:"+endOffset)
 
     // Set range in document
     if (startNode === null) {
-      console.error("Could not set range to start node with index "+params.startNodeIndex)
+      console.warn("Could not set range to start node with index "+params.startNodeIndex)
       startNode = findFirstTextNode(editableDiv)
       startOffset = 0
     }
@@ -1004,7 +1018,7 @@ export function setRangeParams(editableDiv, params) {
     }
 
     if (endNode === null) {
-      console.error("Could not set range to end node with index "+params.endNodeIndex)
+      console.warn("Could not set range to end node with index "+params.endNodeIndex)
       endNode = findFirstTextNode(editableDiv)
       endOffset = 0
     }
@@ -1021,13 +1035,21 @@ export function setRangeParams(editableDiv, params) {
     }
 
     new_range = document.createRange();
+    if (startOffset > startNode.nodeValue.length) {
+      console.warn("endOffset > endNode.nodeValue.length when setting range: "+
+              startOffset+ " > "+startNode.nodeValue.length+
+              " - "+stateNode.nodeType+
+              " - "+startNode.nodeValue)
+              startOffset = startNode.nodeValue.length
+    }
+
     new_range.setStart(startNode, startOffset);
-    if (endOffset > endNode.length) {
-        console.warn("endOffset > endNode.length when setting range: "+
-                endOffset+ " > "+endNode.length+
+    if (endOffset > endNode.nodeValue.length) {
+        console.warn("endOffset > endNode.nodeValue.length when setting range: "+
+                endOffset+ " > "+endNode.nodeValue.length+
                 " - "+endNode.nodeType+
                 " - "+endNode.nodeValue)
-                endOffset = endNode.length
+                endOffset = endNode.nodeValue.length
     }
     new_range.setEnd(endNode, endOffset);