@zzish/math-rich-input 0.1.29 → 0.1.31

package/dist/index.js

@@ -21032,8 +21032,8 @@ 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("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:")
   // console.log(nodeToMark)
 
@@ -21351,17 +21351,17 @@ 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.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)) {
-      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;
   }
 
@@ -21381,10 +21381,9 @@ function findNodeAndOffsetForGlobalOffset(node, globalOffset) {
   }
 
   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);
+    result.offset++; // console.log("result.offset now: "+result.offset)
   }
 
   return false;
@@ -21405,10 +21404,9 @@ function findFirstTextNode(node) {
 function findNodeAndOffsetForGlobalOffsetInEditableDiv(editableDiv, globalOffset) {
   var result = {
     offset: 0
-  };
-  console.log("Finding node and offset within: " + editableDiv.outerHTML);
-  findNodeAndOffsetForGlobalOffset(editableDiv, globalOffset, result);
-  console.log(result);
+  }; // 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) {
@@ -21441,8 +21439,8 @@ function findNodeAndOffsetForGlobalOffsetInEditableDiv(editableDiv, globalOffset
 
 
 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) {
@@ -21523,12 +21521,11 @@ function setRangeParamsFromGlobalOffsets(editableDiv, params) {
     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);
+    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;
@@ -21561,14 +21558,13 @@ function setRangeParams(editableDiv, params) {
 
 
     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);
       return;
@@ -21594,17 +21590,17 @@ function setRangeParams(editableDiv, params) {
     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);
-    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
+    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.warn("Could not set range to start node with index " + params.startNodeIndex);
@@ -21979,18 +21975,12 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this2), "applyChangesToComponent", function (value, mimeType, rangeParams, isExpertMode, selectedTab) {
-      // if (this.props.outputTex !== null && this.props.outputTex !== undefined && this.props.outputTex) {
-      //   if (mimeType === MIME_TYPE_HTML) {
-      //     console.warn("Html found when outputTex=true")
-      //     value = convertHtmlToPlainText(value)
-      //     mimeType = MIME_TYPE_PLAIN_TEXT
-      //   } else if (mimeType === MIME_TYPE_ZZISH_HTML_MATH) {
-      //     value = convertHtmlMathToTex(value)
-      //     mimeType = MIME_TYPE_TEX
-      //   }
-      // }
       // rangeParams, isExpertMode and selectedTab can be null, in which case we will set them
-      if (rangeParams === null) rangeParams = _this2.lastSetRangeParams;else _this2.rangeParamsToSetAfterComponentUpdate = rangeParams;
+      if (rangeParams === null) rangeParams = _this2.lastSetRangeParams;
+      _this2.afterComponentUpdateData = {
+        rangeParams: rangeParams,
+        value: value
+      };
       var options = _this2.props.options || DEFAULT_OPTIONS;
       if (isExpertMode === null) isExpertMode = options.isExpertMode;
       if (selectedTab === null) selectedTab = options.selectedTab; // Add this to the history
@@ -22110,7 +22100,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       }
 
       if (deleteToEmpty) {
-        console.log("deleteToEmpty");
+        // console.log("deleteToEmpty")
         var _new_rangeParams = {
           startNodeIndex: 0,
           startOffset: 1,
@@ -22207,9 +22197,9 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       var rangeParams = _this2._getRangeParams();
 
       rangeParams.startNodeIndex;
-      rangeParams.startOffset;
-      console.log("handleKeyDownArrowLeft");
-      console.log(rangeParams);
+      rangeParams.startOffset; // console.log("handleKeyDownArrowLeft")
+      // console.log(rangeParams)
+
       var new_globalOffset = rangeParams.endGlobalOffset - 1;
       var new_rangeParams = null;
 
@@ -22223,9 +22213,9 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
           startGlobalOffset: new_globalOffset,
           endGlobalOffset: new_globalOffset
         };
-      }
+      } // console.log(new_rangeParams)
+
 
-      console.log(new_rangeParams);
       e.preventDefault();
 
       _this2._setRangeParams(new_rangeParams);
@@ -22377,8 +22367,8 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
       if (new_accent === "") _this2.accent = "";else {
         e.preventDefault();
-        _this2.accent = new_accent;
-        console.log("Accent set: " + _this2.accent);
+        _this2.accent = new_accent; // console.log("Accent set: " + this.accent);
+
         return true;
       }
 
@@ -22443,41 +22433,43 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
           if (e.key === "i") _this2.styleText(e, "Italic");
           if (e.key === "u") _this2.styleText(e, "Underline"); // Don't apply superscript is ctrl ^, this is reserved for creating accents
 
-          if (/(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 === "=") _this2.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 === "_") _this2.styleText(e, "Subscript");
-          e.preventDefault();
-          return;
+          if (/(Win)/i.test(window.navigator.platform) && e.ctrlKey && (e.key === "6" || e.key === "^")) {// do nothing
+          } else {
+            // otherwise
+            if (e.key === "6" || e.key === "^" || e.key === "+" || e.key === "=") _this2.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 === "_") _this2.styleText(e, "Subscript");
+            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 === _this2.keyPressed && _this2.keyPressStartTime > 0) {
             if (e.key.length === 1 && ("a" <= e.key && e.key <= "z" || "A" <= e.key && e.key <= "Z" || e.key === "!" || e.key === "?")) {
               e.preventDefault();
@@ -22490,15 +22482,20 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
           var key = _this2.fetchAccentLetter();
 
           if (key === "a" || key === "e" || key === "i" || key === "o" || key === "u" || key === "c" || key === "l" || key === "n" || key === "s" || key === "?" || key === "!") {
+            console.log("showing/hiding accent bar");
+
             _this2.setState({
               showAccentBar: !_this2.state.showAccentBar
             });
           } else {
+            console.log("hiding accent bar");
+
             _this2.setState({
               showAccentBar: false
             });
           }
 
+          e.preventDefault();
           return;
         }
 
@@ -22513,9 +22510,14 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
         if (_this2.keyPressStartTime < 0) {
           _this2.keyPressStartTime = Date.now();
-          if (_this2.state.showAccentBar) _this2.setState({
-            showAccentBar: false
-          });
+
+          if (_this2.state.showAccentBar) {
+            console.log("Hiding accent bar 2");
+
+            _this2.setState({
+              showAccentBar: false
+            });
+          }
         }
 
         if (e.key === "Backspace") {
@@ -22609,8 +22611,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
         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");
-
+          // console.log("Handling character input at start of text node with small space")
           _this2.insertAfterSmallSpace(e.key, params);
 
           e.preventDefault();
@@ -22709,9 +22710,8 @@ 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();
 
@@ -22733,8 +22733,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this2), "updateActiveButtons", function () {
       try {
-        console.log("updateActiveButtons");
-
+        // console.log("updateActiveButtons")
         var rangeParams = _this2._getRangeParams();
 
         if (rangeParams === null || rangeParams === undefined) {
@@ -22803,20 +22802,21 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       if (clipboardData === null || clipboardData === undefined) {
         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 (var i = 0; i < clipboardData.types.length; i++) {
-        console.log(clipboardData.types[i] + ": " + clipboardData.getData(clipboardData.types[i]));
-      }
 
       var pasteHtml = clipboardData.getData("text/html");
 
       if (pasteHtml !== null && pasteHtml.length > 0) {
-        console.log("** Paste html");
-        console.log(pasteHtml);
-        pasteHtml = sanitiseHtml(pasteHtml);
-        console.log("** Santised paste html");
-        console.log(pasteHtml);
+        // console.log("** Paste html");
+        // console.log(pasteHtml);
+        pasteHtml = sanitiseHtml(pasteHtml); // console.log("** Santised paste html");
+        // console.log(pasteHtml);
 
         _this2.insertHtml(pasteHtml);
 
@@ -22872,9 +22872,9 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         // console.log(node)
 
         if (node === null || node === undefined) {
-          console.error("Could not find node with index: " + rangeParams.startNodeIndex);
-          console.log("Child nodes:");
-          console.log(_this2.editableDiv.childNodes);
+          console.error("Could not find node with index: " + rangeParams.startNodeIndex); // console.log("Child nodes:");
+          // console.log(this.editableDiv.childNodes);
+
           node = _this2._findFirstTextNode();
           offset = 0;
         }
@@ -23017,10 +23017,10 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
         var end_pos = _this2.markedRawText.indexOf(MARK, start_pos + MARK.length);
 
-        var oldRangeParams = _this2.getOldRangeParams();
+        var oldRangeParams = _this2.getOldRangeParams(); // console.log("Old range params")
+        // console.log(oldRangeParams)
+        // Handle case of empty string returned
 
-        console.log("Old range params");
-        console.log(oldRangeParams); // Handle case of empty string returned
 
         if (latex === "") {
           // console.log("Empty latex returned from equation editor")
@@ -23204,21 +23204,25 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
         var new_rangeParams = _objectSpread2({}, rangeParams);
 
-        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;
+        new_raw_text = removeMarks(insertCharacterBeforeMarks(raw_text, new_text)); // console.log("Range params before insert")
+        // console.log(rangeParams)
 
-        if (!selectInsertedText) {
-          new_rangeParams.startNodeIndex = new_rangeParams.endNodeIndex;
-          new_rangeParams.startOffset = new_rangeParams.endOffset;
-        } // console.log("Setting new range params: ")
+        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("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, _this2.props.mimeType, _this2.enableHtml());
@@ -23406,11 +23410,11 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         var node = _this2._findNodeWithIndex(rangeParams.endNodeIndex);
 
         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 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);
@@ -23433,11 +23437,10 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
           new_rangeParams.endOffset++;
         }
 
-        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);
+        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) {
@@ -23485,6 +23488,8 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       try {
         _this2.insertAccentLetter(event, oldCharacter, newCharacter);
 
+        console.log("Hiding accent bar 3");
+
         _this2.setState({
           showAccentBar: false
         });
@@ -23523,6 +23528,8 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       }
 
       try {
+        console.log("Hiding accent bar 4");
+
         _this2.setState({
           hasFocus: false,
           showAccentBar: false
@@ -23566,7 +23573,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     };
     _this2.moveCursorOnInsert = false; // Elements defining the current state of range
 
-    _this2.rangeParamsToSetAfterComponentUpdate = null; // Set this to update the selection after rendering
+    _this2.afterComponentUpdateData = null; // Set this to update the selection after rendering
 
     _this2.lastSetRangeParmas = null; // This is set automatically each time the range params are set with setRangeParams
 
@@ -23701,10 +23708,11 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
       try {
-        if (this.rangeParamsToSetAfterComponentUpdate !== null && this.rangeParamsToSetAfterComponentUpdate !== undefined) {
-          this._setRangeParams(this.rangeParamsToSetAfterComponentUpdate);
+        // console.log("componentDidUpdate")
+        if (this.afterComponentUpdateData !== null && this.afterComponentUpdateData !== undefined && this.afterComponentUpdateData.value === this.props.value) {
+          this._setRangeParams(this.afterComponentUpdateData.rangeParams);
 
-          this.rangeParamsToSetAfterComponentUpdate = null;
+          this.afterComponentUpdateData = null;
           this.updateActiveButtons();
         }
       } catch (error) {

package/dist/math-rich-input.css

@@ -233,136 +233,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 {
@@ -538,6 +408,136 @@
   animation: 0.4s fadeIn1;
   animation-fill-mode: forwards;
 }
+/* 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 
+} */
 .EquationEditor {
   height: auto;
   text-align: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zzish/math-rich-input",
-  "version": "0.1.29",
+  "version": "0.1.31",
   "description": "React component for user to enter rich text with embedded math equations.",
   "repository": {
     "type": "git",

package/src/MathRichInput.jsx

@@ -194,7 +194,7 @@ export default class MathRichInput extends React.Component {
     this.moveCursorOnInsert = false;
 
     // Elements defining the current state of range
-    this.rangeParamsToSetAfterComponentUpdate = null; // Set this to update the selection after rendering
+    this.afterComponentUpdateData = null; // Set this to update the selection after rendering
     this.lastSetRangeParmas = null; // This is set automatically each time the range params are set with setRangeParams
 
     this.lastSetActiveButtons = null;
@@ -286,20 +286,11 @@ export default class MathRichInput extends React.Component {
     isExpertMode,
     selectedTab
   ) => {
-    // if (this.props.outputTex !== null && this.props.outputTex !== undefined && this.props.outputTex) {
-    //   if (mimeType === MIME_TYPE_HTML) {
-    //     console.warn("Html found when outputTex=true")
-    //     value = convertHtmlToPlainText(value)
-    //     mimeType = MIME_TYPE_PLAIN_TEXT
-    //   } else if (mimeType === MIME_TYPE_ZZISH_HTML_MATH) {
-    //     value = convertHtmlMathToTex(value)
-    //     mimeType = MIME_TYPE_TEX
-    //   }
-    // }
 
     // rangeParams, isExpertMode and selectedTab can be null, in which case we will set them
     if (rangeParams === null) rangeParams = this.lastSetRangeParams;
-    else this.rangeParamsToSetAfterComponentUpdate = rangeParams;
+    
+    this.afterComponentUpdateData = {rangeParams, value}
 
     let options = this.props.options || DEFAULT_OPTIONS;
     if (isExpertMode === null) isExpertMode = options.isExpertMode;
@@ -461,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,
@@ -590,8 +581,8 @@ 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
     if (e.shiftKey && new_globalOffset > rangeParams.startGlobalOffset) {
@@ -605,7 +596,7 @@ export default class MathRichInput extends React.Component {
         endGlobalOffset: new_globalOffset,
       };
     }
-    console.log(new_rangeParams)
+    // console.log(new_rangeParams)
     e.preventDefault();
     this._setRangeParams(new_rangeParams);
     return;
@@ -785,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 !== "") {
@@ -866,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 &&
@@ -931,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;
       }
 
@@ -946,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") {
@@ -1038,7 +1037,7 @@ export default class MathRichInput extends React.Component {
       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")
+        // console.log("Handling character input at start of text node with small space")
         this.insertAfterSmallSpace(e.key, params);
         e.preventDefault();
         return;
@@ -1143,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");
@@ -1189,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(
@@ -1255,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 {
@@ -1308,12 +1306,14 @@ export default class MathRichInput extends React.Component {
 
   componentDidUpdate() {
     try {
+      // console.log("componentDidUpdate")
       if (
-        this.rangeParamsToSetAfterComponentUpdate !== null &&
-        this.rangeParamsToSetAfterComponentUpdate !== undefined
+        this.afterComponentUpdateData !== null &&
+        this.afterComponentUpdateData !== undefined &&
+        this.afterComponentUpdateData.value === this.props.value
       ) {
-        this._setRangeParams(this.rangeParamsToSetAfterComponentUpdate);
-        this.rangeParamsToSetAfterComponentUpdate = null;
+        this._setRangeParams(this.afterComponentUpdateData.rangeParams);
+        this.afterComponentUpdateData = null;
         this.updateActiveButtons();
       }
     } catch (error) {
@@ -1356,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;
       }
@@ -1498,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 === "") {
@@ -1722,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,
@@ -1956,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 };
@@ -1992,10 +2001,10 @@ export default class MathRichInput extends React.Component {
         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(
@@ -2108,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);
@@ -2137,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) {