@zzish/math-rich-input 0.1.47 → 0.1.49

package/dist/index.js

@@ -18845,7 +18845,6 @@ var EquationEditor = /*#__PURE__*/function (_React$Component) {
       });
     });
     _defineProperty(_this, "handleKeyDown", function (e) {
-      // console.log(e.key)
       try {
         if (!_this.props.useExpertMode && e.key === "Enter") {
           _this.handleInsertCallback(_this.state.latex);
@@ -19108,7 +19107,6 @@ var EquationEditor = /*#__PURE__*/function (_React$Component) {
     key: "mathquillDidMount",
     value: function mathquillDidMount(mathQuill) {
       this.mathQuill = mathQuill;
-      mathQuill.focus();
     }
   }, {
     key: "componentDidMount",
@@ -19309,6 +19307,33 @@ var EquationEditorModal = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_this, "handleClose", function () {
       _this.handleCloseCallback();
     });
+    _defineProperty(_this, "focusEquationEditor", function () {
+      console.log("🔍 Focusing equation editor...");
+      if (_this.equationEditor) {
+        console.log("🔍 EquationEditor ref found");
+        if (_this.state.useExpertMode) {
+          // Focus textarea in expert mode
+          console.log("🔍 Expert mode - focusing latexInput");
+          if (_this.equationEditor.latexInput) {
+            _this.equationEditor.latexInput.focus();
+            console.log("✅ LatexInput focused");
+          } else {
+            console.log("❌ LatexInput not found");
+          }
+        } else {
+          // Focus MathQuill in normal mode
+          console.log("🔍 Normal mode - focusing mathQuill");
+          if (_this.equationEditor.mathQuill) {
+            _this.equationEditor.mathQuill.focus();
+            console.log("✅ MathQuill focused");
+          } else {
+            console.log("❌ MathQuill not found");
+          }
+        }
+      } else {
+        console.log("❌ EquationEditor ref not found");
+      }
+    });
     _this.state = {
       useExpertMode: GLOBAL_lastSelectedExpertMode
     };
@@ -19319,7 +19344,25 @@ var EquationEditorModal = /*#__PURE__*/function (_React$Component) {
   _inherits(EquationEditorModal, _React$Component);
   return _createClass(EquationEditorModal, [{
     key: "componentDidMount",
-    value: function componentDidMount() {}
+    value: function componentDidMount() {
+      var _this2 = this;
+      // Auto-focus when modal opens
+      // Use setTimeout to ensure child components are fully mounted
+      setTimeout(function () {
+        _this2.focusEquationEditor();
+      }, 100);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      var _this3 = this;
+      // Re-focus when expert mode changes
+      if (prevState.useExpertMode !== this.state.useExpertMode) {
+        setTimeout(function () {
+          _this3.focusEquationEditor();
+        }, 100);
+      }
+    }
   }, {
     key: "isMobile",
     value: function isMobile() {
@@ -19336,7 +19379,7 @@ var EquationEditorModal = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _this4 = this;
       var useClass = "EquationEditorModal";
       if (this.isMobile()) useClass = "EquationEditorModal-mobile";
       return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -19345,7 +19388,7 @@ var EquationEditorModal = /*#__PURE__*/function (_React$Component) {
       }), /*#__PURE__*/React__default["default"].createElement("div", {
         className: useClass,
         ref: function ref(r) {
-          return _this2.modalDiv = r;
+          return _this4.modalDiv = r;
         }
       }, !this.isMobile() && /*#__PURE__*/React__default["default"].createElement("div", {
         className: "title"
@@ -19356,17 +19399,17 @@ var EquationEditorModal = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/React__default["default"].createElement("input", {
         type: "checkbox",
         ref: function ref(r) {
-          return _this2.expertModeSwitch = r;
+          return _this4.expertModeSwitch = r;
         },
         onChange: function onChange(e) {
-          return _this2.handleExpertModeSwitchChange(e);
+          return _this4.handleExpertModeSwitchChange(e);
         },
         checked: this.state.useExpertMode
       }), /*#__PURE__*/React__default["default"].createElement("span", {
         className: "slider round"
       })))), /*#__PURE__*/React__default["default"].createElement(EquationEditor, {
         ref: function ref(r) {
-          return _this2.equationEditor = r;
+          return _this4.equationEditor = r;
         },
         latex: this.props.latex,
         useExpertMode: this.state.useExpertMode,
@@ -20503,7 +20546,7 @@ 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_OPEN_BASE = '<span class="base">';
 var SPAN_CLOSE = "</span>";
 var MARK$1 = String.fromCharCode(0);
 // const MARK = "_M_A_R_K_"
@@ -20642,11 +20685,25 @@ function getLatex(node) {
     // Example:
     // <annotation encoding="application/x-tex">L' = {L}{\sqrt{1-\frac{v^2}{c^2}}}</annotation>
     var annotation = getFirstDescendentByTagName(node, "annotation");
+
+    // Defensive checks for corrupt KaTeX nodes
+    if (!annotation) {
+      console.warn("KaTeX node missing annotation element");
+      return "error";
+    }
+    if (!annotation.childNodes || annotation.childNodes.length === 0) {
+      console.warn("KaTeX annotation element has no child nodes");
+      return "error";
+    }
+    if (!annotation.childNodes[0] || !annotation.childNodes[0].nodeValue) {
+      console.warn("KaTeX annotation missing text content");
+      return "error";
+    }
     var latex = annotation.childNodes[0].nodeValue;
     return latex;
   } catch (error) {
-    console.error(error);
-    console.log(node);
+    console.error("Error extracting LaTeX from KaTeX node:", error);
+    console.log("Problematic node:", node);
     return "error";
   }
 }
@@ -20666,15 +20723,15 @@ var decodeFromHtml = function () {
   var translate_re = /&(#36|quot|apos|lt|gt|amp|#44|#58|#124);/g,
     translate = {
       // 'nbsp': String.fromCharCode(160), 
-      '#36': '$',
-      'quot': '"',
-      'apos': '\'',
-      'lt': '<',
-      'gt': '>',
-      'amp': '&',
-      '#44': ',',
-      '#58': ':',
-      '#124': '|'
+      "#36": "$",
+      quot: '"',
+      apos: "'",
+      lt: "<",
+      gt: ">",
+      amp: "&",
+      "#44": ",",
+      "#58": ":",
+      "#124": "|"
     },
     translator = function translator($0, $1) {
       return translate[$1];
@@ -20766,6 +20823,11 @@ function addTextForNode(node, arrayOfText) {
       arrayOfText.push(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 if (isBrNode(node)) {
+      // Handle BR tags as line breaks
+      if (mark) arrayOfText.push(MARK$1);
+      arrayOfText.push("\n");
+      if (mark) arrayOfText.push(MARK$1);
     } else {
       console.error("Can't render node in editable div: Unknown node type");
       console.log(node);
@@ -20794,7 +20856,12 @@ function elementToMarkedRawText(element) {
   var useHtmlMath = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
   // console.log("elementToMarkedRawText")
   // console.log(element.innerHTML)
-  if (element.innerHTML === "<p><br></p>") throw new Error("We are here");
+
+  // Handle empty content cases gracefully
+  if (element.innerHTML === "<p><br></p>" || element.innerHTML === "<br>" || element.innerHTML === "") {
+    return "";
+  }
+
   // console.log("Node to mark:")
   // console.log(nodeToMark)
   var nodes = element.childNodes;
@@ -20810,7 +20877,7 @@ 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, '');
+  raw_text = raw_text.replace(SMALL_SPACE_REG_EXP, "");
   return raw_text;
 }
 function replaceMarksWithMath(markedRawText, latex) {
@@ -21134,6 +21201,9 @@ function findNodeAndOffsetForGlobalOffsetInEditableDiv(editableDiv, globalOffset
     console.log("Result:");
     console.log(result);
     console.log("result.offset  > result.node.nodeValue.length");
+    console.log("Node value: '" + result.node.nodeValue + "'");
+    console.log("Node value length: " + result.node.nodeValue.length);
+    console.log("Calculated offset: " + result.offset);
     result.offset = result.node.nodeValue.length;
   }
   return result;
@@ -21164,8 +21234,17 @@ function getRangeParams(editableDiv) {
       console.warn("Adjusting start pos in getRangeParams as container was of type: " + range.startContainer.nodeName);
       range.setStart(textNode, 0);
     } else {
-      console.error("Unable to getRangeParams. seletion.startContainer is not a text node. " + "Node type: " + range.startContainer.nodeName);
-      return null;
+      // Handle empty content case - return default range params
+      // This is normal behavior after selecting all and deleting content
+      console.log("getRangeParams: Empty content detected, using default range params. " + "Node type: " + range.startContainer.nodeName);
+      return {
+        startNodeIndex: 0,
+        startOffset: 0,
+        endNodeIndex: 0,
+        endOffset: 0,
+        startGlobalOffset: 0,
+        endGlobalOffset: 0
+      };
     }
   }
   if (range.endContainer.nodeType !== 3) {
@@ -21174,8 +21253,17 @@ function getRangeParams(editableDiv) {
       console.warn("Adjusting end pos in getRangeParams as container was of type: " + range.endContainer.nodeName);
       range.setEnd(_textNode, 0);
     } else {
-      console.error("Unable to getRangeParams. seletion.endContainer is not a text node. " + "Node type: " + range.endContainer.nodeName);
-      return null;
+      // Handle empty content case - return default range params
+      // This is normal behavior after selecting all and deleting content
+      console.log("getRangeParams: Empty content detected, using default range params. " + "Node type: " + range.endContainer.nodeName);
+      return {
+        startNodeIndex: 0,
+        startOffset: 0,
+        endNodeIndex: 0,
+        endOffset: 0,
+        startGlobalOffset: 0,
+        endGlobalOffset: 0
+      };
     }
   }
   // Find the index of the start and end nodes
@@ -21361,6 +21449,11 @@ function sanitiseHtmlForElement(element) {
     var clone = element.cloneNode(true);
     return clone;
   }
+  // Preserve math tags - they should be processed as math content
+  if (element.nodeType === 1 && element.tagName.toLowerCase() === "math") {
+    var _clone = element.cloneNode(true);
+    return _clone;
+  }
   if (element.tagName === "HEAD" || element.tagName === "STYLE" || element.tagName === "LINK") return null;
   var new_element = null;
   if (isBIUNode(element)) {
@@ -21368,10 +21461,10 @@ function sanitiseHtmlForElement(element) {
     new_element = document.createElement(element.tagName);
   } else if (element.nodeType === 1 && (element.tagName === "LI" || element.tagName === "DT" || element.tagName === "DD" || element.tagName === "THEAD" || element.tagName === "TR" || element.tagName === "H1" || element.tagName === "H2" || element.tagName === "H3" || element.tagName === "H4" || element.tagName === "H5" || element.tagName === "H6")) {
     // console.log("Converting descendent: <"+element.tagName+">"+element.textContent)
-    new_element = document.createElement('p');
+    new_element = document.createElement("p");
   } else {
     // console.log("Stripping descendent:  <"+element.tagName+">"+element.textContent)
-    new_element = document.createElement('span');
+    new_element = document.createElement("span");
   }
   if (element.hasChildNodes()) {
     for (var i = 0; i < element.childNodes.length; i++) {
@@ -21388,7 +21481,7 @@ var SPAN_TAG = new RegExp("<span>|</span>", "g");
 // const COMMENT_TAG_REG_EXP = new RegExp("(?=<!--([\s\S]*?)-->","g")
 // const COMMENT_TAG_REG_EXP = new RegExp("<!--[\s\S]*?-->","gm")
 // const MULTI_WHITE_SPACE_REG_EXP = new RegExp("\s{2,}","gm")
-var KATEX_START_HTML = "<span class=\"katex\"";
+var KATEX_START_HTML = '<span class="katex"';
 var KATEX_END_HTML = "</span></span></span></span>";
 function sanitiseHtml(s) {
   // Remove all <br> tags (as some of these can be inside katex tags)
@@ -21396,7 +21489,7 @@ function sanitiseHtml(s) {
   // console.log("After removing comments:")
   // console.log(s)
   // Next, convert all elements to supported elements
-  var div = document.createElement('div');
+  var div = document.createElement("div");
   div.innerHTML = s;
   var sanitisedElement = sanitiseHtmlForElement(div);
   var sanitised = sanitisedElement.innerHTML;
@@ -21483,6 +21576,81 @@ function sanitiseHtml(s) {
   return sanitised;
 }
 
+// Helper functions for advanced text navigation
+function isWordBoundary(_char) {
+  // Word boundaries are spaces, punctuation, or start/end of string
+  return !_char || /[\s\.,;:!?\-\(\)\[\]{}'"]/g.test(_char);
+}
+function findWordBoundary(text, startPos, direction) {
+  // direction: 1 for forward, -1 for backward
+  var pos = startPos;
+  var len = text.length;
+  if (direction === 1) {
+    // Moving forward - find end of current word, then skip whitespace
+    while (pos < len && !isWordBoundary(text[pos])) {
+      pos++;
+    }
+    while (pos < len && isWordBoundary(text[pos])) {
+      pos++;
+    }
+  } else {
+    // Moving backward - find start of current word, then skip whitespace
+    if (pos > 0) pos--; // Move back one character first
+    while (pos > 0 && isWordBoundary(text[pos])) {
+      pos--;
+    }
+    while (pos > 0 && !isWordBoundary(text[pos - 1])) {
+      pos--;
+    }
+  }
+  return Math.max(0, Math.min(pos, len));
+}
+function findLineBoundary(text, startPos, direction) {
+  // direction: 1 for end of line, -1 for start of line
+  var pos = startPos;
+  var len = text.length;
+  if (direction === 1) {
+    // Find end of current line
+    while (pos < len && text[pos] !== "\n") {
+      pos++;
+    }
+  } else {
+    // Find start of current line
+    while (pos > 0 && text[pos - 1] !== "\n") {
+      pos--;
+    }
+  }
+  return Math.max(0, Math.min(pos, len));
+}
+function getPlainTextFromEditableDiv(editableDiv) {
+  // Convert the editable div content to plain text for boundary detection
+  var text = elementToMarkedRawText(editableDiv, null, 0, false);
+  text = removeMarks(text);
+  // Remove HTML tags and convert to plain text
+  text = text.replace(/<[^>]*>/g, "");
+  text = text.replace(/&nbsp;/g, " ");
+  text = text.replace(/&amp;/g, "&");
+  text = text.replace(/&lt;/g, "<");
+  text = text.replace(/&gt;/g, ">");
+  text = text.replace(/&quot;/g, '"');
+  text = text.replace(/&#39;/g, "'");
+  return text;
+}
+function globalOffsetToPlainTextOffset(editableDiv, globalOffset) {
+  // Convert global offset to plain text offset for boundary detection
+  var plainText = getPlainTextFromEditableDiv(editableDiv);
+  // This is a simplified mapping - in a real implementation you'd want
+  // to account for the difference between HTML and plain text offsets
+  return Math.min(globalOffset, plainText.length);
+}
+function plainTextOffsetToGlobalOffset(editableDiv, plainTextOffset) {
+  // Convert plain text offset back to global offset
+  // This is a simplified mapping - in a real implementation you'd want
+  // to account for the difference between HTML and plain text offsets
+  var plainText = getPlainTextFromEditableDiv(editableDiv);
+  return Math.min(plainTextOffset, plainText.length);
+}
+
 var MIME_TYPE_PLAIN_TEXT = "text/plain";
 var MIME_TYPE_HTML = "text/html";
 var MIME_TYPE_TEX = "application/x-tex";
@@ -21652,6 +21820,9 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       });
       if (_this2.undoHistory.length > MAX_HISTORY_LENGTH) _this2.undoHistory.shift();
 
+      // Debug what's being passed to parent
+      // console.log("APPLY CHANGES:", { value, mimeType });
+
       // Call the parent handler to apply the changes
       _this2.onChangeCallback({
         value: value,
@@ -21708,7 +21879,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         _this2.lastSetRangeParmas = params;
       } catch (error) {
         console.error(error);
-        console.log(_this2.editableDiv.childNodes);
+        // console.log(this.editableDiv.childNodes);
       }
     });
     _defineProperty(_this2, "handleKeyDownBackspace", function (e) {
@@ -21825,47 +21996,317 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_this2, "inputStartsWithSmallSpace", function () {
       return startsWithSmallSpace(_this2.editableDiv);
     });
+    // Platform detection helper
+    _defineProperty(_this2, "getPlatformModifiers", function () {
+      var isMac = /(Mac)/i.test(window.navigator.platform);
+      var isWindows = /(Win)/i.test(window.navigator.platform);
+      return {
+        isMac: isMac,
+        isWindows: isWindows
+      };
+    });
+    // Check if word navigation modifier is pressed
+    _defineProperty(_this2, "isWordModifier", function (e) {
+      var _this2$getPlatformMod = _this2.getPlatformModifiers(),
+        isMac = _this2$getPlatformMod.isMac;
+      return isMac ? e.altKey : e.ctrlKey;
+    });
+    // Check if line navigation modifier is pressed
+    _defineProperty(_this2, "isLineModifier", function (e) {
+      var _this2$getPlatformMod2 = _this2.getPlatformModifiers(),
+        isMac = _this2$getPlatformMod2.isMac;
+      return isMac ? e.metaKey : e.ctrlKey;
+    });
     _defineProperty(_this2, "handleKeyDownArrowLeft", function (e) {
       var rangeParams = _this2._getRangeParams();
-      rangeParams.startNodeIndex;
-      rangeParams.startOffset;
+      var hasSelection = rangeParams.startGlobalOffset !== rangeParams.endGlobalOffset;
 
-      // console.log("handleKeyDownArrowLeft")
-      // console.log(rangeParams)
-      var new_globalOffset = rangeParams.endGlobalOffset - 1;
+      // If has selection and no shift, move cursor to LEFT end of selection
+      if (!e.shiftKey && hasSelection) {
+        _this2.selectionAnchor = null;
+        var _new_rangeParams2 = {
+          startGlobalOffset: rangeParams.startGlobalOffset,
+          endGlobalOffset: rangeParams.startGlobalOffset
+        };
+        e.preventDefault();
+        _this2._setRangeParams(_new_rangeParams2);
+        return;
+      }
+
+      // For left arrow, current position is at the start of selection (or cursor position)
+      var currentGlobalOffset = hasSelection ? rangeParams.startGlobalOffset : rangeParams.endGlobalOffset;
+      var newGlobalOffset = currentGlobalOffset;
+
+      // Determine movement type based on modifier keys
+      if (_this2.isLineModifier(e)) {
+        // Move to beginning of line
+        var plainText = getPlainTextFromEditableDiv(_this2.editableDiv);
+        var plainTextOffset = globalOffsetToPlainTextOffset(_this2.editableDiv, currentGlobalOffset);
+        var lineStart = findLineBoundary(plainText, plainTextOffset, -1);
+        newGlobalOffset = plainTextOffsetToGlobalOffset(_this2.editableDiv, lineStart);
+      } else if (_this2.isWordModifier(e)) {
+        // Move to beginning of word
+        var _plainText = getPlainTextFromEditableDiv(_this2.editableDiv);
+        var _plainTextOffset = globalOffsetToPlainTextOffset(_this2.editableDiv, currentGlobalOffset);
+        var wordStart = findWordBoundary(_plainText, _plainTextOffset, -1);
+        newGlobalOffset = plainTextOffsetToGlobalOffset(_this2.editableDiv, wordStart);
+      } else {
+        // Regular left arrow: Move one character
+        newGlobalOffset = Math.max(0, currentGlobalOffset - 1);
+      }
+
+      // Handle selection based on shift key
       var new_rangeParams = null;
-      if (e.shiftKey && new_globalOffset > rangeParams.startGlobalOffset) {
+      if (e.shiftKey) {
+        // Set anchor if not already set
+        if (_this2.selectionAnchor === null) {
+          // Determine which end was the cursor position
+          if (hasSelection) {
+            // If we had a selection, we need to determine which end the cursor was at
+            // For left arrow, we want to extend from the right end
+            _this2.selectionAnchor = rangeParams.endGlobalOffset;
+          } else {
+            // No previous selection, current position becomes anchor
+            _this2.selectionAnchor = currentGlobalOffset;
+          }
+        }
+
+        // Create selection from anchor to new position
         new_rangeParams = {
-          startGlobalOffset: rangeParams.startGlobalOffset,
-          endGlobalOffset: new_globalOffset
+          startGlobalOffset: Math.min(_this2.selectionAnchor, newGlobalOffset),
+          endGlobalOffset: Math.max(_this2.selectionAnchor, newGlobalOffset)
         };
       } else {
+        // Move cursor and clear anchor
+        _this2.selectionAnchor = null;
         new_rangeParams = {
-          startGlobalOffset: new_globalOffset,
-          endGlobalOffset: new_globalOffset
+          startGlobalOffset: newGlobalOffset,
+          endGlobalOffset: newGlobalOffset
         };
       }
-      // console.log(new_rangeParams)
       e.preventDefault();
       _this2._setRangeParams(new_rangeParams);
       return;
     });
     _defineProperty(_this2, "handleKeyDownArrowRight", function (e) {
-      // console.log("handleKeyDownArrowRight")
       var rangeParams = _this2._getRangeParams();
-      rangeParams.startNodeIndex;
-      rangeParams.startOffset;
+      var hasSelection = rangeParams.startGlobalOffset !== rangeParams.endGlobalOffset;
+
+      // If has selection and no shift, move cursor to RIGHT end of selection
+      if (!e.shiftKey && hasSelection) {
+        _this2.selectionAnchor = null;
+        var _new_rangeParams3 = {
+          startGlobalOffset: rangeParams.endGlobalOffset,
+          endGlobalOffset: rangeParams.endGlobalOffset
+        };
+        e.preventDefault();
+        _this2._setRangeParams(_new_rangeParams3);
+        return;
+      }
+
+      // For right arrow, current position is at the end of selection (or cursor position)
+      var currentGlobalOffset = rangeParams.endGlobalOffset;
+      var newGlobalOffset = currentGlobalOffset;
+
+      // Determine movement type based on modifier keys
+      if (_this2.isLineModifier(e)) {
+        // Move to end of line
+        var plainText = getPlainTextFromEditableDiv(_this2.editableDiv);
+        var plainTextOffset = globalOffsetToPlainTextOffset(_this2.editableDiv, currentGlobalOffset);
+        var lineEnd = findLineBoundary(plainText, plainTextOffset, 1);
+        newGlobalOffset = plainTextOffsetToGlobalOffset(_this2.editableDiv, lineEnd);
+      } else if (_this2.isWordModifier(e)) {
+        // Move to end of word
+        var _plainText2 = getPlainTextFromEditableDiv(_this2.editableDiv);
+        var _plainTextOffset2 = globalOffsetToPlainTextOffset(_this2.editableDiv, currentGlobalOffset);
+        var wordEnd = findWordBoundary(_plainText2, _plainTextOffset2, 1);
+        newGlobalOffset = plainTextOffsetToGlobalOffset(_this2.editableDiv, wordEnd);
+      } else {
+        // Regular right arrow: Move one character
+        newGlobalOffset = currentGlobalOffset + 1;
+      }
+
+      // Handle selection based on shift key
       var new_rangeParams = null;
-      var new_globalOffset = rangeParams.endGlobalOffset + 1;
-      if (e.shiftKey && new_globalOffset > rangeParams.startGlobalOffset) {
+      if (e.shiftKey) {
+        // Set anchor if not already set
+        if (_this2.selectionAnchor === null) {
+          // Determine which end was the cursor position
+          if (hasSelection) {
+            // If we had a selection, we need to determine which end the cursor was at
+            // For right arrow, we want to extend from the left end
+            _this2.selectionAnchor = rangeParams.startGlobalOffset;
+          } else {
+            // No previous selection, current position becomes anchor
+            _this2.selectionAnchor = currentGlobalOffset;
+          }
+        }
+
+        // Create selection from anchor to new position
+        new_rangeParams = {
+          startGlobalOffset: Math.min(_this2.selectionAnchor, newGlobalOffset),
+          endGlobalOffset: Math.max(_this2.selectionAnchor, newGlobalOffset)
+        };
+      } else {
+        // Move cursor and clear anchor
+        _this2.selectionAnchor = null;
         new_rangeParams = {
+          startGlobalOffset: newGlobalOffset,
+          endGlobalOffset: newGlobalOffset
+        };
+      }
+      e.preventDefault();
+      _this2._setRangeParams(new_rangeParams);
+      return;
+    });
+    _defineProperty(_this2, "handleKeyDownArrowUp", function (e) {
+      var rangeParams = _this2._getRangeParams();
+      var hasSelection = rangeParams.startGlobalOffset !== rangeParams.endGlobalOffset;
+
+      // If no selection and no shift, just move cursor to start of selection (if any)
+      if (!e.shiftKey && hasSelection) {
+        _this2.selectionAnchor = null;
+        var _new_rangeParams4 = {
           startGlobalOffset: rangeParams.startGlobalOffset,
-          endGlobalOffset: new_globalOffset
+          endGlobalOffset: rangeParams.startGlobalOffset
+        };
+        e.preventDefault();
+        _this2._setRangeParams(_new_rangeParams4);
+        return;
+      }
+
+      // For up arrow (backward movement), current position is at the start of selection
+      var currentGlobalOffset = hasSelection ? rangeParams.startGlobalOffset : rangeParams.endGlobalOffset;
+      var newGlobalOffset = currentGlobalOffset;
+
+      // Determine movement type based on modifier keys
+      if (_this2.isLineModifier(e)) {
+        // Move to beginning of document
+        newGlobalOffset = 0;
+      } else {
+        // Regular up arrow: Move to previous line (or beginning if single line)
+        var plainText = getPlainTextFromEditableDiv(_this2.editableDiv);
+        var plainTextOffset = globalOffsetToPlainTextOffset(_this2.editableDiv, currentGlobalOffset);
+        var lineStart = findLineBoundary(plainText, plainTextOffset, -1);
+        if (lineStart === 0) {
+          // Already at first line, move to beginning
+          newGlobalOffset = 0;
+        } else {
+          // Find previous line and try to maintain column position
+          var currentColumn = plainTextOffset - lineStart;
+          var prevLineEnd = lineStart - 1;
+          var prevLineStart = findLineBoundary(plainText, prevLineEnd, -1);
+          var prevLineLength = prevLineEnd - prevLineStart;
+          var targetColumn = Math.min(currentColumn, prevLineLength);
+          newGlobalOffset = plainTextOffsetToGlobalOffset(_this2.editableDiv, prevLineStart + targetColumn);
+        }
+      }
+
+      // Handle selection based on shift key
+      var new_rangeParams = null;
+      if (e.shiftKey) {
+        // Set anchor if not already set
+        if (_this2.selectionAnchor === null) {
+          // Determine which end was the cursor position
+          if (hasSelection) {
+            // If we had a selection, we need to determine which end the cursor was at
+            // For up arrow (backward), we want to extend from the right end
+            _this2.selectionAnchor = rangeParams.endGlobalOffset;
+          } else {
+            // No previous selection, current position becomes anchor
+            _this2.selectionAnchor = currentGlobalOffset;
+          }
+        }
+
+        // Create selection from anchor to new position
+        new_rangeParams = {
+          startGlobalOffset: Math.min(_this2.selectionAnchor, newGlobalOffset),
+          endGlobalOffset: Math.max(_this2.selectionAnchor, newGlobalOffset)
+        };
+      } else {
+        // Move cursor and clear anchor
+        _this2.selectionAnchor = null;
+        new_rangeParams = {
+          startGlobalOffset: newGlobalOffset,
+          endGlobalOffset: newGlobalOffset
+        };
+      }
+      e.preventDefault();
+      _this2._setRangeParams(new_rangeParams);
+      return;
+    });
+    _defineProperty(_this2, "handleKeyDownArrowDown", function (e) {
+      var rangeParams = _this2._getRangeParams();
+      var hasSelection = rangeParams.startGlobalOffset !== rangeParams.endGlobalOffset;
+
+      // If no selection and no shift, just move cursor to end of selection (if any)
+      if (!e.shiftKey && hasSelection) {
+        _this2.selectionAnchor = null;
+        var _new_rangeParams5 = {
+          startGlobalOffset: rangeParams.endGlobalOffset,
+          endGlobalOffset: rangeParams.endGlobalOffset
+        };
+        e.preventDefault();
+        _this2._setRangeParams(_new_rangeParams5);
+        return;
+      }
+
+      // For down arrow (forward movement), current position is at the end of selection
+      var currentGlobalOffset = rangeParams.endGlobalOffset;
+      var newGlobalOffset = currentGlobalOffset;
+
+      // Determine movement type based on modifier keys
+      if (_this2.isLineModifier(e)) {
+        // Move to end of document
+        var plainText = getPlainTextFromEditableDiv(_this2.editableDiv);
+        newGlobalOffset = plainTextOffsetToGlobalOffset(_this2.editableDiv, plainText.length);
+      } else {
+        // Regular down arrow: Move to next line (or end if single line)
+        var _plainText3 = getPlainTextFromEditableDiv(_this2.editableDiv);
+        var plainTextOffset = globalOffsetToPlainTextOffset(_this2.editableDiv, currentGlobalOffset);
+        var lineStart = findLineBoundary(_plainText3, plainTextOffset, -1);
+        var lineEnd = findLineBoundary(_plainText3, plainTextOffset, 1);
+        if (lineEnd >= _plainText3.length) {
+          // Already at last line, move to end
+          newGlobalOffset = plainTextOffsetToGlobalOffset(_this2.editableDiv, _plainText3.length);
+        } else {
+          // Find next line and try to maintain column position
+          var currentColumn = plainTextOffset - lineStart;
+          var nextLineStart = lineEnd + 1;
+          var nextLineEnd = findLineBoundary(_plainText3, nextLineStart, 1);
+          var nextLineLength = nextLineEnd - nextLineStart;
+          var targetColumn = Math.min(currentColumn, nextLineLength);
+          newGlobalOffset = plainTextOffsetToGlobalOffset(_this2.editableDiv, nextLineStart + targetColumn);
+        }
+      }
+
+      // Handle selection based on shift key
+      var new_rangeParams = null;
+      if (e.shiftKey) {
+        // Set anchor if not already set
+        if (_this2.selectionAnchor === null) {
+          // Determine which end was the cursor position
+          if (hasSelection) {
+            // If we had a selection, we need to determine which end the cursor was at
+            // For down arrow (forward), we want to extend from the left end
+            _this2.selectionAnchor = rangeParams.startGlobalOffset;
+          } else {
+            // No previous selection, current position becomes anchor
+            _this2.selectionAnchor = currentGlobalOffset;
+          }
+        }
+
+        // Create selection from anchor to new position
+        new_rangeParams = {
+          startGlobalOffset: Math.min(_this2.selectionAnchor, newGlobalOffset),
+          endGlobalOffset: Math.max(_this2.selectionAnchor, newGlobalOffset)
         };
       } else {
+        // Move cursor and clear anchor
+        _this2.selectionAnchor = null;
         new_rangeParams = {
-          startGlobalOffset: new_globalOffset,
-          endGlobalOffset: new_globalOffset
+          startGlobalOffset: newGlobalOffset,
+          endGlobalOffset: newGlobalOffset
         };
       }
       e.preventDefault();
@@ -22033,7 +22474,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
           return;
         }
         if (!(e.ctrlKey || e.metaKey)) _this2.resetHistoryRedo();
-        if ((e.metaKey || e.ctrlKey) && (e.key === "b" || e.key === "i" || e.key === "u" || e.key === "6" || e.key === "^" || e.key === "-" || e.key === "_" || e.key === "+" || e.key === "=") && _this2.enableHtml()) {
+        if ((e.metaKey || e.ctrlKey) && (e.key === "b" || e.key === "i" || e.key === "u" || e.key === "6" || e.key === "^" || e.key === "-" || e.key === "_" || e.key === "+" || e.key === "=") && _this2.enableFontStyling()) {
           if (e.key === "b") _this2.styleText(e, "Bold");
           if (e.key === "i") _this2.styleText(e, "Italic");
           if (e.key === "u") _this2.styleText(e, "Underline");
@@ -22084,12 +22525,12 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         if (e.altKey && e.key === "Alt") {
           var key = _this2.fetchAccentLetter();
           if (key === "a" || key === "e" || key === "i" || key === "o" || key === "u" || key === "c" || key === "l" || key === "n" || key === "s" || key === "?" || key === "!") {
-            console.log("showing/hiding accent bar");
+            // console.log("showing/hiding accent bar");
             _this2.setState({
               showAccentBar: !_this2.state.showAccentBar
             });
           } else {
-            console.log("hiding accent bar");
+            // console.log("hiding accent bar");
             _this2.setState({
               showAccentBar: false
             });
@@ -22108,7 +22549,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         if (_this2.keyPressStartTime < 0) {
           _this2.keyPressStartTime = Date.now();
           if (_this2.state.showAccentBar) {
-            console.log("Hiding accent bar 2");
+            // console.log("Hiding accent bar 2");
             _this2.setState({
               showAccentBar: false
             });
@@ -22126,6 +22567,14 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
           _this2.handleKeyDownArrowRight(e);
           return;
         }
+        if (e.key === "ArrowUp") {
+          _this2.handleKeyDownArrowUp(e);
+          return;
+        }
+        if (e.key === "ArrowDown") {
+          _this2.handleKeyDownArrowDown(e);
+          return;
+        }
         if (e.key === "$") {
           _this2.handleKeyDownDollar(e);
           return;
@@ -22196,7 +22645,14 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         }
       } catch (error) {
         console.error(error);
-        console.log("Key pressed: " + (e.metaKey ? "META+" : "") + (e.ctrlKey ? "CTRL+" : "") + (e.altKey ? "ALT+" : "") + (e.shiftKey ? "SHIFT+" : "") + e.key);
+        // console.log(
+        //   "Key pressed: " +
+        //     (e.metaKey ? "META+" : "") +
+        //     (e.ctrlKey ? "CTRL+" : "") +
+        //     (e.altKey ? "ALT+" : "") +
+        //     (e.shiftKey ? "SHIFT+" : "") +
+        //     e.key
+        // );
       }
     });
     _defineProperty(_this2, "handleKeyUp", function (e) {
@@ -22256,14 +22712,14 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
                 _new_index = _index + 1;
                 _new_offset = SMALL_SPACE_LENGTH;
               }
-              var _new_rangeParams2 = {
+              var _new_rangeParams6 = {
                 startNodeIndex: _new_index,
                 startOffset: _new_offset,
                 endNodeIndex: _new_index,
                 endOffset: _new_offset
               };
               // console.log(new_rangeParams)
-              _this2._setRangeParams(_new_rangeParams2);
+              _this2._setRangeParams(_new_rangeParams6);
             }
           }
         }
@@ -22278,14 +22734,56 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         if (_this2.isComposing) return;
         var raw_text = elementToMarkedRawText(_this2.editableDiv, null, 0, _this2.enableHtml());
         var params = _this2._getRangeParams();
-        if (params === null || params === undefined) console.error("Could not get range params from input field");else if (params.startNodeIndex === null || params.startNodeIndex === undefined) console.error("Could not get range params from input field, startNodeIndex===" + params.startNodeIndex);else {
+        if (params === null || params === undefined) {
+          // console.log(
+          //   "handleInput: Empty content detected, using default range params"
+          // );
+          // Use default empty range params for graceful degradation
+          var defaultParams = {
+            startNodeIndex: 0,
+            startOffset: 0,
+            endNodeIndex: 0,
+            endOffset: 0,
+            startGlobalOffset: 0,
+            endGlobalOffset: 0
+          };
+          // Continue with default params instead of crashing
+          var _nodeCounts = _this2._countNodeTypes();
+          var _mimeType = _this2.getMimeType(_nodeCounts.html > 0, _nodeCounts.math > 0);
+          var _raw_text = elementToMarkedRawText(_this2.editableDiv, null, 0, _this2.enableHtml());
+          _raw_text = removeEncodingIfPlainText(_raw_text, _mimeType, _this2.enableHtml());
+          _this2.applyChangesToComponent(_raw_text, _mimeType, defaultParams, _this2.props.useExpertMode, _this2.props.selectedTab);
+          return;
+        } else if (params.startNodeIndex === null || params.startNodeIndex === undefined) {
+          // console.log(
+          //   "handleInput: Invalid startNodeIndex detected: " +
+          //     params.startNodeIndex
+          // );
+        } else {
           // console.log("Current range params:")
           // console.log(params)
         }
+
+        // Check for math content directly in raw text for more reliable detection
+        var hasMathContent = /<math>/i.test(raw_text);
         var nodeCounts = _this2._countNodeTypes();
-        var mimeType = _this2.getMimeType(nodeCounts.html > 0, nodeCounts.math > 0);
+
+        // Use raw text math detection if DOM counting fails (e.g., after paste)
+        var hasHtml = nodeCounts.html > 0 || /<[^>]+>/i.test(raw_text);
+        var hasMath = hasMathContent || nodeCounts.math > 0;
+        var mimeType = _this2.getMimeType(hasHtml, hasMath);
         raw_text = removeEncodingIfPlainText(raw_text, mimeType, _this2.enableHtml());
-        _this2.applyChangesToComponent(raw_text, mimeType, params, _this2.props.useExpertMode, _this2.props.selectedTab);
+
+        // Use valid params or fallback to defaults
+        var validParams = params || {
+          startNodeIndex: 0,
+          startOffset: 0,
+          endNodeIndex: 0,
+          endOffset: 0,
+          startGlobalOffset: 0,
+          endGlobalOffset: 0
+        };
+        _this2.applyChangesToComponent(raw_text, mimeType, validParams, _this2.props.useExpertMode, _this2.props.selectedTab);
       } catch (error) {
         console.error(error);
       }
@@ -22295,11 +22793,39 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         // console.log("updateActiveButtons")
         var rangeParams = _this2._getRangeParams();
         if (rangeParams === null || rangeParams === undefined) {
-          console.warn("Unable to updateActiveButtons. rangeParams: " + rangeParams);
+          // console.log(
+          //   "updateActiveButtons: Empty content detected, setting all buttons to inactive"
+          // );
+          // Set all buttons to inactive state for graceful degradation
+          var _activeButtons = {
+            bold: false,
+            italic: false,
+            underline: false,
+            subscript: false,
+            superscript: false
+          };
+          _this2.lastSetActiveButtons = _activeButtons;
+          _this2.setState({
+            activeButtons: _activeButtons
+          });
           return;
         }
         if (rangeParams.startNodeIndex < 0) {
-          console.warn("Unable to updateActiveButtons. rangeParams.startNodeIndex: " + rangeParams.startNodeIndex);
+          // console.log(
+          //   "updateActiveButtons: Empty content detected (startNodeIndex < 0), setting all buttons to inactive"
+          // );
+          // Set all buttons to inactive state for graceful degradation
+          var _activeButtons2 = {
+            bold: false,
+            italic: false,
+            underline: false,
+            subscript: false,
+            superscript: false
+          };
+          _this2.lastSetActiveButtons = _activeButtons2;
+          _this2.setState({
+            activeButtons: _activeButtons2
+          });
           return;
         }
         var node = _this2._findNodeWithIndex(rangeParams.startNodeIndex);
@@ -22344,37 +22870,229 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         console.error(error);
       }
     });
-    _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;
+    _defineProperty(_this2, "handleCopy", function (event) {
+      try {
+        var selection = window.getSelection();
+        if (selection.rangeCount === 0) return;
+        var range = selection.getRangeAt(0);
+        var container = document.createElement("div");
+        container.appendChild(range.cloneContents());
+
+        // Convert KaTeX nodes to raw LaTeX for clipboard
+        var katexNodes = container.querySelectorAll(".katex");
+        katexNodes.forEach(function (katexNode) {
+          try {
+            var latex = getLatex(katexNode);
+            if (latex && latex !== "error") {
+              // Replace KaTeX node with raw LaTeX in math tags
+              var mathElement = document.createElement("span");
+              mathElement.setAttribute("data-latex", latex);
+              mathElement.textContent = "<math>".concat(latex, "</math>");
+              katexNode.parentNode.replaceChild(mathElement, katexNode);
+            }
+          } catch (err) {
+            console.warn("Failed to extract LaTeX during copy:", err);
+          }
+        });
+
+        // Set clipboard data
+        var htmlContent = container.innerHTML;
+        var textContent = container.textContent;
+        if (event.clipboardData) {
+          event.clipboardData.setData("text/html", htmlContent);
+          event.clipboardData.setData("text/plain", textContent);
+          event.preventDefault();
+        }
+      } catch (error) {
+        console.error("Error during copy operation:", error);
       }
-      // 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);
+    });
+    _defineProperty(_this2, "handlePaste", function (event) {
+      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");
+
+        // Get current cursor position
+        var rangeParams = _this2._getRangeParams();
+        if (!rangeParams) {
+          console.warn("Could not get range params for paste");
+          return;
+        }
+
+        // Store old range params for cursor positioning (like equation editor)
+        _this2.setOldRangeParams(rangeParams);
+
+        // Clear any existing selection
         var selection = window.getSelection();
-        if (!selection.rangeCount) {
-          console.warn("handlePaste called, but unable to get selection");
-          return false;
+        if (selection.rangeCount > 0) {
+          selection.deleteFromDocument();
         }
-        event.preventDefault();
-        selection.deleteFromDocument();
-        _this2.insertRawText(paste);
+        var finalText = "";
+        var finalMimeType = _this2.props.mimeType || "text/html";
+        var hasMathContent = false;
+
+        // Process HTML paste first
+        if (pasteHtml && pasteHtml.length > 0) {
+          // console.log("PASTE DEBUG - HTML detected:", JSON.stringify(pasteHtml));
+          var processedHtml = pasteHtml;
+
+          // Clean unwanted elements
+          processedHtml = processedHtml.replace(/<meta[^>]*>/gi, "");
+          processedHtml = processedHtml.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, "");
+          processedHtml = processedHtml.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, "");
+          processedHtml = processedHtml.replace(/<!\x2D\x2D[\s\S]*?\x2D\x2D>/g, "");
+
+          // Convert data-latex attributes to math tags
+          processedHtml = processedHtml.replace(/<span[^>]*data-latex="([^"]*)"[^>]*>.*?<\/span>/gi, "<math>$1</math>");
+
+          // Convert KaTeX nodes to math tags
+          processedHtml = processedHtml.replace(/<span[^>]*class="katex"[^>]*>.*?<annotation[^>]*encoding="application\/x-tex"[^>]*>([^<]*)<\/annotation>.*?<\/span>/gi, "<math>$1</math>");
+
+          // Extract raw text content, keeping math tags
+          var rawTextContent = processedHtml;
+          rawTextContent = rawTextContent.replace(/<(?!\/?(math)>)[^>]*>/gi, "");
+
+          // console.log(
+          //   "PASTE DEBUG - Extracted raw text:",
+          //   JSON.stringify(rawTextContent)
+          // );
+
+          // Apply sanitiseHtml for security (like in the old version)
+          if (typeof sanitiseHtml === "function") {
+            rawTextContent = sanitiseHtml(rawTextContent);
+            // console.log("PASTE DEBUG - After sanitiseHtml:", JSON.stringify(rawTextContent));
+          }
+
+          // Check if we have math content
+          var hasMathTags = /<math>/i.test(rawTextContent);
+          // console.log("PASTE DEBUG - Has math tags:", hasMathTags);
+
+          // Also check for LaTeX patterns in the extracted text (in case HTML doesn't have math tags)
+          var hasLatexPatterns = _this2.detectLatexPatterns(rawTextContent);
+          // console.log("PASTE DEBUG - Has LaTeX patterns:", hasLatexPatterns);
+
+          if ((hasMathTags || hasLatexPatterns) && _this2.enableMath()) {
+            // If we found LaTeX patterns but no math tags, wrap the content
+            if (!hasMathTags && hasLatexPatterns) {
+              finalText = "<math>".concat(rawTextContent, "</math>");
+              // console.log(
+              //   "PASTE DEBUG - Wrapping extracted HTML content in math tags"
+              // );
+            } else {
+              finalText = rawTextContent;
+            }
+            finalMimeType = "application/x-zzish-html-math";
+            hasMathContent = true;
+          } else {
+            finalText = rawTextContent;
+            finalMimeType = "text/html";
+          }
+        }
+        // Process plain text paste
+        else if (pasteText && pasteText.length > 0) {
+          // Debug paste content
+          // console.log("PASTE DEBUG - Original text:", JSON.stringify(pasteText));
+          // console.log("PASTE DEBUG - Text length:", pasteText.length);
+
+          // Clean up paste text (remove excessive newlines that might interfere with detection)
+          var cleanedPasteText = pasteText.replace(/\n{3,}/g, "\n").trim();
+          // console.log(
+          //   "PASTE DEBUG - Cleaned text:",
+          //   JSON.stringify(cleanedPasteText)
+          // );
+
+          // Use comprehensive LaTeX pattern detection
+          var _hasLatexPatterns = _this2.detectLatexPatterns(cleanedPasteText);
+          // console.log("PASTE DEBUG - LaTeX patterns detected:", hasLatexPatterns);
+
+          if (_hasLatexPatterns && _this2.enableMath()) {
+            // Wrap entire paste content in math tags if LaTeX patterns detected
+            finalText = "<math>".concat(cleanedPasteText, "</math>");
+            finalMimeType = "application/x-zzish-html-math";
+            hasMathContent = true;
+            // console.log("PASTE DEBUG - Wrapping in math tags:", finalText);
+          } else {
+            finalText = cleanedPasteText;
+            finalMimeType = "text/plain";
+            // console.log("PASTE DEBUG - Using as plain text:", finalText);
+          }
+        } else {
+          // Nothing to paste
+          return;
+        }
+
+        // Use the component's insert mechanism to handle paste properly
+        if (finalText) {
+          // Get current node and create marked text at cursor position
+          var currentNode = _this2._findNodeWithIndex(rangeParams.startNodeIndex);
+          var markedText = elementToMarkedRawText(_this2.editableDiv, currentNode, rangeParams.startOffset, _this2.enableHtml());
+
+          // Insert the new content at the marked position
+          var newRawText = removeMarks(insertCharacterBeforeMarks(markedText, finalText));
+
+          // Convert any remaining \[...\] LaTeX expressions to <math>...</math> format
+          // This ensures consistency when paste adds <math> tags alongside existing \[...\] expressions
+          if (_this2.enableMath()) {
+            newRawText = newRawText.replace(/\\\[([^\]]*?)\\\]/g, "<math>$1</math>");
+          }
+
+          // Calculate cursor position exactly like equation editor does
+          var newRangeParams = null;
+          if (hasMathContent) {
+            // Use same approach as equation editor for math content
+            var oldRangeParams = _this2.getOldRangeParams();
+            var mathTagCount = (finalText.match(/<math>/gi) || []).length;
+            if (_this2.props.value === "") {
+              // Special case of previously empty text input (like equation editor)
+              newRangeParams = {
+                startNodeIndex: mathTagCount * 2,
+                startOffset: SMALL_SPACE_LENGTH,
+                endNodeIndex: mathTagCount * 2,
+                endOffset: SMALL_SPACE_LENGTH
+              };
+            } else {
+              // Normal case - position cursor after inserted math content (like equation editor)
+              newRangeParams = {
+                startNodeIndex: oldRangeParams.startNodeIndex + mathTagCount * 2,
+                startOffset: SMALL_SPACE_LENGTH,
+                endNodeIndex: oldRangeParams.startNodeIndex + mathTagCount * 2,
+                endOffset: SMALL_SPACE_LENGTH
+              };
+            }
+          } else {
+            // For text content, use global offset like before
+            var newGlobalOffset = rangeParams.startGlobalOffset + finalText.length;
+            newRangeParams = {
+              startGlobalOffset: newGlobalOffset,
+              endGlobalOffset: newGlobalOffset
+            };
+          }
+
+          // Determine final MIME type based on the complete content
+          var actualMimeType = finalMimeType;
+          if (/<math>/i.test(newRawText)) {
+            actualMimeType = "application/x-zzish-html-math";
+          } else if (_this2.enableHtml() && (/<[^>]+>/i.test(newRawText) || actualMimeType === "text/html")) {
+            actualMimeType = "text/html";
+          } else {
+            actualMimeType = "text/plain";
+          }
+
+          // Clean up the raw text for proper encoding
+          var cleanedRawText = removeEncodingIfPlainText(newRawText, actualMimeType, _this2.enableHtml());
+
+          // Apply the change using the component's standard flow
+          _this2.applyChangesToComponent(cleanedRawText, actualMimeType, newRangeParams, _this2.props.useExpertMode, _this2.props.selectedTab);
+        }
+      } catch (error) {
+        console.error("Error in paste handler:", error);
+        // Let default paste behavior handle it
+        return true;
       }
     });
     _defineProperty(_this2, "showEquationEditor", function () {
@@ -22467,6 +23185,9 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_this2, "handleMouseUp", function (event) {
       try {
         _this2.initialiseHistory();
+
+        // Clear selection anchor on mouse click
+        _this2.selectionAnchor = null;
         var params = _this2._getRangeParams();
         var startNode = _this2._findNodeWithIndex(params.startNodeIndex);
         var endNode = _this2._findNodeWithIndex(params.endNodeIndex);
@@ -22551,18 +23272,18 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
               new_offset = oldRangeParams.startOffset;
             }
           }
-          var _new_rangeParams3 = {
+          var _new_rangeParams7 = {
             startNodeIndex: new_index,
             startOffset: new_offset,
             endNodeIndex: new_index,
             endOffset: new_offset
           };
-          _this2.setOldRangeParams(_new_rangeParams3);
-          var _nodeCounts = _this2._countNodeTypes();
-          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_rangeParams3, _this2.props.useExpertMode, _this2.props.selectedTab);
+          _this2.setOldRangeParams(_new_rangeParams7);
+          var _nodeCounts2 = _this2._countNodeTypes();
+          var _mimeType2 = null;
+          if (_this2.editingExistingEquation) _mimeType2 = _this2.getMimeType(_nodeCounts2.html > 0, _nodeCounts2.math > 1);else _mimeType2 = _this2.getMimeType(_nodeCounts2.html > 0, _nodeCounts2.math > 0);
+          _new_raw_text = removeEncodingIfPlainText(_new_raw_text, _mimeType2, _this2.enableHtml());
+          _this2.applyChangesToComponent(_new_raw_text, _mimeType2, _new_rangeParams7, _this2.props.useExpertMode, _this2.props.selectedTab);
           _this2.setState({
             showEquationEditor: false
           });
@@ -22574,7 +23295,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         var new_raw_text = replaceMarksWithMath(_this2.markedRawText, latex, _this2.enableHtml());
         var new_rangeParams = _this2.getOldRangeParams();
         if (_this2.moveCursorOnInsert) {
-          if (_this2.props.value === "")
+          if (_this2.props.value === "") {
             // Special case of previously empty text input
             new_rangeParams = {
               startNodeIndex: 2,
@@ -22582,13 +23303,20 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
               endNodeIndex: 2,
               endOffset: SMALL_SPACE_LENGTH
             };
-            // normal case
-          else new_rangeParams = {
-            startNodeIndex: oldRangeParams.startNodeIndex + 2,
-            startOffset: SMALL_SPACE_LENGTH,
-            endNodeIndex: oldRangeParams.startNodeIndex + 2,
-            endOffset: SMALL_SPACE_LENGTH
-          };
+          } else {
+            // Position cursor after the inserted math element using globalOffset
+            // Find the position right after the last math tag in the content
+            var mathTagMatches = _toConsumableArray(new_raw_text.matchAll(/<math>[^<]*<\/math>/gi));
+            if (mathTagMatches.length > 0) {
+              var lastMatch = mathTagMatches[mathTagMatches.length - 1];
+              var afterMathOffset = lastMatch.index + lastMatch[0].length;
+              new_rangeParams = {
+                startGlobalOffset: afterMathOffset,
+                endGlobalOffset: afterMathOffset
+              };
+            }
+            // If no math tags found, keep old range params
+          }
         }
         // console.log("New cursor pos: "+new_rangeParams.startNodeIndex+"->"+new_rangeParams.startOffset)
         _this2.setOldRangeParams(new_rangeParams);
@@ -22615,6 +23343,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       try {
         style = style.toLowerCase();
         var success = false;
+
         // This first part is a workaround whereby executing subscript or superscript
         // within an existing subscript or superscript makes the text even smaller instead
         // of toggling it off. Thus we manually toggle it off with some jigerry pokery!
@@ -22632,8 +23361,65 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
           if (_this2.state.activeButtons.italic) success = document.execCommand("italic", false, null);
           if (_this2.state.activeButtons.underline) success = document.execCommand("underline", false, null);
         } else {
-          // This is the normal code ...
-          success = document.execCommand(style, false, null);
+          var _selection = document.getSelection();
+          if (_selection && _selection.rangeCount > 0) {
+            var _range = _selection.getRangeAt(0);
+            if (_range.collapsed) {
+              // For cursor position (no selection), use insertHTML with styled wrapper
+              // This creates a formatted element that will maintain styling for future typing
+              var isToggleOff = _this2.state.activeButtons[style];
+              if (!isToggleOff) {
+                // Turning style ON - insert a styled wrapper element
+                var wrapperTag;
+                switch (style) {
+                  case "bold":
+                    wrapperTag = "strong";
+                    break;
+                  case "italic":
+                    wrapperTag = "em";
+                    break;
+                  case "underline":
+                    wrapperTag = "u";
+                    break;
+                  case "subscript":
+                    wrapperTag = "sub";
+                    break;
+                  case "superscript":
+                    wrapperTag = "sup";
+                    break;
+                  default:
+                    wrapperTag = "span";
+                    break;
+                }
+
+                // Insert an invisible character wrapped in the styled element
+                // This provides a "landing zone" for future typing
+                var styledElement = "<".concat(wrapperTag, ">\u200B</").concat(wrapperTag, ">");
+                success = document.execCommand("insertHTML", false, styledElement);
+
+                // Move cursor inside the styled element
+                setTimeout(function () {
+                  var newSelection = document.getSelection();
+                  if (newSelection && newSelection.rangeCount > 0) {
+                    var newRange = newSelection.getRangeAt(0);
+                    var styledNode = newRange.startContainer.parentElement;
+                    if (styledNode && styledNode.tagName.toLowerCase() === wrapperTag) {
+                      newRange.setStart(styledNode, 0);
+                      newRange.setEnd(styledNode, 0);
+                      newSelection.removeAllRanges();
+                      newSelection.addRange(newRange);
+                    }
+                  }
+                }, 0);
+              } else {
+                // Turning style OFF - just apply execCommand normally
+                success = document.execCommand(style, false, null);
+              }
+            } else {
+              // For text selection, use regular execCommand
+              success = document.execCommand(style, false, null);
+            }
+          }
         }
         var buttonState = _this2.state.activeButtons[style];
         if (buttonState === null || buttonState === undefined) return success;
@@ -22676,7 +23462,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 +23525,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 +23549,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 {
@@ -22931,7 +23719,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_this2, "handleAccentButtonClick", function (event, oldCharacter, newCharacter) {
       try {
         _this2.insertAccentLetter(event, oldCharacter, newCharacter);
-        console.log("Hiding accent bar 3");
+        // console.log("Hiding accent bar 3");
         _this2.setState({
           showAccentBar: false
         });
@@ -22939,6 +23727,23 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         console.error(error);
       }
     });
+    _defineProperty(_this2, "cleanupCorruptedKatexNodes", function () {
+      try {
+        var katexNodes = _this2.editableDiv.querySelectorAll(".katex, .katex-error");
+        katexNodes.forEach(function (node) {
+          // Check if KaTeX node has proper structure
+          var annotation = node.querySelector('annotation[encoding="application/x-tex"]');
+          if (!annotation || !annotation.textContent) {
+            console.warn("Removing corrupted KaTeX node:", node);
+            // Replace corrupted node with placeholder text
+            var textNode = document.createTextNode("[Math Error]");
+            node.parentNode.replaceChild(textNode, node);
+          }
+        });
+      } catch (error) {
+        console.error("Error cleaning up corrupted KaTeX nodes:", error);
+      }
+    });
     _defineProperty(_this2, "focus", function () {
       _this2.editableDiv.focus();
     });
@@ -22962,7 +23767,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         onBlur();
       }
       try {
-        console.log("Hiding accent bar 4");
+        // console.log("Hiding accent bar 4");
         _this2.setState({
           hasFocus: false,
           showAccentBar: false
@@ -22977,6 +23782,96 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_this2, "handleCompositionEnd", function (event) {
       _this2.isComposing = false;
     });
+    // Comprehensive LaTeX pattern detection and auto-wrapping in math tags
+    // Comprehensive LaTeX pattern detection for paste auto-wrapping
+    _defineProperty(_this2, "detectLatexPatterns", function (text) {
+      if (!_this2.enableMath() || !text || typeof text !== "string") {
+        // console.log("PATTERN DEBUG - Early return:", {
+        //   enableMath: this.enableMath(),
+        //   text: text,
+        //   type: typeof text,
+        // });
+        return false;
+      }
+
+      // console.log("PATTERN DEBUG - Testing text:", JSON.stringify(text));
+
+      // Define comprehensive LaTeX patterns based on KaTeX documentation
+      var latexPatterns = [
+      // Complex expressions
+      // Matrix environments
+      /\\begin\s*\{\s*(matrix|pmatrix|bmatrix|Bmatrix|vmatrix|Vmatrix|array)\s*\}[\s\S]*?\\end\s*\{\s*\1\s*\}/,
+      // Cases and aligned environments
+      /\\begin\s*\{\s*(cases|aligned|align|gather|split)\s*\}[\s\S]*?\\end\s*\{\s*\1\s*\}/,
+      // Fractions and roots with nested braces
+      /\\frac\s*\{[^{}]*(?:\{[^{}]*\}[^{}]*)*\}\s*\{[^{}]*(?:\{[^{}]*\}[^{}]*)*\}/, /\\sqrt\s*(?:\[[^\]]*\])?\s*\{[^{}]*(?:\{[^{}]*\}[^{}]*)*\}/,
+      // Text in math mode with braces
+      /\\(text|textrm|textit|textbf|textsf|texttt|mathrm|mathit|mathbf|mathsf|mathtt|mathcal|mathscr|mathfrak|mathbb)\s*\{[^{}]*\}/,
+      // Accents and modifiers with braces
+      /\\(hat|check|breve|acute|grave|tilde|bar|vec|dot|ddot|widehat|widetilde|overline|underline|overbrace|underbrace)\s*\{[^{}]*\}/,
+      // Number sets with braces
+      /\\(mathbb|mathbf)\s*\{[NZQRCH]\}/,
+      // Delimiters and brackets
+      /\\(left|right|big|Big|bigg|Bigg)\s*[\(\)\[\]\\{\\}|\\.]/, /\\[lr](paren|brace|brack|vert|Vert|angle|langle|rangle|floor|ceil)/,
+      // Greek letters (comprehensive list from KaTeX)
+      /\\(alpha|beta|gamma|delta|epsilon|varepsilon|zeta|eta|theta|vartheta|iota|kappa|lambda|mu|nu|xi|omicron|pi|varpi|rho|varrho|sigma|varsigma|tau|upsilon|phi|varphi|chi|psi|omega|Gamma|Delta|Theta|Lambda|Xi|Pi|Sigma|Upsilon|Phi|Psi|Omega)\b/,
+      // Mathematical functions
+      /\\(sin|cos|tan|sec|csc|cot|sinh|cosh|tanh|sech|csch|coth|arcsin|arccos|arctan|arcsec|arccsc|arccot|log|ln|lg|exp|lim|limsup|liminf|sup|inf|max|min|arg|ker|deg|gcd|det|hom|dim)\b/,
+      // Mathematical operators and symbols
+      /\\(pm|mp|times|div|cdot|ast|star|circ|bullet|cap|cup|uplus|sqcap|sqcup|vee|wedge|setminus|wr|diamond|bigtriangleup|bigtriangledown|triangleleft|triangleright|lhd|rhd|unlhd|unrhd|oplus|ominus|otimes|oslash|odot|bigcirc|dagger|ddagger|amalg)\b/,
+      // Relation symbols
+      /\\(leq|geq|equiv|models|prec|succ|sim|perp|preceq|succeq|simeq|mid|ll|gg|asymp|parallel|subset|supset|approx|bowtie|subseteq|supseteq|cong|smile|sqsubset|sqsupset|doteq|frown|sqsubseteq|sqsupseteq|propto|vdash|dashv|in|ni|notin)\b/,
+      // Negated relations
+      /\\(not|neq|ne|notin|nmid|nparallel|nleq|ngeq|nless|ngtr|nprec|nsucc|lneq|gneq|npreceq|nsucceq|precneqq|succneqq|lneqq|gneqq)\b/,
+      // Arrows
+      /\\(leftarrow|gets|rightarrow|to|leftrightarrow|uparrow|downarrow|updownarrow|Leftarrow|Rightarrow|Leftrightarrow|Uparrow|Downarrow|Updownarrow|mapsto|longmapsto|hookleftarrow|hookrightarrow|leftharpoonup|leftharpoondown|rightharpoonup|rightharpoondown|rightleftharpoons|iff)\b/,
+      // Integrals, sums, products
+      /\\(int|iint|iiint|oint|sum|prod|coprod|bigcup|bigcap|bigsqcup|bigvee|bigwedge|bigodot|bigotimes|bigoplus|biguplus)\b/,
+      // Mathematical spacing and formatting
+      /\\(quad|qquad|,|:|;|!|thinspace|medspace|thickspace|enspace|negspace)\b/,
+      // Special characters and symbols
+      /\\(infty|partial|nabla|pm|mp|emptyset|varnothing|complement|forall|exists|nexists|in|notin|ni|Re|Im|wp|angle|measuredangle|sphericalangle|top|bot|vdash|models|vDash|Vdash|Vvdash|nvdash|nvDash|nVdash|nVDash)\b/,
+      // Single letter number sets
+      /\\(N|Z|Q|R|C|H)\b/,
+      // Simple expressions with operators and special characters
+      /\d+\\surd\d+/,
+      // Numbers with square root symbol
+      /\\surd/,
+      // Square root symbol alone
+
+      // Superscripts and subscripts (improved to catch simple formats)
+      /\d+\^\d+/,
+      // Number^number (e.g., 2^2, 10^3)
+      /[a-zA-Z]\^\d+/,
+      // Variable^number (e.g., x^2, y^3)
+      /[a-zA-Z]\^[\{\d+\}]/,
+      // Variable with superscript in braces (e.g., x^{2})
+      /\d+_\d+/,
+      // Number_number (e.g., H_2O becomes H_2O)
+      /[a-zA-Z]_\d+/,
+      // Variable_number (e.g., x_1, y_2)
+      /[a-zA-Z]_[\{\d+\}]/,
+      // Variable with subscript in braces (e.g., x_{12})
+
+      // Common mathematical expressions that should be wrapped
+      /\d+\/\d+\s*[+\-*/]\s*\d+\/\d+/,
+      // Fraction operations
+      /[xy]\^2\s*[+\-]\s*\d+[xy]\s*[+\-]\s*\d+/ // Quadratic expressions
+      ];
+
+      // Check if any LaTeX patterns exist
+      for (var i = 0; i < latexPatterns.length; i++) {
+        var pattern = latexPatterns[i];
+        var matches = pattern.test(text);
+        if (matches) {
+          // console.log(`PATTERN DEBUG - Pattern ${i} matched:`, pattern.source);
+          return true;
+        }
+      }
+
+      // console.log("PATTERN DEBUG - No patterns matched");
+      return false;
+    });
     _this2.state = {
       showEquationEditor: false,
       equationEditorLatex: "",
@@ -23033,18 +23928,27 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
 
     // keeps track of whether user is composing in an IME - see https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent
     _this2.isComposing = false;
+
+    // Track selection anchor for proper shift+arrow behavior
+    _this2.selectionAnchor = null;
     return _this2;
   }
   _inherits(MathRichInput, _React$Component);
   return _createClass(MathRichInput, [{
     key: "enableFontStyling",
     value: function enableFontStyling() {
-      if (this.props.outputTex !== null && this.props.outputTex !== undefined && this.props.outputTex === true) return false;else if (this.props.enableFontStyling !== null && this.props.enableFontStyling !== undefined) return this.props.enableFontStyling;else return true;
+      // Allow explicit override even in outputTex mode
+      if (this.props.enableFontStyling !== null && this.props.enableFontStyling !== undefined) return this.props.enableFontStyling;
+      // Don't disable font styling in outputTex mode anymore
+      else return true;
     }
   }, {
     key: "enableMultiline",
     value: function enableMultiline() {
-      if (this.props.outputTex !== null && this.props.outputTex !== undefined && this.props.outputTex === true) return false;else if (this.props.enableMultiline !== null && this.props.enableMultiline !== undefined) return this.props.enableMultiline;else return true;
+      // Allow explicit override even in outputTex mode
+      if (this.props.enableMultiline !== null && this.props.enableMultiline !== undefined) return this.props.enableMultiline;
+      // Don't disable multiline in outputTex mode anymore
+      else return true;
     }
   }, {
     key: "enableHtml",
@@ -23074,11 +23978,18 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       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;
+
+      // When outputTex is false, prioritize HTML formatting
+      if (!outputTex) {
+        if (hasMath) return MIME_TYPE_ZZISH_HTML_MATH;
+        if (hasHtml || !outputPlainText) return MIME_TYPE_HTML;
+        return MIME_TYPE_PLAIN_TEXT;
+      }
+
+      // Original logic for outputTex = true
       if (outputTex) {
         if (hasMath || !outputPlainText) 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;
     }
   }, {
@@ -23130,6 +24041,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         this.editableDiv.addEventListener("keydown", this.handleKeyDown);
         this.editableDiv.addEventListener("keyup", this.handleKeyUp);
         this.editableDiv.addEventListener("paste", this.handlePaste);
+        this.editableDiv.addEventListener("copy", this.handleCopy);
         if (this.props.autofocus === true) this.editableDiv.focus();
       } catch (error) {
         console.error(error);
@@ -23142,6 +24054,7 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         this.editableDiv.removeEventListener("keydown", this.handleKeyDown);
         this.editableDiv.removeEventListener("keyup", this.handleKeyUp);
         this.editableDiv.removeEventListener("paste", this.handlePaste);
+        this.editableDiv.removeEventListener("copy", this.handleCopy);
       } catch (error) {
         console.error(error);
       }
@@ -23150,7 +24063,6 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
       try {
-        // console.log("componentDidUpdate")
         if (this.afterComponentUpdateData !== null && this.afterComponentUpdateData !== undefined && this.afterComponentUpdateData.value === this.props.value) {
           this._setRangeParams(this.afterComponentUpdateData.rangeParams);
           this.afterComponentUpdateData = null;
@@ -23194,6 +24106,16 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
         console.log(this.props);
       }
       var html = rawTextToHtml(katex$1, this.props.value || "", this.props.mimeType);
+
+      // Debug render math
+      // if (this.props.value && this.props.value.includes("<math>")) {
+      //   console.log("RENDER DEBUG:", {
+      //     propsValue: this.props.value,
+      //     propsMimeType: this.props.mimeType,
+      //     generatedHtml: html,
+      //   });
+      // }
+
       var useClassName = "MathRichInput-Container"; // Don't change this name - used by various components to find node
       if (this.props.className) useClassName = this.props.className + " " + useClassName;
       var accentLetter = null;
@@ -23202,7 +24124,8 @@ var MathRichInput = /*#__PURE__*/function (_React$Component) {
       if (this.props.className.includes("answer-edit-input")) {
         toolbarExtraMargin = 20;
       }
-      console.log("Toolbar extra margin: " + toolbarExtraMargin);
+      // console.log("Toolbar extra margin: " + toolbarExtraMargin);
+
       return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
         className: useClassName
       }, /*#__PURE__*/React__default["default"].createElement("div", {