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 to false to hide the default text comment tool.
<VeltProvider apiKey="API_KEY">
  <VeltComments textMode={false} />
</VeltProvider>
2

Install the Velt Tiptap extension

npm i @veltdev/tiptap-velt-comments
3

Import and add the extension to your Tiptap editor

import { TiptapVeltComments } from '@veltdev/tiptap-velt-comments';

const editor = new Editor({
  extensions: [
    TiptapVeltComments,
    // ... other extensions
  ],
});
4

Add a comment button to your Tiptap editor

  • Add a button that appears in the context menu of your Tiptap editor when the user selects text. Refer to the Tiptap documentation to learn more about custom menus.
  • This button will be used to add a comment to the selected text.
5

Call `triggerAddComment` to add a comment

  • Call this method to add a comment to selected text in the Tiptap editor. You can use this when the user clicks on the comment button in context menu or presses a keyboard shortcut.

  • Args:

    • editor: instance of the Tiptap editor.
    • tiptapVeltCommentConfig: optional object to set the Comment Annotation’s custom metadata.

  • Example:

    import { triggerAddComment } from '@veltdev/tiptap-velt-comments';

const tiptapVeltCommentConfig = {
  context: {
    storyId: 'story-id',
    storyName: 'story-name',
  },
};

triggerAddComment(editor, tiptapVeltCommentConfig);
6

Render Comments in Tiptap Editor

  • Get the comment data.

  • Render the comments in the tiptap editor.

    import { highlightComments } from '@veltdev/tiptap-velt-comments';

const commentAnnotations = useCommentAnnotations();

useEffect(() => {
  if (editor && commentAnnotations?.length) {
    highlightComments(editor, commentAnnotations);
  }
}, [editor, commentAnnotations]);
7

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.
velt-comment-text[comment-available="true"] {
  background-color: #ffff00;
}

Was this page helpful?