accept reject track changes working for deletions and addtions

app/components/SimpleEditor/Editor.js

@@ -35,6 +35,7 @@ class Editor extends ProseEditor {
     this.props.updateTrackChangesStatus(!this.props.trackChanges)
 
     this.extendState({ trackChanges: !this.props.trackChanges })
+    console.log(this.el)
   }
 
   updateTrackChangeView () {
@@ -107,7 +108,7 @@ class Editor extends ProseEditor {
           contentPanelWithSplitPane
         )
     )
-
+    if (this.props.trackChanges || this.state.trackChangesView) el.addClass('track-changes-mode')
     return el
   }
 

app/components/SimpleEditor/SimpleEditor.scss

@@ -38,6 +38,12 @@ $white: #fff;
       top: 10px;
     }
   }
+
+  .track-changes-mode {
+    .se-content {
+      line-height: 38px;
+    }
+  }
 }
 
 .sc-prose-editor {
@@ -183,7 +189,6 @@ $white: #fff;
   .se-content {
     color: $transparent-black;
     font-family: 'Fira Sans';
-    line-height: 38px;
     word-wrap: break-word;
 
     ::selection {

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

@@ -7,7 +7,7 @@ class TrackChangeComponent extends AnnotationComponent {
     const trackChangesView = this.toggleTrackChangeView()
     let hideDeletes = ''
     let ShowAdditions = ''
-    // console.log('trackChangesView', trackChangesView)
+
     if (trackChangesView === false && status === 'delete') {
       hideDeletes = 'sc-track-delete-hide'
     }
@@ -45,6 +45,7 @@ class TrackChangeComponent extends AnnotationComponent {
     return el
   }
 
+// TODO Move most of the funcs into provider
   getSurface () {
     const surfaceManager = this.context.surfaceManager
     const containerId = this.context.controller.props.containerId
@@ -62,9 +63,38 @@ class TrackChangeComponent extends AnnotationComponent {
   acceptTrackChange () {
     const nodeId = this.props.node.id
     const status = this.props.node.status
-    console.log('accept track change', status)
+    const ds = this.getDocumentSession()
+    const doc = ds.getDocument()
+    const nodeData = this.buildNodeData()
 
-    const ds = this.context.documentSession
+    var self = this
+
+    ds.transaction(function (tx, args) {
+      if (status === 'add') createAnnotation(doc, nodeData)
+      deleteNode(tx, { nodeId: nodeId })
+      if (status === 'delete') self.context.surface.delete(tx, nodeData)
+    })
+  }
+
+  rejectTrackChange () {
+    const nodeId = this.props.node.id
+    const status = this.props.node.status
+    const ds = this.getDocumentSession()
+    const doc = ds.getDocument()
+    const nodeData = this.buildNodeData()
+
+    var self = this
+
+    ds.transaction(function (tx, args) {
+      if (status === 'delete') createAnnotation(doc, nodeData)
+      deleteNode(tx, { nodeId: nodeId })
+      if (status === 'add') self.context.surface.delete(tx, nodeData)
+    })
+  }
+
+  buildNodeData () {
+    const nodeId = this.props.node.id
+    const ds = this.getDocumentSession()
     const doc = ds.getDocument()
     const trackChangeNode = doc.get(nodeId)
 
@@ -74,19 +104,14 @@ class TrackChangeComponent extends AnnotationComponent {
 
     const sel = ds.createSelection(path, startOffset, endOffset)
 
-    const nodeData = {
+    return {
       selection: sel,
       node: { type: 'paragraph' }
     }
-
-    ds.transaction(function (tx, args) {
-      createAnnotation(doc, nodeData)
-      deleteNode(tx, { nodeId: nodeId })
-    })
   }
 
-  rejectTrackChange () {
-    console.log('reject track change')
+  getDocumentSession () {
+    return this.context.documentSession
   }
 
 }

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

@@ -13,7 +13,8 @@ class TrackChangeControlViewCommand extends Command {
   execute (params, context) {
     const surface = context.surfaceManager.getSurface('body')
     surface.send('trackChangesViewUpdate')
-    return true
+    surface.selectAll()
+    surface.selectFirst()
   }
 }
 

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

-.sc-track-change {
-  // background-color: #f7f70c;
-}
+$blue: blue;
 
 .sc-track-change-add {
-  color: blue;
+  color: $blue;
   text-decoration: none;
 }
 
@@ -16,7 +14,11 @@
 }
 
 .sc-track-add-show {
-  background: transparent !important;
+  color: inherit !important;
+
+  .sc-accept-reject-container {
+    display: none;
+  }
 }
 
 .sc-accept-reject-container {
@@ -27,11 +29,12 @@
   position: absolute;
 
   .sc-track-item {
+    color: $blue;
     cursor: pointer;
-    color: blue;
   }
+
   .sc-track-separator {
-    color: blue;
+    color: $blue;
   }
 
 }