Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
note-wc
Private note action for selection-menu. One-click highlight + annotate with localStorage persistence.
Overview
The <note-wc> component provides a one-click "highlight + annotate" action inside <selection-menu>. It creates a highlight on the selected text (if not already highlighted) and immediately opens a private note panel.
Notes are the reader's private marginalia — stored in localStorage, not shared with others. For collaborative comments, use <comment-wc> with <review-surface>.
Usage
Place inside a <selection-menu> alongside other action components.
Inside selection-menu
<selection-menu for="my-article"> <highlight-wc></highlight-wc> <note-wc></note-wc></selection-menu> <article id="my-article"> <p>Select text, click the note icon to highlight and add a note.</p></article>How It Works
- User selects text and clicks the sticky-note icon in the toolbar.
- If the selection isn't already highlighted,
note-wccreates a yellow highlight. - The highlights-init note panel opens with a textarea for the private note.
- Notes persist in localStorage alongside the highlight data.
- Notes appear as margin annotations ("* You highlighted") beside the text.
Annotation Layers
| Component | Actor | Persistence | Purpose |
|---|---|---|---|
<note-wc> | Reader | localStorage | Private marginalia |
<comment-wc> | Collaborator | Backend (via review-surface) | Shared threaded comments |
<foot-note> | Author | Static HTML | Structural footnotes |
Accessibility
- Button has
aria-label="Add private note" - Note panel has
role="dialog" - Ctrl+Enter saves the note, Escape cancels
Related
- selection-menu — Parent floating toolbar
- highlight-wc — Color highlighting
- comment-wc — Collaborative comments
- data-highlights — Underlying highlighting system