flw0 / equation-editor-react Goto Github PK

View Code? Open in Web Editor NEW

52.0 3.0 14.0 6.38 MB

Equation editor based on Mathquill for React web apps

Home Page: https://flw0.github.io/equation-editor-react/

License: MIT License

TypeScript 73.69% JavaScript 26.31%

typescript mathematics math equations demo mathquill latex

equation-editor-react's Introduction

Equation Editor for React Applications

By Douwe den Blanken (v0xnihili)

Demo

To see this package in action, a demo is available here. It is possible to type an equation and see the output in LaTeX underneath the editor in pink.

Usage

When embedding the EquationEditor component into your project, you have four properties you have to set. value and onChange speak for themselves, while autoCommands contains a list of commands for which you only have to type the name of the command with a \ in front of it. The same goes for the autoOperatorNames but then for operators.

import React, { useState } from "react";

import EquationEditor from "equation-editor-react";

const Example = () => {
  const [equation, setEquation] = useState("y=x");

  console.log(equation);

  return (
    <EquationEditor
      value={equation}
      onChange={setEquation}
      autoCommands="pi theta sqrt sum prod alpha beta gamma rho"
      autoOperatorNames="sin cos tan"
    />
  )
};

export default Example;

License

MIT

equation-editor-react's People

Contributors

Stargazers

Watchers

Forkers

bobzel toolbox-online cxl086 theigrams xnukernel luisdralves feruz00 hubertjan hwisaac vikram319 cahlr nurkhaliqfm prabir-vora kgosi-motlogelwa

equation-editor-react's Issues

how to disabled editor typing ?

Make sure cursor color is same as rest of text

Class of the cursor: .mq-cursor

How to edit output field and update the equation field on real time?

Hi! First I'd like to thank you for this awesome package!

I want to build an interface where user can edit both EquationEditor input and output code. Here you can see, I've added a input field as a code output. But when I put something on the input field, the equation editor field doesn't update ! Is there any way to do it?

here is my code>>

import EquationEditor from 'equation-editor-react'
import { useState } from 'react'
import { Input } from '@chakra-ui/react'

const MathEditor = () => {
  const [equation, setEquation] = useState('\\frac{a}{b}')

  return (
    <>
      <EquationEditor
        value={equation}
        onChange={setEquation}
        autoCommands="omega"
        autoOperatorNames="sin cos tan"
        onEnter={() => window.alert('You pressed enter!')}
      />
        <Input
          variant={'outline'}
          borderRadius={'0px'}
          textAlign={'center'}
          value={equation}
          onChange={(e) => setEquation(e.target.value)}
        />
    </>
  )
}

export default MathEditor

How to evaluate?

Is posible, take the output an then evaluate it with its dependencies as variables?

Support for React 18

Does not work with react 18+ without forcing it.

npm ERR! react@"^18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.0.0" from [email protected]
npm ERR! node_modules/equation-editor-react
npm ERR! equation-editor-react@"^0.0.10" from the root project