Slash menu style is distorted on Next.js project

[i-am-chitti]

Describe the bug
I used this library with a fresh Next.js @ 14.1.4 release. On loading the editor as guided here- https://www.blocknotejs.org/docs/advanced/nextjs, the slash menu style is broken -

Also, noticed that this style is broken -

To Reproduce

1. Create a next js project -

npx create-next-app@latest blocknote-next-js --typescript --eslint

2. cd blocknote-next-js
3. Add blocknote lib - npm install @blocknote/core @blocknote/react
4. Follow the guide - https://www.blocknotejs.org/docs/advanced/nextjs and add the Editor
5. Start development server
6. Press / and you'll get the distorted styling

Misc

• Node version: 18.18.0
• Package manager: 9.8.1
• Browser: Google Chrome - Version 123.0.6312.59 (Official Build) (arm64)

Note
I'm using the exact same code as suggested in the doc. Have already imported the "react/style.css"

[quuu]

Am also hitting this issue on a fresh repo

[quuu]

The stackblitz linked in the docs also is directly repro-able for this issue

[siddharthbulia]

Same issue here. It is not working in regular project as well.

[siddharthbulia]

@i-am-chitti and @quuu

I have been able to fix it by installing @mantine/[email protected] and by adding import "@mantine/core/style.css at the start of my App.jsx
It seems like this file should have automatically been imported but is not happening.

import "@blocknote/core/fonts/inter.css";
import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
import "@blocknote/react/style.css";
import "@mantine/core/style.css"

export default function App() {
  // Creates a new editor instance.
  const editor = useCreateBlockNote();

  // Renders the editor instance using a React component.
  return <BlockNoteView editor={editor} />;
}

[kyen99]

In order to get this to work with latest @blocknote I had to do what @siddharthbulia suggested above, but I had to install @mantine/[email protected] instead of 7.5.0 (which gave me dependency warnings and didn't work).

[DaviRJ]

Same problem here. Nextjs 14.1. @siddharthbulia fixed the Blocknote layout but broke up all styles of my app 😅 I'm using Tailwind and shadcn.

Bellow some images to exemplify.

Blocknote without manually import:

Blocknote manually importing @mantime/core/styles.css:

[YousefED]

Thanks for the reports. This seems like a recent regression, we'll fix it asap!

[shahyan3]

@YousefED Thanks. Do post an update when fixed please.

[SPCODER-DEV]

it works like this so far

Adding "@mantine/core/styles.css" and also importing "@/app/globals.css"

"@mantine/core": "^7.7.1"

[YousefED]

Hi all! Turns out this was caused by a Mantine update. It should be fixed in the latest BlockNote release! (0.12.4)

#678