Ace Editor AutoComplete Tooltip + Web Link

[Billy]

Hi,

How do I display a tooltip after the user selects an autoComplete option?  For instance, after the user selects one of the options from the auto complete popup, how do I provide the user with a tooltip that displays more information about the selected autoComplete option? 

Furthermore, is it possible to make the tooltip into a clickable web link, such that the user can be directed to specific documentation?

Please see attached screenshot.

[Harutyun Amirjanyan]

Hi

it's not clear from the screenshot whether you want to show tooltip
when autocompletion popup is open or after inserting completion.
if you want it when popup is open use "changeHoverMarker" and "select"
events from popup to find selected row, and use absolutely positioned
div to display any additional information you want.

[Chris Ainsley]

Hi,

Sorry to step into this thread, but, myself, I have a requirement for Eclipse-like hovers on each tooltip option.

At the moment, when implementing the "getProposals()" function, proposal entries have the following attributes:

Name

The name to be displayed in the dropdown

Value

The value to be substituted

Score

An integer used to sort the completion proposals.

Meta

The category of the autocomplete (shown on the right hand side)

I would like to see the following options added:

HtmlTooltip

An optional html tooltip for the proposal item.

SnapbackAmount

An optional number of characters to move the cursor back after a completion proposal (at the document level, not the row level). For example, if a completion proposal were the name of a function, then we would have VALUE=myFunction(<<arg>>) and we might snap back the cursor to after the "(" character.

SnapbackSelectionRange

Optional, and only used if the snapback amount is non null and positive, which contains a number of character to select forward from the new cursor position. This should be an amount of characters in the document, not on the row, such that it is possible to select characters on one or more rows via a value provided here.

Here is an illustrated example of the use case (assume that Ace editor is wired up to a back-end with an API database via the getProposals() hook):

I'm not sure if this is achievable, or if it is desirable for anyone else, but I can say that I have definite use-cases for all of these features. Let me know if this type of feature is on the roadmap anywhere.

Regards,

Chris

[Harutyun Amirjanyan]

uses requireing SnapbackAmount and SnapbackSelectionRange can be
achieved by snippets

var start = value.length-SnapbackAmount, end = start + SnapbackSelectionRange
var parts = [value.slice(0, start), value.slice(start, end),
value.slice(end)].map(function(str) {
return str.replace(/[$\\]/g, "\\$&")
})
match.snippet = value[0] + "${0:" + value[1] + "}" + value[2]

tooltip isn't implemented yet, but it should be relatively easy to
implement using ace/tooltip and some logic for positioning.

[Chris Ainsley]

Hi Harutyun,

Thanks for the reply.

I'm currently using Ace Editor via the GWT wrapper, and in truth, I have very little experience hardcore DOM manipulation with JavaScript (although of course the language itself is not so difficult to understand) so my preferred approach for everything is to have a clean and clear ACE API hook that operates on a data structure in which to implement everything rather than writing new JavaScript functions within the GWT wrapper. 

With regard to the cursor snapback / snippets, thanks for the tip, but my feeling is that it is much simply just to add the entries to the API, and then no bespoke JavaScript code will be required at all from the context of the GWT wrapper. Everything is just data again (apart from the callback). If you don't need the functionality, you just don't provide the fields, if you need them, then no bespoke snippets are required. The snippet example also has a problem that it requires the snapbackamount and snapback selection range to be provided from somewhere, and they can only be provided at a per-entry level, so we still require those fields in the data structure I would think. I know how to provide this via the getProposals() /addCompletor() but unfamiliar with how to wire up snippets via the wrapper. Having a single API for completion (as per the image below) is as easy as it gets from a system integrators perspective.

Similarly, the tooltip, which you recommend as being implemented with an absolutely positioned DIV, well yes, it could be. I would ask if this could be added in a way similar to my original request. To me, all three of these attributes are so generic that I feel it benefits all for them to be added so everyone can benefit from a good default implementation (my own implementation would be terrible, as I have very little experience with JavaScript / DOM manipulation).

If you can find a way to work these options into the product in future releases, I would be grateful. The alternative it seems is adding some hacks into the GWT wrapper to support the desired generic functionality, and I very much dislike hacking.

This is how clean the current approach is (in GWT):

On a autocompletion event, I simply add instances of this class to a list, and I have complete control over the autocompletions. It is devastatingly simple. No JavaScript involved from my own codebase - the wrapper takes care of it.

Adding three fields to this class and having ACE be able to display tooltips and snapback automatically from the additional values is by far the cleanest outcome from my own perspective but that is perhaps because I'm a selfish Java programmer ;-).

If you are firm that the functionality cannot be added or should not be added at the library level, then I will of course investigate workarounds at the wrapper level (although I'm not sure if the wrapper maintainer will accept these changes if they don't directly map core functionality).

Thank you very much for your work on this project, I am very grateful for the amazing contributions you have made to this library along with David Hovemeyer's excellent work on keeping the wrapper up-to-date so that GWT users can join the party..

Regards,

Chris

[Harutyun Amirjanyan]

Hi Chris

I agree that tooltip should be implemented by ace, but i am not really sure when it will be implemented.

i don't want to add special support for snapback since it's a special case of snippets feature, which also supports multiple selections and tabstops

i see that having to call js from java for this, isn't nice, but you don't need to write any js code for this, just modify string in java to the form
text${0:selectedText}moreText
escaping occurrences of $ and \ with \$ and \\

and use transformed text for this.snippet instead of this.value

can this work for you? or do you think this is still too messy/complex

Regards,

Harutyun

[Chris Ainsley]

Hi,

Thanks for the advice. Off the back of it I just adjusted my local copy of the wrapper (if this stabilizes I'll submit a pull request for the changed on the main ACE GWT project), and it kind of doesn't work when I specify the following value in the "snippet" attribute :  "text${0:selectedText}moreText".

What happens is that when there is a single autocomplete proposed (with that value), that ACE simply displays the autocomplete correctly, and selects the selected text area as it should. When there are multiple snippets available, the autocomplete list box is displayed as empty. None of the auto-completes have any characters that need to be escaped (in this test):

This is how it is I set up the snippets autocomplete:

1. I emptied the completers array.

2. I added a new custom completer vie langTools.addCompleter(...)    .. wrapped by the GWT wrapper. 

The custom completer adds JSON-like elements with the following values set

name : A alphabetic name (all letters are a-z)

snippet : A snippet in the format specified above, for the purpose of the test, all snippets were hard coded to the single value above for testing purposes

score : A zero was supplied for the test

meta: "custom"

Using this approach, the listbox does not display the names of the snippets, but if I select an entry, the snippet is inserted and it moves the cursor to the first (and only) tabstop.

I abstracted out the concept of a pure auto-completion from a snippet based substitution as such :

I'm sure the solution is simple. Is it because I removed the default snippets handler from the completers array? If so, then I need a way of removing the "local" handler explicitly.

Chris

[Harutyun Amirjanyan]

Ah i see It expects a property named 'caption' instead of 'name'

[Chris Ainsley]

Hi,

If I replace "name" with "caption", it does indeed work. It now works cleanly, without a tooltip, but the majority is working now, although it does lead to another question ....

Is it normal for tab stops to work backwards?

That is, for the following snippet,the first item highlighted is "two" then when I hit the tab key, the next item highlighted is "one". I'm not sure if this is normal or not, and if it is normal, why?

sometest_${0:one}_someothertext_${1:two}_someothertext

Chris

[Chris Ainsley]

It's ok, I solved the tab ordering problem, you have to start at offset 1, not zero.

[Harutyun Amirjanyan]

tabstops in ace behave the same way as tabstops in textmate/sublime text
they start at 1, and 0 is the last tabstop, if snippet doesn't have 0
tabstop, one will be added automatically at the end of the string.

[Chris Ainsley]

Harutyun,

I've almost got Ace working exactly the way I want it. Thanks for your help.

The only thing that remains is to be able to display API information on completion proposals by way of a panel next to the drop down list. You mentioned this is possible with absolute positioning, but I don't know how to plug in such functionality such that it only appears when a completion proposal box is visible, and hides when the box is not visible. It also has to be wired up to use per-entry metadata I would imagine. It's not hard to provide that data in an additional field from the GWT wrapper perspective, but changing the behaviour of Ace to show the popup, is there an existing hook that I can leverage or must I add that functionality into ACE in order to be able show the tooltip?

Chris

[Harutyun Amirjanyan]

Hi
sorry i missed your question.
were you able to find a solution?
It appears the only way to get notified when popup is shown, is to
reimplement some of the language_tools functionality, which isn't
good.
since i'll need to modify that code to emit required events, i'll try
to also add support htmlTooltip. sometime during the next week.

[Chris Ainsley]

Hi,

No, I wasn't able to solve this myself. Did you manage to take a look at it or not.

I assume as far as the API is concerned, there will simply be another field associated with the auto completion item which will contain the optional tooltip to be displayed when the item is selected. In my case, the tooltip text may be up to 1,000 characters so it is not simply to be used for function names but rather a partial narrative of the meaning of particular function calls.

Chris

[Chris Ainsley]

Sorry to bother you, but I wanted to ask again regarding this issue... 

[Harutyun Amirjanyan]

Sorry this got delayed so much
I've added it in https://github.com/ajaxorg/ace/pull/2148
snippetCompleter in the same pr, demonstrates how to use the new api
https://github.com/ajaxorg/ace/pull/2148/files#diff-c8a283296b7fbc56f208ba4977ad3d60R70

[Chris Ainsley]

Thanks Harutyun,

I'm looking to expose this functionality via Ace GWT, but it appears that the pr has not yet been pulled into the mainline. Any idea when this might occur?

Chris

[Morgan Yarbrough]

I created a Tern plugin for ACE that is active in this Chrome App. The plugin has a custom solution for showing a tooltip next to the popup completor. The source is here.

[Harutyun Amirjanyan]

@Morgan cool that you got tern working! ​

Do you have online demo for it? Would be good to add a link to that from ace site and wiki.

The Chrome app seems to be broken though, i am getting 

worker-tern.js:25 Uncaught TypeError: Cannot read property 'postMessage' of null

[Morgan Yarbrough]

I don't have an online demo yet as its still under heavy development.  Its not quite ready for public consumption but it will be soon and I'll have quite a few questions to ask you when I'm preparing it for the public. 

I currently use the Chrome App for my everyday JavaScript development and I don't get any errors. Can you give me a screenshot of the error? (Note that the Chrome App currently logs a lot of stuff that may or may not be critical errors, but these logs should not cause anything major to not work). 

Try pasting the code in this readme into the editor in JavaScript mode for a nice demo.