General Controls
1. Allow comments only on certain elements
Provide a list of element DOM IDs, class names, or query selectors where commenting should be allowed.
Comments will be disabled for all other elements. Note, this does not impact Popover
mode.
API Method:
2. Disable comments on certain elements
Disable certain elements from being commented on.
Add the data-velt-comment-disabled
attribute to elements where you want to disable commenting.
3. Enable or Disable the Comment Tool button
Whether the Comment Tool button is Enabled.
Default: true
When the Comment Tool is disabled, it can not be used to leave comments. Other ways to leave comments, such as highlighting text, will also be disabled.
Using API methods:
4. Ghost comments
Whether to show ghost comments on the DOM.
Default: false
Ghost comments are comments that were once linked to certain content on the DOM but that content is no longer available. If this is on, we display ghost comments in gray, close to where they were originally positioned on the DOM.
API Method:
5. Ghost comments indicator
Whether to show ghost comment labels in the comment sidebar.
Default: true
Ghost comments are always shown in the comments sidebar so that users can see the history of all comments. If this is on, we show a label on the comment in the sidebar indicating that the original content on which this comment was added is no longer available. This sets better expectations with the users.
API Method:
6. Enabling Sidebar Button on Comment Dialog
Whether the Sidebar Button on Comment Dialogs show up.
Default: true
By Default, each Comment Dialog has a button at the bottom that will open the Comments Sidebar when clicked.
To disable it, you can set it to false:
API Methods:
7. Subscribing to Sidebar Button Clicks on Comment Dialog
You can use the useCommentDialogSidebarClickHandler()
hook to add an event handler to the onSidebarButtonOnCommentDialogClick
event in a cleaner way.
The hook will automatically unsubscribe from the subscription when the component dismounts.
8. Comments iframe support
To support comments on top of an iframe, add the data-velt-iframe-container="true"
attribute in the container element of the iframe.
9. Enable Hotkeys
Whether Hotkeys are enabled or not. For now, the only hotkey supported is pressing c
to enable comment mode
.
Default: false
To enable hotkeys, set the hotkey
attribute to true
.
API Methods:
10. Add Comment support on PDF Viewers
To support comments on top of a pdf viewer, add the data-velt-pdf-viewer="true"
attribute in the container element of the pdf viewer.
11. Filter out Comments at specific Locations
Use this to filter out Comments at a specific Location for certain Users.
To reset it, you can pass an empty array:
12. Enable Comment DOM Change Detection
By default, we skip Comment
DOM Change Detection
when users are in Comment Mode
to improve performance.
Default: false
However, you can turn Comment
DOM Change Detection
back on with the changeDetectionInCommentMode
property.
This will make Comment's
reposition themselves if the DOM happens to change while in Comment Mode
.
API Methods:
13. Submit Comment on Enter Key Press
By default, pressing enter
will add a new line and pressing shift
+ enter
will submit a comment.
If you want to change this default behavior so that pressing enter
will submit a comment, you can set the enterKeyToSubmit
property to true
.
14. Enable/Disable Area Comments
Area comments allows users to draw a rectangle and attach a comment to it. Use this to enable or disable area comments.
Default: true
Using Props:
Using API Method:
15. Enable/Disable Private Comment Mode
- Private comment mode enables admin users to add comments that are only visible to other admin users.
- Use this to enable or disable private comment mode.
Default: false
Using Props:
Using API:
16. Enable/Disable deleting comments when backpsace key is pressed
- Use this to enable or disable deleting comments when backpsace key is pressed.
Default: enabled
Using API:
17. Enable Delete Reply Confirmation
You can enable a confirmation dialog before deleting a reply in comment threads. This feature helps prevent accidental deletions and improves user experience.
Using Props:
Using API:
Was this page helpful?