Search code examples
javascriptace-editor

ACE Editor "end of parsing" event


I would like a function to be called back when ACE editor ends parsing the new source code to be able, for example, to add a click event listener on every subsequent .ace_identifier DOM node. So far, I could not find the right ACE event to use for this and the simple following code does not do anything:

    editor = ace.edit $('#editor')
    editor.setReadOnly true

    // editor change event - never triggered in this case
    editor.getSession().on 'change', (e) ->
      console.log e

    // changing the language makes ACE parse the source code and generates
    // a new DOM...
    editor.getSession().setMode "ace/mode/javascript"
    // ... but a this point, $('.ace_identifier') returns a empty array
    // instead of the expected list of ace_identifiers created 
    console.log $('.ace_identifier')

Solution

  • There is no event for "end of parsing", you could use afterRender event on editor.renderer, But ace uses dom as a canvas, creating nodes only for visible part of the text, and often discarding and redrawing whole thing, so adding event listeners to dom nodes inside ace editor is a bad idea.

    You can add a listener to the editor instead, and use session.getToken to get token under the cursor.

    This discussion in ace google group might be helpful https://groups.google.com/d/msg/ace-discuss/XFnf3-3gcAY/u7OIMdHkGGwJ