feat: add checklist support in RichText editor and viewer components

apps/web/app/components/RichText/Editor.tsx

@@ -1,9 +1,9 @@
 import { EditorContent, useEditor } from "@tiptap/react";
-// eslint-disable-next-line import/no-named-as-default
-import StarterKit from "@tiptap/starter-kit";
 
 import { cn } from "~/lib/utils";
 
+import { plugins } from "./plugins";
+import { defaultClasses } from "./styles";
 import EditorToolbar from "./toolbar/EditorToolbar";
 
 type EditorProps = {
@@ -16,7 +16,7 @@ type EditorProps = {
 
 const Editor = ({ content, placeholder, onChange, id, className }: EditorProps) => {
   const editor = useEditor({
-    extensions: [StarterKit],
+    extensions: [...plugins],
     content: content,
     onUpdate: ({ editor }) => {
       onChange(editor.getHTML());
@@ -30,6 +30,8 @@ const Editor = ({ content, placeholder, onChange, id, className }: EditorProps)
 
   if (!editor) return <></>;
 
+  const editorClasses = cn("h-full", defaultClasses.ul, defaultClasses.ol, defaultClasses.taskList);
+
   return (
     <div className="prose w-full max-w-none overflow-hidden rounded-lg border border-neutral-300 bg-background dark:prose-invert [&_.ProseMirror]:leading-tight">
       <EditorToolbar editor={editor} />
@@ -39,7 +41,12 @@ const Editor = ({ content, placeholder, onChange, id, className }: EditorProps)
           className,
         )}
       >
-        <EditorContent id={id} editor={editor} placeholder={placeholder} className="h-full" />
+        <EditorContent
+          id={id}
+          editor={editor}
+          placeholder={placeholder}
+          className={editorClasses}
+        />
       </div>
     </div>
   );

apps/web/app/components/RichText/Viever.tsx

@@ -1,21 +1,17 @@
 import { EditorContent, useEditor } from "@tiptap/react";
-// eslint-disable-next-line import/no-named-as-default
-import StarterKit from "@tiptap/starter-kit";
 
 import { cn } from "~/lib/utils";
 
+import { plugins } from "./plugins";
+import { defaultClasses } from "./styles";
+
 type ViewerProps = {
   content: string;
   style?: "default" | "prose";
   className?: string;
   variant?: "default" | "lesson";
 };
 
-const defaultClasses = {
-  ul: "[&>div>ul]:list-disc [&>div>ul]:list-inside [&>div>ul>li>p]:inline",
-  ol: "[&>div>ol]:list-decimal [&>div>ol]:list-inside [&>div>ol>li>p]:inline",
-};
-
 const lessonVariantClasses = {
   layout: "[&>div]:flex [&>div]:flex-col [&>div]:gap-y-6",
   h2: "[&>div>h2]:h6 [&>div>h2]:text-neutral-950",
@@ -26,7 +22,7 @@ const lessonVariantClasses = {
 
 const Viewer = ({ content, style, className, variant = "default" }: ViewerProps) => {
   const editor = useEditor({
-    extensions: [StarterKit],
+    extensions: [...plugins],
     content: content,
     editable: false,
   });
@@ -49,7 +45,12 @@ const Viewer = ({ content, style, className, variant = "default" }: ViewerProps)
         ]
       : [];
 
-  const editorClasses = cn(defaultClasses.ul, defaultClasses.ol, ...variantClasses);
+  const editorClasses = cn(
+    defaultClasses.ul,
+    defaultClasses.ol,
+    defaultClasses.taskList,
+    ...variantClasses,
+  );
 
   return (
     <article className={classNames}>

apps/web/app/components/RichText/plugins.ts

@@ -0,0 +1,19 @@
+import { TaskItem } from "@tiptap/extension-task-item";
+import { TaskList } from "@tiptap/extension-task-list";
+import { StarterKit } from "@tiptap/starter-kit";
+
+export const plugins = [
+  StarterKit,
+  TaskList.configure({
+    HTMLAttributes: {
+      class: "list-none",
+    },
+  }),
+  TaskItem.configure({
+    nested: true,
+    HTMLAttributes: {
+      class: "flex items-start gap-2 [&_p]:inline [&_p]:m-0",
+    },
+    onReadOnlyChecked: (_node, _checked) => true,
+  }),
+];

apps/web/app/components/RichText/styles.ts

@@ -0,0 +1,25 @@
+export const defaultClasses = {
+  ul: `
+      [&>div>ul]:list-disc
+      [&>div>ul]:pl-5
+      [&>div>ul>li>p]:inline
+      [&>div>ul>li>p]:text-neutral-900
+
+      [&_ul]:list-disc
+      [&_[contenteditable='true']>ul>li]:pl-0
+      [&_[contenteditable='true']>ul>li_ul_li]:pl-0
+      [&_[contenteditable='false']>ul>li]:pl-4
+      [&_[contenteditable='false']>ul>li_ul_li]:pl-4
+      [&_ul>li]:marker:text-neutral-400
+      [&_ul>li>p]:inline
+      [&_ul>li>p]:text-neutral-900
+    `,
+  ol: `
+      [&>div>ol]:list-decimal
+      [&>div>ol]:list-inside
+      [&>div>ol>li>p]:inline
+      [&>div>ol>li>ol]:pl-4
+      [&_ol>li>ol]:pl-4
+    `,
+  taskList: "[&_[data-type='taskList']]:list-none [&_[data-type='taskList']]:pl-0",
+};

apps/web/app/components/RichText/toolbar/EditorToolbar.tsx

@@ -9,11 +9,13 @@ import {
   Redo,
   Strikethrough,
   Undo,
+  CheckSquare,
 } from "lucide-react";
 
 import { Button } from "~/components/ui/button";
 import { ToggleGroup, Toolbar } from "~/components/ui/toolbar";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "~/components/ui/tooltip";
+import { cn } from "~/lib/utils";
 
 import { FormatType } from "./FormatType";
 
@@ -135,6 +137,23 @@ const EditorToolbar = ({ editor }: EditorToolbarProps) => {
             </TooltipTrigger>
             <TooltipContent>Horizontal Rule: Inserts a horizontal line</TooltipContent>
           </Tooltip>
+
+          <Tooltip>
+            <TooltipTrigger>
+              <Button
+                size="sm"
+                className={cn("bg-transparent text-black", {
+                  "bg-blue-100": editor.isActive("taskList"),
+                  "hover:bg-blue-100": !editor.isActive("taskList"),
+                })}
+                onClick={handleToggle(() => editor.chain().focus().toggleTaskList().run())}
+              >
+                <CheckSquare className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Checkbox: Adds a checklist</TooltipContent>
+          </Tooltip>
+
           <FormatType editor={editor} />
         </ToggleGroup>
         <ToggleGroup

apps/web/package.json

@@ -57,6 +57,8 @@
     "@tiptap/extension-document": "2.10.3",
     "@tiptap/extension-highlight": "2.10.3",
     "@tiptap/extension-paragraph": "2.10.3",
+    "@tiptap/extension-task-item": "^2.11.3",
+    "@tiptap/extension-task-list": "^2.11.3",
     "@tiptap/extension-text": "2.10.3",
     "@tiptap/extension-text-style": "2.10.3",
     "@tiptap/pm": "2.9.1",