Angular TextEditor with advanced autocomplete

Question

I'm trying to find a good rich text editor directive for Angular, that supports autocomplete as a tree, which means:

I can pass it for example an array of "suggestions" for autocompletion, and each "suggestion" contains a "text" and an array for nested "suggestions" and so on recursively.

And, I can access nested options using "." for example.

So, I pass it:

[{
  'text': 'parent1',
  'suggestions': [{
    'text': 'child1',
  }, {
    'text': 'child2'
  }]
}, {
  'text', 'parent2',
  'suggestions': [{
    'text': 'child3',
  }, {
    'text': 'child4'
  }]
}]

and user can write 'p' to see 'parent1' and 'parent2' as suggestions. and when he selects any and press '.' he sees its children as suggestions.

JQuery option will work for me too.

Answer 1

You can use ace editor and add it autocomplete functionality:

var langTools = ace.require("ace/ext/language_tools");
var editor = ace.edit("editor");
editor.setOptions({enableBasicAutocompletion: true});
// uses http://rhymebrain.com/api.html
var rhymeCompleter = {
  getCompletions: function(editor, session, pos, prefix, callback) {
    if (prefix.length === 0) { callback(null, []); return }
    $.getJSON(
      "http://rhymebrain.com/talk?function=getRhymes&word=" + prefix,
      function(wordList) {
        // wordList like [{"word":"flow","freq":24,"score":300,"flags":"bc","syllables":"1"}]
        callback(null, wordList.map(function(ea) {
          return {name: ea.word, value: ea.word, score: ea.score, meta: "rhyme"}
        }));
      })
  }
}
langTools.addCompleter(rhymeCompleter);

<div id="editor" style="height: 500px; width: 800px">Type in a word like "will" below and press ctrl+space or alt+space to get "rhyme completion"</div>
<div id="commandline" style="position: absolute; bottom: 10px; height: 20px; width: 800px;"></div>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="https://rawgithub.com/ajaxorg/ace-builds/master/src/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="https://rawgithub.com/ajaxorg/ace-builds/master/src/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>

Source: https://github.com/ajaxorg/ace/wiki/How-to-enable-Autocomplete-in-the-Ace-editor