Updated customize-behavior for comments

Author: yoen-velt

async-collaboration/comments/customize-behavior.mdx

@@ -88,30 +88,29 @@ 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:
+To add a comment on a specific element through an API method, use the `addCommentOnElement()` method and pass in an object with the schema shown in the examples:
+
+**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",
     "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.
   },
   "commentData": [
     {
-      "commentText": "This is awesome! Well done.", // To set plain text content
-      "commentHtml": "This <span style=\"color: green; background-color: aliceblue; display: inline-block; padding: 4px; border-radius: 4px;\">is test</span> comment.", // To set HTML formatted content
-      "replaceContentText": "This is new comment", // provide this replaceContentText to replace current text with
-      "replaceContentHtml": "<span>This is <b>new</b> comment.</span>", // If replacement text contains html formatted text, then provide it here
+      "commentText": "This is awesome! Well done.",
+      "commentHtml": "This <span style=\"color: green; background-color: aliceblue; display: inline-block; padding: 4px; border-radius: 4px;\">is test</span> comment.",
+      "replaceContentText": "This is new comment",
+      "replaceContentHtml": "<span>This is <b>new</b> comment.</span>",
     }
   ],
   "status": "open", // optional (default: open)
@@ -123,21 +122,21 @@ 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)
+    "elementId": "element_id",
     "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.
   },
   "commentData": [
     {
-      "commentText": "This is awesome! Well done.", // To set plain text content
-      "commentHtml": "This <span style=\"color: green; background-color: aliceblue; display: inline-block; padding: 4px; border-radius: 4px;\">is test</span> comment.", // To set HTML formatted content
-      "replaceContentText": "This is new comment", // provide this replaceContentText to replace current text with
-      "replaceContentHtml": "<span>This is <b>new</b> comment.</span>", // If replacement text contains html formatted text, then provide it here
+      "commentText": "This is awesome! Well done.",
+      "commentHtml": "This <span style=\"color: green; background-color: aliceblue; display: inline-block; padding: 4px; border-radius: 4px;\">is test</span> comment.",
+      "replaceContentText": "This is new comment",
+      "replaceContentHtml": "<span>This is <b>new</b> comment.</span>",
     }
   ],
   "status": "open", // optional (default: open)
@@ -147,8 +146,58 @@ const commentElement = Velt.getCommentElement();
 commentElement.addCommentOnElement(element);
 ```
 </Tab>
+</Tabs>
 
+**Example 2: Add comment with context metadata:**
+
+<Tabs>
+<Tab title="React / Next.js">
 
+```jsx
+const element = {
+  "targetElement": {
+    "elementId": "element_id",
+  },
+  "commentData": [
+    {
+      "commentText": "This is awesome! Well done.",
+    }
+  ],
+  "context": {
+    "product": "cheese",
+    "location": "zurich"
+  },
+  "status": "open",
+}
+
+const commentElement = client.getCommentElement();
+commentElement.addCommentOnElement(element);
+```
+</Tab>
+
+<Tab title="Other Frameworks">
+
+```jsx
+const element = {
+  "targetElement": {
+    "elementId": "element_id",
+  },
+  "commentData": [
+    {
+      "commentText": "This is awesome! Well done.",
+    }
+  ],
+  "context": {
+    "product": "cheese",
+    "location": "zurich"
+  },
+  "status": "open",
+}
+
+const commentElement = Velt.getCommentElement();
+commentElement.addCommentOnElement(element);
+```
+</Tab>
 </Tabs>
 
 #### addManualComment
@@ -2069,6 +2118,8 @@ Extra fields in the comment context don't prevent a match.
 { product: "cheese", category: "dairy"} ❌ No match (missing field)
 ```
 
+**Example 1: Comment Bubble with Partial Match**
+
 <Tabs>
 <Tab title="React / Next.js">
 ```jsx
@@ -2089,6 +2140,30 @@ Extra fields in the comment context don't prevent a match.
 </Tab>
 </Tabs>
 
+**Example 2: Comment Tool with Partial Match**
+
+<Tabs>
+<Tab title="React / Next.js">
+```jsx
+<VeltCommentTool
+  targetElementId="element_id"
+  context={{ product: "cheese" }}
+  contextOptions={{ partialMatch: true }}
+/>
+```
+</Tab>
+<Tab title="Other Frameworks">
+```html
+<velt-comment-tool
+  target-element-id="element_id"
+  context='{ "product": "cheese" }'
+  context-options='{ "partialMatch": true }'
+>
+</velt-comment-tool>
+```
+</Tab>
+</Tabs>
+
 ---
 
 ### Grouping Matched Comment Annotations