We recently announced the launch of the Google Drive Realtime API that lets developers create collaborative apps with the same technology that powers Google Docs, Sheets, and Slides. Today we’ve added a couple of small, but very useful, features that let developers do even more with the Realtime API: undo and redo.
The new undo and redo features provide developers a way to easily undo (or redo) local changes without worrying about the complexities that can happen in a collaborative environment. The Realtime API automatically resolves potential conflicts from overlapping edits by collaborators to undo only the local changes.
The functions themselves are very simple to implement. The following code demonstrates how straightforward adding this functionality to your app can be:
if (model.canUndo) { model.undo(); }
You could connect this code directly to an undo button in your app’s UI to undo the last change a local user made. No extra hard work required!
Undo and redo also come with an associated event emitted by the model class that lets you know when the features are available. You just need to attach an event listener to the model and wire up the appropriate UI changes to enable/disable undo/redo buttons. For example, you could add two buttons inside the <body> tag of your HTML document:
<body>
<button id="undoButton" disabled>Undo</button> <button id="redoButton" disabled>Redo</button>
Then, add the following code inside the onFileLoaded callback inside your script to connect the logic to the buttons:
var model = doc.getModel(); var undoButton = document.getElementById('undoButton'); var redoButton = document.getElementById('redoButton'); undoButton.onclick = function(e) { model.undo(); }; redoButton.onclick = function(e) { model.redo(); };
Then add an event handler to enable and disable the buttons when local changes are available:
var onUndoRedoStateChanged = function(e) { undoButton.disabled = !e.canUndo; redoButton.disabled = !e.canRedo; }; model.addEventListener(gapi.drive.realtime.EventType.UNDO_REDO_STATE_CHANGED, onUndoRedoStateChanged);
For a complete example of this implementation, see the Realtime Quickstart.
The Realtime API makes implementing undo/redo features very straightforward for most applications. For more information, see the Realtime API documentation.
