โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ ๐ shadcn/directory/udecode/plate/(plugins)/(functionality)/block-menu.cn โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ
title: ๅ่ๅ docs:
route: /docs/components/block-context-menu title: ๅไธไธๆ่ๅ
route: https://pro.platejs.org/docs/components/block-menu title: ๅ่ๅ
route: https://pro.platejs.org/docs/components/block-context-menu title: ๅไธไธๆ่ๅ
ๆๅฟซๆท็ๆนๅผๆฏไฝฟ็จ BlockMenuKit๏ผๅฎๅ
ๅซ้ข้
็ฝฎ็ BlockMenuPlugin ไปฅๅ BlockSelectionPlugin ๅๅฎไปฌ็ Plate UI ็ปไปถใ
BlockContextMenu: ๆธฒๆไธไธๆ่ๅ็้ขimport { createPlateEditor } from 'platejs/react';
import { BlockMenuKit } from '@/components/editor/plugins/block-menu-kit';
const editor = createPlateEditor({
plugins: [
// ...ๅ
ถไปๆไปถ
...BlockMenuKit,
],
});
npm install @platejs/selection
ๅ่ๅๅ่ฝ้่ฆๅๆถๅฎ่ฃ
BlockSelectionPlugin ๅ BlockMenuPlugin ๆ่ฝๆญฃๅธธๅทฅไฝใ
import { BlockSelectionPlugin, BlockMenuPlugin } from '@platejs/selection/react';
import { createPlateEditor } from 'platejs/react';
const editor = createPlateEditor({
plugins: [
// ...ๅ
ถไปๆไปถ
BlockSelectionPlugin.configure({
options: {
enableContextMenu: true,
},
}),
BlockMenuPlugin,
],
});
้่ฟไธไธๆ่ๅ็ปไปถ้ ็ฝฎๅ่ๅ๏ผ
import { BlockSelectionPlugin, BlockMenuPlugin } from '@platejs/selection/react';
import { createPlateEditor } from 'platejs/react';
import { BlockContextMenu } from '@/components/ui/block-context-menu';
const editor = createPlateEditor({
plugins: [
// ...ๅ
ถไปๆไปถ
BlockSelectionPlugin.configure({
options: {
enableContextMenu: true,
},
}),
BlockMenuPlugin.configure({
render: { aboveEditable: BlockContextMenu },
}),
],
});
BlockSelectionPlugin.options.enableContextMenu: ๅฏ็จไธไธๆ่ๅๅ่ฝBlockMenuPlugin.render.aboveEditable: ๆๅฎ BlockContextMenu ็ปไปถๆฅๆธฒๆไธไธๆ่ๅ้่ฟ data-plate-open-context-menu ๅฑๆงๅฏๆงๅถ็นๅฎๅ
็ด ๆฏๅฆ่งฆๅไธไธๆ่ๅ๏ผ
<PlateElement data-plate-open-context-menu={false} {...props}>
{children}
</PlateElement>
ๆญคๅฑๆงๅธธ็จไบ้ฒๆญขๅจ <Editor /> ็ปไปถ็็ฉบ็ฝๅบๅๅณ้ฎๆถๅผนๅบ่ๅใ
BlockMenuPlugin็จไบ็ฎก็ๅ่ๅ็ถๆๅไธไธๆ่ๅๅ่ฝ็ๆไปถ
api.blockMenu.hide้่ๅ่ๅ
api.blockMenu.showไธบๆๅฎๅๆพ็คบ่ๅ
<API name="show"> <APIParameters> <APIItem name="id" type="'context' | string"> ่ฆๆพ็คบ่ๅ็ๅID๏ผๆไฝฟ็จ'context'่กจ็คบไธไธๆ่ๅ </APIItem> <APIItem name="position" type="{ x: number; y: number }" optional> ่ๅๆพ็คบไฝ็ฝฎๅๆ ใ่ฅๆชๆไพ๏ผๅไป ๆดๆฐopenId็ถๆ </APIItem> </APIParameters> </API>api.blockMenu.showContextMenuไธบๆๅฎๅๆพ็คบไธไธๆ่ๅๅนถ่ชๅจ้ไธญ่ฏฅๅ
<API name="showContextMenu"> <APIParameters> <APIItem name="blockId" type="string"> ่ฆๆพ็คบไธไธๆ่ๅ็ๅID </APIItem> <APIItem name="position" type="{ x: number; y: number }"> ่ๅๆพ็คบไฝ็ฝฎๅๆ </APIItem> </APIParameters> </API>โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ