michael / michael/svedit

Expose text selection bounds as CSS anchors

Open
#299 4 comments 0 reactions 0 assignees View on GitHub

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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.