How can I add custom JavaScript snippets to the ACE editor?

Question

I am using Ace editor. I added custom JavaScript snippets

    // Initialize Ace editor

    var editor = ace.edit("editor");

    editor.setTheme("ace/theme/twilight");

    editor.getSession().setMode("ace/mode/html");

    // Enable autocompletion

    editor.setOptions({

      enableBasicAutocompletion: true,

      enableLiveAutocompletion: true,

      enableSnippets: true

    });

    // Define autocompletion snippets

    var htmlSnippets = [

      { caption: 'document.querySelector()', snippet: `document.querySelector($1)` },

      { caption: 'JSON.parse()', snippet: 'JSON.parse($1)' }

      // Add more snippets as needed

    ];

    // Create autocompletion provider

    var langTools = ace.require("ace/ext/language_tools");

    var completer = {

      getCompletions: function(editor, session, pos, prefix, callback) {

        callback(null, htmlSnippets);

      }

    };

    langTools.addCompleter(completer);

    #editor {

      position: absolute;

      top: 0;

      right: 0;

      bottom: 0;

      left: 0;

    }

 <div id="editor"></div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ext-language_tools.js"></script>

snippets and are working properly.

The problem is that these JavaScript snippets are showing up even though I'm not writing inside the script tag. These snippets I added also show when I'm writing inside the style tag. I want these snippets to only appear when I'm writing inside the script tag.

Answer 1

I managed to limit the snippets to the inside of <script> tags by checking if current active scope is javascript.

To do so I:

1- imported snippetManager

var snippetManager = require("ace/snippets").snippetManager; 

2- checked if javascript is an active scope.

var activeScopes = snippetManager.getActiveScopes(editor);

if(activeScopes.includes("javascript")){
    callback(null, htmlSnippets);
}

And it worked.

// Initialize Ace editor

    var editor = ace.edit("editor");
    var snippetManager = require("ace/snippets").snippetManager;  // <<<<< imported snippetManager
    editor.setTheme("ace/theme/twilight");

    editor.getSession().setMode("ace/mode/html");

    // Enable autocompletion

    editor.setOptions({

      enableBasicAutocompletion: true,

      enableLiveAutocompletion: true,

      enableSnippets: true

    });

    // Define autocompletion snippets

    var htmlSnippets = [

      { caption: 'document.querySelector()', snippet: `document.querySelector($1)` },

      { caption: 'JSON.parse()', snippet: 'JSON.parse($1)' }

      // Add more snippets as needed

    ];

    // Create autocompletion provider

    var langTools = ace.require("ace/ext/language_tools");

    var completer = {

      getCompletions: function(editor, session, pos, prefix, callback) {
        
        var activeScopes = snippetManager.getActiveScopes(editor); // <<<<<<<<<<  get active scopes
        
        if(activeScopes.includes("javascript")){ // <<<<<<<<<<<<<<<<<< check if active scope is javascript
             console.log("js code ...");
             // if so pass snippets
            callback(null, htmlSnippets);
         }

      }

    };

    langTools.addCompleter(completer);

#editor {

      position: absolute;

      top: 0;

      right: 0;

      bottom: 0;

      left: 0;

    }

<div id="editor"></div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ext-language_tools.js"></script>