javascriptcode-snippetsace-editorreact-ace

Manually adding snippets to react-ace editor


Is it possible to manually add snippets through react-ace component.

For example, adding snippet myFun to javascript:

# Function
snippet myFun
    function ${1?:function_name}(${2:argument}) {
                let x = 'test';
        ${3:// body...}
    } 

I went through the documentation,FAQ ,similar questions here and here.


Solution

  • After digging the source code, it is possible with ace.define(..):

    import ace from 'brace';
    import snippet from '../lib/json-snippet'
    
    ace.define('ace/snippets/json', ['require', 'exports', 'module'], (e,t,n) => {
      (t.snippetText = snippet), (t.scope = 'json');
    });
    

    Snippet example:

    const snippet = '# AddNode\n\
    snippet addn\n\
        {\n\
            "nodeName": "${1:node_name}",\n\
            "algorithmName": "${2:algo_name}",\n\
            "input": []\n\
        }\n\
    ';
    
    export default snippet;
    

    Check out a demo here.