Date

Date Element
Loading...
Files
components/demo.tsx
'use client';

import React from 'react';

import { Plate } from '@udecode/plate/react';

import { editorPlugins } from '@/components/editor/plugins/editor-plugins';
import { useCreateEditor } from '@/components/editor/use-create-editor';
import { Editor, EditorContainer } from '@/components/plate-ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = useCreateEditor({
    plugins: [...editorPlugins],
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

Features

  • Insert and display dates within your text using inline date elements.
  • These dates can be easily selected and modified using a calendar interface.

Installation

npm install @udecode/plate-date

Usage

import { DatePlugin } from '@udecode/plate-date/react';
 
const plugins = [
  // ...otherPlugins,
  DatePlugin,
];

Plugins

DatePlugin

Plugin for adding date elements to your document.

API

isPointNextToNode

Parameters

Collapse all

    The editor instance.

    The type of node to check for adjacency (e.g. 'date' for inline date elements).

    Options for checking adjacency.

Optionsobject

Collapse all

    Position to check from. Uses current selection anchor if not provided.

    Direction to check. If true, checks previous node; if false, checks next node.

Transforms

editor.tf.insert.date

Parameters

Collapse all

    The date string to insert in 'YYYY-MM-DD' format.

    • Default: Current date

    Options for inserting nodes.