日期 - Plate — ContextQMD

功能特性

使用内联日期元素在文本中插入和显示日期
可通过日历界面轻松选择和修改这些日期

</PackageInfo>

套件使用

<Steps>

安装

最快捷添加日期功能的方式是使用 DateKit，它包含了预配置的 DatePlugin 和 Plate UI 组件。

DateElement: 渲染内联日期元素

添加套件

将套件添加到你的插件中：

tsx

import { createPlateEditor } from 'platejs/react';
import { DateKit } from '@/components/editor/plugins/date-kit';

const editor = createPlateEditor({
  plugins: [
    // ...其他插件
    ...DateKit,
  ],
});

</Steps>

手动配置

<Steps>

安装

bash

npm install @platejs/date

添加插件

在创建编辑器时将 DatePlugin 包含到 Plate 插件数组中。

tsx

import { DatePlugin } from '@platejs/date/react';
import { createPlateEditor } from 'platejs/react';

const editor = createPlateEditor({
  plugins: [
    // ...其他插件
    DatePlugin,
  ],
});

配置插件

使用自定义组件配置插件来渲染日期元素。

tsx

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 来渲染内联日期元素

插入工具栏按钮

你可以将此项目添加到插入工具栏按钮来插入日期元素：

tsx

{
  focusEditor: true,
  icon: <CalendarIcon />,
  label: '日期',
  value: KEYS.date,
}

</Steps>

插件

`DatePlugin`

用于向文档添加日期元素的插件。

API

`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`

<API name="insert.date"> <APIParameters> <APIItem name="date" type="string" optional> 要插入的日期字符串，格式为 'YYYY-MM-DD' - **默认值:** 当前日期 </APIItem> <APIItem name="options" type="InsertNodesOptions" optional> 插入节点的选项 </APIItem> </APIParameters> </API>