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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions