From c32c1685a80e8e5cf607aff2dc1c2b806715f88f Mon Sep 17 00:00:00 2001
From: "devin-ai-integration[bot]"
 <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Fri, 29 Aug 2025 16:07:06 -0700
Subject: [PATCH] Add useIsEditorReady documentation to react-blocknote and fix
 import issues (#2632)

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: jonathan.rowny@liveblocks.io <jrowny@gmail.com>
---
 .../liveblocks-react-blocknote.mdx            | 30 ++++++++++---------
 .../api-reference/liveblocks-react-tiptap.mdx |  4 +--
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/docs/pages/api-reference/liveblocks-react-blocknote.mdx b/docs/pages/api-reference/liveblocks-react-blocknote.mdx
index 918ad89b02f..9af1d78dc3a 100644
--- a/docs/pages/api-reference/liveblocks-react-blocknote.mdx
+++ b/docs/pages/api-reference/liveblocks-react-blocknote.mdx
@@ -1025,31 +1025,33 @@ function Threads({ editor }: { editor: BlockNoteEditor }) {
 // +++
 ```
 
-Here’s how it can be used in the context of your editor.
+### useIsEditorReady
+
+Used to check if the editor content has been loaded or not, helpful for
+displaying a loading skeleton.
+
+```ts
+import { useIsEditorReady } from "@liveblocks/react-blocknote";
+
+const status = useIsEditorReady();
+```
+
+Here's how it can be used in the context of your editor.
 
 ```tsx
-import { useLiveblocksExtension } from "@liveblocks/react-tiptap";
-// +++
-import { useIsEditorReady, useEditor, EditorContent } from "@tiptap/react";
-// +++
+import { useCreateBlockNoteWithLiveblocks, useIsEditorReady } from "@liveblocks/react-blocknote";
+import { BlockNoteView } from "@blocknote/mantine";
 
 function TextEditor() {
-  const liveblocks = useLiveblocksExtension();
+  const editor = useCreateBlockNoteWithLiveblocks({});
   // +++
   const ready = useIsEditorReady();
   // +++
 
-  const editor = useEditor({
-    extensions: [
-      liveblocks,
-      // ...
-    ],
-  });
-
   return (
     <div>
       // +++
-      {!ready ? <div>Loading...</div> : <EditorContent editor={editor} />}
+      {!ready ? <div>Loading...</div> : <BlockNoteView editor={editor} />}
       // +++
     </div>
   );
diff --git a/docs/pages/api-reference/liveblocks-react-tiptap.mdx b/docs/pages/api-reference/liveblocks-react-tiptap.mdx
index 54246a0023a..2b385189a98 100644
--- a/docs/pages/api-reference/liveblocks-react-tiptap.mdx
+++ b/docs/pages/api-reference/liveblocks-react-tiptap.mdx
@@ -2282,9 +2282,9 @@ const status = useIsEditorReady();
 Here’s how it can be used in the context of your editor.
 
 ```tsx
-import { useLiveblocksExtension } from "@liveblocks/react-tiptap";
 // +++
-import { useIsEditorReady, useEditor, EditorContent } from "@tiptap/react";
+import { useIsEditorReady, useLiveblocksExtension } from "@liveblocks/react-tiptap";
+import { useEditor, EditorContent } from "@tiptap/react";
 // +++
 
 function TextEditor() {