New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Any example of how to support custom code completion? #69
Comments
@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:
|
@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. |
No need for hacks, you can also pass all completers via enableBasicAutocompletion as an Array, like so: <AceEditor
...
setOptions={{
enableBasicAutocompletion: [this.yourCustomCompleter]
}}
/> |
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. |
@go299 You just have to enable the option |
@fijolekProjects How to write a custom completer? Is there any docs about this? |
@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 |
@fijolekProjects Thanks a lot! I will try it out in my project. |
how do we trigger autocompletion without ctrl+space. What if we want it to trigger automatically |
Set |
Hi. First, thanks for this awesome lib!
Is there any example of how to support custom code completion? I mean... I wanted to implement support for a small syntax I've been working on. It's not exactly a programming language like JavaScript.
Any idea?
Thank you very much.
The text was updated successfully, but these errors were encountered: