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 `addComment` 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.
  • Params: AddCommentRequest. It has the following properties:
    • editor: instance of the Tiptap editor.
    • editorId: Id of the tiptap editor. Use this if you have multiple tiptap editors on the same page in your app. (optional)
    • context: Add any custom metadata to the Comment Annotation. Learn more. (optional)
    import { addComment } from '@veltdev/tiptap-velt-comments';

const addCommentRequest = {
  editor,
  editorId: 'EDITOR_ID',
  context: {
    storyId: 'story-id',
    storyName: 'story-name',
  },
};

addComment(addCommentRequest);
6

Render Comments in Tiptap Editor

  • Get the comment data from Velt SDK and render it in the Tiptap Editor.
  • Params: RenderCommentsRequest. It has the following properties:
    • editor: Instance of the Tiptap editor.
    • editorId: Id of the tiptap editor. Use this if you have multiple tiptap editors on the same page in your app. (optional)
    • commentAnnotations: Array of Comment Annotation objects.
    import { renderComments } from '@veltdev/tiptap-velt-comments';

const annotations = useCommentAnnotations();

useEffect(() => {
  if (editor && annotations?.length) {
    const renderCommentsRequest = {
      editor,
      editorId: 'EDITOR_ID',
      annotations,
    };
    renderComments(renderCommentsRequest);
  }
}, [editor, annotations]);
7

Persist Velt Comment Marks (html tags)

  • By default, Velt comment marks (<velt-comment-text>) are persisted in the Tiptap editor by Velt SDK. When the editor loads and the velt sdk initializes, the marks will be automatically added to the editor by us.
  • If you plan to store the contents of the tiptap editor as raw html on your end then you should turn off this feature since you will already be storing the Velt comment marks.
  • Default: true
const editor = new Editor({
  extensions: [
    TiptapVeltComments.configure({
      persistVeltMarks: false
    }),
    // ... other extensions
  ],
});
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.
velt-comment-text[comment-available="true"] {
  background-color: #ffff00;
}