update elements to support date

apps/web/src/app/test/report-playground/ReportPlayground.tsx

@@ -199,6 +199,28 @@ const value: ReportElements = [
     type: 'h1',
     id: '39ZlrKsOyn'
   },
+  {
+    type: 'p',
+    id: 'rIfHWhomdr',
+    children: [
+      {
+        text: ''
+      },
+      {
+        children: [
+          {
+            text: ''
+          }
+        ],
+        date: 'Sat Aug 02 2025',
+        type: 'date',
+        id: 'k4oDWCxlxA'
+      },
+      {
+        text: ' '
+      }
+    ]
+  },
   {
     children: [
       {

apps/web/src/components/ui/calendar/calendar.tsx

@@ -42,7 +42,7 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
           'bg-primary   text-background hover:bg-primary hover:text-background focus:bg-primary focus:text-background',
         day_today: 'bg-item-select text-accent-foreground',
         day_outside:
-          'day-outside text-gray-light aria-selected:bg-item-select/50 aria-selected:text-gray-light cursor-not-allowed!',
+          'day-outside text-gray-light aria-selected:bg-item-select/50 aria-selected:text-gray-light ',
         day_disabled: 'text-gray-light opacity-50 cursor-not-allowed!',
         day_range_middle: 'aria-selected:bg-item-select aria-selected:text-accent-foreground',
         day_hidden: 'invisible',

apps/web/src/components/ui/report/elements/DateNode.tsx

@@ -68,6 +68,11 @@ export function DateElement(props: PlateElementProps<TDateElement>) {
         <PopoverContent className="w-auto p-0">
           <Calendar
             selected={new Date(element.date as string)}
+            disabled={(date) => {
+              console.log(date);
+              return false;
+            }}
+            disableNavigation={false}
             onSelect={(date) => {
               if (!date) return;
 

apps/web/src/components/ui/report/elements/ImportToolbarButton.tsx

@@ -20,6 +20,7 @@ import {
 
 import { ToolbarButton } from '@/components/ui/toolbar/Toolbar';
 import { THEME_RESET_STYLE } from '@/styles/theme-reset';
+import type { SelectedFilesOrErrors } from 'use-file-picker/types';
 
 type ImportType = 'html' | 'markdown';
 
@@ -47,7 +48,8 @@ export function ImportToolbarButton(props: DropdownMenuProps) {
   const { openFilePicker: openMdFilePicker } = useFilePicker({
     accept: ['.md', '.mdx'],
     multiple: false,
-    onFilesSelected: async ({ plainFiles }) => {
+    onFilesSelected: async ({ plainFiles }: SelectedFilesOrErrors<unknown, unknown>) => {
+      if (!plainFiles) return;
       const text = await plainFiles[0].text();
 
       const nodes = getFileNodes(text, 'markdown');
@@ -59,7 +61,8 @@ export function ImportToolbarButton(props: DropdownMenuProps) {
   const { openFilePicker: openHtmlFilePicker } = useFilePicker({
     accept: ['text/html'],
     multiple: false,
-    onFilesSelected: async ({ plainFiles }) => {
+    onFilesSelected: async ({ plainFiles }: SelectedFilesOrErrors<unknown, unknown>) => {
+      if (!plainFiles) return;
       const text = await plainFiles[0].text();
 
       const nodes = getFileNodes(text, 'html');

apps/web/src/components/ui/report/elements/LinkFloatingToolbar.tsx

@@ -158,6 +158,11 @@ const LinkEditPopoverContent = ({
 
   const inputClassName = linkInputVariants();
 
+  const realTimeUpdate = (e: React.ChangeEvent<HTMLInputElement>) => {
+    console.log(e.target.value);
+    textInputProps.onChange(e);
+  };
+
   return (
     <div className="flex w-[330px] flex-col" {...inputProps}>
       <div className="flex items-center">
@@ -182,6 +187,7 @@ const LinkEditPopoverContent = ({
           placeholder="Text to display"
           data-plate-focus
           {...textInputProps}
+          onChange={realTimeUpdate}
         />
       </div>
     </div>

packages/server-shared/src/reports/report-elements.ts

@@ -63,6 +63,13 @@ export const AnchorSchema = z.object({
   children: z.array(z.union([TextSchema, MentionSchema])),
 });
 
+const DateSchema = z.object({
+  type: z.literal('date'),
+  date: z.string(),
+  children: z.array(TextSchema),
+  id: z.string().optional(),
+});
+
 /**
  * Block Elements
  * --------------
@@ -93,7 +100,7 @@ const ListStylesAttributesSchema = z.object({
 export const ParagraphElementSchema = z
   .object({
     type: z.literal('p'),
-    children: z.array(z.union([TextSchema, AnchorSchema, MentionSchema])),
+    children: z.array(z.union([TextSchema, AnchorSchema, MentionSchema, DateSchema])),
   })
   .merge(AttributesSchema)
   .merge(ListStylesAttributesSchema);