Add nested ordered list styles with alternating number, letter, and roman numerals

Author: LooseLi

packages/react-notion-x/src/block.tsx

@@ -454,18 +454,42 @@ export function Block(props: BlockProps) {
         )
 
       let output: React.ReactNode | null = null
+      const isTopLevel =
+        block.type !== recordMap.block[block.parent_id]?.value?.type
+      const start = getListNumber(block.id, recordMap.block)
 
       if (block.content) {
-        output = (
-          <>
-            {block.properties && (
-              <li>
-                <Text value={block.properties.title} block={block} />
-              </li>
-            )}
-            {wrapList(children)}
-          </>
-        )
+        const listItem = block.properties ? (
+          <li>
+            <Text value={block.properties.title} block={block} />
+          </li>
+        ) : null
+
+        if (block.type === 'bulleted_list') {
+          output = (
+            <>
+              {listItem}
+              <ul className={cs('notion-list', 'notion-list-disc', blockId)}>
+                {children}
+              </ul>
+            </>
+          )
+        } else {
+          const nestingLevel = getListNestingLevel(block.id, recordMap.block)
+          output = (
+            <>
+              {listItem}
+              <ol
+                className={cs('notion-list', 'notion-list-numbered', blockId)}
+                style={{
+                  listStyleType: getListStyle(nestingLevel + 1)
+                }}
+              >
+                {children}
+              </ol>
+            </>
+          )
+        }
       } else {
         output = block.properties ? (
           <li>
@@ -474,10 +498,6 @@ export function Block(props: BlockProps) {
         ) : null
       }
 
-      const isTopLevel =
-        block.type !== recordMap.block[block.parent_id]?.value?.type
-      const start = getListNumber(block.id, recordMap.block)
-
       return isTopLevel ? wrapList(output, start) : output
     }