Slash menu style is distorted on Next.js project

[i-am-chitti]

Slash menu style is distorted on Next.js project

[siddharthbulia]

@i-am-chitti and @quuu

I have been 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).

[YousefED]

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

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

[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:

[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"