Custom Blot in React-Quill Not Working

[satthuno999]

Issue: Custom Blot in React-Quill Not Working

I'm working on a custom Quill blot in React-Quill (Next.js project) but I can't get the custom blot to work properly. I have followed several steps to register and use the blot, but when trying to insert it, nothing happens. I'm looking for guidance to debug this issue.

Files and Code:

1. Editor.tsx

import dynamic from 'next/dynamic';

import { alpha } from '@mui/material/styles';
import Skeleton from '@mui/material/Skeleton';
import Toolbar, { formats } from './toolbar';
import ReactQuill from 'react-quill';

const BlockEmbed = ReactQuill.Quill.import('blots/block/embed');

class DividerBlot extends BlockEmbed {
  static blotName = 'divider';
  static tagName = 'hr';
}
ReactQuill.Quill.register(DividerBlot)

// Register the ButtonBlot with Quill

// Dynamically import ReactQuill without server-side rendering
const DynamicReactQuill = dynamic(async () => Promise.resolve(ReactQuill), {
  ssr: false,
  loading: () => (
    <Skeleton
      sx={{
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        height: 1,
        borderRadius: 1,
        position: 'absolute',
      }}
    />
  ),
});


// ----------------------------------------------------------------------
export default function EditorQuestion({
  id = 'question-quill',
  error,
  simple = false,
  helperText,
  sx,
  ...other
}: EditorQuestionProps) {

  function addCustom(this: any) {
    const quill = this.quill;
    const cursorPosition = quill.getSelection()?.index;

    if (cursorPosition != null) {
      quill.insertEmbed(cursorPosition, 'divider');

      // Move the cursor to after the inserted content  
      quill.setSelection(cursorPosition + 1, 'silent'); // Move to the next position after the button
    }
  }

  const modules = {
    toolbar: {
      container: `#${id}`,
      handlers: {
        addCustom: addCustom
      },
    },
    history: {
      delay: 500,
      maxStack: 100,
      userOnly: true,
    },
    syntax: true,
    clipboard: {
      matchVisual: false,
    },
  };

  return (
    <>
        <Toolbar id={id}  />

        <DynamicReactQuill
          modules={modules}
          formats={formats}
          placeholder="Write something awesome..."
          {...other}
        />
    </>
  );
}

Problem:

• The custom blot (divider) is not showing up as expected when using quill.insertEmbed.
• I suspect it might be related to how the blot is registered or imported in React-Quill.

Question:

• Is there something wrong with the way I'm registering or inserting the blot in the React-Quill editor?
• How can I get the custom divider blot to render properly?