在 BlockNote 中使用 ShadCN、Radix 和 Tailwind

shadcn/ui (opens in a new tab) 是一套基于 Radix (opens in a new tab) 和 Tailwind 的开源 React 组件集合。要将 BlockNote 与 shadcn 一起使用，可以从 @blocknote/shadcn（而非 @blocknote/mantine）导入 BlockNoteView，并且引入样式表 @blocknote/shadcn/style.css。

ShadCN 自定义

BlockNote 自带默认的 shadcn 组件，但你很可能已经复制并可能在项目中自定义了自己的 shadcn 组件。
为了让 BlockNote 使用你项目中的 ShadCN 组件，而非默认组件，可以通过 BlockNoteView 的 shadCNComponents 属性传入：

import * as Button from "@/components/ui/button"
import * as Select from "@/components/ui/select"
 
return (
  <BlockNoteView editor={editor} shadCNComponents={{
    Select,
    Button,
    ...
  }} />
);

你可以从以下 ShadCN 模块传入组件：

• Badge
• Button
• Card
• DropdownMenu
• Form
• Input
• Label
• Popover
• Select
• Tabs
• Toggle
• Tooltip