Markdown document outline in Source Editor
## Problem to solve Navigating large amounts of code or very long documents in the Web Editor or Web IDE can be difficult. It is especially difficult when there is a hierarchy to the document that's not immediately apparent from the code highlighting. This is prevalent in Markdown documents, where the header level (`###`) may be the only indication of where the content falls in the page hierarchy. The blob viewer for Markdown files offers an "outline" view of the page by showing the headers in their hierarchy and allows you to navigate to that section by clicking on the appropriate header. This sort of in-page table of contents is not available in the editing modes. Example of the outline in the repository view: ![image](/uploads/340a8a57f673f26ebfa08957af157cef/image.png) ## Proposal Add a similar button in the Web Editor and Web IDE for Markdown documents. This will act as both an overview of the structure and a way to jump around a document. ## Details The expected behavior would be: 1. This icon lives in the Source Editor toolbar (MVC in progress) 1. This functionality is shared across all instances of Source Editor (where it makes sense) 1. This feature is only visible when loading Markdown files (`.md`) 1. The headers in the outline menu are dynamically updated as the file is edited 1. The outline should display the text of each header, nested according to the heading level (as you would see in a table of contents) 1. The headers in the outline link to each specific line of code in the editor, placing the cursor on that line when clicked ## Open questions 1. Does this make sense to add to Snippets as well? I doubt there are many snippets long enough to warrant this, but there may be some out there. 1. Should we map this to a keyboard shortcut so we can sort of mimic a sort of "quick jump" workflow from the keyboard?
epic