@zzish/math-rich-input 0.1.4 → 0.1.5

package/src/EquationEditorModal.css

@@ -1,9 +1,8 @@
-
 .EquationEditorModal-background {
   position: fixed;
   top: 0;
   left: 0;
-  width:100%;
+  width: 100%;
   height: 100%;
   background: black;
   z-index: 99;
@@ -12,24 +11,24 @@
 }
 
 @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;
+  border: 1px solid #808080;
+  border-radius: 10px;
   box-shadow: 0px 2px 5px 1px #a0a0a0;
-  position:fixed;
-  max-width:500px;
+  position: fixed;
+  max-width: 500px;
   width: 98%;
-  top:50%;
-  left:50%;
+  top: 50%;
+  left: 50%;
   /* transform: translate(-50%,-50%); */
   z-index: 100;
   animation: 0.3s rise;
@@ -37,26 +36,26 @@
 }
 
 @keyframes rise {
-00% {
-  transform: translate(-50%,100%);
-  opacity:0.0;
-}
-100% {
-  transform: translate(-50%,-50%);
-  opacity:1.0;
-}
+  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;
+  border: 1px solid #808080;
+  border-radius: 10px;
   box-shadow: 0px 2px 5px 1px #a0a0a0;
-  position:fixed;
-  max-width:500px;
+  position: fixed;
+  max-width: 500px;
   width: 99%;
-  top:0%;
-  left:50%;
+  top: 0%;
+  left: 50%;
   transform: translate(-50%, 1px);
   z-index: 100;
 }
@@ -65,37 +64,35 @@
   font-size: 14px;
   color: #404040;
   text-align: left;
-  background: #E0E0E0;
-  border:0px;
-  border-radius:5px 5px 0px 0px;
-  height:30px;
-  padding:20px 0px 5px 20px;
-  margin:0px;
+  background: #e0e0e0;
+  border: 0px;
+  border-radius: 5px 5px 0px 0px;
+  padding: 15px;
+  margin: 0px;
 }
 
 .EquationEditorModal-mobile .title {
   font-size: 14px;
   color: #404040;
   text-align: left;
-  background: #E0E0E0;
-  border:0px;
-  border-radius:5px 5px 0px 0px;
-  height:30px;
-  padding:20px 0px 5px 20px;
-  margin:0px;
+  background: #e0e0e0;
+  border: 0px;
+  border-radius: 5px 5px 0px 0px;
+  height: 30px;
+  padding: 15px;
+  margin: 0px;
 }
 
 .EquationEditorModal .expertModeSwitch {
-   /* background: url(images/settings-icon.png) no-repeat; */
-  float:right;
+  /* background: url(images/settings-icon.png) no-repeat; */
+  float: right;
   /* width:36px;
   height:36px; */
 }
 
-.EquationEditorModal .expertModeSwitch .switch{
-  margin-right:10px;
-  margin-left:10px;
-
+.EquationEditorModal .expertModeSwitch .switch {
+  margin-right: 10px;
+  margin-left: 10px;
 }
 
 /* The switch - the box around the slider */
@@ -122,8 +119,8 @@
   right: 0;
   bottom: 0;
   background-color: #ccc;
-  -webkit-transition: .4s;
-  transition: .4s;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
 }
 
 .slider:before {
@@ -134,18 +131,17 @@
   left: 4px;
   bottom: 4px;
   background-color: white;
-  -webkit-transition: .4s;
-  transition: .4s;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
 }
 
 input:checked + .slider {
   background-color: #663676;
-  ;
   /* background-color: #2196F3; */
 }
 
 input:focus + .slider {
-  box-shadow: 0 0 1px #2196F3;
+  box-shadow: 0 0 1px #2196f3;
 }
 
 input:checked + .slider:before {
@@ -161,4 +157,4 @@ input:checked + .slider:before {
 
 .slider.round:before {
   border-radius: 50%;
-}
+}

package/src/MathRichInput.css

@@ -1,25 +1,32 @@
+*,
+:after,
+:before {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
 .MathRichInput-Container {
-  margin:10px;
-  border-radius:5px;
+  margin: 10px;
+  border-radius: 5px;
 }
 
 .MathRichInput-Container:focus-within {
-  background-color: white!important;
+  background-color: white !important;
   outline: 0px;
-  border:1px solid #663676;
-  /* box-shadow: inset 1px 1px 5px #a0a0a0; */
+  border: 1px solid #663676;
 }
 
 .MathRichInput-scrollview {
-  display:flex;
-  overflow:scroll;
-  border-radius:5px;
+  display: flex;
+  overflow: scroll;
+  border-radius: 5px;
   overflow: overlay;
 }
 
-.MathRichInput P {
-  padding:0px;
-  margin:0px
+.MathRichInput p {
+  padding: 0px;
+  margin: 0px;
 }
 
 .MathRichInput {
@@ -27,29 +34,30 @@
   padding: 10px;
   width: 100%;
   border-radius: 5px;
+  background-color: #fff;
 }
 
 .MathRichInput:focus {
-  outline:0;
+  outline: 0;
 }
 
 .MathRichInput .katex {
-  border:0px;
+  border: 0px;
 }
 
-.MathRichInput .base { /* Combine the katex and base class name to ensure the whole equation is surrounded */
+.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: 1px dotted #d0d0d0;
   border-radius: 5px;
-  padding: 2px 2px 2px 2px;
-  margin: 0px 2px 0px 2px;
+  padding: 2px;
+  margin: 0px 2px;
 }
 
 .katex .mathnormal {
-  /* font-family: KaTeX_Caligraphic; */
-   font-family: KaTeX_Math;
-   font-style: italic;
+  font-family: KaTeX_Math;
+  font-style: italic;
 }
 
 .MathRichInput .katex-error {
@@ -57,7 +65,6 @@
   border: 0px;
   border: 1px dotted #ff8080;
   border-radius: 5px;
-  padding: 2px 2px 2px 2px;
-  margin: 0px 2px 0px 2px;
+  padding: 2px;
+  margin: 0px 2px;
 }
-

package/src/SymbolButton.css

@@ -9,29 +9,30 @@
 } */
 
 .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: 0px;
   border-radius: 5px;
-  width:36px;
-  height:36px;
-  padding:1px 1px 1px 1px;
-  margin:3px;
+  width: 36px;
+  height: 36px;
+  padding: 1px;
+  margin: 3px;
+  margin-bottom: auto;
   /* transition: all .2s ease-in-out; */
 }
 
-
 .SymbolButton:hover {
-  filter: saturate(2.0);
+  filter: saturate(2);
   color: black;
   /* transform: scale(1.3); */
   cursor: pointer;
   box-shadow: 1px 1px 3px #808080;
-	animation: 2s grow;
+  animation: 2s grow;
   animation-fill-mode: forwards;
 }
 
@@ -39,7 +40,7 @@
   00% {
     transform: scale(1);
     box-shadow: 0px 0px 0px #808080;
-  } 
+  }
   10% {
     transform: scale(1.3);
     box-shadow: 1px 1px 3px #808080;
@@ -62,13 +63,13 @@
 }
 
 .SymbolButton-fadeIn {
-  opacity:1;
-  width:100px;
-  height:100px;
+  opacity: 1;
+  width: 100px;
+  height: 100px;
   transition: width 0.5s, height 0.5s, opacity 0.5s 0.5s;
 }
 
-.highlight-0{
+.highlight-0 {
   background: #ebc9eb;
   /* background: #80e0e0; */
 }
@@ -80,51 +81,50 @@
   background: #c0e0e0;
 } */
 
-
-.highlight-operators{
-  background: #F8e8D8;
+.highlight-operators {
+  background: #f8e8d8;
 }
 
-.highlight-angles{
+.highlight-angles {
   background: #cceded;
 }
 
-.highlight-greeklower{
-  background: #F8e8D8;
+.highlight-greeklower {
+  background: #f8e8d8;
 }
 
-.highlight-greekupper{
+.highlight-greekupper {
   background: #cceded;
 }
 
-.highlight-misc{
-  background: #F8e8D8;
+.highlight-misc {
+  background: #f8e8d8;
 }
 
-.highlight-sets{
+.highlight-sets {
   background: #cceded;
 }
 
-.highlight-chemistry{
-  background: #F8e8D8;
+.highlight-chemistry {
+  background: #f8e8d8;
 }
 
-.highlight-elements{
+.highlight-elements {
   background: #cceded;
 }
 
-.highlight-physics2{
-  background: #F8e8D8;
+.highlight-physics2 {
+  background: #f8e8d8;
 }
 
-.highlight-physics3{
+.highlight-physics3 {
   background: #cceded;
 }
 
-.highlight-expert{
+.highlight-expert {
   background: #f4d6f5;
 }
 
-.highlight-matrices{
+.highlight-matrices {
   background: #f4d6f5;
 }

package/src/SymbolButton.jsx

@@ -1,96 +1,94 @@
-import React from 'react'
+import React from "react";
 
 import katex from "katex";
 
-import './SymbolButton.css';
-
+import "./SymbolButton.css";
 
 import {
-  getSymbolButtonLatex, 
+  getSymbolButtonLatex,
   getSymbolButtonScaling,
   // getSymbolButtonTooltip,
   getSymbolButtonHtml,
-  setSymbolButtonHtml
-} from './equationEditorButtonsHelper.js';
+  setSymbolButtonHtml,
+} from "./equationEditorButtonsHelper.js";
 
 export default class SymbolButton extends React.Component {
-
   // This is a fixed component that never changes
   shouldComponentUpdate() {
-    if (this.props.shouldUpdate)
-      return this.props.shouldUpdate
-    return false
+    if (this.props.shouldUpdate) return this.props.shouldUpdate;
+    return false;
   }
 
-
   constructor(props) {
     super(props);
-    this.suppliedClickHandler = null
+    this.suppliedClickHandler = null;
   }
 
   static getButtonForDescendent(element) {
     while (element && element.tagName.toLowerCase() !== "button")
       element = element.parentNode;
-    return element
+    return element;
   }
 
   static getSymbolName(element) {
-    var button = SymbolButton.getButtonForDescendent(element)
-    if (button)
-        return button.getAttribute("name")
-    return null
+    var button = SymbolButton.getButtonForDescendent(element);
+    if (button) return button.getAttribute("name");
+    return null;
   }
 
   handleSymbolButtonMouseDown = (event) => {
-    event.preventDefault()
-  }
+    event.preventDefault();
+  };
 
   handleSymbolButtonClick = (event) => {
-    this.suppliedClickHandler(event)
-    event.preventDefault()
-  }
+    this.suppliedClickHandler(event);
+    event.preventDefault();
+  };
 
   render() {
     // const {symbol} = this.props;
-    const {symbol, handleClick} = this.props;
-    this.suppliedClickHandler  = handleClick
+    const { symbol, handleClick } = this.props;
+    this.suppliedClickHandler = handleClick;
 
-    const fontSize = (14*getSymbolButtonScaling(symbol))/100
-    var buttonStyle = {fontSize: fontSize+'px'};
+    const fontSize = (14 * getSymbolButtonScaling(symbol)) / 100;
+    var buttonStyle = { fontSize: fontSize + "px" };
     // const tooltipText = getSymbolButtonTooltip(symbol)
 
-    let katexHTML = getSymbolButtonHtml(symbol) 
+    let katexHTML = getSymbolButtonHtml(symbol);
     if (katexHTML === undefined || katexHTML === null) {
-      let latex = getSymbolButtonLatex(symbol)
-      katexHTML = katex.renderToString(latex)
+      let latex = getSymbolButtonLatex(symbol);
+      katexHTML = katex.renderToString(latex);
 
       // Not necessary, but lets clean out some unnessary mathml nodes
-      let start = katexHTML.indexOf("<span class=\"katex-mathml\">")
-      let end = -1
-      if (start > 0)
-        end = katexHTML.indexOf("</math></span>",start+30)
+      let start = katexHTML.indexOf('<span class="katex-mathml">');
+      let end = -1;
+      if (start > 0) end = katexHTML.indexOf("</math></span>", start + 30);
       if (end > 0)
-        katexHTML = katexHTML.substring(0,start) + katexHTML.substring(end+14)
+        katexHTML =
+          katexHTML.substring(0, start) + katexHTML.substring(end + 14);
 
-      setSymbolButtonHtml(symbol, katexHTML)
+      setSymbolButtonHtml(symbol, katexHTML);
     }
 
-    let useClassName = "SymbolButton"
+    let useClassName = "SymbolButton";
     if (this.props.highlight) {
-      useClassName = useClassName+" highlight-"+this.props.highlight
+      useClassName = useClassName + " highlight-" + this.props.highlight;
     }
 
-    return  (
-        <span id='SymbolButton'>
-          <button name={symbol} 
-            className={useClassName} style={buttonStyle} 
-            onMouseDown={this.handleSymbolButtonMouseDown}
-            onClick={this.handleSymbolButtonClick}
-            ref={(e) => { this.button = e; }}>
-            <div name={symbol} dangerouslySetInnerHTML={{__html: katexHTML}} />
-            {/* <span className="tooltiptext">{tooltipText}</span> */}
-          </button>
-        </span>
-      )
+    return (
+      <button
+        name={symbol}
+        className={useClassName}
+        style={buttonStyle}
+        onMouseDown={this.handleSymbolButtonMouseDown}
+        onClick={this.handleSymbolButtonClick}
+        ref={(e) => {
+          this.button = e;
+        }}
+      >
+        <div name={symbol} dangerouslySetInnerHTML={{ __html: katexHTML }} />
+        {/* <span className="tooltiptext">{tooltipText}</span> */}
+      </button>
+    );
   }
 }