docs(react): document portalElements config

Adds a short "Configuring Portal Targets" section to the UI Components
overview page and updates the example README to match the side-by-side
demo.

Author: nperez0111

docs/content/docs/react/components/index.mdx

@@ -14,3 +14,23 @@ BlockNote includes a number of UI Components (like menus and toolbars) that can
   {/* - [Image Toolbar](/docs/react/components/image-toolbar) */}
 
 <CardTable path="/react/components" />
+
+## Configuring Portal Targets
+
+By default, all floating UI elements (toolbars, menus, table handles, etc.) portal into the editor's `bn-container` so they stay scoped to the editor. If your layout needs them to escape — e.g. an `overflow: hidden` ancestor that would clip large dropdowns, or a host modal with its own stacking context — pass a `portalElements` prop to `BlockNoteView`:
+
+```tsx
+<BlockNoteView
+  editor={editor}
+  portalElements={{
+    // Global default for any element not listed below.
+    default: document.body,
+    // Per-element overrides. Values can be HTMLElement, a CSS selector, or null (= document.body).
+    tableHandles: ".bn-container",
+  }}
+/>
+```
+
+Keys mirror the default UI flags (`formattingToolbar`, `linkToolbar`, `slashMenu`, `emojiPicker`, `sideMenu`, `filePanel`, `tableHandles`, `comments`). Manually-mounted Controllers also accept a `portalElement` prop that takes precedence over the map. See the [Portal Targets example](/examples/ui-components/portal-elements).
+
+Note: changing `portalElements.default` after mount requires remounting the editor (`editor.mount()` consults it once); per-element keys update reactively.

examples/03-ui-components/20-portal-elements/README.md

@@ -1,17 +1,13 @@
-# Configuring Portal Targets per Element
+# Configuring Portal Targets
 
-By default, BlockNote's floating UI elements (formatting toolbar, slash menu, table handles, etc.) mount inside the editor's `bn-container` element. The `portalElements` prop lets you change that — globally via `default`, or per element by key.
+By default, BlockNote's floating UI elements (formatting toolbar, slash menu, table handles, etc.) mount inside the editor's `bn-container`. The `portalElements` prop on `BlockNoteView` lets you change that — globally via `default`, or per element by key.
 
-In this example we deliberately wrap the editor in a small parent with `overflow: hidden` so the global default of `bn-container` would clip the slash menu and the formatting toolbar. We escape only those two to `document.body`, while keeping `tableHandles` inside `.bn-container` so the table handles can never escape the editor's visual boundary.
+This example renders two editors side-by-side, both wrapped in a small `overflow: hidden` container. The left editor uses the default — the slash menu is clipped by the editor's bounds. The right editor passes `portalElements={{ default: document.body }}` so floating UI escapes the wrapper and renders fully.
 
 ```tsx
 <BlockNoteView
   editor={editor}
-  portalElements={{
-    slashMenu: document.body,
-    formattingToolbar: document.body,
-    tableHandles: ".bn-container",
-  }}
+  portalElements={{ default: document.body }}
 />
 ```