Add multi-level numbered list styles with proper nesting

[LooseLi]

Description

Fixes #548

In the current implementation, all levels of nested numbered lists use the same decimal numbering style (1, 2, 3...), regardless of nesting depth. This makes it difficult to distinguish between different levels of nested lists and doesn't follow standard document formatting conventions.

This PR introduces proper styling for nested numbered lists by:

1. Adding a new getListNestingLevel function to determine the nesting level of a list item
2. Adding a new getListStyle function to cycle through appropriate list styles based on nesting level
3. Modifying the list rendering logic to apply the correct style to each level of nested lists

Before

After

Notion Test Page ID

1e31578febe580e5847ac4314e304b02

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
react-notion-x	✅ Ready (Inspect)	Visit Preview	Apr 28, 2025 9:34am
react-notion-x-minimal-demo	✅ Ready (Inspect)	Visit Preview	Apr 28, 2025 9:34am

[gemini-code-assist]

Hello @LooseLi, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

Summary of Changes

This pull request addresses issue #548, which concerns the styling of multi-level numbered lists. Currently, all levels of nested numbered lists use the same decimal numbering style, making it difficult to distinguish between different levels. This PR introduces proper styling for nested numbered lists by adding functions to determine the nesting level of a list item and to cycle through appropriate list styles based on nesting level. The list rendering logic is then modified to apply the correct style to each level of nested lists.

Highlights

• List Nesting Level: Introduces a getListNestingLevel function to determine the nesting level of a list item.
• List Style: Adds a getListStyle function to cycle through appropriate list styles based on nesting level (decimal, lower-alpha, lower-roman).
• List Rendering: Modifies the list rendering logic in the Block component to apply the correct style to each level of nested lists.

Changelog

Click here to see the changelog

• packages/react-notion-x/src/block.tsx
  • Imported getListNestingLevel and getListStyle from './utils'. (Diff 1)
  • Modified the Block component to apply dynamic list styles based on nesting level for numbered lists. (Diff 2)
  • The isTopLevel and start variables were moved to be defined before the conditional rendering logic for list items. (Diff 2)
  • Conditional rendering logic was added to handle bulleted lists, applying the 'notion-list-disc' class. (Diff 2)
  • The isTopLevel and start variables were removed from the end of the function. (Diff 3)
• packages/react-notion-x/src/styles.css
  • Added CSS rules to style nested numbered lists with different list-style-type values (lower-alpha, lower-roman, decimal). (Diff 1)
• packages/react-notion-x/src/utils.ts
  • Added getListNestingLevel function to determine the nesting level of a list item. (Diff 1)
  • Added getListStyle function to cycle through appropriate list styles based on nesting level. (Diff 1)

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

---

In Notion's realm, lists align,
Nested deep, a structured design.
Alpha, Roman, numbers bright,
A clearer view, a welcome sight.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This PR introduces proper styling for nested numbered lists in the react-notion-x library, which improves the readability and visual structure of Notion documents rendered with this library. The changes include adding functions to determine list nesting level and apply appropriate list styles based on nesting depth. Overall, the changes seem well-structured and address the issue effectively.

Summary of Findings

• CSS Styling: The CSS styling for numbered lists could be more robust to handle deeper nesting levels. Currently, it only supports three levels of nesting. Consider using a more dynamic approach, possibly with CSS variables or preprocessor logic, to handle arbitrary nesting depths.
• Logic in Block Component: The logic within the Block component for determining list styles and rendering nested lists could be simplified for better readability and maintainability. Consider refactoring the conditional rendering logic to reduce complexity.
• Accessibility: While the visual styling is improved, ensure that the changes do not negatively impact the accessibility of the lists. Verify that screen readers and other assistive technologies can properly interpret the nested list structure.

Merge Readiness

The pull request is a good step towards improving the styling of nested numbered lists. However, before merging, it would be beneficial to address the CSS styling limitations for deeper nesting levels and consider simplifying the logic in the Block component. Also, ensure that the changes do not negatively impact accessibility. I am unable to directly approve this pull request, and recommend that others review and approve this code before merging. Given the medium severity issues, I recommend addressing these before merging.

[gemini-code-assist]

The CSS only defines styles for three levels of nested numbered lists. If a list is nested deeper than three levels, it will default to the decimal style. Consider using a more dynamic approach to handle arbitrary nesting depths, possibly with CSS variables or a CSS preprocessor.

/* Consider a more dynamic approach using CSS variables or a preprocessor */
.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;
}

/* Example using CSS variables (requires JS to set the variable) */
/*
:root {
  --list-level-1: lower-alpha;
  --list-level-2: lower-roman;
  --list-level-3: decimal;
}

.notion-list-numbered ol {
  list-style-type: var(--list-level-1);
}

.notion-list-numbered ol ol {
  list-style-type: var(--list-level-2);
}

.notion-list-numbered ol ol ol {
  list-style-type: var(--list-level-3);
}
*/