​
Versions

​
1. Major Improvements to Comments Sidebar Customization

In this update, we made several improvements to the Customization of the Comments Sidebar and Sidebar Button

​
Support for customizing additional Subcomponents within the Comments Sidebar and Sidebar Button

We modified or added support for customizing the following subcomponents of the Comments Sidebar:

We modified or added support for customizing the following subcomponents of the Sidebar Button:

​
Subcomponent Name Changes

We changed the names of several subcomponents:

  • <VeltCommentsSidebarWireframe.List.Item.Annotation /> -> <VeltCommentsSidebarWireframe.List.Item.DialogContainer />

  • <velt-comments-sidebar-list-item-annotation-wireframe> -> <velt-comments-sidebar-list-item-dialog-container-wireframe>

The Private Badge subcomponent was moved from being a child of Comment Dialog to being a child of the Comment Dialog Composer:

  • <VeltCommentDialogWireframe.PrivateBadge /> -> <VeltCommentDialogWireframe.Composer.PrivateBadge>

  • <velt-comment-dialog-private-badge-wireframe> -> <velt-comment-dialog-composer-private-badge-wireframe>

​
2. Live State Sync changes

​
getLiveStateData() now has a config option to only subscribe to new changes

By default, the getLiveStateData() subscription will return all changes to the shared live data object including changes that occured when the current client was not subscribed.

If you want to only receive changes starting from when the client subscribed to getLiveStateData(), you can pass a config object as shown below:

const liveStateDataConfig = {
	listenToNewChangesOnly: true  // default is false
};

let subscription = liveStateSyncElement.getLiveStateData(LIVE_STATE_DATA_KEY, liveStateDataConfig).subscribe((data) => {
	console.log('[Debug] getLiveStateData 31-05-2024-2 in html', data);
});

This also applies to the useLiveStateData() hook:

const liveStateDataConfig = {
	listenToNewChangesOnly: true // default is false
};

const liveStateData = useLiveStateData(LIVE_STATE_DATA_KEY, liveStateDataConfig)

As well as the useLiveState() hook:

const [counter, setCounter] = useLiveState < number > ("counter", 0, {
  syncDuration: 100,
  resetLiveState: true,
  listenToNewChangesOnly: true // default is false
});

​
Method to listen to changes in server connection state

You can listen to changes in the server connection state with the onServerConnectionStateChange() method:

const liveStateSyncElement = client.getLiveStateSyncElement();
let subscription = liveStateSyncElement.onServerConnectionStateChange().subscribe((data) => {
  console.log('server connection state change: ', data);
});

To unsubscribe from the subscription:

subscription?.unsubscribe()

The server connection state will be an ENUM with the following states:

export enum ServerConnectionState {
  ONLINE = 'online',
  OFFLINE = 'offline',
  PENDING_INIT = 'pendingInit',
  PENDING_DATA = 'pendingData',
}

You can also listen to changes in the server connection state using the useServerConnectionStateChangeHandler() hook as well:

const serverConnectionState = useServerConnectionStateChangeHandler();

​
3. Updates to Popover Comments

​
Added support for Popover comments using Single Comment Tool

There are now two patterns to add the Comment Tool component with Popover comments:

  • (Already Existed) Add a Comment Tool next to each element you want to have Popover comments
  • (New) Have a single Comment Tool and use it to pin a Popover comment on a particular element

​
Single Comment Tool

If you want to have a single Comment Tool in a single location such as the navigation bar, you can do so as well.

To do this, add data-velt-target-comment-element-id as an attribute on each element you want to add comments on.

Now, when you click on the Comment Tool and click on the target element, it will attach a Popover comment to the element.

You will now notice that you can only add one Comment Annotation per element.

If you don’t add the data-velt-target-comment-element-id attribute, you will be adding multiple Comment Annotations on the same element.

<div>
  <velt-comment-tool></velt-comment-tool>
  <div class="table">
    <div class="cell" data-velt-target-comment-element-id="cell-id-A" id="cell-id-A">

    </div>
    <div class="cell" data-velt-target-comment-element-id="cell-id-B" id="cell-id-B">

    </div>
  </div>
</div>