如何在文本区域内动态渲染数学符号？

Question

我希望用户输入“ 3 ^”，然后光标向上移动以输入功率。另一个示例是键入“ sqrt”，然后将其转换为平方根符号，当在其中键入更多字符时，该符号将动态变大。并支持编写分数。

在没有人告诉我不可能实现之前，我只想指出一点，它在https://www.desmos.com/calculator等在线图形计算器和许多其他网络应用程序中都能很好地工作，通过检查我发现他们正在使用常规的旧文本区域。

我已经使一些符号关键字动态更改为其对应的unicode符号，并且很容易不断添加对更多符号的支持，但这仍然不能解决光标定位问题，也不能以任何方式帮助编写分数作为分子和分母。 P.S iv'尝试过MathJax，但这不是解决我的问题的方法。

<textarea className='QuestionInput' ref={(input) => { this.textInput = input; }} value={this.state.question} onChange={this.handleTextChange}/>

handleTextChange = event => {
    this.setState({question: this.transform(event.target.value)});
  }

  transform = text => {
    let map = {
      'sqrt':'√', 
      'pi':'π', 
      'sum':'Σ',
      'int':'∫',
      '<=':'≤',
      '>=':'≥',
      '*':'×',
      '0sup':'⁰',
      '1sup':'¹',
      '2sup':'²',
      '3sup':'³',
      '4sup':'⁴',
      '5sup':'⁵',
      '6sup':'⁶',
      '7sup':'⁷',
      '8sup':'⁸',
      '9sup':'⁹',
      '0sub':'₀',
      '1sub':'₁',
      '2sub':'₂',
      '3sub':'₃',
      '4sub':'₄',
      '5sub':'₅',
      '6sub':'₆',
      '7sub':'₇',
      '8sub':'₈',
      '9sub':'₉',
    };
    let formatedString = text.replace(/(sqrt|pi|sum|\^\d* |\*|<=|>=|int|sup\(\d+\)|sub\(\d+\))/gi, symbolCode => {
      if (symbolCode.match(/sub\(\d+\)/)){ //e.g 'sub(45)' => '₄₅'
        symbolCode = symbolCode.substring(4, symbolCode.length -1); // to remove the 'sub' and the trailing bracket 
        let subscript = '';
          for(var i = 0; i < symbolCode.length; i++){
            subscript += map[symbolCode[i] + 'sub'];
          }
          return subscript;
      }
      if (symbolCode.match(/sup\(\d+\)/)){ //e.g 'sup(63)' => '⁶³'
        symbolCode = symbolCode.substring(4, symbolCode.length -1); // to remove the 'sup' and the trailing bracket 
        let superscript = '';
          for(var i = 0; i < symbolCode.length; i++){
            superscript += map[symbolCode[i]+ 'sup'];
          }
          return superscript
      }
      if (symbolCode.match(/\^\d* /)){ //e.g 'x^3 ' => 'x³ '
          symbolCode = symbolCode.substring(1, symbolCode.length -1); // to remove the '^' and the trailing space
          let superscript = '';
          for(var i = 0; i < symbolCode.length; i++);
            superscript += map[symbolCode[i] + 'sup'];
          return superscript + ' ';
      }
      return map[symbolCode];
    });
    return formatedString;
}