JSFiddle - React, Tailwind, and code Playground

HTML

<div id="editDiv" contenteditable="true">
        <p>Try to drop or paste that image here.</p>
    </div>
    
    <img src="https://i7.pngguru.com/preview/134/138/533/star-golden-stars.jpg">

CSS

#editDiv {
  width: 250px;
  height: 50px;
  border: solid 1px #000;
  margin-bottom: 20px;
}


img {
  width: 250px;
}

JavaScript

window.onload = function() {
            document.getElementById("editDiv").oninput = function() {
                var thisElement = this;
                var currentElementChildren, currentElementChildrenLength;
                var elements = this.children;
                var elementsLength = elements.length;
                if (elementsLength > 0) {
                    for (i = 0; i < elementsLength; i++) {
                        if (elements[i].tagName == "IMG") {
                            thisElement.children[i].remove();
                            break;
                        } else {
                            currentElementChildren = elements[i].children;
                            currentElementChildrenLength = currentElementChildren.length;
                            if (currentElementChildrenLength > 0) {
                                for (ii = 0; ii < currentElementChildrenLength; ii++) {
                                    if (currentElementChildren[ii].tagName == "IMG") {
                                        thisElement.children[i].children[ii].remove();
                                        alert("you cannot drop images here");
                                        break;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }