@zzish/math-rich-input 0.1.0

package/src/AccentBar.jsx

@@ -0,0 +1,771 @@
+import React from 'react'
+
+import './AccentBar.css';
+
+const DEFAULT_TOP = -1
+const DEFAULT_LEFT = -1
+const TOP_MARGIN = 3
+
+const ACCENTS_FOR_LETTER = {
+  a:["à","á","â","ä","æ","ã","å","ā"],
+  c:["ç","ć","č"],
+  e:["è","é","ê","ë","ē","ė","ę"],
+  i:["î","ï","í","ī","į","ì"],
+  l:["ł"],
+  n:["ñ","ń"],
+  o:["ô","ö","ò","ó","œ","ø","ō","õ"],
+  s:["ß","ś","š"],
+  u:["û","ü","ù","ú","ū"],
+  y:["ÿ"],
+  "?":["¿"],
+  "!":["¡"],
+  A:["À","Á","Â","Ä","Æ","Ã","Å","Ā"],
+  C:["ç","ć","č"],
+  E:["È","É","Ê","Ë","Ē","Ė","Ę"],
+  I:["Î","Ï","Í","Ī","Į","Ì"],
+  L:["Ł"],
+  N:["Ñ","Ń"],
+  O:["Ô","Ö","Ò","Ó","Œ","Ø","Ō","Õ"],
+  S:["Ś","Š"],
+  U:["Û","Ü","Ù","Ú","Ū"],
+  Y:["Ÿ"]
+}
+
+
+let GLOBAL_default_accents = []
+
+function addCharactersFromString(characters, string) {
+  for (let i = 0; i < string.length; i++) {
+    characters.push(string.charAt(i)) 
+  }
+  return characters
+} 
+
+function addCharacters(characters, start, end) {
+  for (let c = start; c <= end; c++) {
+    characters.push(String.fromCharCode(c)) 
+  }
+  return characters
+} 
+
+function buildGreekLowerCaseLetters() {
+  let characters = []
+  addCharacters(characters, 0x03B1, 0x03C9)
+  return characters
+} 
+
+function buildGreekCapitaLetters() {
+  let characters = []
+  addCharactersFromString(characters, "ΓΔΘΛΞΠΣΦΨψΩ∇")
+  return characters
+} 
+
+function buildCommonMathSymbols() {
+  let characters = []
+  const common = ["+","-","×","÷","=","▢","±","⋅","≠","≈","→","<",">","≤","≥","√","∛","∜","²","³","⁴","∞","π","°","∠"]
+  const brackets = ["〈","〉","⌈","⌉","⌊","⌋"]
+
+  characters.push(...common)
+  characters.push(...brackets)
+  return characters
+}
+
+function buildLetterMathSymbols() {
+  let characters = []
+  addCharactersFromString(characters, "ℑℜℂℕℙℚℝℤ")
+  return characters
+}
+
+function buildFractionMathSymbols() {
+  let characters = []
+  const fractions = ["½","⅓","⅔","¼","¾","⅕","⅖","⅗","⅘","⅙","⅚","⅐","⅛","⅜","⅝","⅞","⅑","⅒"]
+  characters.push(...fractions)
+  return characters
+}
+
+function buildArrowSymbols() {
+  let characters = []
+  addCharacters(characters, 0x2190, 0x21FF)
+  return characters
+}
+
+function buildAdvancedMathSymbols() {
+  let characters = []
+  addCharacters(characters, 0x2200, 0x22FF)
+  return characters
+}
+
+function buildCurrencySymbols() {
+  let characters = []
+  addCharactersFromString(characters, "$¢£€￥₹₤฿₴₭₺₪₦₱₽₩")
+  return characters
+}
+
+function buildLatinSymbols() {
+  let characters = []
+  addCharactersFromString(characters, "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ")
+  return characters
+}
+
+function buildNumbers() {
+  let characters = []
+  addCharactersFromString(characters, "0123456789\u20dd\u20de")
+  return characters
+}
+
+// function buildRomanNumerals() {
+//   let characters = []
+//   addCharacters(characters, 0x2160, 0x217F)
+//   return characters
+// }
+
+function buildSymbols() {
+  let characters = []
+  addCharactersFromString(characters, "!@#%^&*|")
+  return characters
+}
+
+function buildEmoticonsSmileys() {
+  let characters = []
+  characters.push(...["😀","😀","😁","😆","😅","😂","🤣","😊","😇","🙂","🙃","😉","😍","🥰","😘","😜",
+                      "🤪","🤨","🧐","🤓","😎","🤩","🥳","🙁","🥺","😢","😭","😤","🤯","😳","🥶","😱",
+                      "🤗","🤔","🤭","🤫","🤥","😶","😐","😴","🤐","🥴","🤠","😈","👹","👺","🤡","💩",
+                      "👻","💀","☠️","👽","👾","🤖","🎃","😺","😸","😹","😻","😼","😽","🙀","😿","😾"])
+  return characters
+}
+
+function buildEmoticonsPeople() {
+  let characters = []
+  characters.push(...["✍️","👏","🤝","👍","👎","🤞","👆","👇","✋","💪","🙏"])                          
+  characters.push(...["👂","👃","🧠","👁","👶","👧","👦","👩","👨","👳‍♂️","🧕","🙋‍♀️","🙋‍♂️","🙎‍♀️","🙎‍♂️","👩‍🎓","👨‍🎓","👩‍💻","👨‍💻","👩‍🏫","👨‍🏫"])                         
+  return characters
+}
+
+function buildEmoticonsAnimals() {
+  let characters = []
+  characters.push(...["🐶","🐱","🐭","🐹","🐰","🦊","🐻","🐼","🐨","🐯","🦁","🐮","🐷","🐽","🐸","🐵",
+                      "🙈","🙉","🙊","🐔","🐧","🐦","🐤","🐣","🐥","🦆","🦅","🦉","🦇","🐺","🐗","🐴",
+                      "🦄","🐝","🐛","🦋","🐌","🐞","🐜","🦟","🦗","🕷","🕸","🦂","🐢","🐍","🦎","🦖",
+                      "🦕","🐙","🦑","🦐","🦞","🦀","🐡","🐠","🐟","🐬","🐳","🐋","🦈","🐊","🦍","🐘",
+                      "🐅","🐆","🦓","🦛","🦏","🐪","🦒","🦘"])                          
+  return characters
+}
+
+function buildEmoticonsFood() {
+  let characters = []
+  characters.push(...["🍄","🌹","🌸","🌼","🌻","🌞","🌙","🌎","⭐️","🌟","✨","🍏","🍎","🍐","🍊","🍋",
+                      "🍌","🍉","🍇","🍓","🍈","🍒","🍑","🥭","🍍","🥥","🥝","🍅","🥚","🧀","🥖","🥐",
+                      "🍔","🍟","🍕","🥪","🍦","🥧","🧁","🍰","🍭","🍬","🍫","🍿","🍩","🍪","🥤","🥛"])                          
+  return characters
+}
+
+function buildEmoticonsGames() {
+  let characters = []
+  characters.push(...["⚽️","🏀","🏈","⚾️","🥎","🎾","🏐","🏉","🥏","🎱","🏏","🏆","🥇","🥈","🥉","🏅",
+                      "🎖","🎲","🎭","🎨","🎬","🎤","🎹","🎷"])            
+  return characters
+}
+
+function buildEmoticonsTransport() {
+  let characters = []
+  characters.push(...["🚗","🚕","🚙","🚌","🏎","🚓","🚑","🚒","🚐","🚚","🚜","🛴","🚲","🛵","🏍","🚂",
+                      "🚋","✈️","🚀","🛸","🚁","🛶","⛵️","🚤"])                          
+  return characters
+}
+
+function buildEmoticonsMisc() {
+  let characters = []
+  characters.push(...["💰","💎","💣","🧨","⚗️","🔭","🔬","💉","🧬","🦠","🧫","🧪","🌡","🔑","🗝","🎁",
+                      "🎈","📒","📕","📗","📘","📙","📚","📖","📊","📈","🧮","❤️","🧡","💛","💚","💙",
+                      "💜","🖤","⚪️","⚫️","🔴","🔵","🔺","🔻","🔸","🔹","🔶","🔷","♠️","♣️","♥️","♦️"])                          
+  return characters
+}
+
+const GREEK_CAPITAL_LETTERS = buildGreekCapitaLetters()
+const GREEK_LOWER_CASE_LETTERS = buildGreekLowerCaseLetters()
+
+const COMMON_MATH_SYMBOLS = buildCommonMathSymbols()
+const LETTER_MATH_SYMBOLS = buildLetterMathSymbols()
+const FRACTION_MATH_SYMBOLS = buildFractionMathSymbols()
+const ADVANCE_MATH_SYMBOLS = buildAdvancedMathSymbols()
+const ARROW_SYBOLS = buildArrowSymbols()
+
+const CURRENCY_SYMBOLS = buildCurrencySymbols()
+const LATIN_LETTERS = buildLatinSymbols()
+const NUMBER_SYMBOLS = buildNumbers()
+const COMMON_SYMBOLS = buildSymbols()
+// const ROMAN_NUMERALS = buildRomanNumerals()
+
+const EMOTICONS_SMILEYS = buildEmoticonsSmileys()
+const EMOTICONS_PEOPLE = buildEmoticonsPeople()
+const EMOTICONS_ANIMALS = buildEmoticonsAnimals()
+const EMOTICONS_FOOD = buildEmoticonsFood()
+const EMOTICONS_GAMES = buildEmoticonsGames()
+const EMOTICONS_TRANSPORT = buildEmoticonsTransport()
+const EMOTICONS_MISC = buildEmoticonsMisc()
+
+const TAB_NAMES = ["Accents", "Greek", "Math", "Emoticons", "More"]
+let GLOBAL_last_selected_tab = TAB_NAMES[0]
+
+
+export default class AccentBar extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedTab: GLOBAL_last_selected_tab,
+      top:DEFAULT_TOP,
+      left:DEFAULT_LEFT,
+    }
+    this.suppliedClickHandler = null
+    this.handleButtonClick = this.handleButtonClick.bind(this)
+    this.letterForAccents = null
+    this.shouldUpdatePosition = true
+    this.shouldUpdateReplaceCharacters = true
+    this.isFullyMounted = false
+
+    if (GLOBAL_default_accents.length === 0)    
+      for (let key in ACCENTS_FOR_LETTER) {
+        GLOBAL_default_accents.push(...ACCENTS_FOR_LETTER[key])
+    }
+  }
+
+  handleButtonClick = (e, character, insert=false) => {
+    // console.log("handleButtonClick")
+    // console.log(character)
+    // console.log(this.letterForAccents)
+    // console.log(insert)
+    if (insert)
+      this.suppliedClickHandler(e, null, character)
+    else
+      this.suppliedClickHandler(e, this.letterForAccents, character)
+  }
+
+  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 left (compact mode) or right aligned
+      let thisBar = this.accentBar
+      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 below input field
+      let top = inputBounds.bottom + TOP_MARGIN
+
+      // Horizontally align to left or right of input field
+      let left = inputBounds.right - thisBounds.width // right align
+      if (this.props.compactMode)
+        left = inputBounds.left // left align
+
+      // 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
+    }
+  }
+
+  handleSelectTab = (tab) => {
+    GLOBAL_last_selected_tab = tab
+    this.setState({selectedTab:tab})
+  }
+
+  componentDidUpdate =(prevProps) => {
+    // console.log("componentDidUpdate")
+    let accentKey = this.props.keyPressed
+    if (accentKey === "Backspace" ||  accentKey === "ArrowLeft" || accentKey === "ArrowRight") {
+      if (this.shouldUpdateReplaceCharacters) {
+        this.shouldUpdateReplaceCharacters = false
+        let thisState = this.state
+        setTimeout(() => {
+            // console.log("Focing update")
+            this.setState(thisState)
+          },
+          100)
+      } else {
+        this.shouldUpdateReplaceCharacters = true
+      }
+    }
+  }
+
+  render() {
+    // console.log("Rendering accent bar")
+    this.suppliedClickHandler  = this.props.onButtonClick
+
+    let compactMode = false
+    if (this.props.compactMode !== null && this.props.compactMode !== undefined)
+      compactMode = this.props.compactMode
+
+    // Get the right accent letter for the replace functionality
+    let allAccents = GLOBAL_default_accents
+   let accentKey = this.props.keyPressed
+    if (!this.isFullyMounted)
+      accentKey = this.props.fetchAccentLetter()
+    else if ((accentKey === "Backspace" ||  accentKey === "ArrowLeft" || accentKey === "ArrowRight") &&
+              !this.shouldUpdateReplaceCharacters) // Yes, this should indeed be a NOT
+      accentKey = this.props.fetchAccentLetter()
+
+    // console.log("Accent key:"+accentKey)
+
+    let quickAccents = ACCENTS_FOR_LETTER[accentKey]
+    this.letterForAccents = accentKey
+    if (quickAccents === null || quickAccents === undefined)
+      quickAccents = []
+
+    // Set className
+    let className= compactMode ? 'AccentBar-compact' : 'AccentBar'
+    if (this.props.className)
+      className = className + " " + this.props.className
+
+    // Set up the tranlation to place the accent bar where we want it
+    let style = {...this.props.style}
+    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={className} 
+        style={style}
+        ref={(r) => this.accentBar = r} 
+        onMouseDown={(e) => e.preventDefault()}
+        onMouseUp={(e) => e.preventDefault()}
+        onClick={(e) => e.preventDefault()}
+      >
+
+        { /* Compact mode */}
+        {compactMode &&
+          <div>
+            { quickAccents.map((character, index) => {
+              return ( 
+                <button
+                  className="AccentBar-button AB-narrow AB-compact"
+                  key={"accent-button-"+index}
+                  onMouseDown={(e) => e.preventDefault()}
+                  onMouseUp={(e) => this.handleButtonClick(e,character)}
+                  onClick={(e) => e.preventDefault()}
+                >
+                {character}
+                </button> 
+              )
+              })
+            }
+          </div>
+        }
+
+      { /* Normal mode */}
+      {!compactMode &&
+        <div>
+
+        <div className="tabBar">
+        { TAB_NAMES.map((tab, index) => {
+          return (
+            <span key={"tabBar-"+tab}> 
+            { this.state.selectedTab === tab
+            ? <span className="tab-selected" selected={true}>{tab}</span>
+            : <span className="tab" 
+                onMouseDown={(e) => e.preventDefault()}
+                onMouseUp={(e) => e.preventDefault()}
+                onClick={(e) => this.handleSelectTab(tab)}
+              >{tab}</span>
+            } </span>
+          )})
+        }
+        </div>
+
+        <div className="AccentBar-outerContainer">
+        <div className="AccentBar-innerContainer">
+
+        { /* Accents tab */}
+        {this.state.selectedTab === "Accents" && 
+          <div className="tabArea">
+            {quickAccents.length > -1 &&
+              <div className="replace-section">
+                <div className="section-label">
+                  Replace
+                </div>
+                {quickAccents.length === 0 &&
+                <div className="type-a-letter">Type a vowel to show replacements</div>
+
+                }
+                { quickAccents.map((character, index) => {
+                  return ( 
+                    <button
+                      className="AccentBar-button AB-narrow"
+                      key={"accent-button-"+index}
+                      onMouseDown={(e) => e.preventDefault()}
+                      onMouseUp={(e) => this.handleButtonClick(e,character)}
+                      onClick={(e) => e.preventDefault()}
+                    >
+                    {character}
+                    </button> 
+                  )
+                  })
+                }
+              </div>
+            }
+  
+          <div className="section-label">
+            Insert
+          </div>
+          { allAccents.map((character, index) => {
+            return ( 
+              <button
+                className="AccentBar-button AB-narrow"
+                key={"accent-button-"+index}
+                onMouseDown={(e) => e.preventDefault()}
+                onMouseUp={(e) => this.handleButtonClick(e, character, true)}
+                onClick={(e) => e.preventDefault()}
+              >
+              {character}
+              </button> 
+            )})
+          }
+          </div>
+        }
+
+        { /* Greek tab */}
+        { this.state.selectedTab === "Greek" &&
+        <div className="tabArea">
+          <div className="section-label">
+            Lower case
+          </div>          
+          { GREEK_LOWER_CASE_LETTERS.map((character, index) => {
+            return ( 
+              <button
+                className="AccentBar-button AB-narrow"
+                key={"accent-button-"+index}
+                onMouseDown={(e) => e.preventDefault()}
+                onMouseUp={(e) => this.handleButtonClick(e, character, true)}
+                onClick={(e) => e.preventDefault()}
+              >
+              {character}
+              </button> 
+            )})
+          }
+          <div className="section-label">
+            Capitals
+          </div>          
+          { GREEK_CAPITAL_LETTERS.map((character, index) => {
+            return ( 
+              <button
+                className="AccentBar-button AB-narrow"
+                key={"accent-button-"+index}
+                onMouseDown={(e) => e.preventDefault()}
+                onMouseUp={(e) => this.handleButtonClick(e, character, true)}
+                onClick={(e) => e.preventDefault()}
+              >
+              {character}
+              </button> 
+            )})
+          }
+          </div>
+        }
+
+        { /* Math tab */}
+        { this.state.selectedTab === "Math" && 
+          <div className="tabArea">
+            <div className="section-label">
+              Common
+            </div>          
+            { COMMON_MATH_SYMBOLS.map((character, index) => {
+              return ( 
+                <button
+                  className="AccentBar-button AB-narrow"
+                  key={"accent-button-"+index}
+                  onMouseDown={(e) => e.preventDefault()}
+                  onMouseUp={(e) => this.handleButtonClick(e, character, true)}
+                  onClick={(e) => e.preventDefault()}
+                >
+                {character}
+                </button> 
+              )
+            })}
+            <div className="section-label">
+              Fractions
+            </div>          
+            { FRACTION_MATH_SYMBOLS.map((character, index) => {
+              return ( 
+                <button
+                  className="AccentBar-button AB-narrow"
+                  key={"accent-button-"+index}
+                  onMouseDown={(e) => e.preventDefault()}
+                  onMouseUp={(e) => this.handleButtonClick(e, character, true)}
+                  onClick={(e) => e.preventDefault()}
+                >
+                {character}
+                </button> 
+              )
+            })}
+            <div className="section-label">
+              Letters
+            </div>          
+            { LETTER_MATH_SYMBOLS.map((character, index) => {
+              return ( 
+                <button
+                  className="AccentBar-button AB-narrow"
+                  key={"accent-button-"+index}
+                  onMouseDown={(e) => e.preventDefault()}
+                  onMouseUp={(e) => this.handleButtonClick(e, character, true)}
+                  onClick={(e) => e.preventDefault()}
+                >
+                {character}
+                </button> 
+              )
+            })}
+            <div className="section-label">
+              Advanced
+            </div>          
+            { ADVANCE_MATH_SYMBOLS.map((character, index) => {
+              return ( 
+                <button
+                  className="AccentBar-button AB-narrow"
+                  key={"accent-button-"+index}
+                  onMouseDown={(e) => e.preventDefault()}
+                  onMouseUp={(e) => this.handleButtonClick(e, character, true)}
+                  onClick={(e) => e.preventDefault()}
+                >
+                {character}
+                </button> 
+              )
+            })}
+            <div className="section-label">
+              Arrows
+            </div>          
+            { ARROW_SYBOLS.map((character, index) => {
+              return ( 
+                <button
+                  className="AccentBar-button AB-narrow"
+                  key={"accent-button-"+index}
+                  onMouseDown={(e) => e.preventDefault()}
+                  onMouseUp={(e) => this.handleButtonClick(e, character, true)}
+                  onClick={(e) => e.preventDefault()}
+                >
+                {character}
+                </button> 
+              )
+            })}                      
+          </div>
+        }
+
+        { /* Emoticons tab */}
+        { this.state.selectedTab === "Emoticons" && 
+          <div className="tabArea">
+            <div className="section-label">
+              Smileys
+            </div>          
+            { EMOTICONS_SMILEYS.map((character, index) => {
+              return ( 
+                <button
+                  className="AccentBar-button AB-narrow"
+                  key={"accent-button-"+index}
+                  onMouseDown={(e) => e.preventDefault()}
+                  onMouseUp={(e) => this.handleButtonClick(e, character, true)}
+                  onClick={(e) => e.preventDefault()}
+                >
+                {character}
+                </button> 
+              )
+            })}
+            <div className="section-label">
+              People
+            </div>          
+            { EMOTICONS_PEOPLE.map((character, index) => {
+              return ( 
+                <button
+                  className="AccentBar-button AB-narrow"
+                  key={"accent-button-"+index}
+                  onMouseDown={(e) => e.preventDefault()}
+                  onMouseUp={(e) => this.handleButtonClick(e, character, true)}
+                  onClick={(e) => e.preventDefault()}
+                >
+                {character}
+                </button> 
+              )
+            })}
+            <div className="section-label">
+              Animals
+            </div>          
+            { EMOTICONS_ANIMALS.map((character, index) => {
+              return ( 
+                <button
+                  className="AccentBar-button AB-narrow"
+                  key={"accent-button-"+index}
+                  onMouseDown={(e) => e.preventDefault()}
+                  onMouseUp={(e) => this.handleButtonClick(e, character, true)}
+                  onClick={(e) => e.preventDefault()}
+                >
+                {character}
+                </button> 
+              )
+            })}
+            <div className="section-label">
+              Flowers and food
+            </div>          
+            { EMOTICONS_FOOD.map((character, index) => {
+              return ( 
+                <button
+                  className="AccentBar-button AB-narrow"
+                  key={"accent-button-"+index}
+                  onMouseDown={(e) => e.preventDefault()}
+                  onMouseUp={(e) => this.handleButtonClick(e, character, true)}
+                  onClick={(e) => e.preventDefault()}
+                >
+                {character}
+                </button> 
+              )
+            })}
+            <div className="section-label">
+              Fun
+            </div>          
+            { EMOTICONS_GAMES.map((character, index) => {
+              return ( 
+                <button
+                  className="AccentBar-button AB-narrow"
+                  key={"accent-button-"+index}
+                  onMouseDown={(e) => e.preventDefault()}
+                  onMouseUp={(e) => this.handleButtonClick(e, character, true)}
+                  onClick={(e) => e.preventDefault()}
+                >
+                {character}
+                </button> 
+              )
+            })}
+            <div className="section-label">
+              Transport
+            </div>          
+            { EMOTICONS_TRANSPORT.map((character, index) => {
+              return ( 
+                <button
+                  className="AccentBar-button AB-narrow"
+                  key={"accent-button-"+index}
+                  onMouseDown={(e) => e.preventDefault()}
+                  onMouseUp={(e) => this.handleButtonClick(e, character, true)}
+                  onClick={(e) => e.preventDefault()}
+                >
+                {character}
+                </button> 
+              )
+            })}
+            <div className="section-label">
+              Miscellaneous
+            </div>          
+            { EMOTICONS_MISC.map((character, index) => {
+              return ( 
+                <button
+                  className="AccentBar-button AB-narrow"
+                  key={"accent-button-"+index}
+                  onMouseDown={(e) => e.preventDefault()}
+                  onMouseUp={(e) => this.handleButtonClick(e, character, true)}
+                  onClick={(e) => e.preventDefault()}
+                >
+                {character}
+                </button> 
+              )
+            })}
+
+          </div>
+        }
+
+        { /* More tab */}
+        { this.state.selectedTab === "More" && 
+          <div className="tabArea">
+            <div className="section-label">
+              Symbols
+            </div>          
+            { COMMON_SYMBOLS.map((character, index) => {
+              return ( 
+                <button
+                  className="AccentBar-button AB-narrow"
+                  key={"accent-button-"+index}
+                  onMouseDown={(e) => e.preventDefault()}
+                  onMouseUp={(e) => this.handleButtonClick(e, character, true)}
+                  onClick={(e) => e.preventDefault()}
+                >
+                {character}
+                </button> 
+              )
+            })}
+            <div className="section-label">
+              Currency
+            </div>          
+            { CURRENCY_SYMBOLS.map((character, index) => {
+              return ( 
+                <button
+                  className="AccentBar-button AB-narrow"
+                  key={"accent-button-"+index}
+                  onMouseDown={(e) => e.preventDefault()}
+                  onMouseUp={(e) => this.handleButtonClick(e, character, true)}
+                  onClick={(e) => e.preventDefault()}
+                >
+                {character}
+                </button> 
+              )
+            })}
+            <div className="section-label">
+              Numbers
+            </div>          
+            { NUMBER_SYMBOLS.map((character, index) => {
+              return ( 
+                <button
+                  className="AccentBar-button AB-narrow"
+                  key={"accent-button-"+index}
+                  onMouseDown={(e) => e.preventDefault()}
+                  onMouseUp={(e) => this.handleButtonClick(e, character, true)}
+                  onClick={(e) => e.preventDefault()}
+                >
+                {character}
+                </button> 
+              )
+            })}
+            <div className="section-label">
+              Letters
+            </div>          
+            { LATIN_LETTERS.map((character, index) => {
+              return ( 
+                <button
+                  className="AccentBar-button AB-narrow"
+                  key={"accent-button-"+index}
+                  onMouseDown={(e) => e.preventDefault()}
+                  onMouseUp={(e) => this.handleButtonClick(e, character, true)}
+                  onClick={(e) => e.preventDefault()}
+                >
+                {character}
+                </button> 
+              )
+            })}
+                      
+          </div>
+        }
+
+        </div>
+        </div>
+
+        </div>
+      }
+
+      </div>
+    )
+  }
+}