Add multi-level numbered list styles with proper nesting

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

@@ -23,7 +23,13 @@ import { SyncPointerBlock } from './components/sync-pointer-block'
 import { Text } from './components/text'
 import { useNotionContext } from './context'
 import { LinkIcon } from './icons/link-icon'
-import { cs, getListNumber, isUrl } from './utils'
+import {
+  cs,
+  getListNestingLevel,
+  getListNumber,
+  getListStyle,
+  isUrl
+} from './utils'
 
 interface BlockProps {
   block: types.Block
@@ -433,24 +439,57 @@ export function Block(props: BlockProps) {
           <ol
             start={start}
             className={cs('notion-list', 'notion-list-numbered', blockId)}
+            style={
+              block.type === 'numbered_list'
+                ? {
+                    listStyleType: getListStyle(
+                      getListNestingLevel(block.id, recordMap.block)
+                    )
+                  }
+                : undefined
+            }
           >
             {content}
           </ol>
         )
 
       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>
@@ -459,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
     }
 

packages/react-notion-x/src/utils.ts

@@ -48,6 +48,38 @@ export const getListNumber = (blockId: string, blockMap: BlockMap) => {
   return group.indexOf(blockId) + 1
 }
 
+export const getListNestingLevel = (
+  blockId: string,
+  blockMap: BlockMap
+): number => {
+  let level = 0
+  let currentBlockId = blockId
+
+  while (true) {
+    const parentId = blockMap[currentBlockId]?.value?.parent_id
+
+    if (!parentId) break
+
+    const parentBlock = blockMap[parentId]?.value
+    if (!parentBlock) break
+
+    if (parentBlock.type === 'numbered_list') {
+      level++
+      currentBlockId = parentId
+    } else {
+      break
+    }
+  }
+
+  return level
+}
+
+export const getListStyle = (level: number): string => {
+  const styles: string[] = ['decimal', 'lower-alpha', 'lower-roman']
+  const index = ((level % styles.length) + styles.length) % styles.length
+  return styles[index] as string
+}
+
 export const getHashFragmentValue = (url: string) => {
   return url.includes('#') ? url.replace(/^.+(#.+)$/, '$1') : ''
 }