Env docs with feedback applied

Author: yoen-velt

async-collaboration/comments/customize-behavior.mdx

@@ -90,7 +90,7 @@ commentElement.addCommentOnSelectedText();
 
 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 shown in the examples:
+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:**
 
@@ -100,17 +100,17 @@ To add a comment on a specific element through an API method, use the `addCommen
 ```jsx
 const element = {
   "targetElement": {
-    "elementId": "element_id",
+    "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.
   },
   "commentData": [
     {
-      "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>",
+      "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
     }
   ],
   "status": "open", // optional (default: open)
@@ -126,17 +126,17 @@ commentElement.addCommentOnElement(element);
 ```jsx
 const element = {
   "targetElement": {
-    "elementId": "element_id",
+    "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.
   },
   "commentData": [
     {
-      "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>",
+      "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
     }
   ],
   "status": "open", // optional (default: open)
@@ -148,58 +148,6 @@ 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
 - This feature is particularly useful for complex UIs where you need precise control over the placement of Comment Pins.
 - Using this you can manually set the position of Comment Annotations.
@@ -2118,33 +2066,18 @@ 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**
+**Example**
 
 <Tabs>
 <Tab title="React / Next.js">
 ```jsx
+{/* Comment Bubble with Partial Match */}
 <VeltCommentBubble
   context={{ product: "cheese" }}
   contextOptions={{ partialMatch: true }}
 />
-```
-</Tab>
-<Tab title="Other Frameworks">
-```html
-<velt-comment-bubble
-  context='{ "product": "cheese" }'
-  context-options='{ "partialMatch": true }'
->
-</velt-comment-bubble>
-```
-</Tab>
-</Tabs>
 
-**Example 2: Comment Tool with Partial Match**
-
-<Tabs>
-<Tab title="React / Next.js">
-```jsx
+{/* Comment Tool with Partial Match */}
 <VeltCommentTool
   targetElementId="element_id"
   context={{ product: "cheese" }}
@@ -2154,6 +2087,14 @@ Extra fields in the comment context don't prevent a match.
 </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" }'

async-collaboration/comments/setup/tiptap.mdx

@@ -32,7 +32,7 @@ title: "Tiptap Setup"
 #### Step 2: Install the Velt Tiptap extension
 
 ```bash
-npm i @veltdev/tiptap-velt-comments @tiptap/react @tiptap/starter-kit
+npm i @veltdev/tiptap-velt-comments
 ```
 
 #### Step 3: Import and add the extension to your Tiptap editor
@@ -94,6 +94,7 @@ Add a button in your existing bubble menu or create a new bubble menu that appea
             <BubbleMenu editor={editor} tippyOptions={{ duration: 100 }}>
               <div className="bubble-menu">
                 <button
+                  className="comment-button"
                   onClick={(e) => {
                     e.preventDefault();
                     e.stopPropagation();
@@ -117,11 +118,27 @@ Add a button in your existing bubble menu or create a new bubble menu that appea
     ```
   </Tab>
   <Tab title="Other Frameworks">
+    ```html
+    <!-- HTML Structure -->
+    <div id="editor"></div>
+    <div class="bubble-menu">
+      <button class="comment-button" title="Add comment">
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor">
+          <path
+            d="M10 17.25H4C3.30964 17.25 2.75 16.6904 2.75 16V10C2.75 5.99594 5.99594 2.75 10 2.75C14.0041 2.75 17.25 5.99594 17.25 10C17.25 14.0041 14.0041 17.25 10 17.25Z"
+            stroke-width="1.5"
+          />
+        </svg>
+      </button>
+    </div>
+    ```
+
     ```js
     import { BubbleMenu, Editor } from '@tiptap/core';
     import { addComment } from '@veltdev/tiptap-velt-comments';
 
     const editor = new Editor({
+      element: document.querySelector('#editor'),
       // ... your editor configuration
     });
 
@@ -155,7 +172,7 @@ Refer to the [Tiptap BubbleMenu documentation](https://tiptap.dev/docs/editor/ex
 #### Step 5: Call `addComment` to add a comment
 
 - Call this method to add a comment to selected text in the Tiptap editor. You can use this when the user clicks on the comment button in context menu or presses a keyboard shortcut.
-- Params: `AddCommentRequest`. It has the following properties:
+- Params: [`AddCommentRequest`](/api-reference/sdk/models/data-models#addcommentrequest). It has the following properties:
   - `editor`: instance of the Tiptap editor.
   - `editorId`: Id of the tiptap editor. Use this if you have multiple tiptap editors on the same page in your app. (optional)
   - `context`: Add any custom metadata to the Comment Annotation. [Learn more](/async-collaboration/comments/customize-behavior#metadata). (optional)
@@ -198,7 +215,7 @@ Refer to the [Tiptap BubbleMenu documentation](https://tiptap.dev/docs/editor/ex
 #### Step 6: Render Comments in Tiptap Editor
 
 - Get the comment data from Velt SDK and render it in the Tiptap Editor.
-- Params: `RenderCommentsRequest`. It has the following properties:
+- Params: [`RenderCommentsRequest`](/api-reference/sdk/models/data-models#rendercommentsrequest). It has the following properties:
   - `editor`: Instance of the Tiptap editor.
   - `editorId`: Id of the tiptap editor. Use this if you have multiple tiptap editors on the same page in your app. (optional)
   - `commentAnnotations`: Array of Comment Annotation objects.

migration/environments.mdx

@@ -37,7 +37,7 @@ Update environment variables, config files, and any hardcoded references.
 
 Verify all features work with the production API key before going live.
 
-**Regional keys (Enterprise only)**
+#### **Regional keys (Enterprise only)**
 
 Enterprise customers can create production API keys for specific regions to reduce latency and meet data residency requirements. See [Supported Regions](/security/supported-regions) for all available regions.
 
@@ -53,60 +53,3 @@ Create up to **10 API keys** for non-production environments. Use these for:
 - Individual developer environments
 - Testing and QA
 
-## Data isolation
-
-Each API key has completely separate:
-- Data (comments, recordings, etc.)
-- Feature configurations
-- Webhooks
-- Users and permissions
-- UI customization
-
-<Warning>
-Settings and configurations do not automatically sync between environments. You must manually configure each environment.
-</Warning>
-
-## Configuration management
-
-When setting up a new environment, manually replicate these settings:
-
-1. Feature configurations
-2. UI customization
-3. Webhook endpoints
-4. User permissions
-5. Integration settings
-
-**Naming convention**
-
-Use clear names to identify each environment:
-```
-production-na, production-eu
-staging-main, staging-feature-x
-dev-john, dev-sarah
-```
-
-**Configuration tracking**
-
-Document your settings per environment:
-- Enabled features
-- Webhook URLs
-- UI customizations
-- Permission rules
-
-<Tip>
-Test configuration changes in staging before applying to production.
-</Tip>
-
-## Managing API keys
-
-Create and manage keys in the [Velt Console](https://console.velt.dev/):
-
-1. Go to workspace settings
-2. Open API Keys section
-3. Click "Create New API Key"
-4. Name your environment
-5. Select environment type
-
-<Warning>
-Store API keys in environment variables or a secrets manager. Never commit them to version control.
-</Warning>