6/8 회고 - react-quill + typescript + antd

1. React-quill "document is not defined" 에러

dynamic import를 해주면 해결된다.

• https://velog.io/@khy226/Next.js-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90-React-Quill%ED%85%8D%EC%8A%A4%ED%8A%B8-%EC%97%90%EB%94%94%ED%84%B0-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0
• https://www.simplenextjs.com/posts/next-rich-editor-quill

2. antd getValueFromEvent, valuePropName
   를 따로 설정하지 않고,
   react-quill을 감싸고 있는컴포넌트에 value와 onChange를 받도록 해서 해결

import dynamic from "next/dynamic";

interface Props {
    value?: string;
    onChange?: (html: string) => void;
}

const QuillNoSSRWrapper = dynamic(() => import("react-quill"), {
    ssr: false,
    loading: () => <p>Loading...</p>,
});

const Editor: React.FC<Props> = ({ value, onChange }) => {
    const modules = {
        toolbar: [
            [{ header: "1" }, { header: "2" }],
            ["bold", "italic", "underline"],
            [{ list: "ordered" }, { list: "bullet" }, { indent: "-1" }, { indent: "+1" }],
            [{ color: [] }, { background: [] }],
            ["link"],
            ["clean"],
        ],
        clipboard: {
            // toggle to add extra line breaks when pasting HTML:
            matchVisual: false,
        },
    };

    const formats = ["header", "bold", "italic", "underline", "list", "bullet", "indent", "background", "color", "link", "clean"];

    return <QuillNoSSRWrapper value={value} onChange={onChange} theme={"snow"} modules={modules} formats={formats} />;
};


// 사용

<Form.Item name="comment" initialValue="">
    <Editor />
</Form.Item>

이러면 form에서 알아서 상태관리를 해준다.

3.False positive "You are passing the delta object from the onChange event back as value"

• https://github.com/zenoamaro/react-quill/issues/498

해결 방법: react-quill 컴포넌트를 감싸고 있는 form.item 에 initValue설정