Skip to content

Commit 5adc96a

Browse files
committed
docs(core): condense the isWithinEditor comment
1 parent c4a2d9c commit 5adc96a

1 file changed

Lines changed: 7 additions & 26 deletions

File tree

‎packages/core/src/editor/BlockNoteEditor.ts‎

Lines changed: 7 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -798,33 +798,14 @@ export class BlockNoteEditor<
798798
* editor's DOM tree or inside its portal container (used for floating UI
799799
* elements like menus and toolbars).
800800
*
801-
* The first check deliberately starts one level up, at the content area's
802-
* *parent*. BlockNote's own default UI is entirely portalled, so that hop
803-
* isn't for its sake — it's for UI the host app renders as `BlockNoteView`
804-
* children, which React places as siblings of the content element. The
805-
* "Static Formatting Toolbar" example does exactly that: it renders
806-
* `<FormattingToolbar />` inline instead of through a controller, putting
807-
* a dozen focusable buttons next to the content. Without the hop, focusing
808-
* one of them would read as "outside the editor" — dismissing the mobile
809-
* toolbar mid-interaction, and tripping the side menu's click-outside
810-
* check.
801+
* The first check starts at the content area's *parent*, so that UI the
802+
* host app renders as `BlockNoteView` children counts too — React places
803+
* those beside the content (see the "Static Formatting Toolbar" example).
811804
*
812-
* That makes the result depend on where the editor is mounted, because
813-
* `editor.mount(element)` turns `element` itself into the content area —
814-
* so the boundary is whatever that element's parent happens to be:
815-
*
816-
* - With `BlockNoteView` (React) the mount element always sits inside the
817-
* `bn-container` wrapper, so the boundary is that wrapper. Correct.
818-
* - Mounting a bare element that is a direct child of `<body>` — which is
819-
* what the vanilla-JS setup in the docs does — makes the boundary
820-
* `<body>`, i.e. the whole page. Everything on the page then counts as
821-
* "within the editor": `isFocused({ includeEditorUI: true })` is always
822-
* true, `onFocusChange` with that option never reports a blur, and the
823-
* side menu's click-outside check (see `SideMenu.ts`) never matches.
824-
*
825-
* Wrapping the mount element in a container avoids this. Fixing it here
826-
* would mean identifying the editor's UI without relying on the parent —
827-
* worth doing, but it changes behaviour for every caller.
805+
* So the boundary is whatever the element passed to `editor.mount()` has as
806+
* its parent. `BlockNoteView` always provides a wrapper; mounting bare into
807+
* `<body>`, as the vanilla-JS docs do, makes the whole page count as within
808+
* the editor.
828809
*/
829810
public isWithinEditor = (element: Element): boolean => {
830811
return !!(

0 commit comments

Comments
 (0)