ACE editor autocompletion keywords in upper case

Question

I have an ACE editor with a custom highlight mode, based on sql mode, and all is working fine, but I am defining keywords in upper case, and when autocompleter shows the available options, all of them are in lower case.

I have checked the old sql mode (before my modifications) and the behaviour is exactly the same.

Is there any way of converting this options to upper case?

I have review this question , but I have been unable to find a way to do it. I have also tried to remove all toLowerCase() functions into ext-language-tools.js , but still showing options in lower case.

Thank you!

Answer 1

It's a very dirty workaround, but you can try tweaking ext-language_tools.js by adding the following.

Where the code reads:

this.filterCompletions = function(items, needle) {
    var results = [];
    var upper = needle.toUpperCase();
    var lower = needle.toLowerCase();
    loop: for (var i = 0, item; item = items[i]; i++) {       
        var caption = item.value || item.caption || item.snippet;
        if (!caption) continue;

Change it to read the following, where 'keyword' and 'builtinFunctions' are the groups of completions you want to capitalize:

this.filterCompletions = function(items, needle) {
    var results = [];
    var upper = needle.toUpperCase();
    var lower = needle.toLowerCase();
    loop: for (var i = 0, item; item = items[i]; i++) {
        if (item.meta === 'keyword' || item.meta === 'builtinFunctions'){
            items[i].name = items[i].name.toUpperCase();
            items[i].value = items[i].value.toUpperCase();
        }
        var caption = item.value || item.caption || item.snippet;
        if (!caption) continue;

Answer 2

Here is a clean solution using a custom completer:

const customKeyWordCompleter = {
  getCompletions(editor, session, pos, prefix, callback) {
    if (session.$mode.completer) {
      return session.$mode.completer.getCompletions(editor, session, pos, prefix, callback);
    }
    const state = editor.session.getState(pos.row);
    let keywordCompletions;
    if (prefix === prefix.toUpperCase()) {
      keywordCompletions = session.$mode.getCompletions(state, session, pos, prefix);
      keywordCompletions = keywordCompletions.map((obj) => {
        const copy = obj;
        copy.value = obj.value.toUpperCase();
        return copy;
      });
    } else {
      keywordCompletions = session.$mode.getCompletions(state, session, pos, prefix);
    }
    return callback(null, keywordCompletions);
  },
};

this.editor.completers = [
  customKeyWordCompleter,
  customCompleter,
];