How to get deleted Image url in react-quill editor

Question

I am using react-quill and I want to know how to select an image after being inserted into the editor, and how to get the deleted image url after being deleted.

Here is my Editor Component

import React,{useState} from 'react'
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

const modules = {
    toolbar:{
        container: [
            [{ 'header': [1, 2, false] }],
            ['bold', 'italic', 'underline', 'strike', 'blockquote'],
            [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
            ['link', 'image'],
            ['clean']
          ],
          

          handlers:{
            'image': async function(){
                const editor = this.quill
                
                const input = document.createElement('input');
                input.setAttribute('type', 'file');
                input.setAttribute('accept', 'image/*');
                input.click();

                input.addEventListener('change', (e) => {
                    const url = awiat uploadFile(e.target.files[0))
                    const range = editor.getSelection(true);
                    editor.insertEmbed(range.index, 'image', url; 
                    editor.setSelection(range.index + 1)
                    
                })
            }
        }
    }
    
    
  }

  const formats = [
    'header', 'font', 'size',
    'bold', 'italic', 'underline', 'strike', 'blockquote',
    'list', 'bullet', 'indent',
    'link', 'image', 'color',
  ]

function Editor() {
    const [editorData,setEditorData] = useState(" ")

    const handleChange = (value) => {
        setEditorData(value)
    }
    

     return (
        <div>
            <ReactQuill formats={formats} modules={modules} value={editorData}
                  onChange={(data)=>handleChange(data)} />

        </div>
    )
}

export default Editor

So, how can I select an image inside the editor after being inserted and get the url after being deleted from the editor?

Answer 1

This looks like a two part question -

1. Get url of image being removed by user - For this you can refer to above answer.
2. It's unclear but apparently, Perhaps you want to select already inserted image and remove it programatically -

const editor = document.getElementById("editor-container");
const image = editor.querySelectorAll('img[src=<url>]')[0];

// To remove this image from editor programatically.
image.remove()

This will select the image by url, here <url> can be obtained from the addresses state from part 1 of solution.

Note:

1. Don't worry about react flushing your manual/programatic updates. This is because as soon as img element is removed, quill calls the onChange method and updated html (i.e. without img) gets stored in react state immediately.
2. You can even use react's useRef to select quill editor instead of doing it with getElementById.

I am no expert in quill, but you can check documentation to see if out of the box solution available for things like selecting image, removing it.

Answer 2

First, you should store your uploaded image URL inside an array like:

const [addresses, setAddresses] = useState([])
addresses.push(url)

Then when you submit the form, check if these addresses exist in your editor content save them, else any of them not exists delete it.

addresses.map(async (a) => {
     if (!yourEditorValue.includes(a)) {
         /* here you can add your method according to your backend, I am 
         using strapi */
         const deletePhoto = await axios.delete(
           `${yourServerUrl}/upload/files/${id}`,
            {
              //this one is not necessary if you don't need
              headers: {
                 Authorization: `Bearer ${yourToken}`,
              },
            },
          )
      }
      return true
   })