Search code examples
ace-editor

Manually change ace line numbers

I'm using the ace editor for multiple purposes but one use-case is to render diffs.

When you render a diff you have regular lines, green lines, and red lines, identical to what you would see in git. I have all that working, but now I I would like to be able to change the line numbers so that line numbers only appear on previous and inserted lines, I don't want line numbers on deleted lines.

I can't find anything in the ace API to do this, does anyone know if there is an easy way? It may be easiest to switch to CodeMirror because I see they have this:

lineNumberFormatter: function(line: integer) → string

I could manually change the DOM but my concern is:

  • Will that be intensive?
  • Is it a bad idea, is ACE going to refresh it later itself?
Solution

  • An equivalent of lineNumberFormatter in ace is gutterRenderer

    editor.session.gutterRenderer = {
  getWidth: function(session, lastLineText, config) {
     return lastLineText.length * config.characterWidth //desired gutter width in pixels 
  }, 
  getText: function(session, row) {  
     return row.toString(36) // any string
  }  
}
editor.renderer.updateFull()

    Another option is to redefine the editor.renderer.$gutterLayer.update method similar to https://github.com/c9/core/blob/master/plugins/c9.ide.scm/diff/unified.js#L185