A hypersearch component for ace editor that allows you to search the editor and display a list of all results. Clicking the result will take you to the proper place in the editor. Searching accross multiple edit sessions is supported. You can experiment with the plunk here. See issues section for list of todo items.

Examples

Here are the examples from the examples directory

• basic: Shows basic usage using an external textbox for searching and checkboxes for search options.
• acebox: Uses the built in ace search form.
• sessions: Advanced example using the built in ace search form, extending the form for hypersearch and searching accross multiple sessions.
• instances: The 3 above examples combined on one page to show multiple instances.
• dialog: Show search results in a dialog.

Usage

Create HTML

<div id="editor"></div>
<div id="hyper">
    <input type="text" id="needle"/>
    <button id="search">Search</button>
    <div id="results">results</div>
</div>

Reference scripts

<!-- use these or local copy -->
<script src="http://ace.c9.io/build/src/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="http://richardbondi.net/hyper-ace/hyper-ace.js"></script> <!-- or hyper-ace.min.js -->

Initialize ace editor

    // create ace editor
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/monokai");
    editor.getSession().setMode("ace/mode/javascript");

Initialize hyper-ace component

// create hyperace
var hyper = hyperace.create(editor, 'results', 'needle');

'needle' is the textbox used for search. If ommited, the ace default searchbox is used and [tab] triggers the search. When using the ace default, you can search multiple sessions by setting searchMultiSession to true or a single session by setting searchMultiSession to false.

Add listeners

// for jQuery if you must
// $('#search').click(function () {
document.getElementById('search').addEventListener('click', function () {
   hyper.search();
});

For multiple sessions

Create sessions

var sessions = [];

// ex. blank editor in css mod
var session = new ace.EditSession('', {
    "path": "ace/mode/css" 
});
sessions['style.css'] = session;

// repeat for each session

Add sessions to hyper-ace

hyper.setSessions(sessions); 

When switching editor sessions, just tell hyper-ace the identifier and it will switch the ace session

hyper.setSession('style.css');

To search

hyper.searchSessions();

API

hyperace

create (editor, target, [textbox], [options])

Static function to create hypersearch instance

• {Editor} editor the editor
• {string} target where to display the results
• {string} textbox the search pattern element (optional)
• {string} options additional configuration (optional)
• return {hypersearch}

options:

• matchclass: the css fclass or highlighting matches in the result. Default = 'hyperace-match'
• lineclass: the css class for highlighting the selected line. Default = 'hyperace-line'
• load: callback function for default texbox loaded.

hypersearch

clear()

clears search results

search()

search the current session

searchSessions()

search across multiple sessions

set(options)

set ace editor search options

• {object} options search option, set any of the following to true or false ex. hyper.set({"regExp": false, "wholeWord": true});

available options: "regExp", "caseSensitive", "wholeWord"

setSession(identifier)

update the session for hyper-ace and ace

• {string} identifier the identifer for the session to set

setSessions(sessions)

set sessions for multiple session search

• {Array} sessions array of ace.EditSession objects with the key as named identifier