React Quill | quill.js:5824 Uncaught RangeError: Maximum call stack size exceeded

Question

in nextjs I am using react-quill so it in I have create and edit logic so on Add time I paste the html into code-block and the content is very large so after saving that data on edit time the same content I am passing into the react-quill but getting this error quill.js:5824 Uncaught RangeError: Maximum call stack size exceeded

here is my code

export const modules = {
  toolbar: [
    [{ size: [] }],
    [{ align: [] }],
    [{ color: [] }, { background: [] }],
    ['bold', 'italic', 'underline', 'strike'],
    [{ list: 'bullet' }, { list: 'ordered' }],
    ['link', 'image', 'code-block', 'blockquote'],
  ],
  clipboard: {
    matchVisual: false,
  },
};

/*
 * Quill editor formats
 * See https://quilljs.com/docs/formats/
 */
export const formats = [
  'size',
  'align',
  'color',
  'background',
  'bold',
  'italic',
  'underline',
  'strike',
  'bullet',
  'list',
  'link',
  'image',
  'code-block',
  'blockquote',
];

/**
 * Checks if a Quill editor content is empty.
 *
 * By default, the Quill editor adds HTML tags to the text for markup purpose.
 * Therefore, even when the user removes a value from the editor, the Quill still contains HTML markup.
 * This function determines whether the editor is actually empty.
 */
export const isQuillEmpty = (value: string | null) => {
  if (!value) return false;
  return (
    value.replace(/<(.|\n)*?>/g, '').trim().length === 0 &&
    !value.includes('<img')
  );
};

const ReactQuill = dynamic(() => import('react-quill'), { ssr: false });

export interface WysiwygEditorProps
  extends Omit<ReactQuillProps, 'modules' | 'formats' | 'onChange' | 'value'> {
  value: string;
  error?: string | null;
  onChange?: (content: string | null) => void;
}

const WysiwygEditor = ({
  value,
  error,
  onChange,
  ...restProps
}: WysiwygEditorProps) => {
  const [editorValue, setEditorValue] = useState<string>();

  useEffect(() => {
    if (value) {
      setEditorValue(hasNoContentOrOnlyLineBreaks(value) ? '' : value);
    }
  }, [value]);

  const debouncedOnChange = useCallback(
    useDebouncedCallback((content: string) => {
      onChange?.(hasNoContentOrOnlyLineBreaks(content) ? '' : content);
    }, 300),
    [onChange],
  );

  const handleEditorChange = (content: string) => {
    setEditorValue(content);
    debouncedOnChange(content);
  };

  return (
    <>
      <ReactQuillStyledWrapper $isError={!!error}>
        <ReactQuill
          modules={modules}
          formats={formats}
          value={editorValue}
          {...restProps}
          onChange={handleEditorChange}
        />
      </ReactQuillStyledWrapper>
      {!!error && (
        <ErrorMessageWrapper>
          <ErrorMessage>
            <CmsWarning />
            {error}
          </ErrorMessage>
        </ErrorMessageWrapper>
      )}
    </>
  );
};

export default WysiwygEditor;

this error I am getting on edit time in short the content I passed on add time so that i am getting from api on edit time and that I am passing here

as well one mmore thing is the above error I am getting only when I use code-block like on add time I add the html content into code-block </> otherwise without code-block using this is working fine whenrever I try to use this code-block with large content that time the getting error and ui gone frezze for some time and after that gone breack I tried using useRef to direct activate code-block but not worked. expected so when I add the value in code-block so on edit time as well this will work without error.