@zzish/math-rich-input 0.1.39 → 0.1.41

package/dist/index.js

@@ -22718,7 +22718,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this2), "handleInput", function (event) {
       try {
         // console.log("handleInput")
-        if (event.nativeEvent.isComposing) return;
+        if (_this2.isComposing) return;
         var raw_text = elementToMarkedRawText(_this2.editableDiv, null, 0, _this2.enableHtml());
 
         var params = _this2._getRangeParams();
@@ -23547,6 +23547,14 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this2), "handleCompositionStart", function (event) {
+      _this2.isComposing = true;
+    });
+
+    _defineProperty(_assertThisInitialized(_this2), "handleCompositionEnd", function (event) {
+      _this2.isComposing = false;
+    });
+
     _this2.state = {
       showEquationEditor: false,
       equationEditorLatex: "",
@@ -23593,7 +23601,9 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     _this2.initialHistoryState = null;
     _this2.undoHistory = [];
     _this2.redoHistory = [];
-    _this2.accent = "";
+    _this2.accent = ""; // keeps track of whether user is composing in an IME - see https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent
+
+    _this2.isComposing = false;
     return _this2;
   }
 
@@ -23803,6 +23813,8 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         onMouseUp: this.handleMouseUp,
         onFocus: this.handleFocus,
         onBlur: this.handleBlur,
+        onCompositionStart: this.handleCompositionStart,
+        onCompositionEnd: this.handleCompositionEnd,
         dangerouslySetInnerHTML: {
           __html: html
         },

package/dist/math-rich-input.css

@@ -11,11 +11,7 @@
   border-radius: 5px;
 }
 
-.MathRichInput-Container:focus-within {
-  background-color: white !important;
-  outline: 0px;
-  border: 1px solid #663676;
-}
+
 
 .MathRichInput-scrollview {
   position: relative;
@@ -78,6 +74,38 @@
   padding: 2px;
   margin: 0px 2px;
 }
+
+.MathRichInput-Container {
+  :focus-within {
+    background-color: white;
+    outline: 0px;
+    /* border: 1px solid #663676; */
+  }
+  
+  &.dark {
+      :focus-within {
+          background: none;
+          outline: 0px;
+          border: none;
+      }
+      .MathRichInput {
+          background: none;
+          color: white;
+          border: none;
+
+          .katex {
+              .base {
+                  background: none;
+              }
+          }
+
+          &:focus {
+              border: none;
+              background: none;
+          }
+      }
+  }
+}
 /* Note that the top left position of the toolbar is set programatically in componentDidMount */
 
 .Toolbar {

package/package.json

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

package/src/MathRichInput.css

@@ -11,11 +11,7 @@
   border-radius: 5px;
 }
 
-.MathRichInput-Container:focus-within {
-  background-color: white !important;
-  outline: 0px;
-  border: 1px solid #663676;
-}
+
 
 .MathRichInput-scrollview {
   position: relative;
@@ -78,3 +74,35 @@
   padding: 2px;
   margin: 0px 2px;
 }
+
+.MathRichInput-Container {
+  :focus-within {
+    background-color: white;
+    outline: 0px;
+    /* border: 1px solid #663676; */
+  }
+  
+  &.dark {
+      :focus-within {
+          background: none;
+          outline: 0px;
+          border: none;
+      }
+      .MathRichInput {
+          background: none;
+          color: white;
+          border: none;
+
+          .katex {
+              .base {
+                  background: none;
+              }
+          }
+
+          &:focus {
+              border: none;
+              background: none;
+          }
+      }
+  }
+}

package/src/MathRichInput.jsx

@@ -208,6 +208,9 @@ export default class MathRichInput extends React.Component {
     this.undoHistory = [];
     this.redoHistory = [];
     this.accent = "";
+
+    // keeps track of whether user is composing in an IME - see https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent
+    this.isComposing = false;
   }
 
   enableFontStyling() {
@@ -1143,7 +1146,7 @@ export default class MathRichInput extends React.Component {
   handleInput = (event) => {
     try {
       // console.log("handleInput")
-      if (event.nativeEvent.isComposing) return;
+      if (this.isComposing) return;
 
       let raw_text = elementToMarkedRawText(
         this.editableDiv,
@@ -2156,6 +2159,14 @@ export default class MathRichInput extends React.Component {
     }
   };
 
+  handleCompositionStart = (event) => {
+    this.isComposing = true ;
+  }
+
+  handleCompositionEnd = (event) => {
+    this.isComposing = false;
+  }
+
   render() {
     if (this.props.value == null) {
       console.error('MathRichInput must have prop called "value"');
@@ -2212,6 +2223,8 @@ export default class MathRichInput extends React.Component {
               onMouseUp={this.handleMouseUp}
               onFocus={this.handleFocus}
               onBlur={this.handleBlur}
+              onCompositionStart={this.handleCompositionStart}
+              onCompositionEnd={this.handleCompositionEnd}
               dangerouslySetInnerHTML={{ __html: html }}
               data-placeholder={this.props.placeholder || ""}
             ></span>