Outline Eclipsed
Outline Eclipsed: An outline view for VS Code that lets you drag and drop to reorganize your document structure.
🪐 A VS Code extension that provides an interactive outline tree view for markdown files. Inspired by the Eclipse IDE, Outline Eclipsed lets you reorder sections by dragging and dropping headings.
💡 Reorganizing long documents is tedious. Instead of cutting and pasting text blocks, just drag headings in the tree view. Nested sections move together automatically. The editor highlights and scrolls to show exactly what moved. You stay focused on structure, not on selecting text ranges.
⏩ Install from the VS Code Marketplace and open any markdown file. The "Outline Eclipsed" view appears in the Explorer sidebar. Click headings to navigate. Drag them to reorganize.
Demo
Features
- Drag & Drop Reordering: Drag headings to reorder sections. Nested headings move with their parent automatically.
- Bidirectional Sync: Click a heading to jump to that section. Move your cursor, and the tree highlights the current heading.
- Visual Feedback: After dragging, the editor auto-scrolls and highlights the moved section for 3 seconds.
- Real-Time Updates: The tree refreshes automatically as you edit the document.
- Hierarchical View: See your document structure at a glance with expandable/collapsible nested headings.
Installation
# Via VS Code Marketplace
ext install douglashellinger.outline-eclipsed
Or search for "Outline Eclipsed" in the Extensions view (Ctrl+Shift+X).
Usage
- Open a markdown file
- Find "Outline Eclipsed" in the Explorer sidebar
- Click any heading to navigate to that section
- Drag and drop headings to reorganize sections
- Watch the editor highlight and scroll to show the moved content
Current Support
- ✅ Markdown files (H1-H6 headings)
- 🔲 JavaScript/TypeScript (coming soon)
- 🔲 Python (coming soon)
Development
# Clone and install dependencies
git clone https://github.com/doughgle/outline-eclipsed.git
cd outline-eclipsed
npm install
# Compile TypeScript
npm run compile
# Watch mode (auto-compile on save)
npm run watch
# Run tests
npm test
Manual Testing
Press F5 to launch the Extension Development Host, then open test-fixtures/sample.md. Test the following:
- Navigation: Click headings to jump to sections
- Selection Sync: Move cursor in editor, verify tree highlights current heading
- Drag & Drop: Drag a heading to reorder sections
- Visual Feedback: Verify editor auto-scrolls and highlights moved section
- Real-Time Updates: Edit document, verify tree refreshes
- ✅ PI-0-5: Markdown outline with drag & drop and visual feedback
- ✅ PI-6: Multi-select drag & drop
- 🔲 PI-7: Configuration options
- 🔲 Future: Support for JavaScript, TypeScript, Python, and other languages
License
MIT
