@zzish/math-rich-input 0.1.0

package/src/SymbolButton.css

@@ -0,0 +1,130 @@
+/* Fixes is a katex bug where horizontal lines are not rendering */
+/* .frac-line {
+  background-color: #404040;
+  height:0.03em;
+}
+.overline-line {
+  background-color: #404040;
+  height:0.03em;
+} */
+
+.SymbolButton {
+  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-radius: 5px;
+  width:36px;
+  height:36px;
+  padding:1px 1px 1px 1px;
+  margin:3px;
+  /* transition: all .2s ease-in-out; */
+}
+
+
+.SymbolButton:hover {
+  filter: saturate(2.0);
+  color: black;
+  /* transform: scale(1.3); */
+  cursor: pointer;
+  box-shadow: 1px 1px 3px #808080;
+	animation: 2s grow;
+  animation-fill-mode: forwards;
+}
+
+@keyframes grow {
+  00% {
+    transform: scale(1);
+    box-shadow: 0px 0px 0px #808080;
+  } 
+  10% {
+    transform: scale(1.3);
+    box-shadow: 1px 1px 3px #808080;
+  }
+  90% {
+    transform: scale(1.3);
+    box-shadow: 1px 1px 3px #808080;
+  }
+  100% {
+    transform: scale(1.8);
+    box-shadow: 1px 1px 3px #808080;
+  }
+}
+
+.SymbolButton:active {
+  background: #808080;
+  color: white;
+  transform: scale(1.3);
+  cursor: pointer;
+}
+
+.SymbolButton-fadeIn {
+  opacity:1;
+  width:100px;
+  height:100px;
+  transition: width 0.5s, height 0.5s, opacity 0.5s 0.5s;
+}
+
+.highlight-0{
+  background: #ebc9eb;
+  /* background: #80e0e0; */
+}
+/*
+.highlight-1{
+  background: #c0e0e0;
+}
+/* .highlight-2{
+  background: #c0e0e0;
+} */
+
+
+.highlight-operators{
+  background: #F8e8D8;
+}
+
+.highlight-angles{
+  background: #cceded;
+}
+
+.highlight-greeklower{
+  background: #F8e8D8;
+}
+
+.highlight-greekupper{
+  background: #cceded;
+}
+
+.highlight-misc{
+  background: #F8e8D8;
+}
+
+.highlight-sets{
+  background: #cceded;
+}
+
+.highlight-chemistry{
+  background: #F8e8D8;
+}
+
+.highlight-elements{
+  background: #cceded;
+}
+
+.highlight-physics2{
+  background: #F8e8D8;
+}
+
+.highlight-physics3{
+  background: #cceded;
+}
+
+.highlight-expert{
+  background: #f4d6f5;
+}
+
+.highlight-matrices{
+  background: #f4d6f5;
+}

package/src/SymbolButton.jsx

@@ -0,0 +1,96 @@
+import React from 'react'
+
+import katex from "katex";
+
+import './SymbolButton.css';
+
+
+import {
+  getSymbolButtonLatex, 
+  getSymbolButtonScaling,
+  // getSymbolButtonTooltip,
+  getSymbolButtonHtml,
+  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
+  }
+
+
+  constructor(props) {
+    super(props);
+    this.suppliedClickHandler = null
+  }
+
+  static getButtonForDescendent(element) {
+    while (element && element.tagName.toLowerCase() !== "button")
+      element = element.parentNode;
+    return element
+  }
+
+  static getSymbolName(element) {
+    var button = SymbolButton.getButtonForDescendent(element)
+    if (button)
+        return button.getAttribute("name")
+    return null
+  }
+
+  handleSymbolButtonMouseDown = (event) => {
+    event.preventDefault()
+  }
+
+  handleSymbolButtonClick = (event) => {
+    this.suppliedClickHandler(event)
+    event.preventDefault()
+  }
+
+  render() {
+    // const {symbol} = this.props;
+    const {symbol, handleClick} = this.props;
+    this.suppliedClickHandler  = handleClick
+
+    const fontSize = (14*getSymbolButtonScaling(symbol))/100
+    var buttonStyle = {fontSize: fontSize+'px'};
+    // const tooltipText = getSymbolButtonTooltip(symbol)
+
+    let katexHTML = getSymbolButtonHtml(symbol) 
+    if (katexHTML === undefined || katexHTML === null) {
+      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)
+      if (end > 0)
+        katexHTML = katexHTML.substring(0,start) + katexHTML.substring(end+14)
+
+      setSymbolButtonHtml(symbol, katexHTML)
+    }
+
+    let useClassName = "SymbolButton"
+    if (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>
+      )
+  }
+}

package/src/Toolbar.css

@@ -0,0 +1,142 @@
+/* Note that the top left position of the toolbar is set programatically in componentDidMount */
+
+.Toolbar {
+  position: fixed;
+  z-index: 1;
+  /* width:270px; */
+  height:42px;
+  background-color: white;
+  border: 1px solid #d0d0d0;
+  border-radius: 5px;
+  box-shadow: 1px 1px 5px #a0a0a0;
+	animation: 0.5s fadeIn1;
+  animation-fill-mode: forwards;
+  top: 0px;
+  left: 0px;  /* important to set this so that toolbar initially renders full width */
+}
+
+@keyframes fadeIn1 {
+  0% {
+    opacity: 0;
+  } 
+  100% {
+    opacity: 1.0;
+  }
+}
+
+.Toolbar-button {
+  font-family:sans-serif;
+  font-size: 16px;
+  width:40px;
+  height: 36px;
+  background-color: white;
+  border-radius: 5px;
+  border: 0px;
+  padding: 1px;
+  margin: 2px;
+}
+
+
+.Toolbar-button:hover {
+  color: white;
+  background: #663676;
+  cursor: pointer;
+}
+
+.Toolbar-button:active {
+  background: #808080;
+  color: white;
+  cursor: pointer;
+}
+
+.TB-narrow {
+  width:30px;
+}
+
+.TB-wide {
+  width:46px;
+}
+
+.TB-up4 {
+  position: relative;
+  top:-4px;
+}
+
+.TB-selected {
+  background: #D0D0D0;
+  color: black;
+  cursor: pointer;
+	animation: 0.2s TB-fadeIn;
+  animation-fill-mode: forwards;
+}
+
+.TB-selected:hover {
+  color: white;
+  background: #663676;
+  cursor: pointer;
+}
+
+@keyframes TB-fadeIn {
+  00% {
+    background: white;
+  } 
+  100% {
+    background: #D0D0D0;
+  }
+}
+
+
+/* Tooltip text */
+.Toolbar-button .tooltiptext {
+  font-weight: normal;
+  visibility: hidden;
+  width: 100px;
+  background-color: #222;
+  color: #fff;
+  /*font-weight: bold;*/
+  font-size: 12px;
+  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 */
+  left: 50px;
+
+  /* transform: translate (50%,0%); */
+}
+
+/* Show the tooltip text when you mouse over the tooltip container */
+.Toolbar-button:hover .tooltiptext {
+	animation: 0.8s fadeIn2;
+  animation-fill-mode: forwards;
+  visibility: visible;
+  /* width: 100px; */
+  /* top: -90%; */  /* Must leave a small gap between tooltip and button */
+  /* left: 20%; */
+  /* margin-left: -50px; */
+}
+
+@keyframes fadeIn2 {
+  00% {
+    opacity: 0;
+  } 
+  70% {
+    opacity: 0;
+  } 
+  100% {
+    visibility: visible;
+    opacity: 0.9;
+  }
+}
+
+/* .tooltip {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black; /* If you want dots under the hoverable text 
+} */
+
+ 
+

package/src/Toolbar.jsx

@@ -0,0 +1,219 @@
+import React from 'react'
+import katex from "katex";
+
+import AccentBar from "./AccentBar";
+
+import './Toolbar.css';
+
+// const DEFAULT_TRANSLATE = 0
+const DEFAULT_TOP = 0
+const DEFAULT_LEFT = 0
+const BOTTOM_MARGIN = 5
+
+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
+  }
+
+  handleButtonClick = (event, buttonName) => {
+      this.suppliedClickHandler(event, buttonName)
+  }
+
+  showAccentBar = (event) => {
+    console.log("showAccentBar")
+    if (!this.state.showAccents)
+      this.accentLetter = this.suppliedAccentLetterFetcher()
+    this.setState({showAccents: true})
+    event.preventDefault()
+  }
+
+  hideAccentBar = (event) => {
+    console.log("hideAccentBar")
+    this.setState({showAccents: false})
+  }
+
+  showOrHideAccentBar = (event) => {
+    if (!this.state.showAccents)
+      this.accentLetter = this.suppliedAccentLetterFetcher()
+    this.setState({showAccents: !this.state.showAccents})
+  }
+
+  handleButtonClick = (event, buttonName) => {
+    this.suppliedClickHandler(event, buttonName)
+  }
+
+  handleAccentButtonClick = (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
+
+      if (node === null) {
+        console.error("Could not find ancestor MathRichInput-Container find parent")
+        return
+      }
+
+      let inputBounds = node.getBoundingClientRect()
+      let thisBounds = thisBar.getBoundingClientRect()
+
+      this.shouldUpdatePosition = false
+
+      // Vertically align above input field
+      let top = inputBounds.top - thisBounds.height - BOTTOM_MARGIN
+
+      // Horizontally align to right of input field
+      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
+
+      if (left + thisBounds.width > window.innerWidth)
+        left = window.innerWidth - thisBounds.width - 2
+
+      if (left < 0)
+        left = 0
+
+      this.setState({left, top})
+
+    } else {
+      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)")
+    // 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)
+    if (end > 0)
+      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}
+    // 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"
+    }
+
+    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" : "")}
+          onMouseDown={(e) => e.preventDefault()}
+          onClick={(e) => e.preventDefault()}
+          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>
+          </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)}/>
+      }
+      </div>
+    )
+  }
+}