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

Author: LooseLi

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,6 +439,15 @@ 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>

packages/react-notion-x/src/styles.css

@@ -852,6 +852,18 @@ svg.notion-page-icon {
   margin-bottom: 0;
 }
 
+.notion-list-numbered ol {
+  list-style-type: lower-alpha;
+}
+
+.notion-list-numbered ol ol {
+  list-style-type: lower-roman;
+}
+
+.notion-list-numbered ol ol ol {
+  list-style-type: decimal;
+}
+
 .notion-list-disc li {
   padding-left: 0.1em;
 }

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') : ''
 }