​
Versions

  • Latest SDK: 1.0.83
  • Latest Types: 1.0.100

​
Location Support in System Comments

Users can now specify location when adding a new comment using System Comments.

{
  "data": {
    "apiKey": "YOUR_API_KEY",
    "authToken": "YOUR_AUTH_TOKEN",
    "documentId": "snippyly-tinymce-13-oct",

		// You can pass location object to set comment to any specific location
		"location": {
			"locationName": "YOUR_LOCATION",
			// You can optionally pass version in location object
			// to show comment on specific version only
			// Note: if you set version then id and name fields are mandatory
			"version": {
				"id": "v1",
				"name": "Version 1"
			}
		},

    "targetElement": {
      "elementId": "systemCommentTest",
      "targetText": "we want our custom elements",
      "occurrence": 1
    },
    "commentData": [
      {
        "commentText": "Replace: dolor sit amet consectetur adipisicing elit with this is test comment",
        "replaceContentHtml": "this is <strong style='color: blue'>bold text</strong> test comment",
        "from": {
          "email": "test@velt.dev",
          "name": "Test User"
        }
      }
    ]
  }
}

​
Comment Read Receipts

Newly added comments that have not been seen by Users will now display with a small red dot.

​
Specifying where comments are allowed using Class Names and Query Selectors

Expanded options for specifying where comments are allowed using class names and query selectors in addition to ids.

Added the allowedElementClassNames and allowedElementQuerySelectors properties on the <VeltComments/> component to provide more flexibility in determining where comments can be placed.

See Docs

HTML:

<velt-comments
  allowed-element-class-names='["class-name-1", "class-name-2"]'
  allowed-element-query-selectors='["#id1.class-name-1"]'
></velt-comments>

React:

<VeltComments
  allowedElementClassNames={["class-name-1", "class-name-2"]}
  allowedElementQuerySelectors={["#id1.class-name-1"]}
/>;

API Methods:

const commentElement = client.getCommentElement();
commentElement.allowedElementClassNames(["class-name-1", "class-name-2"]);
commentElement.allowedElementQuerySelectors(["#id1.class-name-1"]);