intellisense / code assist / auto-completion

adamjimenez commented 13 years ago

display auto-completion options when typing @gissues:{"order":91.92546583850935,"status":"backlog"}

davidmurdoch commented 13 years ago

Implementing an Intellisense-like solution would make ACE the "silver-bullet" IDE solution.

codeape2 commented 13 years ago

If one were to implement autocompletion on top of the current code:

Is editor.getSession().on('change', callback) the event to handle to get notified on (for instance) '.', '(' keys pressed?
Is there a simple way to present a list of autocomplete items to the user, and insert some text in the editor when the user selects an item?

davidmurdoch commented 13 years ago

Video: http://www.youtube.com/watch?v=8bjPrQYCzY8 Info: http://msdn.microsoft.com/en-us/library/hcw1s69b(vs.71).aspx

Intellisense also remembers your most frequently used methods and may prioritize them in the autocomplete list or even highlight them by default.

aslakhellesoy commented 13 years ago

I have implemented a basic autocomplete widget on top of ace. You can see screenshots here: https://github.com/cucumber/gherkin-editor

Current features off the top of my head:

Pure DOM - no baggage
Basic keyboard handling
Replaces editor text when option is selected
Programmer decides row/column where it shows up
Pluggable matcher (decide what to show)

If there is interest I would love to donate the plugin to the ace project so it can become a 1st class citizen and get the love it needs.

The code: https://github.com/cucumber/gherkin-editor/blob/master/public/js/gherkin-editor/autocomplete.js Sample usage: https://github.com/cucumber/gherkin-editor/blob/master/public/js/gherkin-editor.js

adamjimenez commented 13 years ago

Looks like a good start. Would love to see this in Ace.

aslakhellesoy commented 13 years ago

Thanks for the feedback. I'll work on a patch following the existing code/api conventions.

tunggad commented 13 years ago

Im developing a internal DSL, based on JSON structure. The DSL is used to define document structure (content types) for CMS system, which uses Document-oriented DB (like MongoDB) to save contents. Following is a simple example:

// BlogPost content type { package:'de.playcms.commons', name: 'BlogPost', extends: 'de.playcms.commons.Article',

schema: {
    content: {
        type: 'String',
        constraints: {
            maxLength: 2000,
            index:true
        },
        input: ''textarea", // in other situation can be textfield, select, checkbox
        application: {
            isSearchable: true,
            isSEOptimzed: true
        }
    },
    tags : {
        type:'String[]',
        constraints: {
            unique:true,
            maxSize: 10 // maximum  10 tags per blogpost
        },
        input: 'user-generated',
        application:{
            isSearchable: true
        }
    }
}

}

// Article content type { package:'de.playcms.commons', name: 'Article',

schema: {
    title: {
        type: 'String',
        constraints: {
            maxLength: 200,
            index:true
        },
        input: ''textfield",
        application: {
            isSearchable: true,
            isSEOptimzed: true
        }
    },
    description: {
        type: 'String',
        constraints: {
            maxLength: 500,
            index:true
        },
        input: ''textarea",
        application: {
            isSearchable: true,
            isSEOptimzed: true
        }
    },
    image: {
        type: 'binary',
        constraints: {
            maxLength: 50000 //50000 bytes
        },
        input: ''file-upload",
        application: {
            accepts:['*.jpg', '*png']
        }
    }
}

}

The syntax-highlight support of JavaScript for JSON is ok, its not my priority now. What i really want now is autocomplete

autocomplete for grammar keywords/context: static grammar keywords: package, name, type, schema, extends etc. context: for example after token 'type:' the editor should suggest: String, Integer, Boolean etc. Or whin the 'constraints:{ ... }', depends on the previously defined content-type (Integer, String) it should suggest corresponding constraints. For String it should be: nullable, maxLength, minLength etc.
autocomplete which relys on data supplied by a external service. for example when the cursor within value token for package: 'de.playcms.comm', then the editor should suggest possible values. Because all these content-type definitions are save in DB, it is possble to provide the editor the exsiting values over a service-call. It shoud be the same for extends keyword.

Hopefully , you can understand me with my bad english.^^

Thank you very much!

adamjimenez commented 13 years ago

I'd like to see autocompletion of HTML tags. There is only a finite number of tags so it can work without an API.

Pressing < in HTML mode would trigger the autocompletion dropdown.

joedeveloper commented 13 years ago

Hi, this is an excellent feature - I would like to propose leveraging ctags, as it would give us access to a wealth of pre-existing code completion files, using something like jsctags would also allow us to build code completion 'on the fly' from the current file / directory structure.

See: https://github.com/mozilla/doctorjs

retif commented 13 years ago

hey, autocomplete is a good feature but i want to focus on the speed of this feature...netbeans has incredibly slow auto-complete, it drives me out, i think if someone implements auto-complete it should be instant or should not be accepted

vbguyny commented 13 years ago

Any updates on an ETA for this feature?

aslakhellesoy commented 13 years ago

I haven't had time to make any progress. No ETA on my part.

aslakhellesoy commented 13 years ago

Here is another implementation that might inspire: http://shiftedit.net/tests/ace-autocomplete

richstandbrook commented 13 years ago

+1 For this feature. Cloud9 has just pushed a good implementation.

aslakhellesoy commented 13 years ago

@fjakobs and @zefhemel - any chance the awesome code completion widget in Cloud9 could be moved to Ace? This would make it possible to have code completion while editing github files.

I'm assuming this is it: ajaxorg/cloud9@09f2ada631c07e1ed1925916c959f6903215f93d

zefhemel commented 13 years ago

That will not be so simple. The UI depends on APF, the UI toolkit we use to build Cloud9. The multi-file completion depends on C9's way of handling multiple files, ACE has no notion of files at all at this point. We will look at it.

montoyaedu commented 13 years ago

@aslakhellsoy Hello Aslak,

I have made some modifications to following implementation. http://shiftedit.net/tests/ace-autocomplete

source code can be found at: https://github.com/montoyaedu/ace/blob/master/experiments/javaeditor.htm

live example can be found at http://www.omtrek.com/~emontoya/editor/

autocomplete is not triggered automatically but only when requested (Ctrl-Shift-Space)

I hope you can find it useful.

matthew-dean commented 12 years ago

Couldn't the Cloud9 implementation at least be abstracted to the popup (and its relative positioning) and populating the list? If there was nothing more than a popup you could call and put in whatever the heck you wanted based on the current word / prhase, that would do a lot. The hard part is probably positioning the autocomplete box and returning what's currently being typed. Filling with data is the easy part.

fjakobs commented 12 years ago

I'm considering adding a basic infrastructure for code completion to Ace. This will probably come with just a very basic or no UI but it will give people adding completions a way to hook in. Can't give an ETA though.

adamjimenez commented 12 years ago

great news, thanks Fabian.

matthew-dean commented 12 years ago

'Twould be sweet @fjakobs. ^_^

retif commented 12 years ago

+1

matthew-dean commented 12 years ago

Any progress on this?

matthew-dean commented 12 years ago

What about this: is there anything in the API to support building an auto-complete system? Can I grab word boundaries? And then compare that to possible selection matches? Most of the code coloring expects a full word match, but it would be nice if we could grab partial word matches from keywords, or beginning-of-word matches.

In other words, ideally the code-coloring regex statements could be refactored or re-used in some way to identify auto-completion segments, rather than tacking on a whole other set of matches to compare that would look very similar to the code-coloring regexes. But, of course, we'd want to extend the library of matches beyond just the code-coloring list, and might want to do something other than simple text completion (helper text, inline evaluation, etc).

Just trying to put some ideas out there. If there's anything currently in progress or any ideas to make this possible, I'd love to know.

WPsites commented 12 years ago

Take a look at my WPide project on github or install the Wordpress plugin on a Wordpress site.

It's got autocomplete of Wordpress functions and php functions. It also automatically gives you some basic function reference with links through to the Wp codex or php site.

The code might not be pretty but it works!

faceleg commented 12 years ago

@fjakobs did you ever get a chance to implement any of this?

faceleg commented 12 years ago

@WPsites I checked your plugin out - definitely looks good. When I get into my ACE project I will look into it more deeply. Maybe we could collaborate on a more general solution for ACE?

rnetonet commented 12 years ago

Hi,

I´m quite new to javascript, but i´ve implemented simple code completion using ace editor api. Here is the gist:

https://gist.github.com/3789861

Help / Critics / Patchs are appreciated. Cheers from Brazil

matthew-dean commented 11 years ago

NEED MOAR AUTOCOMPLETE

;-)

gjtorikian commented 11 years ago

@nightwing can anywork done by you and @lennartcl be pulled into Ace ?

lennartcl commented 11 years ago

@gjtorikian Unfortunately the Cloud9 implementation depends on APF. I'd love to see a simple version in Ace though.

gjtorikian commented 11 years ago

I'm going to go ahead and pick this up. I've drawn a UI based on @aslakhellesoy's implementation (with his permission).

The hardest part IMO is efficiently parsing the contents of the doc to populate the list. Maybe I can cheat it and just grab a list of all keyword tokens in the doc and use that as the source of completion?

aslakhellesoy commented 11 years ago

I think the autocomplete values should be supplied via an API (array or function), not grabbed from the doc. See the Twitter Bootstrap Typeahead JavaScript API for an example, it's pretty well thought out.

avuori commented 11 years ago

Great to see some activity here.

One vote for supplying the autocomplete values via an API.

In my use case I'm importing a number of suggestions and they are not keywords nor existing words in the document. I need a suggestion list and a way to populate it.

When there's some code to grab, I can help in any way I can.

raboof commented 11 years ago

Great to see activity here! I agree it makes sense to import suggestions rather than parsing the docs (though parsing the doc might be one possible source to import them from).

It would be awesome if the completion could be context-sensitive.

A possible way to achieve this would be to expect the API user to provide a callback to produce the 'current' list of suggestions. An API user could implement that callback by either returning a static list, returning a list built by parsing the document, or choosing a list based on the current location of the cursor in the document.

gjtorikian commented 11 years ago

@avuori You can check out the branch at feature/codecomplete if you want to play around. Right now it draws the box, populates it, binds the keys properly ( e.g. Up/Down to navigate, Tab/Enter to select), and replaces text.

Really, @aslakhellesoy should be commended for all this thought and work he put into this two years ago. All I have so far is a rework of his code to fit into the current Ace model.

My next course of action will be to populate/filter the list intelligently. It looks like it'll be easier to provide a blank list (modifiable via the API) as people are asking, rather than do a text parse at first go.

avuori commented 11 years ago

@gjtorikian Thanks, that's useful to me already.

gjtorikian commented 11 years ago

So I ended up dropping Aslak's implementation and cherry-picked a commit Harutyun had done which provides much better integration with Ace. After some tweaking and blatant copying from the Cloud9 autocompletion logic it's working rather nicely within a web worker:

http://screencast.com/t/mN7mVJ9G14U http://screencast.com/t/muz9qfubFt

There are still some UI tweaks to do. Remaining nice to haves include fuzzy filtering and language-specific keyword inclusion. The code is also somewhat of a mess

This doesn't have a high probability of seeing the light of day at the moment. The entire completion logic is taken from Cloud9. Given that C9 is GPL and Ace is BSD, I am not a lawyer and have no idea on if the two are even compatible. On top of which, as I said, all the C9 code was written by @zefhemel and @lennartcl so I assume their permissions would be necessary (and above all, polite to ask for).

Something to think about over the holidays! :santa:

gjtorikian commented 11 years ago

Autocompletion for keywords per language is working: http://screencast.com/t/7gUZwdyCcbEe

Unfortunately this will also need to work for keywords asembled via giant regexp, and that's probably harder to do.

niXman commented 11 years ago

@gjtorikian, Tell me please, autocompletion is available for all languages? Where can I find a description of the process of adding words to autocompletion?

gjtorikian commented 11 years ago

"For all languages" is not quite accurate. It depends entirely on the keyword generation used by the language's syntax highlighter.

Take, for example, CSS: https://github.com/ajaxorg/ace/blob/master/lib/ace/mode/css_highlight_rules.js#L40-44

The autocompletion, when in CSS mode, incorporates these tokens as potential autocompletion matches. So when you type "ani" it sees that CSS also has keywords beginning with "ani" and adds them to the dropdown, along with any "ani" tokens in your document. Therefore, "adding words to autocompletion" is no different than making sure the highlighter supports the word already.

However, some of the time, Ace also uses giant regexp matches, as seen above, which also accounts for keyword construction. So it will need to work to match those, too.

gjtorikian commented 11 years ago

Ok, I consider the usability of this about 90% finished.

@nightwing I'd like your advice / help on a few things:

I added the feature to rerun a search on backspace; I want to do the same thing on text input: http://screencast.com/t/RtbmZAMii
What's the best way to do that? Listen to keydown ?
Also seen in the video (and discussed above), I can get a list of keywords for any language, basically, whatever is returned from createKeywordMapper. What I really want to do next is to ascertain keywords from the giant regexp blobs. To do this, I want to split based on matching values: https://github.com/ajaxorg/ace/blob/feature/codecomplete/lib/ace/edit_session.js#L945-L948
Basically, if the token array has some matched keyword, I should be able to split the state regex and grab the right regexp grouping. Is there something in tokenizer that does this? I couldn't find it. Or maybe this method is non-performant and sucks.

Other than these things I am pretty happy with what's working so far. If I can get at least the first one working I'll make the PR.

adamjimenez commented 11 years ago

I'm currently hooking into the onchange event for text composition. The main issue I've had is working out the context. I'm mostly using regexes to achieve this but surely it's better to make use of the tokeniser. I haven't found a way to query the tokeniser for what the next input will be for a given range. e.g. col:10, row:2 = css-property-name.

Also where is createKeywordMapper?

nightwing commented 11 years ago

1 in acebug i used selectionChange event so that moving cursor with arrows was changing filtering too

I added the feature to rerun a search on backspace;

i thought to use FilteredList for this. get all completions at first and change it's filtered after each keypress.

2 maybe we should drop giant regexps altogther? they seem to take more memory than an object

The main issue I've had is working out the context.

that was the main issue for acebug too, currently token names are a mess from textmate scope names and classnames highlighted by themes, i think token.type should give `language(js|css|etc..).sublanguage?(string|regex|comment|).token(keyword|variable|escape|something else mode specific) themes must provide fixed set of styles and modes will provide a map from token names to theme styles

Also where is createKeywordMapper?

https://github.com/ajaxorg/ace/blob/feature/codecomplete/lib/ace/mode/text_highlight_rules.js#L99

gjtorikian commented 11 years ago

i thought to use FilteredList for this. get all completions at first and change it's filtered after each keypress.

I don't know how this will work for deletions. See this video: http://screencast.com/t/kwiobXzuYR . nct gets the doc and keyword completion for nct, but nc needs to do more work to get a new list.

maybe we should drop giant regexps altogther? they seem to take more memory than an object

Yeah, I have taken them out now. It's too much of a hassle to deal with and it sounds like there will be a refactor of the highlighters coming up.

I will implement text input filtering and then open a PR. I also think emmet integration is good but should be done at some other point.

joshholat commented 11 years ago

I pulled down your branch and built it, but I'm getting this JS error on line 12689 of ace.js:

Uncaught TypeError: Object function (module, callback) {
            return _require(moduleName, module, callback);
        } has no method 'toUrl'

Here's my setup:

    var editor = ace.edit("codeEditor");
    editor.renderer.setShowPrintMargin(false);
    editor.renderer.setShowInvisibles(false);
    editor.renderer.setDisplayIndentGuides(false);
    editor.getSession().setUseWrapMode(true);
    editor.getSession().setFoldStyle("manual");
    editor.getSession().setUseWorker(false);
    editor.setTheme("ace/theme/twilight");

Something on my end?

nightwing commented 11 years ago

Basic support for autocompletion was added recently, Thanks to Garen. Remaining problems with it are tracked in https://github.com/ajaxorg/ace/issues/1470.

ajaxorg / ace

intellisense / code assist / auto-completion #110