@zzish/math-rich-input 0.1.30 → 0.1.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zzish/math-rich-input",
-  "version": "0.1.30",
+  "version": "0.1.32",
   "description": "React component for user to enter rich text with embedded math equations.",
   "repository": {
     "type": "git",
@@ -40,7 +40,7 @@
     "rollup-plugin-css-only": "^3.1.0"
   },
   "peerDependencies": {
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0"
   }
 }

package/src/MathRichInput.jsx

@@ -286,10 +286,11 @@ export default class MathRichInput extends React.Component {
     isExpertMode,
     selectedTab
   ) => {
+
     // rangeParams, isExpertMode and selectedTab can be null, in which case we will set them
     if (rangeParams === null) rangeParams = this.lastSetRangeParams;
-
-    this.afterComponentUpdateData = { rangeParams, value };
+    
+    this.afterComponentUpdateData = {rangeParams, value}
 
     let options = this.props.options || DEFAULT_OPTIONS;
     if (isExpertMode === null) isExpertMode = options.isExpertMode;
@@ -451,7 +452,7 @@ export default class MathRichInput extends React.Component {
     }
 
     if (deleteToEmpty) {
-      console.log("deleteToEmpty");
+      // console.log("deleteToEmpty")
       let new_rangeParams = {
         startNodeIndex: 0,
         startOffset: 1,
@@ -467,7 +468,7 @@ export default class MathRichInput extends React.Component {
         this.props.useExpertMode,
         this.props.selectedTab
       );
-      e.preventDefault();
+      e.preventDefault()
       return;
     }
 
@@ -580,22 +581,22 @@ export default class MathRichInput extends React.Component {
     let index = rangeParams.startNodeIndex;
     let offset = rangeParams.startOffset;
 
-    console.log("handleKeyDownArrowLeft");
-    console.log(rangeParams);
+    // console.log("handleKeyDownArrowLeft")
+    // console.log(rangeParams)
     let new_globalOffset = rangeParams.endGlobalOffset - 1;
-    let new_rangeParams = null;
+    let new_rangeParams = null
     if (e.shiftKey && new_globalOffset > rangeParams.startGlobalOffset) {
-      new_rangeParams = {
-        startGlobalOffset: rangeParams.startGlobalOffset,
-        endGlobalOffset: new_globalOffset,
-      };
+        new_rangeParams = {
+          startGlobalOffset: rangeParams.startGlobalOffset,
+          endGlobalOffset: new_globalOffset,
+        }
     } else {
       new_rangeParams = {
         startGlobalOffset: new_globalOffset,
         endGlobalOffset: new_globalOffset,
       };
     }
-    console.log(new_rangeParams);
+    // console.log(new_rangeParams)
     e.preventDefault();
     this._setRangeParams(new_rangeParams);
     return;
@@ -607,7 +608,7 @@ export default class MathRichInput extends React.Component {
     let index = rangeParams.startNodeIndex;
     let offset = rangeParams.startOffset;
 
-    let new_rangeParams = null;
+    let new_rangeParams = null
     let new_globalOffset = rangeParams.endGlobalOffset + 1;
     if (e.shiftKey && new_globalOffset > rangeParams.startGlobalOffset) {
       new_rangeParams = {
@@ -775,7 +776,7 @@ export default class MathRichInput extends React.Component {
     else {
       e.preventDefault();
       this.accent = new_accent;
-      console.log("Accent set: " + this.accent);
+      // console.log("Accent set: " + this.accent);
       return true;
     }
     if (new_char !== "") {
@@ -856,42 +857,44 @@ export default class MathRichInput extends React.Component {
           /(Win)/i.test(window.navigator.platform) &&
           e.ctrlKey &&
           (e.key === "6" || e.key === "^")
-        )
-          return;
-        // otherwise
-        if (e.key === "6" || e.key === "^" || e.key === "+" || e.key === "=")
-          this.styleText(e, "Superscript");
-        // Don't apply subscript if it is the browser command key for "smaller"
-        // if (/(Win)/i.test(window.navigator.platform) && e.ctrlKey && e.key === "-")
-        //   return
-        // if (/(Mac)/i.test(window.navigator.platform) && e.metaKey && e.key === "-")
-        //   return
-        // otherwise
-        if (e.key === "-" || e.key === "_") this.styleText(e, "Subscript");
+        ) {
+          // do nothing
+        } else {
+          // otherwise
+          if (e.key === "6" || e.key === "^" || e.key === "+" || e.key === "=")
+            this.styleText(e, "Superscript");
+          // Don't apply subscript if it is the browser command key for "smaller"
+          // if (/(Win)/i.test(window.navigator.platform) && e.ctrlKey && e.key === "-")
+          //   return
+          // if (/(Mac)/i.test(window.navigator.platform) && e.metaKey && e.key === "-")
+          //   return
+          // otherwise
+          if (e.key === "-" || e.key === "_") this.styleText(e, "Subscript");
 
-        e.preventDefault();
-        return;
+          e.preventDefault();
+          return;
+        }
       }
 
       if ((e.metaKey || e.ctrlKey) && e.key === "v") {
-        console.log("Executing paste");
+        // console.log("Executing paste");
         document.execCommand("paste");
         return;
       }
       if ((e.metaKey || e.ctrlKey) && e.key === "c") {
-        console.log("Executing copy");
+        // console.log("Executing copy");
         document.execCommand("copy");
         return;
       }
       if ((e.metaKey || e.ctrlKey) && e.key === "x") {
-        console.log("Executing cut");
+        // console.log("Executing cut");
         document.execCommand("cut");
         return;
       }
 
       // Ignore automatic key repeat presses on Windows so that we can show an accent bar on
       // long key press
-      if (!/(Win)/i.test(window.navigator.platform)) {
+      if (/(Win)/i.test(window.navigator.platform)) {
         if (e.key === this.keyPressed && this.keyPressStartTime > 0) {
           if (
             e.key.length === 1 &&
@@ -921,10 +924,13 @@ export default class MathRichInput extends React.Component {
           key === "?" ||
           key === "!"
         ) {
-          this.setState({ showAccentBar: !this.state.showAccentBar });
+          console.log("showing/hiding accent bar")
+          this.setState({ showAccentBar: !this.state.showAccentBar});
         } else {
+          console.log("hiding accent bar")
           this.setState({ showAccentBar: false });
         }
+        e.preventDefault()
         return;
       }
 
@@ -936,7 +942,10 @@ export default class MathRichInput extends React.Component {
       // (keyPressStartTime is reset to -1 on key up)
       if (this.keyPressStartTime < 0) {
         this.keyPressStartTime = Date.now();
-        if (this.state.showAccentBar) this.setState({ showAccentBar: false });
+        if (this.state.showAccentBar) {
+          console.log("Hiding accent bar 2")
+          this.setState({ showAccentBar: false });
+        }
       }
 
       if (e.key === "Backspace") {
@@ -1021,17 +1030,14 @@ 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 && // 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"
-        );
+      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;
@@ -1136,14 +1142,13 @@ 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");
@@ -1182,7 +1187,7 @@ export default class MathRichInput extends React.Component {
 
   updateActiveButtons = () => {
     try {
-      console.log("updateActiveButtons");
+      // console.log("updateActiveButtons")
       let rangeParams = this._getRangeParams();
       if (rangeParams === null || rangeParams === undefined) {
         console.warn(
@@ -1248,19 +1253,19 @@ export default class MathRichInput extends React.Component {
       console.warn("handlePaste called, but no clipboard data");
       return;
     }
-    for (let i = 0; i < clipboardData.types.length; i++)
-      console.log(
-        clipboardData.types[i] +
-          ": " +
-          clipboardData.getData(clipboardData.types[i])
-      );
+    // for (let i = 0; i < clipboardData.types.length; i++)
+    //   console.log(
+    //     clipboardData.types[i] +
+    //       ": " +
+    //       clipboardData.getData(clipboardData.types[i])
+    //   );
     let pasteHtml = clipboardData.getData("text/html");
     if (pasteHtml !== null && pasteHtml.length > 0) {
-      console.log("** Paste html");
-      console.log(pasteHtml);
+      // console.log("** Paste html");
+      // console.log(pasteHtml);
       pasteHtml = sanitiseHtml(pasteHtml);
-      console.log("** Santised paste html");
-      console.log(pasteHtml);
+      // console.log("** Santised paste html");
+      // console.log(pasteHtml);
       this.insertHtml(pasteHtml);
       event.preventDefault();
     } else {
@@ -1301,7 +1306,7 @@ export default class MathRichInput extends React.Component {
 
   componentDidUpdate() {
     try {
-      console.log("componentDidUpdate");
+      // console.log("componentDidUpdate")
       if (
         this.afterComponentUpdateData !== null &&
         this.afterComponentUpdateData !== undefined &&
@@ -1351,8 +1356,8 @@ export default class MathRichInput extends React.Component {
         console.error(
           "Could not find node with index: " + rangeParams.startNodeIndex
         );
-        console.log("Child nodes:");
-        console.log(this.editableDiv.childNodes);
+        // console.log("Child nodes:");
+        // console.log(this.editableDiv.childNodes);
         node = this._findFirstTextNode();
         offset = 0;
       }
@@ -1493,8 +1498,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);
+      // console.log("Old range params")
+      // console.log(oldRangeParams)
 
       // Handle case of empty string returned
       if (latex === "") {
@@ -1717,20 +1722,29 @@ export default class MathRichInput extends React.Component {
       new_raw_text = removeMarks(
         insertCharacterBeforeMarks(raw_text, new_text)
       );
-      // console.log("New raw text:")
-      // console.log(new_raw_text)
-      // if (rangeParams.startNodeIndex === rangeParams.endNodeIndex &&
-      //     rangeParams.startOffset === rangeParams.endOffset)
-      //   new_rangeParams.startOffset = new_rangeParams.startOffset + new_text.length
-      new_rangeParams.endOffset = new_rangeParams.endOffset + new_text.length;
-      if (!selectInsertedText) {
-        new_rangeParams.startNodeIndex = new_rangeParams.endNodeIndex;
-        new_rangeParams.startOffset = new_rangeParams.endOffset;
+
+      // console.log("Range params before insert")
+      // console.log(rangeParams)
+
+      if (selectInsertedText) {
+        new_rangeParams.startNodeIndex = rangeParams.endNodeIndex;
+        new_rangeParams.startOffset = rangeParams.endOffset;
+        new_rangeParams.endNodeIndex = rangeParams.endNodeIndex;
+        new_rangeParams.endOffset = rangeParams.endOffset + new_text.length;
+        new_rangeParams.startGlobalOffset = rangeParams.endGlobalOffset;
+        new_rangeParams.endGlobalOffset = rangeParams.endGlobalOffset+ new_text.length;
+      } else {
+        new_rangeParams.startNodeIndex = rangeParams.endNodeIndex;
+        new_rangeParams.startOffset = rangeParams.endOffset + new_text.length;
+        new_rangeParams.endNodeIndex = rangeParams.endNodeIndex;
+        new_rangeParams.endOffset = rangeParams.endOffset + new_text.length;
+        new_rangeParams.startGlobalOffset = rangeParams.endGlobalOffset + new_text.length;
+        new_rangeParams.endGlobalOffset = rangeParams.endGlobalOffset + new_text.length;
       }
-      // console.log("Setting new range params: ")
+
+      // console.log("Range params after insert")
       // console.log(new_rangeParams)
-      // console.log("Setting new mime-type: ")
-      // console.log(this.props.mimeType)
+
       new_raw_text = removeEncodingIfPlainText(
         new_raw_text,
         this.props.mimeType,
@@ -1951,10 +1965,10 @@ export default class MathRichInput extends React.Component {
         this.enableHtml()
       );
 
-      console.log("Raw text before line insert");
-      console.log(raw_text);
-      console.log("Range params before line insert");
-      console.log(rangeParams);
+      // 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 };
@@ -1974,6 +1988,7 @@ export default class MathRichInput extends React.Component {
           new_rangeParams.startGlobalOffset++;
           new_rangeParams.endGlobalOffset++;
         }
+  
       } else {
         new_raw_text = removeMarks(insertCharacterBeforeMarks(raw_text, "\n"));
         new_rangeParams.startOffset++;
@@ -1985,11 +2000,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)
 
-      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,
@@ -2009,39 +2025,34 @@ export default class MathRichInput extends React.Component {
         rangeParams = this._getRangeParams();
 
       if (rangeParams.startOffset !== 0)
-        console.warn(
-          "Unexpected startOffset " +
-            rangeParams.startOffset +
-            " in insertAfterSmallSpace"
-        );
-
+        console.warn("Unexpected startOffset "+rangeParams.startOffset+" in insertAfterSmallSpace")
+      
       let node = this._findNodeWithIndex(rangeParams.startNodeIndex);
       let raw_text = elementToMarkedRawText(
-        this.editableDiv,
-        node,
-        1, // after small space
-        this.enableHtml()
-      );
+          this.editableDiv,
+          node,
+          1, // after small space
+          this.enableHtml()
+        );
 
       let new_raw_text = removeMarks(
-        insertCharacterBeforeMarks(raw_text, new_char)
-      );
+        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,
-      };
-
+        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,
@@ -2052,7 +2063,7 @@ export default class MathRichInput extends React.Component {
     } catch (error) {
       console.error(error);
     }
-  }
+  };
 
   insertAccentLetter = (event, old_char, new_char) => {
     try {
@@ -2070,24 +2081,18 @@ export default class MathRichInput extends React.Component {
       let new_raw_text = null;
       let new_rangeParams = null;
 
-      if (old_char === null) {
-        // insert new char
-        new_raw_text = removeMarks(
-          insertCharacterBeforeMarks(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)
-        );
+          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 };
       }
 
@@ -2096,7 +2101,7 @@ export default class MathRichInput extends React.Component {
         this.props.mimeType,
         this.enableHtml()
       );
-
+      
       this.applyChangesToComponent(
         new_raw_text,
         this.props.mimeType,
@@ -2112,6 +2117,7 @@ export default class MathRichInput extends React.Component {
   handleAccentButtonClick = (event, oldCharacter, newCharacter) => {
     try {
       this.insertAccentLetter(event, oldCharacter, newCharacter);
+      console.log("Hiding accent bar 3")
       this.setState({ showAccentBar: false });
     } catch (error) {
       console.error(error);
@@ -2141,6 +2147,7 @@ export default class MathRichInput extends React.Component {
       onBlur();
     }
     try {
+      console.log("Hiding accent bar 4")
       this.setState({ hasFocus: false, showAccentBar: false });
     } catch (error) {
       console.error(error);

package/src/mathRichInputHelper.js

@@ -382,8 +382,8 @@ 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)
+  // console.log("elementToMarkedRawText")
+  // console.log(element.innerHTML)
   if (element.innerHTML === "<p><br></p>")
     throw new Error ("We are here")
   // console.log("Node to mark:")
@@ -734,14 +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)
+    // 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)) {
-      console.log("Text node starts with small space")
+      // 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
@@ -762,10 +762,10 @@ function findNodeAndOffsetForGlobalOffset(node, globalOffset, result=null) {
   }
   
   if (node.nodeType === 1 && node.tagName === "P") {
-    console.log("Leaving p node")
+    // console.log("Leaving p node")
     result.node = null
     result.offset ++
-    console.log("result.offset now: "+result.offset)
+    // console.log("result.offset now: "+result.offset)
   }
   return false;
 }
@@ -786,9 +786,9 @@ export function findFirstTextNode(node) {
 
 function findNodeAndOffsetForGlobalOffsetInEditableDiv(editableDiv, globalOffset) {
   let result = {offset:0}
-  console.log("Finding node and offset within: "+editableDiv.outerHTML)
+  // console.log("Finding node and offset within: "+editableDiv.outerHTML)
   findNodeAndOffsetForGlobalOffset(editableDiv, globalOffset, result)
-  console.log(result)
+  // console.log(result)
 
   if (result.node === null) {
     if (globalOffset > 0 && result.lastTextNode !== null) {
@@ -823,7 +823,7 @@ function findNodeAndOffsetForGlobalOffsetInEditableDiv(editableDiv, globalOffset
 
 // 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) {
@@ -907,11 +907,11 @@ function setRangeParamsFromGlobalOffsets(editableDiv, params) {
       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)
+      // 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      
@@ -944,13 +944,13 @@ export function setRangeParams(editableDiv, params) {
     
     // New way of doing things
     if (params.startGlobalOffset !== null && params.startGlobalOffset !== undefined) {
-      console.log("Setting range from global offsets")
+      // 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")
+    // 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)
@@ -987,17 +987,17 @@ export function setRangeParams(editableDiv, params) {
     let startNode = findNodeWithIndex(editableDiv, params.startNodeIndex)
     let 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)
+    // 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) {