0

Everything was fine until I imported Quill.import('ui/icons') to override the default icons of the library. It returns "document is not defined". Is there any way to fix this?

import { Stack } from '@mui/material'
import * as React from 'react'
import { useMemo, useState } from 'react'
import 'react-quill/dist/quill.snow.css'
import dynamic from 'next/dynamic'
import { RedoIcon } from 'libs/icons'
import { Quill } from 'react-quill'

interface Props {}

const modules = {
  toolbar: [
    ['undo', 'redo'],
    ['bold', 'italic', 'underline', 'strike'], // toggled buttons
    ['blockquote', 'code-block'],
}

const CustomQuill = () => {
  const [value, setValue] = useState('')
  const ReactQuill = useMemo(() => dynamic(() => import('react-quill'), { ssr: false }), [])

  const icons = Quill.import('ui/icons')
  icons['undo'] = <RedoIcon />

  return (
    <Stack>
      {typeof window !== 'undefined' && (
        <ReactQuill value={value} onChange={setValue} modules={modules} />
      )}
    </Stack>
  )
}

export default CustomQuill

0 Answers0