@zzish/math-rich-input 0.1.2 → 0.1.4

package/dist/index.js

@@ -20466,8 +20466,6 @@ function isTextLatexMath(text) {
   // We need at least two dollar signs to be latex
   var i = text.indexOf("$");
   if (i < 0) return false;
-  var j = text.indexOf("\\$");
-  if (j >= 0) return true;
   i = text.indexOf("$", i + 1);
   if (i < 0) return false; // Lets try and extract the potentially latex nodes
 
@@ -20530,15 +20528,15 @@ function isTextLatexMath(text) {
         var allWords = true;
         var longWord = false;
 
-        for (var _j = 0; _j < words.length; _j++) {
+        for (var j = 0; j < words.length; j++) {
           // console.log(j+":"+words[j])
-          if (words[_j].length > 0 && WORDS_REG_EXP.test(words[_j]) === false) {
+          if (words[j].length > 0 && WORDS_REG_EXP.test(words[j]) === false) {
             // console.log("Not: "+words[j])
             allWords = false;
             break;
           }
 
-          if (words[_j].length >= 3) longWord = true;
+          if (words[j].length >= 3) longWord = true;
         }
 
         if (allWords && longWord) return false;
@@ -20621,25 +20619,18 @@ function determineMimeType(text) {
         {this.test("$a bcd> e$", "application/x-tex")}
 */
 
-var RAW_TEXT_MATH_START_TAG_TEX = "\\[";
-var RAW_TEXT_MATH_END_TAG_TEX = "\\]";
+var RAW_TEXT_MATH_START_TAG_TEX = "$";
+var RAW_TEXT_MATH_END_TAG_TEX = "$";
 var RAW_TEXT_MATH_START_TAG_HTML_MATH = "<math>";
 var RAW_TEXT_MATH_END_TAG_HTML_MATH = "</math>";
 var INLINE_TEX_REG_EXP = /\$\$[\s\S]+?\$\$|\\\[[\s\S]+?\\\]|\\\([\s\S]+?\\\)|\$[^$\\]*(?:\\.[^$\\]*)*\$/g;
-var BLOCK_TEX_REG_EXP = /\$\$[\s\S]+?\$\$|\\\[[\s\S]+?\\\]/g; // const INLINE_TEX_REG_EXP = /(?<!\\)\$[\s\S]+?(?<!\\)\$/g
-// In general, (?<!Y)X matches an X that is not preceded by a Y.  so (?<!\\)\$
-// const INLINE_TEX_REG_EXP = /(?<!\\)(?:((?<!\$)\${1,2}(?!\$))|(\\\()|(\\\[)|(\\begin\{equation\}))(?(1)(.*?)(?<!\\)(?<!\$)\1(?!\$)|(?:(.*(?R)?.*)(?<!\\)(?:(?(2)\\\)|(?(3)\\\]|\\end\{equation\})))))/
-// const HTML_MATH_REG_EXP = /<math>.*?<\/math>/gi;
+var BLOCK_TEX_REG_EXP = /\$\$[\s\S]+?\$\$|\\\[[\s\S]+?\\\]/g; // const HTML_MATH_REG_EXP = /<math>.*?<\/math>/gi;
 
 var HTML_MATH_REG_EXP = /<math>[\s\S]*?<\/math>/gi;
 var SPAN_OPEN_BASE = "<span class=\"base\">";
 var SPAN_CLOSE = "</span>";
-var MARK$1 = String.fromCharCode(0); // const MARK = "_M_A_R_K_"
-
+var MARK$1 = "_M_A_R_K_";
 var MARK_REG_EXP$1 = new RegExp(MARK$1, "g");
-var TEMP_CHAR = String.fromCharCode(1);
-var TEMP_CHAR_REG_EXP = new RegExp(TEMP_CHAR, "g");
-var DOLLAR_SLASH_REG_EXP = /\\\$/g;
 var SMALL_SPACE_CHAR_CODE$1 = 8203;
 var SMALL_SPACE$1 = String.fromCharCode(SMALL_SPACE_CHAR_CODE$1);
 var SMALL_SPACE_REG_EXP = new RegExp(SMALL_SPACE$1, "g");
@@ -20781,6 +20772,7 @@ function getLatex(node) {
     // <annotation encoding="application/x-tex">L' = {L}{\sqrt{1-\frac{v^2}{c^2}}}</annotation>
     var annotation = getFirstDescendentByTagName(node, "annotation");
     var latex = annotation.childNodes[0].nodeValue;
+    latex = decodeLatex(latex);
     return latex;
   } catch (error) {
     console.error(error);
@@ -20830,60 +20822,41 @@ var decodeFromHtml = function () {
 // Note we don't need to encode it so do nothing here
 
 
-function encodeToLatex(text) {
+function encodeLatex(text) {
   // console.log("Pre-encoded: "+text)
-  text = text.replace(/\$/g, "\\$"); // console.log("Post-encoded: "+text)
-
+  // console.log("Post-encoded: "+text)
   return text;
 } // Note we don't need to decode it so do nothing here
 
 
-function decodeFromLatex(text) {
+function decodeLatex(text) {
   // console.log("Pre-decoded: "+text)
-  text = text.replace(/\\\$/g, "$"); // console.log("Post-decoded: "+text)
-
+  // console.log("Post-decoded: "+text)
   return text;
 }
 
-function removeEncodingIfPlainText(text, mimeType, useHtmlMath) {
-  if (mimeType !== MIME_TYPE_PLAIN_TEXT$1) return text;
-  if (useHtmlMath) return decodeFromHtml(text);else return decodeFromLatex(text);
-}
-
 function addText(arrayOfText, text, mark, offset) {
-  var useHtmlMath = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
-
   // console.log("Mark: "+mark)
   if (offset === 0) {
     if (mark) {
-      arrayOfText.push(MARK$1);
+      arrayOfText.push(MARK$1); // arrayOfText.push(" ")
+
       arrayOfText.push(MARK$1);
     }
 
     arrayOfText.push(text);
   } else {
-    if (useHtmlMath) {
-      var decoded = decodeFromHtml(text);
-      arrayOfText.push(encodeToHtml(decoded.substring(0, offset)));
+    var decoded = decodeFromHtml(text); // console.log("Decoded: "+decoded)
 
-      if (mark) {
-        arrayOfText.push(MARK$1);
-        arrayOfText.push(MARK$1);
-      }
-
-      arrayOfText.push(encodeToHtml(decoded.substring(offset)));
-    } else {
-      var _decoded = decodeFromLatex(text);
+    arrayOfText.push(encodeToHtml(decoded.substring(0, offset)));
 
-      arrayOfText.push(encodeToLatex(_decoded.substring(0, offset)));
-
-      if (mark) {
-        arrayOfText.push(MARK$1);
-        arrayOfText.push(MARK$1);
-      }
+    if (mark) {
+      arrayOfText.push(MARK$1); // arrayOfText.push(" ")
 
-      arrayOfText.push(encodeToLatex(_decoded.substring(offset)));
+      arrayOfText.push(MARK$1);
     }
+
+    arrayOfText.push(encodeToHtml(decoded.substring(offset)));
   }
 }
 
@@ -20896,7 +20869,7 @@ function addTextForNode(node, arrayOfText) {
 
   try {
     if (isTextNode(node)) {
-      addText(arrayOfText, useHtmlMath ? encodeToHtml(node.nodeValue) : encodeToLatex(node.nodeValue), mark, offset, useHtmlMath);
+      addText(arrayOfText, useHtmlMath ? encodeToHtml(node.nodeValue) : node.nodeValue, mark, offset, useHtmlMath);
     } else if (isBrNode(node)) {
       useHtmlMath && arrayOfText.push("<br>");
     } else if (isBIUNode(node)) {
@@ -20910,7 +20883,7 @@ function addTextForNode(node, arrayOfText) {
     } else if (isKatexNode(node)) {
       if (mark) arrayOfText.push(MARK$1);
       arrayOfText.push(useHtmlMath ? RAW_TEXT_MATH_START_TAG_HTML_MATH : RAW_TEXT_MATH_START_TAG_TEX);
-      arrayOfText.push(getLatex(node));
+      arrayOfText.push(encodeLatex(getLatex(node)));
       arrayOfText.push(useHtmlMath ? RAW_TEXT_MATH_END_TAG_HTML_MATH : RAW_TEXT_MATH_END_TAG_TEX);
       if (mark) arrayOfText.push(MARK$1);
     } else {
@@ -20957,7 +20930,6 @@ function elementToMarkedRawText(element) {
   var raw_text = result.join(""); // remove any zero-width spaces we added to the html
 
   raw_text = raw_text.replace(SMALL_SPACE_REG_EXP, '');
-  console.log("Marked raw text: " + raw_text);
   return raw_text;
 }
 function replaceMarksWithMath(markedRawText, latex) {
@@ -21037,29 +21009,22 @@ function renderLatexString(katex, s, t) {
 function rawTextToHtml(katex, string, mimeType) {
   if (string === "") return "";
   if (mimeType === null || mimeType === undefined || mimeType === "") mimeType = determineMimeType(string);
-  if (mimeType === MIME_TYPE_PLAIN_TEXT$1) return encodeToHtml(string);
-  var parseAsTex;
-  if (mimeType === MIME_TYPE_TEX$1 || mimeType === MIME_TYPE_LATEX) parseAsTex = true;else if (mimeType === MIME_TYPE_HTML$1 || mimeType === MIME_TYPE_ZZISH_HTML_MATH$1) parseAsTex = false;else {
-    parseAsTex = false;
-    console.error("Unknown mime type: " + mimeType);
-  } // console.log("Original string: "+string)
+  if (mimeType === MIME_TYPE_PLAIN_TEXT$1) return string;
+  var parseAsTex = false;
+  if (mimeType === MIME_TYPE_TEX$1 || mimeType === MIME_TYPE_LATEX) parseAsTex = true;
 
-  if (parseAsTex) string = string.replace(DOLLAR_SLASH_REG_EXP, TEMP_CHAR); // console.log("Modded string: "+string)
+  if (!parseAsTex && mimeType !== MIME_TYPE_HTML$1 && mimeType !== MIME_TYPE_ZZISH_HTML_MATH$1) {
+    console.error("Unknown mime type: " + mimeType);
+  }
 
   var stringElements = string.split(parseAsTex ? INLINE_TEX_REG_EXP : HTML_MATH_REG_EXP); // Insert small space at start of first element if it is an empty element
 
   if (stringElements[0] === "") // This means the original string stars with latex
-    stringElements[0] = "&#" + SMALL_SPACE$1.charCodeAt(0);
+    stringElements[0] = "&#" + SMALL_SPACE$1.charCodeAt(0); // Insert small space at end of <p></p> elements so that empty lines get rendered
 
-  if (parseAsTex) {
+  if (mimeType === MIME_TYPE_ZZISH_HTML_MATH$1 || mimeType === MIME_TYPE_HTML$1) {
     for (var i = 0; i < stringElements.length; i++) {
-      stringElements[i] = stringElements[i].replace(TEMP_CHAR_REG_EXP, "$");
-      stringElements[i] = encodeToHtml(stringElements[i]);
-    }
-  } else {
-    // Insert small space at end of <p></p> elements so that empty lines get rendered
-    for (var _i = 0; _i < stringElements.length; _i++) {
-      stringElements[_i] = stringElements[_i].replace(P_TAG_REG_EXP, P_ELEMENT_SMALL_SPACE);
+      stringElements[i] = stringElements[i].replace(P_TAG_REG_EXP, P_ELEMENT_SMALL_SPACE);
     }
   }
 
@@ -21067,22 +21032,13 @@ function rawTextToHtml(katex, string, mimeType) {
   var latexElements = string.match(parseAsTex ? INLINE_TEX_REG_EXP : HTML_MATH_REG_EXP);
   var result = [];
 
-  for (var _i2 = 0; _i2 < stringElements.length; _i2++) {
-    result.push(stringElements[_i2]);
-
-    if (latexElements[_i2]) {
-      var element = latexElements[_i2];
-      var type = void 0;
-
-      if (parseAsTex) {
-        type = getDisplayType(element);
-        element = stripDollars(element);
-        element = element.replace(TEMP_CHAR_REG_EXP, "\\$");
-      } else {
-        type = "inline";
-        element = stripTags(element);
-      }
+  for (var _i = 0; _i < stringElements.length; _i++) {
+    result.push(stringElements[_i]);
 
+    if (latexElements[_i]) {
+      var element = latexElements[_i];
+      var type = parseAsTex ? getDisplayType(element) : "inline";
+      element = parseAsTex ? stripDollars(element) : stripTags(element);
       var renderedElement = renderLatexString(katex, element, type);
       renderedElement = renderedElement + "&#" + SMALL_SPACE$1.charCodeAt(0);
       result.push(renderedElement);
@@ -21589,8 +21545,6 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
       var mimeType = _this2.getMimeType(nodeCounts.html > 0, nodeCounts.math > 0);
 
-      raw_text = removeEncodingIfPlainText(raw_text, mimeType, _this2.enableHtml());
-
       _this2.applyChangesToComponent(raw_text, mimeType, new_rangeParams, _this2.props.useExpertMode, _this2.props.selectedTab); // Consume the event
 
 
@@ -21856,8 +21810,6 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
         var mimeType = _this2.getMimeType(nodeCounts.html > 0, true);
 
-        raw_text = removeEncodingIfPlainText(raw_text, mimeType, _this2.enableHtml());
-
         _this2.applyChangesToComponent(raw_text, mimeType, new_rangeParams, _this2.props.useExpertMode, _this2.props.selectedTab);
       } catch (error) {
         console.error(error);
@@ -22162,8 +22114,6 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
         var mimeType = _this2.getMimeType(nodeCounts.html > 0, nodeCounts.math > 0);
 
-        raw_text = removeEncodingIfPlainText(raw_text, mimeType, _this2.enableHtml());
-
         _this2.applyChangesToComponent(raw_text, mimeType, params, _this2.props.useExpertMode, _this2.props.selectedTab);
       } catch (error) {
         console.error(error);
@@ -22444,7 +22394,6 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
           var _mimeType = null;
           if (_this2.editingExistingEquation) _mimeType = _this2.getMimeType(_nodeCounts.html > 0, _nodeCounts.katex > 1);else _mimeType = _this2.getMimeType(_nodeCounts.html > 0, _nodeCounts.katex > 0);
-          _new_raw_text = removeEncodingIfPlainText(_new_raw_text, _mimeType, _this2.enableHtml());
 
           _this2.applyChangesToComponent(_new_raw_text, _mimeType, _new_rangeParams6, _this2.props.useExpertMode, _this2.props.selectedTab);
 
@@ -22493,8 +22442,6 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
         var mimeType = _this2.getMimeType(nodeCounts.html > 0, true);
 
-        new_raw_text = removeEncodingIfPlainText(new_raw_text, mimeType, _this2.enableHtml());
-
         _this2.applyChangesToComponent(new_raw_text, mimeType, new_rangeParams, _this2.props.useExpertMode, _this2.props.selectedTab);
 
         _this2.setState({
@@ -22579,7 +22526,6 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         new_raw_text = removeMarks(insertCharacterBeforeMarks(raw_text, new_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 = 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);
       } catch (error) {
@@ -22611,7 +22557,6 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         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);
       } catch (error) {
@@ -22648,7 +22593,6 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         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);
       } catch (error) {
@@ -22674,7 +22618,6 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         new_raw_text = removeMarks(insertCharacterBeforeMarks(raw_text, new_char));
         if (rangeParams.startNodeIndex === rangeParams.endNodeIndex && rangeParams.startOffset === rangeParams.endOffset) new_rangeParams.startOffset = new_rangeParams.startOffset + new_char.length + 1;
         new_rangeParams.endOffset = new_rangeParams.endOffset + new_char.length + 1;
-        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);
       } catch (error) {
@@ -22700,8 +22643,6 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
           new_rangeParams.endOffset = new_rangeParams.endOffset + new_char.length;
         } else new_raw_text = removeMarks(replaceCharacterBeforeMarks(raw_text, new_char));
 
-        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);
       } catch (error) {
         console.error(error);
@@ -22827,19 +22768,12 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
   }, {
     key: "getMimeType",
-    value: function getMimeType(hasHtml, hasMath) {
-      var _this$props$outputTex2, _this$props$outputPla;
-
-      var outputTex = (_this$props$outputTex2 = this.props.outputTex) !== null && _this$props$outputTex2 !== void 0 ? _this$props$outputTex2 : false;
-      var outputPlainText = (_this$props$outputPla = this.props.outputPlainText) !== null && _this$props$outputPla !== void 0 ? _this$props$outputPla : false;
-
-      if (outputTex) {
-        if (hasMath || !outputPlainText) return MIME_TYPE_TEX;else return MIME_TYPE_PLAIN_TEXT;
+    value: function getMimeType(isHtml, hasMath) {
+      if (isHtml) {
+        if (hasMath) return MIME_TYPE_ZZISH_HTML_MATH;else return MIME_TYPE_HTML;
+      } else {
+        if (hasMath) return MIME_TYPE_TEX;else return MIME_TYPE_PLAIN_TEXT;
       }
-
-      if (hasMath) return MIME_TYPE_ZZISH_HTML_MATH;
-      if (hasHtml || !outputPlainText) return MIME_TYPE_HTML;
-      return MIME_TYPE_PLAIN_TEXT;
     }
   }, {
     key: "setOldRangeParams",
@@ -23085,9 +23019,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.mime_type);
       return /*#__PURE__*/React.createElement("span", {
         dangerouslySetInnerHTML: {
           __html: html

package/dist/math-rich-input.css

@@ -61,6 +61,148 @@
   margin: 0px 2px 0px 2px;
 }
 
+/* Note that the top left position of the toolbar is set programatically in componentDidMount */
+
+.Toolbar {
+  position: fixed;
+  z-index: 1;
+  /* width:270px; */
+  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;
+  top: 0px;
+  left: 0px;  /* important to set this so that toolbar initially renders full width */
+}
+
+@keyframes fadeIn1 {
+  0% {
+    opacity: 0;
+  } 
+  100% {
+    opacity: 1.0;
+  }
+}
+
+.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-up4 {
+  position: relative;
+  top:-4px;
+}
+
+.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 
+} */
+
+ 
+
 
 .EquationEditorModal-background {
   position: fixed;
@@ -224,149 +366,7 @@ input:checked + .slider:before {
 
 .slider.round:before {
   border-radius: 50%;
-}/* Note that the top left position of the toolbar is set programatically in componentDidMount */
-
-.Toolbar {
-  position: fixed;
-  z-index: 1;
-  /* width:270px; */
-  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;
-  top: 0px;
-  left: 0px;  /* important to set this so that toolbar initially renders full width */
-}
-
-@keyframes fadeIn1 {
-  0% {
-    opacity: 0;
-  } 
-  100% {
-    opacity: 1.0;
-  }
-}
-
-.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-up4 {
-  position: relative;
-  top:-4px;
-}
-
-.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 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zzish/math-rich-input",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "React component for user to enter rich text with embedded math equations.",
   "repository": {
     "type": "git",
@@ -40,5 +40,9 @@
     "@rollup/plugin-node-resolve": "^11.2.0",
     "rollup": "^2.41.4",
     "rollup-plugin-css-only": "^3.1.0"
+  },
+  "peerDependencies": {
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
   }
 }

package/src/index.js

@@ -1,5 +1,9 @@
-export { default as MathRichInput } from "./MathRichInput";
-export { default as MathRichArea } from "./MathRichArea";
-export { renderMathInNode } from "./MathRichArea";
-
+import MathRichInput from "./MathRichInput";
+import MathRichArea from "./MathRichArea";
+import { renderMathInNode } from "./MathRichArea";
 
+export {
+    MathRichInput,
+    MathRichArea,
+    renderMathInNode
+}