quill-editor-math

> Rich text editor with react quill, mathquill4quill, katex, and image resizer. you can use formula with this. 👌🏻

 

Demo

Stackblitz

Install

``bash
npm install --save quill-editor-math
`

or

`
yarn add quill-editor-math
`

Usage

$3

`tsx
import React, { Component } from 'react'

import Editor from 'quill-editor-math'
import 'quill-editor-math/dist/index.css'

class Example extends Component {
render() {
return
}
}
`

$3

`tsx
import dynamic from 'next/dynamic';
import 'quill-editor-math/dist/index.css';

const Editor = dynamic(() => import('quill-editor-math')
.then((mod) => mod.default), {
ssr: false,
loading: () =>

Editor loading ...

,
}
);

export default function Example() {
return (

);
}

`

#### If you want to reset field of this text editor, you can try this 👇

`tsx
import { useState } from 'react';
import dynamic from 'next/dynamic';
import 'quill-editor-math/dist/index.css';

const Editor = dynamic(() => import('quill-editor-math')
.then((mod) => mod.default), {
ssr: false,
loading: () =>

Editor loading ...

,
}
);

export default function Example() {
const [resetField, setResetField] = useState(false);

return (
<>
setResetField(true)}>Reset Field


);
}

``

API

| Property | Description | Type | Default |
|----------------|---------------------------------------------------------------------------------------------------------|---------------------------------------------|---------------------------------------------|
| initialValue | the initial value to be inserted into the text editor | String | "" |
| onChange | Callback when user input | function(value, delta, source, editor) | false |
| onBlur | Called when leaving the component | function(previousSelection, source, editor) | false |
| placeholder | The placeholder of input | String | - |
| style | HTML CSS style | React.CSSProperties | - |
| theme | Quill Editor themes | String - "bubble \| snow" | "snow" |
| customOperator | Operator that will appear in the equation, you can write latex formula. | array | [['\\pm', '\\pm'], ['\\sqrt{x}', '\\sqrt']] |
| toolbar | Quill Toolbar Options, you can read more here: https://quilljs.com/docs/modules/toolbar/#toolbar-module | array | - |
| resetField | variable state for reset field of the text editor | boolean | false |
| setResetField | if you pass 'resetField' into props, you have to pass 'setResetField' too, it will set back resetField into false | React.Dispatch> | - |

License

MIT © vieyama