create track-change annotation on keydown

app/components/SimpleEditor/ContainerEditor.js

@@ -2,7 +2,7 @@ import { each, keys, includes } from 'lodash'
 import {
   ContainerEditor as SubstanceContainerEditor,
   Surface,
-  uuid
+  uuid, createAnnotation
 } from 'substance'
 
 class ContainerEditor extends SubstanceContainerEditor {
@@ -43,7 +43,38 @@ class ContainerEditor extends SubstanceContainerEditor {
     // if (this.isReadOnlyMode()) {
     //   const documentSession = this.getDocumentSession()
     //   documentSession.on('didUpdate', this.disableToolbar, this)
-    //
+    // }
+
+    // Start
+    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'
+        }
+      })
+    }
+    // END
     return el
   }
 

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

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

app/components/SimpleEditor/elements/track_change/trackChange.scss

 .sc-track-change {
-  background-color: blue;
+  background-color: #f7f70c;
 }