Adding Quill Module into ReactQuill in React App TS

Ruslan Novikov — Mon, 06 Nov 2023 16:51:43 +0000

In this example, I'm importing the htmlEditButton module into Quill. There are example of my component

import React, { Dispatch, FC, SetStateAction } from "react";
import htmlEditButton from "quill-html-edit-button";
import ReactQuill, { Quill } from "react-quill";
import "react-quill/dist/quill.snow.css";
import style from "./QuillEditor.module.scss";

const QuillEditor: FC<{
  richText?: string;
  setRichText: Dispatch<SetStateAction<string>>;
}> = ({ setRichText, richText }) => {
  Quill.register({
    "modules/htmlEditButton": htmlEditButton,
  });

  return (
    <ReactQuill
      className={style.wrapper}
      modules={{
        toolbar: [
          ["bold", "italic"],
          [{ color: [] }],
          [{ list: "ordered" }, { list: "bullet" }],
          [{ indent: "-1" }, { indent: "+1" }, { align: [] }],
          ["link"],
        ],
        htmlEditButton: { debug: false, syntax: false },
      }}
      theme="snow"
      onChange={setRichText}
      value={richText}
    />
  );
};

export default QuillEditor;

DEV Community: Ruslan Novikov

Adding Quill Module into ReactQuill in React App TS