track changes view mode--not quite working--

app/components/SimpleEditor/Editor.js

@@ -22,7 +22,8 @@ class Editor extends ProseEditor {
     this.handleActions({
       'showComments': function () { this.toggleCommentsArea(true) },
       'hideComments': function () { this.toggleCommentsArea(false) },
-      'trackChangesUpdate': function () { this.updateTrackChange() }
+      'trackChangesUpdate': function () { this.updateTrackChange() },
+      'trackChangesViewUpdate': function () { this.updateTrackChangeView() }
     })
   }
 
@@ -36,6 +37,11 @@ class Editor extends ProseEditor {
     this.extendState({ trackChanges: !this.props.trackChanges })
   }
 
+  updateTrackChangeView () {
+    this.extendState({ trackChangesView: !this.state.trackChangesView })
+    console.log('in editor', this.state.trackChangesView)
+  }
+
   willUpdateState () {}
 
   didMount () {
@@ -122,7 +128,8 @@ class Editor extends ProseEditor {
   getInitialState () {
     return {
       editorReady: false,
-      trackChanges: this.props.trackChanges
+      trackChanges: this.props.trackChanges,
+      trackChangesView: true
     }
   }
 

app/components/SimpleEditor/SimpleEditor.scss

@@ -106,6 +106,9 @@ $white: #fff;
     .sm-target-track-change-toggle-view {
       cursor: pointer;
       button::after {
+        content: 'View is Off';
+      }
+      .track-changes-view-active::after {
         content: 'View is On';
       }
     }

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

@@ -4,12 +4,25 @@ class TrackChangeComponent extends AnnotationComponent {
   render ($$) {
     const user = this.context.controller.props.user
     const status = this.props.node.status
+    const trackChangesView = this.toggleTrackChangeView()
+    let hideDeletes = ''
+    let ShowAdditions = ''
+    // console.log('trackChangesView', trackChangesView)
+    if (trackChangesView === false && status === 'delete') {
+      hideDeletes = 'sc-track-delete-hide'
+    }
+
+    if (trackChangesView === false && status === 'add') {
+      ShowAdditions = 'sc-track-add-show'
+    }
 
     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())
+      .addClass(hideDeletes)
+      .addClass(ShowAdditions)
       .append(this.props.children)
 
     const className = 'sc-track-change-' + status
@@ -18,6 +31,20 @@ class TrackChangeComponent extends AnnotationComponent {
     return el
   }
 
+  getSurface () {
+    const surfaceManager = this.context.surfaceManager
+    const containerId = this.context.controller.props.containerId
+
+    return surfaceManager.getSurface(containerId)
+  }
+
+  toggleTrackChangeView () {
+    const self = this
+    const surface = self.getSurface()
+    // console.log('yoyyoyoy', surface)
+    return surface._owner.state.trackChangesView
+  }
+
 }
 
 export default TrackChangeComponent

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

@@ -10,8 +10,9 @@ class TrackChangeControlViewCommand extends Command {
 
     return newState
   }
-  execute () {
-    console.log('execute command enable/disable view mode track changes')
+  execute (params, context) {
+    const surface = context.surfaceManager.getSurface('body')
+    surface.send('trackChangesViewUpdate')
     return true
   }
 }

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

 import { Tool } from 'substance'
 
-class TrackChangeControlViewTool extends Tool {}
+class TrackChangeControlViewTool extends Tool {
+  renderButton ($$) {
+    const el = super.renderButton($$)
+    let trackChangesViewMode = this.isTrackChangesViewOn()
+    if (trackChangesViewMode === true) el.addClass('track-changes-view-active')
+    return el
+  }
+
+  getSurface () {
+    const surfaceManager = this.context.surfaceManager
+    const containerId = this.context.controller.props.containerId
+    return surfaceManager.getSurface(containerId)
+  }
+
+  isTrackChangesViewOn () {
+    const surface = this.getSurface()
+    if (!surface) return
+    return surface._owner.state.trackChangesView
+  }
+}
 
 TrackChangeControlViewTool.type = 'track-change-toggle-view'
 

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

@@ -12,3 +12,11 @@
   background-color: red;
   text-decoration: line-through;
 }
+
+.sc-track-delete-hide {
+  display: none;
+}
+
+.sc-track-add-show {
+  background: transparent !important;
+}