BlockNote
BlockNote copied to clipboard
Uncaught TypeError: Cannot read properties of null (reading 'getBoundingClientRect')
Describe the bug I get this Error in the console:
156 blocknote.js:7060 Uncaught TypeError: Cannot read properties of null (reading 'getBoundingClientRect') at wn.eval [as updateState] (blocknote.js:7060:44) at HTMLDocument.eval (blocknote.js:7165:12)
And it reappears many times, but only while moving the cursor.
In the highlighted code your comment is: // Used to check if currently dragged content comes from this editor instance. So looks like an issue coming from your newly added drag and drop files feature (which i have not implemented/configured yet)
To Reproduce
- Update blocknote from 0.13.x to 0.15.2 (since this update this error appears)
- It does not matter in which situation (Editor component rendered, not rendered)
- Move the cursor within the DOM
Misc
- Node version: 20.12.2
- Package manager: npm
- Browser: Chrome
- [ ] I'm a sponsor and would appreciate if you could look into this sooner than later 💖
- React: Nextjs 14 App router
Same issue. In my case this error appeared after adding Liveblocks collaboration support. I am creating the editor with the useCreateBlockNote hook
const editor = useCreateBlockNote(
{
collaboration: {
provider,
fragment: doc.getXmlFragment("document-store"),
user: {
name: user.name,
color: stringToColor(user.id),
},
},
},
[doc, provider, user]
);
provider and doc are created like so
const room = useRoom();
const [doc, setDoc] = useState<Y.Doc>();
const [provider, setProvider] = useState<unknown>();
// Set up Liveblocks Yjs provider
useEffect(() => {
const yDoc = new Y.Doc();
const yProvider = new LiveblocksYjsProvider(room, yDoc);
setDoc(yDoc);
setProvider(yProvider);
return () => {
yDoc?.destroy();
yProvider?.destroy();
};
}, [room]);
The error appears only after changing room through navigation (I am using next/navigation).
closed by https://github.com/TypeCellOS/BlockNote/pull/1057
let me know if this still occurs