@zzish/math-rich-input 0.1.27 → 0.1.29

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 = [];
@@ -21349,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;
   }
 
@@ -21371,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;
@@ -21388,11 +21400,49 @@ function findFirstTextNode(node) {
   }
 
   return null;
+}
+
+function findNodeAndOffsetForGlobalOffsetInEditableDiv(editableDiv, globalOffset) {
+  var result = {
+    offset: 0
+  };
+  console.log("Finding node and offset within: " + editableDiv.outerHTML);
+  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;
+  }
+
+  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) {
@@ -21470,58 +21520,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,19 +21557,22 @@ 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) {
+      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");
@@ -21567,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;
     }
@@ -21610,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;
     }
@@ -21626,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")
@@ -22103,6 +22122,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,16 +22208,29 @@ 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
-      };
+      console.log("handleKeyDownArrowLeft");
+      console.log(rangeParams);
+      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 +22239,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 +22673,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);
             }
           }
         }
@@ -22666,8 +22709,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();
 
@@ -22689,6 +22733,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) {
@@ -22971,8 +23017,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")
@@ -22997,14 +23045,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();
 
@@ -23012,7 +23060,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
@@ -23359,15 +23407,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 +23422,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 +23434,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) {