Any example of how to support custom code completion? about react-ace HOT 10 CLOSED

No need for hacks, you can also pass all completers via enableBasicAutocompletion as an Array, like so:

<AceEditor
  ...
  setOptions={{
    enableBasicAutocompletion: [this.yourCustomCompleter]
  }}
/>

from react-ace.

@andrerpena , I think it should be pretty easy to make happen (not taking into account the complexity of your custom completer). I can outline a quick example based on something similar I just did and looking around at ace docs.

In order to enable completion, we need to use an ace extension:

/* set up custom completer by using a ace extension */
import ace from 'brace'

/* figured out how to load the extension properly
 * by referring to ptmt's response in https://github.com/thlorenz/brace/issues/19
 */
import 'brace/ext/language_tools'
let langTools = ace.acequire('ace/ext/language_tools');

Setup the completer like this:

/* your custom completer */
var customCompleter = {
      getCompletions: function(editor, session, pos, prefix, callback) {
           // your code
           /* for example
            * let TODO = ...;
            * callback(null, [{name: TODO, value: TODO, score: 1, meta: TODO}]);
            */
      }
 }
langTools.addCompleter(customCompleter);

Currently, there is an existing issue (#59) dealing with how additional editor options should be handled. Without that I think we would need to hack it:

/* in some render somewhere
 * need this refs hack to set an editor option (another open issue in this repo)
 * inspired by elijahsmith's response in https://github.com/securingsincity/react-ace/issues/65
 */
<AceEditor ref="code" ...>

// with that setup, you can do something like
this.refs.code.editor.setOption('enableBasicAutocompletion', true);

I apologize if any of that is odd or poor practice. I am just starting out with react and just began using react-ace wrapper around ace. Although, almost all of it is based on the work of others.

Some other quick references/examples:

• Ace doc on enabling completion - they also have an example of a custom rhyme completer linked to at the bottom of the doc
• Ace demo with completion - ctrl+space activates completion

from react-ace.

how do we trigger autocompletion without ctrl+space. What if we want it to trigger automatically

from react-ace.

@eemp Sorry for the late response and thank you very much for the example. This seems fairly easy indeed. I'll try it. Thanks again.

from react-ace.

I added my own ompleter, but I need to press ctr+space to show the competion, Is there a way to show the completion automatically.

from react-ace.

@go299 You just have to enable the option enableLiveAutocompletion in ace.

from react-ace.

@fijolekProjects How to write a custom completer? Is there any docs about this?

from react-ace.

@oakland Don't know about docs, but here's working example https://github.com/TouK/nussknacker/blob/v0.0.9/ui/client/components/graph/ExpressionSuggest.js#L31
Basically it's an object with getCompletions method implemented. Hope it helps

from react-ace.

@fijolekProjects Thanks a lot! I will try it out in my project.

from react-ace.

how do we trigger autocompletion without ctrl+space. What if we want it to trigger automatically

Set enableLiveAutocompletion option to true.

from react-ace.