> ## Documentation Index > Fetch the complete documentation index at: https://docs.velt.dev/llms.txt > Use this file to discover all available pages before exploring further. # Tiptap Setup ## Setup #### Step 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. ```js theme={null} ``` ```html theme={null} ``` #### Step 2: Install the Velt Tiptap extension ```bash theme={null} npm i @veltdev/tiptap-velt-comments ``` #### Step 3: Configure the Tiptap editor with the Velt Comments extension ```js theme={null} import { TiptapVeltComments } from '@veltdev/tiptap-velt-comments'; const editor = new Editor({ extensions: [ TiptapVeltComments, // ... other extensions ], }); ``` ```js theme={null} import { TiptapVeltComments } from '@veltdev/tiptap-velt-comments'; const editor = new Editor({ extensions: [ TiptapVeltComments, // ... other extensions ], }); ``` #### Step 4: Add a comment button to your Tiptap editor Add a button in your existing bubble menu or create a new bubble menu that appears when users select text in the editor. ```js theme={null} import { BubbleMenu, EditorContent, useEditor } from '@tiptap/react'; import { addComment } from '@veltdev/tiptap-velt-comments'; export default function TipTapComponent() { const editor = useEditor({ // ... your editor configuration }); const addTiptapVeltComment = () => { if (editor) { addComment({ editor }); } }; return (
{/* Bubble Menu for Comments */} {editor && (
)}
); } ``` ```html theme={null}
``` ```js theme={null} import { BubbleMenu, Editor } from '@tiptap/core'; import { addComment } from '@veltdev/tiptap-velt-comments'; const editor = new Editor({ element: document.querySelector('#editor'), // ... your editor configuration }); const addTiptapVeltComment = () => { if (editor) { addComment({ editor }); } }; // Create bubble menu const bubbleMenu = new BubbleMenu({ editor, element: document.querySelector('.bubble-menu'), tippyOptions: { duration: 100 }, }); // Add click handler to comment button document.querySelector('.comment-button').addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); addTiptapVeltComment(); }); ``` Refer to the [Tiptap BubbleMenu documentation](https://tiptap.dev/docs/editor/extensions/functionality/bubble-menu) to learn more about customizing the bubble menu behavior. #### Step 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`](/api-reference/sdk/models/data-models#addcommentrequest-1). 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](/async-collaboration/comments/customize-behavior#metadata). (optional) ```js theme={null} import { addComment } from '@veltdev/tiptap-velt-comments'; const addCommentRequest = { editor, editorId: 'EDITOR_ID', context: { storyId: 'story-id', storyName: 'story-name', }, }; addComment(addCommentRequest); ``` ```js theme={null} import { addComment } from '@veltdev/tiptap-velt-comments'; const addCommentRequest = { editor, editorId: 'EDITOR_ID', context: { storyId: 'story-id', storyName: 'story-name', }, }; addComment(addCommentRequest); ``` #### Step 6: Render comments in Tiptap editor * Get the comment data from Velt SDK and render it in the Tiptap Editor. * Params: [`RenderCommentsRequest`](/api-reference/sdk/models/data-models#rendercommentsrequest-1). 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. ```js theme={null} 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]); ``` ```js theme={null} import { renderComments } from '@veltdev/tiptap-velt-comments'; const commentElement = Velt.getCommentElement(); commentElement.getAllCommentAnnotations().subscribe((annotations) => { if (editor && annotations?.length) { const renderCommentsRequest = { editor, editorId: 'EDITOR_ID', commentAnnotations: annotations, }; renderComments(renderCommentsRequest); } }); ``` #### Step 7: Persist Velt Comment Marks (optional) * By default, Velt comment marks (``) 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` ```js theme={null} const editor = new Editor({ extensions: [ TiptapVeltComments.configure({ persistVeltMarks: false }), // ... other extensions ], }); ``` #### Step 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. ```css theme={null} velt-comment-text[comment-available="true"] { background-color: #ffff00; } ``` ## Complete Example