quill js production problem in next js app

Question

I am using quill JS with Next JS, its working totally fine on local machine but on production not working like when I selecting any header tag like h3 its by default selecting h1 tag

and when I selecting any color its not selecting it

Here is my component for quill js

RichTextEditor.js

import React from 'react'
import dynamic from 'next/dynamic'

const QullEditor = dynamic(import("react-quill"), {ssr: false})

const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
    ['blockquote', 'code-block'],
    ['link'],
  
    [{ 'header': 1 }, { 'header': 2 }],               // custom button values
    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
    [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
    [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
    [{ 'direction': 'rtl' }],                         // text direction
  
    // [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
  
    [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
    [{ 'font': [] }],
    [{ 'align': [] }],
  
    ['clean'],                                         // remove formatting button
  ];
  

const RichTextEditor = ({ handler, defaultValue,placeholder }) => {
    return (
        <QullEditor modules={{toolbar:toolbarOptions}} onChange={(data) => handler(data)} theme="snow" placeholder={ placeholder ?? 'Enter Your Paragraph'} defaultValue={defaultValue} />
    )
}

export default RichTextEditor

and I am using it like this

<RichTextEditor handler={setSubText}  defaultValue={update.is ? update.data.subtext : null} />


Please Let me know How to solve this bug

quill js production problem in next js app

0 Answers0