@zzish/math-rich-input 0.1.25 → 0.1.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zzish/math-rich-input",
-  "version": "0.1.25",
+  "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,
       };
@@ -677,9 +678,8 @@ export default class MathRichInput extends React.Component {
       new_offset = 0;
     }
 
-    if (new_index === -1 || new_offset === -1) {
-      return;
-    } else {
+    if (new_index === -1 || new_offset === -1) return;
+    else {
       let new_rangeParams = {
         startNodeIndex: new_index,
         startOffset: new_offset,
@@ -691,16 +691,6 @@ export default class MathRichInput extends React.Component {
       this._setRangeParams(new_rangeParams);
       e.preventDefault();
     }
-
-    let new_rangeParams = {
-      startNodeIndex: new_index,
-      startOffset: new_offset,
-      endNodeIndex: new_index,
-      endOffset: new_offset,
-    };
-    this._setRangeParams(new_rangeParams);
-
-    e.preventDefault();
   };
 
   handleKeyDownArrowRight = (e) => {
@@ -1204,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;
       }
@@ -1921,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;
@@ -1968,6 +1959,7 @@ export default class MathRichInput extends React.Component {
       }
     }
   };
+
   insertHtml = (new_html) => {
     try {
       // console.log("New html: "+new_html)
@@ -2165,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,
@@ -2211,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,
@@ -2220,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)) {