@zzish/math-rich-input 0.1.4 → 0.1.6

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>
+    );
   }
 }

package/src/Toolbar.css

@@ -3,31 +3,31 @@
 .Toolbar {
   position: fixed;
   z-index: 1;
-  /* width:270px; */
-  height:42px;
+  display: flex;
+  height: 42px;
   background-color: white;
   border: 1px solid #d0d0d0;
   border-radius: 5px;
   box-shadow: 1px 1px 5px #a0a0a0;
-	animation: 0.5s fadeIn1;
+  animation: 0.5s fadeIn1;
   animation-fill-mode: forwards;
   top: 0px;
-  left: 0px;  /* important to set this so that toolbar initially renders full width */
+  left: 0px; /* important to set this so that toolbar initially renders full width */
 }
 
 @keyframes fadeIn1 {
   0% {
     opacity: 0;
-  } 
+  }
   100% {
-    opacity: 1.0;
+    opacity: 1;
   }
 }
 
 .Toolbar-button {
-  font-family:sans-serif;
+  font-family: sans-serif;
   font-size: 16px;
-  width:40px;
+  width: 40px;
   height: 36px;
   background-color: white;
   border-radius: 5px;
@@ -36,7 +36,6 @@
   margin: 2px;
 }
 
-
 .Toolbar-button:hover {
   color: white;
   background: #663676;
@@ -50,23 +49,18 @@
 }
 
 .TB-narrow {
-  width:30px;
+  width: 30px;
 }
 
 .TB-wide {
-  width:46px;
-}
-
-.TB-up4 {
-  position: relative;
-  top:-4px;
+  width: 46px;
 }
 
 .TB-selected {
-  background: #D0D0D0;
+  background: #d0d0d0;
   color: black;
   cursor: pointer;
-	animation: 0.2s TB-fadeIn;
+  animation: 0.2s TB-fadeIn;
   animation-fill-mode: forwards;
 }
 
@@ -79,13 +73,12 @@
 @keyframes TB-fadeIn {
   00% {
     background: white;
-  } 
+  }
   100% {
-    background: #D0D0D0;
+    background: #d0d0d0;
   }
 }
 
-
 /* Tooltip text */
 .Toolbar-button .tooltiptext {
   font-weight: normal;
@@ -98,11 +91,11 @@
   text-align: center;
   padding: 4px 10px;
   border-radius: 6px;
- 
+
   /* Position the tooltip text - see examples below! */
   position: absolute;
   z-index: 2;
-  top: -90%;  /* Must leave a small gap between tooltip and button */
+  top: -90%; /* Must leave a small gap between tooltip and button */
   left: 50px;
 
   /* transform: translate (50%,0%); */
@@ -110,11 +103,11 @@
 
 /* Show the tooltip text when you mouse over the tooltip container */
 .Toolbar-button:hover .tooltiptext {
-	animation: 0.8s fadeIn2;
+  animation: 0.8s fadeIn2;
   animation-fill-mode: forwards;
   visibility: visible;
   /* width: 100px; */
-  /* top: -90%; */  /* Must leave a small gap between tooltip and button */
+  /* top: -90%; */ /* Must leave a small gap between tooltip and button */
   /* left: 20%; */
   /* margin-left: -50px; */
 }
@@ -122,10 +115,10 @@
 @keyframes fadeIn2 {
   00% {
     opacity: 0;
-  } 
+  }
   70% {
     opacity: 0;
-  } 
+  }
   100% {
     visibility: visible;
     opacity: 0.9;
@@ -137,6 +130,3 @@
   display: inline-block;
   border-bottom: 1px dotted black; /* If you want dots under the hoverable text 
 } */
-
- 
-