โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ ๐ shadcn/directory/udecode/plate/(plugins)/(elements)/toggle.cn โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ
title: ๆๅ ๅผๅ ณ docs:
ๆๅฟซๆท็ๆนๅผๆฏไฝฟ็จ ToggleKit๏ผๅฎๅ
ๅซ้ข้
็ฝฎ็ TogglePlugin๏ผๆฏๆ็ผฉ่ฟ๏ผๅๅ
ถ Plate UI ็ปไปถใ
IndentKit: ไธบๆๅ ๅ
็ด ๆไพ็ผฉ่ฟๆฏๆToggleElement: ๆธฒๆๆๅ ๅ
็ด ๅฐๅฅไปถๅ ๅ ฅๆไปถๅ่กจ๏ผ
import { createPlateEditor } from 'platejs/react';
import { ToggleKit } from '@/components/editor/plugins/toggle-kit';
const editor = createPlateEditor({
plugins: [
// ...ๅ
ถไปๆไปถ,
...ToggleKit,
],
});
npm install @platejs/indent @platejs/toggle
ๅจๅๅปบ็ผ่พๅจๆถ๏ผๅฐ TogglePlugin ๅ IndentPlugin ๅ ๅ
ฅๆไปถๆฐ็ปใ
import { IndentPlugin } from '@platejs/indent/react';
import { TogglePlugin } from '@platejs/toggle/react';
import { createPlateEditor } from 'platejs/react';
const editor = createPlateEditor({
plugins: [
// ...ๅ
ถไปๆไปถ,
IndentPlugin,
TogglePlugin,
],
});
ไธบ IndentPlugin ๅ TogglePlugin ้
็ฝฎ็ฎๆ ๅ
็ด ๅ็ปไปถๅ้
ใ
import { IndentPlugin } from '@platejs/indent/react';
import { TogglePlugin } from '@platejs/toggle/react';
import { createPlateEditor } from 'platejs/react';
import { ToggleElement } from '@/components/ui/toggle-node';
import { KEYS } from 'platejs';
const editor = createPlateEditor({
plugins: [
// ...ๅ
ถไปๆไปถ,
IndentPlugin.configure({
inject: {
targetPlugins: [...KEYS.heading, KEYS.p, KEYS.toggle],
},
}),
TogglePlugin.withComponent(ToggleElement),
],
});
withComponent: ๆๅฎ ToggleElement ๆธฒๆๆๅ ๅ
็ด IndentPlugin.inject.targetPlugins: ้
็ฝฎๆฏๆ็ผฉ่ฟ็ๅ
็ด ็ฑปๅ๏ผๅ
ๆฌๆๅ ้กน๏ผๅฏๅจๅทฅๅ
ทๆ ไธญๆทปๅ ToggleToolbarButton ๆฅๆๅ
ฅๆๅ ๅ
็ด ใ
ๅฐๆญค้้กนๅ ๅ ฅ่ฝฌๆขๅทฅๅ ทๆ ๆ้ฎๅฏๅฐๅบๅ่ฝฌไธบๆๅ ้กน๏ผ
{
icon: <ChevronRightIcon />,
label: 'ๆๅ ๅ่กจ',
value: KEYS.toggle,
}
ๅฐๆญค้้กนๅ ๅ ฅๆๅ ฅๅทฅๅ ทๆ ๆ้ฎๅฏๆๅ ฅๆๅ ๅ ็ด ๏ผ
{
icon: <ChevronRightIcon />,
label: 'ๆๅ ๅ่กจ',
value: KEYS.toggle,
}
TogglePlugin็ฎก็ๆๅ ๅ่ฝ็ๆไปถใ
<API name="TogglePlugin"> <APIOptions type="object"> <APIItem name="openIds" type="Set<string>" optional> ๅฝๅๅฑๅผ็ๆๅ ้กนID้ๅ - **้ป่ฎคๅผ:** `new Set()` </APIItem> <APIItem name="isOpen" type="(toggleId: string) => boolean" optional> ๆฃๆฅๆๅ ้กนๆฏๅฆๅฑๅผ็ๅฝๆฐ - **้ป่ฎคๅผ:** `(id) => openIds.has(id)` </APIItem> <APIItem name="someClosed" type="(toggleIds: string[]) => boolean" optional> ๆฃๆฅๆฏๅฆๅญๅจๆถ่ตท็ถๆ็ๆๅ ้กน - **้ป่ฎคๅผ:** `(ids) => ids.some(id => !isOpen(id))` </APIItem> </APIOptions> </API>api.toggle.toggleIdsๅๆขๆๅฎๆๅ ้กน็ๅฑๅผ็ถๆใ
<API name="editor.api.toggle.toggleIds"> ๅๆขๆๅ ้กนๅฑๅผ็ถๆ <APIParameters> <APIItem name="ids" type="string[]"> ้่ฆๅๆข็ๅ ็ด IDๆฐ็ป </APIItem> <APIItem name="force" type="boolean | null" optional> ๅผบๅถๅๆข็ถๆ๏ผ - `true`: ๅฑๅผๆๆ - `false`: ๆถ่ตทๆๆ - `null`: ๅๆขๅฝๅ็ถๆ </APIItem> </APIParameters> </API>openNextTogglesๅฐๅฝๅ้ๅบๆๅจๅบๅๆ ่ฎฐไธบๅฑๅผ็ๆๅ ้กนใ
useToggleToolbarButtonState่ทๅๆๅ ๅทฅๅ ทๆ ๆ้ฎ็ถๆ็้ฉๅญใ
<API name="useToggleToolbarButtonState"> <APIReturns type="object"> <APIItem name="pressed" type="boolean"> ๆ้ฎๆฏๅฆๅคไบๆไธ็ถๆ </APIItem> </APIReturns> </API>useToggleToolbarButtonๅค็ๆๅ ๅทฅๅ ทๆ ๆ้ฎ่กไธบ็้ฉๅญใ
<API name="useToggleToolbarButton"> <APIState> <APIItem name="pressed" type="boolean"> ๆ้ฎๆฏๅฆๅคไบๆไธ็ถๆ </APIItem> </APIState> <APIReturns type="object"> <APIItem name="props" type="object"> ๆๅ ๆ้ฎๅฑๆง <APISubList> <APISubListItem parent="props" name="pressed" type="boolean"> ๆฏๅฆๆไธ็ถๆ </APISubListItem> <APISubListItem parent="props" name="onClick" type="function"> ๅๆข่็น็ฑปๅๅนถ่็ฆ็ผ่พๅจ </APISubListItem> <APISubListItem parent="props" name="onMouseDown" type="function"> ้ฒๆญข็นๅปๆถๅคฑๅป็ฆ็น </APISubListItem> </APISubList> </APIItem> </APIReturns> </API>useToggleButtonState่ทๅๆๅ ๆ้ฎ็ถๆ็้ฉๅญใ
<API name="useToggleButtonState"> ่ทๅๆๅ ๆ้ฎ็ถๆ <APIParameters> <APIItem name="toggleId" type="string"> ๆๅ ๅ ็ด ID </APIItem> </APIParameters> <APIReturns type="object"> <APIItem name="toggleId" type="string"> ๆๅ ๅ ็ด ID </APIItem> <APIItem name="open" type="boolean"> ๆฏๅฆๅคไบๅฑๅผ็ถๆ </APIItem> </APIReturns> </API>useToggleButtonๅค็ๆๅ ๆ้ฎ่กไธบ็้ฉๅญใ
<API name="useToggleButton"> ๅค็ๆๅ ๆ้ฎ่กไธบ <APIParameters> <APIItem name="toggleId" type="string"> ๆๅ ๅ ็ด ID </APIItem> <APIItem name="open" type="boolean"> ๆฏๅฆๅฑๅผ็ถๆ </APIItem> </APIParameters> <APIReturns type="object"> <APIItem name="toggleId" type="string"> ๆๅ ๅ ็ด ID </APIItem> <APIItem name="open" type="boolean"> ๆฏๅฆๅฑๅผ็ถๆ </APIItem> <APIItem name="buttonProps" type="object"> ๆๅ ๆ้ฎๅฑๆง <APISubList> <APISubListItem parent="buttonProps" name="onClick" type="function"> ๅๆขๅฑๅผ็ถๆ </APISubListItem> <APISubListItem parent="buttonProps" name="onMouseDown" type="function"> ้ฒๆญข็นๅปๆถๅคฑๅป็ฆ็น </APISubListItem> </APISubList> </APIItem> </APIReturns> </API>โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ