> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# March 5 2024

## Versions

* Latest SDK: [1.0.91](https://www.npmjs.com/package/@veltdev/react)
* Latest Types: [1.0.106](https://www.npmjs.com/package/@veltdev/types)

## Method to return the XPath of the DOM element where a Comment was added.

Introducing the [getElementRefByAnnotationId()](/async-collaboration/comments/customize-behavior/action-methods) method that returns the XPath of the DOM element where the specified comment was added.

```jsx theme={null}
const commentElement = client.getCommentElement();
let elementRef = commentElement.getElementRefByAnnotationId('annotationId')
```

## Method to scroll the page to a specific Comment

Added the [scrollToCommentByAnnotationId()](/async-collaboration/comments/customize-behavior/action-methods) method that scrolls the page to the specified element where the comment was added. This functionality is contingent upon the presence of the element in the DOM.

```jsx theme={null}
const commentElement = client.getCommentElement();
commentElement.scrollToCommentByAnnotationId('annotationId')
```

## Live selection style configuration

Added the ability to [customize the styling of Live Selection](/realtime-collaboration/live-selection/customize-behavior) by passing a style object to the `data-live-selection-config` attribute.

```jsx theme={null}
/**
 * live selection configuration:
 * position:
 * - horizontal: 'left'
 * border:
 * - border: false
 */
<p data-live-selection-enabled="true" 
   data-live-selection-config='{ "horizontal": "left", "border": false }' 
   contenteditable="true">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, consequatur.
</p>
```

## Event Handler for Click Events on Presence Users

Implemented the [onPresenceUserClick](/realtime-collaboration/presence/customize-behavior) event handler for click events on Presence avatar circles.

```jsx theme={null}
const onPresenceUserClickEvent = (user) => {
  console.log("Clicked presence user: ", user);
}	

<VeltPresence onPresenceUserClick={(user) => onPresenceUserClickEvent(user)} />
```

## Option to disclude current user from list of Presence Users

The [self](/realtime-collaboration/presence/customize-behavior) property can be used to include or disclude the current user from the list of Presence users. By default the current user is added.

```js theme={null}
<VeltPresence self={false} />
```

API Method:

```jsx theme={null}
const presenceElement = client.getPresenceElement();
presenceElement.enableSelf();
presenceElement.disableSelf();
```