I'm using CodeMirror library for my online python code editor project.It's auto completion working fine. But I want to add user defined variables, functions, classes to auto complete list and remove them from list when I remove the definition from editor at run time. Also I want to do this in vanilla JS without JQuery.
var editor = CodeMirror.fromTextArea(myTextarea, {
mode: {
name: "python",
version: 3,
singleLineStringErrors: false
},
lineNumbers: true,
indentUnit: 4,
extraKeys: {
"Ctrl-Space": "autocomplete",
"Ctrl-/": "toggleComment",
"Alt-E": runCode,
"Alt-C": clearOutput
},
matchBrackets: true,
autoCloseBrackets: true
});
Finally I found that anyword-hint.js of CodeMirror can use to acomplish this task. So I combine the functionality of python-hint.js & anyword-hint.js. (I used npm to install CodeMirror because I was working with a NodeJs project)
<script src="node_modules/codemirror/lib/codemirror.js"></script>
<script src="node_modules/codemirror/mode/python/python.js"></script>
<script src="python-hint.js"></script>
<!-- this script not contains in CodeMirror. I have added manually -->
<script src="node_modules/codemirror/addon/hint/anyword-hint.js"></script>
<script src="node_modules/codemirror/addon/hint/show-hint.js"></script>
<link rel="stylesheet" href="node_modules/codemirror/lib/codemirror.css">
<link rel="stylesheet" href="node_modules/codemirror/addon/hint/show-hint.css">
<script>
function getAllHints(e) {
var hints = CodeMirror.pythonHint(e);
var anyHints = CodeMirror.hint.anyword(e);
anyHints.list.forEach(function(hint) {
if (hints.list.indexOf(hint) == -1)
hints.list.push(hint);
})
hints.list.sort();
if (hints) {
CodeMirror.on(hints, "pick", function(word) {
if (word.charAt(word.length - 1) == ')')
editor.execCommand("goCharLeft");
});
}
return hints;
}
function showAllHints() {
editor.showHint({
hint: getAllHints,
completeSingle: false
});
}
var editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
mode: {
name: "python",
version: 3
},
lineNumbers: true,
indentUnit: 4
});
editor.on('inputRead', function onChange(editor, input) {
if (input.text[0] === ' ' || input.text[0] === ":" || input.text[0] === ")") {
return;
}
showAllHints();
});
</script>
I have removed
if(completionList.length == 1) {
completionList.push(" ");
}
(35-37 lines) from python-hint.js because I have set completeSingle: false
in my showAllHints()
function.
I know that getAllHints(e)
function can optimize more & have some issues like can't filter out variable, function, class names.
Which means the hint list includes variable, function, class names & also includes previously typed strings, numbers etc.
However this is what I expected to do. So I decided to post as a answer before optimizing.
Any optimization tips, suggestions an more better answers also welcome.