Upgrading – Upgrading to 2.8

We are introducing attachments to allow users to add files to their comments.

How to upgrade?

You can upgrade to 2.8 by downloading the latest version of each Liveblocks package you’re using. The easiest way to do that is to run the following command:

$npx create-liveblocks-app@latest --upgrade

All changes are for Comments

If you are not using Comments or are not using the default Comments components, there are no breaking changes for you! However, if you are, or intend to use them later, keep reading.

Attachments

Liveblocks 2.8 adds attachments to Comments, and while not a breaking change, it is mostly enabled by default in the default components. We recommend you either enable attachments or disable attachments when you upgrade.

Enable attachments

Attachments are enabled by default, but if you’re using useCreateThread, useCreateComment, or useEditComment, you can now pass these an attachments array.

const createThread = useCreateThread();
// ❌ Before - Liveblocks 2.7createThread({ body: {}, metadata: {} });
// ✅ After - Liveblocks 2.8createThread({ body: {}, attachments: [], metadata: {} });

These hooks are most commonly used to enable custom Composer behavior with onComposerSubmit, which now provides the attachments array for you. You must pass this to your mutations for attachments to work correctly.

const createThread = useCreateThread();
// ❌ Before - Liveblocks 2.7<Composer  onComposerSubmit={({ body }, event) => {    event.preventDefault();    createThread({ body, metadata: {} });  }}/>
// ✅ After - Liveblocks 2.8<Composer  onComposerSubmit={({ body, attachments }, event) => {    event.preventDefault();    createThread({ body, attachments, metadata: {} });  }}/>

Remember that this applies to useCreateComment and useEditComment too, not just useCreateThread. No further changes are necessary to enable attachments in the default components.

Disable attachments

If you’d prefer to disable attachments, you can do so by setting the showAttachments prop to false on each of the following components: Composer, Comment, Thread, and InboxNotification.

// Disable attachments<Composer showAttachments={false} ... /><Comment showAttachments={false} ... /><Thread showAttachments={false} ... /><InboxNotification showAttachments={false} ... />

Default Composer component structure

The default Composer component’s structure has slightly changed, so if you customized its styles: make sure to check if and how the new structure affects your changes.

<!-- ❌ Before - Liveblocks 2.7 --><form class="lb-root lb-composer lb-composer-form">  <!-- The editor and its controls --></form>
<!-- ✅ After - Liveblocks 2.8 --><form class="lb-root lb-composer lb-composer-form">  <div class="lb-composer-editor-container">    <!-- The editor and its controls -->  </div></form>