nperez0111 · Sep 15, 2026 · Sep 15, 2026 · Sep 15, 2026 · Sep 15, 2026 · Sep 15, 2026
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -50,7 +50,7 @@ jobs:
         run: vp run -r build
 
       - name: Lint packages
-        run: vp lint
+        run: vp run lint
 
       - name: Run unit tests
         # Always execute tests: only build results are reusable across CI runs.

diff --git a/docs/app/demo/_components/DemoEditor.tsx b/docs/app/demo/_components/DemoEditor.tsx
@@ -17,11 +17,11 @@ import * as locales from "@blocknote/core/locales";
 import { BlockNoteView } from "@blocknote/mantine";
 import "@blocknote/mantine/style.css";
 import {
-  BlockNoteViewEditor,
   FloatingComposerController,
   FloatingThreadController,
   FormattingToolbar,
   FormattingToolbarController,
+  RenderInPortalElement,
   SuggestionMenuController,
   ThreadsSidebar,
   getDefaultReactSlashMenuItems,
@@ -198,6 +198,10 @@ function DemoEditorInner({
     }
     return window.innerWidth >= 768;
   });
+  // The element in the layout that the comments sidebar is rendered into.
+  const [threadsElement, setThreadsElement] = useState<HTMLDivElement | null>(
+    null,
+  );
 
   const { doc, provider } = useMemo(() => {
     const doc = new Y.Doc();
@@ -404,47 +408,48 @@ function DemoEditorInner({
       </div>
 
       <div className="relative flex flex-1 overflow-hidden">
-        <BlockNoteView
-          editor={editor}
-          theme={resolvedTheme === "dark" ? "dark" : "light"}
-          className="min-h-full flex-1 overflow-hidden"
-          formattingToolbar={false}
-          slashMenu={false}
-          renderEditor={false}
-          comments={false}
-        >
-          <AIMenuController />
-          <FormattingToolbarWithAI />
-          <SuggestionMenuController
-            triggerCharacter={"/"}
-            getItems={getSlashMenuItems}
-          />
-
-          <div className="flex h-full w-full">
-            <div className="relative flex-1 overflow-y-auto pr-4 pb-12 pl-4 transition-all duration-300 ease-in-out">
-              <div className="mx-auto min-h-full max-w-[800px] py-4">
-                <BlockNoteViewEditor />
-              </div>
+        <div className="relative flex-1 overflow-y-auto pr-4 pb-12 pl-4 transition-all duration-300 ease-in-out">
+          <div className="mx-auto min-h-full max-w-[800px] py-4">
+            <BlockNoteView
+              editor={editor}
+              theme={resolvedTheme === "dark" ? "dark" : "light"}
+              className="min-h-full"
+              formattingToolbar={false}
+              slashMenu={false}
+              comments={false}
+            >
+              <AIMenuController />
+              <FormattingToolbarWithAI />
+              <SuggestionMenuController
+                triggerCharacter={"/"}
+                getItems={getSlashMenuItems}
+              />
               <FloatingComposerController />
               {!sidebarOpen && <FloatingThreadController />}
-            </div>
-
-            <div
-              className={`relative z-10 h-full overflow-y-auto bg-[#fbfbfb] transition-all duration-300 ease-in-out ${
-                sidebarOpen
-                  ? "w-[320px] translate-x-0 border-l border-stone-100 opacity-100"
-                  : "w-0 translate-x-full overflow-hidden opacity-0"
-              }`}
-            >
-              <div className="sticky top-0 z-20 border-b border-stone-100 bg-white/50 p-4 text-xs font-bold tracking-wider text-stone-400 uppercase backdrop-blur-sm">
-                Comments
-              </div>
-              <div className="p-2">
-                <ThreadsSidebar filter="all" sort="recent-activity" />
-              </div>
-            </div>
+              {/* `ThreadsSidebar` needs the editor's context, so it's rendered
+                  here, but `RenderInPortalElement` places it in the sidebar
+                  panel next to the editor. */}
+              {threadsElement && (
+                <RenderInPortalElement>
+                  <ThreadsSidebar filter="all" sort="recent-activity" />
+                </RenderInPortalElement>
+              )}
+            </BlockNoteView>
           </div>
-        </BlockNoteView>
+        </div>
+
+        <div
+          className={`relative z-10 h-full overflow-y-auto bg-[#fbfbfb] transition-all duration-300 ease-in-out ${
+            sidebarOpen
+              ? "w-[320px] translate-x-0 border-l border-stone-100 opacity-100"
+              : "w-0 translate-x-full overflow-hidden opacity-0"
+          }`}
+        >
+          <div className="sticky top-0 z-20 border-b border-stone-100 bg-white/50 p-4 text-xs font-bold tracking-wider text-stone-400 uppercase backdrop-blur-sm">
+            Comments
+          </div>
+          <div className="p-2" ref={setThreadsElement} />
+        </div>
       </div>
     </div>
   );

diff --git a/docs/content/docs/features/blocks/code-blocks.mdx b/docs/content/docs/features/blocks/code-blocks.mdx
@@ -95,7 +95,7 @@ That's all — see it in action in [this example](/examples/theming/code-block).
 
 Under the hood, highlighting is split into two parts, which you can also wire up yourself for full control over the bundle:
 
-- The `SyntaxHighlightingExtension` (from `@blocknote/core`) provides the highlighter — a [Shiki](https://shiki.style) instance with your choice of languages, themes, and engine:
+- The `SyntaxHighlightingExtension` (from `@blocknote/core/extensions`) provides the highlighter — a [Shiki](https://shiki.style) instance with your choice of languages, themes, and engine:
 
   ```ts
   type SyntaxHighlightingOptions = {
@@ -125,7 +125,7 @@ npx shiki-codegen --langs javascript,typescript,vue --themes light-plus,dark-plu
 This generates a `shiki.bundle.ts` file that you use to create the extension — added to the editor exactly like the pre-configured one above, alongside a `createCodeBlockSpec` configured with your matching languages:
 
 ```ts
-import { SyntaxHighlightingExtension } from "@blocknote/core";
+import { SyntaxHighlightingExtension } from "@blocknote/core/extensions";
 import { createHighlighter } from "./shiki.bundle.js";
 
 const syntaxHighlighter = SyntaxHighlightingExtension({

diff --git a/docs/content/docs/features/collaboration/comments.mdx b/docs/content/docs/features/collaboration/comments.mdx
@@ -164,7 +164,7 @@ BlockNote also offers a different way of viewing and interacting with comments,
 
 <Example name="collaboration/comments-with-sidebar" />
 
-The only requirement for `ThreadsSidebar` is that it should be placed somewhere within your `BlockNoteView`, other than that you can position and style it however you want.
+The only requirement for `ThreadsSidebar` is that it should be placed somewhere within your `BlockNoteView`, other than that you can position and style it however you want. To show it elsewhere in your application's layout, use [`RenderInPortalElement`](/docs/react/components#placing-blocknote-ui-in-your-own-layout).
 
 `ThreadsSidebar` also takes 2 props:
 

diff --git a/docs/content/docs/getting-started/vanilla-js.mdx b/docs/content/docs/getting-started/vanilla-js.mdx
@@ -60,7 +60,7 @@ Each UI element is backed by an [extension](/docs/features/extensions). You can
 While it's up to you to decide how you want the elements to be rendered, the store lets you react to state changes so you can update the visibility, position, and contents of your elements:
 
 ```typescript
-import { SideMenuExtension } from "@blocknote/core";
+import { SideMenuExtension } from "@blocknote/core/extensions";
 
 const extension = editor.getExtension(SideMenuExtension)!;
 

diff --git a/docs/content/docs/react/components/index.mdx b/docs/content/docs/react/components/index.mdx
@@ -36,3 +36,33 @@ Keys mirror the default UI flags (`formattingToolbar`, `linkToolbar`, `slashMenu
 The [mobile Formatting Toolbar](/docs/react/components/formatting-toolbar#mobile-formatting-toolbar) always portals to `document.body`, including its menus and popovers. It does not use the configured formatting-toolbar or default target.
 
 When a target sits outside the editor's DOM (like `document.body`), BlockNote automatically renders a themed wrapper element inside it, so floating UI keeps the editor's styling and theming wherever it's portalled.
+
+### Placing BlockNote UI in your own layout
+
+Some components, like the [comments sidebar](/docs/features/collaboration/comments#sidebar-view), aren't floating but still need the editor's context, so they must be rendered inside `BlockNoteView`. To show one somewhere else in your application's layout, render it inside `BlockNoteView` wrapped in `RenderInPortalElement`, and pass the element it should appear in:
+
+```tsx
+function App() {
+  const editor = useCreateBlockNote(/* ... */);
+  // The element in your layout that the sidebar is rendered into.
+  const [sidebarElement, setSidebarElement] = useState<HTMLElement | null>(
+    null,
+  );
+
+  return (
+    <div className="my-layout">
+      <BlockNoteView editor={editor} comments={false}>
+        <FloatingComposerController />
+        {sidebarElement && (
+          <RenderInPortalElement>
+            <ThreadsSidebar />
+          </RenderInPortalElement>
+        )}
+      </BlockNoteView>
+      <aside ref={setSidebarElement} />
+    </div>
+  );
+}
+```
+
+The children are rendered inside a themed wrapper element in `target`, so they keep the editor's styling, and focus inside them counts as focus within the editor.
diff --git a/docs/package.json b/docs/package.json
@@ -73,10 +73,10 @@
     "@uppy/xhr-upload": "^3.4.0",
     "@vercel/analytics": "^1.6.1",
     "@y-sweet/react": "^0.6.3",
-    "@y/prosemirror": "^2.0.0-6",
+    "@y/prosemirror": "^2.0.0-14",
     "@y/protocols": "^1.0.6-rc.1",
     "@y/websocket": "^4.0.0-3",
-    "@y/y": "^14.0.0-rc.23",
+    "@y/y": "^14.0.0-rc.26",
     "ai": "^6.0.5",
     "better-auth": "~1.4.15",
     "better-sqlite3": "^12.6.2",
@@ -89,7 +89,7 @@
     "fumadocs-typescript": "^5.1.1",
     "fumadocs-ui": "npm:@fumadocs/base-ui@16.5.0",
     "katex": "^0.18.9",
-    "lib0": "^1.0.0-rc.34",
+    "lib0": "1.0.0-rc.36",
     "lucide-react": "^0.562.0",
     "mathjax-full": "^3.2.2",
     "mermaid": "^11.0.0",
@@ -110,10 +110,11 @@
     "typescript-5": "npm:typescript@^5.9.3",
     "y-partykit": "^0.0.25",
     "y-websocket": "^2.1.0",
-    "yjs": "^13.6.27",
+    "yjs": "^13.6.33",
     "zod": "^4.3.5",
     "@blocknote/xl-typst-exporter": "workspace:*",
-    "@blocknote/xl-typst-compiler": "workspace:*"
+    "@blocknote/xl-typst-compiler": "workspace:*",
+    "y-prosemirror": "^1.3.7"
   },
   "devDependencies": {
     "@blocknote/code-block": "workspace:*",

diff --git a/examples/03-ui-components/18-drag-n-drop/README.md b/examples/03-ui-components/18-drag-n-drop/README.md
@@ -20,7 +20,7 @@ The exclusion check works by traversing up the DOM tree from the drag event targ
 ### Import the constant:
 
 ```tsx
-import { DRAG_EXCLUSION_CLASSNAME } from "@blocknote/core";
+import { DRAG_EXCLUSION_CLASSNAME } from "@blocknote/core/extensions";
 ```
 
 ### Apply it to your custom drag area:

diff --git a/examples/04-theming/07-custom-code-block/src/App.tsx b/examples/04-theming/07-custom-code-block/src/App.tsx
@@ -1,8 +1,5 @@
-import {
-  BlockNoteSchema,
-  createCodeBlockSpec,
-  SyntaxHighlightingExtension,
-} from "@blocknote/core";
+import { BlockNoteSchema, createCodeBlockSpec } from "@blocknote/core";
+import { SyntaxHighlightingExtension } from "@blocknote/core/extensions";
 import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView } from "@blocknote/mantine";
 import "@blocknote/mantine/style.css";

diff --git a/examples/07-collaboration/01-partykit/.bnexample.json b/examples/07-collaboration/01-partykit/.bnexample.json
@@ -5,6 +5,6 @@
   "tags": ["Advanced", "Saving/Loading", "Collaboration"],
   "dependencies": {
     "y-partykit": "^0.0.25",
-    "yjs": "^13.6.27"
+    "yjs": "^13.6.33"
   }
 }
diff --git a/examples/07-collaboration/01-partykit/package.json b/examples/07-collaboration/01-partykit/package.json
@@ -21,7 +21,7 @@
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "y-partykit": "^0.0.25",
-    "yjs": "^13.6.27"
+    "yjs": "^13.6.33"
   },
   "devDependencies": {
     "@types/react": "^19.2.3",

diff --git a/examples/07-collaboration/02-liveblocks/.bnexample.json b/examples/07-collaboration/02-liveblocks/.bnexample.json
@@ -9,6 +9,6 @@
     "@liveblocks/react-blocknote": "^3.19.5",
     "@liveblocks/react-tiptap": "^3.19.5",
     "@liveblocks/react-ui": "^3.19.5",
-    "yjs": "^13.6.27"
+    "yjs": "^13.6.33"
   }
 }
diff --git a/examples/07-collaboration/02-liveblocks/package.json b/examples/07-collaboration/02-liveblocks/package.json
@@ -25,7 +25,7 @@
     "@liveblocks/react-blocknote": "^3.19.5",
     "@liveblocks/react-tiptap": "^3.19.5",
     "@liveblocks/react-ui": "^3.19.5",
-    "yjs": "^13.6.27"
+    "yjs": "^13.6.33"
   },
   "devDependencies": {
     "@types/react": "^19.2.3",

diff --git a/examples/07-collaboration/06-comments-with-sidebar/.bnexample.json b/examples/07-collaboration/06-comments-with-sidebar/.bnexample.json
@@ -5,7 +5,7 @@
   "tags": ["Advanced", "Comments", "Collaboration"],
   "dependencies": {
     "y-partykit": "^0.0.25",
-    "yjs": "^13.6.27",
+    "yjs": "^13.6.33",
     "@mantine/core": "^9.0.2"
   }
 }
diff --git a/examples/07-collaboration/06-comments-with-sidebar/package.json b/examples/07-collaboration/06-comments-with-sidebar/package.json
@@ -21,7 +21,7 @@
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "y-partykit": "^0.0.25",
-    "yjs": "^13.6.27"
+    "yjs": "^13.6.33"
   },
   "devDependencies": {
     "@types/react": "^19.2.3",