@zzish/math-rich-input 0.1.27 → 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 = [];
@@ -21388,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)
@@ -21470,58 +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)
-    // So the next bit of code should never be called in principle, but if we have
-    // failed to find an appropriate node (this could happen if the global offset is bigger
-    // than the length of the text in the node), then lets try and fix it
-
-    if (startResult.node === null || endResult.node === null) {
-      console.warn("Can't set range from global offsets, as could not find text nodes");
-      console.log(startResult);
-      console.log(endResult);
-
-      if (startResult.node === null) {
-        if (params.startGlobalOffset > 0 && startResult.lastTextNode !== null) {
-          startResult.node = startResult.lastTextNode;
-          startResult.offset = startResult.lastTextNode.nodeValue.length;
-        } else {
-          startResult.node = findFirstTextNode(editableDiv);
-          startResult.offset = 0;
-        }
-      }
-
-      if (endResult.node === null) {
-        if (params.endGlobalOffset > 0 && endResult.lastTextNode !== null) {
-          endResult.node = endResult.lastTextNode;
-          endResult.offset = endResult.lastTextNode.nodeValue.length;
-        } else {
-          endResult.node = findFirstTextNode(editableDiv);
-          endResult.offset = 0;
-        }
-      }
-    }
-
-    if (startResult.offset === 0 && startResult.node.nodeValue.length > 0 && nodeStartsWithSmallSpace(startResult.node)) {
-      startResult.offset = 1;
+    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);
@@ -21545,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);
@@ -22103,6 +22099,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
         _this2.applyChangesToComponent("", _this2.getMimeType(false, false), _new_rangeParams, _this2.props.useExpertMode, _this2.props.selectedTab);
 
+        e.preventDefault();
         return;
       } // Treat backspace normally in the following situations
 
@@ -22188,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);
@@ -22666,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();
 
@@ -22971,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")
@@ -23359,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>";
@@ -23375,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++;
@@ -23382,6 +23389,10 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         }
 
         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) {

package/dist/math-rich-input.css

@@ -78,136 +78,6 @@
   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;
@@ -363,6 +233,136 @@
 .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.27",
+  "version": "0.1.28",
   "description": "React component for user to enter rich text with embedded math equations.",
   "repository": {
     "type": "git",

package/src/MathRichInput.jsx

@@ -477,6 +477,7 @@ export default class MathRichInput extends React.Component {
         this.props.useExpertMode,
         this.props.selectedTab
       );
+      e.preventDefault()
       return;
     }
 
@@ -589,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;
@@ -1306,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");
@@ -1659,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 === "") {
@@ -2114,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>")
@@ -2133,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++;
@@ -2144,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,

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
@@ -757,7 +761,7 @@ function findNodeAndOffsetForGlobalOffset(node, globalOffset, result=null) {
     result.node = null
     result.offset ++
   }
-    return false;
+  return false;
 }
 
 export function findFirstTextNode(node) {
@@ -774,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")
@@ -852,56 +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)
-
-    // So the next bit of code should never be called in principle, but if we have
-    // failed to find an appropriate node (this could happen if the global offset is bigger
-    // than the length of the text in the node), then lets try and fix it
-    if (startResult.node === null || endResult.node === null) {
-      console.warn("Can't set range from global offsets, as could not find text nodes")
-      console.log(startResult)
-      console.log(endResult)
-      
-      if (startResult.node === null) {
-        if (params.startGlobalOffset > 0 && startResult.lastTextNode !== null) {
-          startResult.node = startResult.lastTextNode
-          startResult.offset = startResult.lastTextNode.nodeValue.length
-        } else {
-          startResult.node = findFirstTextNode(editableDiv)
-          startResult.offset = 0
-        }
-      }
-      if (endResult.node === null) {
-        if (params.endGlobalOffset > 0 && endResult.lastTextNode !== null) {
-          endResult.node = endResult.lastTextNode
-          endResult.offset = endResult.lastTextNode.nodeValue.length
-        } else {
-          endResult.node = findFirstTextNode(editableDiv)
-          endResult.offset = 0
-        }
-      }    
+    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      
     }
 
-    if (startResult.offset === 0 && 
-        startResult.node.nodeValue.length > 0 && 
-        nodeStartsWithSmallSpace(startResult.node)) {
-      startResult.offset = 1
-    }
-    if (endResult.offset === 0 && 
-        endResult.node.nodeValue.length > 0 && 
-      nodeStartsWithSmallSpace(endResult.node)) {
-      endResult.offset = 1
-    }
-    // console.log("Setting range to:")
-    // console.log(startResult.node.nodeType+":"+startResult.node.tagName+":"+
-    //             startResult.node.nodeValue+":"+startResult.offset)
     new_range = document.createRange();
     new_range.setStart(startResult.node, startResult.offset);
     new_range.setEnd(endResult.node, endResult.offset);
@@ -926,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