Skip to content

Add Monaco Editor Tree View for Document Navigation #1

@andre-dietrich

Description

@andre-dietrich

Add a tree view panel to the Monaco editor that shows the document structure and enables quick navigation.

Features:

  • Adds a collapsible tree view panel showing document structure based on headings
  • Integrates with Monaco editor's internal tree view API for native look and feel
  • Provides quick navigation through document sections
  • Toggle via Ctrl+B/Cmd+B keyboard shortcut
  • Auto-updates as the document changes

Implementation Details:

  • Create TreeViewProvider class to handle Monaco's internal tree view
  • Add tree view container next to editor
  • Parse markdown headers for document structure
  • Add toggle functionality and keyboard shortcuts
  • Ensure proper cleanup on component destruction

Files to Create/Modify:

  1. src/ts/TreeViewProvider.ts - New file for tree view implementation
  2. src/components/Editor.vue - Modify to add tree view support

Testing:

  • Test tree view initialization
  • Verify navigation functionality
  • Check auto-update with document changes
  • Verify proper cleanup on component destruction
  • Test across different Monaco editor versions

Design:

  • Tree view panel on left side of editor
  • Collapsible/expandable sections
  • Visual hierarchy for different heading levels
  • Consistent with Monaco editor's theme

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions