Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 38 additions & 0 deletions src/features/editor/ui/Editor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -521,14 +521,52 @@
scheduleSave(JSON.stringify(editor.document))
}, [editor, scheduleSave, backfillImageCaptions])

/**
* Handles clicks on the editor wrapper's padding area.
*
* The editor wrapper has generous bottom padding (`pb-[60vh]`) so that
* users can scroll content above the virtual keyboard on mobile devices.
* Clicking in this padding zone does not naturally focus the editor
* because the click target is outside the `.bn-editor` contenteditable
* region. This callback detects such clicks and programmatically focuses
* the editor with the cursor placed at the end of the last block.
*
* If the click originated inside `.bn-editor` (including any of its
* descendant elements), the callback returns early and lets the default
* browser behaviour handle focus normally.
*
* @param e - The mouse event from the wrapper `<div>`.
*
* @example
* ```tsx
* <div onClick={handleWrapperClick}>
* <BlockNoteView editor={editor} />
* </div>
* ```
*/
const handleWrapperClick = useCallback(
(e: React.MouseEvent<HTMLDivElement>) => {
const target = e.target as HTMLElement
if (target.closest('.bn-editor')) return

const lastBlock = editor.document[editor.document.length - 1]
if (lastBlock) {
editor.setTextCursorPosition(lastBlock, 'end')
}
editor.focus()
},
[editor]
)

return (
<>
{/* Editor wrapper — starts invisible (`opacity-0`) and transitions to
`opacity-100` once `contentReady` is true, preventing a flash of
stale/default content while the real note loads. */}
<div
className={`w-full min-h-screen px-8 pb-[60vh] ${contentReady ? 'opacity-100' : 'opacity-0'}`}

Check warning on line 567 in src/features/editor/ui/Editor.tsx

View workflow job for this annotation

GitHub Actions / Frontend Lint & Format

lint/nursery/useSortedClasses

These CSS classes should be sorted.
data-editor-root
onClick={handleWrapperClick}
style={
{
'--editor-font-size': `${fontSize}px`,
Expand Down
Loading