@zzish/math-rich-input 0.1.16 → 0.1.19

package/dist/index.js

@@ -18947,18 +18947,18 @@ var EquationEditor = /*#__PURE__*/function (_React$Component) {
         _this.latexInput.focus();
 
         var insertParams = getLatexInsertionParams(symbol);
-        var insert = insertParams.latexWithMarks;
-        console.log("Insert params: ");
-        console.log(insertParams);
-        console.log(start + ":" + end);
-        console.log(oldLatex); // Move text before cursor into latex if double mark exists in latex
+        var insert = insertParams.latexWithMarks; //   console.log("Insert params: ");
+        //   console.log(insertParams);
+        //   console.log(start + ":" + end);
+        //   console.log(oldLatex);
+        // Move text before cursor into latex if double mark exists in latex
 
         var pos = insert.indexOf("##");
 
         if (pos >= 0) {
           if (start !== end) {
-            insert = insert.replace("##", oldLatex.substring(start, end));
-            console.log("insert: " + insert);
+            insert = insert.replace("##", oldLatex.substring(start, end)); //   console.log("insert: " + insert);
+
             oldLatex = oldLatex.substring(0, start) + oldLatex.substring(end);
             end = start;
           } else if (start > 0) {
@@ -19005,10 +19005,9 @@ var EquationEditor = /*#__PURE__*/function (_React$Component) {
           _this.latexInput.focus();
         });
       } catch (error) {
-        console.error(error);
-        console.log("Inserting: " + symbol);
-        console.log("into: " + _this.latexInput.value);
-        console.log("at: " + start + ":" + end);
+        console.error(error); //   console.log("Inserting: " + symbol);
+        //   console.log("into: " + this.latexInput.value);
+        //   console.log("at: " + start + ":" + end);
       }
     });
 
@@ -19242,7 +19241,6 @@ var EquationEditor = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this2 = this;
 
-      console.log("Rendering EquationEditor. Latex: " + this.state.latex);
       var katexHtml = null;
       var prettyLatex = null;
 
@@ -19718,7 +19716,6 @@ var AccentBar = /*#__PURE__*/function (_React$Component) {
           _this.shouldUpdateReplaceCharacters = false;
           var thisState = _this.state;
           setTimeout(function () {
-            // console.log("Focing update")
             _this.setState(thisState);
           }, 100);
         } else {
@@ -19806,8 +19803,7 @@ var AccentBar = /*#__PURE__*/function (_React$Component) {
       var allAccents = GLOBAL_default_accents;
       var accentKey = this.props.keyPressed;
       if (!this.isFullyMounted) accentKey = this.props.fetchAccentLetter();else if ((accentKey === "Backspace" || accentKey === "ArrowLeft" || accentKey === "ArrowRight") && !this.shouldUpdateReplaceCharacters) // Yes, this should indeed be a NOT
-        accentKey = this.props.fetchAccentLetter(); // console.log("Accent key:"+accentKey)
-
+        accentKey = this.props.fetchAccentLetter();
       var quickAccents = ACCENTS_FOR_LETTER[accentKey];
       this.letterForAccents = accentKey;
       if (quickAccents === null || quickAccents === undefined) quickAccents = []; // Set className
@@ -20279,7 +20275,6 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "showAccentBar", function (event) {
-      console.log("showAccentBar");
       if (!_this.state.showAccents) _this.accentLetter = _this.suppliedAccentLetterFetcher();
 
       _this.setState({
@@ -20290,8 +20285,6 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "hideAccentBar", function (event) {
-      console.log("hideAccentBar");
-
       _this.setState({
         showAccents: false
       });
@@ -20310,8 +20303,6 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleAccentButtonClick", function (event, oldCharacter, newCharacter) {
-      console.log("handleAccentButtonClick");
-
       _this.suppliedAccentLetterInserter(event, oldCharacter, newCharacter); // this.hideAccentBar(null)
 
     });
@@ -20389,7 +20380,6 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
           _this$props$enableMat,
           _this2 = this;
 
-      console.log("Rendering toolbar");
       this.suppliedClickHandler = this.props.onButtonClick;
       this.suppliedAccentLetterFetcher = this.props.fetchAccentLetter;
       this.suppliedAccentLetterInserter = this.props.insertAccentLetter;
@@ -21446,7 +21436,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this2), "applyChangesToComponent", function (value, mimeType, rangeParams, isExpertMode, selectedTab) {
-      console.log("applyChangesToComponent"); // if (this.props.outputTex !== null && this.props.outputTex !== undefined && this.props.outputTex) {
+      // 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)
@@ -21457,7 +21447,6 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       //   }
       // }
       // rangeParams, isExpertMode and selectedTab can be null, in which case we will set them
-
       if (rangeParams === null) rangeParams = _this2.lastSetRangeParams;else _this2.rangeParamsToSetAfterComponentUpdate = rangeParams;
       var options = _this2.props.options || DEFAULT_OPTIONS;
       if (isExpertMode === null) isExpertMode = options.isExpertMode;
@@ -21469,8 +21458,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         rangeParams: rangeParams
       });
 
-      if (_this2.undoHistory.length > MAX_HISTORY_LENGTH) _this2.undoHistory.shift();
-      _this2.value = value; // Call the parent handler to apply the changes
+      if (_this2.undoHistory.length > MAX_HISTORY_LENGTH) _this2.undoHistory.shift(); // Call the parent handler to apply the changes
 
       _this2.onChangeCallback({
         value: value,
@@ -21481,10 +21469,6 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       });
     });
 
-    _defineProperty(_assertThisInitialized(_this2), "getValue", function () {
-      return _this2.value;
-    });
-
     _defineProperty(_assertThisInitialized(_this2), "initialiseHistory", function () {
       if (_this2.initialHistoryState == null) _this2.initialHistoryState = {
         value: _this2.props.value,
@@ -21513,9 +21497,6 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this2), "undo", function () {
-      console.log("undo");
-      console.log(_this2.undoHistory);
-
       var currentState = _this2.undoHistory.pop();
 
       var previousState = _this2.undoHistory.pop();
@@ -21529,8 +21510,6 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         if (!_this2.deepEqual(redoLast, currentState)) _this2.redoHistory.push(currentState);
       } else _this2.redoHistory.push(currentState);
 
-      console.log(previousState);
-
       _this2.applyChangesToComponent(previousState.value, previousState.mimeType, previousState.rangeParams);
     });
 
@@ -21544,8 +21523,6 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this2), "_setRangeParams", function (params) {
       try {
-        console.log("_setRangeParams");
-        console.log(params);
         setRangeParams(_this2.editableDiv, params);
 
         _this2.setOldRangeParams(params);
@@ -21812,8 +21789,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
       if (offset === 0) {
         if (_this2.nodeStartsWithSmallSpace(node)) {
-          console.log("Offset = 0 and node starts with small space");
-
+          // console.log("Offset = 0 and node starts with small space");
           var _new_index2 = -1;
 
           var _new_offset2 = -1;
@@ -21846,7 +21822,6 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
             endNodeIndex: _new_index2,
             endOffset: _new_offset2
           };
-          console.log(_new_rangeParams3);
 
           _this2._setRangeParams(_new_rangeParams3);
 
@@ -21952,7 +21927,6 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this2), "handleKeyDownEnter", function (e) {
       try {
-        console.log("handleKeyDownEnter");
         if (_this2.enableMultiline()) _this2.insertNewLine(e);
       } catch (error) {
         console.error(error);
@@ -22096,7 +22070,6 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
             var _this = _assertThisInitialized(_this2);
 
             setTimeout(function () {
-              console.log(Date.now() - _this.keyPressStartTime);
               if (_this.keyPressStartTime > 0) if (Date.now() - _this.keyPressStartTime > 450) _this.setState({
                 showAccentBar: true
               });
@@ -22112,13 +22085,10 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         var endNode = _this2._findNodeWithIndex(params.endNodeIndex);
 
         if (!_this2.editableDivIsPlainText()) {
-          // console.log(params)
           if (params.startNodeIndex === -1) {
             console.error("Couldn't get range params");
             return;
-          } // console.log("Start node: "+startNode)
-          // console.log("End node: "+endNode)
-
+          }
 
           if (isKatexNode(startNode) || isKatexNode(endNode)) {
             console.error("User trying to edit inside latex node");
@@ -22539,12 +22509,16 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         //   this.markedRawText.substring(0,start_pos) +
         //   RAW_TEXT_MATH_START_TAG + latex + RAW_TEXT_MATH_END_TAG +
         //   this.markedRawText.substring(end_pos + MARK.length)
-
-        console.log("Old cursor pos: " + oldRangeParams.startNodeIndex + "->" + oldRangeParams.startOffset);
-        console.log("Old raw text: " + _this2.props.value);
-        console.log("Old raw text length: " + _this2.props.value.length);
-        console.log("Old marked raw text:" + _this2.markedRawText);
-        console.log("New raw text: " + new_raw_text);
+        //   console.log(
+        //     "Old cursor pos: " +
+        //       oldRangeParams.startNodeIndex +
+        //       "->" +
+        //       oldRangeParams.startOffset
+        //   );
+        //   console.log("Old raw text: " + this.props.value);
+        //   console.log("Old raw text length: " + this.props.value.length);
+        //   console.log("Old marked raw text:" + this.markedRawText);
+        //   console.log("New raw text: " + new_raw_text);
 
         var new_rangeParams = _this2.getOldRangeParams();
 
@@ -22684,11 +22658,11 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         new_rangeParams.startNodeIndex = rangeParams.startNodeIndex - 1;
         new_rangeParams.startOffset = new_offset;
         new_rangeParams.endNodeIndex = rangeParams.endNodeIndex - 1;
-        new_rangeParams.endOffset = new_offset;
-        console.log("About to apply new range params");
-        console.log(new_rangeParams);
-        console.log("Old nodes");
-        console.log(_this2.editableDiv.childNodes);
+        new_rangeParams.endOffset = new_offset; //   console.log("About to apply new range params");
+        //   console.log(new_rangeParams);
+        //   console.log("Old nodes");
+        //   console.log(this.editableDiv.childNodes);
+
         new_raw_text = removeEncodingIfPlainText(new_raw_text, _this2.state.mimeType, _this2.enableHtml());
 
         _this2.applyChangesToComponent(new_raw_text, _this2.state.mimeType, new_rangeParams, _this2.props.useExpertMode, _this2.props.selectedTab);
@@ -22720,12 +22694,12 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
           new_raw_text = removeMarks(insertCharacterBeforeMarks(raw_text, "\n"));
           new_rangeParams.startOffset++;
           new_rangeParams.endOffset++;
-        }
+        } //   console.log("About to apply new range params");
+        //   console.log(new_rangeParams);
+        //   console.log("Old nodes");
+        //   console.log(this.editableDiv.childNodes);
+
 
-        console.log("About to apply new range params");
-        console.log(new_rangeParams);
-        console.log("Old nodes");
-        console.log(_this2.editableDiv.childNodes);
         new_raw_text = removeEncodingIfPlainText(new_raw_text, _this2.state.mimeType, _this2.enableHtml());
 
         _this2.applyChangesToComponent(new_raw_text, _this2.state.mimeType, new_rangeParams, _this2.props.useExpertMode, _this2.props.selectedTab);
@@ -22736,8 +22710,6 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this2), "replaceNextLetter", function (new_char) {
       try {
-        console.log("Replace next letter");
-
         var rangeParams = _this2._getRangeParams();
 
         var node = _this2._findNodeWithIndex(rangeParams.endNodeIndex);
@@ -22834,8 +22806,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         superscript: false
       },
       keyPressed: ""
-    };
-    _this2.value = ""; // this.handleInput   = this.handleInput.bind(this);
+    }; // this.handleInput   = this.handleInput.bind(this);
     // this.handleKeyDown = this.handleKeyDown.bind(this);
     // this.handleKeyUp   = this.handleKeyUp.bind(this);
     // Remember the last key pressed
@@ -22923,7 +22894,6 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "setOldRangeParams",
     value: function setOldRangeParams(params) {
-      // console.log("Setting old range params: "+params.startNodeIndex+"->"+params.startOffset)
       this.oldRangeParams = params;
     }
   }, {
@@ -22931,8 +22901,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     value: function getOldRangeParams() {
       if (this.oldRangeParams === null || this.oldRangeParams === undefined) return null;
 
-      var params = _objectSpread2({}, this.oldRangeParams); // console.log("Getting old range params: "+params.startNodeIndex+"->"+params.startOffset)
-
+      var params = _objectSpread2({}, this.oldRangeParams);
 
       return params;
     }
@@ -22940,10 +22909,8 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     key: "_getRangeParams",
     value: function _getRangeParams() {
       var editableDiv = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-      // console.log("_getRangeParams")
       if (editableDiv === null) editableDiv = this.editableDiv;
-      var rangeParams = getRangeParams(editableDiv); // console.log(rangeParams)
-
+      var rangeParams = getRangeParams(editableDiv);
       return rangeParams;
     }
   }, {
@@ -22970,9 +22937,6 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      var onRef = this.props.onRef;
-      onRef && onRef(this);
-
       try {
         setupKatex();
         this.editableDiv.addEventListener("keydown", this.handleKeyDown);
@@ -22984,9 +22948,6 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      var onRef = this.props.onRef;
-      onRef && onRef(undefined);
-
       try {
         this.editableDiv.removeEventListener("keydown", this.handleKeyDown);
         this.editableDiv.removeEventListener("keyup", this.handleKeyUp);
@@ -22998,8 +22959,6 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
       try {
-        // console.log("Component updated:")
-        // console.log(this.editableDiv.childNodes)
         if (this.rangeParamsToSetAfterComponentUpdate !== null && this.rangeParamsToSetAfterComponentUpdate !== undefined) {
           this._setRangeParams(this.rangeParamsToSetAfterComponentUpdate);
 
@@ -23015,10 +22974,8 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this3 = this;
 
-      console.log("Rendering MathRichInput. Latex: " + this.props.value);
-
-      if (this.props.value === undefined) {
-        console.error('MathRichInput must have prop called "text"');
+      if (this.props.value == null) {
+        console.error('MathRichInput must have prop called "value"');
         console.log(this.props);
       }
 
@@ -23102,7 +23059,6 @@ function getAllTextNodes(node) {
     var render = node.getAttribute("data-render");
 
     if (render !== null && render === "false") {
-      console.log("Ignoring");
       return nodes;
     }
   } else if (node.nodeType !== Node.DOCUMENT_NODE) {
@@ -23170,9 +23126,7 @@ var MathRichArea = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      // console.log("Mime type: "+this.props.mimeType)
-      var html = rawTextToHtml(katex$1, this.props.children, this.props.mimeType); // console.log("html: "+html)
-
+      var html = rawTextToHtml(katex$1, this.props.children, this.props.mimeType);
       return /*#__PURE__*/React__default['default'].createElement("span", {
         dangerouslySetInnerHTML: {
           __html: html

package/dist/math-rich-input.css

@@ -69,6 +69,161 @@
   padding: 2px;
   margin: 0px 2px;
 }
+.EquationEditorModal-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: black;
+  z-index: 99;
+  animation: 0.3s shade;
+  animation-fill-mode: forwards;
+}
+
+@keyframes shade {
+  00% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0.6;
+  }
+}
+
+.EquationEditorModal {
+  background: white;
+  border: 1px solid #808080;
+  border-radius: 10px;
+  box-shadow: 0px 2px 5px 1px #a0a0a0;
+  position: fixed;
+  max-width: 500px;
+  width: 98%;
+  top: 50%;
+  left: 50%;
+  /* transform: translate(-50%,-50%); */
+  z-index: 100;
+  animation: 0.3s rise;
+  animation-fill-mode: forwards;
+}
+
+@keyframes rise {
+  00% {
+    transform: translate(-50%, 100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translate(-50%, -50%);
+    opacity: 1;
+  }
+}
+
+.EquationEditorModal-mobile {
+  background: white;
+  border: 1px solid #808080;
+  border-radius: 10px;
+  box-shadow: 0px 2px 5px 1px #a0a0a0;
+  position: fixed;
+  max-width: 500px;
+  width: 99%;
+  top: 0%;
+  left: 50%;
+  transform: translate(-50%, 1px);
+  z-index: 100;
+}
+
+.EquationEditorModal .title {
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+  color: #404040;
+  text-align: left;
+  background: #e0e0e0;
+  border: 0px;
+  border-radius: 5px 5px 0px 0px;
+  padding: 15px;
+  margin: 0px;
+}
+
+.EquationEditorModal-mobile .title {
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+  color: #404040;
+  text-align: left;
+  background: #e0e0e0;
+  border: 0px;
+  border-radius: 5px 5px 0px 0px;
+  height: 30px;
+  padding: 15px;
+  margin: 0px;
+}
+
+.EquationEditorModal .expertModeSwitch .switch {
+  margin-left: 10px;
+}
+
+/* The switch - the box around the slider */
+.EquationEditorModal .switch {
+  position: relative;
+  display: inline-block;
+  width: 35px;
+  height: 22px;
+}
+
+/* Hide default HTML checkbox */
+.EquationEditorModal .switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.EquationEditorModal .slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+.EquationEditorModal .slider:before {
+  position: absolute;
+  content: "";
+  height: 14px;
+  width: 14px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+
+.EquationEditorModal input:checked + .slider {
+  background-color: #663676;
+}
+
+.EquationEditorModal input:focus + .slider {
+  box-shadow: 0 0 1px #2196f3;
+}
+
+.EquationEditorModal input:checked + .slider:before {
+  -webkit-transform: translateX(13px);
+  -ms-transform: translateX(13px);
+  transform: translateX(13px);
+}
+
+/* Rounded sliders */
+.EquationEditorModal .slider.round {
+  border-radius: 18px;
+}
+
+.EquationEditorModal .slider.round:before {
+  border-radius: 50%;
+}
 /* Note that the top left position of the toolbar is set programatically in componentDidMount */
 
 .Toolbar {
@@ -374,161 +529,6 @@
   animation: 0.4s fadeIn1;
   animation-fill-mode: forwards;
 }
-.EquationEditorModal-background {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: black;
-  z-index: 99;
-  animation: 0.3s shade;
-  animation-fill-mode: forwards;
-}
-
-@keyframes shade {
-  00% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 0.6;
-  }
-}
-
-.EquationEditorModal {
-  background: white;
-  border: 1px solid #808080;
-  border-radius: 10px;
-  box-shadow: 0px 2px 5px 1px #a0a0a0;
-  position: fixed;
-  max-width: 500px;
-  width: 98%;
-  top: 50%;
-  left: 50%;
-  /* transform: translate(-50%,-50%); */
-  z-index: 100;
-  animation: 0.3s rise;
-  animation-fill-mode: forwards;
-}
-
-@keyframes rise {
-  00% {
-    transform: translate(-50%, 100%);
-    opacity: 0;
-  }
-  100% {
-    transform: translate(-50%, -50%);
-    opacity: 1;
-  }
-}
-
-.EquationEditorModal-mobile {
-  background: white;
-  border: 1px solid #808080;
-  border-radius: 10px;
-  box-shadow: 0px 2px 5px 1px #a0a0a0;
-  position: fixed;
-  max-width: 500px;
-  width: 99%;
-  top: 0%;
-  left: 50%;
-  transform: translate(-50%, 1px);
-  z-index: 100;
-}
-
-.EquationEditorModal .title {
-  display: flex;
-  justify-content: space-between;
-  font-size: 14px;
-  color: #404040;
-  text-align: left;
-  background: #e0e0e0;
-  border: 0px;
-  border-radius: 5px 5px 0px 0px;
-  padding: 15px;
-  margin: 0px;
-}
-
-.EquationEditorModal-mobile .title {
-  display: flex;
-  justify-content: space-between;
-  font-size: 14px;
-  color: #404040;
-  text-align: left;
-  background: #e0e0e0;
-  border: 0px;
-  border-radius: 5px 5px 0px 0px;
-  height: 30px;
-  padding: 15px;
-  margin: 0px;
-}
-
-.EquationEditorModal .expertModeSwitch .switch {
-  margin-left: 10px;
-}
-
-/* The switch - the box around the slider */
-.EquationEditorModal .switch {
-  position: relative;
-  display: inline-block;
-  width: 35px;
-  height: 22px;
-}
-
-/* Hide default HTML checkbox */
-.EquationEditorModal .switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-/* The slider */
-.EquationEditorModal .slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #ccc;
-  -webkit-transition: 0.4s;
-  transition: 0.4s;
-}
-
-.EquationEditorModal .slider:before {
-  position: absolute;
-  content: "";
-  height: 14px;
-  width: 14px;
-  left: 4px;
-  bottom: 4px;
-  background-color: white;
-  -webkit-transition: 0.4s;
-  transition: 0.4s;
-}
-
-.EquationEditorModal input:checked + .slider {
-  background-color: #663676;
-}
-
-.EquationEditorModal input:focus + .slider {
-  box-shadow: 0 0 1px #2196f3;
-}
-
-.EquationEditorModal input:checked + .slider:before {
-  -webkit-transform: translateX(13px);
-  -ms-transform: translateX(13px);
-  transform: translateX(13px);
-}
-
-/* Rounded sliders */
-.EquationEditorModal .slider.round {
-  border-radius: 18px;
-}
-
-.EquationEditorModal .slider.round:before {
-  border-radius: 50%;
-}
 .EquationEditor {
   height: auto;
   text-align: center;

package/package.json

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

package/src/AccentBar.jsx

@@ -663,7 +663,6 @@ export default class AccentBar extends React.Component {
         this.shouldUpdateReplaceCharacters = false;
         let thisState = this.state;
         setTimeout(() => {
-          // console.log("Focing update")
           this.setState(thisState);
         }, 100);
       } else {
@@ -692,8 +691,6 @@ export default class AccentBar extends React.Component {
       // Yes, this should indeed be a NOT
       accentKey = this.props.fetchAccentLetter();
 
-    // console.log("Accent key:"+accentKey)
-
     let quickAccents = ACCENTS_FOR_LETTER[accentKey];
     this.letterForAccents = accentKey;
     if (quickAccents === null || quickAccents === undefined) quickAccents = [];

package/src/EquationEditor.jsx

@@ -212,17 +212,17 @@ export default class EquationEditor extends React.Component {
 
       let insertParams = getLatexInsertionParams(symbol);
       let insert = insertParams.latexWithMarks;
-      console.log("Insert params: ");
-      console.log(insertParams);
-      console.log(start + ":" + end);
-      console.log(oldLatex);
+      //   console.log("Insert params: ");
+      //   console.log(insertParams);
+      //   console.log(start + ":" + end);
+      //   console.log(oldLatex);
 
       // Move text before cursor into latex if double mark exists in latex
       let pos = insert.indexOf("##");
       if (pos >= 0) {
         if (start !== end) {
           insert = insert.replace("##", oldLatex.substring(start, end));
-          console.log("insert: " + insert);
+          //   console.log("insert: " + insert);
           oldLatex = oldLatex.substring(0, start) + oldLatex.substring(end);
           end = start;
         } else if (start > 0) {
@@ -278,9 +278,9 @@ export default class EquationEditor extends React.Component {
       });
     } catch (error) {
       console.error(error);
-      console.log("Inserting: " + symbol);
-      console.log("into: " + this.latexInput.value);
-      console.log("at: " + start + ":" + end);
+      //   console.log("Inserting: " + symbol);
+      //   console.log("into: " + this.latexInput.value);
+      //   console.log("at: " + start + ":" + end);
     }
   };
 
@@ -410,7 +410,6 @@ export default class EquationEditor extends React.Component {
   };
 
   render() {
-    console.log("Rendering EquationEditor. Latex: " + this.state.latex);
     let katexHtml = null;
     let prettyLatex = null;
     if (this.props.useExpertMode) {

package/src/MathRichArea.jsx

@@ -1,108 +1,99 @@
-import React from 'react'
+import React from "react";
 
 import katex from "katex";
-import {setupKatex} from "./katexHelper"
-import {rawTextToHtml} from './mathRichInputHelper'
-import {MIME_TYPE_TEX, MIME_TYPE_HTML, MIME_TYPE_ZZISH_HTML_MATH,
-        isTextLatexMath, isTextHtml, isTextHtmlMath} from './mimeTypeHelper'
-
-
-function getAllTextNodes(node, nodes=null) {
+import { setupKatex } from "./katexHelper";
+import { rawTextToHtml } from "./mathRichInputHelper";
+import {
+  MIME_TYPE_TEX,
+  MIME_TYPE_HTML,
+  MIME_TYPE_ZZISH_HTML_MATH,
+  isTextLatexMath,
+  isTextHtml,
+  isTextHtmlMath,
+} from "./mimeTypeHelper";
+
+function getAllTextNodes(node, nodes = null) {
   if (node === null) {
-    console.warn("Deverloper supplied a null node. Ignoring")
-    return nodes
+    console.warn("Deverloper supplied a null node. Ignoring");
+    return nodes;
   }
 
   if (nodes === null) {
-    nodes = []
+    nodes = [];
   }
 
   if (node.nodeType === Node.TEXT_NODE) {
-    nodes.push(node)
-    return nodes
+    nodes.push(node);
+    return nodes;
   }
   if (node.nodeType === Node.ELEMENT_NODE) {
     if (node.className === "katex" || node.className === "MathRichInput")
-      return nodes
-    if (node.tagName === "SCRIPT")
-      return nodes
-    let render = node.getAttribute("data-render")
+      return nodes;
+    if (node.tagName === "SCRIPT") return nodes;
+    let render = node.getAttribute("data-render");
     if (render !== null && render === "false") {
-      console.log("Ignoring")
-      return nodes
-    }      
+      return nodes;
+    }
   } else if (node.nodeType !== Node.DOCUMENT_NODE) {
-    return nodes
+    return nodes;
   }
 
-  if (node.childNodes === null || node.childNodes === undefined)
-    return nodes
+  if (node.childNodes === null || node.childNodes === undefined) return nodes;
 
   for (let i = 0; i < node.childNodes.length; i++)
-    getAllTextNodes(node.childNodes[i], nodes)
+    getAllTextNodes(node.childNodes[i], nodes);
 
-  return nodes
+  return nodes;
 }
 
 export function renderMathInNode(node) {
   try {
-    let textNodes = getAllTextNodes(node)
+    let textNodes = getAllTextNodes(node);
     for (let i = 0; i < textNodes.length; i++) {
       try {
-        const text = textNodes[i].nodeValue
-        
-        let mime_type = null
-        if (isTextHtmlMath(text))
-          mime_type = MIME_TYPE_ZZISH_HTML_MATH
-        else if (isTextHtml(text))
-          mime_type = MIME_TYPE_HTML
-        else if (isTextLatexMath(text))
-          mime_type = MIME_TYPE_TEX
+        const text = textNodes[i].nodeValue;
+
+        let mime_type = null;
+        if (isTextHtmlMath(text)) mime_type = MIME_TYPE_ZZISH_HTML_MATH;
+        else if (isTextHtml(text)) mime_type = MIME_TYPE_HTML;
+        else if (isTextLatexMath(text)) mime_type = MIME_TYPE_TEX;
 
         if (mime_type !== null) {
-          const html = rawTextToHtml(katex, text, mime_type)
-          const new_node = document.createElement("span")
-          new_node.innerHTML = html
-          textNodes[i].replaceWith(new_node)
+          const html = rawTextToHtml(katex, text, mime_type);
+          const new_node = document.createElement("span");
+          new_node.innerHTML = html;
+          textNodes[i].replaceWith(new_node);
         }
       } catch (error) {
-        console.log(error)
+        console.log(error);
       }
     }
   } catch (error) {
-    console.log(error)
+    console.log(error);
   }
 }
 
 export function renderMathInNodeArray(nodes) {
-  for (let i = 0; i < nodes.length; i++)
-    renderMathInNode(nodes[i])
+  for (let i = 0; i < nodes.length; i++) renderMathInNode(nodes[i]);
 }
 
 export default class MathRichArea extends React.Component {
-    
   constructor(props) {
     super(props);
-    this.state = {
-    };
+    this.state = {};
   }
 
   componentDidMount() {
     try {
-      setupKatex()
+      setupKatex();
     } catch (error) {
-      console.error(error)
+      console.error(error);
     }
   }
 
   render() {
-    // console.log("Mime type: "+this.props.mimeType)
-    let html = rawTextToHtml(katex, this.props.children, this.props.mimeType)
-    // console.log("html: "+html)
+    let html = rawTextToHtml(katex, this.props.children, this.props.mimeType);
 
-    return <span dangerouslySetInnerHTML={{__html: html}}></span>
+    return <span dangerouslySetInnerHTML={{ __html: html }}></span>;
   }
 }
-
-
-

package/src/MathRichInput.jsx

@@ -70,7 +70,6 @@ export default class MathRichInput extends React.Component {
       },
       keyPressed: "",
     };
-    this.value = "";
 
     // this.handleInput   = this.handleInput.bind(this);
     // this.handleKeyDown = this.handleKeyDown.bind(this);
@@ -189,8 +188,6 @@ export default class MathRichInput extends React.Component {
     isExpertMode,
     selectedTab
   ) => {
-    console.log("applyChangesToComponent");
-
     // if (this.props.outputTex !== null && this.props.outputTex !== undefined && this.props.outputTex) {
     //   if (mimeType === MIME_TYPE_HTML) {
     //     console.warn("Html found when outputTex=true")
@@ -214,15 +211,10 @@ export default class MathRichInput extends React.Component {
     this.undoHistory.push({ value, mimeType, rangeParams });
     if (this.undoHistory.length > MAX_HISTORY_LENGTH) this.undoHistory.shift();
 
-    this.value = value;
     // Call the parent handler to apply the changes
     this.onChangeCallback({ value, mimeType }, { isExpertMode, selectedTab });
   };
 
-  getValue = () => {
-    return this.value;
-  };
-
   initialiseHistory = () => {
     if (this.initialHistoryState == null)
       this.initialHistoryState = {
@@ -259,8 +251,6 @@ export default class MathRichInput extends React.Component {
   };
 
   undo = () => {
-    console.log("undo");
-    console.log(this.undoHistory);
     const currentState = this.undoHistory.pop();
 
     let previousState = this.undoHistory.pop();
@@ -274,8 +264,6 @@ export default class MathRichInput extends React.Component {
         this.redoHistory.push(currentState);
     } else this.redoHistory.push(currentState);
 
-    console.log(previousState);
-
     this.applyChangesToComponent(
       previousState.value,
       previousState.mimeType,
@@ -295,7 +283,6 @@ export default class MathRichInput extends React.Component {
   };
 
   setOldRangeParams(params) {
-    // console.log("Setting old range params: "+params.startNodeIndex+"->"+params.startOffset)
     this.oldRangeParams = params;
   }
 
@@ -303,24 +290,18 @@ export default class MathRichInput extends React.Component {
     if (this.oldRangeParams === null || this.oldRangeParams === undefined)
       return null;
     let params = { ...this.oldRangeParams };
-    // console.log("Getting old range params: "+params.startNodeIndex+"->"+params.startOffset)
     return params;
   }
 
   _getRangeParams(editableDiv = null) {
-    // console.log("_getRangeParams")
     if (editableDiv === null) editableDiv = this.editableDiv;
     let rangeParams = getRangeParams(editableDiv);
-    // console.log(rangeParams)
     return rangeParams;
   }
 
   _setRangeParams = (params) => {
     try {
-      console.log("_setRangeParams");
-      console.log(params);
       setRangeParams(this.editableDiv, params);
-
       this.setOldRangeParams(params);
       this.lastSetRangeParmas = params;
     } catch (error) {
@@ -631,7 +612,7 @@ export default class MathRichInput extends React.Component {
     // Deal with case of inserted small space at start of <p> element
     if (offset === 0) {
       if (this.nodeStartsWithSmallSpace(node)) {
-        console.log("Offset = 0 and node starts with small space");
+        // console.log("Offset = 0 and node starts with small space");
         let new_index = -1;
         let new_offset = -1;
 
@@ -660,7 +641,6 @@ export default class MathRichInput extends React.Component {
           endNodeIndex: new_index,
           endOffset: new_offset,
         };
-        console.log(new_rangeParams);
         this._setRangeParams(new_rangeParams);
 
         e.preventDefault();
@@ -792,7 +772,6 @@ export default class MathRichInput extends React.Component {
 
   handleKeyDownEnter = (e) => {
     try {
-      console.log("handleKeyDownEnter");
       if (this.enableMultiline()) this.insertNewLine(e);
     } catch (error) {
       console.error(error);
@@ -962,7 +941,6 @@ export default class MathRichInput extends React.Component {
         ) {
           let _this = this;
           setTimeout(function () {
-            console.log(Date.now() - _this.keyPressStartTime);
             if (_this.keyPressStartTime > 0)
               if (Date.now() - _this.keyPressStartTime > 450)
                 _this.setState({ showAccentBar: true });
@@ -975,14 +953,10 @@ export default class MathRichInput extends React.Component {
       let startNode = this._findNodeWithIndex(params.startNodeIndex);
       let endNode = this._findNodeWithIndex(params.endNodeIndex);
       if (!this.editableDivIsPlainText()) {
-        // console.log(params)
         if (params.startNodeIndex === -1) {
           console.error("Couldn't get range params");
           return;
         }
-        // console.log("Start node: "+startNode)
-        // console.log("End node: "+endNode)
-
         if (isKatexNode(startNode) || isKatexNode(endNode)) {
           console.error("User trying to edit inside latex node");
           e.preventDefault();
@@ -1193,8 +1167,6 @@ export default class MathRichInput extends React.Component {
   };
 
   componentDidMount() {
-    const onRef = this.props.onRef;
-    onRef && onRef(this);
     try {
       setupKatex();
 
@@ -1206,8 +1178,6 @@ export default class MathRichInput extends React.Component {
   }
 
   componentWillUnmount() {
-    const onRef = this.props.onRef;
-    onRef && onRef(undefined);
     try {
       this.editableDiv.removeEventListener("keydown", this.handleKeyDown);
       this.editableDiv.removeEventListener("keyup", this.handleKeyUp);
@@ -1218,8 +1188,6 @@ export default class MathRichInput extends React.Component {
 
   componentDidUpdate() {
     try {
-      // console.log("Component updated:")
-      // console.log(this.editableDiv.childNodes)
       if (
         this.rangeParamsToSetAfterComponentUpdate !== null &&
         this.rangeParamsToSetAfterComponentUpdate !== undefined
@@ -1485,16 +1453,16 @@ export default class MathRichInput extends React.Component {
       //   RAW_TEXT_MATH_START_TAG + latex + RAW_TEXT_MATH_END_TAG +
       //   this.markedRawText.substring(end_pos + MARK.length)
 
-      console.log(
-        "Old cursor pos: " +
-          oldRangeParams.startNodeIndex +
-          "->" +
-          oldRangeParams.startOffset
-      );
-      console.log("Old raw text: " + this.props.value);
-      console.log("Old raw text length: " + this.props.value.length);
-      console.log("Old marked raw text:" + this.markedRawText);
-      console.log("New raw text: " + new_raw_text);
+      //   console.log(
+      //     "Old cursor pos: " +
+      //       oldRangeParams.startNodeIndex +
+      //       "->" +
+      //       oldRangeParams.startOffset
+      //   );
+      //   console.log("Old raw text: " + this.props.value);
+      //   console.log("Old raw text length: " + this.props.value.length);
+      //   console.log("Old marked raw text:" + this.markedRawText);
+      //   console.log("New raw text: " + new_raw_text);
 
       let new_rangeParams = this.getOldRangeParams();
       if (this.moveCursorOnInsert) {
@@ -1670,10 +1638,10 @@ export default class MathRichInput extends React.Component {
       new_rangeParams.endNodeIndex = rangeParams.endNodeIndex - 1;
       new_rangeParams.endOffset = new_offset;
 
-      console.log("About to apply new range params");
-      console.log(new_rangeParams);
-      console.log("Old nodes");
-      console.log(this.editableDiv.childNodes);
+      //   console.log("About to apply new range params");
+      //   console.log(new_rangeParams);
+      //   console.log("Old nodes");
+      //   console.log(this.editableDiv.childNodes);
 
       new_raw_text = removeEncodingIfPlainText(
         new_raw_text,
@@ -1725,10 +1693,10 @@ export default class MathRichInput extends React.Component {
         new_rangeParams.endOffset++;
       }
 
-      console.log("About to apply new range params");
-      console.log(new_rangeParams);
-      console.log("Old nodes");
-      console.log(this.editableDiv.childNodes);
+      //   console.log("About to apply new range params");
+      //   console.log(new_rangeParams);
+      //   console.log("Old nodes");
+      //   console.log(this.editableDiv.childNodes);
 
       new_raw_text = removeEncodingIfPlainText(
         new_raw_text,
@@ -1750,7 +1718,6 @@ export default class MathRichInput extends React.Component {
 
   replaceNextLetter = (new_char) => {
     try {
-      console.log("Replace next letter");
       let rangeParams = this._getRangeParams();
       let node = this._findNodeWithIndex(rangeParams.endNodeIndex);
       let offset = rangeParams.endOffset + 1; // next letter
@@ -1867,10 +1834,8 @@ export default class MathRichInput extends React.Component {
   };
 
   render() {
-    console.log("Rendering MathRichInput. Latex: " + this.props.value);
-
-    if (this.props.value === undefined) {
-      console.error('MathRichInput must have prop called "text"');
+    if (this.props.value == null) {
+      console.error('MathRichInput must have prop called "value"');
       console.log(this.props);
     }
 

package/src/Toolbar.jsx

@@ -38,7 +38,6 @@ export default class Toolbar extends React.Component {
   };
 
   showAccentBar = (event) => {
-    console.log("showAccentBar");
     if (!this.state.showAccents)
       this.accentLetter = this.suppliedAccentLetterFetcher();
     this.setState({ showAccents: true });
@@ -46,7 +45,6 @@ export default class Toolbar extends React.Component {
   };
 
   hideAccentBar = (event) => {
-    console.log("hideAccentBar");
     this.setState({ showAccents: false });
   };
 
@@ -61,7 +59,6 @@ export default class Toolbar extends React.Component {
   };
 
   handleAccentButtonClick = (event, oldCharacter, newCharacter) => {
-    console.log("handleAccentButtonClick");
     this.suppliedAccentLetterInserter(event, oldCharacter, newCharacter);
     // this.hideAccentBar(null)
   };
@@ -123,7 +120,6 @@ export default class Toolbar extends React.Component {
   }
 
   render() {
-    console.log("Rendering toolbar");
     this.suppliedClickHandler = this.props.onButtonClick;
     this.suppliedAccentLetterFetcher = this.props.fetchAccentLetter;
     this.suppliedAccentLetterInserter = this.props.insertAccentLetter;