npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@jhbrown94/selectionrange

v0.1.1

Published

Determine selection range inside of ShadowRoots with uniform API across browsers

Downloads

35

Readme

selectionrange

The problem

Browsers are inconsistent when a Selection includes content that is inside a ShadowRoot

  • Chrome implements getSelection on ShadowRoot which returns the real selection range inside the ShadowRoot.

  • Firefox doesn't implement getSelection on ShadowRoot, but Document.getSelection sees into a ShadowRoot as if it wasn't hiding anything.

  • Safari's Document.getSelection gives a boundary point which is just before the ShadowRoot.

This package aspires to paper over these differences with three functions.

The API

getSelectionRange

getSelectionRange(root) gets the current selection if it is under the root. For root, it takes either a ShadowRoot or a Document. If there is no selection in the given root, it returns null. Otherwise, it returns an object with this shape:

{
    anchorNode: Node,
    anchorOffset: Int,
    focusNode: Node,
    focusOffset: Int
} 

The fields of this object follow the fields of the same name in a Selection.

Note that this is not a formal Range and will not update dynamically.

On Chrome and Firefox this should be about as fast as regular getSelection. On Safari it could be considerably slower -- to determine position in text nodes, it often has to compute the entire string represented by the selection region, and also sometimes has to split text nodes one letter at a time (idea again from shadow-selection-polyfill). The cost is at least O(N) and could be O(N^2) in text node length -- I don't actually know how (in)efficient text node splitting is under the hood in Safari.

setSelectionRange

setSelectionRange(root, range) sets the current selection under the root. It takes either a Document or a ShadowRoot as root. For range it takes either null to indicate no selection range, or an object of the same shape as shown above.

isSquelchingEvents()

On Safari, getSelectionRange generates a shower of selectionchange events and triggers mutation observers, even though by the time their handlers are run the selection and DOM are restored to original state. isSquelchingEvents returns true during a period that is intended to cover all of these byproduct events. Clients that don't want to respond to all of these can check isSquelchingEvents in their event handlers and exit early when it is true. There is a theoretical possibility that some non-byproduct events could get hidden behind this squelch, please let me know if you run into this.

Automated testing

There is no automated testing of the package yet, so there are likely many quirky cases as yet undiscovered.

Request for feedback

This package is still in alpha. I'd love any and all reports of field experiences with it. Finding out that there are actual users will be the best motivation for me to improve it :)

Credits

This package is very, very heavily informed by shadow-selection-polyfill. Where that package seeks principally to determine selected text, this one attempts to more precisely identify selected DOM elements so that it can be safely used with contenteditable elements.