We’ve released a new Tiptap package for Text Editor, a formatting toolbar for Comments, two different ways to prevent users losing unsychronized changes, and added room permission information to our dashboard.
It’s now easier than ever to set up collaborative text documents using our new
first-party package for Tiptap, a highly
extensible rich-text editor. Text documents are fully-hosted and stored in our
highly scalable realtime data store, meaning you just need to import our
component to get started.
Our new Text Editor package makes it easy to create an advanced
collaborative editor filled with all the features you’ve come to expect from
Liveblocks, such as:
When composing comments, a contextual formatting toolbar is now shown when
selecting text, allowing your users to easily add styles to their comments. Four
styles are supported: Bold, italic,
~strikethrough~ and code.
After updating to Liveblocks 2.13, the
Composer’s formatting
toolbar is enabled by default, but you can optionally disable it with
showFormattingControls={false}.
Liveblocks synchronizes very quickly, but occasionally, particularly when a user
has a poor connection, they will close a browser tab before a change is saved.
This could lead to issues such as a reaction not appearing on a comment, a word
in a text editor not saving, a thread not being resolved.
To combat this, we’ve come up with two different solutions.
useSyncStatus - A new way to show a synchronization badge
in your UI.
It’s now easier than ever to create a synchronization badge in your app. We’ve
added a new hook which checks every part of Liveblocks (Comments, Text Editor,
Notifications, Storage, Yjs) and lets you know whether changes have been saved.
You can use this information to create a status badge, such as the one in our
Linear-like issue tracker example.
The new hook’s called
useSyncStatus and it’s
just a few lines of code to create a badge.
Because Liveblocks syncs quickly and often, ordinarily the badge would flash a
lot. To account for this, we’ve added a smooth option, which delays changes
between states, so your UI isn't distracting. We’re using this in the video
above.
We’ve added a new option that prevent users from closing tabs with a dialog if
there are any unsaved changes. Along with preventing unsynchronized changes in
every part of Liveblocks, it additionally prevents users from closing the page
when they’ve left unsubmitted text in a
Composer.
You can now quickly check if your rooms are public or private on our
dashboard, and we’ve added a warning that lets you know if all
your rooms are public, to let you know if you’re accidentally exposing your room
data.
If you’re not creating rooms with our
Node.js package or
REST API, this means we’ve
automatically creating rooms for you. Each room created automatically is set to
have public permissions, which means that users don’t need authentication to
access the room.
// Turn an existing room privateconst otherRoom =await liveblocks.updateRoom("my-other-room-id",{ defaultAccesses:[],// Private access}); // Create a new private roomconst room =await liveblocks.createRoom("my-room-id",{ defaultAccesses:[],// Private access});
Rooms are only automatically created if you’re using access token
authentication, as ID tokens always require you to manually create rooms. Learn
more about
setting default room permissions with access tokens.