Unread
Mentions
This is a comment
', } ] }; const addCommentAnnotationRequest = { annotation: commentAnnotation }; // Hook const { addCommentAnnotation } = useAddCommentAnnotation(); const addCommentAnnotationEventData = await addCommentAnnotation(addCommentAnnotationRequest); // API Method const commentElement = client.getCommentElement(); const addCommentAnnotationEventData = await commentElement.addCommentAnnotation(addCommentAnnotationRequest); ```This is a comment
', } ] }; const addCommentAnnotationRequest = { annotation: commentAnnotation }; const commentElement = Velt.getCommentElement(); const addCommentAnnotationEventData = await commentElement.addCommentAnnotation(addCommentAnnotationRequest); ```This is a comment
', }; const addCommentRequest = { annotationId: 'ANNOTATION_ID', comment: comment }; // Hook const { addComment } = useAddComment(); const addCommentEventData = await addComment(addCommentRequest); // API Method const commentElement = client.getCommentElement(); const addCommentEventData = await commentElement.addComment(addCommentRequest); ```This is a comment
', }; const addCommentRequest = { annotationId: 'ANNOTATION_ID', comment: comment }; const commentElement = Velt.getCommentElement(); const addCommentEventData = await commentElement.addComment(addCommentRequest); ```This is a comment
', }; const updateCommentRequest = { annotationId: 'ANNOTATION_ID', comment: comment }; // Hook const { updateComment } = useUpdateComment(); const updateCommentEvent = await updateComment(updateCommentRequest); // API Method const commentElement = client.getCommentElement(); const updateCommentEvent = await commentElement.updateComment(updateCommentRequest); ```This is a comment
', }; const updateCommentRequest = { annotationId: 'ANNOTATION_ID', comment: comment }; const commentElement = Velt.getCommentElement(); const updateCommentEvent = await commentElement.updateComment(updateCommentRequest); ```
Comment Mode is turned on: {commentModeState}
)
}
```
{/* scrollable content */}
Bar Chart With Comments
{/* Keep the parent div as relative, as comment pin will be placed with absolute position */}
{/* Set "data-velt-manual-comment-container" to true, so that comment pin will know which div to consider while positioning */}
Bar Chart With Comments
{/* Keep the parent div as relative, as comment pin will be placed with absolute position */}
{/* Set "data-velt-manual-comment-container" to true, so that comment pin will know which div to consider while positioning */}
Your Article
Your Article
Your Article
Your Article
{/* your custom button (optional) */}
//This element is scrollable
//This element contains the content that you want to be commented.
//This element is scrollable
```
//This element contains the content that you want to be commented.
//This element is scrollable
//This element contains the content that you want to be commented.
//This element is scrollable
```
//This element contains the content that you want to be commented.
{
commentAnnotations.map((commentAnnotation) => {
return (
)
```
{
commentAnnotations.map((commentAnnotation) => {
return (
)
}
```
```html HTML
```
{commentAnnotations.map((x,i) => )}
)
```
{commentAnnotations.map((x,i) => )}
)
}
```
```js Other Frameworks
const commentElement = client.getCommentElement();
let subscription = commentElement.getAllCommentAnnotations().subscribe((comments) => {
// If you are using pure html, inject Your Article
Your Article
Your Article
Your Article
Your Article
Your Article
{/* some component that holds your recording components */}
{/* some component that holds your video player */}
)
}
```
```html HTML
User: {user?.userId}
;
}
```
```jsx YourDocument.js
import { useSetDocumentId, VeltCommentTool, VeltPresence } from '@veltdev/react';
import { useEffect, useState } from 'react';
export default function YourDocument() {
useSetDocumentId('my-document-id')
return (
// Your auth component template
);
}
```
```js React / Next.js
//Warning: Make sure this is a child component to VeltProvider
//and not within the same file where VeltProvider is placed.
// 1) Get the Velt Client
import { useVeltClient } from '@veltdev/react';
import { useEffect } from 'react';
export default function YourAuthComponent() {
const userService = () => {
return {
uid:"123",
organizationId: "organizationId123", // this is the organization id the user belongs to. You should always use this.
displayName:"Bob",
email:"bob@gmail.com",
photoURL:'https://i.pravatar.cc/300',
color: colorCode, // Use valid Hex code value. Used in the background color of the user's avatar.
textColor: textColor // Use valid Hex code value. Used in the text color of the user's intial when photoUrl is not present.
}
}
let yourAuthenticatedUser = userService()
const { client } = useVeltClient();
// 2) Create a useEffect hook
useEffect(() => {
const initVelt = async () => {
if (client && yourAuthenticatedUser) {
// 3) Fetch the relevant user info from yourAuthenticatedUser
const { uid, displayName, email, photoURL, organizationId, colorCode } = yourAuthenticatedUser;
// Create the Velt user object
const user = {
userId: uid,
organizationId: organizationId, // this is the organization id the user belongs to. You should always use this.
name: displayName,
email: email,
photoUrl: photoURL,
color: colorCode, // Use valid Hex code value. Used in the background color of the user's avatar.
textColor: textColor, // Use valid Hex code value. Used in the text color of the user's intial when photoUrl is not present.
};
//4) Pass the user object to the SDK
await client.identify(user)
}
}
initVelt().catch(console.error)
}, [client, yourAuthenticatedUser]);
return (
// Your auth component template
);
}
```
```html HTML
//your document template - add Velt Components here
);
}
```
```js React / Next.js
// 1) Create a component that will represent your document
//Warning: Make sure this is a child component to VeltProvider
//and not within the same file where VeltProvider is placed.
// 2) Get the Velt client
import { useVeltClient } from '@veltdev/react';
import { useEffect, useState } from 'react';
export default function YourDocument() {
const { client } = useVeltClient();
// 3) Create a useEffect hook
useEffect(() => {
if (client) {
// 4) Set a document ID
client.setDocument('unique-document-id', {documentName: 'Document Name'});
}
}, [client]);
return (
//your document template - add Velt Components here
);
}
```
```html HTML
// to add comments (ideally add to root component ex: AppComponent)
```
```html Vue.js
... your html
...
...
...
```
## Unset a Single Document
* Use this to unsubscribe from the root Document
* Once you unset the document, you will no longer receive realtime updates from the document.
* For some parts of your app, you may not need Velt. In such cases, you can unset the document.
// any content
// any content
// any content
// any content
// any content
// any content
// any content
// any content
// any content
// any content
// any content
// any content
// any content
// any content
// any content
// any content
// any content
// any content
// any content
// any content
|
...
```
...
```
...
```
...
```
Your HTML Template
);
}
```
Counter: {counter}
);
}
```
Controlled by Single Editor Mode
);
// Exclude elements from sync access
return (
);
```
Controlled by Single Editor Mode
```
Status: {editorAccessTimer?.state}
Time Left: {editorAccessTimer?.durationLeft}s
);
// Using API
const liveStateSyncElement = useLiveStateSyncUtils();
let subscription = liveStateSyncElement.getEditorAccessTimer().subscribe((editorAccessTimer) => {
console.log('Editor Access Timer:', editorAccessTimer);
});
```
...
)
}
```
## Added option to use a specific version of the Velt React SDK.
You can now use a [specific version of the Velt React SDK](https://docs.velt.dev/get-started/setup/advanced).
To do so, in your `VeltProvider` component, set the `config` props object to `{ version: '1.0.XYZ' }`.
Example:
```jsx
Your Document Template
)
}
```
Your Document Template
);
}
```
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, consequatur.
``` ## 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 const onPresenceUserClickEvent = (user) => { console.log("Clicked presence user: ", user); }
Counter: {counter}
);
}
```
## Option to [Enable DOM Change Detection in Comment Mode](https://docs.velt.dev/async-collaboration/comments/customize-behavior/general-controls)
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`
```jsx
Custom HTML
Custom HTML
...
...
...
```
## Other updates
### New Features
* \[**Comments**]: Added support for Status Filter in Comments Sidebar's main filter menu:
* By default, the status filter is disabled in the main filter menu.
* Currently, it doesn't support grouping.
* Added Wireframe support for this. [Learn more](/ui-customization/features/async/comments/comments-sidebar/subcomponents/filter/subcomponents/status).
* If you were using wireframes before, you will add this to your wireframes.
User: {user?.userId}
;
}
```
This annotation is currently open.
This is a popular annotation!
This is a new open annotation without any comments yet.
This annotation is currently open.
This is a popular annotation!
This is a new open annotation without any comments yet.
Close Sidebar
Toggle Comment Pins
Unread
Mentions
Unread
Mentions
Custom HTML
{/* Increase gap between components */}
{/* Header */}
{/* All Comments */}
Cursor Users: {cursorUsers.length}
{
cursorUsers.map( x =>
)
```
{x.name}
)
}
Cursor Users: {cursorUsers.length}
{
cursorUsers.map( x =>
);
}
```
```js React / Next.js
import { useVeltClient } from '@veltdev/react';
import { useEffect } from 'react';
export default function App() {
const { client } = useVeltClient();
useEffect(() => {
if (client) {
const cursorElement = client.getCursorElement();
let subscription = cursorElement.getOnlineUsersOnCurrentDocument().subscribe((_cursorUsers) => {
// Do something with Cursor Users list
});
//To unsubscribe from the subscription:
subscription?.unsubscribe()
}
}, [client]);
return (
<>
);
}
```
```html HTML
{x.name}
)
}
| Part Name | What does it do? | | ----------------------- | ------------------------------------------------------------------------------------------------------- | | container | Targets the root cursor container. | | huddle-avatar-container | Targets the cursor avatar specific to huddle mode. You can learn more about this in the Huddle Feature. | | avatar-container | Targets the avatar container specific to avatar mode. | | label-container | Targets the label container. | | label | Targets the label text. |
Presence Users: {presenceUsers.length}
{
presenceUsers.map( x =>
)
```
The hook will automatically unsubscribe from the subscription when the component dismounts.
{x.name}
)
}
Presence Users: {presenceUsers.length}
{
presenceUsers.map( x =>
);
}
```
```js React / Next.js
import { useVeltClient } from '@veltdev/react';
import {useEffect} from 'react';
export default function App() {
const { client } = useVeltClient();
useEffect(() => {
if (client) {
const presenceElement = client.getPresenceElement();
let subscription = presenceElement.getOnlineUsersOnCurrentDocument().subscribe((users) => {
// Take users list data and render your own component
});
// To unsubscribe from the subscription:
subscription?.unsubscribe()
}
}, [client]);
return (
{x.name}
)
}
// example of rendering your own component
// presenceUsers.map((presenceUser) => { return (
);
}
```
```html HTML
{/* Add custom UI code here */}
) })
Custom HTML