Prototype for yaml autocomplete

[JuhaS]

Context In our angular app we have a codemirror textarea that we use to edit yaml files. We currently use codemirror just for the syntax highlighting. We would like to add autocomplete feature to the editor. Codemirror offers autocomplete-support, but we haven't tried it out yet.

Goal We would like to make autocomplete feature work in our editor. This means creating a proof of concept project that demonstrates the working autocomplete. Part of the task is also to understand if codemirror autocomplete support is suitable for our usecase (it may not be). We would like to release that as open soure project that we can improve later.

Resources

• Codemirror autocomplete demo: http://codemirror.net/demo/complete.html
• Examples of autocomplete implementations: http://codemirror.net/addon/hint/
• Codemirror for angular: https://github.com/angular-ui/ui-codemirror

Details

This repo has a simple angular app that has codemirror editor loaded with yaml document. You can use it as starting point.

Example of final yaml document:

configuration: {}
name: 'web7'
provider:
  image: 'ubuntu12.04'
  name: 'digitalocean'
  region: '3'
  size: '66'
services:
  nginx: '*'
  php: '*'

Autocomplete can be triggered for example by pressing Ctrl+Space as in the demo. When user autocompletes on root level (for example empty document) he should see: configuration, name, provider and services as options. When user autocompletes inside services block he should see: nginx and php as options. These source for the suggestions can be hardcoded for now.

You have the freedom approach this as you want. I recommend you start with something very simple that you (or we) can improve on.

[JuhaS]

From @Shrugs (btw you can post updates like this to the issue here directly):

I'm satisfied with the prototype if you want to pull down origin/develop and try it out ctrl-space will trigger the autocomplete box and if there's only one option, autocomplete that one

@Shrugs I tried it out and I'm happy to see it working as expected. I have a few follow up questions:

• How would you improve it to make it production ready solution? What would be the next steps?
• I see many of the autocomplete-plugins tend to be quite complex and monolithic, how would you make this plugin more modular?
• Any other comments?

[shrugs]

There could be some optimizations regarding function redefinition and such. The function passed to CodeMirror.registerHelper() is called every time ctrl-space is pressed, so those functions are defined every time. They require a reference to the CodeMirror editor instance cm, though, so I left them in that scope for simplicity.

A decent addition might be the inclusion of the default 'anyword' hinting function to suggest previously typed words, regardless of context.

The hinting function could better delegate some of its logic to some callback functions to make it more modular. It currently supports custom keywords and constants via the $scope.editorOptions.hintOptions object, but it could also support a function like opts.suggestionsForHierarchy(), which would accept a hierarchical array of keys and return an array of suggestions, allowing the value of that to change based on some other heuristics beyond the context keywords.

There could be better Angular-specific integration. Honestly, I don't know Angular as well as I'd like, so I can't comment on this too much. The current implementation won't feel very "angular", though, so it can't be optimal.

[hunvreus]

I'm back in Shanghai at the end of the week working closely with the devo.ps team for a few weeks: things will move faster. Right now we're a bit swamped with polishing http://devo.ps for an official release.

[shrugs]

Understood!