feat: todo block

packages/react-notion-custom/CONTRIBUTING-KR.md

@@ -649,11 +649,11 @@ fetchNotionPage();
 | Heading 3                | ✅ Yes    | `heading_3`            |      |
 | Bulleted List Item       | ❌ No     | `bulleted_list_item`   |      |
 | Numbered List Item       | ❌ No     | `numbered_list_item`   |      |
-| To-do                    | ❌ No     | `to_do`                |      |
+| To-do                    | ✅ Yes    | `to_do`                |      |
 | Toggle                   | ✅ Yes    | `toggle`               |      |
 | Quote                    | ❌ No     | `quote`                |      |
 | Callout                  | ❌ No     | `callout`              |      |
-| Equation                 | ❌ No     | `equation`             |      |
+| Equation                 | ✅ Yes    | `equation`             |      |
 | Code                     | ❌ No     | `code`                 |      |
 | Image                    | ❌ No     | `image`                |      |
 | Video                    | ❌ No     | `video`                |      |

packages/react-notion-custom/CONTRIBUTING.md

@@ -652,11 +652,11 @@ Here's a list of Notion block types currently supported in react-notion-custom.
 | Heading 3                | ✅ Yes         | `heading_3`            |      |
 | Bulleted List Item       | ❌ No          | `bulleted_list_item`   |      |
 | Numbered List Item       | ❌ No          | `numbered_list_item`   |      |
-| To-do                    | ❌ No          | `to_do`                |      |
+| To-do                    | ✅ Yes         | `to_do`                |      |
 | Toggle                   | ✅ Yes         | `toggle`               |      |
 | Quote                    | ❌ No          | `quote`                |      |
 | Callout                  | ❌ No          | `callout`              |      |
-| Equation                 | ❌ No          | `equation`             |      |
+| Equation                 | ✅ Yes         | `equation`             |      |
 | Code                     | ❌ No          | `code`                 |      |
 | Image                    | ❌ No          | `image`                |      |
 | Video                    | ❌ No          | `video`                |      |

packages/react-notion-custom/src/lib/components/index.ts

@@ -2,8 +2,9 @@ import Headings from "./headings";
 import Paragraph from "./paragraph";
 import Toggle from "./toggle";
 import Equation from "./equation";
+import Todo from "./todo";
 
-export { Headings, Paragraph, Toggle, Equation };
+export { Headings, Paragraph, Toggle, Equation, Todo };
 
 export default {
   heading_1: Headings,
@@ -12,4 +13,5 @@ export default {
   paragraph: Paragraph,
   toggle: Toggle,
   equation: Equation,
+  to_do: Todo,
 };

packages/react-notion-custom/src/lib/components/todo.tsx

@@ -0,0 +1,85 @@
+import React, { useState, useCallback } from "react";
+import type { TodoArgs } from "../types";
+import { getColorCss } from "../utils";
+import RichText from "./internal/rich-text";
+
+type TodoProps = {
+  children?: React.ReactNode;
+} & TodoArgs;
+
+const Todo: React.FC<TodoProps> = ({ children, ...props }) => {
+  const {
+    to_do: { color, rich_text: texts, checked: initialChecked },
+  } = props;
+  const [checked, setChecked] = useState(initialChecked);
+
+  const handleToggle = useCallback(() => {
+    setChecked((prev) => !prev);
+  }, []);
+
+  return (
+    <div className={`notion-block notion-to-do ${getColorCss(color)}`}>
+      <div
+        aria-checked={checked}
+        className={`notion-to-do-content ${checked ? "notion-to-do-checked" : ""}`}
+      >
+        <div className="notion-to-do-checkbox">
+          <CheckBox checked={checked} onChange={handleToggle} />
+        </div>
+        <p className="notion-to-do-text">
+          <RichText props={texts} />
+        </p>
+      </div>
+      {children}
+    </div>
+  );
+};
+
+export default Todo;
+
+const CheckBox: React.FC<{ checked: boolean; onChange: () => void }> = ({
+  checked,
+  onChange,
+}) => {
+  return (
+    <div
+      className={`notion-property-checkbox ${
+        checked
+          ? "notion-property-checkbox-checked"
+          : "notion-property-checkbox-unchecked"
+      }`}
+      onClick={onChange}
+    >
+      {checked ? (
+        <svg
+          viewBox="-1 -1 14 14"
+          style={{
+            width: "12px",
+            height: "12px",
+            display: "block",
+            flexShrink: 0,
+            backfaceVisibility: "hidden",
+            fill: "white",
+          }}
+          className="check"
+        >
+          <polygon points="5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039" />
+        </svg>
+      ) : (
+        <svg
+          viewBox="0 0 16 16"
+          className="checkboxSquare"
+          style={{
+            width: "100%",
+            height: "100%",
+            display: "block",
+            flexShrink: 0,
+            backfaceVisibility: "hidden",
+          }}
+        >
+          <path d="M1.5,1.5 L1.5,14.5 L14.5,14.5 L14.5,1.5 L1.5,1.5 Z M0,0 L16,0 L16,16 L0,16 L0,0 Z" />
+        </svg>
+      )}
+    </div>
+  );
+};

packages/react-notion-custom/src/lib/index.css

@@ -590,3 +590,51 @@
 .notion-equation:focus {
   background: var(--select-color-2);
 }
+
+.notion-to-do-content {
+  display: flex;
+}
+
+.notion-to-do-checkbox {
+  display: inline-block;
+  padding: 8px 6px;
+}
+
+.notion-to-do-text {
+  padding: 3px 2px;
+}
+
+.notion-to-do-checked .notion-to-do-text {
+  text-decoration: line-through;
+  opacity: 0.6;
+}
+
+.notion-property-checkbox {
+  width: 16px;
+  height: 16px;
+}
+
+.notion-property-checkbox-checked {
+  width: 16px;
+  height: 16px;
+  background: var(--select-color-0);
+}
+
+.notion-property-checkbox-checked svg {
+  position: relative;
+  display: block;
+  top: 1px;
+  left: 1px;
+  width: 14px;
+  height: 14px;
+  fill: #fff;
+}
+
+.notion-property-checkbox-unchecked {
+  width: 16px;
+  height: 16px;
+}
+
+.notion-property-checkbox-unchecked svg {
+  fill: var(--fg-color);
+}