import { VeltComments, useVeltClient } from '@veltdev/react';

import { useEffect } from 'react'

export default function YourDocument() {
  const { client } = useVeltClient();

      const commentElement = client.getCommentElement();
      commentElement.allowedElementIds["some-element"]; // 1
      commentElement.allowedElementClassNames(["class-name-1", "class-name-2"]); // 1
      commentElement.allowedElementQuerySelectors(["#id1.class-name-1"]); // 1
      commentElement.enableCommentTool(); // 3
      commentElement.disableCommentTool(); // 3
      commentElement.enableGhostComments(); // 4
      commentElement.disableGhostComments(); // 4
      commentElement.enableGhostCommentsIndicator(); // 5
      commentElement.disableGhostCommentsIndicator(); // 5
      commentElement.enableSidebarButtonOnCommentDialog() // 6
      commentElement.disableSidebarButtonOnCommentDialog() // 6
      let subscription = commentElement.onSidebarButtonOnCommentDialogClick().subscribe((event) => yourMethod(event)); // 7
      subscription?.unsubscribe() // to unsubscribe
      commentElement.enableHotkey(); // 9
      commentElement.disableHotkey(); // 9 
      client.excludeLocationIds(['location1', 'location2']); // 11
      commentElement.enableChangeDetectionInCommentMode(); // 12
      commentElement.disableChangeDetectionInCommentMode(); // 12
      commentElement.enableEnterKeyToSubmit(); // 13
      commentElement.disableEnterKeyToSubmit(); // 13


  return (
        <div data-velt-comment-disabled></div> {/* 2 */}

        {/* 8 */}
        <div data-velt-iframe-container="true">
          <iframe src="" width="500px" height="500px"></iframe>

        {/* 10 */}
        <div id="viewerContainer" data-velt-pdf-viewer="true">
            <div id="viewer" class="pdfViewer"></div>

            allowedElementIds={['some-element']} {/* 1 */}
            allowedElementClassNames={["class-name-1", "class-name-2"]} {/* 1 */}
            allowedElementQuerySelectors={["#id1.class-name-1"]} {/* 1 */}
            commentTool={false}  {/* 3 */}
            ghostComments={true} {/* 4 */}
            ghostCommentsIndicator={true} {/* 5 */}
            sidebarButtonOnCommentDialog={true} /> {/* 6 */}
            onSidebarButtonOnCommentDialogClick={(event)=>yourMethod(event)} {/* 7 */}
            hotkeys={true} {/* 9 */}
            changeDetectionInCommentMode={true} {/* 12 */}
            enterKeyToSubmit={true} {/* 13 */}


Allow comments only on certain elements

Provide a list of element DOM IDs, class names, or query selectors where commenting should be allowed.

Comments will be disabled for all other elements. Note, this does not impact Popover mode.

  allowedElementClassNames={["class-name-1", "class-name-2"]}

API Method:

const commentElement = client.getCommentElement();
commentElement.allowedElementClassNames(["class-name-1", "class-name-2"]);

Disable comments on certain elements

Disable certain elements from being commented on.

Add the data-velt-comment-disabled attribute to elements where you want to disable commenting.

<div data-velt-comment-disabled></div>

Enable or Disable the Comment Tool button

Whether the Comment Tool button is Enabled.

Default: true

When the Comment Tool is disabled, it can not be used to leave comments. Other ways to leave comments, such as highlighting text, will also be disabled.

{/* `true` to enable adding comments, `false` to disable adding comments */}
<VeltComments commentTool={false} />

Using API methods:

const commentElement = client.getCommentElement();
// to enable adding comments
// to disable adding comments

Ghost comments

Whether to show ghost comments on the DOM.

Default: false

Ghost comments are comments that were once linked to certain content on the DOM but that content is no longer available. If this is on, we display ghost comments in gray, close to where they were originally positioned on the DOM.

<VeltComments ghostComments={true} />

API Method:

const commentElement = client.getCommentElement();

Ghost comments indicator

Whether to show ghost comment labels in the comment sidebar.

Default: true

Ghost comments are always shown in the comments sidebar so that users can see the history of all comments. If this is on, we show a label on the comment in the sidebar indicating that the original content on which this comment was added is no longer available. This sets better expectations with the users.

<VeltComments ghostCommentsIndicator={true} />

API Method:

const commentElement = client.getCommentElement();

Enabling Sidebar Button on Comment Dialog

Whether the Sidebar Button on Comment Dialogs show up.

Default: true

By Default, each Comment Dialog has a button at the bottom that will open the Comments Sidebar when clicked.

To disable it, you can set it to false:

<VeltComments sidebarButtonOnCommentDialog={true} />

API Methods:

const commentElement = client.getCommentElement();

Subscribing to Sidebar Button Clicks on Comment Dialog

If you want to subscribe to clicks on the Sidebar Button at the bottom of the Comment Dialog you can do so by passing a callback to the onSidebarButtonOnCommentDialogClick event handler.

<VeltComments onSidebarButtonOnCommentDialogClick={(event)=>yourMethod(event)} />

API Methods:

const commentElement = client.getCommentElement();
let subscription = commentElement.onSidebarButtonOnCommentDialogClick().subscribe((event) => yourMethod(event));

To unsubscribe from the subscription:


Comments iframe support

To support comments on top of an iframe, add the data-velt-iframe-container="true" attribute in the container element of the iframe.

<div data-velt-iframe-container="true">
	<iframe src="" width="500px" height="500px"></iframe>

Enable Hotkeys

Whether Hotkeys are enabled or not. For now, the only hotkey supported is pressing c to enable comment mode.

Default: false

To enable hotkeys, set the hotkey attribute to true.

<VeltComments hotkey={false} />

API Methods:

const commentElement = client.getCommentElement();
// to enable hotkeys
// to disable hotkeys

Add Comment support on PDF Viewers

To support comments on top of a pdf viewer, add the data-velt-pdf-viewer="true" attribute in the container element of the pdf viewer.

<!-- Add data-velt-pdf-viewer="true" attribute at container level of your pdf viewer -->
<div id="viewerContainer" data-velt-pdf-viewer="true">
    <!-- Your pdf viewer here -->
    <div id="viewer" class="pdfViewer"></div>

Hide Comments at specific Locations

Use the client.excludeLocationIds() method to make Comments at a specific Location hidden from Users.

const locationIds = ['location1', 'location2']; // list of location ids

To reset it, you can pass an empty array:


Enable Comment DOM Change Detection

By default, we skip Comment DOM Change Detection when users are in Comment Mode to improve performance.

However, you can turn Comment DOM Change Detection back on with the changeDetectionInCommentMode property.

This will make Comment's reposition themselves if the DOM happens to change while in Comment Mode.

Default: false

<VeltComments changeDetectionInCommentMode={true} />

API Methods:

const commentElement = client.getCommentElement();
// To enable change detection when comment mode is on
// To disable change detection when comment mode is on

Submit Comment on Enter Key Press

By default, pressing enter will add a new line and pressing shift + enter will submit a comment.

If you want to change this default behavior so that pressing enter will submit a comment, you can set the enterKeyToSubmit property to true.

<VeltComments enterKeyToSubmit={true} />
// API methods
const commentElement = client.getCommentElement();
// To enable enter key to submit a comment
// To disable enter key to submit a comment