Ace Editor manually adding snippets

Question

TL;DR

I am trying to manually trigger ace editor snippets through a function call, rather than the conventional approach (keyboard keys).

Explanation

I need a function that takes in the editor and a snippet string as the parameters, and adds that snippet to the editor. function addSnippet(editor, snippet).

Ace editor supports TextMate-ish snippets.

if (${1:condition_name}) {
     ${2:body}
}

So when we call this function, it should add the snippet, highlight the snippet markers and select the first one. After filling the first one and hitting tab, the editor should move to the next snippet marker. Just like in the Kitchen Sink example (but I want to add/trigger snippets via a function call instead).

I tried hacking my way through and made this function. But it's messy and incomplete (doesn't support markers and tab presses). Is there any native method for this? I've seen a few examples using snippetManager, but they use keyboard triggers, not manual functions.

Any help regarding this issue would be appreciated. Thanks.

Ali Ashraf · Accepted Answer · 2015-08-10T08:38:46.090

35

After hours of hacks and research, I finally came across the insertSnippet function of snippetManager in ext-language_tools.js, it works this way:

var snippetManager = ace.require("ace/snippets").snippetManager;
snippetManager.insertSnippet(editor, snippet);

Pretty easy actually, couldn't find it earlier due to lack of documentation.

edited Aug 10 '15 at 08:38

answered Sep 29 '14 at 14:51

Ali Ashraf

759
1
8
17

The format is TextMate-ish. Just replace all placeholders in the code with `${number:text}` (the number starts with 1). Check out the example in the question. – Ali Ashraf Aug 05 '15 at 05:39
4

can you provide an example of the snippet that you have used – Shantanu Madane Apr 06 '17 at 11:58

score 6 · Answer 2 · answered Jul 18 '15 at 09:29

6

If you don't use RequireJS then the following syntax works as well:

ace.config.loadModule('ace/ext/language_tools', function () {
    editor.insertSnippet(snippetText);
});

answered Jul 18 '15 at 09:29

user2513149

850
12
15

score 2 · Answer 3 · answered Mar 02 '19 at 10:00

Use ace.define(...) for adding your snippet. The snippets are written in tex-like language.

For Snippet defined at ./src/lib/json-snippet.js:

// eslint-disable-next-line
const snippet = '# AddNode\n\
snippet addn\n\
    {\n\
        "nodeName": "${1:node_name}",\n\
        "algorithmName": "${2:algo_name}",\n\
        "input": []\n\
    }\n\
';

export default snippet;

// import your snippet
import snippet from "../lib/json-snippet";

// SUPER HACK FOR ADDING SNIPPETS
ace.define("ace/snippets/json", ["require", "exports", "module"], (e, t, n) => {
    // eslint-disable-next-line
    (t.snippetText = snippet), (t.scope = "json");
});

Use brace/mode/{filetype}, brace/snippets/{filetype} for defining file type and it snippets.
Find existing snippets at node_module/brace/snippets/ for overriding.

import "brace/mode/json";
import "brace/snippets/json";
import "brace/ext/language_tools";

For more information check out:

Demo
This repository

score 1 · Answer 4 · answered Apr 02 '21 at 18:20

The other answers seem to be kind of old or rather hacky. This worked for me using actual Ace APIs on v1.4.12 (albeit this seems to be totally and frustratingly undocumented).

const snippetManager = ace.require('ace/snippets').snippetManager;
const snippetContent = `
# scope: html
snippet hello
    <p>Hello, \${1:name}!</p>
`;
const snippets = snippetManager.parseSnippetFile(snippetContent);
snippetManager.register(snippets, 'html');

Exchange html for whatever scope you want.

In the editor type "hello" followed by TAB to trigger the snippet.

Ace Editor manually adding snippets

4 Answers4

Linked