Week 3

v2.16.0

We've created new toolbar elements that allow you to import a default floating toolbar in Tiptap and Lexical. It's also possible to use these APIs to build custom or static toolbars. We've updated a number of our examples to show how to do this.

Our error listener APIs will now receive more errors in general, including errors from using Comments & Notifications. Previously, these would only receive room connection errors from Presence, Storage, or Yjs. For example, now when creation of a thread fails, deletion of a comment fails, marking a notification as read fails, etc.

@liveblocks/react

Breaking: More errors can appear in useErrorListener()

// ❌ Before: required a RoomProvider and would only notify about errors for that room// ✅ Now: requires a LiveblocksProvider and will notify about errors for any roomuseErrorListener((err: LiveblocksError) => {  /* show toast, or notify Sentry, Datadog, etc */});

See the Upgrade Guide for 2.16 to learn how to adapt your code.

Filtering by absence of metadata

We now support filtering threads by absence of metadata as well in useThreads({ query }) (or useUserThreads_experimental({ query })). For example, you can now filter threads that do not have a color attribute set in their metadata:

useThreads({  query: {    // Filter any "pinned" threads that don't have a color set    metadata: {      pinned: true,      color: null, // ✨    },  },});

See the Upgrade Guide for 2.16 to learn how to adapt your code.

Bug fixes

• Automatically refresh Comments and Notifications when the browser window regains focus.

@liveblocks/client

The error listener APIs will now receive more errors in general, including errors from using Comments & Notifications. Previously, these would only receive room connection errors from Presence, Storage, or Yjs.

// 👌 Same as before, but might now also receive errors related to Comments & Notificationsroom.subscribe("error", (err) => { ... });

@liveblocks/react-ui

• Most of the icons used in the default components are now usable as <Icon.* /> via import { Icon } from "@liveblocks/react-ui".

@liveblocks/react-lexical and @liveblocks/react-tiptap

• Add <Toolbar /> and <FloatingToolbar /> components to simplify building editor toolbars. They come with default controls out-of-the-box based on what the editor they’re attached to supports, but they’re also heavily extendable and customizable. Use inner components like <Toolbar.Toggle /> and <Toolbar.Separator /> to extend the defaults with your own actions, or start from scratch while customizing some of the defaults via <Toolbar.SectionInline /> or <Toolbar.BlockSelector /> for example.

@liveblocks/react-lexical

• Add isTextFormatActive and isBlockNodeActive utilities.

Examples

• Updated Next.js Starter Kit to use the new FloatingToolbar.
• Updated many text editor examples to use the new FloatingToolbar:
  • Advanced collaborative text editor (Tiptap)`.
  • Collaborative text editor (Tiptap).
  • Collaborative text editor (Lexical).
  • Text editor comments (Tiptap).
  • Next.js Tiptap editor.
  • Next.js Tiptap editor.

Dashboard

• Allow rate limit configuration for webhook endpoints.
• Fix download comments attachments action in text editor view from room detail page.

Contributors

Contributors include:

5 authors