@liveblocks/react-lexical
provides you with a React
plugin that adds collaboration to any Lexical text
editor. It also adds realtime cursors, document persistence on the cloud,
comments, and mentions. Read our
get started guide to learn more.
To set up your collaborative Lexical editor, you must use
LiveblocksPlugin
and
liveblocksConfig
.
Liveblocks plugin for Lexical that adds collaboration to your editor.
LiveblocksPlugin
should always be nested inside LexicalComposer
, and
each Lexical default component you’re using should be
placed inside the plugin.
Learn more in our get started guide.
Function that takes a Lexical editor config and modifies it to add the necessary
nodes
and theme
to make LiveblocksPlugin
works correctly.
The config created by liveblocksConfig
should be passed to initialConfig
in
LexicalComposer
.
Note that liveblocksConfig
sets editorState
to null
because
LiveblocksPlugin
is responsible for initializing it on the server.
Displays a Composer
near the current lexical selection.
Submitting a comment will attach an annotation thread at the current selection.
Should be nested inside LiveblocksPlugin
.
To open the FloatingComposer
, you need to dispatch the
OPEN_FLOATING_COMPOSER_COMMAND
Lexical command.
Displays floating Thread
components below text highlights in the editor.
Takes a list of threads retrieved from useThreads
and renders them to the
page. Each thread is opened by clicking on its corresponding text highlight.
Should be nested inside LiveblocksPlugin
.
FloatingThreads
and AnchoredThreads
have been designed to work
together to provide the optimal experience on mobile and desktop. We generally
recommend using both components, hiding one on smaller screens, as we are below
with Tailwind classes. Most apps also don’t need to display resolved threads, so
we can filter those out with a useThreads
option.
We can place this component inside ClientSideSuspense
to prevent it
rendering until threads have loaded.
The FloatingThreads
component acts as a wrapper around each individual
Thread
. You can treat the component like you would a div
, using classes,
listeners, and more.
To apply styling to each Thread
, you can pass a custom Thread
property
to components
and modify this in any way. This is the best way to modify a
thread’s width.
You can return any custom ReactNode
here, including anything from a simple
wrapper around Thread
, up to a full custom Thread
component built using our
Comment primitives.
Displays a list of Thread
components vertically alongside the editor.
Takes a list of threads retrieved from useThreads
and renders them to the
page. Each thread is displayed at the same vertical coordinates as its
corresponding text highlight. If multiple highlights are in the same location,
each thread is placed in order below the previous thread.
Should be nested inside LiveblocksPlugin
.
FloatingThreads
and AnchoredThreads
have been designed to work
together to provide the optimal experience on mobile and desktop. We generally
recommend using both components, hiding one on smaller screens, as we are below
with Tailwind classes. Most apps also don’t need to display resolved threads, so
we can filter those out with a useThreads
option.
We can place this component inside ClientSideSuspense
to prevent it
rendering until threads have loaded.
The AnchoredThreads
component acts as a wrapper around each Thread
. It
has no width, so setting this is required, and each thread will take on the
width of the wrapper. You can treat the component like you would a div
, using
classes, listeners, and more.
To apply styling to each Thread
, you can pass a custom Thread
property
to components
and modify this in any way.
You can return any custom ReactNode
here, including anything from a simple
wrapper around Thread
, up to a full custom Thread
component built using our
Comment primitives.
Using CSS variables you can modify the gap between threads, and the horizontal offset that’s added when a thread is selected.
The HistoryVersionPreview
component allows you to display a preview of a
specific version of your Lexical editor's content. It also contains a button and
logic for restoring. It must be used inside the <LiveblocksPlugin>
context. To
render a list of versions, see
VersionHistory
.
The HistoryVersionPreview
component renders a read-only view of the specified
version of the editor content. It also provides a button for users to restore
the displayed version.
Returns the current editor status.
The possible value are:
not-loaded
: Initial editor state when entering the room.loading
: Once the editor state has been requested by LiveblocksPlugin
.synchronizing
: Not working yet at runtime! Will be available in a future
release.synchronized
: The editor state is sync with Liveblocks servers.Accepts a thread id and returns whether the thread annotation for this thread is
selected or not in the Lexical editor. This hook must be used in a component
nested inside LiveblocksPlugin
.
This hook can be useful to style threads based on whether their associated thread annotations are selected or not in the editor.
React Lexical comes with default styles, and these can be imported into the root
of your app or directly into a CSS file with @import
. Note that you must also
install and import a stylesheet from
@liveblocks/react-ui
to use these
styles.
Adding dark mode and customizing your styles is part of @liveblocks/react-ui
,
learn how to do this under
styling and customization.
We use cookies to collect data to improve your experience on our site. Read our Privacy Policy to learn more.