@zzish/math-rich-input 0.1.5 → 0.1.6

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 
 } */
-
- 
-

package/src/Toolbar.jsx

@@ -1,219 +1,251 @@
-import React from 'react'
+import React from "react";
 import katex from "katex";
 
 import AccentBar from "./AccentBar";
 
-import './Toolbar.css';
+import "./Toolbar.css";
 
 // const DEFAULT_TRANSLATE = 0
-const DEFAULT_TOP = 0
-const DEFAULT_LEFT = 0
-const BOTTOM_MARGIN = 5
+const DEFAULT_TOP = 0;
+const DEFAULT_LEFT = 0;
+const BOTTOM_MARGIN = 5;
 
-const CTRL_OR_META = /(Mac)/i.test(window.navigator.platform) ? "\u2318": "CTRL+"
+const CTRL_OR_META = /(Mac)/i.test(window.navigator.platform)
+  ? "\u2318"
+  : "CTRL+";
 
 export default class Toolbar extends React.Component {
   constructor(props) {
     super(props);
 
     this.state = {
-      showAccents:false,
-      top:DEFAULT_TOP,
-      left:DEFAULT_LEFT
-    }
-
-    this.handleButtonClick = this.handleButtonClick.bind(this)
-
-    this.suppliedClickHandler = null
-    this.suppliedAccentLetterFetcher = null
-    this.suppliedAccentLetterReplacer = null
-    this.accentLetter = null
-    this.shouldUpdatePosition = true
+      showAccents: false,
+      top: DEFAULT_TOP,
+      left: DEFAULT_LEFT,
+    };
+
+    this.handleButtonClick = this.handleButtonClick.bind(this);
+
+    this.suppliedClickHandler = null;
+    this.suppliedAccentLetterFetcher = null;
+    this.suppliedAccentLetterReplacer = null;
+    this.accentLetter = null;
+    this.shouldUpdatePosition = true;
   }
 
   handleButtonClick = (event, buttonName) => {
-      this.suppliedClickHandler(event, buttonName)
-  }
+    this.suppliedClickHandler(event, buttonName);
+  };
 
   showAccentBar = (event) => {
-    console.log("showAccentBar")
+    console.log("showAccentBar");
     if (!this.state.showAccents)
-      this.accentLetter = this.suppliedAccentLetterFetcher()
-    this.setState({showAccents: true})
-    event.preventDefault()
-  }
+      this.accentLetter = this.suppliedAccentLetterFetcher();
+    this.setState({ showAccents: true });
+    event.preventDefault();
+  };
 
   hideAccentBar = (event) => {
-    console.log("hideAccentBar")
-    this.setState({showAccents: false})
-  }
+    console.log("hideAccentBar");
+    this.setState({ showAccents: false });
+  };
 
   showOrHideAccentBar = (event) => {
     if (!this.state.showAccents)
-      this.accentLetter = this.suppliedAccentLetterFetcher()
-    this.setState({showAccents: !this.state.showAccents})
-  }
+      this.accentLetter = this.suppliedAccentLetterFetcher();
+    this.setState({ showAccents: !this.state.showAccents });
+  };
 
   handleButtonClick = (event, buttonName) => {
-    this.suppliedClickHandler(event, buttonName)
-  }
+    this.suppliedClickHandler(event, buttonName);
+  };
 
   handleAccentButtonClick = (event, oldCharacter, newCharacter) => {
-    console.log("handleAccentButtonClick")
-    this.suppliedAccentLetterInserter(event, oldCharacter, newCharacter)
+    console.log("handleAccentButtonClick");
+    this.suppliedAccentLetterInserter(event, oldCharacter, newCharacter);
     // this.hideAccentBar(null)
-  }
+  };
 
   componentDidMount() {
     // We render once to find out the component's preferred size and then render again to update it
     if (this.shouldUpdatePosition) {
       // Lets position the accent bar below the input field and right aligned
-      let thisBar = this.toolbar
-      let node = thisBar.parentNode
-      while(node !== null && !node.classList.contains("MathRichInput-Container")) 
-        node = node.parentNode
+      let thisBar = this.toolbar;
+      let node = thisBar.parentNode;
+      while (
+        node !== null &&
+        !node.classList.contains("MathRichInput-Container")
+      )
+        node = node.parentNode;
 
       if (node === null) {
-        console.error("Could not find ancestor MathRichInput-Container find parent")
-        return
+        console.error(
+          "Could not find ancestor MathRichInput-Container find parent"
+        );
+        return;
       }
 
-      let inputBounds = node.getBoundingClientRect()
-      let thisBounds = thisBar.getBoundingClientRect()
+      let inputBounds = node.getBoundingClientRect();
+      let thisBounds = thisBar.getBoundingClientRect();
 
-      this.shouldUpdatePosition = false
+      this.shouldUpdatePosition = false;
 
       // Vertically align above input field
-      let top = inputBounds.top - thisBounds.height - BOTTOM_MARGIN
+      let top = inputBounds.top - thisBounds.height - BOTTOM_MARGIN;
 
       // Horizontally align to right of input field
-      let left = inputBounds.right - thisBounds.width
+      let left = inputBounds.right - thisBounds.width;
 
       // Make sure it is on screen horizontally
       if (thisBounds.width > inputBounds.width)
-        left = inputBounds.left - (thisBounds.width - inputBounds.width)/2
+        left = inputBounds.left - (thisBounds.width - inputBounds.width) / 2;
 
       if (left + thisBounds.width > window.innerWidth)
-        left = window.innerWidth - thisBounds.width - 2
+        left = window.innerWidth - thisBounds.width - 2;
 
-      if (left < 0)
-        left = 0
-
-      this.setState({left, top})
+      if (left < 0) left = 0;
 
+      this.setState({ left, top });
     } else {
-      this.shouldUpdatePosition = true
+      this.shouldUpdatePosition = true;
     }
   }
 
   render() {
-    console.log("Rendering toolbar")
-    this.suppliedClickHandler  = this.props.onButtonClick
-    this.suppliedAccentLetterFetcher = this.props.fetchAccentLetter
-    this.suppliedAccentLetterInserter = this.props.insertAccentLetter
-    
-    let enableFontStyling = this.props.enableFontStyling ?? true
-    let enableMath = this.props.enableMath ?? true
-
-    let katexHTML = katex.renderToString("f(x)")
+    console.log("Rendering toolbar");
+    this.suppliedClickHandler = this.props.onButtonClick;
+    this.suppliedAccentLetterFetcher = this.props.fetchAccentLetter;
+    this.suppliedAccentLetterInserter = this.props.insertAccentLetter;
+
+    let enableFontStyling = this.props.enableFontStyling ?? true;
+    let enableMath = this.props.enableMath ?? true;
+
+    let katexHTML = katex.renderToString("f(x)");
     // Not really 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);
 
     // Set up the tranlation to place the toolbar where we want it
-    let style = {...this.props.style}
+    let style = { ...this.props.style };
     // if (this.state.translateX !== DEFAULT_TRANSLATE) {
     //   style.transform = "translate("+this.state.translateX+"px, "+this.state.translateY+"px)";
     // }
     if (this.state.left !== DEFAULT_LEFT || this.state.top !== DEFAULT_TOP) {
-      style.left = this.state.left + "px"
-      style.top = this.state.top + "px"
+      style.left = this.state.left + "px";
+      style.top = this.state.top + "px";
     }
 
-    return  (
-      <div 
-        className='Toolbar' 
-        style={style}
-        ref={(r) => this.toolbar = r} 
-      >
-        {enableFontStyling &&
-        <>
-          <button name="Bold"
-            className={"Toolbar-button TB-narrow" + 
-              (this.props.activeButtons.bold ? " TB-selected" : "")}
-            onClick={(e) => e.preventDefault()}
-            onMouseDown={(e) => e.preventDefault()}
-            onMouseUp={(e) => this.handleButtonClick(e, "Bold")}>
-            <b>B</b>
-          </button>
-
-          <button name="Italic"
-            className={"Toolbar-button TB-narrow"  + 
-            (this.props.activeButtons.italic ? " TB-selected" : "")}
-            onClick={(e) => e.preventDefault()}
-            onMouseDown={(e) => e.preventDefault()}
-            onMouseUp={(e) => this.handleButtonClick(e, "Italic")}>
-            <i>I</i>
-          </button>
-
-          <button name="Underline"
-            className={"Toolbar-button TB-narrow"  + 
-            (this.props.activeButtons.underline ? " TB-selected" : "")}
-            onClick={(e) => e.preventDefault()}
-            onMouseDown={(e) => e.preventDefault()}
-            onMouseUp={(e) => this.handleButtonClick(e, "Underline")}>
-            <u>U</u>
-          </button>
-
-          <button name="Superscript"
-            className={"Toolbar-button TB-narrow"  + 
-            (this.props.activeButtons.superscript ? " TB-selected" : "")}
-            onClick={(e) => e.preventDefault()}
-            onMouseDown={(e) => e.preventDefault()}
-            onMouseUp={(e) => this.handleButtonClick(e, "Superscript")}>
-            a<sup>x</sup>
-          </button>
-
-          <button name="Subscript"
-            className={"Toolbar-button TB-narrow TB-up4"  + 
-            (this.props.activeButtons.subscript ? " TB-selected" : "")}
-            onClick={(e) => e.preventDefault()}
-            onMouseDown={(e) => e.preventDefault()}
-            onMouseUp={(e) => this.handleButtonClick(e, "Subscript")}>
-            a<sub>x</sub>
-          </button>
-        </>}
-
-        <button name="Accents"
-          className={"Toolbar-button TB-narrow" +
-          (this.state.showAccents ? " TB-selected" : "")}
+    return (
+      <div className="Toolbar" style={style} ref={(r) => (this.toolbar = r)}>
+        {enableFontStyling && (
+          <>
+            <button
+              name="Bold"
+              className={
+                "Toolbar-button TB-narrow" +
+                (this.props.activeButtons.bold ? " TB-selected" : "")
+              }
+              onClick={(e) => e.preventDefault()}
+              onMouseDown={(e) => e.preventDefault()}
+              onMouseUp={(e) => this.handleButtonClick(e, "Bold")}
+            >
+              <b>B</b>
+            </button>
+
+            <button
+              name="Italic"
+              className={
+                "Toolbar-button TB-narrow" +
+                (this.props.activeButtons.italic ? " TB-selected" : "")
+              }
+              onClick={(e) => e.preventDefault()}
+              onMouseDown={(e) => e.preventDefault()}
+              onMouseUp={(e) => this.handleButtonClick(e, "Italic")}
+            >
+              <i>I</i>
+            </button>
+
+            <button
+              name="Underline"
+              className={
+                "Toolbar-button TB-narrow" +
+                (this.props.activeButtons.underline ? " TB-selected" : "")
+              }
+              onClick={(e) => e.preventDefault()}
+              onMouseDown={(e) => e.preventDefault()}
+              onMouseUp={(e) => this.handleButtonClick(e, "Underline")}
+            >
+              <u>U</u>
+            </button>
+
+            <button
+              name="Superscript"
+              className={
+                "Toolbar-button TB-narrow" +
+                (this.props.activeButtons.superscript ? " TB-selected" : "")
+              }
+              onClick={(e) => e.preventDefault()}
+              onMouseDown={(e) => e.preventDefault()}
+              onMouseUp={(e) => this.handleButtonClick(e, "Superscript")}
+            >
+              a<sup>x</sup>
+            </button>
+
+            <button
+              name="Subscript"
+              className={
+                "Toolbar-button TB-narrow" +
+                (this.props.activeButtons.subscript ? " TB-selected" : "")
+              }
+              onClick={(e) => e.preventDefault()}
+              onMouseDown={(e) => e.preventDefault()}
+              onMouseUp={(e) => this.handleButtonClick(e, "Subscript")}
+            >
+              a<sub>x</sub>
+            </button>
+          </>
+        )}
+
+        <button
+          name="Accents"
+          className={
+            "Toolbar-button TB-narrow" +
+            (this.state.showAccents ? " TB-selected" : "")
+          }
           onMouseDown={(e) => e.preventDefault()}
           onClick={(e) => e.preventDefault()}
-          onMouseUp={(e) => this.showOrHideAccentBar(e)}>
+          onMouseUp={(e) => this.showOrHideAccentBar(e)}
+        >
           á
         </button>
 
-        {enableMath &&
-          <button name="Equation" 
-            className="Toolbar-button TB-wide" onMouseDown={(e) => this.handleButtonClick(e, "Equation")}>
-            <div dangerouslySetInnerHTML={{__html: katexHTML}} />
-            <span className="tooltiptext">Insert equation [{CTRL_OR_META}Enter]</span>
+        {enableMath && (
+          <button
+            name="Equation"
+            className="Toolbar-button TB-wide"
+            onMouseDown={(e) => this.handleButtonClick(e, "Equation")}
+          >
+            <div dangerouslySetInnerHTML={{ __html: katexHTML }} />
+            <span className="tooltiptext">
+              Insert equation [{CTRL_OR_META}Enter]
+            </span>
           </button>
-        }
-
-      {this.state.showAccents &&
-        <AccentBar
-          accentLetter={this.accentLetter}
-          keyPressed={this.props.keyPressed}
-          fetchAccentLetter={this.props.fetchAccentLetter}
-          onButtonClick={(e, oldCharacter, newCharacter) => 
-            this.handleAccentButtonClick(e, oldCharacter, newCharacter)}/>
-      }
+        )}
+
+        {this.state.showAccents && (
+          <AccentBar
+            accentLetter={this.accentLetter}
+            keyPressed={this.props.keyPressed}
+            fetchAccentLetter={this.props.fetchAccentLetter}
+            onButtonClick={(e, oldCharacter, newCharacter) =>
+              this.handleAccentButtonClick(e, oldCharacter, newCharacter)
+            }
+          />
+        )}
       </div>
-    )
+    );
   }
 }