Select some text and leave a comment
⚠️ This component is still in beta. It might not behave as expected, and its API might change.
Wrapping parts of your HTML with Selection Comments enables leaving comments after selecting text, just like in Notion. This component also renders all the existing comments on a page.
When users select text in an HTML element nested inside Selection Comments, a customisable “Comment” button will appear. Clicking on it will render a floating composer, allowing users to leave a comment.
You can retrieve and reply to an existing comment by clicking on the pins on the page.
This component pairs well with:
import { beta } from "@cord-sdk/react";
export const Example = () => {
return (
<beta.SelectionComments location={{ "page": "index" }} >
<p>Try selecting this text!</p>
</beta.SelectionComments>
);
};
<body>
<div id="header">
<cord-selection-comments location='{{ "page": "index" }}'>
<p>Try selecting this text</p>
</cord-selection-comments>
</div>
</body>
These can be used to customize the component. You can learn more about customization here.
| Name | Default Value |
|---|---|
--cord-selection-comments-font-size |
14px |
--cord-selection-comments-line-height |
20px |
--cord-selection-comments-letter-spacing |
normal |
--cord-selection-comments-text-color |
--cord-secondary-button-content-color##121314 |
--cord-selection-comments-background-color |
--cord-secondary-button-background-color#F6F6F6 |