โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ ๐ shadcn/directory/udecode/plate/(plugins)/(elements)/date.cn โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ
title: ๆฅๆ docs:
ๆๅฟซๆทๆทปๅ ๆฅๆๅ่ฝ็ๆนๅผๆฏไฝฟ็จ DateKit๏ผๅฎๅ
ๅซไบ้ข้
็ฝฎ็ DatePlugin ๅ Plate UI ็ปไปถใ
DateElement: ๆธฒๆๅ
่ๆฅๆๅ
็ด ๅฐๅฅไปถๆทปๅ ๅฐไฝ ็ๆไปถไธญ๏ผ
import { createPlateEditor } from 'platejs/react';
import { DateKit } from '@/components/editor/plugins/date-kit';
const editor = createPlateEditor({
plugins: [
// ...ๅ
ถไปๆไปถ
...DateKit,
],
});
npm install @platejs/date
ๅจๅๅปบ็ผ่พๅจๆถๅฐ DatePlugin ๅ
ๅซๅฐ Plate ๆไปถๆฐ็ปไธญใ
import { DatePlugin } from '@platejs/date/react';
import { createPlateEditor } from 'platejs/react';
const editor = createPlateEditor({
plugins: [
// ...ๅ
ถไปๆไปถ
DatePlugin,
],
});
ไฝฟ็จ่ชๅฎไน็ปไปถ้ ็ฝฎๆไปถๆฅๆธฒๆๆฅๆๅ ็ด ใ
import { DatePlugin } from '@platejs/date/react';
import { createPlateEditor } from 'platejs/react';
import { DateElement } from '@/components/ui/date-node';
const editor = createPlateEditor({
plugins: [
// ...ๅ
ถไปๆไปถ
DatePlugin.withComponent(DateElement),
],
});
withComponent: ๆๅฎ DateElement ๆฅๆธฒๆๅ
่ๆฅๆๅ
็ด ไฝ ๅฏไปฅๅฐๆญค้กน็ฎๆทปๅ ๅฐ ๆๅ ฅๅทฅๅ ทๆ ๆ้ฎ ๆฅๆๅ ฅๆฅๆๅ ็ด ๏ผ
{
focusEditor: true,
icon: <CalendarIcon />,
label: 'ๆฅๆ',
value: KEYS.date,
}
DatePlugin็จไบๅๆๆกฃๆทปๅ ๆฅๆๅ ็ด ็ๆไปถใ
isPointNextToNodeๆฃๆฅไธไธช็นๆฏๅฆ้ป่ฟ็นๅฎ็ฑปๅ็่็นใ
<API name="isPointNextToNode"> <APIParameters> <APIItem name="nodeType" type="string"> ่ฆๆฃๆฅ้ป่ฟๆง็่็น็ฑปๅ๏ผไพๅฆ 'date' ่กจ็คบๅ ่ๆฅๆๅ ็ด ๏ผ </APIItem> <APIItem name="options" type="object"> ๆฃๆฅ้ป่ฟๆง็้้กน </APIItem> </APIParameters> <APIOptions type="object"> <APIItem name="at" type="Point" optional> ๆฃๆฅ็่ตทๅงไฝ็ฝฎใๅฆๆชๆไพๅไฝฟ็จๅฝๅ้ๅบ้็น </APIItem> <APIItem name="reverse" type="boolean"> ๆฃๆฅๆนๅใไธบ true ๆถๆฃๆฅๅไธไธช่็น๏ผไธบ false ๆถๆฃๆฅๅไธไธช่็น </APIItem> </APIOptions> </API>tf.insert.dateโ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ