fix: table of content indentation based on heading level #203
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Co-authored-by: kaizen-bot[bot] <150987473+kaizen-bot[bot]@users.noreply.github.com>
![kaizen-bot[bot]](https://avatars.githubusercontent.com/in/480502?s=60&v=4){kind=small}
|
|
||
| useEffect(() => { | ||
| const elements = Array.from(document.querySelectorAll('h2:not([data-toc-ignore]), h3:not([data-toc-ignore]), h4:not([data-toc-ignore])')); | ||
| const elements = Array.from(containerRef.current.querySelectorAll('h2:not([data-toc-ignore]), h3:not([data-toc-ignore]), h4:not([data-toc-ignore]), h5:not([data-toc-ignore])')); |
There was a problem hiding this comment.
Comment: Inefficient DOM querying in useEffect.
Solution: Consider caching the result of querySelectorAll or using a more efficient method to track changes in headings.
!! Make sure the following suggestion is correct before committing it !!
| const elements = Array.from(containerRef.current.querySelectorAll('h2:not([data-toc-ignore]), h3:not([data-toc-ignore]), h4:not([data-toc-ignore]), h5:not([data-toc-ignore])')); | |
| const elements = Array.from(containerRef.current.querySelectorAll('h2, h3, h4, h5')).filter(heading => !heading.hasAttribute('data-toc-ignore')); |
🔍 Code Review Summary❗ Attention Required: This push has potential issues. 🚨 Overview
🚨 Critical Issuesperformance (1 issues)1. Inefficient DOM querying in useEffect.📁 File: packages/akiradocs/src/components/layout/TableOfContents.tsx 💡 Solution: Current Code: const elements = Array.from(document.querySelectorAll('h2:not([data-toc-ignore]), h3:not([data-toc-ignore]), h4:not([data-toc-ignore]), h5:not([data-toc-ignore])'));Suggested Code: const elements = Array.from(document.querySelectorAll('h2, h3, h4, h5')).filter(heading => !heading.hasAttribute('data-toc-ignore'));Test Cases3 file need updates to their tests. Run
Useful Commands
|
|
|
||
| useEffect(() => { | ||
| const elements = Array.from(document.querySelectorAll('h2:not([data-toc-ignore]), h3:not([data-toc-ignore]), h4:not([data-toc-ignore])')); | ||
| const elements = Array.from(document.querySelectorAll('h2:not([data-toc-ignore]), h3:not([data-toc-ignore]), h4:not([data-toc-ignore]), h5:not([data-toc-ignore])')); |
There was a problem hiding this comment.
Comment: Inefficient DOM querying in useEffect.
Solution: Consider using a more efficient method to track headings or optimize the way headings are queried.
!! Make sure the following suggestion is correct before committing it !!
| const elements = Array.from(document.querySelectorAll('h2:not([data-toc-ignore]), h3:not([data-toc-ignore]), h4:not([data-toc-ignore]), h5:not([data-toc-ignore])')); | |
| const elements = Array.from(document.querySelectorAll('h2, h3, h4, h5')).filter(heading => !heading.hasAttribute('data-toc-ignore')); |
Enhance Table of Contents Component
Extend the Table of Contents functionality to include h5 headings for better navigation.
h5elements.indentClassmapping for consistent indentation across heading levels.This enhancement improves the usability of the Table of Contents by allowing navigation to deeper heading levels.
Original Description
# Enhance Table of Contents Functionality**
Improve the Table of Contents component to support more heading levels and provide a better visual experience.
**
These changes will enhance the user experience by providing a more comprehensive and visually appealing Table of Contents, making it easier for users to navigate the documentation.
Original Description
# Improve Table of Contents Styling and Accessibility**
**
Enhance the visual presentation and accessibility of the Table of Contents component.
**
**
The changes will improve the overall user experience and make the Table of Contents more intuitive and accessible.
Original Description
## 🔍 DescriptionType
Checklist