-
Notifications
You must be signed in to change notification settings - Fork 77
/
ListItem.tsx
33 lines (32 loc) · 1018 Bytes
/
ListItem.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import { useNodeViewContext } from "@prosemirror-adapter/react";
import type { FC } from "react";
export const ListItem: FC = () => {
const { contentRef, node, setAttrs, selected } = useNodeViewContext();
const { attrs } = node;
const checked = attrs?.checked;
const isBullet = attrs?.listType === "bullet";
return (
<li
className={[
"flex-column flex items-start gap-2",
selected ? "ProseMirror-selectednode" : "",
].join(" ")}
>
<span className="flex h-6 items-center">
{checked != null ? (
<input
className="form-checkbox rounded"
onChange={() => setAttrs({ checked: !checked })}
type="checkbox"
checked={checked}
/>
) : isBullet ? (
<span className="h-2 w-2 rounded-full bg-nord8 dark:bg-nord9" />
) : (
<span className="text-nord8">{attrs?.label}</span>
)}
</span>
<div className="min-w-0" ref={contentRef} />
</li>
);
};