add track-change annotation on toolbar for now

app/components/SimpleEditor/ContainerEditor.js

@@ -43,8 +43,7 @@ class ContainerEditor extends SubstanceContainerEditor {
     // if (this.isReadOnlyMode()) {
     //   const documentSession = this.getDocumentSession()
     //   documentSession.on('didUpdate', this.disableToolbar, this)
-    // }
-
+    //
     return el
   }
 

app/components/SimpleEditor/config.js

@@ -20,7 +20,7 @@ import CommentPackage from './elements/comment/CommentPackage'
 import ExtractPackage from './elements/extract/ExtractPackage'
 import NotePackage from './elements/note/NotePackage'
 import SourceNotePackage from './elements/source_note/SourceNotePackage'
-
+import TrackChangePackage from './elements/track_change/TrackChangePackage'
 // var DialoguePackage = require('./elements/dialogue/DialoguePackage')
 // var NumberedListPackage = require('./elements/numbered_list/NumberedListPackage')
 // var NoStyleListPackage = require('./elements/no_style_list/NoStyleListPackage')
@@ -56,6 +56,7 @@ let config = {
     config.import(NotePackage)
     config.import(SourceNotePackage)
     config.import(CommentPackage)
+    config.import(TrackChangePackage)
 
     // config.import(DialoguePackage)
     // config.import(NoStyleListPackage)

app/components/SimpleEditor/elements/elements.scss

@@ -7,3 +7,4 @@
 // @import './no_style_list/noStyleList';
 // @import './numbered_list/numberedList';
 @import './source_note/sourceNote';
+@import './track_change/trackChange';

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

+import { PropertyAnnotation } from 'substance'
+
+class TrackChange extends PropertyAnnotation {}
+
+TrackChange.type = 'track-change'
+
+export default TrackChange

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

+import {AnnotationCommand} from 'substance'
+
+class TrackChangeCommand extends AnnotationCommand {}
+
+TrackChangeCommand.type = 'track-change'
+
+export default TrackChangeCommand

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

+import { AnnotationComponent } from 'substance'
+
+class TrackChangeComponent extends AnnotationComponent {
+  render ($$) {
+    const user = this.context.controller.props.user
+
+    var el = $$('span')
+      .attr('data-id', this.props.node.id)
+      .attr('data-user', user.username)
+      .attr('data-role', user.teams[0].name)
+      .addClass(this.getClassNames())
+
+    el.append(this.props.children)
+    return el
+  }
+
+}
+
+export default TrackChangeComponent

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

+export default {
+  type: 'track-change',
+  tagName: 'track-change'
+}

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'
+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.addCommand(TrackChange.type, TrackChangeCommand, { nodeType: TrackChange.type })
+    config.addIcon('track-change', { 'fontawesome': 'fa-eye' })
+    config.addLabel('track-change', {
+      en: 'track-change'
+    })
+  }
+}

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

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