From 538a78990960ad82166df2ffdddf63d3a547df92 Mon Sep 17 00:00:00 2001
From: Nick the Sick <nick@blocknotejs.org>
Date: Wed, 7 May 2025 16:59:21 +0200
Subject: [PATCH 1/4] feat: add a ghost writer demo

---
 .../06-ghost-writer/.bnexample.json           | 10 ++
 .../07-collaboration/06-ghost-writer/App.tsx  | 95 +++++++++++++++++++
 .../06-ghost-writer/README.md                 |  9 ++
 .../06-ghost-writer/index.html                | 14 +++
 .../07-collaboration/06-ghost-writer/main.tsx | 11 +++
 .../06-ghost-writer/package.json              | 29 ++++++
 .../06-ghost-writer/styles.css                |  9 ++
 .../06-ghost-writer/tsconfig.json             | 36 +++++++
 .../06-ghost-writer/vite.config.ts            | 32 +++++++
 packages/core/src/editor/BlockNoteEditor.ts   | 10 +-
 playground/src/examples.gen.tsx               | 24 +++++
 pnpm-lock.yaml                                | 53 ++++++++++-
 12 files changed, 325 insertions(+), 7 deletions(-)
 create mode 100644 examples/07-collaboration/06-ghost-writer/.bnexample.json
 create mode 100644 examples/07-collaboration/06-ghost-writer/App.tsx
 create mode 100644 examples/07-collaboration/06-ghost-writer/README.md
 create mode 100644 examples/07-collaboration/06-ghost-writer/index.html
 create mode 100644 examples/07-collaboration/06-ghost-writer/main.tsx
 create mode 100644 examples/07-collaboration/06-ghost-writer/package.json
 create mode 100644 examples/07-collaboration/06-ghost-writer/styles.css
 create mode 100644 examples/07-collaboration/06-ghost-writer/tsconfig.json
 create mode 100644 examples/07-collaboration/06-ghost-writer/vite.config.ts

diff --git a/examples/07-collaboration/06-ghost-writer/.bnexample.json b/examples/07-collaboration/06-ghost-writer/.bnexample.json
new file mode 100644
index 0000000000..f0028aaf5e
--- /dev/null
+++ b/examples/07-collaboration/06-ghost-writer/.bnexample.json
@@ -0,0 +1,10 @@
+{
+  "playground": true,
+  "docs": true,
+  "author": "nperez0111",
+  "tags": ["Advanced", "Development", "Collaboration"],
+  "dependencies": {
+    "y-partykit": "^0.0.25",
+    "yjs": "^13.6.15"
+  }
+}
diff --git a/examples/07-collaboration/06-ghost-writer/App.tsx b/examples/07-collaboration/06-ghost-writer/App.tsx
new file mode 100644
index 0000000000..37cd71ed17
--- /dev/null
+++ b/examples/07-collaboration/06-ghost-writer/App.tsx
@@ -0,0 +1,95 @@
+import "@blocknote/core/fonts/inter.css";
+import { BlockNoteView } from "@blocknote/mantine";
+import { useCreateBlockNote } from "@blocknote/react";
+
+import YPartyKitProvider from "y-partykit/provider";
+import * as Y from "yjs";
+import "./styles.css";
+import { useEffect, useState } from "react";
+
+const params = new URLSearchParams(window.location.search);
+const ghostWritingRoom = params.get("room");
+const ghostWriterIndex = parseInt(params.get("index") || "1");
+const isGhostWriting = Boolean(ghostWritingRoom);
+const roomName = ghostWritingRoom || `ghost-writer-${Date.now()}`;
+// Sets up Yjs document and PartyKit Yjs provider.
+const doc = new Y.Doc();
+const provider = new YPartyKitProvider(
+  "blocknote-dev.yousefed.partykit.dev",
+  // Use a unique name as a "room" for your application.
+  roomName,
+  doc
+);
+
+const ghostContent =
+  "This demo shows a two-way sync of documents. It allows you to test collaboration features, and see how stable the editor is. ";
+
+export default function App() {
+  const [numGhostWriters, setNumGhostWriters] = useState(1);
+  const editor = useCreateBlockNote({
+    collaboration: {
+      // The Yjs Provider responsible for transporting updates:
+      provider,
+      // Where to store BlockNote data in the Y.Doc:
+      fragment: doc.getXmlFragment("document-store"),
+      // Information (name and color) for this user:
+      user: {
+        name: isGhostWriting
+          ? `Ghost Writer #${ghostWriterIndex}`
+          : "My Username",
+        color: isGhostWriting ? "#CCCCCC" : "#00ff00",
+      },
+    },
+  });
+
+  useEffect(() => {
+    if (!isGhostWriting) {
+      return;
+    }
+    let index = 0;
+    let timeout: NodeJS.Timeout;
+
+    const scheduleNextChar = () => {
+      const jitter = Math.random() * 200; // Random delay between 0-200ms
+      timeout = setTimeout(() => {
+        const firstBlock = editor.document?.[0];
+        if (firstBlock) {
+          editor.insertInlineContent(ghostContent[index], {
+            updateSelection: true,
+          });
+          index = (index + 1) % ghostContent.length;
+        }
+        scheduleNextChar();
+      }, 50 + jitter);
+    };
+
+    scheduleNextChar();
+
+    return () => clearTimeout(timeout);
+  }, [editor]);
+
+  // Renders the editor instance.
+  return (
+    <>
+      {!isGhostWriting && (
+        <button onClick={() => setNumGhostWriters((a) => a + 1)}>
+          Add a Ghost Writer
+        </button>
+      )}
+      <BlockNoteView editor={editor} />
+
+      {!isGhostWriting && (
+        <div className="two-way-sync">
+          {Array.from({ length: numGhostWriters }).map((_, index) => (
+            <iframe
+              src={`${window.location.href}?room=${roomName}&index=${
+                index + 1
+              }`}
+              title="ghost writer"
+            />
+          ))}
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/examples/07-collaboration/06-ghost-writer/README.md b/examples/07-collaboration/06-ghost-writer/README.md
new file mode 100644
index 0000000000..49cc44c869
--- /dev/null
+++ b/examples/07-collaboration/06-ghost-writer/README.md
@@ -0,0 +1,9 @@
+# Ghost Writer
+
+In this example, we use a local Yjs document to store the document state, and have a ghost writer that edits the document in real-time.
+
+**Try it out:** Open this page in a new browser tab or window to see it in action!
+
+**Relevant Docs:**
+
+- [Editor Setup](/docs/editor-basics/setup)
diff --git a/examples/07-collaboration/06-ghost-writer/index.html b/examples/07-collaboration/06-ghost-writer/index.html
new file mode 100644
index 0000000000..bcca4b1a5c
--- /dev/null
+++ b/examples/07-collaboration/06-ghost-writer/index.html
@@ -0,0 +1,14 @@
+<html lang="en">
+  <head>
+    <script>
+      <!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
+    </script>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ghost Writer</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/07-collaboration/06-ghost-writer/main.tsx b/examples/07-collaboration/06-ghost-writer/main.tsx
new file mode 100644
index 0000000000..6284417d60
--- /dev/null
+++ b/examples/07-collaboration/06-ghost-writer/main.tsx
@@ -0,0 +1,11 @@
+// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.jsx";
+
+const root = createRoot(document.getElementById("root")!);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/examples/07-collaboration/06-ghost-writer/package.json b/examples/07-collaboration/06-ghost-writer/package.json
new file mode 100644
index 0000000000..44b1e1c3ac
--- /dev/null
+++ b/examples/07-collaboration/06-ghost-writer/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "@blocknote/example-ghost-writer",
+  "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "private": true,
+  "version": "0.12.4",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build:prod": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@blocknote/core": "latest",
+    "@blocknote/react": "latest",
+    "@blocknote/ariakit": "latest",
+    "@blocknote/mantine": "latest",
+    "@blocknote/shadcn": "latest",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "y-partykit": "^0.0.25",
+    "yjs": "^13.6.15"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "@vitejs/plugin-react": "^4.3.1",
+    "vite": "^5.3.4"
+  }
+}
\ No newline at end of file
diff --git a/examples/07-collaboration/06-ghost-writer/styles.css b/examples/07-collaboration/06-ghost-writer/styles.css
new file mode 100644
index 0000000000..b32064ed74
--- /dev/null
+++ b/examples/07-collaboration/06-ghost-writer/styles.css
@@ -0,0 +1,9 @@
+.two-way-sync {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+}
+
+.two-way-sync > div {
+  flex: 1;
+}
diff --git a/examples/07-collaboration/06-ghost-writer/tsconfig.json b/examples/07-collaboration/06-ghost-writer/tsconfig.json
new file mode 100644
index 0000000000..dbe3e6f62d
--- /dev/null
+++ b/examples/07-collaboration/06-ghost-writer/tsconfig.json
@@ -0,0 +1,36 @@
+{
+  "__comment": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ESNext"
+    ],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "composite": true
+  },
+  "include": [
+    "."
+  ],
+  "__ADD_FOR_LOCAL_DEV_references": [
+    {
+      "path": "../../../packages/core/"
+    },
+    {
+      "path": "../../../packages/react/"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/examples/07-collaboration/06-ghost-writer/vite.config.ts b/examples/07-collaboration/06-ghost-writer/vite.config.ts
new file mode 100644
index 0000000000..f62ab20bc2
--- /dev/null
+++ b/examples/07-collaboration/06-ghost-writer/vite.config.ts
@@ -0,0 +1,32 @@
+// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
+import react from "@vitejs/plugin-react";
+import * as fs from "fs";
+import * as path from "path";
+import { defineConfig } from "vite";
+// import eslintPlugin from "vite-plugin-eslint";
+// https://vitejs.dev/config/
+export default defineConfig((conf) => ({
+  plugins: [react()],
+  optimizeDeps: {},
+  build: {
+    sourcemap: true,
+  },
+  resolve: {
+    alias:
+      conf.command === "build" ||
+      !fs.existsSync(path.resolve(__dirname, "../../packages/core/src"))
+        ? {}
+        : ({
+            // Comment out the lines below to load a built version of blocknote
+            // or, keep as is to load live from sources with live reload working
+            "@blocknote/core": path.resolve(
+              __dirname,
+              "../../packages/core/src/"
+            ),
+            "@blocknote/react": path.resolve(
+              __dirname,
+              "../../packages/react/src/"
+            ),
+          } as any),
+  },
+}));
diff --git a/packages/core/src/editor/BlockNoteEditor.ts b/packages/core/src/editor/BlockNoteEditor.ts
index b1c2878a1d..510c0d0084 100644
--- a/packages/core/src/editor/BlockNoteEditor.ts
+++ b/packages/core/src/editor/BlockNoteEditor.ts
@@ -1226,7 +1226,10 @@ export class BlockNoteEditor<
    *
    * @param content can be a string, or array of partial inline content elements
    */
-  public insertInlineContent(content: PartialInlineContent<ISchema, SSchema>) {
+  public insertInlineContent(
+    content: PartialInlineContent<ISchema, SSchema>,
+    { updateSelection = false }: { updateSelection?: boolean } = {}
+  ) {
     const nodes = inlineContentToNodes(content, this.pmSchema);
 
     this.transact((tr) => {
@@ -1236,7 +1239,10 @@ export class BlockNoteEditor<
           from: tr.selection.from,
           to: tr.selection.to,
         },
-        nodes
+        nodes,
+        {
+          updateSelection,
+        }
       );
     });
   }
diff --git a/playground/src/examples.gen.tsx b/playground/src/examples.gen.tsx
index a19a530049..a7b4431952 100644
--- a/playground/src/examples.gen.tsx
+++ b/playground/src/examples.gen.tsx
@@ -1325,6 +1325,30 @@
           "pathFromRoot": "examples/07-collaboration",
           "slug": "collaboration"
         }
+      },
+      {
+        "projectSlug": "ghost-writer",
+        "fullSlug": "collaboration/ghost-writer",
+        "pathFromRoot": "examples/07-collaboration/06-ghost-writer",
+        "config": {
+          "playground": true,
+          "docs": true,
+          "author": "nperez0111",
+          "tags": [
+            "Advanced",
+            "Development",
+            "Collaboration"
+          ],
+          "dependencies": {
+            "y-partykit": "^0.0.25",
+            "yjs": "^13.6.15"
+          } as any
+        },
+        "title": "Ghost Writer",
+        "group": {
+          "pathFromRoot": "examples/07-collaboration",
+          "slug": "collaboration"
+        }
       }
     ]
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a28f2e88f6..e52e890397 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2645,6 +2645,49 @@ importers:
         specifier: ^5.3.4
         version: 5.4.15(@types/node@22.14.1)(terser@5.39.0)
 
+  examples/07-collaboration/06-ghost-writer:
+    dependencies:
+      '@blocknote/ariakit':
+        specifier: latest
+        version: link:../../../packages/ariakit
+      '@blocknote/core':
+        specifier: latest
+        version: link:../../../packages/core
+      '@blocknote/mantine':
+        specifier: latest
+        version: link:../../../packages/mantine
+      '@blocknote/react':
+        specifier: latest
+        version: link:../../../packages/react
+      '@blocknote/shadcn':
+        specifier: latest
+        version: link:../../../packages/shadcn
+      react:
+        specifier: ^18.3.1
+        version: 18.3.1
+      react-dom:
+        specifier: ^18.3.1
+        version: 18.3.1(react@18.3.1)
+      y-partykit:
+        specifier: ^0.0.25
+        version: 0.0.25
+      yjs:
+        specifier: ^13.6.15
+        version: 13.6.24
+    devDependencies:
+      '@types/react':
+        specifier: ^18.0.25
+        version: 18.3.20
+      '@types/react-dom':
+        specifier: ^18.0.9
+        version: 18.3.5(@types/react@18.3.20)
+      '@vitejs/plugin-react':
+        specifier: ^4.3.1
+        version: 4.3.4(vite@5.4.15(@types/node@22.14.1)(terser@5.39.0))
+      vite:
+        specifier: ^5.3.4
+        version: 5.4.15(@types/node@22.14.1)(terser@5.39.0)
+
   examples/08-extensions/01-tiptap-arrow-conversion:
     dependencies:
       '@blocknote/ariakit':
@@ -20471,7 +20514,7 @@ snapshots:
       '@typescript-eslint/parser': 5.62.0(eslint@8.57.1)(typescript@5.8.2)
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.0(eslint-plugin-import@2.31.0)(eslint@8.57.1)
+      eslint-import-resolver-typescript: 3.10.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.8.2))(eslint@8.57.1))(eslint@8.57.1)
       eslint-plugin-import: 2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-typescript@3.10.0)(eslint@8.57.1)
       eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.1)
       eslint-plugin-react: 7.37.4(eslint@8.57.1)
@@ -20518,7 +20561,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.10.0(eslint-plugin-import@2.31.0)(eslint@8.57.1):
+  eslint-import-resolver-typescript@3.10.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.8.2))(eslint@8.57.1))(eslint@8.57.1):
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
       debug: 4.4.0
@@ -20533,14 +20576,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.0(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.0)(eslint@8.57.1):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.8.2))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       '@typescript-eslint/parser': 5.62.0(eslint@8.57.1)(typescript@5.8.2)
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.0(eslint-plugin-import@2.31.0)(eslint@8.57.1)
+      eslint-import-resolver-typescript: 3.10.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.8.2))(eslint@8.57.1))(eslint@8.57.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -20563,7 +20606,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.0)(eslint@8.57.1)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.8.2))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
       hasown: 2.0.2
       is-core-module: 2.16.1
       is-glob: 4.0.3

From 9bab62fe0a348f2502d1778fb7bcdaa24f728394 Mon Sep 17 00:00:00 2001
From: Nick the Sick <nick@blocknotejs.org>
Date: Fri, 25 Apr 2025 13:46:39 +0200
Subject: [PATCH 2/4] feat: add ability to pause the ghost writer

---
 examples/07-collaboration/06-ghost-writer/App.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/examples/07-collaboration/06-ghost-writer/App.tsx b/examples/07-collaboration/06-ghost-writer/App.tsx
index 37cd71ed17..be348240de 100644
--- a/examples/07-collaboration/06-ghost-writer/App.tsx
+++ b/examples/07-collaboration/06-ghost-writer/App.tsx
@@ -26,6 +26,7 @@ const ghostContent =
 
 export default function App() {
   const [numGhostWriters, setNumGhostWriters] = useState(1);
+  const [isPaused, setIsPaused] = useState(false);
   const editor = useCreateBlockNote({
     collaboration: {
       // The Yjs Provider responsible for transporting updates:
@@ -43,7 +44,7 @@ export default function App() {
   });
 
   useEffect(() => {
-    if (!isGhostWriting) {
+    if (!isGhostWriting || isPaused) {
       return;
     }
     let index = 0;
@@ -66,12 +67,16 @@ export default function App() {
     scheduleNextChar();
 
     return () => clearTimeout(timeout);
-  }, [editor]);
+  }, [editor, isPaused]);
 
   // Renders the editor instance.
   return (
     <>
-      {!isGhostWriting && (
+      {isGhostWriting ? (
+        <button onClick={() => setIsPaused((a) => !a)}>
+          {isPaused ? "Resume Ghost Writer" : "Pause Ghost Writer"}
+        </button>
+      ) : (
         <button onClick={() => setNumGhostWriters((a) => a + 1)}>
           Add a Ghost Writer
         </button>

From 7de5271627d683496fb03edd34aac24093ab2286 Mon Sep 17 00:00:00 2001
From: Nick the Sick <nick@blocknotejs.org>
Date: Wed, 7 May 2025 17:09:37 +0200
Subject: [PATCH 3/4] style: update the styles and not display in docs

---
 examples/07-collaboration/06-ghost-writer/.bnexample.json | 2 +-
 examples/07-collaboration/06-ghost-writer/App.tsx         | 4 +++-
 examples/07-collaboration/06-ghost-writer/styles.css      | 5 ++++-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/examples/07-collaboration/06-ghost-writer/.bnexample.json b/examples/07-collaboration/06-ghost-writer/.bnexample.json
index f0028aaf5e..2d28ad5ec5 100644
--- a/examples/07-collaboration/06-ghost-writer/.bnexample.json
+++ b/examples/07-collaboration/06-ghost-writer/.bnexample.json
@@ -1,6 +1,6 @@
 {
   "playground": true,
-  "docs": true,
+  "docs": false,
   "author": "nperez0111",
   "tags": ["Advanced", "Development", "Collaboration"],
   "dependencies": {
diff --git a/examples/07-collaboration/06-ghost-writer/App.tsx b/examples/07-collaboration/06-ghost-writer/App.tsx
index be348240de..0579324b40 100644
--- a/examples/07-collaboration/06-ghost-writer/App.tsx
+++ b/examples/07-collaboration/06-ghost-writer/App.tsx
@@ -1,4 +1,5 @@
 import "@blocknote/core/fonts/inter.css";
+import "@blocknote/mantine/style.css";
 import { BlockNoteView } from "@blocknote/mantine";
 import { useCreateBlockNote } from "@blocknote/react";
 
@@ -18,7 +19,7 @@ const provider = new YPartyKitProvider(
   "blocknote-dev.yousefed.partykit.dev",
   // Use a unique name as a "room" for your application.
   roomName,
-  doc
+  doc,
 );
 
 const ghostContent =
@@ -91,6 +92,7 @@ export default function App() {
                 index + 1
               }`}
               title="ghost writer"
+              className="ghost-writer"
             />
           ))}
         </div>
diff --git a/examples/07-collaboration/06-ghost-writer/styles.css b/examples/07-collaboration/06-ghost-writer/styles.css
index b32064ed74..588b4f01fa 100644
--- a/examples/07-collaboration/06-ghost-writer/styles.css
+++ b/examples/07-collaboration/06-ghost-writer/styles.css
@@ -2,8 +2,11 @@
   display: flex;
   flex-direction: row;
   height: 100%;
+  margin-top: 10px;
+  gap: 8px;
 }
 
-.two-way-sync > div {
+.ghost-writer {
   flex: 1;
+  border: 1px solid #ccc;
 }

From df6e80edf4727900c9f35de3349f9d93c16b7cb2 Mon Sep 17 00:00:00 2001
From: Nick the Sick <nick@blocknotejs.org>
Date: Wed, 7 May 2025 18:03:26 +0200
Subject: [PATCH 4/4] fix: always show the focus of the editors

---
 .../07-collaboration/06-ghost-writer/App.tsx  | 36 +++++++++++++++----
 playground/src/examples.gen.tsx               |  2 +-
 2 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/examples/07-collaboration/06-ghost-writer/App.tsx b/examples/07-collaboration/06-ghost-writer/App.tsx
index 0579324b40..4344c5c11a 100644
--- a/examples/07-collaboration/06-ghost-writer/App.tsx
+++ b/examples/07-collaboration/06-ghost-writer/App.tsx
@@ -7,6 +7,8 @@ import YPartyKitProvider from "y-partykit/provider";
 import * as Y from "yjs";
 import "./styles.css";
 import { useEffect, useState } from "react";
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { EditorView } from "prosemirror-view";
 
 const params = new URLSearchParams(window.location.search);
 const ghostWritingRoom = params.get("room");
@@ -22,6 +24,14 @@ const provider = new YPartyKitProvider(
   doc,
 );
 
+/**
+ * Y-prosemirror has an optimization, where it doesn't send awareness updates unless the editor is currently focused.
+ * So, for the ghost writers, we override the hasFocus method to always return true.
+ */
+if (isGhostWriting) {
+  EditorView.prototype.hasFocus = () => true;
+}
+
 const ghostContent =
   "This demo shows a two-way sync of documents. It allows you to test collaboration features, and see how stable the editor is. ";
 
@@ -78,9 +88,23 @@ export default function App() {
           {isPaused ? "Resume Ghost Writer" : "Pause Ghost Writer"}
         </button>
       ) : (
-        <button onClick={() => setNumGhostWriters((a) => a + 1)}>
-          Add a Ghost Writer
-        </button>
+        <>
+          <button onClick={() => setNumGhostWriters((a) => a + 1)}>
+            Add a Ghost Writer
+          </button>
+          <button onClick={() => setNumGhostWriters((a) => a - 1)}>
+            Remove a Ghost Writer
+          </button>
+          <button
+            onClick={() => {
+              window.open(
+                `${window.location.origin}${window.location.pathname}?room=${roomName}&index=-1`,
+                "_blank",
+              );
+            }}>
+            Ghost Writer in a new window
+          </button>
+        </>
       )}
       <BlockNoteView editor={editor} />
 
@@ -88,9 +112,9 @@ export default function App() {
         <div className="two-way-sync">
           {Array.from({ length: numGhostWriters }).map((_, index) => (
             <iframe
-              src={`${window.location.href}?room=${roomName}&index=${
-                index + 1
-              }`}
+              src={`${window.location.origin}${
+                window.location.pathname
+              }?room=${roomName}&index=${index + 1}&hideMenu=true`}
               title="ghost writer"
               className="ghost-writer"
             />
diff --git a/playground/src/examples.gen.tsx b/playground/src/examples.gen.tsx
index a7b4431952..7b57ce7ceb 100644
--- a/playground/src/examples.gen.tsx
+++ b/playground/src/examples.gen.tsx
@@ -1332,7 +1332,7 @@
         "pathFromRoot": "examples/07-collaboration/06-ghost-writer",
         "config": {
           "playground": true,
-          "docs": true,
+          "docs": false,
           "author": "nperez0111",
           "tags": [
             "Advanced",