I created a text editor in ReactJS and I use ContentEditable in my project. so my problem is that when I insert an image into my text editor I will remove it just by clicking on the delete button on the inserted image not by backspace in contentEditable

I also add contentEditable="false" attribute into my image but not work again.

mycode to insert figure section

let cc: any = document.querySelector("#texttoselect");
var newFigure = document.createElement("figure");
var newline = document.createElement("div");
newFigure.setAttribute("contentEditable", "false");
newFigure.className =
  "flex flex-col items-center w-full h-auto text-center";
newFigure.innerHTML = `<div className='relative w-auto self-center max-w-full'><Image contenteditable="false" src='${resolve.data.link}' layout='fill' objectFit='cover' alt={'test'}/></div><figcaption className='w-full p-4 text-gray-g700 bg-gray-g400 justify-center items-center' data-placeholder='عنوانی برای عکس بنویسید'>test</figcaption>`;

newline.className =
  " w-full flex py-4 px-2 text-right item-center";

newline.innerHTML = `<span id="newlinespan"></span>`;
cc.appendChild(newFigure);
cc.appendChild(newline);
const el: any = document.getElementById("newlinespan");

setTimeout(function () {
      el.focus();
    }, 2000);