Problem:

When I try to add a callback function inside the modules prop of ReactQuill, the Quill editor does not render at all. There are no errors or warnings in the console. only the footer section (which I added separately) is rendered.

The div rendered in the DOM for Quill looks like this:

<div class="quill "><div></div></div>

What I’ve Tried:

I tried to write custom modules that takes a callback from the modules options, the quill editor disappeared. Then I tried to use modules that would allow me to pass callbacks like quill-image-uploader the same happened.

Packages used:

• Quill Blot Formatter : npm i quill-blot-formatter
• Quill Toggle Fullscreen Button : npm i quill-toggle-fullscreen-button

Code (generalized version):

import React, { useRef, useState } from "react";
import ReactQuill from "react-quill";
import styled from "styled-components";
import { v4 } from "uuid";

// Register custom modules
import BlotFormatter from "quill-blot-formatter";
import QuillToggleFullscreenButton from "quill-toggle-fullscreen-button";
import { Validator } from "./CustomModule"; // with options { updateCountsCallback : ({words: number, chars: number, images: number, videos: number })=> void; }

import { Quill } from "react-quill";

// Register the modules globally
Quill.register("modules/blotFormatter", BlotFormatter);
Quill.register("modules/toggleFullscreen", QuillToggleFullscreenButton);
Quill.register("modules/validator", Validator);

const MyQuillComponent = ({
  placeholder,
  readOnly,
  footerProps,
  value,
  onChange,
  height,
  modules,
}: any) => {
  const quillRef = useRef<ReactQuill | null>(null);
  const updateCounts = (newCounts: { words: number; chars: number; images: number; videos: number }) => {
    setCounts(newCounts);
  };

  const defaultModules = {
    validator: {
      updateCountsCallback: updateCounts,// <- callback here 
    }, 
    blotFormatter: {},
    toggleFullscreen: true,
  };

  return (
      <ReactQuill
        placeholder={placeholder}
        readOnly={readOnly}
        modules={modules ?? defaultModules}
        value={value}
        ref={(el) => {
          if (el) {
            quillRef.current = el;
          }
        }}
        onChange={(value) => onChange && onChange(value)}
      />
      {/* Footer Section */}
      {footerProps && (
        <div className="footer">
          <span>Words: {counts.words}</span>
          <span>Characters: {counts.chars}</span>
        </div>
      )}
  );
};

Problem:

When I try to add a callback function inside the modules prop of ReactQuill, the Quill editor does not render at all. There are no errors or warnings in the console. only the footer section (which I added separately) is rendered.

The div rendered in the DOM for Quill looks like this:

<div class="quill "><div></div></div>

What I’ve Tried:

I tried to write custom modules that takes a callback from the modules options, the quill editor disappeared. Then I tried to use modules that would allow me to pass callbacks like quill-image-uploader the same happened.

Packages used:

• Quill Blot Formatter : npm i quill-blot-formatter
• Quill Toggle Fullscreen Button : npm i quill-toggle-fullscreen-button

Code (generalized version):

import React, { useRef, useState } from "react";
import ReactQuill from "react-quill";
import styled from "styled-components";
import { v4 } from "uuid";

// Register custom modules
import BlotFormatter from "quill-blot-formatter";
import QuillToggleFullscreenButton from "quill-toggle-fullscreen-button";
import { Validator } from "./CustomModule"; // with options { updateCountsCallback : ({words: number, chars: number, images: number, videos: number })=> void; }

import { Quill } from "react-quill";

// Register the modules globally
Quill.register("modules/blotFormatter", BlotFormatter);
Quill.register("modules/toggleFullscreen", QuillToggleFullscreenButton);
Quill.register("modules/validator", Validator);

const MyQuillComponent = ({
  placeholder,
  readOnly,
  footerProps,
  value,
  onChange,
  height,
  modules,
}: any) => {
  const quillRef = useRef<ReactQuill | null>(null);
  const updateCounts = (newCounts: { words: number; chars: number; images: number; videos: number }) => {
    setCounts(newCounts);
  };

  const defaultModules = {
    validator: {
      updateCountsCallback: updateCounts,// <- callback here 
    }, 
    blotFormatter: {},
    toggleFullscreen: true,
  };

  return (
      <ReactQuill
        placeholder={placeholder}
        readOnly={readOnly}
        modules={modules ?? defaultModules}
        value={value}
        ref={(el) => {
          if (el) {
            quillRef.current = el;
          }
        }}
        onChange={(value) => onChange && onChange(value)}
      />
      {/* Footer Section */}
      {footerProps && (
        <div className="footer">
          <span>Words: {counts.words}</span>
          <span>Characters: {counts.chars}</span>
        </div>
      )}
  );
};

• javascript
• reactjs
• typescript
• quill
• react-quill

1 Answer 1

Had similar issue, just used react-quill-new, not sure if it will in your situation though. react-quill-new