How to styling images with image hundler function react quill editor?

See more:

ReactJS

Hello everyone. I want to build rich text editor using quill in react for write blog with math formulas, images with styles. I use

katex

for math formulas. After add

imageHundler

funtion styles didnt work and cannot write anything , katex didnt work.
Here my code.

What I have tried:

import React, { createRef, useEffect, useRef, useState } from 'react'
import ReactQuill, {Quill} from 'react-quill'
import katex from 'katex'
import 'quill/dist/quill.snow.css'
import "katex/dist/katex.css";
import "./query";
import "mathquill/build/mathquill.js";
import "mathquill/build/mathquill.css";
import mathquill4quill from "mathquill4quill";
import "mathquill4quill/mathquill4quill.css";
import ImageResize from 'quill-image-resize-module-react';
var Size = Quill.import('attributors/style/size');
Size.whitelist = ["8px", "10px", "11px","12px","13px",'14px', "15px", '16px', '18px', "24px", "36px", "48px"];
Quill.register(Size, true);
Quill.register('modules/imageResize', ImageResize);


const colors = ['#f3901d', '#ed5c57', '#00b050', '#52a7f9', '#b36ae2', '#fefd32', 
                "#de6a19", "#c82613", '#0d882a', '#0c64c0', '#763e9b', '#ffd966', 
                "#be5b17", "#861106", '#0e5c1b', '#174f86', '#5e317c', '#f1c232',
                "#005ff9", "#333333", '#747070', '#d9d9d9', '#f2f2f2', '#ffffff',  
]

const toolbar =  [
    [{ header: [1, 2, 3, 4, 5, 6, false] }],
    [{ font: [] }, { 'size': ["8px", "10px", "11px","12px","13px",'14px', "15px", '16px', '18px', "24px", "36px", "48px"] }],
    // { 'size': ['small', false, 'large', 'huge'] }
    [{ list: "ordered" }, { list: "bullet" }, { indent: "-1" }, { indent: "+1" }],
    ['bold', 'italic', 'underline', 'strike'],
    [{ color: colors }, { background: colors }],
    [{ 'size': ['small', false, 'large', 'huge'] }]
    [{ script: "sub" }, { script: "super" }],
    [{ align: [] }],
    ["link", "image", "blockquote", "code-block", "formula"],
    ["clean"],
]
window.katex = katex
export default function TextEditor() {
    const ref= useRef()
    const inputOpenImageRef = createRef()
    const [value, setValue] = useState('')
    useEffect( ()=>{
        const enableMathQuillFormulaAuthoring = mathquill4quill({ Quill, katex });
        enableMathQuillFormulaAuthoring(
            ref.current.editor,
        );
        
    },[] )

    const imageHandler = () => {
        inputOpenImageRef.current.click();
    };
    const insertImage = e=>{
        e.stopPropagation();
        e.preventDefault();
        if (e.currentTarget && e.currentTarget.files && e.currentTarget.files.length > 0){
            const file = e.currentTarget.files[0];

            let formData = new FormData();
            formData.append("file", file);
            const quill = ref.current.getEditor()
            quill.focus();

            let range = quill.getSelection();
            let position = range ? range.index : 0;
            const Image = Quill.import("formats/image")
            const url = window.URL.createObjectURL(file)
            Image.sanitize = (url) => url

            quill.insertEmbed(position, "image", url);
            quill.setSelection(position + 1);
        }
    }
    
    return (
        <>
        <ReactQuill
        value={value}
        onChange={setValue}
          ref={ref}
          className='site-container'
          modules={{
            formula: true,
            toolbar: {
                container: toolbar,
                handlers:{
                    image: imageHandler
                }
            },
            imageResize: {
                parchment: Quill.import('parchment'),
            }
          }}
          theme="snow"
        />
        <input type="file" accept="image/*" ref={inputOpenImageRef} style={{ display: "none" }} onChange={insertImage} />
        </>
      );
}