lovasoa / react-contenteditable

React component for a div with editable contents
http://npmjs.com/package/react-contenteditable
Apache License 2.0
1.64k stars 218 forks source link

Getting caret line number. #278

Open UhMarco opened 1 year ago

UhMarco commented 1 year ago

We're able to get the index of the caret by doing something like this:

function getCaretPosition(element: HTMLElement) {
  var sel = window.getSelection()!;
  if (!sel.rangeCount) return -1;

  var range = sel.getRangeAt(0);
  var preCaretRange = range.cloneRange();
  preCaretRange.selectNodeContents(element);
  preCaretRange.setEnd(range.endContainer, range.endOffset);
  var caretPosition = preCaretRange.toString().length;
  return caretPosition;
}

Is it possible to get the line number? I've tried splitting the innerHTML of the div by "<br>" and finding the length of the first string. If the string has length, I can see if the caret position is greater than or equal to the length and if this is true, the caret is either at the end of the first line or below. However, if the first line is empty and the innerHTML consist of only new lines, I haven't been able to find a way of working out the caret line number.

Does anyone know of a solution to find out the caret line number no matter the content of the div?