Make component props discoverable

[hughess]

By adding slash commands, we're making it easier to discover the full list of available content and components within Evidence. Once you get a component on your page though, it's quite difficult to know what is possible without having the docs open side-by-side and referencing back and forth.

It would be great to have a way to surface the available props within a given component. Some alternatives in order of preference:

1. Intellisense
   • Give user access to list of props scoped to the specific component they are in
   • Give user details on props and available options for each
2. Hover tooltip
   • We can set up a "hover provider" based on keywords (e.g., <LineChart) and have a custom menu show up giving the user documentation about the component
   • This could optionally be paired with a decoration to the right of the component to prompt them that the information is there
3. Tree View
   • Add a tree view to the extension to show all available components, their available props, and those props' available options
   • Would be nice to have this as a right hand sidebar (secondary pane)
   • If it's possible to add search bar / use input features, that would be great
4. Full Prop Snippets
   • Add snippets showing the full list of props and defaults for each component
   • Likely too cumbersome to be worth it

Screenshots from trying a few of these out

Component Decoration (would be set up with hover capability on top of it)

Treeview

[hughess]

I found a couple of options that let you take advantage of the existing grammar definition to get some language server-like capabilities. Seems like it would be worth going for a real language server unless these are easy to set up and work relatively well:

• https://github.com/vsce-toolroom/vscode-textmate-languageservice/tree/v1.2.1
• https://github.com/microsoft/vscode-anycode