@zzish/math-rich-input 0.1.49 → 0.1.51

package/src/EquationEditorModal.css

@@ -1,163 +1,201 @@
 .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;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: black;
+  z-index: 999998;
+  /* Start transparent */
+  opacity: 0;
+  animation: 0.3s shade cubic-bezier(0.2, 0, 0.38, 0.9);
+  animation-fill-mode: forwards;
 }
 
 @keyframes shade {
-    00% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 0.6;
-    }
+  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;
+  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%;
+  /* Start invisible to prevent flash, animation will make it visible */
+  transform: translate(-50%, 100%);
+  opacity: 0;
+  z-index: 999999;
+  animation: 0.3s rise cubic-bezier(0.2, 0, 0.38, 0.9);
+  animation-fill-mode: forwards;
 }
 
 @keyframes rise {
-    00% {
-        transform: translate(-50%, 100%);
-        opacity: 0;
-    }
-    100% {
-        transform: translate(-50%, -50%);
-        opacity: 1;
-    }
+  00% {
+    transform: translate(-50%, 100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translate(-50%, -50%);
+    opacity: 1;
+  }
+}
+
+/* Svelte-friendly alternative: disable animation when needed */
+.EquationEditorModal.no-animation {
+  animation: none !important;
+  transform: translate(-50%, -50%) !important;
+  opacity: 1 !important;
+}
+
+.EquationEditorModal-mobile.no-animation {
+  animation: none !important;
+  transform: translate(-50%, 1px) !important;
+  opacity: 1 !important;
+}
+
+/* Disable background animation too when modal is no-animation */
+.EquationEditorModal-background.no-animation {
+  animation: none !important;
+  opacity: 0.6 !important;
 }
 
 .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%;
+  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%;
+  /* Start off-screen for animation */
+  transform: translate(-50%, -100%);
+  opacity: 0;
+  z-index: 999999;
+  animation: 0.3s riseFromTop cubic-bezier(0.2, 0, 0.38, 0.9);
+  animation-fill-mode: forwards;
+}
+
+@keyframes riseFromTop {
+  00% {
+    transform: translate(-50%, -100%);
+    opacity: 0;
+  }
+  100% {
     transform: translate(-50%, 1px);
-    z-index: 100;
+    opacity: 1;
+  }
 }
 
 .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;
+  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;
+  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;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
 
 .EquationEditorModal .expertModeSwitch .switch {
-    margin-left: 10px;
+  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;
+  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;
+  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;
+  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;
+  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;
+  background-color: #663676;
 }
 
 .EquationEditorModal input:focus + .slider {
-    box-shadow: 0 0 1px #2196f3;
+  box-shadow: 0 0 1px #2196f3;
 }
 
 .EquationEditorModal input:checked + .slider:before {
-    -webkit-transform: translateX(13px);
-    -ms-transform: translateX(13px);
-    transform: translateX(13px);
+  -webkit-transform: translateX(13px);
+  -ms-transform: translateX(13px);
+  transform: translateX(13px);
 }
 
 /* Rounded sliders */
 .EquationEditorModal .slider.round {
-    border-radius: 18px;
+  border-radius: 18px;
 }
 
 .EquationEditorModal .slider.round:before {
-    border-radius: 50%;
+  border-radius: 50%;
 }

package/src/EquationEditorModal.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import ReactDOM from "react-dom";
 import EquationEditor from "./EquationEditor.jsx";
 
 import "./EquationEditorModal.css";
@@ -11,6 +12,7 @@ export default class EquationEditorModal extends React.Component {
 
     this.state = {
       useExpertMode: GLOBAL_lastSelectedExpertMode,
+      animationReady: false,
     };
 
     this.handleCloseCallback = props.handleClose;
@@ -26,14 +28,114 @@ export default class EquationEditorModal extends React.Component {
   };
 
   componentDidMount() {
-    // Auto-focus when modal opens
-    // Use setTimeout to ensure child components are fully mounted
-    setTimeout(() => {
-      this.focusEquationEditor();
-    }, 100);
+    // Store current scroll position to prevent jumping
+    this.originalScrollTop =
+      window.pageYOffset || document.documentElement.scrollTop;
+
+    // Create portal container if it doesn't exist
+    this.ensurePortalContainer();
+
+    // Lock body scroll to prevent jumping in transform containers
+    this.lockBodyScroll();
+
+    // Enable animation after portal is ready (ensures smooth slide-in)
+    // Need multiple RAF frames for proper CSS animation timing
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        this.setState({ animationReady: true }, () => {
+          // Auto-focus after animation completes (0.3s CSS animation + buffer)
+          setTimeout(() => {
+            this.focusEquationEditor();
+          }, 400); // Wait for animation to complete
+        });
+      });
+    });
+  }
+
+  componentWillUnmount() {
+    // Hide portal immediately to prevent flash
+    if (this.portalContainer) {
+      this.portalContainer.style.visibility = "hidden";
+    }
+
+    // Unlock body scroll and restore original scroll position
+    this.unlockBodyScroll();
+
+    // Clean up portal container after a small delay
+    if (this.createdPortalContainer && this.portalContainer) {
+      setTimeout(() => {
+        if (this.portalContainer && this.portalContainer.parentNode) {
+          document.body.removeChild(this.portalContainer);
+        }
+      }, 100);
+    }
+  }
+
+  lockBodyScroll() {
+    // Store original overflow styles and scroll position
+    this.originalBodyOverflow = document.body.style.overflow;
+    this.originalDocumentOverflow = document.documentElement.style.overflow;
+    this.originalBodyPosition = document.body.style.position;
+    this.originalBodyTop = document.body.style.top;
+    this.originalBodyWidth = document.body.style.width;
+
+    // Get current scroll position
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+
+    // Apply position: fixed to prevent scrolling while preserving position
+    document.body.style.position = "fixed";
+    document.body.style.top = `-${scrollTop}px`;
+    document.body.style.width = "100%";
+    document.body.style.overflow = "hidden";
+  }
+
+  unlockBodyScroll() {
+    // Get the scroll position from the fixed top value
+    const scrollTop = Math.abs(parseInt(document.body.style.top) || 0);
+
+    // Restore original styles
+    document.body.style.position = this.originalBodyPosition || "";
+    document.body.style.top = this.originalBodyTop || "";
+    document.body.style.width = this.originalBodyWidth || "";
+    document.body.style.overflow = this.originalBodyOverflow || "";
+    document.documentElement.style.overflow =
+      this.originalDocumentOverflow || "";
+
+    // Restore scroll position smoothly
+    if (scrollTop > 0) {
+      window.scrollTo(0, scrollTop);
+    }
+  }
+
+  ensurePortalContainer() {
+    // Look for existing portal container
+    this.portalContainer = document.getElementById(
+      "math-rich-input-modal-portal"
+    );
+
+    if (!this.portalContainer) {
+      // Create new portal container
+      this.portalContainer = document.createElement("div");
+      this.portalContainer.id = "math-rich-input-modal-portal";
+      // Portal container should not interfere with content positioning
+      // Start invisible until animation is ready
+      this.portalContainer.style.cssText =
+        "position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 999990; visibility: hidden;";
+      document.body.appendChild(this.portalContainer);
+      this.createdPortalContainer = true;
+    }
   }
 
   componentDidUpdate(prevProps, prevState) {
+    // Show portal container when animation is ready
+    if (
+      !prevState.animationReady &&
+      this.state.animationReady &&
+      this.portalContainer
+    ) {
+      this.portalContainer.style.visibility = "visible";
+    }
+
     // Re-focus when expert mode changes
     if (prevState.useExpertMode !== this.state.useExpertMode) {
       setTimeout(() => {
@@ -46,25 +148,44 @@ export default class EquationEditorModal extends React.Component {
     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");
+
+      // Prevent scroll jumping during focus
+      const currentScrollTop =
+        window.pageYOffset || document.documentElement.scrollTop;
+
+      try {
+        if (this.state.useExpertMode) {
+          // Focus textarea in expert mode
+          console.log("🔍 Expert mode - focusing latexInput");
+          if (this.equationEditor.latexInput) {
+            // Use preventScroll option if available
+            this.equationEditor.latexInput.focus({ preventScroll: true });
+            console.log("✅ LatexInput focused");
+          } else {
+            console.log("❌ LatexInput not found");
+          }
         } else {
-          console.log("❌ MathQuill not found");
+          // 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");
+          }
         }
+      } catch (error) {
+        console.warn("🔍 Focus failed:", error);
       }
+
+      // Ensure scroll position hasn't changed
+      setTimeout(() => {
+        const newScrollTop =
+          window.pageYOffset || document.documentElement.scrollTop;
+        if (newScrollTop !== currentScrollTop) {
+          window.scrollTo(0, currentScrollTop);
+        }
+      }, 10);
     } else {
       console.log("❌ EquationEditor ref not found");
     }
@@ -86,13 +207,25 @@ export default class EquationEditorModal extends React.Component {
     let useClass = "EquationEditorModal";
     if (this.isMobile()) useClass = "EquationEditorModal-mobile";
 
-    return (
+    // Add support for disabling animations (useful for Svelte transitions)
+    if (this.props.disableAnimation) {
+      useClass += " no-animation";
+    }
+
+    const modalContent = (
       <>
         <div
-          className="EquationEditorModal-background"
+          className={`EquationEditorModal-background${
+            this.props.disableAnimation ? " no-animation" : ""
+          }`}
           onClick={this.handleClose}
+          style={{ pointerEvents: "auto" }}
         ></div>
-        <div className={useClass} ref={(r) => (this.modalDiv = r)}>
+        <div
+          className={useClass}
+          ref={(r) => (this.modalDiv = r)}
+          style={{ pointerEvents: "auto" }}
+        >
           {!this.isMobile() && (
             <div className="title">
               Equation Editor
@@ -120,5 +253,13 @@ export default class EquationEditorModal extends React.Component {
         </div>
       </>
     );
+
+    // Use portal to render modal outside of parent container stacking context
+    if (this.portalContainer && this.state.animationReady) {
+      return ReactDOM.createPortal(modalContent, this.portalContainer);
+    }
+
+    // Show nothing until portal and animation are ready (prevents flash)
+    return null;
   }
 }

package/src/MathRichInput.jsx

@@ -3115,6 +3115,7 @@ export default class MathRichInput extends React.Component {
             handleClose={this.handleEquationEditorClose}
             handleInsert={this.handleEquationEditorInsert}
             latex={this.state.equationEditorLatex}
+            disableAnimation={this.props.disableAnimation}
           />
         )}
       </>

package/src/SymbolButton.css

@@ -23,6 +23,7 @@
   padding: 1px;
   margin: 3px;
   margin-bottom: auto;
+  cursor: pointer;
   /* transition: all .2s ease-in-out; */
 }