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.
comment-wc
Collaborative comment action for selection-menu. Bridges to review-surface for threaded, shareable comments.
Overview
The <comment-wc> component provides collaborative commenting inside <selection-menu>. It bridges to <review-surface> for threaded, shareable comments — creating a pin at the selection's position.
If no <review-surface> is available, the button appears dimmed with a tooltip explaining comments aren't enabled.
For private reader notes (not shared), use <note-wc> instead.
Usage
With review-surface
<review-surface editable> <selection-menu for="my-article"> <highlight-wc></highlight-wc> <note-wc></note-wc> <comment-wc></comment-wc> </selection-menu> <article id="my-article"> <p>Select text and click the comment icon to create a pin.</p> </article></review-surface>Without review-surface (disabled)
<!-- comment-wc appears dimmed when no review-surface exists --><selection-menu for="my-article"> <highlight-wc></highlight-wc> <note-wc></note-wc> <comment-wc></comment-wc></selection-menu>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 |
Events
| Event | Detail | Description |
|---|---|---|
comment-wc:created | { text, x, y } | Pin created on review-surface |
Accessibility
- Button has
aria-label="Add comment"(or "Comments not available" when disabled) - Disabled state uses
titletooltip explaining how to enable
Related
- selection-menu — Parent floating toolbar
- review-surface — Pin-based design review
- note-wc — Private reader notes