BlockNote - 区块侧边菜单

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

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

更改区块侧边菜单

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

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

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>
  );
}

import {
  SideMenuProps,
  useBlockNoteEditor,
  useComponentsContext,
} from "@blocknote/react";
import { MdDelete } from "react-icons/md";

// Custom Side Menu button to remove the hovered block.
export function RemoveBlockButton(props: SideMenuProps) {
  const editor = useBlockNoteEditor();

  const Components = useComponentsContext()!;

  return (
    <Components.SideMenu.Button
      label="Remove block"
      icon={
        <MdDelete
          size={24}
          onClick={() => {
            editor.removeBlocks([props.block]);
          }}
        />
      }
    />
  );
}

我们首先定义了自定义的 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";

// 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>
  );
}

import {
  DragHandleMenuProps,
  useBlockNoteEditor,
  useComponentsContext,
} from "@blocknote/react";

export function ResetBlockTypeItem(props: DragHandleMenuProps) {
  const editor = useBlockNoteEditor();

  const Components = useComponentsContext()!;

  return (
    <Components.Generic.Menu.Item
      onClick={() => {
        editor.updateBlock(props.block, { type: "paragraph" });
      }}
    >
      Reset Type
    </Components.Generic.Menu.Item>
  );
}

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

Block Side Menu

更改区块侧边菜单

更改拖动手柄菜单项

On this page

学习

合作

社区

法律

主题