JSFiddle - React, Tailwind, and code Playground

HTML

<div contentEditable>
  <span>copy </span>
  <span class="emoji-entity"><span><span>😁</span></span></span>
  <span> me</span>
</div>

SCSS

div {
  line-height: 20px;
  border: 1px solid #ccc;
}

.emoji-entity {
  overflow: hidden;
  cursor: text;
  white-space: pre-wrap;
  display: inline-block;
  height: 20px;
  width: 20px;
  vertical-align: text-top;

  

  // &,
  // * {
  //   user-select: text;
  //   outline: 0;
  // }

  > span {
    line-height: 20px;

      > span {
      // make sure that the character takes up the entire image width and height
      // but also render it off the screen
      font-size: 20px;
      vertical-align: text-top;
      line-height: 150px;
    }
  }
}

JavaScript

document.body.onload = () => {
alert('loaded')
}
document.execCommand('enableObjectResizing', false, false);