Cursor offset

by imys

HTML

<textarea id="textarea" class="editor"></textarea>
<div id="editor" class="editor" contentEditable></div>

CSS

.editor {
  width: 400px;
  height: 200px;
  padding: 6px;
  line-height: 1.6;
  background: #fff;
  border: 1px solid #ddd
}

Babel + JSX

const $textarea = document.getElementById('textarea')
const $editor = document.getElementById('editor')

const getRange = () =>  document.getSelection().getRangeAt(0)

const getRect = ($node) => {
	const range = getRange()
	const cloneRange = range.cloneRange()
  let rect = null
  if(range.endOffset - 1 > 0) {
  	console.log(222)
  	cloneRange.setStart(range.endContainer, range.endOffset - 1)
    cloneRange.setEnd(range.endContainer, range.endOffset)
  } else {
  	console.log(111)
  	cloneRange.selectNodeContents($node)
  }
  rect = cloneRange.getBoundingClientRect() 
  cloneRange.detach()
  return rect
}

$textarea.addEventListener('input', e => {
	if($textarea.value.endsWith('@')) {
  	const rect = getRect($textarea)
  	console.log(rect)
  }
})

$editor.addEventListener('input', e => {
	if($editor.innerHTML.endsWith('@')) {
  	const rect = getRect($editor)
  	console.log(rect)
  }
})