@zzish/math-rich-input 0.1.27 → 0.1.29

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;
 }
 
@@ -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
@@ -718,7 +722,7 @@ function findGlobalOffset(node, nodeToFind, offset, result=null) {
     result.offset ++
   }
   
-    return false;
+  return false;
 }
 
 function findNodeAndOffsetForGlobalOffset(node, globalOffset, result=null) {
@@ -730,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
@@ -754,10 +762,12 @@ 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;
+  return false;
 }
 
 export function findFirstTextNode(node) {
@@ -774,9 +784,46 @@ export function findFirstTextNode(node) {
   return null
 }
 
+function findNodeAndOffsetForGlobalOffsetInEditableDiv(editableDiv, globalOffset) {
+  let 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
 export function getRangeParams(editableDiv) {
-  // console.log ("getRangeParams")
+  console.log ("getRangeParams")
   // console.log("Inner html: "+editableDiv.innerHTML)
   const isSupported = typeof window.getSelection !== "undefined";
   if (!isSupported) {
@@ -791,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
@@ -852,56 +900,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,38 +941,37 @@ 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) {
+      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]))
@@ -968,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
     }
@@ -1003,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
     }
@@ -1020,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);