How to make a Menu of Snippets with the Ace Editor? - ace-editor

Question

I have managed to get my snippets working with the basic autocompletion:
ace.define("ace/snippets/bosun",["require","exports","module"], function(require, exports, module) {
exports.snippets = [
/* Sections */
{
name: "alert definition",
tabTrigger: "alertdef",
content:
"alert ${1:alertname} {\n\
warn =\n\
}\n"
},
{
name: "template def",
tabTrigger: "templatedef",
content:
"template ${1:templatename} {\n\
subject =\n\
}\n"
},
/* Funcs */
{
name: "avg reduction function",
tabTrigger: "avg",
content: "avg(${1:seriesSet})"
}
]
exports.scope = "bosun";
});
In the documentation on snippets it says:
When triggering a snippet through a menu or command you can configure
it to use the text selected prior to inserting the snippet in the
resulting code.
But I'm not clear on how I would create menu to list the snippets? (Ideally a menu that has submenus for each category of snippets, but happy to crawl first...)

Answer 1

Perhaps someone has a better way. But from reading the code in https://github.com/ajaxorg/ace/blob/master/lib/ace/snippets.js I have come up with:
$scope.aceLoaded = function (_editor) {
editor = _editor;
$scope.editor = editor;
editor.$blockScrolling = Infinity;
editor.focus();
editor.getSession().setUseWrapMode(true);
$scope.snippetManager = ace.require("ace/snippets").snippetManager;
$scope.bosunSnippets = $scope.snippetManager.snippetNameMap["bosun"];
editor.on("blur", function () {
$scope.$apply(function () {
$scope.items = parseItems();
});
});
};
$scope.listSnippets = function() {
var snips = $scope.snippetManager.snippetNameMap["bosun"];
if (snips) {
return Object.keys(snips)
}
return {};
}
$scope.insertSnippet = function(snippetName) {
$scope.snippetManager.insertSnippetForSelection($scope.editor, $scope.snippetManager.snippetNameMap["bosun"][snippetName].content);
$scope.editor.focus();
$scope.editor.tabstopManager.tabNext()
}
Which seems to work, perhaps there is a better way.