[whatwg] [editing] Caret Position Access Methods

[Aryeh Gregor]

On Fri, Jul 29, 2011 at 11:13 AM, Dan Gisolfi <gisolfi at us.ibm.com> wrote:
> On behalf of the Open Cooperative Web Framework Project
> (http://opencoweb.org), with respect to the HTML Editing APIs specification
> (http://aryeh.name/spec/editing/editing.html), it would seem the current
> version of the spec lacks APIs for getting / setting the caret
> position.

As far as I can tell, this is covered by the Selection interface in DOM Range:

http://html5.org/specs/dom-range.html#apis-for-the-browsing-context-selection:-the-selection-interface

Anne van Kesteren, Ms2ger, and I have agreed that it probably makes
sense to move the Selection part of DOM Range into the editing spec
and the Range part into DOM Core at some point, but for now it's in a
separate specification.

> An example scenario for such a requirement (addition of such methods) would
> be the following:
> When developing an cooperative web enabled rich-text-editor, whereby
> multiple simultaneous users can co-author shared content, the editor must be
> able to allow each participant to get/set caret/cursor position in order to
> reflect the multiple positions of each active author in a cooperative web
> session.

The Selection interface and getSelection() will allow you to inspect
and modify the selection (and cursor position, which is just one side
or other of the selection) of the current user, meaning the place that
will be affected when the user types or such.  Is this all you need,
or is there something missing from it?

On Fri, Jul 29, 2011 at 2:07 PM, Dan Gisolfi <gisolfi at us.ibm.com> wrote:
> My point herein and motivation for the suggestion is that this functionality
> (get/set caret) is available in the textarea element. Using a textarea
> element you can get/set caret position via get/setSelectionRange(). These
> two methods should be implemented for a contentEditable div or the likes.
> Within a contentEditable div, there is no way to [a] tell where the caret is
> in relation to the text, such as the index; [b] direct the caret to a
> specific position within the text.

getSelection() is very similar to the selectionStart, selectionEnd,
and setSelectionRange() properties on textareas.  It's more
complicated, though, because rich text is more complicated than plain
text.  Examples:

Collapse the selection and set the cursor to the beginning of a specific node:

  getSelection().collapse(node, 0)

Select characters three through five in a Text node, that's the first
child of a specific element:

  var range = document.createRange();
  range.setStart(element.firstChild, 3);
  range.setEnd(element.firstChild, 5);
  getSelection().removeAllRanges();
  getSelection().addRange(range);

Alternatively (simpler but does not work in some browsers):

  getSelection().collapse(element.firstChild, 3);
  getSelection().extend(element.firstChild, 5);

Retrieve the first range in the current selection:

  var range;
  if (getSelection().rangeCount) {
    // There is some cursor or selection
    range = getSelection().getRangeAt(0);
    // range is now a Range object that you can look at
  } else {
    // Nothing is selected and there is no cursor position
  }

If you see something missing from the Selection APIs that would be
useful to you, please say so.  This list is fine for feedback on DOM
Range.