Date Element

1'use client';
2 
3import * as React from 'react';
4 
5import {
6  formatDateValue,
7  getDateDisplayLabel,
8  parseCanonicalDateValue,
9} from '@platejs/date';
10import type { TDateElement } from 'platejs';
11import type { PlateElementProps } from 'platejs/react';
12 
13import { PlateElement, useReadOnly } from 'platejs/react';
14 
15import { Calendar } from '@/components/ui/calendar';
16import {
17  Popover,
18  PopoverContent,
19  PopoverTrigger,
20} from '@/components/ui/popover';
21import { cn } from '@/lib/utils';
22import { inlineSuggestionVariants } from '@/registry/lib/suggestion';
23 
24export function DateElement(props: PlateElementProps<TDateElement>) {
25  const { editor, element } = props;
26  const readOnly = useReadOnly();
27 
28  const trigger = (
29    <span
30      className={cn(
31        'w-fit cursor-pointer rounded-sm bg-muted px-1 text-muted-foreground',
32        inlineSuggestionVariants()
33      )}
34      contentEditable={false}
35      draggable
36    >
37      {element.date || element.rawDate ? (
38        getDateDisplayLabel(element)
39      ) : (
40        <span>Pick a date</span>
41      )}
42    </span>
43  );
44 
45  return (
46    <PlateElement
47      {...props}
48      className="inline-block"
49      attributes={{
50        ...props.attributes,
51        contentEditable: false,
52      }}
53    >
54      {readOnly ? (
55        trigger
56      ) : (
57        <Popover>
58          <PopoverTrigger asChild>{trigger}</PopoverTrigger>
59          <PopoverContent className="w-auto p-0">
60            <Calendar
61              selected={parseCanonicalDateValue(element.date ?? '')}
62              onSelect={(date) => {
63                if (!date) return;
64 
65                editor.tf.setNodes(
66                  { date: formatDateValue(date), rawDate: undefined },
67                  { at: element }
68                );
69              }}
70              mode="single"
71              initialFocus
72            />
73          </PopoverContent>
74        </Popover>
75      )}
76      {props.children}
77    </PlateElement>
78  );
79}