add task item view

Author: goranmoomin

apps/desktop/src/editor/index.tsx

@@ -56,6 +56,7 @@ import {
   setSearchState,
 } from "./plugins";
 import { schema } from "./schema";
+import { TaskItemView } from "./task-item-view";
 
 export type { MentionConfig, FileHandlerConfig, PlaceholderFunction };
 export { schema };
@@ -103,6 +104,7 @@ interface EditorProps {
 const nodeViews = {
   image: ResizableImageView,
   "mention-@": MentionNodeView,
+  taskItem: TaskItemView,
 };
 
 function ViewCapture({

apps/desktop/src/editor/task-item-view.tsx

@@ -0,0 +1,51 @@
+import {
+  type NodeViewComponentProps,
+  useEditorEventCallback,
+  useEditorState,
+} from "@handlewithcare/react-prosemirror";
+import { forwardRef, type ReactNode } from "react";
+
+export const TaskItemView = forwardRef<
+  HTMLLIElement,
+  NodeViewComponentProps & { children?: ReactNode }
+>(({ nodeProps, children, ...htmlAttrs }, ref) => {
+  const { node, getPos } = nodeProps;
+  const checked = node.attrs.checked;
+
+  const pos = getPos();
+  const { selection } = useEditorState();
+  const isSelected =
+    pos >= selection.from && pos + node.nodeSize <= selection.to - 1;
+
+  const handleChange = useEditorEventCallback((view) => {
+    if (!view) return;
+    const pos = getPos();
+    const tr = view.state.tr.setNodeMarkup(pos, undefined, {
+      ...node.attrs,
+      checked: !checked,
+    });
+    view.dispatch(tr);
+  });
+
+  return (
+    <li
+      ref={ref}
+      {...htmlAttrs}
+      data-type="taskItem"
+      data-checked={checked ? "true" : "false"}
+    >
+      <label contentEditable={false} suppressContentEditableWarning>
+        <input
+          type="checkbox"
+          checked={checked}
+          onChange={handleChange}
+          onMouseDown={(e) => e.preventDefault()}
+          data-selected={isSelected ? "true" : undefined}
+        />
+      </label>
+      <div>{children}</div>
+    </li>
+  );
+});
+
+TaskItemView.displayName = "TaskItemView";

packages/tiptap/src/styles/nodes/list.css

@@ -44,8 +44,4 @@
       }
     }
   }
-
-  li p {
-    display: inline;
-  }
 }

packages/tiptap/src/styles/nodes/task-list.css

@@ -17,6 +17,8 @@
       > label {
         flex: 0 0 auto;
         margin-right: 6px;
+        -webkit-user-select: none;
+        -moz-user-select: none;
         user-select: none;
         position: relative;
         display: inline-flex;
@@ -36,11 +38,17 @@
       width: 18px;
       height: 18px;
       border: 1.5px solid #000000;
+      border-radius: 4px;
       margin: 0;
       transition: all 0.2s ease;
       position: relative;
       margin-top: 3px;
 
+      &[data-selected="true"] {
+        border-color: #3b82f6;
+        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
+      }
+
       &:checked {
         background-color: #3b82f6;
         border-color: #3b82f6;