How can I enable the Search Box in an Ace Editor?

Question

Hello stackOverflow community, this is my first question here and I'm wondering how to enable the Search Box in an Ace Editor.

I have a current demo of the project here. So far the editor has Emmet and Autocomplete. The next feature I need is the search box showing when the user presses CTRL+F in the editor.

Here is the code I used to configure the editor:

let e = document.querySelector("#editor");
let editor = ace.edit(e);
let langTools = ace.require("ace/ext/language_tools");
let Emmet = require("ace/ext/emmet");
ace.config.set("basePath", "path");
ace.config.loadModule("ace/ext/searchbox", function(m) {m.Search(editor)});


editor.getSession().setMode("ace/mode/html");
editor.setOptions({
    minLines: 24,
    maxLines: 24,
    enableBasicAutocompletion: true,
    enableSnippets: true,
    enableLiveAutocompletion: true,
    enableEmmet: true
});
editor.session.setUseWrapMode(true);
editor.session.on("change", function () {
    window.onbeforeunload = function () {
        return "Changes you made might not be saved";
    };
    var unloadListener = function () {
        return "Changes you made might not be saved";
    };
    window.addEventListener("beforeunload", unloadListener);
    editor.execCommand("find")
});

Can someone please help me to figure out what scripts to import and how to enable it? Thanks.

Answer 1

It should be built into a standard build.

editor.execCommand('find');

should display the searchBox. You can also use

editor.searchBox.show();
editor.searchBox.hide();

to show it manually (ie to implement your own key bindings). Ace has built in key bindings and there are advantages to using them (as well as disadvantages, such as they only work when you are focused on the editor). You should disable the internal "find" command if you're going to implement your own.