JSFiddle - React, Tailwind, and code Playground

by bowheart

HTML

<div contenteditable></div>
<button>
push me
</button>

JavaScript

const button = document.querySelector('button')
const div = document.querySelector('div')

let caretParent = div.firstChild
let caretOffset = 0

const offsetHandler = event => {
	const selection = document.getSelection()
	caretParent = selection.anchorNode
	caretOffset = selection.anchorOffset
}

div.addEventListener('keyup', offsetHandler)
div.addEventListener('mouseup', offsetHandler)

button.addEventListener('click', () => {
	console.log('stuffs:', { caretParent, caretOffset })
  if (!caretParent) return
  
  const parent = caretParent.parentNode
  const text = caretParent.nodeValue
  
  if (!text) return

  const part1 = text.slice(0, caretOffset)
  const part2 = text.slice(caretOffset)

  const text1 = document.createTextNode(part1)
  parent.replaceChild(text1, caretParent)

  const spanNode = document.createElement('span')
  spanNode.innerText = 'Inserted Stuff!'
  parent.insertBefore(spanNode, text1.nextSibling)

  const text2 = document.createTextNode(part2)
  parent.insertBefore(text2, spanNode.nextSibling)
})