Added Numbered List (#28)

* feat. numbered-list-item

* docs.numbered-list-item

Author: myjeong19

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

@@ -648,7 +648,7 @@ fetchNotionPage();
 | Heading 2                | ✅ Yes    | `heading_2`            |      |
 | Heading 3                | ✅ Yes    | `heading_3`            |      |
 | Bulleted List Item       | ❌ No     | `bulleted_list_item`   |      |
-| Numbered List Item       | ❌ No     | `numbered_list_item`   |      |
+| Numbered List Item       | ✅ Yes    | `numbered_list_item`   |      |
 | To-do                    | ❌ No     | `to_do`                |      |
 | Toggle                   | ✅ Yes    | `toggle`               |      |
 | Quote                    | ✅ Yes    | `quote`                |      |

packages/react-notion-custom/CONTRIBUTING.md

@@ -651,7 +651,7 @@ Here's a list of Notion block types currently supported in react-notion-custom.
 | Heading 2                | ✅ Yes         | `heading_2`            |      |
 | Heading 3                | ✅ Yes         | `heading_3`            |      |
 | Bulleted List Item       | ❌ No          | `bulleted_list_item`   |      |
-| Numbered List Item       | ❌ No          | `numbered_list_item`   |      |
+| Numbered List Item       | ✅ Yes         | `numbered_list_item`   |      |
 | To-do                    | ❌ No          | `to_do`                |      |
 | Toggle                   | ✅ Yes         | `toggle`               |      |
 | Quote                    | ✅ Yes         | `quote`                |      |

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

@@ -2,12 +2,13 @@ import Headings from "./headings";
 import Paragraph from "./paragraph";
 import Toggle from "./toggle";
 import Equation from "./equation";
+import NumberedListItem from "./numbered-list-item";
 import Quote from "./quote";
+import Callout from "./callout";
 
 export { Headings, Paragraph, Toggle, Equation, Quote,Callout };
-import Callout from "./callout";
 
-export { Headings, Paragraph, Toggle, Equation, Callout };
+export { Headings, Paragraph, Toggle, Equation, Callout,NumberedListItem };
 
 export default {
   heading_1: Headings,
@@ -16,6 +17,7 @@ export default {
   paragraph: Paragraph,
   toggle: Toggle,
   equation: Equation,
+  numbered_list_item: NumberedListItem,
   quote: Quote,
   callout: Callout,
 };

packages/react-notion-custom/src/lib/components/numbered-list-item.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import React from "react";
+import type { NumberedListItemArgs } from "../types";
+import { getColorCss, numberedListItemMarker } from "../utils";
+import RichText from "./internal/rich-text";
+
+type NumberedListProps = {
+  children?: React.ReactNode;
+} & NumberedListItemArgs;
+
+const NumberedListItem: React.FC<NumberedListProps> = ({
+  children,
+  ...props
+}) => {
+  const {
+    numbered_list_item: { rich_text: texts, color },
+  } = props;
+  const { marker, format } = numberedListItemMarker.getMarker(props);
+
+  return (
+    <ol
+      data-notion-marker-format={format}
+      className={`notion-block notion-list-numbered ${getColorCss(color)}`}
+    >
+      <li className="notion-display-contents">
+        <div className="notion-list-numbered-content">
+          <span
+            data-notion-marker-format={format}
+            className="notion-list-marker"
+          >
+            {marker}
+          </span>
+          <p>
+            <RichText props={texts} />
+          </p>
+        </div>
+        {children}
+      </li>
+    </ol>
+  );
+};
+
+export default NumberedListItem;

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

@@ -591,6 +591,41 @@
   background: var(--select-color-2);
 }
 
+.notion-list-numbered {
+  list-style-type: none;
+  padding-left: 0;
+}
+
+.notion-list-numbered[data-notion-marker-format="romans"]
+  > .notion-display-contents
+  > .notion-list-numbered-content
+  > .notion-list-marker {
+  width: 3em !important;
+  margin-right: 0em;
+}
+
+.notion-list-numbered[data-notion-marker-format="romans"] > li > .notion-block {
+  margin-left: 2.9em;
+}
+
+.notion-list-marker::after {
+  content: ".";
+}
+
+.notion-list-marker {
+  width: 26px;
+  display: inline-flex;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  height: fit-content;
+}
+
+.notion-list-numbered-content {
+  padding-top: 4px;
+  padding-bottom: 4px;
+  display: flex;
+
 .notion-quote-content {
   display: block;
   word-break: break-word;
@@ -602,6 +637,7 @@
   padding: 3px 2px;
   margin: 3px 0px 3px 1px;
   font-size: 1em;
+
 .notion-callout {
   padding: 16px 16px 16px 12px;
   display: flex;