Wait rendering ace editor

Question

How can i wait rendering editor after

editor = ace.edit("editorId");
editor.setValue(myCode, pos);

Unfortunately, ace editor doesn't has 'onload' events. I'm trying to use 'change' event, but this event fires many times and last time it fires before rendering html.

editor.on('change', function changeListener() {              
    if(isCodeInserted) {
         //do something        
         editor.removeEventListener('change', changeListener);
    }
});

Fiddle : jsfiddle.net/SdN2Y

Answer 1

Actually, you can:

[TL;DR]:

editor.renderer.on('afterRender', function() {
    // Your code...
});

Ace API does not show all events, but you can search for them with "_signal" keyword on their repo.

More in detail, this is the line in their code that publishes the "afterRender" event: " this._signal("afterRender"); "

In the snippet I'm getting the layout config after a render, please take a look.

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

editor.renderer.on('afterRender', function() {
  let config = editor.renderer.layerConfig;
  console.log("afterRender triggered " + JSON.stringify(config));
});

#anEditor {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

<script src="https://ajaxorg.github.io/ace-builds/src-min-noconflict/ace.js"></script>
<pre id="anEditor">
  function helloWorld(){
    return "Hello, World!"
  }
</pre>

Answer 2

This appears to be a bug in editor scrolling functions which do not check if editor and font size caches are up to date.

You can call ace.resize(true) to force synchronous rerendering. (note: do not use this function often since it is slow)