Feature/liveblocks v2

[YousefED]

This PR makes BlockNote compatible with the new, simplified Liveblocks developer experience ❤️

Setting up a Liveblocks enabled editor with collaboration, comments, and mentions now practically becomes a one-liner:

export function Editor() {
  const editor = useCreateBlockNoteWithLiveblocks();

  return (
    <BlockNoteView
      editor={editor}>
      <Threads editor={editor} />
    </BlockNoteView>
  );
}

Changes

• Changed the Liveblocks example to use @liveblocks/react-blocknote (to be released). See Liveblocks PR
• We automatically add an "Add comment" button to the FormattingToolbar (of course, this can be customized)
• We've improved the mounting system on BlockNote. This was necessary to make it compatible with the Liveblocks UI components so that editor.view is immediately available.

TODO:

• update docs
• Blocking: the new mounting system requires React MarkViews to fully work. This is WIP and might take a few weeks to land. If we like, we can create a different workaround until that's available
• Move new mounting system to separate PR?
• Translate comments strings to other langs

Future work

UI elements

In contrast to Lexical / Tiptap / Prosemirror, BlockNote is a UI-included library. Currently, we let Liveblocks add UI elements to the editor. This has the disadvantage that the UI elements are in the style of Liveblocks, and have a different look & feel + customization API than default BlockNote UI elements.

We'd like to make UI primitives for collaboration a "first class citizen" of BlockNote that Liveblocks plugs into. If possible, it would be great to collaborate with Liveblocks and re-use parts of their primitives so we can help improve & maintain those together.

Higher level API

Similarly, BlockNote should provide a higher level API for change detection / notifications that Liveblocks now does at the Prosemirror level to add support for mention-notifications. Liveblocks could then plug in to this higher level API.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
blocknote	❌ Failed (Inspect)		Jan 8, 2025 2:08pm
blocknote-website	❌ Failed (Inspect)		Jan 8, 2025 2:08pm