List

1'use client';
2 
3import React from 'react';
4 
5import type { TListElement } from 'platejs';
6 
7import { isOrderedList } from '@platejs/list';
8import {
9  useTodoListElement,
10  useTodoListElementState,
11} from '@platejs/list/react';
12import {
13  type PlateElementProps,
14  type RenderNodeWrapper,
15  useReadOnly,
16} from 'platejs/react';
17 
18import { Checkbox } from '@/components/ui/checkbox';
19import { cn } from '@/lib/utils';
20 
21const config: Record<
22  string,
23  {
24    Li: React.FC<PlateElementProps & { lineBreakBadge?: React.ReactNode }>;
25    Marker: React.FC<PlateElementProps>;
26  }
27> = {
28  todo: {
29    Li: TodoLi,
30    Marker: TodoMarker,
31  },
32};
33 
34export const BlockList: RenderNodeWrapper = (props) => {
35  if (!props.element.listStyleType) return;
36  if (!isOrderedList(props.element)) return;
37 
38  return (props) => <List {...props} />;
39};
40 
41function List(props: PlateElementProps & { lineBreakBadge?: React.ReactNode }) {
42  const { listStart, listStyleType } = props.element as TListElement;
43  const { Li, Marker } = config[listStyleType] ?? {};
44  const List = isOrderedList(props.element) ? 'ol' : 'ul';
45 
46  return (
47    <List
48      className="relative m-0 p-0"
49      style={{ listStyleType }}
50      start={listStart}
51    >
52      {Marker && <Marker {...props} />}
53      {Li ? (
54        <Li {...props} />
55      ) : (
56        <li>
57          {props.children}
58          {props.lineBreakBadge}
59        </li>
60      )}
61    </List>
62  );
63}
64 
65function TodoMarker(props: PlateElementProps) {
66  const state = useTodoListElementState({ element: props.element });
67  const { checkboxProps } = useTodoListElement(state);
68  const readOnly = useReadOnly();
69 
70  return (
71    <div contentEditable={false}>
72      <Checkbox
73        className={cn(
74          '-left-6 absolute top-1',
75          readOnly && 'pointer-events-none'
76        )}
77        {...checkboxProps}
78      />
79    </div>
80  );
81}
82 
83function TodoLi(
84  props: PlateElementProps & { lineBreakBadge?: React.ReactNode }
85) {
86  return (
87    <li
88      className={cn(
89        'list-none',
90        (props.element.checked as boolean) &&
91          'text-muted-foreground line-through'
92      )}
93    >
94      {props.children}
95      {props.lineBreakBadge}
96    </li>
97  );
98}