Merge version-2 branch to master

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["node6", "react"],
+}

.gitignore

@@ -0,0 +1,13 @@
+*~
+node_modules
+data/*
+
+dist/themes
+dist/semantic.min.css
+
+browser-bundle.js
+browser-bundle.js.map
+npm-debug.log.*
+
+stats.json
+stats.analyzed.txt

README.md

@@ -0,0 +1,69 @@
+# dubdiff
+
+A diff viewer for markdown-formatted and plaintext documents.
+
+These diffs are intended for use in copy-editing. The diffs are performed word-by-word, similarly to how the [GNU `wdiff`](http://www.gnu.org/software/wdiff/) tool works. This produces a more meaningful diff for English-language editing. 
+
+The diff may be further processed in a way that is aware of markdown formatting. The resulting output attempts to show differences of copy within the final document format (rather than differences of format).
+
+The markdown-sensitive processing of the wdiff comparison is at `...`, for the curious.
+
+
+## Version 2
+
+This is a complete rewrite of Dubdiff with:
+
+  - simpler project architecture
+  - client-side diffing engine and simplified server
+  - server-side rendering
+  - switch to React from Angular
+  - clean up of diffing engine
+  - goal of implementing a HTML diff viewer
+
+Basically I'm rewriting it for fun.
+
+
+## Live Server
+
+The tool is live at http://dubdiff.com, feel free to use it there.
+
+## Provisioning
+
+You'll need node & npm. Then install dependencies with 
+
+    npm install
+
+
+To build and launch a dev server:
+
+    npm start
+    npm run server
+
+To build and launch the distribution server:
+
+    npm run build:dist
+    npm run server:dist
+
+
+
+Data is saved to a simple flat file db in the `data` folder. If this folder doesn't exist, create it.
+
+    mkdir data
+
+
+### Low-memory environments
+
+On a low-memory machine, eg. a DigitalOcean 512MB instance, you will need to enable virtual memory. Use this guide:
+
+[How To Configure Virtual Memory (Swap File) on a VPS](https://www.digitalocean.com/community/tutorials/how-to-configure-virtual-memory-swap-file-on-a-vps#2)
+
+
+### Start on boot
+
+To make the application start on boot, run the following:
+
+    pm2 start grunt --name dubdiff -- serve:dist
+    pm2 startup systemd
+    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

@@ -0,0 +1,33 @@
+
+ - 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

@@ -0,0 +1,3 @@
+#masthead .header {
+  font-size: 4em;
+}

package.json

@@ -0,0 +1,58 @@
+{
+  "name": "dubdiff-2",
+  "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: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",
+    "test": "mocha --watch --compilers js:babel-register"
+  },
+  "author": "",
+  "license": "BSD-2-Clause",
+  "dependencies": {
+    "babel-preset-es2015-mod": "^6.6.0",
+    "babel-preset-es3": "^1.0.1",
+    "babel-preset-stage-2": "^6.18.0",
+    "body-parser": "^1.15.2",
+    "diff": "^3.0.1",
+    "express": "^4.14.0",
+    "isomorphic-fetch": "^2.2.1",
+    "jsonfile": "^2.4.0",
+    "markdown-it": "^5.1.0",
+    "markdown-to-jsx": "^4.0.3",
+    "react": "^0.14.5",
+    "react-dom": "^0.14.5",
+    "react-redux": "^4.4.6",
+    "react-router": "~3.0.0",
+    "redux": "^3.5.1",
+    "redux-thunk": "^2.1.0",
+    "request": "^2.79.0",
+    "request-promise-native": "^1.0.3",
+    "reselect": "^2.5.1",
+    "semantic-ui-css": "^2.2.4",
+    "semantic-ui-react": "^0.61.6",
+    "uuid": "^3.0.1"
+  },
+  "devDependencies": {
+    "babel-core": "^6.18.2",
+    "babel-loader": "^6.2.0",
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-es2015-native-modules": "^6.9.4",
+    "babel-preset-node6": "^11.0.0",
+    "babel-preset-react": "^6.3.13",
+    "babel-register": "^6.18.0",
+    "chai": "^3.5.0",
+    "copyfiles": "^0.2.2",
+    "cross-env": "^3.1.3",
+    "json-loader": "^0.5.4",
+    "mocha": "^3.2.0",
+    "piping": "^1.0.0-rc.4",
+    "webpack": "^2.1.0-beta.27"
+  }
+}

src/client/LocalStorage.js

@@ -0,0 +1,76 @@
+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
+const stateName = "dubdiff_state"
+
+//return a new object with the given keys, each assigned to the cooresponding value
+//from the given object
+const copyKeys = (obj, keys) => keys.reduce((acc, p)=>{acc[p]=obj[p]; return acc}, {})
+
+//utility method for retrieving json data from the local store
+function getLocalState (keys) {
+  if (localStorage.getItem(stateName)) {
+    const localState = JSON.parse(localStorage.getItem(stateName))
+    return copyKeys(localState, keys)
+  }
+  else
+    return copyKeys({}, keys)
+} 
+
+//utility method for writing json data to the local store
+function setLocalState (state, keys) {
+  let toSave = copyKeys(state, keys)
+  localStorage.setItem(stateName, JSON.stringify(toSave))
+}
+
+
+const mapStateToProps = (state) => ({
+  input: state.input,
+  //the loading/empty/clean state
+})
+
+  
+const mapDispatchToProps = dispatch => ({
+  onChangeOriginal: (text) => dispatch(Actions.updateOriginalInput(text)),
+  onChangeFinal: (text) => dispatch(Actions.updateFinalInput(text)),
+})
+
+
+class LocalStorage extends React.Component {
+  
+  //load the state from the local storage
+  componentDidMount() {
+    //only if the status is EMPTY
+/*
+    if (this.props.input.original=='' && this.props.input.final == '') {
+      const localState = getLocalState(['input'])
+      if (localState.input && localState.input.original)
+        this.props.onChangeOriginal(localState.input.original)
+      if (localState.input && localState.input.final) 
+        this.props.onChangeFinal(localState.input.final)
+    }
+*/
+  }
+  //save the state to local storage
+  componentWillReceiveProps(nextProps) {
+    setLocalState(nextProps, ['input'])
+  }
+
+  render () { 
+    return this.props.children
+  } 
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(LocalStorage)
+

src/client/index.js

@@ -0,0 +1,50 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+import * as Redux from 'redux'
+
+import {Provider} from 'react-redux'
+
+//import  createBrowserHistory  from 'history/lib/createBrowserHistory'
+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 * as Actions from '../common/actions' 
+
+import LocalStorage from './LocalStorage'
+
+
+
+//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,
+  Redux.compose(
+    Redux.applyMiddleware(thunk),
+    window.devToolsExtension ? window.devToolsExtension() : f => f
+  )
+)
+
+
+
+function render() {
+    ReactDOM.render(
+    <Provider store={store}>
+      <LocalStorage >
+        <Router history={browserHistory}>
+            {routes}
+        </Router>
+      </LocalStorage>
+    </Provider>
+  , document.getElementById('root'))
+}
+
+render()
+  

src/common/actions.js

@@ -0,0 +1,155 @@
+import fetch from 'isomorphic-fetch'
+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
+//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})
+    if (getState().input.original.length>0)
+      dispatch({type: 'STATUS_SET', data:Status.DIRTY})
+    else 
+      dispatch({type: 'STATUS_SET', data:Status.EMPTY})
+  }
+
+export const updateFinalInput = (text) => 
+  (dispatch, getState) => {
+    dispatch({ type: 'UPDATE_FINAL_INPUT', data:text})
+    if (getState().input.final.length>0)
+      dispatch({type: 'STATUS_SET', data:Status.DIRTY})
+    else 
+      dispatch({type: 'STATUS_SET', data:Status.EMPTY})
+  }
+
+export const clearInput = () =>
+  (dispatch) => {
+    dispatch({type: 'CLEAR_INPUT'})
+    dispatch({type: 'STATUS_SET', data:Status.EMPTY})
+  }
+
+export const setPlaintextFormat = () => ({ type: 'SET_PLAINTEXT_FORMAT'})
+export const setMarkdownFormat = () => ({ type: 'SET_MARKDOWN_FORMAT'})
+export const showOriginal = () => ({ type: 'SHOW_ORIGINAL'})
+export const showFinal = () => ({ type: 'SHOW_FINAL'})
+export const showDifference = () => ({ type: 'SHOW_DIFFERENCE'})
+
+
+//if the input is dirty, saves it to the server
+//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
+    //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
+
+    //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
+    const comparePath = `/${id}`
+    browserHistory.replace(comparePath)
+  }
+
+
+//clear the input and return to the edit page
+export const reset = () => 
+  (dispatch, getState) => {
+    dispatch(clearInput())
+    browserHistory.push('/')
+  }
+
+
+//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
+//should this method ensure that the initial state is valid? ('DIRTY')
+export const save = () =>
+  (dispatch, getState) => {
+
+    //generate an id
+    const id = uuid()
+
+    //set waiting state
+    dispatch( {type: 'STATUS_SET', data:Status.SAVING})
+
+    const endpointUri = `/api/compare/${id}`
+    const fetchOptions = {
+      method: 'POST',
+      body: JSON.stringify({
+        a: getState().input.original,
+        b: getState().input.final
+      }),
+      headers: {
+        "Content-Type": "application/json"
+      },
+    }
+
+
+    //dispatch post request
+    fetch(endpointUri, fetchOptions)
+      .then(response => {
+        if (response.ok)
+          dispatch({type: 'STATUS_SET', data: Status.CLEAN})
+        else {
+          response.text().then( (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
+        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 id;
+  }
+
+/*
+const load = (id) =>
+  (dispatch, getState) => {
+
+    //set waiting state
+    dispatch( {type: 'SAVE_STATUS_WAITING'})
+
+    const endpointUri = `/api/compare/${id}`
+    const fetchOptions = {
+      method: 'GET'
+    }
+
+
+    //dispatch post request
+    fetch(endpointUri, fetchOptions)
+      .then(response => response.json())
+      .then(json => {
+        dispatch( {type: 'UPDATE_ORIGINAL_INPUT', data:json.a})
+        dispatch( {type: 'UPDATE_FINAL_INPUT', data:json.b})
+        dispatch( {type: 'LOAD_STATUS_LOADED'})
+      })
+      .catch(error => {
+        dispatch( {type: 'LOAD_STATUS_FAILED', error})
+      })
+
+    //return the id after the request has been sent
+    return id;
+
+  }
+
+export const loadIfNeeded = (id) =>
+  (dispatch, getState) => {
+    if
+  }
+*/

src/common/components/Compare.js

@@ -0,0 +1,104 @@
+import React from 'react'
+import {connect} from 'react-redux'
+
+import {Segment, Grid, Form} from 'semantic-ui-react'
+
+import * as Actions from '../actions'
+import * as Selectors from '../selectors'
+
+import Header from './Header'
+import Footer from './Footer'
+import CompareControls from './CompareControls'
+
+import ShowPlaintext from './ShowPlaintext'
+import ShowMarkdown from './ShowMarkdown'
+
+const mapStateToProps = (state) => ({
+  isMarkdownFormat: Selectors.isMarkdownFormat(state),
+  isShowOriginal: Selectors.isShowOriginal(state), 
+  isShowFinal: Selectors.isShowFinal(state),
+  isShowDifference: Selectors.isShowDifference(state),
+  safeInput: Selectors.safeInput(state), 
+  diff: Selectors.diff(state)
+})
+
+const mapDispatchToProps = dispatch => ({
+  //loadIfNeeded: (id) => dispatch(Actions.loadIfNeeded())
+})
+
+ 
+
+class Compare extends React.Component {
+  /*
+  componentDidMount() {
+    this.props.loadIfNeeded(this.props.routeParams.compareId)
+  }
+  */
+
+  render() {
+    return (
+      <div>
+        <Header/>
+
+        <Segment basic padded>
+          <Grid stackable columns={2}>
+            <Grid.Column width="3">
+              <CompareControls/>
+            </Grid.Column>
+            <Grid.Column width="13">
+              <Segment>
+                {
+                  (!this.props.isMarkdownFormat && this.props.isShowDifference) ? 
+                      <ShowPlaintext diff={this.props.diff}>{this.props.diff}</ShowPlaintext>: 
+                  (this.props.isMarkdownFormat && this.props.isShowDifference) ?
+                      <ShowMarkdown diff={this.props.diff}>{this.props.diff}</ShowMarkdown>: 
+                  (!this.props.isMarkdownFormat && !this.props.isShowDifference) ?
+                      <ShowPlaintext 
+                        text={this.props.isShowOriginal? this.props.safeInput.original: this.props.safeInput.final} 
+                      /> :
+                  (this.props.isMarkdownFormat && !this.props.isShowDifference) ?
+                      <ShowMarkdown 
+                        text={this.props.isShowOriginal? this.props.safeInput.original: this.props.safeInput.final} 
+                      /> :
+                  null
+                }
+              </Segment>
+            </Grid.Column>
+          </Grid>
+        </Segment>
+
+        <Footer/>
+      </div>
+    )
+  }
+}
+
+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"> 
+        </div>
+      </div>
+      <div ng-show="isShowWdiff" class="col-md-10 col-sm-12 content-well">
+        <div btf-markdown="wdiff" class="wdiff">
+        </div>
+      </div>
+      <div ng-show="isShowAfter" class="col-md-10 col-sm-12 content-well">
+        <div btf-markdown="after" class="after">
+        </div>
+      </div>
+    </div>
+    <div ng-if="!isMarkdownFormat">
+      <div ng-show="isShowBefore" class="col-md-10 col-sm-12 content-well">
+        <div ng-bind-html="before" class="content-pre before"></div>
+      </div>
+      <div ng-show="isShowWdiff" class="col-md-10 col-sm-12 content-well">
+        <div ng-bind-html="wdiff" class="content-pre wdiff"></div>
+      </div>
+      <div ng-show="isShowAfter" class="col-md-10 col-sm-12 content-well">
+        <div ng-bind-html="after" class="content-pre after"></div>
+      </div>
+    </div>
+*/

src/common/components/CompareControls.js

@@ -0,0 +1,62 @@
+import React from 'react'
+import {connect} from 'react-redux'
+import {Link} from 'react-router'
+
+import {Button, Icon, Segment} from 'semantic-ui-react'
+
+import * as Actions from '../actions'
+import * as Selectors from '../selectors'
+
+const mapStateToProps = (state) => ({
+  isMarkdownFormat: Selectors.isMarkdownFormat(state),
+  isShowOriginal: Selectors.isShowOriginal(state),
+  isShowFinal: Selectors.isShowFinal(state),
+  isShowDifference: Selectors.isShowDifference(state),
+})
+
+  
+const mapDispatchToProps = dispatch => ({
+  onSetPlaintextFormat: () => dispatch(Actions.setPlaintextFormat()),
+  onSetMarkdownFormat: () => dispatch(Actions.setMarkdownFormat()), 
+  onShowOriginal: () => dispatch(Actions.showOriginal()),
+  onShowFinal: () => dispatch(Actions.showFinal()),
+  onShowDifference: () => dispatch(Actions.showDifference()),
+  onEdit: () => dispatch(Actions.edit())
+})
+
+class CompareControls extends React.Component {
+
+  onClickMarkdownFormat() {
+    if (this.props.isMarkdownFormat)
+      this.props.onSetPlaintextFormat()
+    else
+      this.props.onSetMarkdownFormat()
+  }
+
+
+  render() {
+    return (
+      <Segment.Group>
+        <Segment>
+          <Button fluid  onClick={this.props.onEdit}>Edit</Button>
+        </Segment>
+
+        <Segment >
+          <Button fluid onClick={this.props.onShowOriginal} active={this.props.isShowOriginal}>Original</Button>
+          <Button fluid onClick={this.props.onShowFinal} active={this.props.isShowFinal}>Final</Button>
+          <Button fluid onClick={this.props.onShowDifference} active={this.props.isShowDifference}>Difference</Button>
+        </Segment>
+
+        <Segment >
+          <Button fluid active={this.props.isMarkdownFormat} type="submit" onClick={this.onClickMarkdownFormat.bind(this)}>
+            {this.props.isMarkdownFormat ? <Icon name="checkmark"/> : <span/>}
+            &nbsp;As Markdown
+          </Button>
+        </Segment>
+      </Segment.Group>
+    )
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(CompareControls)
+

src/common/components/Footer.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+import {Segment} from 'semantic-ui-react'
+
+const Footer = (props) => (
+  <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>
+  </Segment>
+)
+
+export default Footer

src/common/components/Header.js

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

src/common/components/Main.js

@@ -0,0 +1,72 @@
+
+import React from 'react'
+import {connect} from 'react-redux'
+
+import {Segment, Grid, Form} from 'semantic-ui-react'
+
+import * as Actions from '../actions'
+import * as Selectors from '../selectors'
+
+import Header from './Header'
+import Footer from './Footer'
+import MainControls from './MainControls'
+
+const mapStateToProps = (state) => ({
+  input: state.input,
+  safeInput: Selectors.safeInput(state),
+})
+
+  
+const mapDispatchToProps = dispatch => ({
+  onChangeOriginal: (text) => dispatch(Actions.updateOriginalInput(text)),
+  onChangeFinal: (text) => dispatch(Actions.updateFinalInput(text)),
+})
+
+
+class Main extends React.Component {
+  
+  constructor() {
+    super()
+  }
+
+  render () { 
+    return (
+      <div>
+        <Header/>
+
+        <Segment basic padded>
+          <Grid stackable columns={3}>
+            <Grid.Column width="3">
+              <MainControls/> 
+            </Grid.Column>
+            <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>
+                </Form.Field>
+              </Form>
+            </Grid.Column>
+            <Grid.Column width="6">
+                <Form>
+                <Form.Field>
+                  <label>Final</label>
+                  <textarea value={this.props.input.final} onChange={event => this.props.onChangeFinal(event.target.value)}></textarea>
+                </Form.Field>
+              </Form>
+            </Grid.Column>
+          </Grid>
+        </Segment>
+
+
+        <Footer/>
+      </div>
+
+
+
+    )
+  } 
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Main)
+

src/common/components/MainControls.js

@@ -0,0 +1,55 @@
+import React from 'react'
+import {connect} from 'react-redux'
+
+import {Button, Icon, Segment} from 'semantic-ui-react'
+
+import * as Actions from '../actions'
+import * as Selectors from '../selectors'
+
+const mapStateToProps = (state) => ({
+  format: state.format, 
+  isMarkdownFormat: Selectors.isMarkdownFormat(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
+  onCompare: () => dispatch(Actions.compare()) 
+})
+
+class MainControls extends React.Component {
+
+  onClickMarkdownFormat() {
+    if (this.props.isMarkdownFormat)
+      this.props.onSetPlaintextFormat()
+    else
+      this.props.onSetMarkdownFormat()
+  }
+
+
+  render() {
+    return (
+      <Segment.Group>
+        <Segment >
+          <Button fluid onClick={this.props.onCompare}>Compare</Button>
+        </Segment>
+
+        <Segment >
+          <Button fluid active={this.props.isMarkdownFormat} type="submit" onClick={this.onClickMarkdownFormat.bind(this)}>
+            {this.props.isMarkdownFormat ? <Icon name="checkmark"/> : <span/>}
+            &nbsp;As Markdown
+          </Button>
+        </Segment>
+      </Segment.Group>
+    )
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(MainControls)
+
+/*
+<a type="button" onClick={this.onClickCompare.bind(this)} className="btn btn-block btn-primary">compare</a>*/

src/common/components/SaveStatus.js

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

src/common/components/ShowMarkdown.js

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

src/common/components/ShowPlaintext.js

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

src/common/constants.js

@@ -0,0 +1,24 @@
+export const Format = {
+  PLAINTEXT: 'PLAINTEXT',
+  MARKDOWN: 'MARKDOWN'
+}
+
+export const Show = {
+  ORIGINAL:'ORIGINAL',
+  FINAL:'FINAL',
+  DIFFERENCE:'DIFFERENCE'
+}
+
+export const Status = {
+  INIT: 'INIT',
+  LOADING: 'LOADING',
+  EMPTY: 'EMPTY',
+  CLEAN: 'CLEAN',
+  DIRTY: 'DIRTY',
+  SAVING: 'SAVING'
+}
+
+export const StatusError = {
+  LOAD_ERROR: 'LOAD_ERROR',
+  SAVE_ERROR: 'SAVE_ERROR'
+}

src/common/reducers.js

@@ -0,0 +1,75 @@
+import {Format, Show, Status, StatusError} from './constants'
+
+
+export function input (state, action ) {
+  switch (action.type) {
+    case 'UPDATE_ORIGINAL_INPUT':
+      return Object.assign({}, state, {original:action.data})
+    case 'UPDATE_FINAL_INPUT':
+      return Object.assign({}, state, {final:action.data})
+    case 'CLEAR_INPUT':
+        return {original:'', final:''}
+    default:
+      return state || {original:'', final:''}
+  }
+}
+
+export function format (state, action) {
+  switch (action.type) {
+    case 'SET_PLAINTEXT_FORMAT':
+      return Format.PLAINTEXT
+    case 'SET_MARKDOWN_FORMAT':
+      return Format.MARKDOWN
+    default:
+      return state || Format.PLAINTEXT
+  }
+} 
+
+
+export function show (state, action) {
+  switch (action.type) {
+    case 'SHOW_ORIGINAL':
+      return Show.ORIGINAL
+    case 'SHOW_FINAL':
+      return Show.FINAL
+    case 'SHOW_DIFFERENCE':
+      return Show.DIFFERENCE
+    default:
+      return state || Show.DIFFERENCE
+  }
+}
+
+/*
+export function saveStatus (state, action) {
+  switch (action.type) {
+    case 'SAVE_STATUS_DIRTY':
+      return {dirty: true}
+    case 'SAVE_STATUS_EMPTY':
+      return {dirty: false, empty: true}
+    case 'SAVE_STATUS_SAVED':
+      return {dirty: false, saved: true}
+    case 'SAVE_STATUS_FAILED' :
+      return Object.assign({}, state, {waiting: false, failed: true, error: action.error})
+    case 'SAVE_STATUS_WAITING' :
+      return Object.assign({}, state, {waiting: true, failed: false, error: null})
+    default:
+      return state || {empty: true, dirty:false}
+  }
+}
+*/
+
+//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
+  const isValidStatus = (type) => Status[type] == type
+  const isValidError = (type) => StatusError[type] == type
+
+  //the error is cleared when status changes
+  if (action.type == 'STATUS_SET' && isValidStatus(action.data))
+    return {type:action.data, error: null, hasError: false, errorType: null}
+  //the error is set in addition to the status
+  else if (action.type == 'STATUS_SET_ERROR' && isValidError(action.data))
+    return Object.assign({}, state, {error: action.error, hasError: true, errorType:action.data})
+  else
+    return state || {type:Status.EMPTY, hasError: false, error:null}
+}

src/common/routes.js

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

src/common/selectors.js

@@ -0,0 +1,68 @@
+//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 
+
+export const safeInput = createSelector(
+  [input],
+  (input) => {
+    //!!! sanitize the input here and return
+    return input
+  }
+)
+
+export const isMarkdownFormat = createSelector(
+  [format],
+  (format) => {
+    return format == Format.MARKDOWN
+  }
+)
+
+const isShow = (type) => createSelector(
+  [show],
+  (show) => {
+    return show == type
+  }
+)
+
+export const isShowOriginal = isShow(Show.ORIGINAL)
+export const isShowFinal = isShow(Show.FINAL)
+export const isShowDifference= isShow(Show.DIFFERENCE)
+
+
+export const diff = createSelector(
+  [format, safeInput],
+  (format, safeInput) => {
+    return Dubdiff.plaintextDiff(safeInput.original, safeInput.final)
+/*
+    let diff = JsDiff.diffWords (input.original.replace(/ /g, ' '), input.final.replace(/ /g, ' '))
+    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
+  ---
+
+  diffHtml(parentOriginal, parentFinal) {
+    create stringOriginal, stringFinal consisting of 
+  }
+  */

src/common/util/EditorsDiff.js

@@ -0,0 +1,63 @@
+
+import {Diff} from 'diff'
+
+// EditorsDiff is a custom Diff implementation from the jsdiff library
+// It allows diffing by phrases. Whitespace is ignored for the purpose of comparison,
+// but is preserved and included in the output.
+
+const TOKEN_BOUNDARYS = /([\s,.:])/
+    
+class EditorsDiff extends Diff {
+  constructor (tokenBoundaries=TOKEN_BOUNDARYS) {
+    super()
+    this.tokenBoundaries = tokenBoundaries
+  }
+
+  equals (left, right) {
+    return (
+      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
+  tokenize (value) {
+    let tokens = value.split(this.tokenBoundaries)
+    let annotatedTokens = [] 
+    tokens.forEach( token => {
+      if (isSpace(token)) {
+        if (annotatedTokens.length == 0)
+          annotatedTokens.push({string:'', whitespace:[]})
+
+        let last = annotatedTokens[annotatedTokens.length-1]
+        last.whitespace.push(token)
+      }
+      else {
+        annotatedTokens.push({string:token, whitespace:[]})
+      }
+    })
+
+    //this final empty token is necessary for the jsdiff diffing engine to work properly
+    annotatedTokens.push({string:'', whitespace:[]})
+    return annotatedTokens
+  }
+  join(annotatedTokens) {
+    let tokens = []
+    annotatedTokens.forEach(annotatedToken => {
+      tokens.push(annotatedToken.string)
+      annotatedToken.whitespace.forEach(item => {
+        tokens.push(item)
+      })
+    })
+    return tokens.join('')
+  }
+} 
+
+
+
+
+export default EditorsDiff
+
+const isSpace = str => /[ ]+/.test(str)

src/common/util/dubdiff.js

@@ -0,0 +1,227 @@
+import * as JsDiff from 'diff'
+import EditorsDiff from './EditorsDiff'
+
+let plaintextDiffer = new EditorsDiff()
+let markdownDiffer = new EditorsDiff(/([\s,.:]|[*\[\]\(\)])/)
+
+//returns a comparison of the texts as plaintext
+export function plaintextDiff(original, final) {
+    let diff = plaintextDiffer.diff(original, final)
+    return diff
+}
+
+//returns a comparison of the texts as markdown
+export function markdownDiff(original, final) {
+    let diff = markdownDiffer.diff(original, final)
+    diff = rewriteMarkdownDiff(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:''}}) {
+
+  return diff.map(({added, removed, value}) => {
+
+      let {start,end} = added ? tags.added : (removed ? tags.removed : tags.same)
+
+      let string = value
+      if (Array.isArray(value))
+        string = value.join('')
+
+      return start+string+end
+  }).join('')
+}
+
+export function diffToHtml(diff) {
+  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:
+// 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. 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:
+// 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) {  
+  //apply transformation rules
+  let transformedDiff = diff
+  transformedDiff= applyTransformationRule1(transformedDiff)
+  transformedDiff= applyTransformationRule2(transformedDiff)
+  return transformedDiff
+}
+
+//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 applyTransformationRule1(diff) {
+  let transformedDiff = []
+
+  const B_ADDED='added', B_REMOVED='removed', B_SAME='same'
+  let previousBlockType = null 
+  let currentBlockType = null
+  let previousBlockWasMultiline = false
+  let currentBlockIsMultiline = false
+
+  //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:
+    // the previous block was a del and had multiple lines
+    // the current block is an ins
+    if (previousBlockType == B_REMOVED && currentBlockType == B_ADDED && previousBlockWasMultiline) {
+
+      //split the first line from the current block
+      let currentBlockSplit = splitMultilineDiffBlock(currentBlock)
+
+      //pop the previous diff entry
+      let previousBlock = transformedDiff.pop()
+
+      //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++) {
+        if (i<previousBlockSplit.length)
+          transformedDiff.push(previousBlockSplit[i])
+        if (i<currentBlockSplit.length)
+          transformedDiff.push(currentBlockSplit[i])
+      }
+    }
+    else {
+      //otherwise, we just add the current block to the transformed list
+      transformedDiff.push(currentBlock)
+    }
+  })
+
+  return transformedDiff
+}
+
+
+// matches markdown prefixes that affect the formatting of the whole subsequent line
+  // ^                  - start of line
+  // ([ \t]*\>)*       - blockquotes (possibly nested)
+  // (
+  //  ([ \t]*#*)      - headers
+  //  |([ \t]+[\*\+-])     - unordered lists
+  //  |([ \t]+[0-9]+\.)  - numeric lists
+  // )?
+  // [ \t]*             - trailing whitespace
+const MARKDOWN_PREFIX =  /^([ \t]*\>)*(([ \t]*#*)|([ \t]*[\*\+-])|([ \t]*[\d]+\.))?[ \t]*/
+
+//matches strings that end with a newline followed by some whitespace
+const NEWLINE_SUFFIX = /\n\s*$/
+
+// 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 applyTransformationRule2(diff) {
+  let transformedDiff = []
+
+  let isNewline = true
+  let newlineString = '\n'
+
+  //iterate the input tokens to create the intermediate representation
+  diff.forEach((currentBlock) => {
+
+    if (isNewline && (currentBlock.added || currentBlock.removed) ) {
+      let match = currentBlock.value.match(MARKDOWN_PREFIX)
+      if (match) {
+        let preBlock = {value:match[0]}
+        let postBlock = {added:currentBlock.added, removed:currentBlock.removed, value:currentBlock.value.substring(match[0].length)}
+        
+        if (currentBlock.added) {
+          let newlineBlock = {value: newlineString}
+          transformedDiff.push(newlineBlock)
+        }
+        transformedDiff.push(preBlock)
+        transformedDiff.push(postBlock)
+      }
+      else {
+        transformedDiff.push(currentBlock)
+      }
+    }
+    else {
+      transformedDiff.push(currentBlock)
+      isNewline = NEWLINE_SUFFIX.test(currentBlock.value)
+      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 an array of diff blocks that have the same added, removed fields as the given one
+//but with the string split by newlines
+//if the diff block has no newlines, an array containing only that diff will be returned
+//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
+//if the diff block begins with a newline, the returned array will begin with an empty diff
+function splitMultilineDiffBlock({added, removed, value}) {
+  //find the indices of the diff block that coorespond to newlines
+  const splits = indicesOf(value, c => (c=='\n') )
+
+  splits.push(value.length)
+
+  //create a range from each index
+  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

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

src/server/comparison.js

@@ -0,0 +1,92 @@
+import express from 'express'
+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
+function showComparison(req, res) {
+  const id = req.params.id
+  return readRecord(res, id)
+}
+
+// Creates a new comparison
+function createComparison(req, res) {
+  //generate a new id
+  const id = uuid() 
+  const {a,b} = req.body
+
+  return writeRecord(res, id, {a,b,id})  
+}
+
+// Creates a new comparison
+function createComparisonWithId(req, res) {
+  //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
+function readRecord(res, id, data) {
+  //generate a filename
+  const filename = fnData(id)
+
+  //check if that file exists
+  fs.exists(filename, function (exists) {
+    //if the file does not exist, return a 404
+    if (!exists)  return res.status(404).send(`Data id ${id} not found.`)
+
+    //otherwise, read the file as JSON
+    jf.readFile(filename, function(err, data) {
+      if(err) { return handleError(res, err) }
+
+      //and return
+      return res.json(data)
+    })
+  })
+}
+
+//writes the record to the database, if it doesn't exist
+function writeRecord(res, id, data) {
+
+  //look up its filename
+  var filename = fnData(id)
+
+  //need to test that the file does not exist
+
+  //check if that file exists
+  fs.exists(filename, (exists) => {
+    //if the file already exists, return a 405
+    if (exists)  return res.status(405).send(`Data id ${id} is already in use.`)
+
+
+    //and write it to the filesystem
+    jf.writeFile(filename, data, (err) => (
+      err ?
+        handleError(res, err) :
+        //if successful, return the comparison object
+        res.status(201).json(data)
+    ))
+  })
+}
+
+module.exports = router
+
+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

@@ -0,0 +1,90 @@
+import express from 'express'
+import path from 'path'
+import bodyParser from 'body-parser'
+import * as Redux from 'redux'
+
+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'
+
+const PORT = 8080
+
+const app = express()
+
+//serve the dist static files at /dist
+app.use('/dist', express.static(path.join(__dirname, '..', '..', 'dist')))
+ 
+//serve the comparison api at /api/compare
+app.use(bodyParser.json())
+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
+app.route('/:comparisonId')
+  .get((req, res) => {
+
+
+    const store = createSessionStore()
+    const endpointUri = `http://localhost:${PORT}/api/compare/${req.params.comparisonId}`
+
+    //fetch the comparison
+    fetch(endpointUri)
+    .then(response => {
+      if (response.ok)
+        return response.json()
+      else {
+        response.text().then( () => {
+          const error = {message:`${response.status}: ${response.statusText}`}
+          initAndRenderError(error, store, req, res)
+        })
+      }
+    })
+    .then( ({a,b}) => {
+      initAndRenderComparison({a,b}, store, req, res)
+    })
+    .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 8080.')
+})
+
+
+//creates the session store
+function createSessionStore() {
+  //create the redux store
+  return Redux.createStore(
+    Redux.combineReducers(reducers)
+  )
+}
+
+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) {
+  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

@@ -0,0 +1,89 @@
+import React from 'react'
+import { renderToString } from 'react-dom/server'
+import { Provider } from 'react-redux'
+import { match, RouterContext } from 'react-router'
+
+import routes from '../common/routes.js'
+
+
+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(renderError('Routing Error:', error.message))
+    } else if (redirectLocation) {
+      res.redirect(302, redirectLocation.pathname + redirectLocation.search)
+    } else if (renderProps) {
+      // Render the component to a string
+      try {
+        const html = renderToString(
+          <Provider store={store}>
+            <RouterContext {...renderProps} />    
+          </Provider>
+        )
+
+        // Grab the initial state from our Redux store
+        const initialState = store.getState()
+        // and send
+        res.status(200).send(appTemplate(html, initialState))
+      }
+      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.`))
+    }
+  })
+}
+
+const pageTemplate = (body) => {
+    return `
+      <!doctype html>
+      <html>
+        <head>
+          <title>Dubdiff</title>
+
+          <!-- CSS -->
+          <link rel="stylesheet" href="dist/semantic.min.css"/>
+          <link rel="stylesheet" href="dist/main.css"/> 
+
+          <!-- Favicon -->
+          <link rel="icon" type="image/png" sizes="32x32" href="dist/favicon-32x32.png">
+          <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}
+        </body>
+      </html>
+    `
+}
+
+function errorTemplate(title, message, exception) {
+  return pageTemplate(`
+    <h1>${title}</h1>
+    <p>${message}</p>
+    ${exception ? 
+      `<pre>${exception.toString()}</pre>`:
+      ``
+    }
+  `)
+}
+
+
+
+function appTemplate(html, initialState) {
+    return pageTemplate(`
+      <div id="root">${html}</div>
+
+      <script>
+        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

@@ -0,0 +1,74 @@
+/*eslint-env node, mocha */
+/*global expect */
+/*eslint no-console: 0*/
+'use strict';
+
+import chai from 'chai'
+
+import {markdownDiff, diffToString} from '../src/common/util/dubdiff'
+
+let diff = (a,b) => diffToString(markdownDiff(a,b))
+
+const expect = chai.expect 
+
+describe('dubdiff', () => {
+  let db;  
+
+  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', ()=>{  
+    expect(diff(
+      'Gonna delete a word.',
+      'Gonna delete word.'
+    )).to.equal('Gonna delete [-a -]word.')
+  })
+
+  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', ()=>{
+    expect(diff(
+`# Title
+other`,
+`# Subtitle`
+    )).to.equal('# [-Title-]{+Subtitle+}[-\nother-]')
+  })
+
+  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',  () => {
+    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',  () => {
+    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',  () => {
+    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+}.')
+  })
+})

test/dubdiffPlaintext.js

@@ -0,0 +1,69 @@
+/*eslint-env node, mocha */
+/*global expect */
+/*eslint no-console: 0*/
+'use strict';
+
+import chai from 'chai'
+
+import {plaintextDiff, diffToString} from '../src/common/util/dubdiff'
+
+let diff = (a,b) => diffToString(plaintextDiff(a,b))
+
+const expect = chai.expect 
+
+describe('dubdiff', () => {
+
+  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', ()=>{  
+    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', ()=>{  
+    expect(diff(
+      'Gonna delete a word.',
+      'Gonna delete word.'
+    )).to.equal('Gonna delete [-a -]word.')
+  })
+  it('diffs with word insertion', ()=>{  
+    expect(diff(
+      'Gonna add word.',
+      'Gonna add a word.'
+    )).to.equal('Gonna add {+a +}word.')
+  })
+  it('diffs accross newline without weird spaces', () => {
+    expect(diff(
+      'This is a flawed\ncomment',
+      'This is a corrected\nitem'
+    )).to.equal('This is a [-flawed-]{+corrected+}\n[-comment-]{+item+}')
+  })
+  it('doesn\'t add spaces after newline', () => {
+    expect(diff(
+      '\nhere',
+      '\nhere'
+    )).to.equal('\nhere')
+  })
+  it('doesn\'t add spaces before newline', () => {
+    expect(diff(
+      'there\n',
+      'there\n'
+    )).to.equal('there\n')
+  })
+  it('treats punctuation separately', () => {
+    expect(diff(
+      'Hello world.',
+      'Hello, world.'
+    )).to.equal('Hello{+, +}world.')
+  })
+})

webpack.config.js

@@ -0,0 +1,36 @@
+let config = {
+  cache: true,
+  entry: './src/client/index.js',
+  output: {
+    filename: './dist/browser-bundle.js'
+  },
+  target: 'web',
+
+  module: {
+    loaders: [
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        query: {
+          presets: ['es2015-native-modules', 'react'],
+          compact: "true"
+        }
+      },
+      { test: /\.json$/, loader: "json-loader" },
+    ]
+  },
+  node: {
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty'
+  }
+};
+
+if (process.env.NODE_ENV == "production") {
+  config.devtool = "cheap-module-source-map"
+}
+else {
+  config.devtool = "eval"
+}
+
+module.exports = config;