BlockNote icon indicating copy to clipboard operation
BlockNote copied to clipboard

Uncaught TypeError: Cannot read properties of null (reading 'getBoundingClientRect')

Open vincenzodomina opened this issue 1 year ago • 1 comments

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.

image

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

vincenzodomina avatar Jul 29 '24 09:07 vincenzodomina

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).

chris-solid-labs avatar Aug 15 '24 12:08 chris-solid-labs

closed by https://github.com/TypeCellOS/BlockNote/pull/1057

let me know if this still occurs

YousefED avatar Oct 06 '24 09:10 YousefED