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.
<VeltProvider apiKey="API_KEY">
  <VeltComments />
</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 button to add a comment in the context menu

  • 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 `addTiptapVeltComment` 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 { addTiptapVeltComment } from '@veltdev/tiptap-velt-comments';

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

addTiptapVeltComment(editor, tiptapVeltCommentConfig);
6

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?

Text SetupInline Comments Setup