Merge pull request #70 from velt-js/env-docs

Env Docs + TipTap docs Updates

Author: yoen-velt

async-collaboration/comments/customize-behavior.mdx

@@ -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.
@@ -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)
@@ -147,8 +146,6 @@ const commentElement = Velt.getCommentElement();
 commentElement.addCommentOnElement(element);
 ```
 </Tab>
-
-
 </Tabs>
 
 #### addManualComment
@@ -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>