โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ ๐ shadcn/directory/udecode/plate/(plugins)/(functionality)/dnd.cn โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ
title: ๆๆฝๅ่ฝ description: ้่ฟๆๆฝๅบๅๆฅ้ๆฐ็ป็ป็ผ่พๅจไธญ็ๅ ๅฎนใ docs:
ๆๅฟซๆท็ๆนๅผๆฏไฝฟ็จ DndKit ๅฅไปถ๏ผๅฎๅ
ๅซ้ข้
็ฝฎ็ DndPluginใReact DnD ่ฎพ็ฝฎไปฅๅ BlockDraggable UI็ปไปถใ
BlockDraggable: ไธบๅบๅๆธฒๆๆๆฝๆๆๅๆพ็ฝฎๆ็คบๅจimport { createPlateEditor } from 'platejs/react';
import { DndKit } from '@/components/editor/plugins/dnd-kit';
const editor = createPlateEditor({
plugins: [
// ...ๅ
ถไปๆไปถ
...DndKit,
],
});
npm install @platejs/dnd react-dnd react-dnd-html5-backend
import { DndPlugin } from '@platejs/dnd';
import { createPlateEditor } from 'platejs/react';
const editor = createPlateEditor({
plugins: [
// ...ๅ
ถไปๆไปถ
DndPlugin,
],
});
้่ฟๅฏๆๆฝ็ปไปถๅDnD provider้ ็ฝฎๆๆพๅ่ฝ๏ผ
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import { DndPlugin } from '@platejs/dnd';
DndPlugin.configure({
render: {
aboveSlate: ({ children }) => (
<DndProvider backend={HTML5Backend}>{children}</DndProvider>
),
},
});
render.aboveNodes: ๅ้
BlockDraggable ็ปไปถๅจๅบๅไธๆนๆธฒๆๆๆฝๆๆrender.aboveSlate: ็จ DndProvider ๅ
่ฃน็ผ่พๅจใๅฆๆReactๆ ไธญๅทฒๆ DndProvider ๅฏ็งป้คๆญค้
็ฝฎๆทปๅ ่ชๅจๆปๅจๅๆไปถๆๆพๅค็๏ผ
import { DndPlugin } from '@platejs/dnd';
import { PlaceholderPlugin } from '@platejs/media/react';
DndPlugin.configure({
options: {
enableScroller: true,
onDropFiles: ({ dragItem, editor, target }) => {
editor
.getTransforms(PlaceholderPlugin)
.insert.media(dragItem.files, { at: target, nextBlock: false });
},
},
render: {
aboveNodes: BlockDraggable,
aboveSlate: ({ children }) => (
<DndProvider backend={HTML5Backend}>{children}</DndProvider>
),
},
});
enableScroller: ๅฏ็จๆๆฝ่ณ่ง็ช่พน็ผๆถ็่ชๅจๆปๅจonDropFiles: ๅค็ๆไปถๆๆพ๏ผๅจ็ฎๆ ไฝ็ฝฎๆๅ
ฅๅชไฝๅบๅDndPluginๅฎ็ฐ็ผ่พๅจๅ ๆๆฝๅ่ฝ็ๆไปถใ
<API name="DndPlugin"> <APIOptions> <APIItem name="enableScroller" type="boolean" optional> ๆฏๅฆๅฏ็จๆๆฝ่ณ่ง็ช่พน็ผ่ชๅจๆปๅจ - **้ป่ฎคๅผ:** `false` </APIItem> <APIItem name="scrollerProps" type="Partial<ScrollerProps>" optional> ๅฝๅฏ็จๆปๅจๆถ็ `Scroller` ็ปไปถๅฑๆง </APIItem> <APIItem name="onDropFiles" type="function" optional> ๆไปถๆๆพไบไปถๅค็ๅจ <APISubList> <APISubListItem parent="onDropFiles" name="id" type="string"> ็ฎๆ ๅ ็ด ID </APISubListItem> <APISubListItem parent="onDropFiles" name="dragItem" type="FileDragItemNode"> ๅ ๅซๆๆพๆไปถ็ๅฏน่ฑก </APISubListItem> <APISubListItem parent="onDropFiles" name="editor" type="PlateEditor"> ็ผ่พๅจๅฎไพ </APISubListItem> <APISubListItem parent="onDropFiles" name="target" type="Path"> ๆไปถๅบๆๅ ฅ็่ทฏๅพ </APISubListItem> </APISubList> </APIItem> <APIItem name="dropTarget" type="{ id: string | null; line: DropLineDirection }" optional> ๅฝๅๆๆพ็ฎๆ ็ถๆ๏ผๅ ๅซ็ฎๆ ๅ ็ด IDๅๆพ็ฝฎ็บฟๆนๅ </APIItem> </APIOptions> </API>focusBlockStartById้่ฟID้ไธญๅบๅ่ตทๅงไฝ็ฝฎๅนถ่็ฆ็ผ่พๅจใ
<API name="focusBlockStartById"> <APIParameters> <APIItem name="id" type="string"> ่ฆ่็ฆ็ๅบๅID </APIItem> </APIParameters> </API>getBlocksWithId่ฟๅๅธฆๆID็ๅบๅๆฐ็ปใ
<API name="getBlocksWithId"> <APIOptions type="EditorNodesOptions"> ่ทๅ่็นๆก็ฎ็้้กน </APIOptions> <APIReturns type="NodeEntry[]"> ๅธฆๆID็ๅบๅๆฐ็ป </APIReturns> </API>selectBlockById้่ฟID้ไธญๅบๅใ
<API name="selectBlockById"> <APIParameters> <APIItem name="id" type="string"> ่ฆ้ไธญ็ๅบๅID </APIItem> </APIParameters> </API>useDndNode็ปๅไบ useDragNode ๅ useDropNode ็่ชๅฎไน้ฉๅญ๏ผ็จไบๅฏ็จ็ผ่พๅจ่็น็ๆๆฝๅ่ฝใๆไพ้ป่ฎค็ๆๆฝ้ข่งๆๆ๏ผๅฏ่ชๅฎไนๆ็ฆ็จใ
useDragNodeไฝฟ็จ react-dnd ็ useDrag ้ฉๅญๅฎ็ฐ่็นๆๆฝๅ่ฝ็่ชๅฎไน้ฉๅญใ
useDraggableไฝฟๅ ็ด ๅ ทๅคๅฏๆๆฝ่กไธบ็่ชๅฎไน้ฉๅญ๏ผๆไพๅฏ่ชๅฎไนๆ็ฆ็จ็ๆๆฝ้ข่งๆๆใ
<API name="useDraggable"> <APIOptions type="object"> <APIItem name="element" type="TElement"> ่ฆ่ฎพไธบๅฏๆๆฝ็ๅ ็ด </APIItem> <APIItem name="orientation" type="'horizontal' | 'vertical'" optional> ๆๆฝๆนๅ - **้ป่ฎคๅผ:** `'vertical'` </APIItem> <APIItem name="type" type="string" optional> ๆๆฝ้กน็ฑปๅ - **้ป่ฎคๅผ:** `'block'` </APIItem> <APIItem name="onDropHandler" type="function" optional> ๅ ็ด ๆพ็ฝฎๆถ็ๅค็ๅฝๆฐ </APIItem> </APIOptions> <APIReturns type="object"> <APIItem name="handleRef" type="(element: Element | React.ReactElement | React.RefObject<any> | null) => void"> ๆๆฝๆบ่ฟๆฅๅฝๆฐ </APIItem> <APIItem name="isDragging" type="boolean"> ๅ ็ด ๆฏๅฆๆญฃๅจ่ขซๆๆฝ </APIItem> <APIItem name="previewRef" type="React.RefObject<HTMLDivElement>"> ๅฏๆๆฝๅ ็ด ็ๅผ็จ </APIItem> </APIReturns> </API>useDropNodeไฝฟ็จ react-dnd ็ useDrop ้ฉๅญๅฎ็ฐ่็นๆพ็ฝฎๅ่ฝ็่ชๅฎไน้ฉๅญใ
useDropLine่ฟๅๅ ็ด ็ๅฝๅๆพ็ฝฎ็บฟ็ถๆใ
<API name="useDropLine"> <APIOptions type="object"> <APIItem name="id" type="string" optional> ๆพ็คบๆพ็ฝฎ็บฟ็ๅ ็ด ID - **้ป่ฎคๅผ:** ๅฝๅๅ ็ด ID </APIItem> <APIItem name="orientation" type="'horizontal' | 'vertical'" optional> ๆๆนๅ่ฟๆปคๆพ็ฝฎ็บฟ - **้ป่ฎคๅผ:** `'vertical'` </APIItem> </APIOptions> <APIReturns type="object"> <APIItem name="dropLine" type="'top' | 'bottom' | 'left' | 'right' | ''"> ๅฝๅๆพ็ฝฎ็บฟๆนๅ </APIItem> </APIReturns> </API>โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ