i am using nextjs and trying to import the module Quill
into my project using this code
const Quill = dynamic(import("quill") , {
ssr:false,
})
but when i log Quill
this is result {$$typeof:...,render:f...}
instead of the Quill class
and this is the vanilla-js module and i am trying to make it compatible with nextjs at start i used the react-quill module but faced problems with getting more control over the editor
so this is my solution i uninstalled this module and installed react-quill
but i imported it in a way that the editor can be used and the component be rendered
at first in the components directory i created two files
-ReactQuill
-ReactQuillWrapper
i wrote my component normally like a client side rendered react component and here is the code
import ReactQuill from "react-quill";
import { useRef , useCallback } from "react";
function ReactQuillEditor({Ref , formats , theme , modules , placeHolder}) {
return (
<ReactQuill ref={Ref} theme={theme} modules={modules} placeholder={placeHolder} ></ReactQuill>
)
}
export default ReactQuillEditor
then i exported this with a wrapper to load it dynamically in the client side
https://nextjs.org/docs/advanced-features/dynamic-import
using this code
import dynamic from "next/dynamic";
const ReactQuill = dynamic(import("./ReactQuill"), {
ssr: false,
})
export default ReactQuill
and finally in my page
import {useState , useRef, useEffect , useCallback} from "react"
import ReactQuill from '../components/ReactQuillWrapper'
import 'react-quill/dist/quill.snow.css'
export default function Blog() {
let ReactQuillRef = useCallback(editor => {
editor?.editor?.format('direction', 'rtl');
editor?.editor?.format('align', 'right');
})
const module = {toolbar:[
[{ 'header': 1 }, { 'header': 2 }], // custom button values
[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
['bold', 'italic', 'underline', 'strike' , 'link'], // toggled buttons
['blockquote', 'code-block'],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript
[{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent
[{ 'direction': 'rtl' }], // text direction
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
[{ 'align': [] }],
['image'],
['clean'] // remove formatting button
],}
return (
<>
<div></div>
<ReactQuill Ref={ReactQuillRef} modules={module} placeHolder={"هرچی دوست داری بنویس ..."} ></ReactQuill>
</>
)
}