Slash menu style is distorted on Next.js project
i-am-chitti opened this issue · comments
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
- Create a next js project -
npx create-next-app@latest blocknote-next-js --typescript --eslint
cd blocknote-next-js- Add blocknote lib -
npm install @blocknote/core @blocknote/react - Follow the guide - https://www.blocknotejs.org/docs/advanced/nextjs and add the Editor
- Start development server
- 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"
Am also hitting this issue on a fresh repo
The stackblitz linked in the docs also is directly repro-able for this issue
Same issue here. It is not working in regular project as well.
@i-am-chitti and @quuu
I have been able to fix it by installing @mantine/core@7.5.0 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} />;
}
In order to get this to work with latest @blocknote I had to do what @siddharthbulia suggested above, but I had to install @mantine/core@7.7.1 instead of 7.5.0 (which gave me dependency warnings and didn't work).
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:
Thanks for the reports. This seems like a recent regression, we'll fix it asap!
it works like this so far
Adding "@mantine/core/styles.css" and also importing "@/app/globals.css"
"@mantine/core": "^7.7.1"