contenteditable=“true“

contenteditable=“true”

const insertCustomHtml = (t, e) => {
    var i = document.getElementById('sendBox')
    i.innerText.length;
    if ("getSelection" in window) {
      var s = window.getSelection();
      if (s && 1 === s.rangeCount) {
        i.focus();
        var n = s.getRangeAt(0),
        a = new Image;
        a.src = t,
        a.setAttribute("data-key", e),
        a.setAttribute("width", 20),
        a.setAttribute("height", 20),
        a.draggable = !1,
        a.className = classes.emojiInsert,
        a.setAttribute("title", e.replace("[", "").replace("]", "")),
        n.deleteContents(),
        n.insertNode(a),
        n.collapse(!1),
        s.removeAllRanges(),
        s.addRange(n)
      }
    } else if ("selection" in document) {
      i.focus(), (n = document.selection.createRange()).pasteHTML('<img class="emoj-insert" draggable="false" data-key="' + e + '" title="' + e.replace("[", "").replace("]", "") + '" src="' + t + '">'), i.focus()
    }
    const str = converToMessage(i.innerHTML).trim()
    setInputValue(str)
  }

function converToMessage (e) {
    var t = function () {
      var t = [],
      r = document.createElement("div");
      r.innerHTML = e.replace(/\\/g, "###h###");
      for (var n = r.querySelectorAll("img"), a = r.querySelectorAll("div"), i = n.length, o = a.length; i--;) {
        var s = document.createTextNode(n[i].getAttribute("data-key"));
        n[i].parentNode.insertBefore(s, n[i])
        n[i].parentNode.removeChild(n[i])
      }
      for (; o--;) t.push(a[o].innerHTML), a[o].parentNode.removeChild(a[o]);
      var c = (t = t.reverse()).length ? "\n" + t.join("\n") : t.join("\n");
      return (r.innerText + c).replace(/###h###/g, "&#92;").replace(/<br>/g, "\n").replace(/&amp;/g, "&")
    }();
    new RegExp("(^[\\s\\n\\t\\xa0\\u3000]+)|([\\u3000\\xa0\\n\\s\\t]+$)", "g");
    return t.replace(/&nbsp;/g, " ").trim()
  }