@zzish/math-rich-input 0.1.29 → 0.1.30

package/dist/index.js

@@ -21979,18 +21979,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
@@ -23566,7 +23560,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 +23695,12 @@ 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

@@ -78,6 +78,136 @@
   padding: 2px;
   margin: 0px 2px;
 }
+/* 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 
+} */
 .EquationEditorModal-background {
   position: fixed;
   top: 0;
@@ -233,136 +363,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 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zzish/math-rich-input",
-  "version": "0.1.29",
+  "version": "0.1.30",
   "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,10 @@ 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 +451,7 @@ export default class MathRichInput extends React.Component {
     }
 
     if (deleteToEmpty) {
-      console.log("deleteToEmpty")
+      console.log("deleteToEmpty");
       let new_rangeParams = {
         startNodeIndex: 0,
         startOffset: 1,
@@ -477,7 +467,7 @@ export default class MathRichInput extends React.Component {
         this.props.useExpertMode,
         this.props.selectedTab
       );
-      e.preventDefault()
+      e.preventDefault();
       return;
     }
 
@@ -590,22 +580,22 @@ export default class MathRichInput extends React.Component {
     let index = rangeParams.startNodeIndex;
     let offset = rangeParams.startOffset;
 
-    console.log("handleKeyDownArrowLeft")
-    console.log(rangeParams)
+    console.log("handleKeyDownArrowLeft");
+    console.log(rangeParams);
     let new_globalOffset = rangeParams.endGlobalOffset - 1;
-    let new_rangeParams = null
+    let new_rangeParams = null;
     if (e.shiftKey && new_globalOffset > rangeParams.startGlobalOffset) {
-        new_rangeParams = {
-          startGlobalOffset: rangeParams.startGlobalOffset,
-          endGlobalOffset: new_globalOffset,
-        }
+      new_rangeParams = {
+        startGlobalOffset: rangeParams.startGlobalOffset,
+        endGlobalOffset: new_globalOffset,
+      };
     } else {
       new_rangeParams = {
         startGlobalOffset: new_globalOffset,
         endGlobalOffset: new_globalOffset,
       };
     }
-    console.log(new_rangeParams)
+    console.log(new_rangeParams);
     e.preventDefault();
     this._setRangeParams(new_rangeParams);
     return;
@@ -617,7 +607,7 @@ export default class MathRichInput extends React.Component {
     let index = rangeParams.startNodeIndex;
     let offset = rangeParams.startOffset;
 
-    let new_rangeParams = null
+    let new_rangeParams = null;
     let new_globalOffset = rangeParams.endGlobalOffset + 1;
     if (e.shiftKey && new_globalOffset > rangeParams.startGlobalOffset) {
       new_rangeParams = {
@@ -1031,14 +1021,17 @@ export default class MathRichInput extends React.Component {
         }
       }
 
-      if (this.handleKeyDownAccentHelper(e)) 
-        return;
+      if (this.handleKeyDownAccentHelper(e)) return;
 
       // Check if inserting character in element that starts with small space
-      if (e.key.length === 1 && // ie, it's not something like "arrowLeft"
-         params.startOffset === 0 &&
-         this.nodeStartsWithSmallSpace(startNode)) {
-        console.log("Handling character input at start of text node with small space")
+      if (
+        e.key.length === 1 && // ie, it's not something like "arrowLeft"
+        params.startOffset === 0 &&
+        this.nodeStartsWithSmallSpace(startNode)
+      ) {
+        console.log(
+          "Handling character input at start of text node with small space"
+        );
         this.insertAfterSmallSpace(e.key, params);
         e.preventDefault();
         return;
@@ -1143,14 +1136,14 @@ 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")
+      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 +1182,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(
@@ -1308,12 +1301,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) {
@@ -1498,8 +1493,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 === "") {
@@ -1956,10 +1951,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 };
@@ -1979,7 +1974,6 @@ export default class MathRichInput extends React.Component {
           new_rangeParams.startGlobalOffset++;
           new_rangeParams.endGlobalOffset++;
         }
-  
       } else {
         new_raw_text = removeMarks(insertCharacterBeforeMarks(raw_text, "\n"));
         new_rangeParams.startOffset++;
@@ -1991,12 +1985,11 @@ export default class MathRichInput extends React.Component {
         this.props.mimeType,
         this.enableHtml()
       );
-      
-      console.log("New raw text after line insert")
-      console.log(new_raw_text)
-      console.log("New range params after line insert")
-      console.log(new_rangeParams)
 
+      console.log("New raw text after line insert");
+      console.log(new_raw_text);
+      console.log("New range params after line insert");
+      console.log(new_rangeParams);
 
       this.applyChangesToComponent(
         new_raw_text,
@@ -2016,34 +2009,39 @@ export default class MathRichInput extends React.Component {
         rangeParams = this._getRangeParams();
 
       if (rangeParams.startOffset !== 0)
-        console.warn("Unexpected startOffset "+rangeParams.startOffset+" in insertAfterSmallSpace")
-      
+        console.warn(
+          "Unexpected startOffset " +
+            rangeParams.startOffset +
+            " in insertAfterSmallSpace"
+        );
+
       let node = this._findNodeWithIndex(rangeParams.startNodeIndex);
       let raw_text = elementToMarkedRawText(
-          this.editableDiv,
-          node,
-          1, // after small space
-          this.enableHtml()
-        );
+        this.editableDiv,
+        node,
+        1, // after small space
+        this.enableHtml()
+      );
 
       let new_raw_text = removeMarks(
-        insertCharacterBeforeMarks(raw_text, new_char))
+        insertCharacterBeforeMarks(raw_text, new_char)
+      );
 
       let new_rangeParams = {
-        startNodeIndex:rangeParams.startNodeIndex,
-        startNodeOffset:1+new_char.length,
-        endNodeIndex:rangeParams.startNodeIndex,
-        endNodeOffset:1+new_char.length,
-        startGlobalOffset:rangeParams.startGlobalOffset+new_char.length,
-        endGlobalOffset:rangeParams.endGlobalOffset+new_char.length,
-      }
-      
+        startNodeIndex: rangeParams.startNodeIndex,
+        startNodeOffset: 1 + new_char.length,
+        endNodeIndex: rangeParams.startNodeIndex,
+        endNodeOffset: 1 + new_char.length,
+        startGlobalOffset: rangeParams.startGlobalOffset + new_char.length,
+        endGlobalOffset: rangeParams.endGlobalOffset + new_char.length,
+      };
+
       new_raw_text = removeEncodingIfPlainText(
         new_raw_text,
         this.props.mimeType,
         this.enableHtml()
       );
-      
+
       this.applyChangesToComponent(
         new_raw_text,
         this.props.mimeType,
@@ -2054,7 +2052,7 @@ export default class MathRichInput extends React.Component {
     } catch (error) {
       console.error(error);
     }
-  };
+  }
 
   insertAccentLetter = (event, old_char, new_char) => {
     try {
@@ -2072,18 +2070,24 @@ export default class MathRichInput extends React.Component {
       let new_raw_text = null;
       let new_rangeParams = null;
 
-      if (old_char === null) { // insert new char
-        new_raw_text = removeMarks(insertCharacterBeforeMarks(raw_text, new_char));
+      if (old_char === null) {
+        // insert new char
+        new_raw_text = removeMarks(
+          insertCharacterBeforeMarks(raw_text, new_char)
+        );
         new_rangeParams = {
-          startNodeIndex:rangeParams.startNodeIndex,
-          startOffset:rangeParams.startOffset + new_char.length,
-          endNodeIndex:rangeParams.startNodeIndex,
-          endOffset:rangeParams.startOffset + new_char.length,
-          startGlobalOffset:rangeParams.startGlobalOffset + new_char.length,
-          endGlobalOffset:rangeParams.startGlobalOffset + new_char.length
-        }
-      } else { // replace old char
-        new_raw_text = removeMarks(replaceCharacterBeforeMarks(raw_text, new_char));
+          startNodeIndex: rangeParams.startNodeIndex,
+          startOffset: rangeParams.startOffset + new_char.length,
+          endNodeIndex: rangeParams.startNodeIndex,
+          endOffset: rangeParams.startOffset + new_char.length,
+          startGlobalOffset: rangeParams.startGlobalOffset + new_char.length,
+          endGlobalOffset: rangeParams.startGlobalOffset + new_char.length,
+        };
+      } else {
+        // replace old char
+        new_raw_text = removeMarks(
+          replaceCharacterBeforeMarks(raw_text, new_char)
+        );
         new_rangeParams = { ...rangeParams };
       }
 
@@ -2092,7 +2096,7 @@ export default class MathRichInput extends React.Component {
         this.props.mimeType,
         this.enableHtml()
       );
-      
+
       this.applyChangesToComponent(
         new_raw_text,
         this.props.mimeType,