JSFiddle - React, Tailwind, and code Playground

by ajmeese7

HTML

<div contenteditable id="editable">
  <span>`</span><span class="code pseudo-ele">12</span><span>`</span>
</div>

CSS

.code {
  font-family: monospace;
  background: rgba(0, 0, 0, 0.05);
}

.pseudo-ele::after {
  content: "3";
}

JavaScript

document.getElementById('editable').addEventListener('keydown', function(e) {
  if (e.key === 'ArrowLeft') {
    // Implement logic to set cursor position
    // This is a simplified example. Actual implementation may vary.
    let range = document.createRange();
    let sel = window.getSelection();
    range.setStart(this.childNodes[1].firstChild, 1); // Position before '2'
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
    e.preventDefault(); // Prevent default arrow key behavior
  }
});