JSFiddle - React, Tailwind, and code Playground

by bakhshi

HTML

<div class="main">
  <div contenteditable="true"></div>
</div>
<label>
  <input type="checkbox" class="check"> debug
</label>

CSS

div.main {
  display: inline-block;
  border: solid 1px black;
  max-width: 200px;
  height:20px;
  overflow:hidden;
}
[contenteditable]{
  white-space:nowrap;
  display:inline-block;
  min-width:50px;
}

TypeScript

var $ = document.querySelectorAll.bind(document);
var events = ['keydown', 'paste']
var span = $('[contenteditable]')[0];
let start;
let end;

events.forEach((eve)=>{
	span.addEventListener(eve, (e)=>{
    if(e.type === 'keydown'){
    	var key = e.keyCode || e.which;
      if(key === 13 || key === 10){
        e.preventDefault();
        e.returnValue = false;
      }
    }

  if($('input')[0].checked)
  	debugger;
    setTimeout(()=>{
      checkSelection();
    });
  });
});

function checkSelection(){
	if(span.innerHTML == span.innerText)
  	return;
  span.innerHTML = span.innerText;
}