Как отправить изображение через редактор ReactQuill?

Question

[Вадим Петрович]

При при вводе даже первой буквы, пропадает сам редактор и как слествие не могу проверить работу кода на отправку картинки на бэк. В чем может быть проблема?

import  { useRef, FC} from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import axios from 'axios';

interface QuilEditorProps {
    description : string;
    setDescription : (text : string) => void
}

export const QuilEditor : FC <QuilEditorProps> = ({description, setDescription})=> {
    const quillRef = useRef<ReactQuill | null>(null);


    const handleImageUpload = async () => {
        const input = document.createElement('input');
        input.setAttribute('type', 'file');
        input.setAttribute('accept', 'image/*');
        input.click();
    
        input.onchange = async () => {
            if (input.files && input.files[0]) {
                const file = input.files[0];
                const formData = new FormData();
                formData.append('image', file);
    
                try {
                    const response = await axios.post('YOUR_SERVER_ENDPOINT', formData, {
                        headers: {
                            'Content-Type': 'multipart/form-data',
                        }
                    });
                    const result = response.data;
    
                    if (quillRef.current) {
                        const range = quillRef.current.getEditor().getSelection(true);
                        quillRef.current.getEditor().insertEmbed(range.index, 'image', result.url);
                    }
                } catch (error) {
                    console.error("Error uploading image:", error);
                    alert("Ошибка загрузки изображения. Пожалуйста, попробуйте еще раз.");
                }
            }
        };
    };
    
    
    
    const toolbarOptions = [
        [{ header: [1, 2, false] }],
        ['bold', 'italic', 'underline'],
        ['image', 'code-block']
    ];


    return (
        <ReactQuill
    ref={quillRef}
    value={description}
    onChange={setDescription}
    modules={{
        toolbar: {
            container: toolbarOptions,
            handlers: {
                image: handleImageUpload
            }
        }
    }}
/>
    )
}

Comments

[chemdev]

Потому что реакт отрисовывает элементы сам, зачем ты это через window api делаешь?

Answer 1

[Freem27]

нужно завернуть модули в useMemo

const modules = useMemo(() => ({
        toolbar: {
            container: toolbarOptions,
            handlers: {
                image: handleImageUpload
            }
        }
    }), [])

 return (
        <ReactQuill
    ref={quillRef}
    value={description}
    onChange={setDescription}
    modules={modules}
/>)