Setup
SlateJS Setup
1
Add Comment components
- Add the
Velt Comments
component to the root of your app. - This component is required to render comments in your app.
- Set the
text mode
prop tofalse
to hide the default text comment tool.
2
Install the Velt SlateJS extension
3
Import and add the extension to your SlateJS editor
4
Register Velt Component Type in SlateJS
- Register the Velt Comments Element type with your SlateJS editor’s custom types.
- This ensures proper type checking for the comments functionality.
5
Add a comment button to your SlateJS editor
- Add a button that appears in the context menu of your SlateJS editor when the user selects text.
- This button will be used to add a comment to the selected text.
6
Call `addComment` to add a comment
- Call this method to add a comment to selected text in the SlateJS editor. You can use this when the user clicks on the comment button in context menu or presses a keyboard shortcut.
- Params:
AddCommentRequest
editorId
: string, the id of the editor. Use this if you have multiple editors in your app.editor
: instance of the SlateJS editor.context
: optional object to set the Comment Annotation’s custom metadata.
7
Render Comments in SlateJS Editor
-
Get the comment data.
-
Render the comments in the SlateJS editor.
-
Params:
RenderCommentsRequest
editorId
: string, the id of the editor. Use this if you have multiple editors in your app.editor
: instance of the SlateJS editor.commentAnnotations
: CommentAnnotation[].
8
Style the commented text
- You can style the commented text by adding a CSS class to the
velt-comment-text
element. - By using the
comment-available
attribute, you can apply styles only when the comment data has loaded.