Skip to content

Env Docs + TipTap docs Updates #70

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Env Docs + TipTap docs Updates #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
57b9522
Added Environment docs
yoen-velt Oct 28, 2025
cf6ccf0
Updated tiptap
yoen-velt Oct 28, 2025
a1a4b60
Updated popover comments
yoen-velt Oct 29, 2025
fdffc7e
Updated Env docs
yoen-velt Nov 6, 2025
13a6995
Tiptap + Popover comments cleanup
yoen-velt Nov 6, 2025
56a00b5
Updated customize-behavior for comments
yoen-velt Nov 6, 2025
14275ba
Env docs with feedback applied
yoen-velt Nov 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 23 additions & 7 deletions async-collaboration/comments/customize-behavior.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,20 +88,19 @@ commentElement.addCommentOnSelectedText();

![](/images/addCommentOnElement.png)


Adds a Comment on a specific element by ID.

To add a comment on a specific element through an API method, use the `addCommentOnElement()` method and pass in an object with the schema shows in the example:

**Example 1: Add comment with targetElementId only:**

<Tabs>
<Tab title="React / Next.js">


```jsx

const element = {
"targetElement": {
"elementId": "element_id", // optional (pass elementId if you want to add comment on a specific element)
"elementId": "element_id", // optional (pass elementId if you want to add comment on a specific element)
"targetText": "target_text", // optional (pass targetText if you want to add comment on a specific text)
"occurrence": 1, // optional (default: 1) This is relevant for text comment. By default, we will attach comment to the first occurence of the target text in your document. You can change this to attach your comment on a more specific text.
"selectAllContent": true, // Set to `true` if you want to select all the text content of the target element.
Expand All @@ -123,8 +122,8 @@ commentElement.addCommentOnElement(element);
</Tab>

<Tab title="Other Frameworks">
```jsx

```jsx
const element = {
"targetElement": {
"elementId": "element_id", // optional (pass elementId if you want to add comment on a specific element)
Expand All @@ -147,8 +146,6 @@ const commentElement = Velt.getCommentElement();
commentElement.addCommentOnElement(element);
```
</Tab>


</Tabs>

#### addManualComment
Expand Down Expand Up @@ -2069,22 +2066,41 @@ Extra fields in the comment context don't prevent a match.
{ product: "cheese", category: "dairy"} ❌ No match (missing field)
```

**Example**

<Tabs>
<Tab title="React / Next.js">
```jsx
{/* Comment Bubble with Partial Match */}
<VeltCommentBubble
context={{ product: "cheese" }}
contextOptions={{ partialMatch: true }}
/>

{/* Comment Tool with Partial Match */}
<VeltCommentTool
targetElementId="element_id"
context={{ product: "cheese" }}
contextOptions={{ partialMatch: true }}
/>
```
</Tab>
<Tab title="Other Frameworks">
```html
<!-- Comment Bubble with Partial Match -->
<velt-comment-bubble
context='{ "product": "cheese" }'
context-options='{ "partialMatch": true }'
>
</velt-comment-bubble>

<!-- Comment Tool with Partial Match -->
<velt-comment-tool
target-element-id="element_id"
context='{ "product": "cheese" }'
context-options='{ "partialMatch": true }'
>
</velt-comment-tool>
```
</Tab>
</Tabs>
Expand Down
Loading