We’ve released new formatting toolbars for Text Editor, the first stage of AI Copilots with an AI suggestions toolbar, our custom-made icon set, a number of new error types, and a new option for filtering thread metadata.
Join thousands of companies using Liveblocks ready‑made collaborative features to drive growth in their products.
This January we’ve released new toolbars, icons, and better error handling.
To use the latest features, update your packages with the following command.
If you were previously on Liveblocks 2.15 or below, make sure to follow our upgrade guides before updating.
Adding a toolbar to your text editor is now easier than ever with our new customizable components. Make a selection in your Tiptap and Lexical editors to see floating options for formatting your text and adding comments.
In addition, we’re also enabling static toolbars. In the video below, you can see an example of this, along with some custom functionality, such as highlighting and text alignment, added to the toolbar.
To add these toolbars to your app, simply import our pre-built components into your text editor. All styling will match the rest of your Liveblocks components.
Find more information under Tiptap components and Lexical components.
Both <FloatingToolbar> and <Toolbar> can be extensively customized, allowing
you to add new options, remove parts you don’t need, or completely replace the
content. For example, below we’re adding an element to the start of the toolbar.
You can go further than this, picking and choosing the elements you require. The toolbar below uses the default block selector (i.e. Text, Heading 1, Heading 2, etc.), then adds a vertical separator and a button with fully custom behavior.
Custom buttons and toggles will be styled like the rest of the toolbar, with tooltips and shortcut icons. Here’s a few different ways you can use them.
You can create a custom toolbar in Tiptap and Lexical.
We’ve updated a number of examples with the new toolbar, such as our Linear-like issue tracker.
Here’s every other example we’ve updated:
Get started now with the new toolbar functionality.
We’ve been working hard on the first stage of AI Copilots this January; our AI toolbar for Text Editor. This toolbar enables customizable AI actions inside Tiptap, allowing users to make quick modifications to their documents.
The toolbar’s currently only available for those that have
requested access, and we’re going to start rolling it out to
selected partners over the coming days. To add it to your app, simply import
AiToolbar.
You can also easily add fully custom prompts to the toolbar, for example below is an option to add emoji to your text.
Learn more under
AiToolbar.Suggestion.
To aid with creating custom toolbars, we’re now exporting our custom-made Liveblocks icon set, used in our components. This way you can re-use icons that are part of products, such as Comments and Notifications.
Get started by importing Icon
into your component. These icons perfectly fit into toolbar buttons, toggles,
and suggestions, but can also be used elsewhere.
We’ve added 15 new error types to Liveblocks, allowing you to gracefully handle
any problems in your app with
useErrorListener.
Here’s an example of a new error, triggered if creating a thread doesn’t work.
Above, we’re highlighting a CREATE_THREAD_ERROR error—one reason this may
occur is if you submit thread metadata that’s too large. Find more information
about each error under
useErrorListener.
When selecting threads, you can now filter them by the absence of a metadata
property. For example, you can now filter threads that do not have a color
attribute set in their metadata by setting color: null.
Learn more about fetching threads under
useThreads.
Our CEO, Steven Fabre, recently wrote Great agent experience starts with great collaboration, an article on how agent-compatible collaborative apps will have a huge competitive advantage. In this post, he breaks down why great agent experience (AX) starts with great collaborative products.
Here’s a list of other improvements in our changelog this month.
isTextFormatActive
and
isBlockNodeActive
utilities to Lexical.useLayoutEffect warnings when using React versions lower than 18.3.0
and SSR.useThreads() would not always reuse the
cache correctly.Zustand typing in case the multi-argument form of set() is
used.FloatingToolbar.FloatingToolbar.@liveblocks/node-lexical
documentation has been improved.409 response to
Initialize Storage REST API.initialStorage values.To use the latest features, update your packages with the following command.
If you were previously on Liveblocks 2.15 or below, make sure to follow our upgrade guides before updating.
Contributors include:
8 authors