handle undo for track changes additions

app/components/SimpleEditor/ContainerEditor.js

 import { each, keys, includes } from 'lodash'
 import {
   ContainerEditor as SubstanceContainerEditor,
-  // createAnnotation,
   Surface,
   uuid
 } from 'substance'
@@ -34,21 +33,42 @@ class ContainerEditor extends SubstanceContainerEditor {
 
     // open for editing
     // TODO -- should maybe change to isEditable ?
-    // or maybe deleted? we never pass a disabled prop explicitly
+    // or maybe delete it? we never pass a disabled prop explicitly
     if (!this.props.disabled) {
       el.addClass('sm-enabled')
       el.setAttribute('contenteditable', true)
     }
 
-    // editing locked, selection open (for comments)
-    // if (this.isReadOnlyMode()) {
-    //   const documentSession = this.getDocumentSession()
-    //   documentSession.on('didUpdate', this.disableToolbar, this)
-    // }
-
     return el
   }
 
+  didMount () {
+    // TODO -- replace with super.didMount()
+    Surface.prototype.didMount.apply(this, arguments)
+
+    this.container.on('nodes:changed', this.onContainerChange, this)
+
+    // this.context.documentSession.on('didUpdate', (change, info) => {
+    //   // console.log(this.getSelection())
+    //   // console.log(this.context.commandManager.getCommandStates().strong.mode)
+    //   // console.log(this.context.commandManager.getCommandStates()['track-change'].mode)
+    //   console.log('\n did update')
+    //   console.log('change', change)
+    //   console.log('info', info)
+    //
+    //   if (info.track) change.change.info.track = true
+    // }, this)
+
+    if (this.isEmpty()) this.createText()
+
+    if (this.isReadOnlyMode()) {
+      const documentSession = this.getDocumentSession()
+      documentSession.on('didUpdate', this.disableToolbar, this)
+
+      this.addTargetToLinks()
+    }
+  }
+
   onTextInput (event) {
     event.preventDefault()
     event.stopPropagation()
@@ -69,22 +89,6 @@ class ContainerEditor extends SubstanceContainerEditor {
     }
   }
 
-  didMount () {
-    // TODO -- replace with super.didMount()
-    Surface.prototype.didMount.apply(this, arguments)
-
-    this.container.on('nodes:changed', this.onContainerChange, this)
-
-    if (this.isEmpty()) this.createText()
-
-    if (this.isReadOnlyMode()) {
-      const documentSession = this.getDocumentSession()
-      documentSession.on('didUpdate', this.disableToolbar, this)
-
-      this.addTargetToLinks()
-    }
-  }
-
   // create an empty paragraph with an empty node
   // then select it for cursor focus
   createText () {

app/components/SimpleEditor/elements/track_change/TrackChangesProvider.js

+import { keys, last } from 'lodash'
 import { createAnnotation } from 'substance'
 
 class TrackChangesProvider {
   constructor (config) {
     this.config = config
+    this.config.documentSession.on('didUpdate', this.handleUndoRedo, this)
   }
 
   handleTransaction () {
+    const mode = this.getMode()
+    if (mode) return
+
     const surface = this.getSurface()
 
-    surface.transaction((tx, args) => {
+    const transformation = (tx, args) => {
       const selection = this.createSelection(args)
-      // console.log(this.getTrackState())
 
       const newNode = {
         selection: selection,
         node: { 'type': 'track-change' }
       }
 
-      const mode = this.getMode()
+      createAnnotation(tx, newNode)
+      this.clearSelection(args)
+      // this.removeAnnotationFromHistory()
+    }
 
-      if (!mode) {
-        createAnnotation(tx, newNode)
-      } else if (mode === 'delete') {
-        // continue here to expand annotation
-      }
+    const info = {
+      track: true
+    }
 
-      this.clearSelection(args)
-      this.removeAnnotationFromHistory()
-    })
+    surface.transaction(transformation, info)
+  }
+
+  handleUndoRedo (update, info) {
+    if (!info.replay) return
+    console.log(update)
+    console.log(info)
+    this.handleUndo(update)
+    this.handleRedo(update)
+  }
+
+  handleUndo (update) {
+    const deleted = update.change.deleted
+    const deletedLength = keys(deleted).length
+
+    // console.log(keys(deleted))
+
+    if (deletedLength === 0) return
+    if (deletedLength > 1) {
+      return console.warn('FIXME: Multiple operations in track changes replay!')
+    }
+
+    const deletedOp = deleted[keys(deleted)[0]]
+    if (!deletedOp.type === 'track-change') return
+
+    const documentSession = this.getDocumentSession()
+    documentSession.undo()
   }
 
-  removeAnnotationFromHistory () {
+  handleRedo () {
     const documentSession = this.getDocumentSession()
-    setTimeout(() => {
-      documentSession.doneChanges.pop()
-    }) // ensure that text insertion has finished
+    const undoneChanges = documentSession.undoneChanges
+    const lastChange = last(undoneChanges)
+    const op = last(lastChange.ops)
+
+    const isTrack = op.path[0].split('-').slice(0, -1).join('-') === 'track-change'
+    console.log(isTrack)
   }
 
+  // removeAnnotationFromHistory () {
+  //   const documentSession = this.getDocumentSession()
+  //   // console.log(documentSession.doneChanges)
+  //   setTimeout(() => {
+  //     console.log(documentSession.doneChanges[1].toJSON())
+  //     // documentSession.doneChanges.pop()
+  //   }) // ensure that text insertion has finished
+  // }
+
   clearSelection (args) {
     const selection = args.selection
     selection.startOffset = selection.endOffset
@@ -64,13 +105,6 @@ class TrackChangesProvider {
     return state.mode
   }
 
-  // createCommandState () {
-  //   const commandState = this.getCommandState()
-  //   commandState.disabled = false
-  //   commandState.mode = 'create'
-  //   return commandState
-  // }
-
   getDocumentSession () {
     return this.config.documentSession
   }