NotionX / NotionX/react-notion-x

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

Open
#440 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
5.4k
Forks
645
PR merge metrics
No merged PRs in 30d

Description

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.

Screen Shot 2023-02-20 at 7 34 26 PM

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.

Screen Shot 2023-02-20 at 7 28 09 PM
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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in packages/react-notion-x/src/block.tsx at the numbered_list rendering logic, then inspect the related list styles in packages/react-notion-x/src/styles.css. Use the public Notion test page ID bb597bf95ca24b059f41f8c4c8eb13ee to reproduce the nesting; done means numbered lists alternate styles as 1, a, i across nested levels without debug output or regressions.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.