Expose text selection bounds as CSS anchors
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 675
- Forks
- 18
- Avg merge
- 5h 11m
- Merged PRs (30d)
- 1
Description
Problem
Annotation overlays like LinkTool need to position themselves relative to the current text selection. Today, every consumer has to build this measurement logic themselves — even though Svedit already knows the selection range.
Proposal
When there is an active text selection, render two zero-width <span> elements at the selection boundaries, each carrying a CSS anchor-name:
text before the selection
<span class="text-selection-start" style="anchor-name: --text-selection-start"></span>
some <strong>text</strong> that is <em>selected</em>
<span class="text-selection-end" style="anchor-name: --text-selection-end"></span>
more text after the selection
Two separate point markers (rather than one span wrapping the selected text) is the only shape that composes with the existing annotation DOM: a selection routinely spans across multiple annotation spans (bold, link, etc.), and Svedit's data model doesn't allow overlapping annotations — so a single wrapper would have to fragment itself across them or produce an invalid nesting. Point anchors slot in cleanly as siblings at the boundaries regardless of what's between them.
Benefit
Any overlay component can position itself declaratively against the selection using CSS anchor positioning — no getBoundingClientRect, no selection-change listeners, no manual math:
.link-tool {
position: absolute;
position-anchor: --text-selection-start;
top: anchor(bottom);
left: anchor(left);
}
A recurring per-consumer concern moves down into the framework, where the selection model already lives.
Questions:
- only when editable is true? or also in view mode?
@michael what do you think? Happy to turn this into a PR
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating Svedit's selection-rendering entry point and the existing annotation DOM path described in the issue. Add boundary markers for active selections without wrapping selected content, resolve whether they appear only when editable or also in view mode, and verify the generated anchors support the shown CSS positioning use case.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100