Skip to content

feat: add markdown table of contents panel #61

@gnoviawan

Description

@gnoviawan

Summary

Add a markdown-only Table of Contents panel that works in both existing editor modes:

  • BlockNote WYSIWYG mode
  • CodeMirror source mode

The panel should live on the right side of the editor, support click-to-jump navigation, highlight the active heading while scrolling, and persist global TOC settings (visibility, width, and max heading level).

Scope

  • Add TOC settings types, store, and persistence hook
  • Extend existing BlockNote and CodeMirror hooks for heading extraction/navigation
  • Add reusable TOC UI components
  • Integrate TOC panel into both markdown editor modes
  • Add focused tests for store, hooks, and TOC UI

Acceptance criteria summary

  • TOC renders markdown headings with correct indentation and empty state
  • Clicking a TOC item navigates correctly in both BlockNote and CodeMirror modes
  • Active heading updates while scrolling in both modes
  • Toolbar toggle shows/hides TOC for markdown files only
  • TOC width is resizable and clamped consistently across modes
  • TOC visibility, width, and max heading level persist across app restarts and mode switches

Reference

Tech spec: _bmad-output/implementation-artifacts/tech-spec-markdown-toc-panel.md

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions