ContentEditable.js

function makeElmCompatible () {
  // Prevent content editable from deleting the text node that elm renders to
  document.addEventListener('keydown', event => {
    const zeroWidthSpace = '​'
    // only for content editable
    if (event.target.contentEditable !== 'true') {
      return
    }
    // prevent deletion of last character and replace with zero width space instead
    if (event.key === 'Backspace') {
      if (event.target.innerText.length == 1) {
        event.preventDefault()
        event.target.innerText = zeroWidthSpace
      }
    } else {
      if (event.target.innerText.length == 1 && event.target.innerText[0] == zeroWidthSpace) {
        event.target.innerText = ""
      }
    }
  })
}

export { makeElmCompatible }