Phenomenon
When selecting text that spans across multiple HTML elements (e.g., <p>, <div>, <span>) in a contenteditable region, the selection range may not accurately reflect the visual selection. The Selection and Range APIs may return incorrect boundaries.
Reproduction example
- Create a contenteditable div with nested elements:
<div contenteditable> <p>First paragraph</p> <p>Second paragraph</p> </div> - Select text that spans from the middle of the first paragraph to the middle of the second paragraph.
- Use JavaScript to inspect the selection range.
- Observe the reported start and end positions.
Observed behavior
- In Edge on Windows, the selection range boundaries may not match the visual selection.
- The
Range.startOffsetandRange.endOffsetmay be incorrect. - Selecting across element boundaries can produce unexpected results.
Expected behavior
- The selection range should accurately reflect the visual selection.
- Boundaries should be correctly reported even when spanning multiple elements.
- The
SelectionandRangeAPIs should provide consistent, reliable data.