basic first creation of track change on addition on text type

app/components/SimpleEditor/ContainerEditor.js

 import { each, keys, includes } from 'lodash'
 import {
   ContainerEditor as SubstanceContainerEditor,
+  // createAnnotation,
   Surface,
-  uuid, createAnnotation
+  uuid
 } from 'substance'
 
 class ContainerEditor extends SubstanceContainerEditor {
@@ -45,37 +46,27 @@ class ContainerEditor extends SubstanceContainerEditor {
     //   documentSession.on('didUpdate', this.disableToolbar, this)
     // }
 
-    // Start
+    return el
+  }
+
+  onTextInput (event) {
+    event.preventDefault()
+    event.stopPropagation()
+
+    if (!event.data) return
+    this._state.skipNextObservation = true
+
+    this.transaction(function (tx, args) {
+      if (this.domSelection) this.domSelection.clear()
+      args.text = event.data
+      return this.insertText(tx, args)
+    }.bind(this), { action: 'type' })
+
+    // don't rewrite the above, call it with super
     if (this.props.trackChanges) {
-      el.addEventListener('keydown', function (e) {
-        const surface = this.context.surfaceManager.getSurface('body')
-        const session = this.context.documentSession
-        const sel = session.getSelection()
-
-        const path = sel.path
-        const startOffset = sel.startOffset - 1
-        const endOffset = sel.endOffset + 1
-
-        const createAnno = session.createSelection(path, startOffset, endOffset)
-
-        const newNode = {
-          selection: createAnno,
-          node: { type: 'track-change' }
-        }
-
-        surface.transaction((tx, args) => {
-          createAnnotation(tx, newNode)
-        })
-        if (e.keyCode === 8) {
-          console.log('newNode', newNode)
-          let elem = document.querySelectorAll('[data-id=' + newNode.node.id + ']')
-          elem[0].style.backgroundColor = 'transparent'
-          elem[0].style.textDecoration = 'line-through'
-        }
-      })
+      const trackChangesProvider = this.context.trackChangesProvider
+      trackChangesProvider.handleTransaction()
     }
-    // END
-    return el
   }
 
   didMount () {
@@ -85,6 +76,7 @@ class ContainerEditor extends SubstanceContainerEditor {
     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)

app/components/SimpleEditor/Editor.js

@@ -13,6 +13,7 @@ import ContainerEditor from './ContainerEditor'
 import Notes from './panes/Notes/Notes'
 import NotesProvider from './panes/Notes/NotesProvider'
 import TableOfContents from './panes/TableOfContents/TableOfContents'
+import TrackChangesProvider from './elements/track_change/TrackChangesProvider'
 
 class Editor extends ProseEditor {
   constructor (parent, props) {
@@ -155,12 +156,22 @@ class Editor extends ProseEditor {
       updateComments: this.props.updateComments
     })
 
+    // TODO -- do I need all of these?
+    // track changes provider
+    const trackChangesProvider = new TrackChangesProvider({
+      commandManager: this.commandManager,
+      containerId: this.props.containerId,
+      documentSession: this.documentSession,
+      surfaceManager: this.surfaceManager
+    })
+
     // attach all to context
     return {
       ...oldContext,
       tocProvider,
       notesProvider,
-      commentsProvider
+      commentsProvider,
+      trackChangesProvider
     }
   }
 }

app/components/SimpleEditor/elements/comment/CommentBubble.js

@@ -113,6 +113,7 @@ class CommentBubble extends Tool {
     return surfaceManager.getFocusedSurface()
   }
 
+  // TODO -- move to provider?
   createComment () {
     const mode = this.getMode()
     const provider = this.getProvider()

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

 import TrackChange from './TrackChange'
 import TrackChangeCommand from './TrackChangeCommand'
 import TrackChangeComponent from './TrackChangeComponent'
-import TrackChangeHTMLConverter from './TrackChangeHTMLConverter'
-// import { AnnotationTool } from 'substance'
+// import TrackChangeHTMLConverter from './TrackChangeHTMLConverter'
+
 export default {
   name: 'track-change',
   configure: function (config) {
     config.addNode(TrackChange)
 
     config.addComponent(TrackChange.type, TrackChangeComponent)
-    config.addConverter('html', TrackChangeHTMLConverter)
-    // config.addTool('track-change', AnnotationTool, { target: 'insert' })
+    // config.addConverter('html', TrackChangeHTMLConverter)
+
     config.addCommand(TrackChange.type, TrackChangeCommand, { nodeType: TrackChange.type })
     config.addIcon('track-change', { 'fontawesome': 'fa-eye' })
+
     config.addLabel('track-change', {
-      en: 'track-change'
+      en: 'Track Changes'
     })
   }
 }

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

+import { createAnnotation } from 'substance'
+
+class TrackChangesProvider {
+  constructor (config) {
+    this.config = config
+  }
+
+  handleTransaction () {
+    const surface = this.getSurface()
+
+    surface.transaction((tx, args) => {
+      const selection = this.createSelection(args)
+      // console.log(this.getTrackState())
+
+      const newNode = {
+        selection: selection,
+        node: { 'type': 'track-change' }
+      }
+
+      const mode = this.getMode()
+
+      if (!mode) {
+        createAnnotation(tx, newNode)
+      } else if (mode === 'delete') {
+        // continue here to expand annotation
+      }
+
+      this.clearSelection(args)
+      this.removeAnnotationFromHistory()
+    })
+  }
+
+  removeAnnotationFromHistory () {
+    const documentSession = this.getDocumentSession()
+    setTimeout(() => {
+      documentSession.doneChanges.pop()
+    }) // ensure that text insertion has finished
+  }
+
+  clearSelection (args) {
+    const selection = args.selection
+    selection.startOffset = selection.endOffset
+    return selection
+  }
+
+  createSelection (args) {
+    const selection = args.selection
+    selection.startOffset -= 1
+    return selection
+  }
+
+  getCommandManager () {
+    return this.config.commandManager
+  }
+
+  getTrackState () {
+    const commandManager = this.getCommandManager()
+    const commandStates = commandManager.getCommandStates()
+    return commandStates['track-change']
+  }
+
+  getMode () {
+    const state = this.getTrackState()
+    return state.mode
+  }
+
+  // createCommandState () {
+  //   const commandState = this.getCommandState()
+  //   commandState.disabled = false
+  //   commandState.mode = 'create'
+  //   return commandState
+  // }
+
+  getDocumentSession () {
+    return this.config.documentSession
+  }
+
+  getSurface () {
+    const surfaceManager = this.config.surfaceManager
+    const id = this.config.containerId
+
+    return surfaceManager.getSurface(id)
+  }
+}
+
+export default TrackChangesProvider