BlockNote编辑器侧边菜单样式问题解决方案

问题现象

在使用Vite配置BlockNote编辑器时，开发者可能会遇到CSS样式异常的问题，特别是侧边菜单(SideMenu)完全无法正常显示。从截图可以看出，菜单按钮位置错乱，功能失效。

问题原因分析

这个问题通常发生在以下技术栈环境中：

• Vite 5.2.6
• React 18.2.0
• Next.js 14.1.0
• TailwindCSS 3.3.0

根本原因是BlockNote依赖的Mantine UI库的样式未被正确引入。BlockNote内部使用了Mantine作为基础UI组件库，如果项目中没有正确配置Mantine的样式，就会导致组件渲染异常。

解决方案

基础解决方案

1. 首先安装Mantine核心包：

npm install @mantine/core

2. 然后在项目入口文件(如main.tsx或_app.tsx)中引入Mantine的样式：

import '@mantine/core/styles.css';

使用ShadCN组件的情况

如果项目中使用了ShadCN组件库，需要特别注意：

1. 从特定路径导入组件：

import { BlockNoteView } from "@blocknote/shadcn";
import "@blocknote/shadcn/style.css";

2. 如果仍然存在问题，可以暂时注释掉shadCNComponents属性进行测试。

最佳实践建议

1. 样式引入顺序：确保Mantine的样式在BlockNote样式之前引入，避免样式覆盖问题。

2. 主题适配：BlockNote支持亮色/暗色主题切换，可以通过theme属性指定：

<BlockNoteView
  editor={editor}
  theme={resolvedTheme === "dark" ? "dark" : "light"}
/>

3. 文件上传集成：如示例中所示，可以通过实现uploadFile回调来集成文件上传功能。

4. 内容变更处理：使用onChange回调处理编辑器内容变更时，建议对内容进行JSON序列化处理。

总结

BlockNote作为一款功能强大的块状编辑器，其样式依赖需要特别注意。通过正确引入Mantine样式库，可以解决大多数UI渲染问题。对于使用ShadCN的项目，要使用专门的导入路径和样式文件。开发者还应该注意主题适配和内容变更处理等细节，以确保编辑器功能的完整性。