@zzish/math-rich-input 0.1.46 → 0.1.48

package/dist/index.js

@@ -22345,36 +22345,45 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       }
     });
     _defineProperty(_this2, "handlePaste", function (event) {
-      var clipboardData = event.clipboardData || window.clipboardData;
-      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])
-      //   );
-      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);
-        _this2.insertHtml(pasteHtml);
+      try {
+        var clipboardData = event.clipboardData || window.clipboardData;
+        if (!clipboardData) {
+          return;
+        }
         event.preventDefault();
-      } else {
-        var paste = clipboardData.getData("text");
+        var pasteHtml = clipboardData.getData('text/html');
+        var pasteText = clipboardData.getData('text/plain');
         var selection = window.getSelection();
         if (!selection.rangeCount) {
-          console.warn("handlePaste called, but unable to get selection");
-          return false;
+          return;
         }
-        event.preventDefault();
         selection.deleteFromDocument();
-        _this2.insertRawText(paste);
+        if (pasteHtml && pasteHtml.length > 0) {
+          var markerId = "__PASTE_MARKER_".concat(Date.now(), "_").concat(Math.floor(Math.random() * 10000), "__");
+          var markerStart = "<span id='".concat(markerId, "_START'></span>");
+          var markerEnd = "<span id='".concat(markerId, "_END'></span>");
+          var markedHtml = markerStart + pasteHtml + markerEnd;
+          if (typeof sanitiseHtml === 'function') {
+            markedHtml = sanitiseHtml(markedHtml);
+          }
+          _this2._pendingPasteMarkerId = markerId;
+          document.execCommand('insertHTML', false, markedHtml);
+          setTimeout(function () {
+            try {
+              var rawText = elementToMarkedRawText(_this2.editableDiv, null, -1, _this2.enableHtml());
+              var nodeCounts = _this2._countNodeTypes();
+              var mimeType = _this2.getMimeType(nodeCounts.html > 0, nodeCounts.math > 0);
+              var cleanedRawText = removeEncodingIfPlainText(rawText, mimeType, _this2.enableHtml());
+              _this2.applyChangesToComponent(cleanedRawText, mimeType, _this2._getRangeParams(), _this2.props.useExpertMode, _this2.props.selectedTab);
+            } catch (err) {
+              console.error(err);
+            }
+          }, 0);
+        } else if (pasteText && pasteText.length > 0) {
+          _this2.insertRawText(pasteText);
+        }
+      } catch (error) {
+        console.error(error);
       }
     });
     _defineProperty(_this2, "showEquationEditor", function () {
@@ -22676,7 +22685,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       }
     });
     _defineProperty(_this2, "insertRawText", function (new_text) {
-      var selectInsertedText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      var selectInsertedText = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       try {
         var rangeParams = _this2._getRangeParams();
         var node = _this2._findNodeWithIndex(rangeParams.endNodeIndex);
@@ -22739,10 +22748,11 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
           // Preserve the selection
           if (lastNode) {
             range = range.cloneRange();
-            range.setStartAfter(lastNode);
             if (selectPastedContent) {
               range.setStartBefore(firstNode);
+              range.setEndAfter(lastNode);
             } else {
+              range.setStartAfter(lastNode);
               range.collapse(true);
             }
             sel.removeAllRanges();
@@ -22762,10 +22772,11 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       }
     });
     _defineProperty(_this2, "insertHtml", function (new_html) {
+      var selectPastedContent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       try {
         // console.log("New html: "+new_html)
         // console.log("inserting: "+new_html)
-        _this2.pasteHtmlAtCaret(new_html, true);
+        _this2.pasteHtmlAtCaret(new_html, selectPastedContent);
         var new_rangeParams = null;
         // console.log("New range params: ")
         try {
@@ -22988,7 +22999,8 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         subscript: false,
         superscript: false
       },
-      keyPressed: ""
+      keyPressed: "",
+      pendingHtmlWithMarker: null
     };
 
     // this.handleInput   = this.handleInput.bind(this);
@@ -23150,7 +23162,24 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
       try {
-        // console.log("componentDidUpdate")
+        if (this._pendingPasteMarkerId) {
+          var start = document.getElementById("".concat(this._pendingPasteMarkerId, "_START"));
+          var end = document.getElementById("".concat(this._pendingPasteMarkerId, "_END"));
+          if (start && end) {
+            var range = document.createRange();
+            range.setStartAfter(start);
+            range.setEndBefore(end);
+            var sel = window.getSelection();
+            sel.removeAllRanges();
+            sel.addRange(range);
+            start.parentNode && start.parentNode.removeChild(start);
+            end.parentNode && end.parentNode.removeChild(end);
+          }
+          this._pendingPasteMarkerId = null;
+          this.setState({
+            pendingHtmlWithMarker: null
+          });
+        }
         if (this.afterComponentUpdateData !== null && this.afterComponentUpdateData !== undefined && this.afterComponentUpdateData.value === this.props.value) {
           this._setRangeParams(this.afterComponentUpdateData.rangeParams);
           this.afterComponentUpdateData = null;
@@ -23241,7 +23270,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         onCompositionStart: this.handleCompositionStart,
         onCompositionEnd: this.handleCompositionEnd,
         dangerouslySetInnerHTML: {
-          __html: html
+          __html: this.state.pendingHtmlWithMarker || html
         },
         "data-placeholder": this.props.placeholder || ""
       }))), this.state.showEquationEditor && /*#__PURE__*/React__default["default"].createElement(EquationEditorModal, {

package/dist/math-rich-input.css

@@ -1,996 +1 @@
-*,
-:after,
-:before {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-}
-
-.MathRichInput-Container {
-    width: 100%;
-    border-radius: 5px;
-}
-
-.MathRichInput-scrollview {
-    position: relative;
-    display: flex;
-    border-radius: 5px;
-}
-
-.MathRichInput p {
-    padding: 0px;
-    margin: 0px;
-}
-
-.MathRichInput {
-    font-size: 18px;
-    padding: 10px;
-    width: 100%;
-    border-radius: 5px;
-    background-color: #fff;
-    overflow-x: scroll;
-    overflow: overlay;
-}
-
-.MathRichInput:empty::before {
-    content: attr(data-placeholder);
-    color: #acb6c0;
-    font-size: 15px;
-}
-.MathRichInput:empty:focus::before {
-    content: "";
-}
-
-.MathRichInput:focus {
-    outline: 0;
-}
-
-.MathRichInput .katex {
-    border: 0px;
-}
-
-.MathRichInput .base {
-    /* Combine the katex and base class name to ensure the whole equation is surrounded */
-    background-color: #f0f0f0;
-    border: 0px;
-    border: 1px dotted #d0d0d0;
-    border-radius: 5px;
-    padding: 2px;
-    margin: 0px 2px;
-}
-
-.katex .mathnormal {
-    font-family: KaTeX_Math;
-    font-style: italic;
-}
-
-.MathRichInput .katex-error {
-    background-color: #f0f0f0;
-    border: 0px;
-    border: 1px dotted #ff8080;
-    border-radius: 5px;
-    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 {
-            color: white;
-
-            background: none;
-            border: none;
-
-            .katex,
-            .base {
-                background: none;
-            }
-
-            &:focus {
-                border: none;
-                background: none;
-            }
-        }
-    }
-
-    &.question-edit-input {
-        .MathRichInput {
-            border-radius: 12px;
-            font-size: 32px;
-            font-weight: 400;
-
-            &:focus {
-                border: none;
-                background: rgba(255, 255, 255, 0.1);
-            }
-        }
-    }
-
-    &.answer-edit-input {
-        .MathRichInput {
-            font-weight: 400;
-            font-size: 16px;
-        }
-    }
-
-    &.hint-input,
-    &.explanation-input {
-        .MathRichInput {
-            font-weight: 400;
-            font-size: 16px;
-            /* text-decoration: underline dotted; */
-            color: #322e33;
-
-            .base {
-                border: 1px dotted #322e33;
-            }
-        }
-    }
-}
-.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;
-}
-
-.expertModeSwitch {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-}
-
-.EquationEditorModal .expertModeSwitch .switch {
-    margin-left: 10px;
-}
-
-/* The switch - the box around the slider */
-.EquationEditorModal .switch {
-    position: relative;
-    display: inline-block;
-    width: 35px;
-    height: 22px;
-    margin-bottom: 0;
-    padding: 0;
-}
-
-/* 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 {
-    position: absolute;
-    z-index: 10;
-    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;
-    color: black;
-}
-
-@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: 11;
-    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 {
-    position: absolute;
-    z-index: 1;
-    width: 360px;
-    background-color: #fff;
-    border: 1px solid #d0d0d0;
-    border-radius: 5px;
-    box-shadow: 1px 1px 5px #a0a0a0;
-    padding: 8px;
-    animation: 0.4s fadeIn1;
-    animation-fill-mode: forwards;
-    color: black;
-}
-
-.AccentBar-compact {
-    display: flex;
-    position: absolute;
-    z-index: 1;
-    background-color: white;
-    border: 1px solid #d0d0d0;
-    border-radius: 5px;
-    box-shadow: 1px 1px 5px #a0a0a0;
-    padding: 5px;
-    animation: 0.4s fadeIn1;
-    animation-fill-mode: forwards;
-    color: black;
-}
-
-.AccentBar-outerContainer {
-    overflow-y: scroll;
-    border-radius: 5px;
-}
-
-.AccentBar-innerContainer {
-    height: 350px;
-}
-
-@keyframes fadeIn1 {
-    0% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 1;
-    }
-}
-
-.AccentBar .symbols-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
-    grid-auto-rows: minmax(min-content, max-content);
-    grid-gap: 3px;
-}
-
-.AccentBar .insert-grid {
-    padding: 5px;
-}
-
-.AccentBar .type-a-letter {
-    grid-column: 1/-1;
-    color: #a0a0a0;
-    font-family: sans-serif;
-    font-size: 14px;
-    font-weight: bold;
-    height: 36px;
-    padding-top: 12px;
-    padding-left: 20px;
-}
-
-.AccentBar-button {
-    font-family: sans-serif;
-    font-size: 17px;
-    width: 40px;
-    height: 36px;
-    background: #f4f4f4;
-    border-radius: 5px;
-    border: 0px;
-    padding: 1px;
-}
-
-.AB-compact {
-    margin: 0px;
-    background: white;
-}
-
-.AB-narrow {
-    width: 36px;
-}
-
-.AccentBar-button:hover {
-    color: white;
-    background: #663676;
-    cursor: pointer;
-    box-shadow: 1px 1px 3px #808080;
-    animation: 2s grow;
-    animation-fill-mode: forwards;
-}
-
-@keyframes grow {
-    00% {
-        transform: scale(1);
-        box-shadow: 0px 0px 0px #808080;
-    }
-    10% {
-        transform: scale(1.3);
-        box-shadow: 1px 1px 3px #808080;
-    }
-    90% {
-        transform: scale(1.3);
-        box-shadow: 1px 1px 3px #808080;
-    }
-    100% {
-        transform: scale(1.8);
-        box-shadow: 1px 1px 3px #808080;
-    }
-}
-
-.AccentBar-button:active {
-    background: #808080;
-    color: white;
-    cursor: pointer;
-}
-
-.AccentBar .tabBar {
-    background: white;
-    text-align: left;
-    border: 0px;
-    padding: 10px 0;
-}
-
-.AccentBar .tab {
-    font-size: 14px;
-    font-weight: bold;
-    color: #404040;
-    text-align: left;
-    border: 0px;
-    height: 30px;
-    padding: 2px 5px 2px 5px;
-    margin: 2px;
-    border-bottom: 4px solid #d0d0d0;
-}
-
-.AccentBar .tab:hover {
-    cursor: pointer;
-}
-
-.AccentBar .tab-selected {
-    font-size: 14px;
-    font-weight: bold;
-    color: #404040;
-    text-align: left;
-    border: 0px;
-    height: 30px;
-    padding: 2px 5px 2px 5px;
-    margin: 2px;
-    border-bottom: 4px solid #663676;
-}
-
-.AccentBar .section-label {
-    grid-column: 1/-1;
-    font-size: 13px;
-    font-weight: bold;
-    color: #663676;
-    margin-top: 8px;
-    margin-left: 8px;
-    margin-bottom: 4px;
-}
-
-.AccentBar .replace-section {
-    min-height: 70px;
-}
-
-.AccentBar .tabArea {
-    animation: 0.4s fadeIn1;
-    animation-fill-mode: forwards;
-}
-.EquationEditor {
-    height: auto;
-    text-align: center;
-}
-
-.EquationEditor .editableAndCursorButtonsWrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.EquationEditor .editableWrapper {
-    overflow: auto;
-    width: 100%;
-}
-
-.EquationEditor .cursorButton {
-    font-size: 14px;
-    font-weight: bold;
-    color: #663676;
-    background: white;
-    text-align: center;
-    border: 1px solid #663676;
-    border-radius: 5px;
-    min-width: 40px;
-    width: auto;
-    height: 40px;
-    padding: 0px;
-    margin-top: 10px;
-    margin-left: 15px;
-    margin-right: 15px;
-    /* transition: all .2s ease-in-out; */
-}
-
-.EquationEditor .centerBox {
-    display: inline-block;
-    text-align: center;
-}
-
-.EquationEditor .editable {
-    /* width:auto; */
-    text-align: left;
-    min-height: 26px;
-    min-width: 150px;
-    font-size: 20px;
-    color: #404040;
-    border: 1px solid #b0b0b0;
-    border-radius: 5px;
-    /* height:36px; */
-    padding: 7px 10px 7px 10px;
-    margin-top: 6px;
-    margin-bottom: 5px;
-}
-
-.EquationEditor .editable-placeholder {
-    position: absolute;
-    z-index: -1;
-    min-height: 26px;
-    min-width: 150px;
-    font-size: 15px;
-    color: grey;
-    /* Note the x translation needs to be updatad programatically if the modal width changes */
-    transform: translate(-12px, -36px);
-}
-
-.EquationEditor .editable:focus-within {
-    border-radius: 5px;
-    border: 1px solid #663676 !important;
-    box-shadow: 0px 0px 0px white;
-    /* box-shadow: inset 1px 1px 5px #a0a0a0; */
-}
-
-.latexInputAreaWrapper {
-    width: auto;
-}
-
-.EquationEditor .katexRenderedInput {
-    text-align: left;
-    min-height: 30px;
-    width: 90%;
-    font-size: 16px;
-    color: #404040;
-    border: 0px solid #b0b0b0;
-    border-radius: 5px;
-    /* height:36px; */
-    padding: 7px 10px 4px 10px;
-    margin: 5px 15px;
-}
-
-.EquationEditor .latexInput {
-    text-align: left;
-    height: 88px;
-    width: 90%;
-    font-size: 16px;
-    /* color: #202020; */
-    /* background-color: #e0e0e0; */
-    /* color: #00ff00;
-  background-color: #202020; */
-    color: #007000;
-    background-color: #fff;
-    border: 1px solid #b0b0b0;
-    border-radius: 5px;
-    padding: 7px 10px 5px 10px;
-    margin-top: 10px;
-    box-shadow: 0px 0px 0px white;
-}
-
-.EquationEditor .latexInput:focus {
-    border: 1px solid #663676 !important;
-    outline: 0;
-    /* outline: 2px solid #663676!important; */ /* Has square corners */
-    /* box-shadow: inset 1px 1px 5px #a0a0a0, 0px 0px 3px #663676; */
-}
-
-.EquationEditor .insertButton {
-    font-size: 14px;
-    color: white;
-    background: #663676;
-    text-align: left;
-    border: 0px;
-    border-radius: 5px;
-    height: 36px;
-    padding: 0px 30px;
-    margin-top: 5px;
-    margin-bottom: 5px;
-    margin-left: 5px;
-    margin-right: 5px;
-}
-
-.EquationEditor .cancelButton {
-    font-size: 14px;
-    background: white;
-    color: #663676;
-    text-align: left;
-    border: 1px solid #663676;
-    border-radius: 5px;
-    height: 36px;
-    padding: 0px 30px;
-    margin-bottom: 10px;
-    margin-left: 5px;
-    margin-right: 5px;
-}
-
-.EquationEditor .insertButton:hover {
-    color: white;
-    background: #461656;
-    cursor: pointer;
-}
-
-.EquationEditor .recentSymbols-recentText-active {
-    font-size: 14px;
-    font-weight: bold;
-    color: #404040;
-    margin-right: 10px;
-}
-
-.EquationEditor .recentSymbols-recentText-not-active {
-    font-size: 14px;
-    font-weight: bold;
-    color: #808080;
-    margin-top: 10px;
-    margin-bottom: 10px;
-}
-
-.EquationEditor .tabBar {
-    background: white;
-    text-align: left;
-    border: 0px;
-    padding: 10px 10px 5px 20px;
-    margin: 5px;
-}
-
-@media (max-width: 500px) {
-    .EquationEditor .tabBar {
-        padding: 5px 0;
-    }
-}
-
-.EquationEditor .tab {
-    font-size: 14px;
-    font-weight: bold;
-    color: #404040;
-    text-align: left;
-    border: 0px;
-    height: 30px;
-    padding: 5px 10px;
-    margin: 5px;
-    border-bottom: 6px solid #d0d0d0;
-}
-
-.EquationEditor .tab:hover {
-    cursor: pointer;
-}
-.EquationEditor .tab-selected {
-    font-size: 14px;
-    font-weight: bold;
-    color: #404040;
-    text-align: left;
-    border: 0px;
-    height: 30px;
-    padding: 5px 10px;
-    margin: 5px;
-    border-bottom: 6px solid #663676;
-}
-
-.EquationEditor .recentSymbolsButtonArea {
-    display: flex;
-    justify-content: flex-start;
-    width: 486px;
-    padding: 2px;
-    margin: 5px;
-    margin-left: 15px;
-}
-
-.EquationEditor .symbolButtonAreasOuterContainer {
-    overflow-x: auto;
-}
-
-.EquationEditor .symbolButtonAreasInnerContainer {
-    display: flex;
-    width: 2330px;
-}
-
-.EquationEditor .symbolButtonArea {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
-    grid-auto-rows: minmax(min-content, max-content);
-    grid-gap: 1.5px;
-    padding: 12px;
-    margin: 0px;
-}
-
-.EquationEditor .symbolButtonArea-1 {
-    width: 66px;
-}
-
-.EquationEditor .symbolButtonArea-2 {
-    width: 108px;
-}
-
-.EquationEditor .symbolButtonArea-3 {
-    width: 150px;
-}
-
-.EquationEditor .symbolButtonArea-4 {
-    width: 192px;
-}
-
-.EquationEditor .symbolButtonArea-5 {
-    width: 234px;
-}
-
-.EquationEditor .symbolButtonArea-6 {
-    width: 276px;
-}
-/* Fixes is a katex bug where horizontal lines are not rendering */
-/* .frac-line {
-  background-color: #404040;
-  height:0.03em;
-}
-.overline-line {
-  background-color: #404040;
-  height:0.03em;
-} */
-
-.SymbolButton {
-  display: inline-block;
-  overflow: hidden; /* Important to fix a bug where katex renders parts of the equation outside the box */
-  font-size: 14px;
-  font-weight: bold;
-  color: #202020;
-  background: #e0e0e0;
-  text-align: center;
-  border: 0px;
-  border-radius: 5px;
-  width: 36px;
-  height: 36px;
-  padding: 1px;
-  margin: 3px;
-  margin-bottom: auto;
-  /* transition: all .2s ease-in-out; */
-}
-
-.SymbolButton:hover {
-  filter: saturate(2);
-  color: black;
-  /* transform: scale(1.3); */
-  cursor: pointer;
-  box-shadow: 1px 1px 3px #808080;
-  animation: 2s grow;
-  animation-fill-mode: forwards;
-}
-
-@keyframes grow {
-  00% {
-    transform: scale(1);
-    box-shadow: 0px 0px 0px #808080;
-  }
-  10% {
-    transform: scale(1.3);
-    box-shadow: 1px 1px 3px #808080;
-  }
-  90% {
-    transform: scale(1.3);
-    box-shadow: 1px 1px 3px #808080;
-  }
-  100% {
-    transform: scale(1.8);
-    box-shadow: 1px 1px 3px #808080;
-  }
-}
-
-.SymbolButton:active {
-  background: #808080;
-  color: white;
-  transform: scale(1.3);
-  cursor: pointer;
-}
-
-.SymbolButton-fadeIn {
-  opacity: 1;
-  width: 100px;
-  height: 100px;
-  transition: width 0.5s, height 0.5s, opacity 0.5s 0.5s;
-}
-
-.highlight-0 {
-  background: #ebc9eb;
-  /* background: #80e0e0; */
-}
-/*
-.highlight-1{
-  background: #c0e0e0;
-}
-/* .highlight-2{
-  background: #c0e0e0;
-} */
-
-.highlight-operators {
-  background: #f8e8d8;
-}
-
-.highlight-angles {
-  background: #cceded;
-}
-
-.highlight-greeklower {
-  background: #f8e8d8;
-}
-
-.highlight-greekupper {
-  background: #cceded;
-}
-
-.highlight-misc {
-  background: #f8e8d8;
-}
-
-.highlight-sets {
-  background: #cceded;
-}
-
-.highlight-chemistry {
-  background: #f8e8d8;
-}
-
-.highlight-elements {
-  background: #cceded;
-}
-
-.highlight-physics2 {
-  background: #f8e8d8;
-}
-
-.highlight-physics3 {
-  background: #cceded;
-}
-
-.highlight-expert {
-  background: #f4d6f5;
-}
-
-.highlight-matrices {
-  background: #f4d6f5;
-}
+.SymbolButton{background:#e0e0e0;border:0;border-radius:5px;color:#202020;display:inline-block;font-size:14px;font-weight:700;height:36px;margin:3px 3px auto;overflow:hidden;padding:1px;text-align:center;width:36px}.SymbolButton:hover{animation:grow 2s;animation-fill-mode:forwards;box-shadow:1px 1px 3px grey;color:#000;cursor:pointer;filter:saturate(2)}.SymbolButton:active{background:grey;color:#fff;cursor:pointer;transform:scale(1.3)}.SymbolButton-fadeIn{height:100px;opacity:1;transition:width .5s,height .5s,opacity .5s .5s;width:100px}.highlight-0{background:#ebc9eb}.highlight-operators{background:#f8e8d8}.highlight-angles{background:#cceded}.highlight-greeklower{background:#f8e8d8}.highlight-greekupper{background:#cceded}.highlight-misc{background:#f8e8d8}.highlight-sets{background:#cceded}.highlight-chemistry{background:#f8e8d8}.highlight-elements{background:#cceded}.highlight-physics2{background:#f8e8d8}.highlight-physics3{background:#cceded}.highlight-expert,.highlight-matrices{background:#f4d6f5}.EquationEditor{height:auto;text-align:center}.EquationEditor .editableAndCursorButtonsWrapper{align-items:center;display:flex;justify-content:center}.EquationEditor .editableWrapper{overflow:auto;width:100%}.EquationEditor .cursorButton{background:#fff;border:1px solid #663676;border-radius:5px;color:#663676;font-size:14px;font-weight:700;height:40px;margin-left:15px;margin-right:15px;margin-top:10px;min-width:40px;padding:0;text-align:center;width:auto}.EquationEditor .centerBox{display:inline-block;text-align:center}.EquationEditor .editable{border:1px solid #b0b0b0;border-radius:5px;color:#404040;font-size:20px;margin-bottom:5px;margin-top:6px;min-height:26px;min-width:150px;padding:7px 10px;text-align:left}.EquationEditor .editable-placeholder{color:grey;font-size:15px;min-height:26px;min-width:150px;position:absolute;transform:translate(-12px,-36px);z-index:-1}.EquationEditor .editable:focus-within{border:1px solid #663676!important;border-radius:5px;box-shadow:0 0 0 #fff}.latexInputAreaWrapper{width:auto}.EquationEditor .katexRenderedInput{border:0 solid #b0b0b0;border-radius:5px;color:#404040;font-size:16px;margin:5px 15px;min-height:30px;padding:7px 10px 4px;text-align:left;width:90%}.EquationEditor .latexInput{background-color:#fff;border:1px solid #b0b0b0;border-radius:5px;box-shadow:0 0 0 #fff;color:#007000;font-size:16px;height:88px;margin-top:10px;padding:7px 10px 5px;text-align:left;width:90%}.EquationEditor .latexInput:focus{border:1px solid #663676!important;outline:0}.EquationEditor .insertButton{background:#663676;border:0;border-radius:5px;color:#fff;font-size:14px;height:36px;margin:5px;padding:0 30px;text-align:left}.EquationEditor .cancelButton{background:#fff;border:1px solid #663676;border-radius:5px;color:#663676;font-size:14px;height:36px;margin-bottom:10px;margin-left:5px;margin-right:5px;padding:0 30px;text-align:left}.EquationEditor .insertButton:hover{background:#461656;color:#fff;cursor:pointer}.EquationEditor .recentSymbols-recentText-active{color:#404040;font-size:14px;font-weight:700;margin-right:10px}.EquationEditor .recentSymbols-recentText-not-active{color:grey;font-size:14px;font-weight:700;margin-bottom:10px;margin-top:10px}.EquationEditor .tabBar{background:#fff;border:0;margin:5px;padding:10px 10px 5px 20px;text-align:left}@media (max-width:500px){.EquationEditor .tabBar{padding:5px 0}}.EquationEditor .tab{border:0;border-bottom:6px solid #d0d0d0;color:#404040;font-size:14px;font-weight:700;height:30px;margin:5px;padding:5px 10px;text-align:left}.EquationEditor .tab:hover{cursor:pointer}.EquationEditor .tab-selected{border:0;border-bottom:6px solid #663676;color:#404040;font-size:14px;font-weight:700;height:30px;margin:5px;padding:5px 10px;text-align:left}.EquationEditor .recentSymbolsButtonArea{display:flex;justify-content:flex-start;margin:5px 5px 5px 15px;padding:2px;width:486px}.EquationEditor .symbolButtonAreasOuterContainer{overflow-x:auto}.EquationEditor .symbolButtonAreasInnerContainer{display:flex;width:2330px}.EquationEditor .symbolButtonArea{grid-gap:1.5px;display:grid;grid-auto-rows:minmax(min-content,max-content);grid-template-columns:repeat(auto-fill,minmax(36px,1fr));margin:0;padding:12px}.EquationEditor .symbolButtonArea-1{width:66px}.EquationEditor .symbolButtonArea-2{width:108px}.EquationEditor .symbolButtonArea-3{width:150px}.EquationEditor .symbolButtonArea-4{width:192px}.EquationEditor .symbolButtonArea-5{width:234px}.EquationEditor .symbolButtonArea-6{width:276px}.EquationEditorModal-background{animation:shade .3s;animation-fill-mode:forwards;background:#000;height:100%;left:0;position:fixed;top:0;width:100%;z-index:99}@keyframes shade{00%{opacity:0}to{opacity:.6}}.EquationEditorModal{animation:rise .3s;animation-fill-mode:forwards;background:#fff;border:1px solid grey;border-radius:10px;box-shadow:0 2px 5px 1px #a0a0a0;left:50%;max-width:500px;position:fixed;top:50%;width:98%;z-index:100}@keyframes rise{00%{opacity:0;transform:translate(-50%,100%)}to{opacity:1;transform:translate(-50%,-50%)}}.EquationEditorModal-mobile{background:#fff;border:1px solid grey;border-radius:10px;box-shadow:0 2px 5px 1px #a0a0a0;left:50%;max-width:500px;position:fixed;top:0;transform:translate(-50%,1px);width:99%;z-index:100}.EquationEditorModal .title,.EquationEditorModal-mobile .title{background:#e0e0e0;border:0;border-radius:5px 5px 0 0;color:#404040;display:flex;font-size:14px;justify-content:space-between;margin:0;padding:15px;text-align:left}.EquationEditorModal-mobile .title{height:30px}.expertModeSwitch{align-items:center;display:flex;flex-direction:row}.EquationEditorModal .expertModeSwitch .switch{margin-left:10px}.EquationEditorModal .switch{display:inline-block;height:22px;margin-bottom:0;padding:0;position:relative;width:35px}.EquationEditorModal .switch input{height:0;opacity:0;width:0}.EquationEditorModal .slider{background-color:#ccc;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;-webkit-transition:.4s;transition:.4s}.EquationEditorModal .slider:before{background-color:#fff;bottom:4px;content:"";height:14px;left:4px;position:absolute;-webkit-transition:.4s;transition:.4s;width:14px}.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)}.EquationEditorModal .slider.round{border-radius:18px}.EquationEditorModal .slider.round:before{border-radius:50%}.AccentBar{padding:8px;width:360px}.AccentBar,.AccentBar-compact{animation:fadeIn1 .4s;animation-fill-mode:forwards;background-color:#fff;border:1px solid #d0d0d0;border-radius:5px;box-shadow:1px 1px 5px #a0a0a0;color:#000;position:absolute;z-index:1}.AccentBar-compact{display:flex;padding:5px}.AccentBar-outerContainer{border-radius:5px;overflow-y:scroll}.AccentBar-innerContainer{height:350px}.AccentBar .symbols-grid{grid-gap:3px;display:grid;grid-auto-rows:minmax(min-content,max-content);grid-template-columns:repeat(auto-fill,minmax(36px,1fr))}.AccentBar .insert-grid{padding:5px}.AccentBar .type-a-letter{color:#a0a0a0;font-family:sans-serif;font-size:14px;font-weight:700;grid-column:1/-1;height:36px;padding-left:20px;padding-top:12px}.AccentBar-button{background:#f4f4f4;border:0;border-radius:5px;font-family:sans-serif;font-size:17px;height:36px;padding:1px;width:40px}.AB-compact{background:#fff;margin:0}.AB-narrow{width:36px}.AccentBar-button:hover{animation:grow 2s;animation-fill-mode:forwards;background:#663676;box-shadow:1px 1px 3px grey;color:#fff;cursor:pointer}@keyframes grow{00%{box-shadow:0 0 0 grey;transform:scale(1)}10%{box-shadow:1px 1px 3px grey;transform:scale(1.3)}90%{box-shadow:1px 1px 3px grey;transform:scale(1.3)}to{box-shadow:1px 1px 3px grey;transform:scale(1.8)}}.AccentBar-button:active{background:grey;color:#fff;cursor:pointer}.AccentBar .tabBar{background:#fff;border:0;padding:10px 0;text-align:left}.AccentBar .tab{border:0;border-bottom:4px solid #d0d0d0;color:#404040;font-size:14px;font-weight:700;height:30px;margin:2px;padding:2px 5px;text-align:left}.AccentBar .tab:hover{cursor:pointer}.AccentBar .tab-selected{border:0;border-bottom:4px solid #663676;color:#404040;font-size:14px;font-weight:700;height:30px;margin:2px;padding:2px 5px;text-align:left}.AccentBar .section-label{color:#663676;font-size:13px;font-weight:700;grid-column:1/-1;margin-bottom:4px;margin-left:8px;margin-top:8px}.AccentBar .replace-section{min-height:70px}.AccentBar .tabArea{animation:fadeIn1 .4s;animation-fill-mode:forwards}.Toolbar{animation:fadeIn1 .5s;animation-fill-mode:forwards;background-color:#fff;border:1px solid #d0d0d0;border-radius:5px;box-shadow:1px 1px 5px #a0a0a0;color:#000;display:flex;height:42px;position:absolute;z-index:10}@keyframes fadeIn1{0%{opacity:0}to{opacity:1}}.Toolbar-button{background-color:#fff;border:0;border-radius:5px;font-family:sans-serif;font-size:16px;height:36px;margin:2px;padding:1px;width:40px}.Toolbar-button:hover{background:#663676;color:#fff;cursor:pointer}.Toolbar-button:active{background:grey;color:#fff;cursor:pointer}.TB-narrow{width:30px}.TB-wide{width:46px}.TB-selected{animation:TB-fadeIn .2s;animation-fill-mode:forwards;background:#d0d0d0;color:#000;cursor:pointer}.TB-selected:hover{background:#663676;color:#fff;cursor:pointer}@keyframes TB-fadeIn{00%{background:#fff}to{background:#d0d0d0}}.Toolbar-button .tooltiptext{background-color:#222;border-radius:6px;color:#fff;font-size:12px;font-weight:400;left:50px;padding:4px 10px;position:absolute;text-align:center;top:-90%;visibility:hidden;width:100px;z-index:11}.Toolbar-button:hover .tooltiptext{animation:fadeIn2 .8s;animation-fill-mode:forwards;visibility:visible}@keyframes fadeIn2{00%{opacity:0}70%{opacity:0}to{opacity:.9;visibility:visible}}*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.MathRichInput-Container{border-radius:5px;width:100%}.MathRichInput-scrollview{border-radius:5px;display:flex;position:relative}.MathRichInput p{margin:0;padding:0}.MathRichInput{background-color:#fff;border-radius:5px;font-size:18px;overflow-x:scroll;overflow:overlay;padding:10px;width:100%}.MathRichInput:empty:before{color:#acb6c0;content:attr(data-placeholder);font-size:15px}.MathRichInput:empty:focus:before{content:""}.MathRichInput:focus{outline:0}.MathRichInput .katex{border:0}.MathRichInput .base{background-color:#f0f0f0;border:1px dotted #d0d0d0;border-radius:5px;margin:0 2px;padding:2px}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.MathRichInput .katex-error{background-color:#f0f0f0;border:1px dotted #ff8080;border-radius:5px;margin:0 2px;padding:2px}.MathRichInput-Container :focus-within{background-color:#fff;outline:0}.MathRichInput-Container.dark :focus-within{background:none;border:none;outline:0}.MathRichInput-Container.dark .MathRichInput{background:none;border:none;color:#fff}.MathRichInput-Container.dark .MathRichInput .base,.MathRichInput-Container.dark .MathRichInput .katex{background:none}.MathRichInput-Container.dark .MathRichInput:focus{background:none;border:none}.MathRichInput-Container.question-edit-input .MathRichInput{border-radius:12px;font-size:32px;font-weight:400}.MathRichInput-Container.question-edit-input .MathRichInput:focus{background:hsla(0,0%,100%,.1);border:none}.MathRichInput-Container.answer-edit-input .MathRichInput{font-size:16px;font-weight:400}.MathRichInput-Container.explanation-input .MathRichInput,.MathRichInput-Container.hint-input .MathRichInput{color:#322e33;font-size:16px;font-weight:400}.MathRichInput-Container.explanation-input .MathRichInput .base,.MathRichInput-Container.hint-input .MathRichInput .base{border:1px dotted #322e33}

package/package.json

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

package/rollup.config.js

@@ -17,9 +17,8 @@ export default {
         postcss({
             extensions: [".css"],
             plugins: [nested()], // Process nested rules
-            extract: true, // Extract to a file
+            extract: "math-rich-input.css", // Extract to a file
             minimize: true, // Minimize the output
-            output: "math-rich-input.css",
         }),
         babel({
             babelHelpers: "bundled",

package/src/MathRichInput.jsx

@@ -166,6 +166,7 @@ export default class MathRichInput extends React.Component {
                 superscript: false,
             },
             keyPressed: "",
+            pendingHtmlWithMarker: null,
         };
 
         // this.handleInput   = this.handleInput.bind(this);
@@ -1194,38 +1195,49 @@ export default class MathRichInput extends React.Component {
     };
 
     handlePaste = (event) => {
+    try {
         let clipboardData = event.clipboardData || window.clipboardData;
-        if (clipboardData === null || clipboardData === undefined) {
-            console.warn("handlePaste called, but no clipboard data");
+        if (!clipboardData) {
+            return;
+        } 
+        event.preventDefault();
+        let pasteHtml = clipboardData.getData('text/html');
+        let pasteText = clipboardData.getData('text/plain');
+        const selection = window.getSelection();
+        if (!selection.rangeCount) {
             return;
         }
-        // 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);
-            pasteHtml = sanitiseHtml(pasteHtml);
-            // console.log("** Santised paste html");
-            // console.log(pasteHtml);
-            this.insertHtml(pasteHtml);
-            event.preventDefault();
-        } else {
-            let paste = clipboardData.getData("text");
-            const selection = window.getSelection();
-            if (!selection.rangeCount) {
-                console.warn("handlePaste called, but unable to get selection");
-                return false;
+        selection.deleteFromDocument();
+        if (pasteHtml && pasteHtml.length > 0) {
+            const markerId = `__PASTE_MARKER_${Date.now()}_${Math.floor(Math.random()*10000)}__`;
+            const markerStart = `<span id='${markerId}_START'></span>`;
+            const markerEnd = `<span id='${markerId}_END'></span>`;
+            let markedHtml = markerStart + pasteHtml + markerEnd;
+            if (typeof sanitiseHtml === 'function') {
+                markedHtml = sanitiseHtml(markedHtml);
             }
-            event.preventDefault();
-            selection.deleteFromDocument();
-            this.insertRawText(paste);
+            this._pendingPasteMarkerId = markerId;
+            document.execCommand('insertHTML', false, markedHtml);
+            setTimeout(() => {
+                try {
+                    const rawText = elementToMarkedRawText(this.editableDiv, null, -1, this.enableHtml());
+                    let nodeCounts = this._countNodeTypes();
+                    let mimeType = this.getMimeType(nodeCounts.html > 0, nodeCounts.math > 0);
+                    const cleanedRawText = removeEncodingIfPlainText(rawText, mimeType, this.enableHtml());
+                    this.applyChangesToComponent(cleanedRawText, mimeType, this._getRangeParams(), this.props.useExpertMode, this.props.selectedTab);
+                } catch (err) {
+                    console.error(err);
+                }
+            }, 0);
+        } else if (pasteText && pasteText.length > 0) {
+            this.insertRawText(pasteText);
         }
-    };
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+
 
     componentDidMount() {
         try {
@@ -1251,8 +1263,24 @@ export default class MathRichInput extends React.Component {
     }
 
     componentDidUpdate() {
-        try {
-            // console.log("componentDidUpdate")
+    try {
+        if (this._pendingPasteMarkerId) {
+            const start = document.getElementById(`${this._pendingPasteMarkerId}_START`);
+            const end = document.getElementById(`${this._pendingPasteMarkerId}_END`);
+            if (start && end) {
+                const range = document.createRange();
+                range.setStartAfter(start);
+                range.setEndBefore(end);
+                const sel = window.getSelection();
+                sel.removeAllRanges();
+                sel.addRange(range);
+                start.parentNode && start.parentNode.removeChild(start);
+                end.parentNode && end.parentNode.removeChild(end);
+            }
+            this._pendingPasteMarkerId = null;
+            this.setState({ pendingHtmlWithMarker: null });
+        }
+
             if (
                 this.afterComponentUpdateData !== null &&
                 this.afterComponentUpdateData !== undefined &&
@@ -1629,7 +1657,7 @@ export default class MathRichInput extends React.Component {
         }
     };
 
-    insertRawText = (new_text, selectInsertedText = true) => {
+    insertRawText = (new_text, selectInsertedText = false) => {
         try {
             let rangeParams = this._getRangeParams();
             let node = this._findNodeWithIndex(rangeParams.endNodeIndex);
@@ -1709,10 +1737,11 @@ export default class MathRichInput extends React.Component {
                 // Preserve the selection
                 if (lastNode) {
                     range = range.cloneRange();
-                    range.setStartAfter(lastNode);
                     if (selectPastedContent) {
                         range.setStartBefore(firstNode);
+                        range.setEndAfter(lastNode);
                     } else {
+                        range.setStartAfter(lastNode);
                         range.collapse(true);
                     }
                     sel.removeAllRanges();
@@ -1732,11 +1761,11 @@ export default class MathRichInput extends React.Component {
         }
     };
 
-    insertHtml = (new_html) => {
+    insertHtml = (new_html, selectPastedContent = false) => {
         try {
             // console.log("New html: "+new_html)
             // console.log("inserting: "+new_html)
-            this.pasteHtmlAtCaret(new_html, true);
+            this.pasteHtmlAtCaret(new_html, selectPastedContent);
             let new_rangeParams = null;
             // console.log("New range params: ")
             try {
@@ -2136,7 +2165,7 @@ export default class MathRichInput extends React.Component {
                             onBlur={this.handleBlur}
                             onCompositionStart={this.handleCompositionStart}
                             onCompositionEnd={this.handleCompositionEnd}
-                            dangerouslySetInnerHTML={{ __html: html }}
+                            dangerouslySetInnerHTML={{ __html: this.state.pendingHtmlWithMarker || html }}
                             data-placeholder={this.props.placeholder || ""}
                         ></span>
                     </div>

package/dist/index.css

@@ -1 +0,0 @@
-.SymbolButton{background:#e0e0e0;border:0;border-radius:5px;color:#202020;display:inline-block;font-size:14px;font-weight:700;height:36px;margin:3px 3px auto;overflow:hidden;padding:1px;text-align:center;width:36px}.SymbolButton:hover{animation:grow 2s;animation-fill-mode:forwards;box-shadow:1px 1px 3px grey;color:#000;cursor:pointer;filter:saturate(2)}.SymbolButton:active{background:grey;color:#fff;cursor:pointer;transform:scale(1.3)}.SymbolButton-fadeIn{height:100px;opacity:1;transition:width .5s,height .5s,opacity .5s .5s;width:100px}.highlight-0{background:#ebc9eb}.highlight-operators{background:#f8e8d8}.highlight-angles{background:#cceded}.highlight-greeklower{background:#f8e8d8}.highlight-greekupper{background:#cceded}.highlight-misc{background:#f8e8d8}.highlight-sets{background:#cceded}.highlight-chemistry{background:#f8e8d8}.highlight-elements{background:#cceded}.highlight-physics2{background:#f8e8d8}.highlight-physics3{background:#cceded}.highlight-expert,.highlight-matrices{background:#f4d6f5}.EquationEditor{height:auto;text-align:center}.EquationEditor .editableAndCursorButtonsWrapper{align-items:center;display:flex;justify-content:center}.EquationEditor .editableWrapper{overflow:auto;width:100%}.EquationEditor .cursorButton{background:#fff;border:1px solid #663676;border-radius:5px;color:#663676;font-size:14px;font-weight:700;height:40px;margin-left:15px;margin-right:15px;margin-top:10px;min-width:40px;padding:0;text-align:center;width:auto}.EquationEditor .centerBox{display:inline-block;text-align:center}.EquationEditor .editable{border:1px solid #b0b0b0;border-radius:5px;color:#404040;font-size:20px;margin-bottom:5px;margin-top:6px;min-height:26px;min-width:150px;padding:7px 10px;text-align:left}.EquationEditor .editable-placeholder{color:grey;font-size:15px;min-height:26px;min-width:150px;position:absolute;transform:translate(-12px,-36px);z-index:-1}.EquationEditor .editable:focus-within{border:1px solid #663676!important;border-radius:5px;box-shadow:0 0 0 #fff}.latexInputAreaWrapper{width:auto}.EquationEditor .katexRenderedInput{border:0 solid #b0b0b0;border-radius:5px;color:#404040;font-size:16px;margin:5px 15px;min-height:30px;padding:7px 10px 4px;text-align:left;width:90%}.EquationEditor .latexInput{background-color:#fff;border:1px solid #b0b0b0;border-radius:5px;box-shadow:0 0 0 #fff;color:#007000;font-size:16px;height:88px;margin-top:10px;padding:7px 10px 5px;text-align:left;width:90%}.EquationEditor .latexInput:focus{border:1px solid #663676!important;outline:0}.EquationEditor .insertButton{background:#663676;border:0;border-radius:5px;color:#fff;font-size:14px;height:36px;margin:5px;padding:0 30px;text-align:left}.EquationEditor .cancelButton{background:#fff;border:1px solid #663676;border-radius:5px;color:#663676;font-size:14px;height:36px;margin-bottom:10px;margin-left:5px;margin-right:5px;padding:0 30px;text-align:left}.EquationEditor .insertButton:hover{background:#461656;color:#fff;cursor:pointer}.EquationEditor .recentSymbols-recentText-active{color:#404040;font-size:14px;font-weight:700;margin-right:10px}.EquationEditor .recentSymbols-recentText-not-active{color:grey;font-size:14px;font-weight:700;margin-bottom:10px;margin-top:10px}.EquationEditor .tabBar{background:#fff;border:0;margin:5px;padding:10px 10px 5px 20px;text-align:left}@media (max-width:500px){.EquationEditor .tabBar{padding:5px 0}}.EquationEditor .tab{border:0;border-bottom:6px solid #d0d0d0;color:#404040;font-size:14px;font-weight:700;height:30px;margin:5px;padding:5px 10px;text-align:left}.EquationEditor .tab:hover{cursor:pointer}.EquationEditor .tab-selected{border:0;border-bottom:6px solid #663676;color:#404040;font-size:14px;font-weight:700;height:30px;margin:5px;padding:5px 10px;text-align:left}.EquationEditor .recentSymbolsButtonArea{display:flex;justify-content:flex-start;margin:5px 5px 5px 15px;padding:2px;width:486px}.EquationEditor .symbolButtonAreasOuterContainer{overflow-x:auto}.EquationEditor .symbolButtonAreasInnerContainer{display:flex;width:2330px}.EquationEditor .symbolButtonArea{grid-gap:1.5px;display:grid;grid-auto-rows:minmax(min-content,max-content);grid-template-columns:repeat(auto-fill,minmax(36px,1fr));margin:0;padding:12px}.EquationEditor .symbolButtonArea-1{width:66px}.EquationEditor .symbolButtonArea-2{width:108px}.EquationEditor .symbolButtonArea-3{width:150px}.EquationEditor .symbolButtonArea-4{width:192px}.EquationEditor .symbolButtonArea-5{width:234px}.EquationEditor .symbolButtonArea-6{width:276px}.EquationEditorModal-background{animation:shade .3s;animation-fill-mode:forwards;background:#000;height:100%;left:0;position:fixed;top:0;width:100%;z-index:99}@keyframes shade{00%{opacity:0}to{opacity:.6}}.EquationEditorModal{animation:rise .3s;animation-fill-mode:forwards;background:#fff;border:1px solid grey;border-radius:10px;box-shadow:0 2px 5px 1px #a0a0a0;left:50%;max-width:500px;position:fixed;top:50%;width:98%;z-index:100}@keyframes rise{00%{opacity:0;transform:translate(-50%,100%)}to{opacity:1;transform:translate(-50%,-50%)}}.EquationEditorModal-mobile{background:#fff;border:1px solid grey;border-radius:10px;box-shadow:0 2px 5px 1px #a0a0a0;left:50%;max-width:500px;position:fixed;top:0;transform:translate(-50%,1px);width:99%;z-index:100}.EquationEditorModal .title,.EquationEditorModal-mobile .title{background:#e0e0e0;border:0;border-radius:5px 5px 0 0;color:#404040;display:flex;font-size:14px;justify-content:space-between;margin:0;padding:15px;text-align:left}.EquationEditorModal-mobile .title{height:30px}.expertModeSwitch{align-items:center;display:flex;flex-direction:row}.EquationEditorModal .expertModeSwitch .switch{margin-left:10px}.EquationEditorModal .switch{display:inline-block;height:22px;margin-bottom:0;padding:0;position:relative;width:35px}.EquationEditorModal .switch input{height:0;opacity:0;width:0}.EquationEditorModal .slider{background-color:#ccc;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;transition:.4s}.EquationEditorModal .slider:before{background-color:#fff;bottom:4px;content:"";height:14px;left:4px;position:absolute;transition:.4s;width:14px}.EquationEditorModal input:checked+.slider{background-color:#663676}.EquationEditorModal input:focus+.slider{box-shadow:0 0 1px #2196f3}.EquationEditorModal input:checked+.slider:before{transform:translateX(13px)}.EquationEditorModal .slider.round{border-radius:18px}.EquationEditorModal .slider.round:before{border-radius:50%}.AccentBar{padding:8px;width:360px}.AccentBar,.AccentBar-compact{animation:fadeIn1 .4s;animation-fill-mode:forwards;background-color:#fff;border:1px solid #d0d0d0;border-radius:5px;box-shadow:1px 1px 5px #a0a0a0;color:#000;position:absolute;z-index:1}.AccentBar-compact{display:flex;padding:5px}.AccentBar-outerContainer{border-radius:5px;overflow-y:scroll}.AccentBar-innerContainer{height:350px}.AccentBar .symbols-grid{grid-gap:3px;display:grid;grid-auto-rows:minmax(min-content,max-content);grid-template-columns:repeat(auto-fill,minmax(36px,1fr))}.AccentBar .insert-grid{padding:5px}.AccentBar .type-a-letter{color:#a0a0a0;font-family:sans-serif;font-size:14px;font-weight:700;grid-column:1/-1;height:36px;padding-left:20px;padding-top:12px}.AccentBar-button{background:#f4f4f4;border:0;border-radius:5px;font-family:sans-serif;font-size:17px;height:36px;padding:1px;width:40px}.AB-compact{background:#fff;margin:0}.AB-narrow{width:36px}.AccentBar-button:hover{animation:grow 2s;animation-fill-mode:forwards;background:#663676;box-shadow:1px 1px 3px grey;color:#fff;cursor:pointer}@keyframes grow{00%{box-shadow:0 0 0 grey;transform:scale(1)}10%{box-shadow:1px 1px 3px grey;transform:scale(1.3)}90%{box-shadow:1px 1px 3px grey;transform:scale(1.3)}to{box-shadow:1px 1px 3px grey;transform:scale(1.8)}}.AccentBar-button:active{background:grey;color:#fff;cursor:pointer}.AccentBar .tabBar{background:#fff;border:0;padding:10px 0;text-align:left}.AccentBar .tab{border:0;border-bottom:4px solid #d0d0d0;color:#404040;font-size:14px;font-weight:700;height:30px;margin:2px;padding:2px 5px;text-align:left}.AccentBar .tab:hover{cursor:pointer}.AccentBar .tab-selected{border:0;border-bottom:4px solid #663676;color:#404040;font-size:14px;font-weight:700;height:30px;margin:2px;padding:2px 5px;text-align:left}.AccentBar .section-label{color:#663676;font-size:13px;font-weight:700;grid-column:1/-1;margin-bottom:4px;margin-left:8px;margin-top:8px}.AccentBar .replace-section{min-height:70px}.AccentBar .tabArea{animation:fadeIn1 .4s;animation-fill-mode:forwards}.Toolbar{animation:fadeIn1 .5s;animation-fill-mode:forwards;background-color:#fff;border:1px solid #d0d0d0;border-radius:5px;box-shadow:1px 1px 5px #a0a0a0;color:#000;display:flex;height:42px;position:absolute;z-index:10}@keyframes fadeIn1{0%{opacity:0}to{opacity:1}}.Toolbar-button{background-color:#fff;border:0;border-radius:5px;font-family:sans-serif;font-size:16px;height:36px;margin:2px;padding:1px;width:40px}.Toolbar-button:hover{background:#663676;color:#fff;cursor:pointer}.Toolbar-button:active{background:grey;color:#fff;cursor:pointer}.TB-narrow{width:30px}.TB-wide{width:46px}.TB-selected{animation:TB-fadeIn .2s;animation-fill-mode:forwards;background:#d0d0d0;color:#000;cursor:pointer}.TB-selected:hover{background:#663676;color:#fff;cursor:pointer}@keyframes TB-fadeIn{00%{background:#fff}to{background:#d0d0d0}}.Toolbar-button .tooltiptext{background-color:#222;border-radius:6px;color:#fff;font-size:12px;font-weight:400;left:50px;padding:4px 10px;position:absolute;text-align:center;top:-90%;visibility:hidden;width:100px;z-index:11}.Toolbar-button:hover .tooltiptext{animation:fadeIn2 .8s;animation-fill-mode:forwards;visibility:visible}@keyframes fadeIn2{00%{opacity:0}70%{opacity:0}to{opacity:.9;visibility:visible}}*,:after,:before{box-sizing:border-box}.MathRichInput-Container{border-radius:5px;width:100%}.MathRichInput-scrollview{border-radius:5px;display:flex;position:relative}.MathRichInput p{margin:0;padding:0}.MathRichInput{background-color:#fff;border-radius:5px;font-size:18px;overflow-x:scroll;overflow:overlay;padding:10px;width:100%}.MathRichInput:empty:before{color:#acb6c0;content:attr(data-placeholder);font-size:15px}.MathRichInput:empty:focus:before{content:""}.MathRichInput:focus{outline:0}.MathRichInput .katex{border:0}.MathRichInput .base{background-color:#f0f0f0;border:1px dotted #d0d0d0;border-radius:5px;margin:0 2px;padding:2px}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.MathRichInput .katex-error{background-color:#f0f0f0;border:1px dotted #ff8080;border-radius:5px;margin:0 2px;padding:2px}.MathRichInput-Container :focus-within{background-color:#fff;outline:0}.MathRichInput-Container.dark :focus-within{background:none;border:none;outline:0}.MathRichInput-Container.dark .MathRichInput{background:none;border:none;color:#fff}.MathRichInput-Container.dark .MathRichInput .base,.MathRichInput-Container.dark .MathRichInput .katex{background:none}.MathRichInput-Container.dark .MathRichInput:focus{background:none;border:none}.MathRichInput-Container.question-edit-input .MathRichInput{border-radius:12px;font-size:32px;font-weight:400}.MathRichInput-Container.question-edit-input .MathRichInput:focus{background:hsla(0,0%,100%,.1);border:none}.MathRichInput-Container.answer-edit-input .MathRichInput{font-size:16px;font-weight:400}.MathRichInput-Container.explanation-input .MathRichInput,.MathRichInput-Container.hint-input .MathRichInput{color:#322e33;font-size:16px;font-weight:400}.MathRichInput-Container.explanation-input .MathRichInput .base,.MathRichInput-Container.hint-input .MathRichInput .base{border:1px dotted #322e33}