New feature ID for OpaqueRange

[stephanieyzhang]

Specification

Explainer: https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/OpaqueRange/explainer.md

WHATWG DOM Spec PR: whatwg/dom#1404
WHATWG HTML Spec PR: whatwg/html#11741

Description

OpaqueRange represents a live span of text within a form control’s value (for example, a <textarea> or text <input>), enabling range-based operations over value text. It supports geometry queries and use with the CSS Highlights API, while preserving encapsulation by exposing only value offsets (and returning null for startContainer/endContainer).

Documentation

Explainer: https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/OpaqueRange/explainer.md
Demos: coming soon (will update back with link)

Browser support

Chromium (in origin trials):

• https://chromestatus.com/feature/6297362687066112
• https://issues.chromium.org/issues/421421332
• https://groups.google.com/a/chromium.org/g/blink-dev/c/jrIXiBUbQm0

Vendor positions

• Mozilla
• WebKit

[ddbeck]

Thanks for filing this, @stephanieyzhang. Is there a Chrome Platform Status entry for this? I wasn't able to find it myself and it would help for following the progression of this feature and to figure out how to prioritize this.

Otherwise, taking some notes here for myself:

Likely compat keys (needs IDL to be sure):

• api.OpaqueRange
• api.OpaqueRange.startOffset
• api.OpaqueRange.endOffset
• api.OpaqueRange.collapsed
• api.OpaqueRange.startContainer
• api.OpaqueRange.endContainer
• api.OpaqueRange.getClientRects
• api.OpaqueRange.getBoundingClientRect
• api.HTMLTextAreaElement.createValueRange
• api.HTMLInputElement.createValueRange

[stephanieyzhang]

@ddbeck Thanks, here's the Chrome Platform Status entry: https://chromestatus.com/feature/6297362687066112

For reference, the current IDL in Chromium is:

• OpaqueRange (opaque_range.idl)
• createValueRange() on HTMLTextAreaElement (html_text_area_element.idl)
• createValueRange() on HTMLInputElement (html_input_element.idl)

[ddbeck]

I've edited the description with some new links / formatting provided by @captainbrosset via #3949. I'm also copying his description, so it's here when I start noodling one for web-features:

input.createValueRange(), where input is a textarea or an text input field, creates an OpaqueRange object, allowing you to call getClientRects() or getBoundingClientRect(), which can be used to position UI elements at the cursor, or text selection (emoji picker, @-mention UI, etc.). The OpaqueRange object can also be used with the CSS Custom Highlight API.

[ddbeck]

I've opened #3985 to mint this feature.