In an Angular application, how to integrate the Ace editor with a toolbar?

Question

I wish to write an Angular application which integrates the Ace editor with a toolbar for saving + undo/redo. I've created a basic plunk for working out this app.

As you should be able to tell from the plunk there is a 'toolbar' directive responsible for rendering the toolbar (with three buttons: Save, Undo and Redo) and an 'ace' directive responsible for rendering the Ace editor. Both directives reside in 'directives.coffee'.

The toolbar should behave the way you would expect from a text editor toolbar, ie:

• The save button should be enabled iff the document has changed since it was last saved
• When clicking the save button, the document state should change to pristine (ie, not dirty) and the save button should go back to the disabled state
• The undo button should be enabled iff there is at least one operation that can be undone
• When clicking the undo button, the editor should be told to undo the last operation and the undo button should be updated as per the above point
• The redo button should be enabled iff there is at least one operation that can be redone
• When clicking the redo button, the editor should be told to redo the last operation and the redo button should be updated as per the above point

So my question is, how can I devise an Angular binding between the Ace editor and the application toolbar so that the above specification is met?

Answer 1

I am not sure what do you need to do on angular side, but ace provides methods for all of this

var undoManager = editor.session.getUndoManager()
undoManager.isClean()
undoManager.markClean()
undoManager.hasUndo()
undoManager.hasRedo()

Note that isClean is based on undo stack not on document value, so writing and deleting a letter will enable save button even though value isn't changed.

Also it is better to use editor.on("input", function(){}) instead of 'change' since input event is fired asynchronously.