NotionX / NotionX/react-notion-x
Numbered list nesting should alternate numbering-style i.e. "1ai"
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.
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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