CodeMirror AutoComplete Custom List

Question

I am having a bit of difficultly re the auto complete function in code mirror. What I am trying to do is two things (both which I am struggling with):

1) I want to enable auto complete for both HTML and JavaScript. Currently I can only get one working at a time using e.g.:

 CodeMirror.commands.autocomplete = function (cm) {
     CodeMirror.showHint(cm, CodeMirror.hint.html);
 };

How can I add the CodeMirror.hint.javascript to the list from the HTML one?

2) (Kind of more important) -- How can I add custom variables to the list of hints from HTML which area retrieved from an ajax call.....

i.e. I want to have the drop down show up with the current list of data from the html hints, but then add custom entries such as ##SomeCode1## and ##SomeCode2##

I have two problems here. First when I try to hard code the values in the 'html-hint.js' file the values all get appended with <... which is not what I want.

The second problem, kind of, is that I believe I have to write a new 'html-hint.js' file correct? I mean there is no way to pass anything in the 'options' parameter in the CodeMirror.hint.html above is there, to essentially merge two list.

I guest one and two are kind of the same come to think of it... Merging two lists of values for auto complete together.

I am guessing there is nothing already in the framework and I have to write a custom hint file, correct?

Any pointers would be appreciated. Sample code would be awesome.

Answer 1

If you do not specify a hint function, the show-hint addon will take the hint helper function defined for the local mode at which the completion happens, so that will be CodeMirror.hint.javascript in JavaScript code, and CodeMirror.hint.html in HTML.

If you need to add your own completion logic, you can replace (or wrap) these functions by simply overwriting them with your own code.

Here is a crude example hack that always adds "bozo" to JavaScript completions:

var orig = CodeMirror.hint.javascript;
CodeMirror.hint.javascript = function(cm) {
  var inner = orig(cm) || {from: cm.getCursor(), to: cm.getCursor(), list: []};
  inner.list.push("bozo");
  return inner;
};

Answer 2

Thanks to @Marjin for brief explanation, but since it doesn't cover filtering and a lot of people needs it, here's what I've done in mongoclient by following Marjin's answer. And partially took help from here

p.s. Don't forget to change hint with yours, since I'm using javascript I've changed javascript hint.

CodeMirror.hint.javascript = function (editor) {
        var list = Session.get(Template.strSessionDistinctFields) || [];
        var cursor = editor.getCursor();
        var currentLine = editor.getLine(cursor.line);
        var start = cursor.ch;
        var end = start;
        while (end < currentLine.length && /[\w$]+/.test(currentLine.charAt(end))) ++end;
        while (start && /[\w$]+/.test(currentLine.charAt(start - 1))) --start;
        var curWord = start != end && currentLine.slice(start, end);
        var regex = new RegExp('^' + curWord, 'i');
        var result = {
            list: (!curWord ? list : list.filter(function (item) {
                return item.match(regex);
            })).sort(),
            from: CodeMirror.Pos(cursor.line, start),
            to: CodeMirror.Pos(cursor.line, end)
        };

        return result;
    };

Answer 3

In case it helps someone, here's a version that combines parts from both @Marjin and Sercan. It uses the default hints, and adds our extras.

const hintWords=["trap.our()", "trap.hints()", "trap"]; // custom hints
const jsHinter = CodeMirror.hint.javascript; // copy default hinter for JavaScript
CodeMirror.hint.javascript = function (editor) {
    // Find the word fragment near cursor that needs auto-complete...
    const cursor = editor.getCursor();
    const currentLine = editor.getLine(cursor.line);
    let start = cursor.ch;
    let end = start;
    const rex=/[\w.]/; // a pattern to match any characters in our hint "words"
    // Our hints include function calls, e.g. "trap.getSource()"
    // so we search for word charcters (\w) and periods.
    // First (and optional), find end of current "word" at cursor...
    while (end < currentLine.length && rex.test(currentLine.charAt(end))) ++end;
    // Find beginning of current "word" at cursor...
    while (start && rex.test(currentLine.charAt(start - 1))) --start;
    // Grab the current word, if any...
    const curWord = start !== end && currentLine.slice(start, end);
    // Get the default results object from the JavaScript hinter...
    const dflt=jsHinter(editor);
    // If the default hinter didn't hint, create a blank result for now...
    const result = dflt || {list: []};
    // Set the start/end of the replacement range...
    result.to=CodeMirror.Pos(cursor.line, end);
    result.from=CodeMirror.Pos(cursor.line, start);
    // Add our custom hintWords to the list, if they start with the curWord...
    hintWords.forEach(h=>{if (h.startsWith(curWord)) result.list.push(h);});
    result.list.sort(); // sort the final list of hints
    return result;
};