Material-UI Quill

import React from "react";
// plugin for text editor
import Quill from "quill";
// @material-ui/lab components
// @material-ui/icons components
// core components

const Components = () => {
  // quill init
  React.useEffect(() => {
    if (
      document.querySelector('[data-toggle="quill"]').className !==
      "ql-container ql-snow"
    ) {
      new Quill(document.querySelector('[data-toggle="quill"]'), {
        modules: {
          toolbar: [
            ["bold", "italic"],
            ["link", "blockquote", "code", "image"],
            [
              {
                list: "ordered",
              },
              {
                list: "bullet",
              },
            ],
          ],
        },
        placeholder: "Quill WYSIWYG",
        theme: "snow",
      });
    }
  }, []);
  return (
    <>
      <div
        data-quill-placeholder="Quill WYSIWYG"
        data-toggle="quill"
      />
    </>
  );
};

export default Components;

export default Example;