Numbered list nesting should alternate numbering-style i.e. "1ai"

[Korede-TA]

trafficstars

Description

Summary: fixed issue with numbered list partially. can I get some debugging help?

Issue: Numbered list nesting should alternate numbering-style i.e. "1ai". Currently nested numbered lists nest with just numbers, instead of alternating letters and roman numerals.

Resolution Attempt: wrote some code to figure out how nested a list item is. But this is buggy and the first two levels are both numbers, I added the code with debug stmts.

diff --git a/examples/minimal/lib/config.ts b/examples/minimal/lib/config.ts
index 83f24aa..9236d9e 100644
--- a/examples/minimal/lib/config.ts
+++ b/examples/minimal/lib/config.ts
@@ -1,5 +1,5 @@
 // TODO: change this to the notion ID of the page you want to test
-export const rootNotionPageId = '067dd719a912471ea9a3ac10710e7fdf'
+export const rootNotionPageId = 'bb597bf95ca24b059f41f8c4c8eb13ee'

 export const isDev =
   process.env.NODE_ENV === 'development' || !process.env.NODE_ENV
diff --git a/packages/react-notion-x/src/block.tsx b/packages/react-notion-x/src/block.tsx
index eb23a07..dff0739 100644
--- a/packages/react-notion-x/src/block.tsx
+++ b/packages/react-notion-x/src/block.tsx
@@ -425,6 +425,30 @@ export const Block: React.FC<BlockProps> = (props) => {
     case 'bulleted_list':
     // fallthrough
     case 'numbered_list': {
+      const LEVELS = "1ai"
+
+      let blockLevel = 0
+      if (block.type == 'numbered_list') {
+        let numListBlock: types.NumberedListBlock = block
+        const MAX_BLOCK_LEVEL = 10 // failsafe
+        while (numListBlock) {
+          if (blockLevel > MAX_BLOCK_LEVEL) break
+          if(numListBlock.type === recordMap.block[numListBlock.parent_id]?.value?.type) {
+            numListBlock = (recordMap.block[numListBlock.parent_id]?.value as types.NumberedListBlock)
+            blockLevel += 1
+          } else {
+            numListBlock = null
+          }
+        }
+      }
+
+      console.log("OL", {
+        blockLevel,
+        blockId: block.id,
+        LEVEL: LEVELS[blockLevel]
+      })
+
+      const listStyle = LEVELS[blockLevel]
       const wrapList = (content: React.ReactNode, start?: number) =>
         block.type === 'bulleted_list' ? (
           <ul className={cs('notion-list', 'notion-list-disc', blockId)}>
@@ -433,7 +457,8 @@ export const Block: React.FC<BlockProps> = (props) => {
         ) : (
           <ol
             start={start}
-            className={cs('notion-list', 'notion-list-numbered', blockId)}
+            className={cs('notion-list', 'notion-list-numbered-' + (listStyle), blockId, 'level'+blockLevel)} 
+            type={listStyle as "a" | "i" | "1" | "A" | "I"}
           >
             {content}
           </ol>
diff --git a/packages/react-notion-x/src/styles.css b/packages/react-notion-x/src/styles.css
index 71b8b4a..8c5cc13 100644
--- a/packages/react-notion-x/src/styles.css
+++ b/packages/react-notion-x/src/styles.css
@@ -780,6 +780,24 @@ svg.notion-page-icon {
   margin-top: 0;
   margin-bottom: 0;
 }
/* NOTE: alternate numbered list style types are used. i'm iffy abt this approach, any suggestions? */
+.notion-list-numbered-1 {
+  list-style-type: decimal;
+  padding-inline-start: 1.6em;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.notion-list-numbered-a {
+  list-style-type: lower-alpha;
+  padding-inline-start: 1.6em;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.notion-list-numbered-i {
+  list-style-type: lower-roman;
+  padding-inline-start: 1.6em;
+  margin-top: 0;
+  margin-bottom: 0;
+}

 .notion-list-disc li {
   padding-left: 0.1em;

Notion Test Page ID

bb597bf95ca24b059f41f8c4c8eb13ee