Add support for task items in the Note Editor

Author: embium

CHANGES.txt

@@ -78,4 +78,10 @@
 
 ## 0.1.4
 
-- Persist states through PouchDB - ensuring your data stays connected and is never lost
+- Persist states through PouchDB - ensuring your data stays connected and is never lost
+
+## 0.1.5
+
+- Add a confirmation dialog for deleting chat messages
+- Add an animation for when a user copies a message
+- Add support for task items in the Note Editor

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "notebit",
   "description": "Notebit is a cross-platform desktop note-taking application built with Electron, React, and TypeScript.",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "author": {
     "email": "mikeymooney1991@gmail.com",
     "name": "Michael Mooney"
@@ -33,7 +33,7 @@
     "@legendapp/state": "^2.1.14",
     "@radix-ui/react-accordion": "^1.2.8",
     "@radix-ui/react-alert-dialog": "^1.1.11",
-    "@radix-ui/react-checkbox": "^1.2.3",
+    "@radix-ui/react-checkbox": "^1.3.2",
     "@radix-ui/react-collapsible": "^1.1.8",
     "@radix-ui/react-context-menu": "^2.2.12",
     "@radix-ui/react-dialog": "^1.1.13",
@@ -52,6 +52,8 @@
     "@tanstack/react-query": "^4.36.1",
     "@tanstack/react-router": "^1.48.4",
     "@tiptap/extension-link": "^2.11.9",
+    "@tiptap/extension-task-item": "^2.12.0",
+    "@tiptap/extension-task-list": "^2.12.0",
     "@tiptap/pm": "^2.11.7",
     "@tiptap/react": "^2.11.7",
     "@tiptap/starter-kit": "^2.11.7",

package.json

@@ -0,0 +1,30 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/shared/utils/index.ts"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

src/web/components/ui/checkbox.tsx

@@ -3,6 +3,8 @@ import { useEditor } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
 import { Markdown } from 'tiptap-markdown';
 import Link from '@tiptap/extension-link';
+import TaskList from '@tiptap/extension-task-list';
+import TaskItem from '@tiptap/extension-task-item';
 
 // State
 import { setNoteContent } from '@/features/notes/state/notesState';
@@ -34,6 +36,8 @@ export function useNoteEditor(initialContent: string) {
         tightListClass: 'tight',
         bulletListMarker: '-',
         linkify: true,
+        transformPastedText: true,
+        transformCopiedText: true,
       }),
       Link.configure({
         openOnClick: false, // Disable default handling so we can use our own
@@ -50,6 +54,17 @@ export function useNoteEditor(initialContent: string) {
           { left: '$', right: '$', display: false },
         ],
       }),
+      TaskList.configure({
+        HTMLAttributes: {
+          class: 'task-list',
+        },
+      }),
+      TaskItem.configure({
+        nested: true,
+        HTMLAttributes: {
+          class: 'task-item',
+        },
+      }),
     ],
     content: initialContent,
     editorProps: {

src/web/features/notes/hooks/useNoteEditor.ts

@@ -175,3 +175,96 @@
   z-index: 1;
   cursor: text;
 }
+
+/* Task List Styles */
+ul[data-type='taskList'] {
+  list-style: none;
+  padding: 0;
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+ul[data-type='taskList'] li {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 0.2em;
+}
+
+ul[data-type='taskList'] li > label {
+  flex: 0 0 auto;
+  margin-right: 0.5em;
+  user-select: none;
+  position: relative;
+}
+
+ul[data-type='taskList'] li > div {
+  flex: 1 1 auto;
+}
+
+ul[data-type='taskList'] li > div > p {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+/* Custom shadcn-style checkbox */
+ul[data-type='taskList'] input[type='checkbox'] {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  margin: 0.2em 0.5em 0 0;
+  border: 1px solid hsl(var(--input));
+  background-color: transparent;
+  cursor: pointer;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition:
+    border-color 0.2s,
+    background-color 0.2s;
+}
+
+/* Dark mode styles */
+.dark ul[data-type='taskList'] input[type='checkbox'] {
+  background-color: hsl(var(--input) / 0.3);
+  margin-top: 0.2em;
+}
+
+/* Checked state */
+ul[data-type='taskList'] input[type='checkbox']:checked {
+  background-color: hsl(var(--primary));
+  border-color: hsl(var(--primary));
+}
+
+/* Focus state */
+ul[data-type='taskList'] input[type='checkbox']:focus-visible {
+  outline: none;
+  border-color: hsl(var(--ring));
+  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.5);
+}
+
+/* Checkmark - improved version */
+ul[data-type='taskList'] input[type='checkbox']:checked::before {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 5px;
+  width: 4px;
+  height: 8px;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+/* Nested task lists */
+ul[data-type='taskList'] ul[data-type='taskList'] {
+  padding-left: 1.5em;
+}
+
+/* When a task is checked, style the text */
+ul[data-type='taskList'] li[data-checked='true'] > div > p {
+  color: hsl(var(--muted-foreground));
+  text-decoration: line-through;
+}