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