.gitattributes

@@ -1 +0,0 @@
-* text=auto

LICENSE

@@ -1,22 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2015 Adam Brown
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-

README.md

@@ -39,10 +39,10 @@ To build and launch a dev server:
     npm start
     npm run server
 
-To build and launch the production server:
+To build and launch the distribution server:
 
-    npm run build:prod
+    npm run build:dist
-    npm run serve:prod
+    npm run server:dist
 
 
 
@@ -62,13 +62,8 @@ On a low-memory machine, eg. a DigitalOcean 512MB instance, you will need to ena
 
 To make the application start on boot, run the following:
 
-    # initialize pm2 to start on boot with the systemd boot manager
+    pm2 start grunt --name dubdiff -- serve:dist
     pm2 startup systemd
-    
-    # start the app with pm2
-    pm2 start npm --name dubdiff -- run serve:prod
-    
-    # save the current pm2 config so that it can be reloaded on boot
     pm2 save
 
  [Digital Ocean: How To Set Up a Node.js Application for Production on Ubuntu 16.04](https://www.digitalocean.com/community/tutorials/how-to-set-up-a-node-js-application-for-production-on-ubuntu-16-04)

TODO.md

@@ -1 +1,33 @@
-Support for displaying and responding to `#markdown` path suffix.
+
+ - create production mode build and serve settings: `webpack.js` and `src/server/babel.index.js`
+
+
+## State changes
+
+main page edits input documents
+compare page views compare documents
+
+compare button:
+
+- generate id
+- post input documents to server
+- input documents copied to compare documents
+- input documents cleared
+- go to compare route
+
+edit button:
+
+- compare documents copied to input documents
+- compare documents cleared
+- go to main route
+
+client start:
+
+- load input documents from localStore
+
+server start:
+
+- load compare documents from database
+
+
+* client actually never needs to query server for compare documents... huh!

dist/main.css

@@ -1,11 +1,3 @@
 #masthead .header {
   font-size: 4em;
 }
-
-ins {
-  background-color: #dbffdb;
-}
-
-del {
-  background-color: #ffdddd;
-}

package.json

@@ -1,19 +1,16 @@
 {
-  "name": "dubdiff",
+  "name": "dubdiff-2",
-  "version": "2.0.1",
+  "version": "0.0.0",
   "description": "",
   "main": "src/server/babel.index.js",
   "scripts": {
     "copy-css": "cpy --parents --cwd=./node_modules/semantic-ui-css semantic.min.css themes/default/assets/fonts/icons.woff2 ../../dist",
     "build": "npm run copy-css && webpack --progress --colors",
     "build:prod": "npm run copy-css && cross-env NODE_ENV=production webpack -p --progress --colors",
-    "build:prod:nocopy": "cross-env NODE_ENV=production webpack -p --progress --colors",
     "build:watch": "npm run copy-css && webpack --progress --colors --watch",
     "serve": "node src/server/babel.index.js",
     "serve:prod": "cross-env NODE_ENV=production node src/server/babel.index.js",
     "webpack-stats": "webpack --json > stats.json",
-    "lint": "standard --verbose | snazzy",
-    "lint:fix": "standard --fix --verbose | snazzy",
     "test": "mocha --watch --compilers js:babel-register"
   },
   "author": "",
@@ -52,13 +49,10 @@
     "babel-register": "^6.18.0",
     "chai": "^3.5.0",
     "copyfiles": "^0.2.2",
-    "cpy-cli": "^1.0.1",
     "cross-env": "^3.1.3",
     "json-loader": "^0.5.4",
     "mocha": "^3.2.0",
     "piping": "^1.0.0-rc.4",
-    "snazzy": "^6.0.0",
-    "standard": "^8.6.0",
     "webpack": "^2.1.0-beta.27"
   }
 }

src/client/LocalStorage.js

@@ -1,53 +1,57 @@
 import React from 'react'
 import {connect} from 'react-redux'
 
+
 import * as Actions from '../common/actions'
+import * as Selectors from '../common/selectors'
+
 
 /* This component reads the local storage store and adds them to the Redux store.
  * Local storage is read during the componentDidMount lifecycle method.
  * Local storage is written during the componentWillReceiveProps lifecycle method.
 */
 
-// an app-specific name for the localStorage state
+//an app-specific name for the localStorage state
-const stateName = 'dubdiff_state'
+const stateName = "dubdiff_state"
 
-// return a new object with the given keys, each assigned to the cooresponding value
+//return a new object with the given keys, each assigned to the cooresponding value
-// from the given object
+//from the given object
-const copyKeys = (obj, keys) => keys.reduce((acc, p) => { acc[p] = obj[p]; return acc }, {})
+const copyKeys = (obj, keys) => keys.reduce((acc, p)=>{acc[p]=obj[p]; return acc}, {})
 
-// utility method for retrieving json data from the local store
+//utility method for retrieving json data from the local store
-/*
 function getLocalState (keys) {
-  if (window.localStorage.getItem(stateName)) {
+  if (localStorage.getItem(stateName)) {
-    const localState = JSON.parse(window.localStorage.getItem(stateName))
+    const localState = JSON.parse(localStorage.getItem(stateName))
     return copyKeys(localState, keys)
-  } else {
-    return copyKeys({}, keys)
   }
+  else
+    return copyKeys({}, keys)
 } 
-*/
 
-// utility method for writing json data to the local store
+//utility method for writing json data to the local store
 function setLocalState (state, keys) {
   let toSave = copyKeys(state, keys)
-  window.localStorage.setItem(stateName, JSON.stringify(toSave))
+  localStorage.setItem(stateName, JSON.stringify(toSave))
 }
 
+
 const mapStateToProps = (state) => ({
-  input: state.input
+  input: state.input,
-  // the loading/empty/clean state
+  //the loading/empty/clean state
 })
 
+  
 const mapDispatchToProps = dispatch => ({
   onChangeOriginal: (text) => dispatch(Actions.updateOriginalInput(text)),
-  onChangeFinal: (text) => dispatch(Actions.updateFinalInput(text))
+  onChangeFinal: (text) => dispatch(Actions.updateFinalInput(text)),
 })
 
+
 class LocalStorage extends React.Component {
   
-  // load the state from the local storage
+  //load the state from the local storage
-  componentDidMount () {
+  componentDidMount() {
-    // only if the status is EMPTY
+    //only if the status is EMPTY
 /*
     if (this.props.input.original=='' && this.props.input.final == '') {
       const localState = getLocalState(['input'])
@@ -58,8 +62,8 @@ class LocalStorage extends React.Component {
     }
 */
   }
-  // save the state to local storage
+  //save the state to local storage
-  componentWillReceiveProps (nextProps) {
+  componentWillReceiveProps(nextProps) {
     setLocalState(nextProps, ['input'])
   }
 

src/client/index.js

@@ -5,23 +5,24 @@ import * as Redux from 'redux'
 
 import {Provider} from 'react-redux'
 
-// import  createBrowserHistory  from 'history/lib/createBrowserHistory'
+//import  createBrowserHistory  from 'history/lib/createBrowserHistory'
-import {Router, browserHistory} from 'react-router'
+import  {Router, Route, IndexRoute, Redirect, browserHistory } from 'react-router'
 
 import thunk from 'redux-thunk'
 
 import * as reducers from '../common/reducers'
 import routes from '../common/routes'
-import {Format} from '../common/constants'
 import * as Actions from '../common/actions' 
 
 import LocalStorage from './LocalStorage'
 
-// initial state is rehydrated from the server
-const initialState = JSON.parse(decodeURI(window.__INITIAL_STATE__))
 
-// create the redux store
+
-// initial state is retrieved from localStore
+//initial state is rehydrated from the server
+const initialState = window.__INITIAL_STATE__
+
+//create the redux store
+//initial state is retrieved from localStore
 const store = Redux.createStore(
   Redux.combineReducers(reducers), 
   initialState,
@@ -31,58 +32,19 @@ const store = Redux.createStore(
   )
 )
 
-render()
-
-//  read and init the hash after render:
-//  because this parameter is passed as a hash, it isn't available on the server,
-//  so the server initial render will be with plaintext, so we have to start with that.
-//  lame. 
-initFormatHash(store)
-registerFormatListener(store)
-
-// detect hash parameter for markdown/plaintext format and initialize store
-function initFormatHash(store) {
-  //  get the has from the window location
-  let hash = window.location.hash.toUpperCase()
-  //  strip the hash sign
-  hash = hash.substring(1)
-
-  // dispatch the appropriate action
-  if (hash === Format.MARKDOWN)
-    store.dispatch(Actions.setMarkdownFormat())
-  else if (hash === Format.PLAINTEXT || hash === '')
-    store.dispatch(Actions.setPlaintextFormat())
-}
-
-  // listen to changes in the redux store and update the url hash parameter when appropriate
-function registerFormatListener(store) {
-
-  function handleChange() {
-    let nextFormat = store.getState().format;
-
-    if (nextFormat === Format.MARKDOWN) 
-      window.history.replaceState("", document.title, window.location.pathname+"#"+nextFormat.toLowerCase());
-    else if (nextFormat === Format.PLAINTEXT) {
-      window.history.replaceState("", document.title, window.location.pathname);
-
-    }
-  }
-
-  let unsubscribe = store.subscribe(handleChange);
-  return unsubscribe;
-}
 
 
-function render () {
+function render() {
-  ReactDOM.render(
+    ReactDOM.render(
     <Provider store={store}>
       <LocalStorage >
         <Router history={browserHistory}>
-          {routes}
+            {routes}
         </Router>
       </LocalStorage>
     </Provider>
   , document.getElementById('root'))
 }
 
+render()
   

src/common/actions.js

@@ -3,81 +3,84 @@ import uuid from 'uuid/v4'
 import {browserHistory} from 'react-router'
 import {Status, StatusError} from './constants'
 
-// All state transitions in the app happen in these methods
+//All state transitions in the app happen in these methods
-// this includes redux state changes, asyncronous data requests, and browser location changes
+//this includes redux state changes, asyncronous data requests, and browser location changes
 
 export const updateOriginalInput = (text) => 
   (dispatch, getState) => {
-    dispatch({type: 'UPDATE_ORIGINAL_INPUT', data: text})
+    dispatch({type: 'UPDATE_ORIGINAL_INPUT', data:text})
-    if (getState().input.original.length > 0) {
+    if (getState().input.original.length>0)
-      dispatch({type: 'STATUS_SET', data: Status.DIRTY})
+      dispatch({type: 'STATUS_SET', data:Status.DIRTY})
-    } else {
+    else 
-      dispatch({type: 'STATUS_SET', data: Status.EMPTY})
+      dispatch({type: 'STATUS_SET', data:Status.EMPTY})
-    }
   }
 
 export const updateFinalInput = (text) => 
   (dispatch, getState) => {
-    dispatch({type: 'UPDATE_FINAL_INPUT', data: text})
+    dispatch({ type: 'UPDATE_FINAL_INPUT', data:text})
-    if (getState().input.final.length > 0) {
+    if (getState().input.final.length>0)
-      dispatch({type: 'STATUS_SET', data: Status.DIRTY})
+      dispatch({type: 'STATUS_SET', data:Status.DIRTY})
-    } else {
+    else 
-      dispatch({type: 'STATUS_SET', data: Status.EMPTY})
+      dispatch({type: 'STATUS_SET', data:Status.EMPTY})
-    }
   }
 
 export const clearInput = () =>
   (dispatch) => {
     dispatch({type: 'CLEAR_INPUT'})
-    dispatch({type: 'STATUS_SET', data: Status.EMPTY})
+    dispatch({type: 'STATUS_SET', data:Status.EMPTY})
   }
 
-export const setPlaintextFormat = () => ({ type: 'SET_PLAINTEXT_FORMAT' })
+export const setPlaintextFormat = () => ({ type: 'SET_PLAINTEXT_FORMAT'})
-export const setMarkdownFormat = () => ({ type: 'SET_MARKDOWN_FORMAT' })
+export const setMarkdownFormat = () => ({ type: 'SET_MARKDOWN_FORMAT'})
-export const showOriginal = () => ({ type: 'SHOW_ORIGINAL' })
+export const showOriginal = () => ({ type: 'SHOW_ORIGINAL'})
-export const showFinal = () => ({ type: 'SHOW_FINAL' })
+export const showFinal = () => ({ type: 'SHOW_FINAL'})
-export const showDifference = () => ({ type: 'SHOW_DIFFERENCE' })
+export const showDifference = () => ({ type: 'SHOW_DIFFERENCE'})
 
-// if the input is dirty, saves it to the server
+
-// creates a new uuid for the same,
+//if the input is dirty, saves it to the server
-// then changes the browser location to a comparison view with that id
+//creates a new uuid for the same, 
+//then changes the browser location to a comparison view with that id
 export const compare = () => 
   (dispatch, getState) => {
-    //! !! could test that the input is dirty before triggering a save
+    //!!! could test that the input is dirty before triggering a save
-    // if the input is empty, the compare should do nothing
+    //if the input is empty, the compare should do nothing
-    // if the input is clean, the compare should not save and keep using the same id
+    //if the input is clean, the compare should not save and keep using the same id
 
-    // start saving the input to the server
+    //start saving the input to the server
     const id = dispatch(save())
 
-    // we can use the id created by the save method to build a path
+    //we can use the id created by the save method to build a path
     const comparePath = `/${id}`
     browserHistory.replace(comparePath)
   }
 
-// clear the input and return to the edit page
+
+//clear the input and return to the edit page
 export const reset = () => 
   (dispatch, getState) => {
     dispatch(clearInput())
     browserHistory.push('/')
   }
 
-// switch to the edit view
+
+//switch to the edit view
 export const edit = () => 
   (dispatch, getState) => {
     browserHistory.push('/')
   }
 
-// saves the current input fields to the server
+
-// creates and returns a new id for the comparison
+//saves the current input fields to the server
-// should this method ensure that the initial state is valid? ('DIRTY')
+//creates and returns a new id for the comparison
+//should this method ensure that the initial state is valid? ('DIRTY')
 export const save = () =>
   (dispatch, getState) => {
-    // generate an id
+
+    //generate an id
     const id = uuid()
 
-    // set waiting state
+    //set waiting state
-    dispatch({type: 'STATUS_SET', data: Status.SAVING})
+    dispatch( {type: 'STATUS_SET', data:Status.SAVING})
 
     const endpointUri = `/api/compare/${id}`
     const fetchOptions = {
@@ -87,31 +90,32 @@ export const save = () =>
         b: getState().input.final
       }),
       headers: {
-        'Content-Type': 'application/json'
+        "Content-Type": "application/json"
-      }
+      },
     }
 
-    // dispatch post request
+
+    //dispatch post request
     fetch(endpointUri, fetchOptions)
       .then(response => {
-        if (response.ok) {
+        if (response.ok)
           dispatch({type: 'STATUS_SET', data: Status.CLEAN})
-        } else {
+        else {
-          response.text().then((responseText) => {
+          response.text().then( (responseText) => {
-            const error = {message: `${response.status}: ${responseText}`}
+            const error = {message:`${response.status}: ${responseText}`}
             dispatch({type: 'STATUS_SET', data: Status.DIRTY})
             dispatch({type: 'STATUS_SET_ERROR', data: StatusError.SAVE_ERROR, error})
           })
         }
       })
       .catch(error => {
-        //! !! could use a better error message here
+        //!!! could use a better error message here
         dispatch({type: 'STATUS_SET', data: Status.DIRTY})
         dispatch({type: 'STATUS_SET_ERROR', data: StatusError.SAVE_ERROR, error})
       })
 
-    // return the id after the request has been sent
+    //return the id after the request has been sent
-    return id
+    return id;
   }
 
 /*
@@ -126,6 +130,7 @@ const load = (id) =>
       method: 'GET'
     }
 
+
     //dispatch post request
     fetch(endpointUri, fetchOptions)
       .then(response => response.json())

src/common/components/Compare.js

@@ -1,12 +1,11 @@
 import React from 'react'
 import {connect} from 'react-redux'
 
-import {Segment, Grid} from 'semantic-ui-react'
+import {Segment, Grid, Form} from 'semantic-ui-react'
 
+import * as Actions from '../actions'
 import * as Selectors from '../selectors'
 
-import {Format} from '../constants'
-
 import Header from './Header'
 import Footer from './Footer'
 import CompareControls from './CompareControls'
@@ -24,9 +23,11 @@ const mapStateToProps = (state) => ({
 })
 
 const mapDispatchToProps = dispatch => ({
-  // loadIfNeeded: (id) => dispatch(Actions.loadIfNeeded())
+  //loadIfNeeded: (id) => dispatch(Actions.loadIfNeeded())
 })
 
+ 
+
 class Compare extends React.Component {
   /*
   componentDidMount() {
@@ -34,39 +35,39 @@ class Compare extends React.Component {
   }
   */
 
-  render () {
+  render() {
     return (
       <div>
-        <Header />
+        <Header/>
 
         <Segment basic padded>
           <Grid stackable columns={2}>
-            <Grid.Column width='3'>
+            <Grid.Column width="3">
-              <CompareControls />
+              <CompareControls/>
             </Grid.Column>
-            <Grid.Column width='13'>
+            <Grid.Column width="13">
               <Segment>
                 {
-                  (!this.props.isMarkdownFormat && this.props.isShowDifference)
+                  (!this.props.isMarkdownFormat && this.props.isShowDifference) ? 
-                    ? <ShowPlaintext diff={this.props.diff}>{this.props.diff}</ShowPlaintext>
+                      <ShowPlaintext diff={this.props.diff}>{this.props.diff}</ShowPlaintext>: 
-                    : (this.props.isMarkdownFormat && this.props.isShowDifference)
+                  (this.props.isMarkdownFormat && this.props.isShowDifference) ?
-                      ? <ShowMarkdown diff={this.props.diff}>{this.props.diff}</ShowMarkdown>
+                      <ShowMarkdown diff={this.props.diff}>{this.props.diff}</ShowMarkdown>: 
-                      : (!this.props.isMarkdownFormat && !this.props.isShowDifference)
+                  (!this.props.isMarkdownFormat && !this.props.isShowDifference) ?
-                        ? <ShowPlaintext
+                      <ShowPlaintext 
-                          text={this.props.isShowOriginal ? this.props.safeInput.original : this.props.safeInput.final}
+                        text={this.props.isShowOriginal? this.props.safeInput.original: this.props.safeInput.final} 
-                          />
+                      /> :
-                        : (this.props.isMarkdownFormat && !this.props.isShowDifference)
+                  (this.props.isMarkdownFormat && !this.props.isShowDifference) ?
-                          ? <ShowMarkdown
+                      <ShowMarkdown 
-                            text={this.props.isShowOriginal ? this.props.safeInput.original : this.props.safeInput.final}
+                        text={this.props.isShowOriginal? this.props.safeInput.original: this.props.safeInput.final} 
-                            />
+                      /> :
-                          : null
+                  null
                 }
               </Segment>
             </Grid.Column>
           </Grid>
         </Segment>
 
-        <Footer />
+        <Footer/>
       </div>
     )
   }
@@ -74,6 +75,7 @@ class Compare extends React.Component {
 
 export default connect(mapStateToProps, mapDispatchToProps)(Compare)
 
+
 /*    <div ng-if="isMarkdownFormat">
       <div ng-show="isShowBefore" class="col-md-10 col-sm-12 content-well">
         <div btf-markdown="before" class="before"> 

src/common/components/CompareControls.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import {connect} from 'react-redux'
+import {Link} from 'react-router'
 
 import {Button, Icon, Segment} from 'semantic-ui-react'
 
@@ -10,9 +11,10 @@ const mapStateToProps = (state) => ({
   isMarkdownFormat: Selectors.isMarkdownFormat(state),
   isShowOriginal: Selectors.isShowOriginal(state),
   isShowFinal: Selectors.isShowFinal(state),
-  isShowDifference: Selectors.isShowDifference(state)
+  isShowDifference: Selectors.isShowDifference(state),
 })
 
+  
 const mapDispatchToProps = dispatch => ({
   onSetPlaintextFormat: () => dispatch(Actions.setPlaintextFormat()),
   onSetMarkdownFormat: () => dispatch(Actions.setMarkdownFormat()), 
@@ -24,19 +26,19 @@ const mapDispatchToProps = dispatch => ({
 
 class CompareControls extends React.Component {
 
-  onClickMarkdownFormat () {
+  onClickMarkdownFormat() {
-    if (this.props.isMarkdownFormat) {
+    if (this.props.isMarkdownFormat)
       this.props.onSetPlaintextFormat()
-    } else {
+    else
       this.props.onSetMarkdownFormat()
-    }
   }
 
-  render () {
+
+  render() {
     return (
       <Segment.Group>
         <Segment>
-          <Button fluid onClick={this.props.onEdit}>Edit</Button>
+          <Button fluid  onClick={this.props.onEdit}>Edit</Button>
         </Segment>
 
         <Segment >
@@ -46,8 +48,8 @@ class CompareControls extends React.Component {
         </Segment>
 
         <Segment >
-          <Button fluid active={this.props.isMarkdownFormat} type='submit' onClick={this.onClickMarkdownFormat.bind(this)}>
+          <Button fluid active={this.props.isMarkdownFormat} type="submit" onClick={this.onClickMarkdownFormat.bind(this)}>
-            {this.props.isMarkdownFormat ? <Icon name='checkmark' /> : <span />}
+            {this.props.isMarkdownFormat ? <Icon name="checkmark"/> : <span/>}
             &nbsp;As Markdown
           </Button>
         </Segment>

src/common/components/Footer.js

@@ -3,8 +3,8 @@ import React from 'react'
 import {Segment} from 'semantic-ui-react'
 
 const Footer = (props) => (
-  <Segment basic padded textAlign='center' as='footer'>
+  <Segment basic padded textAlign="center" as="footer">
-    <p><a href='http://adamarthurryan.com'>Adam Brown</a> | This website is <a href='https://github.com/adamarthurryan/dubdiff'>open source</a>.</p>
+    <p><a href="http://adamarthurryan.com">Adam Brown</a> | This website is <a href="https://github.com/adamarthurryan/dubdiff">open source</a>.</p>
   </Segment>
 )
 

src/common/components/Header.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import {connect} from 'react-redux'
 
-import {Segment, Header, Rail} from 'semantic-ui-react'
+import {Segment, Header, Rail, Container} from 'semantic-ui-react'
 import {Link} from 'react-router'
 
 import * as Actions from '../actions'
@@ -10,25 +10,27 @@ import SaveStatus from './SaveStatus'
 const mapStateToProps = (state) => ({
 })
 
+  
 const mapDispatchToProps = dispatch => ({
-  onReset: () => { console.log(Actions.reset()); dispatch(Actions.reset()) }
+  onReset: () => { console.log(Actions.reset()); dispatch(Actions.reset())},
 })
 
 const SiteHeader = (props) => (
 
-  <Segment basic >
   
-    <Segment basic padded textAlign='center' as='header' id='masthead'>
+    <Segment basic >
-      <Header><Link onClick={props.onReset}>dubdiff</Link></Header>
-    </Segment>
 
-    <Rail internal position='right'>
+      <Segment basic padded textAlign="center" as="header" id='masthead'>
-      <Segment basic padded>
+        <Header><Link onClick={props.onReset}>dubdiff</Link></Header>
-        <SaveStatus />
       </Segment>
-    </Rail>
 
-  </Segment>
+      <Rail internal position="right">
+        <Segment basic padded>
+          <SaveStatus/>
+        </Segment>
+      </Rail>
+
+    </Segment>
 )
 
 export default connect(mapStateToProps, mapDispatchToProps)(SiteHeader)

src/common/components/Main.js

@@ -13,48 +13,57 @@ import MainControls from './MainControls'
 
 const mapStateToProps = (state) => ({
   input: state.input,
-  safeInput: Selectors.safeInput(state)
+  safeInput: Selectors.safeInput(state),
 })
 
+  
 const mapDispatchToProps = dispatch => ({
   onChangeOriginal: (text) => dispatch(Actions.updateOriginalInput(text)),
-  onChangeFinal: (text) => dispatch(Actions.updateFinalInput(text))
+  onChangeFinal: (text) => dispatch(Actions.updateFinalInput(text)),
 })
 
+
 class Main extends React.Component {
   
+  constructor() {
+    super()
+  }
+
   render () { 
     return (
       <div>
-        <Header />
+        <Header/>
 
         <Segment basic padded>
           <Grid stackable columns={3}>
-            <Grid.Column width='3'>
+            <Grid.Column width="3">
-              <MainControls />
+              <MainControls/> 
             </Grid.Column>
-            <Grid.Column width='6'>
+            <Grid.Column width="6">
               <Form>
                 <Form.Field>
                   <label>Original</label>
-                  <textarea value={this.props.input.original} onChange={event => this.props.onChangeOriginal(event.target.value)} />
+                  <textarea value={this.props.input.original} onChange={event => this.props.onChangeOriginal(event.target.value)}></textarea>
                 </Form.Field>
               </Form>
             </Grid.Column>
-            <Grid.Column width='6'>
+            <Grid.Column width="6">
-              <Form>
+                <Form>
                 <Form.Field>
                   <label>Final</label>
-                  <textarea value={this.props.input.final} onChange={event => this.props.onChangeFinal(event.target.value)} />
+                  <textarea value={this.props.input.final} onChange={event => this.props.onChangeFinal(event.target.value)}></textarea>
                 </Form.Field>
               </Form>
             </Grid.Column>
           </Grid>
         </Segment>
 
-        <Footer />
+
+        <Footer/>
       </div>
 
+
+
     )
   } 
 }

src/common/components/MainControls.js

@@ -12,25 +12,26 @@ const mapStateToProps = (state) => ({
   saveStatus: state.saveStatus
 })
 
+  
 const mapDispatchToProps = dispatch => ({
   onSetPlaintextFormat: (format) => dispatch(Actions.setPlaintextFormat()),
   onSetMarkdownFormat: (format) => dispatch(Actions.setMarkdownFormat()), 
 
-  // returns an id for the record to be saved
+  //returns an id for the record to be saved
   onCompare: () => dispatch(Actions.compare()) 
 })
 
 class MainControls extends React.Component {
 
-  onClickMarkdownFormat () {
+  onClickMarkdownFormat() {
-    if (this.props.isMarkdownFormat) {
+    if (this.props.isMarkdownFormat)
       this.props.onSetPlaintextFormat()
-    } else {
+    else
       this.props.onSetMarkdownFormat()
-    }
   }
 
-  render () {
+
+  render() {
     return (
       <Segment.Group>
         <Segment >
@@ -38,8 +39,8 @@ class MainControls extends React.Component {
         </Segment>
 
         <Segment >
-          <Button fluid active={this.props.isMarkdownFormat} type='submit' onClick={this.onClickMarkdownFormat.bind(this)}>
+          <Button fluid active={this.props.isMarkdownFormat} type="submit" onClick={this.onClickMarkdownFormat.bind(this)}>
-            {this.props.isMarkdownFormat ? <Icon name='checkmark' /> : <span />}
+            {this.props.isMarkdownFormat ? <Icon name="checkmark"/> : <span/>}
             &nbsp;As Markdown
           </Button>
         </Segment>
@@ -51,4 +52,4 @@ class MainControls extends React.Component {
 export default connect(mapStateToProps, mapDispatchToProps)(MainControls)
 
 /*
-<a type="button" onClick={this.onClickCompare.bind(this)} className="btn btn-block btn-primary">compare</a> */
+<a type="button" onClick={this.onClickCompare.bind(this)} className="btn btn-block btn-primary">compare</a>*/

src/common/components/SaveStatus.js

@@ -1,7 +1,8 @@
 import React from 'react'
 import {connect} from 'react-redux'
 
-import {Message, Icon, Button} from 'semantic-ui-react'
+import { Message, Icon, Button} from 'semantic-ui-react'
+import { browserHistory} from 'react-router'
 
 import * as Actions from '../actions'
 import {Status, StatusError} from '../constants'
@@ -10,56 +11,54 @@ const mapStateToProps = (state) => ({
   status: state.status
 })
 
+  
 const mapDispatchToProps = dispatch => ({
   onSave: () => dispatch(Actions.save()),
   onReset: () => dispatch(Actions.reset())
 })
 
 const SaveStatus = (props) => {
-  if (props.status.type === Status.SAVING) {
+  if (props.status.type == Status.SAVING) return (
-    return (
+    <Message size='tiny' floating compact icon>
-      <Message size='tiny' floating compact icon>
+      <Icon name='circle notched' loading />
-        <Icon name='circle notched' loading />
+      <Message.Content>
-        <Message.Content>
+        <Message.Header>Saving diff</Message.Header>
-          <Message.Header>Saving diff</Message.Header>
+      </Message.Content>
-        </Message.Content>
+    </Message>
-      </Message>
+  )
-    )
+  if (props.status.type == Status.LOADING) return (
-  }
+    <Message size='tiny' floating compact icon>
-  if (props.status.type === Status.LOADING) {
+      <Icon name='circle notched' loading />
-    return (
+      <Message.Content>
-      <Message size='tiny' floating compact icon>
+        <Message.Header>Loading diff</Message.Header>
-        <Icon name='circle notched' loading />
+      </Message.Content>
-        <Message.Content>
+    </Message>
-          <Message.Header>Loading diff</Message.Header>
+  )
-        </Message.Content>
+  else if (props.status.hasError && props.status.errorType == StatusError.SAVE_ERROR) return (
-      </Message>
+    <Message size='tiny' floating compact icon>
-    )
+      <Icon name='exclamation' />
-  } else if (props.status.hasError && props.status.errorType === StatusError.SAVE_ERROR) {
+      <Message.Content>
-    return (
+        <Message.Header>Error saving diff</Message.Header>
-      <Message size='tiny' floating compact icon>
+        {props.status.error.message} 
-        <Icon name='exclamation' />
+        <br/>
-        <Message.Content>
+        <Button onClick={props.onSave}>Retry</Button>
-          <Message.Header>Error saving diff</Message.Header>
+      </Message.Content>
-          {props.status.error.message}
+    </Message> 
-          <br />
+  )
-          <Button onClick={props.onSave}>Retry</Button>
+  else if (props.status.hasError && props.status.errorType == StatusError.LOAD_ERROR) return (
-        </Message.Content>
+    <Message size='tiny' floating compact icon>
-      </Message>
+      <Icon name='exclamation' />
-    )
+      <Message.Content>
-  } else if (props.status.hasError && props.status.errorType === StatusError.LOAD_ERROR) {
+        <Message.Header>Error loading diff</Message.Header>
-    return (
+        {props.status.error.message}
-      <Message size='tiny' floating compact icon>
+        <br/>
-        <Icon name='exclamation' />
+        <Button onClick={props.onReset}>New Diff</Button>
-        <Message.Content>
+      </Message.Content>
-          <Message.Header>Error loading diff</Message.Header>
+    </Message> 
-          {props.status.error.message}
+  )
-          <br />
+
-          <Button onClick={props.onReset}>New Diff</Button>
+  else return ( <div></div> )
-        </Message.Content>
-      </Message>
-    )
-  } else return (<div />)
 }
 
+
 export default connect(mapStateToProps, mapDispatchToProps)(SaveStatus)

src/common/components/ShowMarkdown.js

@@ -1,17 +1,18 @@
 import React from 'react'
 
-import markdownCompiler from 'markdown-to-jsx'
+import markdownCompiler  from 'markdown-to-jsx'
 
-import {diffToHtml} from '../util/dubdiff'
+import {diffToString, diffToHtml} from '../util/dubdiff'
 
 const ShowMarkdown = (props) => {
+
   return <div>
-    {
+      {
-        props.text
+        props.text ?
-          ? markdownCompiler(props.text)
+          markdownCompiler(props.text) :
-          : props.diff
+        props.diff ?
-            ? markdownCompiler(diffToHtml(props.diff))
+          markdownCompiler(diffToHtml(props.diff)) :
-            : null
+        null
       }
   </div>
 }

src/common/components/ShowPlaintext.js

@@ -1,13 +1,14 @@
 import React from 'react'
 
+
 const ShowPlaintext = (props) => {
   return <div>
-    <pre style={{whiteSpace: 'pre-wrap'}}>
+    <pre style={{whiteSpace:'pre-wrap'}}>
-      {props.text
+      {props.text ?
-        ? props.text
+        props.text: 
-        : props.diff
+        props.diff ?
-          ? diffToPre(props.diff)
+          diffToPre(props.diff) :
-          : null
+          null 
       }
     </pre>
   </div>
@@ -15,12 +16,10 @@ const ShowPlaintext = (props) => {
 
 export default ShowPlaintext
 
-function diffToPre (diff) {
+function diffToPre(diff) {
   return diff.map((part, index) => (
-      part.added
+      part.added ? <ins key={index}>{part.value}</ins> :
-        ? <ins key={index}>{part.value}</ins>
+      part.removed ? <del key={index}>{part.value}</del> :
-        : part.removed
+      <span key={index}>{part.value}</span>
-          ? <del key={index}>{part.value}</del>
-          : <span key={index}>{part.value}</span>
     ))
 }

src/common/constants.js

@@ -4,9 +4,9 @@ export const Format = {
 }
 
 export const Show = {
-  ORIGINAL: 'ORIGINAL',
+  ORIGINAL:'ORIGINAL',
-  FINAL: 'FINAL',
+  FINAL:'FINAL',
-  DIFFERENCE: 'DIFFERENCE'
+  DIFFERENCE:'DIFFERENCE'
 }
 
 export const Status = {

src/common/reducers.js

@@ -1,15 +1,16 @@
 import {Format, Show, Status, StatusError} from './constants'
 
-export function input (state, action) {
+
+export function input (state, action ) {
   switch (action.type) {
     case 'UPDATE_ORIGINAL_INPUT':
-      return Object.assign({}, state, {original: action.data})
+      return Object.assign({}, state, {original:action.data})
     case 'UPDATE_FINAL_INPUT':
-      return Object.assign({}, state, {final: action.data})
+      return Object.assign({}, state, {final:action.data})
     case 'CLEAR_INPUT':
-      return {original: '', final: ''}
+        return {original:'', final:''}
     default:
-      return state || {original: '', final: ''}
+      return state || {original:'', final:''}
   }
 }
 
@@ -24,6 +25,7 @@ export function format (state, action) {
   }
 } 
 
+
 export function show (state, action) {
   switch (action.type) {
     case 'SHOW_ORIGINAL':
@@ -56,20 +58,18 @@ export function saveStatus (state, action) {
 }
 */
 
-// tracks status of the app, especially with respect to loaded and saved user data
+//tracks status of the app, especially with respect to loaded and saved user data
 export function status (state, action) {
-  // the status or error type is valid if it is in the list of Status or StatusError types
+  //the status or error type is valid if it is in the list of Status or StatusError types
-  const isValidStatus = (type) => Status[type] === type
+  const isValidStatus = (type) => Status[type] == type
-  const isValidError = (type) => StatusError[type] === type
+  const isValidError = (type) => StatusError[type] == type
 
-  // the error is cleared when status changes
+  //the error is cleared when status changes
-  if (action.type === 'STATUS_SET' && isValidStatus(action.data)) {
+  if (action.type == 'STATUS_SET' && isValidStatus(action.data))
-    return {type: action.data, error: null, hasError: false, errorType: null}
+    return {type:action.data, error: null, hasError: false, errorType: null}
-  }
+  //the error is set in addition to the status
-  // the error is set in addition to the status
+  else if (action.type == 'STATUS_SET_ERROR' && isValidError(action.data))
-  else if (action.type === 'STATUS_SET_ERROR' && isValidError(action.data)) {
+    return Object.assign({}, state, {error: action.error, hasError: true, errorType:action.data})
-    return Object.assign({}, state, {error: action.error, hasError: true, errorType: action.data})
+  else
-  } else {
+    return state || {type:Status.EMPTY, hasError: false, error:null}
-    return state || {type: Status.EMPTY, hasError: false, error: null}
-  }
 }

src/common/routes.js

@@ -1,12 +1,12 @@
-import {Route} from 'react-router'
+import  {Route, IndexRout, Redirect } from 'react-router'
-import React from 'react'
+import React from 'react';
 
 import Main from './components/Main'
 import Compare from './components/Compare'
 
 var routes = [
-  <Route key='root' path='/' component={Main} />,
+<Route key="root" path="/" component={Main}/>,
-  <Route key='compare' path='/:compareId' component={Compare} />
+<Route key="compare" path="/:compareId" component={Compare}/>
 
 ]
 

src/common/selectors.js

@@ -1,13 +1,15 @@
-// per http://redux.js.org/docs/recipes/ComputingDerivedData.html
+//per http://redux.js.org/docs/recipes/ComputingDerivedData.html
 
 import { createSelector } from 'reselect'
 
 import React from 'react'
 
+
 import {Format, Show} from './constants'
 
 import * as Dubdiff from './util/dubdiff'
 
+
 const input = (state) => state.input
 const format = (state) => state.format
 const show = (state) => state.show 
@@ -15,7 +17,7 @@ const show = (state) => state.show
 export const safeInput = createSelector(
   [input],
   (input) => {
-    //! !! sanitize the input here and return
+    //!!! sanitize the input here and return
     return input
   }
 )
@@ -23,32 +25,39 @@ export const safeInput = createSelector(
 export const isMarkdownFormat = createSelector(
   [format],
   (format) => {
-    return format === Format.MARKDOWN
+    return format == Format.MARKDOWN
   }
 )
 
 const isShow = (type) => createSelector(
   [show],
   (show) => {
-    return show === type
+    return show == type
   }
 )
 
 export const isShowOriginal = isShow(Show.ORIGINAL)
 export const isShowFinal = isShow(Show.FINAL)
-export const isShowDifference = isShow(Show.DIFFERENCE)
+export const isShowDifference= isShow(Show.DIFFERENCE)
+
 
 export const diff = createSelector(
   [format, safeInput],
   (format, safeInput) => {
-    if (format === Format.PLAINTEXT) {
+    return Dubdiff.plaintextDiff(safeInput.original, safeInput.final)
-      return Dubdiff.plaintextDiff(safeInput.original, safeInput.final)
+/*
-    } else if (format === Format.MARKDOWN) {
+    let diff = JsDiff.diffWords (input.original.replace(/ /g, ' '), input.final.replace(/ /g, ' '))
-      return Dubdiff.markdownDiff(safeInput.original, safeInput.final)
+    return diff.map(({added, removed, value})=>({added, removed, value:value.replace(/ /g, ' ')})).map(part => (
-    }
+      part.added ? <ins>{part.value}</ins> :
+      part.removed ? <del>{part.value}</del> :
+      <span>{part.value}</span> 
+    ))
+*/ 
   }
 )
 
+
+
 /*
   html diff
   ---

src/common/util/EditorsDiff.js

@@ -8,40 +8,42 @@ import {Diff} from 'diff'
 const TOKEN_BOUNDARYS = /([\s,.:])/
     
 class EditorsDiff extends Diff {
-  constructor (tokenBoundaries = TOKEN_BOUNDARYS) {
+  constructor (tokenBoundaries=TOKEN_BOUNDARYS) {
     super()
     this.tokenBoundaries = tokenBoundaries
   }
 
   equals (left, right) {
     return (
-      left.string === right.string
+      left.string == right.string 
     )
+      
   }
 
-  // splits the input string into a series of word and punctuation tokens
+
-    // each token is associated with an optional trailing array of spaces
+  //splits the input string into a series of word and punctuation tokens
+    //each token is associated with an optional trailing array of spaces
   tokenize (value) {
     let tokens = value.split(this.tokenBoundaries)
     let annotatedTokens = [] 
-    tokens.forEach(token => {
+    tokens.forEach( token => {
       if (isSpace(token)) {
-        if (annotatedTokens.length === 0) {
+        if (annotatedTokens.length == 0)
-          annotatedTokens.push({string: '', whitespace: []})
+          annotatedTokens.push({string:'', whitespace:[]})
-        }
 
-        let last = annotatedTokens[annotatedTokens.length - 1]
+        let last = annotatedTokens[annotatedTokens.length-1]
         last.whitespace.push(token)
-      } else {
+      }
-        annotatedTokens.push({string: token, whitespace: []})
+      else {
+        annotatedTokens.push({string:token, whitespace:[]})
       }
     })
 
-    // this final empty token is necessary for the jsdiff diffing engine to work properly
+    //this final empty token is necessary for the jsdiff diffing engine to work properly
-    annotatedTokens.push({string: '', whitespace: []})
+    annotatedTokens.push({string:'', whitespace:[]})
     return annotatedTokens
   }
-  join (annotatedTokens) {
+  join(annotatedTokens) {
     let tokens = []
     annotatedTokens.forEach(annotatedToken => {
       tokens.push(annotatedToken.string)
@@ -53,7 +55,9 @@ class EditorsDiff extends Diff {
   }
 } 
 
+
+
+
 export default EditorsDiff
 
 const isSpace = str => /[ ]+/.test(str)
-const isNewline = str => /[\n]+/.test(str)

src/common/util/dubdiff.js

@@ -1,115 +1,115 @@
+import * as JsDiff from 'diff'
 import EditorsDiff from './EditorsDiff'
 
 let plaintextDiffer = new EditorsDiff()
-let markdownDiffer = new EditorsDiff(/([\s,.:]|[*\[\]()])/)
+let markdownDiffer = new EditorsDiff(/([\s,.:]|[*\[\]\(\)])/)
 
-// returns a comparison of the texts as plaintext
+//returns a comparison of the texts as plaintext
-export function plaintextDiff (original, final) {
+export function plaintextDiff(original, final) {
-  let diff = plaintextDiffer.diff(original, final)
+    let diff = plaintextDiffer.diff(original, final)
-  return diff
+    return diff
 }
 
-// returns a comparison of the texts as markdown
+//returns a comparison of the texts as markdown
-export function markdownDiff (original, final) {
+export function markdownDiff(original, final) {
-  let diff = markdownDiffer.diff(original, final)
+    let diff = markdownDiffer.diff(original, final)
-  diff = rewriteMarkdownDiff(diff)
+    diff = rewriteMarkdownDiff(diff)
 
-  return diff
+    return diff  
 }
 
 // returns a string version of the diff, with "{+ ... +}" and "[- ... -]"
 // representing ins and del blocks
-export function diffToString (diff, tags = {added: {start: '{+', end: '+}'}, removed: {start: '[-', end: '-]'}, same: {start: '', end: ''}}) {
+export function diffToString(diff, tags={added:{start:'{+', end:'+}'}, removed:{start:'[-', end:'-]'}, same:{start:'', end:''}}) {
+
   return diff.map(({added, removed, value}) => {
-    let {start, end} = added ? tags.added : (removed ? tags.removed : tags.same)
 
-    let string = value
+      let {start,end} = added ? tags.added : (removed ? tags.removed : tags.same)
-    if (Array.isArray(value)) {
-      string = value.join('')
-    }
 
-    return start + string + end
+      let string = value
+      if (Array.isArray(value))
+        string = value.join('')
+
+      return start+string+end
   }).join('')
 }
 
-export function diffToHtml (diff) {
+export function diffToHtml(diff) {
-  return diffToString(diff, {added: {start: '<ins>', end: '</ins>'}, removed: {start: '<del>', end: '</del>'}, same: {start: '', end: ''}})
+  return diffToString(diff, {added:{start:'<ins>', end:'</ins>'}, removed:{start:'<del>', end:'</del>'}, same:{start:'', end:''}})  
 }
 
+
 // Rewrites the given diff to correctly render as markdown, assuming the source
 // documents were also valid markdown.
 // In essence, moves the markdown formatting elements in or out of the inserted and deleted blocks, as appropriate
 
-// rules:
+//rules:
-
 // 1. if a multiline del block is followed by an ins block, 
 //    the first line of the ins block should be inserted at the end of the first line of the del block
 //    so the markdown will apply to the ins text as it should
-// 2. multiline ins and del blocks should be broken up into a series of single line blocks
+// 2. after a newline, if an ins or del block begins with a markdown line formatting prefix (eg. for a title or list)
-// 3. after a newline, if an ins or del block begins with a markdown line formatting prefix (eg. for a title or list)
 //    then that prefix should be moved out of the block
 
-// not yet implemented rules:
+//not yet implemented rules:
 // 3. if an ins or del block spans one half of a bold, italic or link string
 //    eg. **Hello <del>World** I</del><ins>Darling** she</ins> said 
 //    the block should be broken up to move the formatting code outside
 //    OR the whole formatting string could be brought into the block
 //    eg. **Hello <del>World</del><ins>Darling</ins>** <ins>I</ins><del>she</del> said
-function rewriteMarkdownDiff (diff) {
+function rewriteMarkdownDiff(diff) {  
-  // apply transformation rules
+  //apply transformation rules
   let transformedDiff = diff
-  transformedDiff = applyTransformationRuleMultilineDelThenIns(transformedDiff)
+  transformedDiff= applyTransformationRule1(transformedDiff)
-  transformedDiff = applyTransformationRuleBreakUpDelIns(transformedDiff)
+  transformedDiff= applyTransformationRule2(transformedDiff)
-  transformedDiff = applyTransformationRuleFormattingPrefix(transformedDiff)
-  transformedDiff = applyTransformationRuleRemoveEmpty(transformedDiff)
   return transformedDiff
 }
 
-// Transformation rule 1
+//Transformation rule 1
 // 1. if a multiline del block is followed by an ins block, 
 //    the first line of the ins block should be inserted at the end of the first line of the del block
 //    so the markdown will apply to the ins text as it should
-function applyTransformationRuleMultilineDelThenIns (diff) {
+function applyTransformationRule1(diff) {
   let transformedDiff = []
 
-  const B_ADDED = 'added'
+  const B_ADDED='added', B_REMOVED='removed', B_SAME='same'
-  const B_REMOVED = 'removed'
-  const B_SAME = 'same'
-
   let previousBlockType = null 
   let currentBlockType = null
   let previousBlockWasMultiline = false
   let currentBlockIsMultiline = false
 
-  // iterate the input tokens to create the intermediate representation
+  //iterate the input tokens to create the intermediate representation
   diff.forEach((currentBlock) => {
+
     previousBlockType = currentBlockType
     previousBlockWasMultiline = currentBlockIsMultiline
     currentBlockType = (currentBlock.added ? B_ADDED : (currentBlock.removed ? B_REMOVED : B_SAME))
     currentBlockIsMultiline = isMultilineDiffBlock(currentBlock)
 
-    // transform rule 1 applys when:
+    //transform rule 1 applys when:
     // the previous block was a del and had multiple lines
     // the current block is an ins
-    if (previousBlockType === B_REMOVED && currentBlockType === B_ADDED && previousBlockWasMultiline) {
+    if (previousBlockType == B_REMOVED && currentBlockType == B_ADDED && previousBlockWasMultiline) {
-      // split the first line from the current block
+
+      //split the first line from the current block
       let currentBlockSplit = splitMultilineDiffBlock(currentBlock)
 
-      // pop the previous diff entry
+      //pop the previous diff entry
       let previousBlock = transformedDiff.pop()
 
-      // split the first line from the previous block
+      //split the first line from the previous block
       let previousBlockSplit = splitMultilineDiffBlock(previousBlock)
 
-      // now add the blocks back, interleaving del and ins blocks
+
-      for (let i = 0; i < Math.max(previousBlockSplit.length, currentBlockSplit.length); i++) {
+      //now add the blocks back, interleaving del and ins blocks
-        if (i < previousBlockSplit.length) {
+      for (let i=0; i<Math.max(previousBlockSplit.length, currentBlockSplit.length); i++) {
+        if (i<previousBlockSplit.length)
           transformedDiff.push(previousBlockSplit[i])
-        }
+        if (i<currentBlockSplit.length)
-        if (i < currentBlockSplit.length) { transformedDiff.push(currentBlockSplit[i]) }
+          transformedDiff.push(currentBlockSplit[i])
       }
-    } else {
+    }
-      // otherwise, we just add the current block to the transformed list
+    else {
+      //otherwise, we just add the current block to the transformed list
       transformedDiff.push(currentBlock)
     }
   })
@@ -117,43 +117,6 @@ function applyTransformationRuleMultilineDelThenIns (diff) {
   return transformedDiff
 }
 
-// Transformation rule 2
-// 2. multiline del and ins blocks should be broken up
-//    into a series of single line blocks
-function applyTransformationRuleBreakUpDelIns (diff) {
-  let transformedDiff = []
-
-  const B_ADDED = 'added'
-  const B_REMOVED = 'removed'
-  const B_SAME = 'same'
-  let blockType = null
-  let blockIsMultiline = false
-
-  // iterate the input tokens to create the intermediate representation
-  diff.forEach((block) => {
-    blockType = (block.added ? B_ADDED : (block.removed ? B_REMOVED : B_SAME))
-    blockIsMultiline = isMultilineDiffBlock(block)
-
-    // transform rule applys when:
-    // the current block is an ins or del and is multiline
-    if ((blockType === B_REMOVED || blockType === B_ADDED) && blockIsMultiline) {
-      // split the first line from the current block
-      let blockSplit = splitMultilineDiffBlock(block)
-
-      blockSplit.forEach(blockSplitLine => transformedDiff.push(blockSplitLine))
-    } else {
-      // otherwise, we just add the current block to the transformed list
-      transformedDiff.push(block)
-    }
-  })
-
-  return transformedDiff
-}
-
-// Transformation rule number 4: remove empty blocks
-function applyTransformationRuleRemoveEmpty (diff) {
-  return diff.filter(({value}) => value.length > 0)
-}
 
 // matches markdown prefixes that affect the formatting of the whole subsequent line
   // ^                  - start of line
@@ -163,30 +126,31 @@ function applyTransformationRuleRemoveEmpty (diff) {
   //  |([ \t]+[\*\+-])     - unordered lists
   //  |([ \t]+[0-9]+\.)  - numeric lists
   // )?
-  // [ \t]+             - trailing whitespace
+  // [ \t]*             - trailing whitespace
-const MARKDOWN_PREFIX = /^([ \t]*>)*(([ \t]*#*)|([ \t]*[*+\-])|([ \t]*[\d]+\.))?[ \t]+/
+const MARKDOWN_PREFIX =  /^([ \t]*\>)*(([ \t]*#*)|([ \t]*[\*\+-])|([ \t]*[\d]+\.))?[ \t]*/
 
-// matches strings that end with a newline followed by some whitespace
+//matches strings that end with a newline followed by some whitespace
 const NEWLINE_SUFFIX = /\n\s*$/
 
-// transformation rule 3:
+// transformation rule 2:
 //    after a newline, if an ins or del block begins with a markdown line formatting prefix (eg. for a title or list)
 //    then that prefix should be moved out of the block
 //    also, if an ins block begins with a formatting prefix and follows immediately after a del block that follows a newline,
 //    the prefix should be moved out of the block _and_ an extra newline character should be added to the beginning of it
-function applyTransformationRuleFormattingPrefix (diff) {
+function applyTransformationRule2(diff) {
   let transformedDiff = []
 
   let isNewline = true
   let newlineString = '\n'
 
-  // iterate the input tokens to create the intermediate representation
+  //iterate the input tokens to create the intermediate representation
   diff.forEach((currentBlock) => {
-    if (isNewline && (currentBlock.added || currentBlock.removed)) {
+
+    if (isNewline && (currentBlock.added || currentBlock.removed) ) {
       let match = currentBlock.value.match(MARKDOWN_PREFIX)
       if (match) {
-        let preBlock = {value: match[0]}
+        let preBlock = {value:match[0]}
-        let postBlock = {added: currentBlock.added, removed: currentBlock.removed, value: currentBlock.value.substring(match[0].length)}
+        let postBlock = {added:currentBlock.added, removed:currentBlock.removed, value:currentBlock.value.substring(match[0].length)}
         
         if (currentBlock.added) {
           let newlineBlock = {value: newlineString}
@@ -194,42 +158,70 @@ function applyTransformationRuleFormattingPrefix (diff) {
         }
         transformedDiff.push(preBlock)
         transformedDiff.push(postBlock)
-      } else {
+      }
+      else {
         transformedDiff.push(currentBlock)
       }
-    } else {
+    }
+    else {
       transformedDiff.push(currentBlock)
       isNewline = NEWLINE_SUFFIX.test(currentBlock.value)
-      if (isNewline) {
+      if (isNewline)
         newlineString = currentBlock.value.match(NEWLINE_SUFFIX)[0]
-      }
     }
   })
 
   return transformedDiff
 }
 
-// returns true if the given diff block contains a newline element
+
-function isMultilineDiffBlock ({value}) {
+
-  return value.indexOf('\n') !== -1
+//returns true if the given diff block contains a newline element
+function isMultilineDiffBlock({value}) {
+  return value.indexOf('\n') != -1
 }
 
-// returns an array of diff blocks that have the same added, removed fields as the given one
+
-// but with the string split by newlines
+//returns an array of diff blocks that have the same added, removed fields as the given one
-// if the diff block has no newlines, an array containing only that diff will be returned
+//but with the string split by newlines
-// if the diff block has newlines, the resulting array will have a series of blocks,
+//if the diff block has no newlines, an array containing only that diff will be returned
-// consisting of the block text, interleaved with newlines
+//if the diff block has newlines, the resulting array will have a series of blocks, 
-// ,
+// each of which subsequent to the first block will begin with a newline
-// each of which begin with a newline
+//if the diff block begins with a newline, the returned array will begin with an empty diff
-// if the diff block begins with a newline, the returned array will begin with an empty diff
+function splitMultilineDiffBlock({added, removed, value}) {
-function splitMultilineDiffBlock ({added, removed, value}) {
+  //find the indices of the diff block that coorespond to newlines
-  let lines = value.split('\n')
+  const splits = indicesOf(value, c => (c=='\n') )
-  let blocks = []
+
-//  lines = lines.filter(line=>line.length>0)
+  splits.push(value.length)
-  lines.forEach((line, index) => {
+
-    blocks.push({added, removed, value: line})
+  //create a range from each index
-    if (index < lines.length - 1) blocks.push({value: '\n'})
+  const ranges = splits.reduce(  
-  })
+    //the accumulator is a structure with the last index and the list of ranges 
+    //the ranges are a {start, end} structure 
+    ({last, ranges}, i) => {
+      ranges = ranges.concat([{start:last, end:i}])
+      return {last:i, ranges}
+    },
+    //start with the zero index and an empty array 
+    {last: 0, ranges:[]}
+  ).ranges
+
+
+  //map the ranges into blocks
+  const blocks = ranges.map(
+    //each block is the same as the given original block, but with the values split at newlines
+    ({start, end}) => ({added, removed, value:value.substring(start, end)})
+  )
+
+  //console.log({value, splits, ranges, blocks})
 
   return blocks
 }
+
+//collect all the indices of the given string that satisfy the test function
+const indicesOf = (string, test) => string.split('').reduce( 
+  //add indexes that satisfy the test function to the array
+  (acc, x, i) => (test(x) ? acc.concat([i]) : acc ), 
+  //start with the empty array
+  []
+)

src/server/babel.index.js

@@ -1,37 +1,30 @@
-var Path = require('path')
+var Path = require('path');
 
 var srcRoot = Path.join(__dirname, '..')
 
-// there should be some option for distribution / optimization?
+//there should be some option for distribution / optimization?
-var config = {
+var config =  {
-  presets: ['node6', 'react'],
+  presets: ["node6", "react"],
-  // enable source maps for non-production instances
+  //enable source maps for non-production instances
-  sourceMaps: (process.env.NODE_ENV !== 'production' ? 'both' : false),
+  sourceMaps: (process.env.NODE_ENV !== "production" ? "both" : false),
-  // highlightCode: false,
+  //highlightCode: false,
   sourceRoot: srcRoot,
   only: /src/
 
-}
+};
 
-require('babel-core/register')(config)
+require('babel-core/register')(config);
 
-var piping = require('piping')
+// Enable piping for non-production environments
-
+if (process.env.NODE_ENV !== "production") {
-main()
+  if (!require("piping")({hook: true, includeModules: false})) {
-
+    return;
-function main () {
-  // Enable piping for non-production environments
-  if (process.env.NODE_ENV !== 'production') {
-    // piping will return false for the initial invocation
-    // the app will be run again in an instance managed by piping
-    if (!piping({hook: true, includeModules: false})) {
-      return
-    }
-  }
-
-  try {
-    require('./index.js')
-  } catch (error) {
-    console.error(error.stack)
   }
 }
+
+try {
+  require('./index.js');
+}
+catch (error) {
+  console.error(error.stack);
+}

src/server/comparison.js

@@ -3,85 +3,89 @@ import jf from 'jsonfile'
 import fs from 'fs'
 import uuid from 'uuid'
 
+
 const router = express.Router()
 
 router.get('/:id', showComparison)
 router.post('/:id', createComparisonWithId)
 router.post('/', createComparison)
 
-// return the comparison given an id, if it exsits
+//return the comparison given an id, if it exsits
-function showComparison (req, res) {
+function showComparison(req, res) {
   const id = req.params.id
   return readRecord(res, id)
 }
 
 // Creates a new comparison
-function createComparison (req, res) {
+function createComparison(req, res) {
-  // generate a new id
+  //generate a new id
   const id = uuid() 
-  const {a, b} = req.body
+  const {a,b} = req.body
 
-  return writeRecord(res, id, {a, b, id})
+  return writeRecord(res, id, {a,b,id})  
 }
 
 // Creates a new comparison
-function createComparisonWithId (req, res) {
+function createComparisonWithId(req, res) {
-  // use the id provided in the req
+  //use the id provided in the req
   const id = req.params.id
   const {a, b} = req.body
 
   return writeRecord(res, id, {a, b, id})
 }
 
-// reads the record from the database
+//reads the record from the database
-function readRecord (res, id, data) {
+function readRecord(res, id, data) {
-  // generate a filename
+  //generate a filename
   const filename = fnData(id)
 
-  // check if that file exists
+  //check if that file exists
   fs.exists(filename, function (exists) {
-    // if the file does not exist, return a 404
+    //if the file does not exist, return a 404
-    if (!exists) return res.status(404).send(`Data id ${id} not found.`)
+    if (!exists)  return res.status(404).send(`Data id ${id} not found.`)
 
-    // otherwise, read the file as JSON
+    //otherwise, read the file as JSON
-    jf.readFile(filename, function (err, data) {
+    jf.readFile(filename, function(err, data) {
-      if (err) { return handleError(res, err) }
+      if(err) { return handleError(res, err) }
 
-      // and return
+      //and return
       return res.json(data)
     })
   })
 }
 
-// writes the record to the database, if it doesn't exist
+//writes the record to the database, if it doesn't exist
-function writeRecord (res, id, data) {
+function writeRecord(res, id, data) {
-  // look up its filename
+
+  //look up its filename
   var filename = fnData(id)
 
-  // need to test that the file does not exist
+  //need to test that the file does not exist
 
-  // check if that file exists
+  //check if that file exists
   fs.exists(filename, (exists) => {
-    // if the file already exists, return a 405
+    //if the file already exists, return a 405
-    if (exists) return res.status(405).send(`Data id ${id} is already in use.`)
+    if (exists)  return res.status(405).send(`Data id ${id} is already in use.`)
 
-    // and write it to the filesystem
+
+    //and write it to the filesystem
     jf.writeFile(filename, data, (err) => (
-      err
+      err ?
-        ? handleError(res, err)
+        handleError(res, err) :
-        // if successful, return the comparison object
+        //if successful, return the comparison object
-        : res.status(201).json(data)
+        res.status(201).json(data)
     ))
   })
 }
 
 module.exports = router
 
-function handleError (res, err) {
+function handleError(res, err) {
   console.log(err)
   return res.send(500, err)
 }
 
+
 // returns a filename for the given comparison
 function fnData (id) {
   return `./data/${id}.json`

src/server/index.js

@@ -7,76 +7,83 @@ import fetch from 'isomorphic-fetch'
 
 import comparisonRouter from './comparison'
 
+
 import * as reducers from '../common/reducers'
 
 import {Status, StatusError} from '../common/constants'
 
 import render from './render'
 
-// set use port 8080 for dev, 80 for production
+const PORT = 8080
-const PORT = (process.env.NODE_ENV !== 'production' ? 8080 : 80)
 
 const app = express()
 
-// serve the dist static files at /dist
+//serve the dist static files at /dist
 app.use('/dist', express.static(path.join(__dirname, '..', '..', 'dist')))
  
-// serve the comparison api at /api/compare
+//serve the comparison api at /api/compare
 app.use(bodyParser.json())
-app.use('/api/compare', comparisonRouter)
+app.use('/api/compare', comparisonRouter);
 
-// the following routes are for server-side rendering of the app
+
-// we should render the comparison directly from the server
+
-// this loading logic could be moved into ../common/actions because it is isomorphic
+//the following routes are for server-side rendering of the app
+//we should render the comparison directly from the server
+//this loading logic could be moved into ../common/actions because it is isomorphic
 app.route('/:comparisonId')
   .get((req, res) => {
+
+
     const store = createSessionStore()
     const endpointUri = `http://localhost:${PORT}/api/compare/${req.params.comparisonId}`
 
-    // fetch the comparison
+    //fetch the comparison
     fetch(endpointUri)
     .then(response => {
-      if (response.ok) {
+      if (response.ok)
         return response.json()
-      } else {
+      else {
-        response.text().then(() => {
+        response.text().then( () => {
-          const error = {message: `${response.status}: ${response.statusText}`}
+          const error = {message:`${response.status}: ${response.statusText}`}
           initAndRenderError(error, store, req, res)
         })
       }
     })
-    .then(({a, b}) => {
+    .then( ({a,b}) => {
-      initAndRenderComparison({a, b}, store, req, res)
+      initAndRenderComparison({a,b}, store, req, res)
     })
-    .catch(error => {
+    .catch( error => {
       initAndRenderError(error, store, req, res)
     })
+
   })
 app.route('/')
   .get((req, res) => {
     render(createSessionStore(), req, res)
   })
 
+
 app.listen(PORT, function () {
-  console.log(`Server listening on port ${PORT}.`)
+  console.log('Server listening on port 8080.')
 })
 
-// creates the session store
+
-function createSessionStore () {
+//creates the session store
-  // create the redux store
+function createSessionStore() {
+  //create the redux store
   return Redux.createStore(
     Redux.combineReducers(reducers)
   )
 }
 
-function initAndRenderComparison ({a, b}, store, req, res) {
+function initAndRenderComparison({a,b}, store, req, res) {
   store.dispatch({type: 'UPDATE_ORIGINAL_INPUT', data: a})
   store.dispatch({type: 'UPDATE_FINAL_INPUT', data: b})
   store.dispatch({type: 'STATUS_SET', data: Status.CLEAN})
   render(store, req, res)
 }
 
-function initAndRenderError (error, store, req, res) {
+function initAndRenderError(error, store, req, res) {
   store.dispatch({type: 'STATUS_SET', data: Status.EMPTY})
   store.dispatch({type: 'STATUS_SET_ERROR', data: StatusError.LOAD_ERROR, error})
   render(store, req, res)

src/server/render.js

@@ -5,11 +5,12 @@ import { match, RouterContext } from 'react-router'
 
 import routes from '../common/routes.js'
 
-export default function render (store, req, res) {
+
+export default function render(store, req, res) {
   // Send the rendered page back to the client
   match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
     if (error) {
-      res.status(500).send(errorTemplate('Routing Error:', error.message))
+      res.status(500).send(renderError('Routing Error:', error.message))
     } else if (redirectLocation) {
       res.redirect(302, redirectLocation.pathname + redirectLocation.search)
     } else if (renderProps) {
@@ -25,10 +26,12 @@ export default function render (store, req, res) {
         const initialState = store.getState()
         // and send
         res.status(200).send(appTemplate(html, initialState))
-      } catch (ex) {
+      }
-        console.log('Render Exception:', ex)
+      catch(ex) {
+        console.log("Render Exception:",ex)
         res.status(500).send(errorTemplate('Render Exception', ex.message, ex))
       }
+
     } else {
       res.status(404).send(errorTemplate('Not found', `${req.url} not found.`))
     }
@@ -36,7 +39,7 @@ export default function render (store, req, res) {
 }
 
 const pageTemplate = (body) => {
-  return `
+    return `
       <!doctype html>
       <html>
         <head>
@@ -51,6 +54,7 @@ const pageTemplate = (body) => {
           <link rel="icon" type="image/png" sizes="96x96" href="dist/favicon-96x96.png">
           <link rel="icon" type="image/png" sizes="16x16" href="dist/favicon-16x16.png">
 
+
         </head>
         <body>
           ${body}
@@ -59,23 +63,25 @@ const pageTemplate = (body) => {
     `
 }
 
-function errorTemplate (title, message, exception) {
+function errorTemplate(title, message, exception) {
   return pageTemplate(`
     <h1>${title}</h1>
     <p>${message}</p>
-    ${exception
+    ${exception ? 
-      ? `<pre>${exception.toString()}</pre>`
+      `<pre>${exception.toString()}</pre>`:
-      : ``
+      ``
     }
   `)
 }
 
-function appTemplate (html, initialState) {
+
-  return pageTemplate(`
+
+function appTemplate(html, initialState) {
+    return pageTemplate(`
       <div id="root">${html}</div>
 
       <script>
-        window.__INITIAL_STATE__ = "${encodeURI(JSON.stringify(initialState, null, 2))}"
+        window.__INITIAL_STATE__ = ${JSON.stringify(initialState)}
       </script>
       <!-- <script>__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__</script> -->
       <script type="text/javascript" src="dist/browser-bundle.js"></script>

test/dubdiffMarkdown.js

@@ -1,85 +1,74 @@
-/* eslint-env node, mocha */
+/*eslint-env node, mocha */
-/* global expect */
+/*global expect */
-/* eslint no-console: 0 */
+/*eslint no-console: 0*/
-'use strict'
+'use strict';
 
 import chai from 'chai'
 
 import {markdownDiff, diffToString} from '../src/common/util/dubdiff'
 
-let diff = (a, b) => diffToString(markdownDiff(a, b))
+let diff = (a,b) => diffToString(markdownDiff(a,b))
 
-const expect = chai.expect // eslint-disable-line no-unused-vars
+const expect = chai.expect 
 
 describe('dubdiff', () => {
-  beforeEach(() => {
+  let db;  
-  })
 
-  it('plaintext diffs consecutive words', () => {
+  beforeEach(() => {
+  });
+
+  it('plaintext diffs consecutive words', ()=>{  
     expect(diff(
       'This is a smlb sentnce with no errors.',
       'This is a simple sentence with no errors.'
     )).to.equal('This is a [-smlb sentnce -]{+simple sentence +}with no errors.')
   })
 
-  it('plaintext diffs with word deletion', () => {
+  it('plaintext diffs with word deletion', ()=>{  
     expect(diff(
       'Gonna delete a word.',
       'Gonna delete word.'
     )).to.equal('Gonna delete [-a -]word.')
   })
 
-  it('plaintext diffs with word insertion', () => {
+  it('plaintext diffs with word insertion', ()=>{  
     expect(diff(
       'Gonna delete word.',
       'Gonna delete a word.'
     )).to.equal('Gonna delete {+a +}word.')
   })
 
-  it('reorganizes insertions after multiline deletions', () => {
+  it('reorganizes insertions after multiline deletions', ()=>{
     expect(diff(
 `# Title
 other`,
 `# Subtitle`
-    )).to.equal('# [-Title-]{+Subtitle+}\n[-other-]')
+    )).to.equal('# [-Title-]{+Subtitle+}[-\nother-]')
   })
 
-  it('pulls prefixes out of ins or del blocks after newline', () => {
+  it('pulls prefixes out of ins or del blocks after newline',  () => {
     expect(diff(
       '# Title\n > hello',
       '# Title\n - goodbye'
     )).to.equal('# Title\n > [-hello-]\n - {+goodbye+}')
   })
 
-  it('respects bold and italic boundaries', () => {
+  it('respects bold and italic boundaries',  () => {
     expect(diff(
       'This *word* **isn\'t** changed.',
       'This *other one* **is** changed.'
     )).to.equal('This *[-word-]{+other one+}* **[-isn\'t-]{+is+}** changed.')
   })
-  it('respects link boundaries in link text', () => {
+  it('respects link boundaries in link text',  () => {
     expect(diff(
       'This [link](https://somewhere.com) is the same.',
       'This [target](https://somewhere.com) changed.'
     )).to.equal('This [[-link-]{+target+}](https://somewhere.com) [-is the same-]{+changed+}.')
   })
-  it('respects link boundaries in link target', () => {
+  it('respects link boundaries in link target',  () => {
     expect(diff(
       'This [link](https://somewhere.com) is the same.',
       'This [link](https://somewhere.org) changed.'
     )).to.equal('This [link](https://somewhere.[-com-]{+org+}) [-is the same-]{+changed+}.')
   })
-  it('deletes a title', () => {
-    expect(diff(
-      'Hello\n# Title 1\n# Title 2',
-      'Hello\n# Title 2'
-    )).to.equal('Hello\n# Title [-1-]\n# [-Title -]2')
-  })
-  it('deletes a more different title', () => {
-    expect(diff(
-      'Hello\n# Filbert\n# Title 2',
-      'Hello\n# Title 2'
-    )).to.equal('Hello\n# [-Filbert-]\n# Title 2')
-  })
 })
-

test/dubdiffPlaintext.js

@@ -1,41 +1,42 @@
-/* eslint-env node, mocha */
+/*eslint-env node, mocha */
-/* global expect */
+/*global expect */
-/* eslint no-console: 0 */
+/*eslint no-console: 0*/
-'use strict'
+'use strict';
 
 import chai from 'chai'
 
 import {plaintextDiff, diffToString} from '../src/common/util/dubdiff'
 
-let diff = (a, b) => diffToString(plaintextDiff(a, b))
+let diff = (a,b) => diffToString(plaintextDiff(a,b))
 
-const expect = chai.expect // eslint-disable-line no-unused-vars
+const expect = chai.expect 
 
 describe('dubdiff', () => {
-  beforeEach(() => {
-  })
 
-  it('diffs single words', () => {
+  beforeEach(() => {
+  });
+
+  it('diffs single words', ()=>{  
     expect(diff(
       'This is a smlb sentence.',
       'This is a simple sentence.'
     )).to.equal('This is a [-smlb -]{+simple +}sentence.')
   })
 
-  it('diffs consecutive words', () => {
+  it('diffs consecutive words', ()=>{  
     expect(diff(
       'This is a smlb sentnce with no errors.',
       'This is a simple sentence with no errors.'
     )).to.equal('This is a [-smlb sentnce -]{+simple sentence +}with no errors.')
   })
 
-  it('diffs with word deletion', () => {
+  it('diffs with word deletion', ()=>{  
     expect(diff(
       'Gonna delete a word.',
       'Gonna delete word.'
     )).to.equal('Gonna delete [-a -]word.')
   })
-  it('diffs with word insertion', () => {
+  it('diffs with word insertion', ()=>{  
     expect(diff(
       'Gonna add word.',
       'Gonna add a word.'

webpack.config.js

@@ -13,10 +13,10 @@ let config = {
         loader: 'babel-loader',
         query: {
           presets: ['es2015-native-modules', 'react'],
-          compact: 'true'
+          compact: "true"
         }
       },
-      { test: /\.json$/, loader: 'json-loader' }
+      { test: /\.json$/, loader: "json-loader" },
     ]
   },
   node: {
@@ -24,12 +24,13 @@ let config = {
     net: 'empty',
     tls: 'empty'
   }
+};
+
+if (process.env.NODE_ENV == "production") {
+  config.devtool = "cheap-module-source-map"
+}
+else {
+  config.devtool = "eval"
 }
 
-if (process.env.NODE_ENV === 'production') {
+module.exports = config;
-  config.devtool = 'cheap-module-source-map'
-} else {
-  config.devtool = 'eval'
-}
-
-module.exports = config