solve merge conflicts

.gitignore

@@ -5,3 +5,4 @@ logs/*
 node_modules
 public/assets/*
 pubsweet.log
+.DS_Store

app/components/SimpleEditor/Editor.js

@@ -21,10 +21,28 @@ class Editor extends ProseEditor {
 
     this.handleActions({
       'showComments': function () { this.toggleCommentsArea(true) },
-      'hideComments': function () { this.toggleCommentsArea(false) }
+      'hideComments': function () { this.toggleCommentsArea(false) },
+      'trackChangesUpdate': function () { this.updateTrackChange() },
+      'trackChangesViewUpdate': function () { this.updateTrackChangeView() }
     })
   }
 
+  updateTrackChange () {
+    this.extendProps({
+      trackChanges: !this.props.trackChanges
+    })
+
+    this.props.updateTrackChangesStatus(!this.props.trackChanges)
+
+    this.extendState({ trackChanges: !this.props.trackChanges })
+    console.log(this.el)
+  }
+
+  updateTrackChangeView () {
+    this.extendState({ trackChangesView: !this.state.trackChangesView })
+    console.log('in editor', this.state.trackChangesView)
+  }
+
   willUpdateState () {}
 
   didMount () {
@@ -90,7 +108,7 @@ class Editor extends ProseEditor {
           contentPanelWithSplitPane
         )
     )
-
+    if (this.state.trackChangesView) el.addClass('track-changes-mode')
     return el
   }
 
@@ -103,13 +121,16 @@ class Editor extends ProseEditor {
       commands: configurator.getSurfaceCommandNames(),
       containerId: 'body',
       textTypes: configurator.getTextTypes(),
-      trackChanges: this.props.trackChanges
+      trackChanges: this.props.trackChanges,
+      updateTrackChangesStatus: this.props.updateTrackChangesStatus
     }).ref('body')
   }
 
   getInitialState () {
     return {
-      editorReady: false
+      editorReady: false,
+      trackChanges: this.props.trackChanges,
+      trackChangesView: true
     }
   }
 

app/components/SimpleEditor/SimpleEditor.jsx

@@ -18,11 +18,7 @@ export default class SimpleEditor extends React.Component {
   constructor (props) {
     super(props)
     this.save = this.save.bind(this)
-    this.toggleTrackChangesStatus = this.toggleTrackChangesStatus.bind(this)
-
-    this.state = {
-      trackChanges: props.fragment.trackChanges
-    }
+    this.updateTrackChangesStatus = this.updateTrackChangesStatus.bind(this)
   }
 
   createSession () {
@@ -47,13 +43,10 @@ export default class SimpleEditor extends React.Component {
     }
   }
 
-  toggleTrackChangesStatus () {
+  updateTrackChangesStatus () {
     const { fragment, update } = this.props
     fragment.trackChanges = !fragment.trackChanges
     update(fragment)
-    this.setState({
-      trackChanges: fragment.trackChanges
-    })
   }
 
   save (source, changes, callback) {
@@ -89,6 +82,7 @@ export default class SimpleEditor extends React.Component {
       history: this.props.history,
       onSave: onSave,
       trackChanges: this.props.fragment.trackChanges,
+      updateTrackChangesStatus: this.updateTrackChangesStatus,
       updateComments: this.props.updateComments,
       user: this.props.user
     }, el)
@@ -125,25 +119,9 @@ export default class SimpleEditor extends React.Component {
     )
     : null
 
-    let trackChangeStatus = 'Off'
-    let trackChangesIconClass = 'fa-eye-slash'
-
-    if (this.state.trackChanges === true) {
-      trackChangeStatus = 'On'
-      trackChangesIconClass = 'fa-eye'
-    }
-
-    let trackChanges =
-      <Alert bsStyle='warning' className='track-changes'>
-        <span>
-          <i className={'fa ' + trackChangesIconClass} onClick={this.toggleTrackChangesStatus} />
-          Track Changes is {trackChangeStatus}
-        </span>
-      </Alert>
-
     return (
       <div className='editor-wrapper'>
-        {viewMode} {trackChanges}
+        {viewMode}
       </div>
     )
   }

app/components/SimpleEditor/SimpleEditor.scss

@@ -19,6 +19,9 @@ $teal: #46b9ba;
 $toolbar-active-bg: rgba(204, 204, 204, .75);
 $transparent-black: rgba(0, 0, 0, .75);
 $white: #fff;
+// track changes
+$inactive-grey: #404040;
+$active-blue: #4a90e2;
 
 .editor-wrapper {
   height: 90vh;
@@ -39,24 +42,9 @@ $white: #fff;
     }
   }
 
-  .track-changes {
-    height: 44px;
-    position: fixed;
-    right: 0;
-    text-align: center;
-    width: 20%;
-    z-index: 9999;
-
-    span {
-      font-size: 14px;
-      position: relative;
-      top: 10px;
-
-      i {
-        font-size: 20px;
-        padding-right: 10px;
-        cursor: pointer;
-      }
+  .track-changes-mode {
+    .se-content {
+      line-height: 38px;
     }
   }
 }
@@ -73,27 +61,116 @@ $white: #fff;
     border: 1px solid $border;
     border-right: 0;
     padding-left: 0;
-
-    button {
-      color: $transparent-black;
+    vertical-align: middle;
+    @-moz-document url-prefix() {
+      .sc-tool-group > .sc-switch-text-type {
+        margin: 0;
+        position: relative;
+        top: 8px;
+      }
     }
 
     .sm-target-text {
-      border-right: 1px solid $border;
+      bottom: 5px;
+      height: 100%;
       padding: 0;
+      position: relative;
+      .sc-switch-text-type {
+        margin-left: 1px;
+        width: 150px;
+        button {
+          color: $transparent-black;
+          height: inherit;
+          position: relative;
+          top: 5px;
+        }
+        .se-toggle {
+          background: transparent;
+          border: 0;
+          font-family: 'Fira Sans';
+          font-size: 14px;
+          outline: none;
+        }
+
+        .se-options {
+          top: 36px;
+        }
+
+        .se-option {
+          background-color: $white;
+          border: 0;
+          font-family: 'Fira Sans';
+        }
+      }
+    } // end dropdown
+
+    .sm-target-track-change-enable {
+      border-right: 1px solid $border;
+
+      button {
+        background-color: $inactive-grey;
+        border-radius: 0;
+        color: $white;
+        cursor: pointer;
+        padding: 0 19px;
+        position: relative;
+      }
+
+      button::after {
+        content: 'Record Changes';
+      }
+
+      .track-changes-active {
+        background-color: $active-blue;
+        color: $white;
+        padding: 0 10px;
+
+       &:after {
+           content: 'Recording Changes';
+       }
+      }
+    }
+
+    .sm-target-track-change-toggle-view {
+      cursor: pointer;
+
+      button {
+        background-color: $inactive-grey;
+        border-radius: 0;
+        color: $white;
+        cursor: pointer;
+        padding: 0 19px;
+        position: relative;
+      }
+
+      button::after {
+        content: 'Changes View Off';
+      }
+      .track-changes-view-active {
+        background-color: #228b46;
+        color: $white;
+        padding: 0 19px
+      }
+      .track-changes-view-active::after {
+        content: 'Changes View On';
+      }
     }
 
     .sm-target-document {
-      border-right: 1px solid $border;
-      padding-right: 9px;
+      border-left: 1px solid $border;
     }
 
-    .sm-target-annotations {
-      border-right: 1px solid $border;
+    .sm-target-track-change-enable,
+    .sm-target-track-change-toggle-view {
       padding: 0 9px;
     }
 
-    .sc-tool-group {
+    .sm-target-document,
+    .sm-target-annotations,
+    .sm-target-insert {
+      border-right: 1px solid $border;
+      padding: 0px 9px;
+
       .sc-button {
         background: transparent;
         border: 0;
@@ -109,49 +186,27 @@ $white: #fff;
             background: transparent;
           }
         }
-      }
+     }
 
-      .sm-active {
-        background: $toolbar-active-bg;
-        color: $black;
-        margin: 0;
-        outline: none;
-        padding: 0;
+    .sm-active {
+      background: $toolbar-active-bg;
+      color: $black;
+      margin: 0;
+      outline: none;
+      padding: 0;
 
-        &:after {
-          bottom: 17px;
-          color: $black;
-          content: 'x';
-          font-size: 8px;
-          left: 21px;
-          position: absolute;
-        }
+      &:after {
+        bottom: 17px;
+        color: $black;
+        content: 'x';
+        font-size: 8px;
+        left: 21px;
+        position: absolute;
       }
     }
   }
 
-  .sc-switch-text-type {
-    margin-left: 1px;
-    width: 150px;
-
-    .se-toggle {
-      background: transparent;
-      border: 0;
-      font-family: 'Fira Sans';
-      font-size: 14px;
-      outline: none;
-    }
-
-    .se-options {
-      top: 36px;
-    }
-
-    .se-option {
-      background-color: $white;
-      border: 0;
-      font-family: 'Fira Sans';
-    }
-  }
+  } // End sc-toolbar
 
   .se-scrollable {
     background-color: $primary;
@@ -163,7 +218,6 @@ $white: #fff;
   .se-content {
     color: $transparent-black;
     font-family: 'Fira Sans';
-    // line-height: 24px;
     word-wrap: break-word;
 
     ::selection {
@@ -207,7 +261,7 @@ $white: #fff;
       border-style: none;
       border-width: 0;
   }
-}
+} // end sc-content
 
   .sc-has-comments {
     .se-content {

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

-import { AnnotationComponent } from 'substance'
+import { AnnotationComponent, createAnnotation, deleteNode } from 'substance'
 
 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 = ''
 
-    var el = $$('span')
+    if (trackChangesView === false && status === 'delete') {
+      hideDeletes = 'sc-track-delete-hide'
+    }
+
+    if (trackChangesView === false && status === 'add') {
+      ShowAdditions = 'sc-track-add-show'
+    }
+
+    const accept = $$('a').addClass('sc-track-item')
+                   .on('click', this.acceptTrackChange)
+                  .append('accept')
+    const reject = $$('a').addClass('sc-track-item')
+                    .on('click', this.rejectTrackChange)
+                   .append('reject')
+    const seperator = $$('span').addClass('sc-track-separator')
+                      .append(' / ')
+    const container = $$('span').addClass('sc-accept-reject-container')
+                      .append(accept)
+                      .append(seperator)
+                      .append(reject)
+
+    let 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)
+      .append(container)
 
     const className = 'sc-track-change-' + status
     el.addClass(className)
@@ -18,6 +45,75 @@ 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
+
+    return surfaceManager.getSurface(containerId)
+  }
+
+  toggleTrackChangeView () {
+    const self = this
+    const surface = self.getSurface()
+
+    return surface._owner.state.trackChangesView
+  }
+
+  acceptTrackChange () {
+    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 === '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)
+
+    const path = trackChangeNode.path
+    const startOffset = trackChangeNode.startOffset
+    const endOffset = trackChangeNode.endOffset
+
+    const sel = ds.createSelection(path, startOffset, endOffset)
+
+    return {
+      selection: sel,
+      node: { type: 'paragraph' }
+    }
+  }
+
+  getDocumentSession () {
+    return this.context.documentSession
+  }
+
 }
 
 export default TrackChangeComponent

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

+import {Command} from 'substance'
+
+class TrackChangeControlCommand extends Command {
+  getCommandState (params) {
+    let newState = {
+      disabled: false,
+      active: false
+    }
+
+    return newState
+  }
+  execute (params, context) {
+    const surface = context.surfaceManager.getSurface('body')
+    surface.send('trackChangesUpdate')
+    return true
+  }
+}
+
+TrackChangeControlCommand.type = 'track-change-enable'
+
+export default TrackChangeControlCommand

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

+import { Tool } from 'substance'
+
+class TrackChangeControlTool extends Tool {
+  renderButton ($$) {
+    const el = super.renderButton($$)
+    let trackChangesMode = this.isTrackChangesOn()
+    if (trackChangesMode === true) el.addClass('track-changes-active')
+    return el
+  }
+
+  getSurface () {
+    const surfaceManager = this.context.surfaceManager
+    const containerId = this.context.controller.props.containerId
+    return surfaceManager.getSurface(containerId)
+  }
+
+  isTrackChangesOn () {
+    const surface = this.getSurface()
+    if (!surface) return
+    return surface.props.trackChanges
+  }
+}
+
+TrackChangeControlTool.type = 'track-change-enable'
+
+export default TrackChangeControlTool

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

+import {Command} from 'substance'
+
+class TrackChangeControlViewCommand extends Command {
+  getCommandState (params) {
+    // console.log(params)
+    let newState = {
+      disabled: false,
+      active: false
+    }
+
+    return newState
+  }
+  execute (params, context) {
+    const surface = context.surfaceManager.getSurface('body')
+    surface.send('trackChangesViewUpdate')
+    surface.selectAll()
+    surface.selectFirst()
+  }
+}
+
+TrackChangeControlViewCommand.type = 'track-change-toggle-view'
+
+export default TrackChangeControlViewCommand

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

+import { Tool } from 'substance'
+
+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'
+
+export default TrackChangeControlViewTool

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

@@ -2,6 +2,10 @@ import TrackChange from './TrackChange'
 import TrackChangeCommand from './TrackChangeCommand'
 import TrackChangeComponent from './TrackChangeComponent'
 import TrackChangeHTMLConverter from './TrackChangeHTMLConverter'
+import TrackChangeControlTool from './TrackChangeControlTool'
+import TrackChangeControlViewTool from './TrackChangeControlViewTool'
+import TrackChangeControlCommand from './TrackChangeControlCommand'
+import TrackChangeControlViewCommand from './TrackChangeControlViewCommand'
 
 export default {
   name: 'track-change',
@@ -11,7 +15,18 @@ export default {
     config.addComponent(TrackChange.type, TrackChangeComponent)
     config.addConverter('html', TrackChangeHTMLConverter)
 
+    config.addTool('track-change-enable', TrackChangeControlTool, {
+      target: 'track-change-enable'
+    })
+
+    config.addTool('track-change-toggle-view', TrackChangeControlViewTool, {
+      target: 'track-change-toggle-view'
+    })
+
+    config.addCommand('track-change-enable', TrackChangeControlCommand)
+    config.addCommand('track-change-toggle-view', TrackChangeControlViewCommand)
     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

+$blue: #4a90e2;
 $red: #f00;
 $yellow: #f7f70c;
 
@@ -6,12 +7,41 @@ $yellow: #f7f70c;
 }
 
 .sc-track-change-add {
-  background-color: $yellow;
+  color: $blue;
   // display: inline-block;
   text-decoration: none;
 }
 
 .sc-track-change-delete {
-  background-color: $red;
+  // background-color: $red;
   text-decoration: line-through;
 }
+
+.sc-track-delete-hide {
+  display: none;
+}
+
+.sc-track-add-show {
+  color: inherit !important;
+
+  .sc-accept-reject-container {
+    display: none;
+  }
+}
+
+.sc-accept-reject-container {
+  display: inline-block;
+  font-size: 14px;
+  margin-left: -90px;
+  margin-top: 20px;
+  position: absolute;
+
+  .sc-track-item {
+    color: $blue;
+    cursor: pointer;
+  }
+
+  .sc-track-separator {
+    color: $blue;
+  }
+}