May 17 2024

​

Versions

• Latest SDK: 1.0.129
• Latest Types: 1.0.146

​

Added Variant support in customization

If you want to have multiple versions of customized components that you can swap between, you can use variants.

To define multiple variants, add multiple templates of the same component wireframe to the VeltWireframe component and give them each a variant name.

<VeltWireframe>
    <VeltCommentsSidebarWireframe variant=”sidebar1”>
        #Your wireframe for variant sidebar1
    </VeltCommentsSidebarWireframe>

    <VeltCommentsSidebarWireframe variant=”sidebar2”>
        #Your wireframe for variant sidebar2
    </VeltCommentsSidebarWireframe>
</VeltWireframe>

To use a specific variant, define it on the variant props when using the Velt component in your app.

<div>
    <VeltCommentsSidebar variant="sidebar2"/>
</div>

​

Added Custom Dropdown Lists

You can have custom dropdown lists appear when certain hotkeys are pressed.

When you press a hotkey inside the Comment Dialog composer, it will open a dropdown list of items that you can select.

Selecting an item frop the dropdown list will create a chip that is placed in the comment text.

​

Merged useSetLocation and useAddLocation hook

The second parameter of useSetLocation can be set to true to add additional locations instead of using useAddLocation.

import { useSetLocation } from "@veltdev/react";

function YourComponent() {

	// to set main location
	useSetLocation(YOUR_LOCATION_OBJECT);
	
	// to set extra location
	useSetLocation(YOUR_EXTRA_LOCATION_OBJECT, true);
}

​

Option to submit Comment on Enter Key Press

By default, pressing enter will add a new line and pressing shift + enter will submit a comment.

If you want to change this default behavior so that pressing enter will submit a comment, you can set the enterKeyToSubmit property to true.

<VeltComments enterKeyToSubmit={true} />

// API methods
const commentElement = client.getCommentElement();
// To enable enter key to submit a comment
commentElement.enableEnterKeyToSubmit();
// To disable enter key to submit a comment
commentElement.disableEnterKeyToSubmit();

​

Added support to disable Shadow DOM on a few more components

There are now a few more components that can have the Shadow DOM disabled.

<VeltComments
  shadowDom={false}
  dialogShadowDom={false}
  pinShadowDom={false}
  textCommentToolShadowDom={false}
  textCommentToolbarShadowDom={false}
/>


<VeltCommentBubble shadowDom={false} />
<VeltCommentTool shadowDom={false} />
<VeltSidebarButton shadowDom={false} />
<VeltCommentsSidebar shadowDom={false} />