@zzish/math-rich-input 0.1.26 → 0.1.27

package/dist/index.js

@@ -21348,6 +21348,7 @@ function findNodeAndOffsetForGlobalOffset(node, globalOffset) {
 
   if (isTextNode(node)) {
     result.node = node;
+    result.lastTextNode = node;
     result.offset += node.nodeValue.length;
     if (nodeStartsWithSmallSpace(node)) result.offset -= 1; // console.log("result.offset now: "+result.offset)
 
@@ -21480,12 +21481,34 @@ function setRangeParamsFromGlobalOffsets(editableDiv, params) {
     };
     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 || !endResult.node || !startResult.offset || !endResult.offset) {
-      console.log("Can't set range with start and end results");
+    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);
-      throw new Error("Could not extract valid nodes and offsets from params");
+
+      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)) {
@@ -22068,11 +22091,12 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       }
 
       if (deleteToEmpty) {
+        console.log("deleteToEmpty");
         var _new_rangeParams = {
           startNodeIndex: 0,
-          startOffset: 0,
+          startOffset: 1,
           endNodeIndex: 0,
-          endOffset: 0,
+          endOffset: 1,
           startGlobalOffset: 0,
           endGlobalOffset: 0
         };
@@ -22540,8 +22564,11 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
         if (_this2.handleKeyDownAccentHelper(e)) return; // Check if inserting character in element that starts with small space
 
-        if (e.key.length === 1 && params.startOffset === 0 && _this2.nodeStartsWithSmallSpace(startNode)) {
-          _this2.replaceNextLetter(e.key);
+        if (e.key.length === 1 && // ie, it's not something like "arrowLeft"
+        params.startOffset === 0 && _this2.nodeStartsWithSmallSpace(startNode)) {
+          console.log("Handling character input at start of text node with small space");
+
+          _this2.insertAfterSmallSpace(e.key, params);
 
           e.preventDefault();
           return;
@@ -23362,50 +23389,33 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this2), "replaceNextLetter", function (new_char) {
-      try {
-        var rangeParams = _this2._getRangeParams();
-
-        var node = _this2._findNodeWithIndex(rangeParams.endNodeIndex);
-
-        var offset = rangeParams.endOffset + 1; // next letter
-
-        var raw_text = elementToMarkedRawText(_this2.editableDiv, node, offset, _this2.enableHtml());
-        var new_raw_text = null;
-
-        var new_rangeParams = _objectSpread2({}, rangeParams);
-
-        new_raw_text = removeMarks(insertCharacterBeforeMarks(raw_text, new_char));
-        if (rangeParams.startNodeIndex === rangeParams.endNodeIndex && rangeParams.startOffset === rangeParams.endOffset) new_rangeParams.startOffset = new_rangeParams.startOffset + new_char.length + 1;
-        new_rangeParams.endOffset = new_rangeParams.endOffset + new_char.length + 1;
-        new_raw_text = removeEncodingIfPlainText(new_raw_text, _this2.props.mimeType, _this2.enableHtml());
-
-        _this2.applyChangesToComponent(new_raw_text, _this2.props.mimeType, new_rangeParams, _this2.props.useExpertMode, _this2.props.selectedTab);
-      } catch (error) {
-        console.error(error);
-      }
-    });
-
     _defineProperty(_assertThisInitialized(_this2), "insertAccentLetter", function (event, old_char, new_char) {
       try {
         var rangeParams = _this2._getRangeParams();
 
-        var node = _this2._findNodeWithIndex(rangeParams.endNodeIndex);
+        var node = _this2._findNodeWithIndex(rangeParams.startNodeIndex);
 
-        var offset = rangeParams.endOffset;
+        var offset = rangeParams.startOffset;
         var raw_text = elementToMarkedRawText(_this2.editableDiv, node, offset, _this2.enableHtml());
         var new_raw_text = null;
-
-        var new_rangeParams = _objectSpread2({}, rangeParams);
-
-        new_rangeParams.startGlobalOffset++;
-        new_rangeParams.endGlobalOffset++;
+        var new_rangeParams = null;
 
         if (old_char === null) {
+          // insert new char
           new_raw_text = removeMarks(insertCharacterBeforeMarks(raw_text, new_char));
-          if (rangeParams.startNodeIndex === rangeParams.endNodeIndex && rangeParams.startOffset === rangeParams.endOffset) new_rangeParams.startOffset = new_rangeParams.startOffset + new_char.length;
-          new_rangeParams.endOffset = new_rangeParams.endOffset + new_char.length;
-        } else new_raw_text = removeMarks(replaceCharacterBeforeMarks(raw_text, new_char));
+          new_rangeParams = {
+            startNodeIndex: rangeParams.startNodeIndex,
+            startOffset: rangeParams.startOffset + new_char.length,
+            endNodeIndex: rangeParams.startNodeIndex,
+            endOffset: rangeParams.startOffset + new_char.length,
+            startGlobalOffset: rangeParams.startGlobalOffset + new_char.length,
+            endGlobalOffset: rangeParams.startGlobalOffset + new_char.length
+          };
+        } else {
+          // replace old char
+          new_raw_text = removeMarks(replaceCharacterBeforeMarks(raw_text, new_char));
+          new_rangeParams = _objectSpread2({}, rangeParams);
+        }
 
         new_raw_text = removeEncodingIfPlainText(new_raw_text, _this2.props.mimeType, _this2.enableHtml());
 
@@ -23645,6 +23655,32 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         console.error(error);
       }
     }
+  }, {
+    key: "insertAfterSmallSpace",
+    value: function insertAfterSmallSpace(new_char, rangeParams) {
+      try {
+        if (rangeParams === null || rangeParams === undefined) rangeParams = this._getRangeParams();
+        if (rangeParams.startOffset !== 0) console.warn("Unexpected startOffset " + rangeParams.startOffset + " in insertAfterSmallSpace");
+
+        var node = this._findNodeWithIndex(rangeParams.startNodeIndex);
+
+        var raw_text = elementToMarkedRawText(this.editableDiv, node, 1, // after small space
+        this.enableHtml());
+        var new_raw_text = removeMarks(insertCharacterBeforeMarks(raw_text, new_char));
+        var new_rangeParams = {
+          startNodeIndex: rangeParams.startNodeIndex,
+          startNodeOffset: 1 + new_char.length,
+          endNodeIndex: rangeParams.startNodeIndex,
+          endNodeOffset: 1 + new_char.length,
+          startGlobalOffset: rangeParams.startGlobalOffset + new_char.length,
+          endGlobalOffset: rangeParams.endGlobalOffset + new_char.length
+        };
+        new_raw_text = removeEncodingIfPlainText(new_raw_text, this.props.mimeType, this.enableHtml());
+        this.applyChangesToComponent(new_raw_text, this.props.mimeType, new_rangeParams, this.props.useExpertMode, this.props.selectedTab);
+      } catch (error) {
+        console.error(error);
+      }
+    }
   }, {
     key: "render",
     value: function render() {

package/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.26",
+  "version": "0.1.27",
   "description": "React component for user to enter rich text with embedded math equations.",
   "repository": {
     "type": "git",

package/src/MathRichInput.jsx

@@ -461,11 +461,12 @@ export default class MathRichInput extends React.Component {
     }
 
     if (deleteToEmpty) {
+      console.log("deleteToEmpty")
       let new_rangeParams = {
         startNodeIndex: 0,
-        startOffset: 0,
+        startOffset: 1,
         endNodeIndex: 0,
-        endOffset: 0,
+        endOffset: 1,
         startGlobalOffset: 0,
         endGlobalOffset: 0,
       };
@@ -1193,15 +1194,15 @@ export default class MathRichInput extends React.Component {
         }
       }
 
-      if (this.handleKeyDownAccentHelper(e)) return;
+      if (this.handleKeyDownAccentHelper(e)) 
+        return;
 
       // Check if inserting character in element that starts with small space
-      if (
-        e.key.length === 1 &&
-        params.startOffset === 0 &&
-        this.nodeStartsWithSmallSpace(startNode)
-      ) {
-        this.replaceNextLetter(e.key);
+      if (e.key.length === 1 && // ie, it's not something like "arrowLeft"
+         params.startOffset === 0 &&
+         this.nodeStartsWithSmallSpace(startNode)) {
+        console.log("Handling character input at start of text node with small space")
+        this.insertAfterSmallSpace(e.key, params);
         e.preventDefault();
         return;
       }
@@ -1910,6 +1911,7 @@ export default class MathRichInput extends React.Component {
       console.error(error);
     }
   };
+
   // https://stackoverflow.com/questions/6690752/insert-html-at-caret-in-a-contenteditable-div
   pasteHtmlAtCaret = (html, selectPastedContent) => {
     var sel, range;
@@ -1957,6 +1959,7 @@ export default class MathRichInput extends React.Component {
       }
     }
   };
+
   insertHtml = (new_html) => {
     try {
       // console.log("New html: "+new_html)
@@ -2154,37 +2157,40 @@ export default class MathRichInput extends React.Component {
     }
   };
 
-  replaceNextLetter = (new_char) => {
+  insertAfterSmallSpace(new_char, rangeParams) {
     try {
-      let rangeParams = this._getRangeParams();
-      let node = this._findNodeWithIndex(rangeParams.endNodeIndex);
-      let offset = rangeParams.endOffset + 1; // next letter
+      if (rangeParams === null || rangeParams === undefined)
+        rangeParams = this._getRangeParams();
 
+      if (rangeParams.startOffset !== 0)
+        console.warn("Unexpected startOffset "+rangeParams.startOffset+" in insertAfterSmallSpace")
+      
+      let node = this._findNodeWithIndex(rangeParams.startNodeIndex);
       let raw_text = elementToMarkedRawText(
-        this.editableDiv,
-        node,
-        offset,
-        this.enableHtml()
-      );
-      let new_raw_text = null;
-      let new_rangeParams = { ...rangeParams };
-      new_raw_text = removeMarks(
-        insertCharacterBeforeMarks(raw_text, new_char)
-      );
-      if (
-        rangeParams.startNodeIndex === rangeParams.endNodeIndex &&
-        rangeParams.startOffset === rangeParams.endOffset
-      )
-        new_rangeParams.startOffset =
-          new_rangeParams.startOffset + new_char.length + 1;
-      new_rangeParams.endOffset =
-        new_rangeParams.endOffset + new_char.length + 1;
+          this.editableDiv,
+          node,
+          1, // after small space
+          this.enableHtml()
+        );
 
+      let new_raw_text = removeMarks(
+        insertCharacterBeforeMarks(raw_text, new_char))
+
+      let new_rangeParams = {
+        startNodeIndex:rangeParams.startNodeIndex,
+        startNodeOffset:1+new_char.length,
+        endNodeIndex:rangeParams.startNodeIndex,
+        endNodeOffset:1+new_char.length,
+        startGlobalOffset:rangeParams.startGlobalOffset+new_char.length,
+        endGlobalOffset:rangeParams.endGlobalOffset+new_char.length,
+      }
+      
       new_raw_text = removeEncodingIfPlainText(
         new_raw_text,
         this.props.mimeType,
         this.enableHtml()
       );
+      
       this.applyChangesToComponent(
         new_raw_text,
         this.props.mimeType,
@@ -2200,8 +2206,8 @@ export default class MathRichInput extends React.Component {
   insertAccentLetter = (event, old_char, new_char) => {
     try {
       let rangeParams = this._getRangeParams();
-      let node = this._findNodeWithIndex(rangeParams.endNodeIndex);
-      let offset = rangeParams.endOffset;
+      let node = this._findNodeWithIndex(rangeParams.startNodeIndex);
+      let offset = rangeParams.startOffset;
 
       let raw_text = elementToMarkedRawText(
         this.editableDiv,
@@ -2209,32 +2215,31 @@ export default class MathRichInput extends React.Component {
         offset,
         this.enableHtml()
       );
+
       let new_raw_text = null;
-      let new_rangeParams = { ...rangeParams };
-      new_rangeParams.startGlobalOffset++;
-      new_rangeParams.endGlobalOffset++;
+      let new_rangeParams = null;
 
-      if (old_char === null) {
-        new_raw_text = removeMarks(
-          insertCharacterBeforeMarks(raw_text, new_char)
-        );
-        if (
-          rangeParams.startNodeIndex === rangeParams.endNodeIndex &&
-          rangeParams.startOffset === rangeParams.endOffset
-        )
-          new_rangeParams.startOffset =
-            new_rangeParams.startOffset + new_char.length;
-        new_rangeParams.endOffset = new_rangeParams.endOffset + new_char.length;
-      } else
-        new_raw_text = removeMarks(
-          replaceCharacterBeforeMarks(raw_text, new_char)
-        );
+      if (old_char === null) { // insert new char
+        new_raw_text = removeMarks(insertCharacterBeforeMarks(raw_text, new_char));
+        new_rangeParams = {
+          startNodeIndex:rangeParams.startNodeIndex,
+          startOffset:rangeParams.startOffset + new_char.length,
+          endNodeIndex:rangeParams.startNodeIndex,
+          endOffset:rangeParams.startOffset + new_char.length,
+          startGlobalOffset:rangeParams.startGlobalOffset + new_char.length,
+          endGlobalOffset:rangeParams.startGlobalOffset + new_char.length
+        }
+      } else { // replace old char
+        new_raw_text = removeMarks(replaceCharacterBeforeMarks(raw_text, new_char));
+        new_rangeParams = { ...rangeParams };
+      }
 
       new_raw_text = removeEncodingIfPlainText(
         new_raw_text,
         this.props.mimeType,
         this.enableHtml()
       );
+      
       this.applyChangesToComponent(
         new_raw_text,
         this.props.mimeType,

package/src/mathRichInputHelper.js

@@ -729,6 +729,7 @@ function findNodeAndOffsetForGlobalOffset(node, globalOffset, result=null) {
   }
   if (isTextNode(node)) {
     result.node = node
+    result.lastTextNode = node
     result.offset += node.nodeValue.length
     if (nodeStartsWithSmallSpace(node))
       result.offset -= 1
@@ -859,13 +860,35 @@ function setRangeParamsFromGlobalOffsets(editableDiv, params) {
     findNodeAndOffsetForGlobalOffset(editableDiv, params.endGlobalOffset, endResult)
     // console.log(endResult.node.nodeType+":"+endResult.node.tagName+":"+
     //             endResult.node.nodeValue+":"+endResult.offset)
-    if (!startResult.node || !endResult.node ||
-        !startResult.offset || !endResult.offset) {
-      console.log("Can't set range with start and end results")
+
+    // 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) 
-      throw new Error("Could not extract valid nodes and offsets from params")
+      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)) {