文档
UI 组件
区块侧边菜单

区块侧边菜单

当你将鼠标悬停在区块上时，区块侧边菜单会出现在左侧。默认情况下，它由一个 + 按钮和一个拖动手柄（⠿）组成：

image

点击区块侧边菜单中的拖动手柄（⠿）会打开拖动手柄菜单：

image

更改区块侧边菜单

你可以用自己的 React 组件更改或替换区块侧边菜单。在下面的演示中，添加新区块的按钮被替换成了一个删除当前悬停区块的按钮。

GitHub
StackBlitz
import "@blocknote/core/fonts/inter.css";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";
import {
  DragHandleButton,
  SideMenu,
  SideMenuController,
  useCreateBlockNote,
} from "@blocknote/react";
 
import { RemoveBlockButton } from "./RemoveBlockButton.js";
 
export default function App() {
  // Creates a new editor instance.
  const editor = useCreateBlockNote({
    initialContent: [
      {
        type: "paragraph",
        content: "Welcome to this demo!",
      },
      {
        type: "paragraph",
        content: "<- Notice the new button in the side menu",
      },
      {
        type: "paragraph",
        content: "Click it to remove the hovered block",
      },
      {
        type: "paragraph",
      },
    ],
  });
 
  // Renders the editor instance.
  return (
    <BlockNoteView editor={editor} sideMenu={false}>
      <SideMenuController
        sideMenu={(props) => (
          <SideMenu {...props}>
            {/* Button which removes the hovered block. */}
            <RemoveBlockButton {...props} />
            <DragHandleButton {...props} />
          </SideMenu>
        )}
      />
    </BlockNoteView>
  );
}

我们首先定义了自定义的 RemoveBlockButton。useComponentsContext 钩子可以获取 BlockNote 内部使用的所有组件，因此我们这里使用 Components.SideMenu.Button。

我们使用 SideMenu 组件来创建自定义的区块侧边菜单。通过指定其子组件，我们可以用自己的按钮替换菜单中的默认按钮。

这个自定义侧边菜单被传递给一个 SideMenuController，它控制菜单的位置和可见性（当你悬停区块时，菜单会显示在左侧）。

在 BlockNoteView 上设置 sideMenu={false} 告诉 BlockNote 不显示默认的区块侧边菜单。

更改拖动手柄菜单项

你也可以更改拖动手柄菜单中的项目。下面的演示添加了一个将区块类型重置为段落的菜单项。

GitHub
StackBlitz
import "@blocknote/core/fonts/inter.css";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";
import {
  BlockColorsItem,
  DragHandleMenu,
  DragHandleMenuProps,
  RemoveBlockItem,
  SideMenu,
  SideMenuController,
  useCreateBlockNote,
} from "@blocknote/react";
 
import { ResetBlockTypeItem } from "./ResetBlockTypeItem.js";
 
// To avoid rendering issues, it's good practice to define your custom drag
// handle menu in a separate component, instead of inline within the `sideMenu`
// prop of `SideMenuController`.
const CustomDragHandleMenu = (props: DragHandleMenuProps) => (
  <DragHandleMenu {...props}>
    <RemoveBlockItem {...props}>Delete</RemoveBlockItem>
    <BlockColorsItem {...props}>Colors</BlockColorsItem>
    {/* Item which resets the hovered block's type. */}
    <ResetBlockTypeItem {...props}>Reset Type</ResetBlockTypeItem>
  </DragHandleMenu>
);
 
export default function App() {
  // Creates a new editor instance.
  const editor = useCreateBlockNote({
    initialContent: [
      {
        type: "paragraph",
        content: "Welcome to this demo!",
      },
      {
        type: "paragraph",
        content: "<- Click the Drag Handle to see the new item",
      },
      {
        type: "bulletListItem",
        content:
          "Try resetting this block's type using the new Drag Handle Menu item",
      },
      {
        type: "paragraph",
      },
    ],
  });
 
  // Renders the editor instance.
  return (
    <BlockNoteView editor={editor} sideMenu={false}>
      <SideMenuController
        sideMenu={(props) => (
          <SideMenu {...props} dragHandleMenu={CustomDragHandleMenu} />
        )}
      />
    </BlockNoteView>
  );
}

这里，我们使用了 SideMenu 组件但保留了默认按钮（没有传递任何子组件）。相反，我们通过 dragHandleMenu 属性传递了自定义的拖动手柄菜单。

UI 组件格式化工具栏