@zzish/math-rich-input 0.1.0

package/src/EquationEditor.jsx

@@ -0,0 +1,583 @@
+import React from 'react'
+import { addStyles, EditableMathField } from 'react-mathquill'
+import SymbolButton from './SymbolButton'
+import { getSymbolsForButtonArea, getLatexInsertionParams} from './equationEditorButtonsHelper.js';
+
+import './EquationEditor.css';
+
+// Katex setup
+import katex from "katex";
+const MARK = "_M_A_R_K_"
+
+// MathQuill setup
+addStyles()
+const AUTO_OPERATOR_NAMES = 'sin cos tan sec cosec cot log ln lim min max'
+
+
+// Recent button bar
+const RECENT_WEIGHT = 15
+const RECENT_DECAY_FACTOR = 0.95
+const RECENT_MAX = 11
+let GLOBAL_recentSymbols = []
+let GLOBAL_lastSymbols = ["","",""]
+
+// Genreal constants
+const MAX_BUTTON_ROWS = 5
+const TAB_NAMES = ["Common", "More", "Greek", "Chemistry", "Physics"]
+const BUTTON_AREA_NAMES = ["Common", "Operators", "Angles", 
+                    "Misc", "Sets", 
+                    "GreekLower", "GreekUpper", 
+                    "Chemistry","Elements", 
+                    "Physics1", "Physics2", "Physics3"]
+const TAB_NAMES_EXPERT = ["Common", "More", "Greek", "Expert"]
+const BUTTON_AREA_NAMES_EXPERT = ["Common", "Operators", "Angles", 
+                    "Misc", "Sets", 
+                    "GreekLower", "GreekUpper",
+                    "Expert","Matrices"]
+const TAB_STARTS_AT_AREA_NAMED = {"Common":"Common", 
+                    "More":"Misc",
+                    "Greek":"GreekLower",
+                    "Chemistry":"Chemistry",
+                    "Physics":"Physics1",
+                    "Expert":"Expert"}
+
+let GLOBAL_buttonAreasWidths = null;
+let GLOBAL_buttonAreasWidthsExpert = null;
+let GLOBAL_last_selected_tab = TAB_NAMES[0]
+
+export default class EquationEditor extends React.Component {
+    
+  constructor(props) {
+    super(props);
+    this.state = {
+      latex: props.latex,
+      pretty: false,
+      selectedTab: GLOBAL_last_selected_tab,
+      recentSymbolsCount: 0,
+    };
+
+    this.mathQuill = null
+    this.handleInsertCallback = props.handleInsert
+    this.handleCancelCallback = props.handleCancel
+  }
+
+  handleInsert = () => {
+    this.handleInsertCallback(this.state.latex)
+  }
+
+  handleCancel = () => {
+    this.handleCancelCallback()
+  }
+  
+  prettifyLatex(latex) {
+    // NB:  replaceAll not suported on safari
+    // console.log("Before: "+latex)
+    // latex = latex.replaceAll(/\\\\/g,"_DOOUBLE_BCACKSLASH_")
+    // latex = latex.replace(/\\/g," \\")
+    // latex = latex.replaceAll("_DOOUBLE_BCACKSLASH_","\\\\")
+    // latex = latex.replaceAll("="," = ")
+    // latex = latex.replaceAll("+"," + ")
+    // latex = latex.replaceAll("-"," - ")
+    // latex = latex.replaceAll("{ ","{")
+    // latex = latex.replaceAll("( ","(")
+    // latex = latex.replaceAll("[ ","[")
+    // latex = latex.replaceAll("  "," ")
+    // latex = latex.trim()
+    // console.log("Prettified: "+latex)
+    return latex 
+  }
+
+  handleChange = (mathQuill) => {
+    this.setState({latex:mathQuill.latex(),
+                   pretty:false})
+  }
+
+  handleKeyDown = (e) => {
+    // console.log(e.key)
+    try {
+      if (!this.props.useExpertMode && e.key === "Enter") {
+        this.handleInsertCallback(this.state.latex)
+        e.preventDefault()
+      }
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  updateRecentSymbols(symbol) {
+    let recentSymbols = GLOBAL_recentSymbols
+    let symbolIndex = -1
+    let minIndex = -1
+    let min = 999999
+    for (let i = 0; i < recentSymbols.length; i++) {
+      if (recentSymbols[i].name === symbol)
+        symbolIndex = i
+      if (recentSymbols[i].count > 0)
+        recentSymbols[i].count = recentSymbols[i].count * RECENT_DECAY_FACTOR
+      if (recentSymbols[i].count <= min) {
+        min = recentSymbols[i].count
+        minIndex = i
+      }
+    }
+    if (symbolIndex >= 0) {
+      recentSymbols[symbolIndex].count = recentSymbols[symbolIndex].count + RECENT_WEIGHT
+    } else {
+      if (recentSymbols.length >= RECENT_MAX) {
+        recentSymbols.splice(minIndex, 1)
+      }
+      recentSymbols.push({name:symbol, count:RECENT_WEIGHT})
+    }
+
+    // recentSymbols.sort((a, b) => b.count - a.count) // Order max to min
+
+    GLOBAL_recentSymbols = recentSymbols
+    GLOBAL_lastSymbols.pop()
+    GLOBAL_lastSymbols.unshift(symbol)
+
+
+    this.setState({recentSymbolsCount:this.state.recentSymbolsCount + 1})
+  }
+
+  handleInsertSymbol = (symbol) => {
+    if (this.props.useExpertMode)
+      this.handleInsertSymbolKatex(symbol)
+    else
+      this.handleInsertSymbolMathQuill(symbol)
+  }
+
+  isLetter = (char) => {
+    return ('a' <= char && char <= 'z') || ('A' <= char && char <= 'Z')
+  }
+
+  // Returns:
+  // 1. the provided pos if pos is not inside a latex tag
+  // 2. a new pos if pos is close to the start or end of a tag (within 2 characters)
+  // 3. -1 if pos is not close to the start or end of a tag
+  movePosIfInsideTag(latex, pos) {
+    if (pos === 0 || pos === latex.length)
+      return pos
+
+    let c = latex.charAt(pos)
+    if (!this.isLetter(c))
+      return pos
+    let cm1 = latex.charAt(pos-1)
+    if (!this.isLetter(cm1) && cm1 !== "\\")
+      return pos-1
+
+    // We are inside a latex tag, let's move out of it
+    if (pos === 1)
+      return 0
+    if (pos === latex.length-1)
+      return latex.length
+
+    if (latex.charAt(pos-1) === "\\")
+      return pos-1
+    if (!this.isLetter(latex.charAt(pos+1)))
+      return pos+1
+    if (latex.charAt(pos-2) === "\\")
+      return pos-2
+    if (!this.isLetter(latex.charAt(pos+2)))
+      return pos+2
+
+    return -1
+  }
+
+  handleInsertSymbolKatex = (symbol) => {
+    let oldLatex = null
+    let start = -1
+    let end = -1    
+    try {
+      this.updateRecentSymbols(symbol)
+      oldLatex = this.latexInput.value
+      start = this.latexInput.selectionStart
+      end = this.latexInput.selectionEnd
+
+      start = this.movePosIfInsideTag(oldLatex, start)
+      end = this.movePosIfInsideTag(oldLatex, end)
+      if (start === -1 || end === -1 ) {
+        console.log("Can't insert as cursor position or start or end of selection is inside a tag")
+        return
+      }
+
+      // if (this.latexInput !== document.activeElement)
+      this.latexInput.focus()
+
+      let insertParams = getLatexInsertionParams(symbol)
+      let insert = insertParams.latexWithMarks
+      console.log("Insert params: ")
+      console.log(insertParams)
+      console.log(start+":"+end)
+      console.log(oldLatex)
+
+      // Move text before cursor into latex if double mark exists in latex
+      let pos = insert.indexOf("##")
+      if (pos >= 0) {
+        if (start !== end) {
+          insert = insert.replace("##", oldLatex.substring(start, end))
+          console.log("insert: "+insert)
+          oldLatex = oldLatex.substring(0,start) + oldLatex.substring(end)
+          end = start
+        } else if (start > 0) {
+          insert = insert.replace("##", oldLatex.charAt(start-1))
+          oldLatex = oldLatex.substring(0,start-1) + oldLatex.substring(start)
+          start = start -1
+          end = start
+        } else {
+          insert = insert.replace("##", "#")
+        }
+      }
+      // Move text before cursor into latex if selection made and single mark exists in latex
+      // or otherwise delete selected text
+      if (start !== end) {
+        pos = insert.indexOf("#")
+        if (pos >=0)
+          insert = insert.replace("#", oldLatex.substring(start, end))
+        
+        oldLatex = oldLatex.substring(0,start) + oldLatex.substring(end)
+        end = start
+      }
+
+      // Remove any extra marks after the first mark
+      insert = insert.replace("#",MARK)
+      insert = insert.replaceAll("#","")
+      insert = insert.replace(MARK,"#")
+
+      // Construct new latex
+      let newLatex = 
+        oldLatex.substring(0,start) +
+        insert +
+        MARK +
+        oldLatex.substring(start)
+      let newSelectionStart = newLatex.indexOf(MARK)
+      newLatex = newLatex.substring(0,newSelectionStart) + 
+        newLatex.substring(newSelectionStart+MARK.length)
+
+      // Move cursor position back to mark in inserted text if applicable      
+      pos = insert.indexOf("#")
+      if (pos > 0) {
+        newSelectionStart = newLatex.lastIndexOf("#",newSelectionStart)
+        newLatex = newLatex.substring(0,newSelectionStart)+newLatex.substring(newSelectionStart+1)
+      }
+
+      this.setState({latex:newLatex},
+        () => {
+          this.latexInput.selectionStart = newSelectionStart
+          this.latexInput.selectionEnd = newSelectionStart
+          this.latexInput.focus()
+        })
+    } catch (error) {
+      console.error(error)
+      console.log("Inserting: "+symbol)
+      console.log("into: "+this.latexInput.value)
+      console.log("at: "+start+":"+end)
+    }
+  }
+
+
+  handleInsertSymbolMathQuill = (symbol) => {
+    try {
+      this.updateRecentSymbols(symbol)
+
+      let insert = getLatexInsertionParams(symbol)
+      if (insert === null || insert === undefined) {
+        console.err("Could not get latex insertion parameters for symbol: "+symbol)
+        this.mathQuill.focus()
+        return
+      }
+
+      if (insert.typedText)
+        this.mathQuill.typedText(insert.mathQuillLatex)
+      else
+        this.mathQuill.write(insert.mathQuillLatex)
+
+      this.mathQuill.focus()
+
+      for (let i = 0; i < insert.moveCursor; i++)
+        this.mathQuill.keystroke('Right')
+      for (let i = 0; i > insert.moveCursor; i--)
+        this.mathQuill.keystroke('Left')
+    } catch (error) {
+      console.error(error)
+      console.log("Symbol: "+symbol)
+    }
+  }
+
+  handleSelectTab = (tab) => {
+    if (!this.props.useExpertMode)
+      this.mathQuill.focus()
+    else
+      this.latexInput.focus()
+
+    GLOBAL_last_selected_tab = tab
+    this.setState({selectedTab:tab}, 
+      () =>
+      {
+        let buttonAreas = this.symbolButtonAreasInnerContainer.childNodes
+        for (let i = 0; i < buttonAreas.length; i++) {
+          if (buttonAreas[i].id === TAB_STARTS_AT_AREA_NAMED[tab]) {
+            buttonAreas[i].scrollIntoView({behavior:"smooth", inline:"start"})
+          }
+        }
+      })
+  }
+
+  mathquillDidMount(mathQuill) {
+    this.mathQuill = mathQuill
+    mathQuill.focus()
+  }
+
+  componentDidMount(){
+    // let thisComponentNode = ReactDOM.findDOMNode(this);
+    this.equationEditorDiv.addEventListener('keydown',this.handleKeyDown);
+
+    // Restore scroll position for tab to last selected
+    let buttonAreas = this.symbolButtonAreasInnerContainer.childNodes
+    for (let i = 0; i < buttonAreas.length; i++) {
+      if (buttonAreas[i].id === TAB_STARTS_AT_AREA_NAMED[GLOBAL_last_selected_tab]) {
+        buttonAreas[i].scrollIntoView({behavior:"auto", inline:"start"})
+      }
+    }
+  }
+
+  componentWillUnmount(){
+    // let thisComponentNode = ReactDOM.findDOMNode(this);
+    this.equationEditorDiv.removeEventListener('keydown',this.handleKeyDown);
+  }
+
+  isMobile() {
+    return (
+      (window.innerHeight > window.innerWidth) && 
+      (window.innerHeight < 820)) || (window.innerHeight < 500)
+  }
+
+  isTouchDevice() { 
+    return ( 'ontouchstart' in window ) ||  
+           ( navigator.maxTouchPoints > 0 ) ||  
+           ( navigator.msMaxTouchPoints > 0 );
+  }
+
+  handleCursorLeft = () => {
+    this.mathQuill.keystroke('Left')
+    this.mathQuill.focus()
+  }
+
+  handleCursorRight = () => {
+    this.mathQuill.keystroke('Right')
+    this.mathQuill.focus()
+  }
+
+  handleLatexInputChange = (event) => {
+    this.setState({latex:event.target.value,
+                  pretty:true})    
+  }
+
+  renderLatexString = (latex) => {
+    
+    const options = {
+      children: "",
+      displayMode: false,
+      output: "htmlAndMathml",
+      leqno: false,
+      fleqn: false,
+      throwOnError: false,
+      errorColor: "#cc0000",
+      macros: {},
+      minRuleThickness: 0,
+      colorIsTextColor: false,
+      strict: "warn",
+      trust: false
+    }
+
+    try {
+        // returns HTML markup
+        return katex.renderToString(latex, options);
+    } catch (err) {
+        console.error("Could not convert latex string to html: ", latex);
+        return "Error: Unable to render latex";
+    }
+  };
+
+  render() {
+    console.log("Rendering EquationEditor. Latex: "+this.state.latex)
+    let katexHtml = null
+    let prettyLatex = null
+    if (this.props.useExpertMode) {
+      katexHtml = this.renderLatexString(this.state.latex)
+      if (this.state.pretty)
+        prettyLatex = this.state.latex
+      else {
+        prettyLatex = this.prettifyLatex(this.state.latex)
+      }
+    }
+
+    let tabNames = TAB_NAMES
+    let buttonAreaNames = BUTTON_AREA_NAMES
+    let buttonAreaWidths = GLOBAL_buttonAreasWidths
+    if (this.props.useExpertMode) {
+      tabNames = TAB_NAMES_EXPERT  
+      buttonAreaNames = BUTTON_AREA_NAMES_EXPERT
+      buttonAreaWidths = GLOBAL_buttonAreasWidthsExpert
+    }
+
+    const recentButtons = GLOBAL_recentSymbols.slice(0,RECENT_MAX).map((symbol, index) => {
+      return (
+        <SymbolButton 
+            className="SymbolButton"
+            key={"recent=symbol-"+index}
+            symbol={symbol.name}
+            shouldUpdate={true}
+            highlight={
+              symbol.name === GLOBAL_lastSymbols[0] ? "0" : 
+                symbol.name === GLOBAL_lastSymbols[1] ? "1" : 
+                  symbol.name === GLOBAL_lastSymbols[2] ? "2" : "none" 
+            }
+            handleClick={(latex) => this.handleInsertSymbol(symbol.name)}
+          />
+      )
+    })
+
+    if (buttonAreaWidths === null) {
+      let widths = []
+      for (let i = 0; i < buttonAreaNames.length; i++) {
+        widths[i] = Math.ceil(getSymbolsForButtonArea(buttonAreaNames[i]).length/MAX_BUTTON_ROWS)
+      }
+      buttonAreaWidths = widths;
+    }
+    
+    const buttonAreasButtons = buttonAreaNames.map((buttonArea, index) => {
+      return (
+        getSymbolsForButtonArea(buttonArea).map((symbol, index) => {
+          return (
+            <SymbolButton 
+              className="SymbolButton"
+              key={buttonArea+"-symbol-"+index}
+              highlight={buttonArea.toLowerCase()}
+              symbol={symbol}
+              handleClick={() => this.handleInsertSymbol(symbol)}
+            />
+          )
+        }
+      )
+    )})
+
+    return <div className="EquationEditor"
+            ref={(r) => this.equationEditorDiv = r} 
+            >
+      {/* Normal mode. Add cursor move buttons for mobile devices as they don't have 
+          cursor keys in the soft keyboard. */}
+      { !this.props.useExpertMode && 
+        <div className="editableAndCursorButtonsWrapper">
+        { this.isTouchDevice() &&
+          <button
+            className="cursorButton" 
+            onClick={(t) => this.handleCursorLeft()}>
+            {"\u25C1"}
+          </button>
+        }
+
+        <div
+          ref={(r) => this.editableWrapper = r} 
+          className="editableWrapper">
+            <div className="centerBox">
+          <EditableMathField
+            className="editable"
+            latex={this.state.latex}
+            placeholder="Type equation .."
+            config={{
+              autoOperatorNames: AUTO_OPERATOR_NAMES
+            }}
+            mathquillDidMount={mathQuill => this.mathquillDidMount(mathQuill)}
+            onChange={(mathQuill) => this.handleChange(mathQuill)}
+          />
+          { this.state.latex.length=== 0 && 
+            <div className="editable-placeholder">Type equation</div>}
+            </div>
+        </div>
+
+        { this.isTouchDevice() &&  
+          <button
+            className="cursorButton" 
+            onClick={(t) => this.handleCursorRight()}>
+              {"\u25B7"}
+            </button>
+        }
+      </div>}
+
+      { /* Expert mode */}
+      { this.props.useExpertMode && 
+        <div className="latexInputAreaWrapper">
+          <textarea className="latexInput"
+            autoFocus
+            placeholder="Type latex"
+            spellCheck="false"
+            ref={(r) => this.latexInput = r} 
+            onChange={this.handleLatexInputChange}
+            value={prettyLatex}>
+          </textarea>
+          <div className="katexRenderedInput"
+            dangerouslySetInnerHTML={{__html: katexHtml}}
+          />
+        </div>
+      }
+  
+
+      {/* Cancel and submit button row. Cancel button is only shown on mobile devices as
+          there may be no visible background to click on to close the modal. */}
+      { this.isMobile() &&
+        <button
+          className="cancelButton"
+          type="button" onClick={this.handleCancel}>
+          Cancel
+        </button>
+      }
+      <button
+            className="insertButton"
+            type="button" onClick={this.handleInsert}>
+            Insert
+      </button>
+
+
+      {/* Recent symbols button bar */}
+      { !this.isMobile() && <div className="recentSymbolsButtonArea">
+        { GLOBAL_recentSymbols.length > 0 && GLOBAL_recentSymbols.length < 6 &&
+          <span className="recentSymbols-recentText-active">Recent:</span> }
+        { GLOBAL_recentSymbols.length === 0 &&
+          <span className="recentSymbols-recentText-not-active">Recent:</span>}
+        { recentButtons }
+        </div>
+      }
+
+
+      {/* Symbol buttons area */}
+      <div>        
+        <div className="tabBar"> 
+        { tabNames.map((tab, index) => {
+          return (
+            <span key={"tabBar-"+tab}> 
+            { this.state.selectedTab === tab
+            ? <span className="tab-selected" selected={true}>{tab}</span>
+            : <span className="tab" onClick={(t) => this.handleSelectTab(tab)}>{tab}</span>
+            } </span>
+          )})
+        }
+        </div>
+
+        <div className="symbolButtonAreasOuterContainer">
+          <div className="symbolButtonAreasInnerContainer"
+            ref={(r) => this.symbolButtonAreasInnerContainer = r} 
+          >
+            { buttonAreasButtons.map((button, index) => {
+              return ( 
+                <div
+                  id={buttonAreaNames[index]}
+                  key={buttonAreaNames[index]}
+                  className={"symbolButtonArea-"+buttonAreaWidths[index]}>
+                  {button}
+                </div> )})
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+}