quill-editor-math

quill-editor-math

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

Demo

Stackblitz

Install

npm install --save quill-editor-math

or

yarn add quill-editor-math

Usage

React

import React, { Component } from 'react'

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

class Example extends Component {
  render() {
    return <Editor initialValue='Hello World!' />
  }
}

NextJS

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: () => <p>Editor loading ...</p>,
  }
);

export default function Example() {
  return (
   <Editor initialValue='Hello World!' />
  );
}

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

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: () => <p>Editor loading ...</p>,
  }
);

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

  return (
   <>
        <button onClick={() => setResetField(true)}>Reset Field</button>
        <Editor initialValue='Hello World!' resetField={resetField} setResetField={setResetField} />
   </>
  );
}

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<React.SetStateAction>	-

License

MIT © vieyama