Page Comparison

...

The editor implements IControl<String>, and the value of the editor is the code to be edited.

Using the editor

A typical piece of code to create the editor looks like this:

AceEditor editor = new AceEditor();
editor.setMode("ace/mode/pgsql");
editor.setTheme("ace/theme/iplastic");
editor.setHeight("200x");
editor.setWidth("600px");

The editor then looks like this (live demo):

Manipulating the editor

The editor implements IControl, so it has the usual assortment of methods and bindings for enable/disable, readonly etc.

In addition the following methods are implemented:

Code completion

The editor supports code completion. To make this work you need to create a method which, depending on the text position and context, returns a list of AceEditor.Completion instances. The method will be called when the user presses CTRL+Spacebar in the editor, and the editor will allow the user to pick one of the values which will then be inserted.

An example code completion method:

private List<Completion> completeCode(String text, int row, int col, String prefix) {
   String[] split = text.split("\\W+");            // All words in the document
   Set<String> set = Arrays.asList(split)
      .stream()
      .map(a -> a.toLowerCase())
      .collect(Collectors.toSet());

   //-- Now find all words starting with prefix
   return set.stream()
      .filter(a -> a.toLowerCase().contains(prefix))
      .map(a -> new Completion(a, a, "Word", 10))
      .collect(Collectors.toList())
      ;
}

This method takes the current content of the editor (text) and splits it into words. It then lowercases them and removes duplicates by making a Set. And finally it takes from that Set all words that contain the prefix, which is the set of letters before the cursor in the editor at the time that the ctrl+space was pressed. This results in the following:

Image Added

The prefix is calculated by the Ace editor itself. It contains only characters and letters. This makes it impossible to complete a "dotted identifier" like "day.number". To do this you need to decode the identifier to complete yourself. You can do that by calling getDottedPrefix() on the editor, passing in the position and a method which returns true for all characters you consider valid in the prefix.

Markers

You can use editor markers to highlight problems inside the editor. Press the "mark vars" button and the clear markers buttons to see, and look in the source code of that page how to use them.

Internals

The editor loads the Ace editor's javascript from a CDN (https://cdnjs.cloudflare.com/ajax/libs/ace/{version}/xxx). This allows easy caching and deployment. To add the required parts as HeaderContributors to a page there are two methods:

...

The setMode(String) method can be called to set the editor's mode (which language is being edited), like: editor.setMode("/ace/mode/javascript");

Available methods to play with the editor state

The following methods are implemented:

...