chore: Enhancement + New Feature (#185)

* wip * wip page * chore: style * wip pages * wip pages * chore: toggle * chore: link * feat: topic search * chore: page section * refactor: apply tailwind class ordering * fix: handle loggedIn user for guest route * feat: folder & image schema * chore: move utils to shared * refactor: tailwind class ordering * feat: img ext for editor * refactor: remove qa * fix: tanstack start * fix: wrong import * chore: use toast * chore: schema
2026-01-12 12:20:23 +01:00 · 2024-10-18 21:18:20 +07:00
parent c93c634a77
commit a440828f8c
158 changed files with 2808 additions and 1064 deletions
--- a/web/shared/editor/extensions/task-item/components/task-item-view.tsx
+++ b/web/shared/editor/extensions/task-item/components/task-item-view.tsx
@@ -0,0 +1,68 @@
+import * as React from "react"
+import { NodeViewContent, Editor, NodeViewWrapper } from "@tiptap/react"
+import { Icon } from "../../../components/ui/icon"
+import { Node as ProseMirrorNode } from "@tiptap/pm/model"
+import { Node } from "@tiptap/core"
+
+interface TaskItemProps {
+  editor: Editor
+  node: ProseMirrorNode
+  updateAttributes: (attrs: Record<string, any>) => void
+  extension: Node
+}
+
+export const TaskItemView: React.FC<TaskItemProps> = ({
+  node,
+  updateAttributes,
+  editor,
+  extension,
+}) => {
+  const handleChange = React.useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const checked = event.target.checked
+
+      if (!editor.isEditable && !extension.options.onReadOnlyChecked) {
+        return
+      }
+
+      if (editor.isEditable) {
+        updateAttributes({ checked })
+      } else if (extension.options.onReadOnlyChecked) {
+        if (!extension.options.onReadOnlyChecked(node, checked)) {
+          event.target.checked = !checked
+        }
+      }
+    },
+    [editor.isEditable, extension.options, node, updateAttributes],
+  )
+
+  return (
+    <NodeViewWrapper
+      as="li"
+      data-type="taskItem"
+      data-checked={node.attrs.checked}
+    >
+      <div className="taskItem-checkbox-container">
+        <Icon
+          name="GripVertical"
+          data-drag-handle
+          className="taskItem-drag-handle"
+        />
+
+        <label>
+          <input
+            type="checkbox"
+            checked={node.attrs.checked}
+            onChange={handleChange}
+            className="taskItem-checkbox"
+          />
+        </label>
+      </div>
+      <div className="taskItem-content">
+        <NodeViewContent />
+      </div>
+    </NodeViewWrapper>
+  )
+}
+
+export default TaskItemView