diff --git a/app/components/Admin/Blogpost.jsx b/app/components/Admin/Blogpost.jsx
index 91f82743023fe2e7a0f6bcea38b711d9f3930a7a..8de2022e790d44b8f073f694ae67d28406b2c1ae 100644
--- a/app/components/Admin/Blogpost.jsx
+++ b/app/components/Admin/Blogpost.jsx
@@ -3,7 +3,7 @@ import { Button, Row, Col } from 'react-bootstrap'
import { LinkContainer } from 'react-router-bootstrap'
import TextInput from './TextInput'
-import '../../scss/components/_blogpost'
+import '../../scss/components/Admin/blogpost'
export default class Blogpost extends React.Component {
constructor (props) {
diff --git a/app/components/Admin/SubstanceEditor.jsx b/app/components/Admin/SubstanceEditor.jsx
deleted file mode 100644
index f89d4594756a52cf96e629457a4bc8334ad70667..0000000000000000000000000000000000000000
--- a/app/components/Admin/SubstanceEditor.jsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import React from 'react'
-import LensWriter from 'lens/ReactLensWriter'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-import * as Actions from '../../actions'
-import _ from 'lodash'
-
-// Styles
-import '../../../node_modules/lens/styles/lens-writer.scss'
-import '../../scss/components/_substanceEditor'
-
-export default class SubstanceEditor extends React.Component {
- constructor (props) {
- super(props)
- this._onSave = this._onSave.bind(this)
- }
-
- _onSave (content, callback) {
- let fragment = Object.assign(this.props.fragment, {
- source: content,
- presentation: content
- })
- this.props.actions.updateFragment(fragment)
- callback(null, content)
- }
-
- _onFileUpload (file, callback) {
- return callback(null, null)
- }
-
- render () {
- let editor
- let content
- if (this.props.fragment.source === '') {
- content = '<article xmlns="http://substance.io/science-article/0.1.0" lang="en"><metadata><title>' +
- this.props.fragment.title + '</title><abstract>hello</abstract></metadata><resources></resources>' +
- '<body><p id="p1">test</p></body></article>'
- } else {
- content = this.props.fragment.source
- }
-
- if (this.props.fragment) {
- editor = <LensWriter
- content={content}
- onSave={this._onSave}
- onFileUpload={this._onFileUpload}
- />
- } else {
- editor = <p>Loading</p>
- }
-
- return (
- <div>
- {editor}
- </div>
- )
- }
-}
-
-SubstanceEditor.propTypes = {
- fragment: React.PropTypes.object,
- actions: React.PropTypes.object
-}
-
-function mapStateToProps (state) {
- console.log(state)
- return {
- fragment: _.find(state.fragments, function (f) {
- return f._id === state.router.params.id
- })
- }
-}
-
-function mapDispatchToProps (dispatch) {
- return {
- actions: bindActionCreators(Actions, dispatch)
- }
-}
-
-export default connect(
- mapStateToProps,
- mapDispatchToProps
-)(SubstanceEditor)
diff --git a/app/components/BlogRoll/Blogpost.jsx b/app/components/BlogRoll/Blogpost.jsx
index 80f069958b94ab23ac0ece314f189ea8022eabcc..1b042f2808d5dd23580739b954f463dc2f5bc308 100644
--- a/app/components/BlogRoll/Blogpost.jsx
+++ b/app/components/BlogRoll/Blogpost.jsx
@@ -2,8 +2,6 @@ import React from 'react'
import { Row, Col } from 'react-bootstrap'
import { LinkContainer } from 'react-router-bootstrap'
-import '../../scss/components/_blogpost'
-
export default class Blogpost extends React.Component {
render () {
const { blogpost } = this.props
diff --git a/app/components/BlogRoll/LensBlogpostSummary.jsx b/app/components/BlogRoll/LensBlogpostSummary.jsx
deleted file mode 100644
index d5e4c6ae3d4afe518553f5ca6f90ed79a281b5a2..0000000000000000000000000000000000000000
--- a/app/components/BlogRoll/LensBlogpostSummary.jsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react'
-import '../../scss/components/_blogpost'
-import { Row, Col } from 'react-bootstrap'
-import { LinkContainer } from 'react-router-bootstrap'
-
-export default class LensBlogpostSummary extends React.Component {
- render () {
- const { blogpost } = this.props
- let summary = blogpost.presentation.match(/<abstract>(.*?)<\/abstract>/)
- summary = summary[1]
-
- return (
- <div className='blogpost'>
- <Row key={blogpost._id}>
- <Col xs={12} md={8} mdOffset={2}>
- <h2>{blogpost.title}</h2>
- <div dangerouslySetInnerHTML={{__html: summary}}></div>
- <LinkContainer to={`/${blogpost._id}`}><a>Read more</a></LinkContainer>
- </Col>
- </Row>
- </div>
- )
- }
-}
-
-LensBlogpostSummary.propTypes = {
- blogpost: React.PropTypes.object
-}
diff --git a/app/containers/BlogManager.jsx b/app/containers/Admin/BlogManager.jsx
similarity index 83%
rename from app/containers/BlogManager.jsx
rename to app/containers/Admin/BlogManager.jsx
index d666048074a1ed840c7e9b9a0b659bf3b1675e19..c6497c1a4bbc8414a4c28360f48fd5e6805fbf65 100644
--- a/app/containers/BlogManager.jsx
+++ b/app/containers/Admin/BlogManager.jsx
@@ -1,11 +1,11 @@
import React from 'react'
import { Grid } from 'react-bootstrap'
-import BlogpostList from '../components/Admin/BlogpostList'
-import BlogpostCreator from '../components/Admin/BlogpostCreator'
+import BlogpostList from '../../components/Admin/BlogpostList'
+import BlogpostCreator from '../../components/Admin/BlogpostCreator'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
-import styles from '../scss/components/_manage'
-import * as Actions from '../actions'
+import styles from '../../scss/components/_manage'
+import * as Actions from '../../actions'
class BlogManager extends React.Component {
constructor (props) {
diff --git a/app/containers/Admin/EditorWrapper.jsx b/app/containers/Admin/EditorWrapper.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..a76cbd1a0703f79e02e2ad37cf584c90e35b9bf0
--- /dev/null
+++ b/app/containers/Admin/EditorWrapper.jsx
@@ -0,0 +1,64 @@
+import React from 'react'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import * as Actions from '../../actions'
+import _ from 'lodash'
+
+// Which editor component to import?
+import Editor from 'pubsweet-substance-components/Writer'
+// import Editor from '../../../node_modules/pubsweet-components/QuillEditor'
+
+export default class EditorWrapper extends React.Component {
+ constructor (props) {
+ super(props)
+ }
+
+ fileUpload (file, callback) {
+ return callback(null, null)
+ }
+
+ render () {
+ let editor
+
+ if (this.props.fragment) {
+ editor = <Editor
+ fragment={this.props.fragment}
+ save={this.props.actions.updateFragment}
+ fileUpload={this.fileUpload}
+ />
+ } else {
+ editor = <p>Loading</p>
+ }
+
+ return (
+ <div>
+ {editor}
+ </div>
+ )
+ }
+}
+
+EditorWrapper.propTypes = {
+ fragment: React.PropTypes.object,
+ actions: React.PropTypes.object
+}
+
+function mapStateToProps (state) {
+ console.log(state)
+ return {
+ fragment: _.find(state.fragments, function (f) {
+ return f._id === state.router.params.id
+ })
+ }
+}
+
+function mapDispatchToProps (dispatch) {
+ return {
+ actions: bindActionCreators(Actions, dispatch)
+ }
+}
+
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(EditorWrapper)
diff --git a/app/containers/BlogRoll.jsx b/app/containers/Blog.jsx
similarity index 86%
rename from app/containers/BlogRoll.jsx
rename to app/containers/Blog.jsx
index 8e54caa03d25658a7b214aa6e381e6a40e6106cf..233623d10eb0fec443871c73f57130ae0fc2eaf3 100644
--- a/app/containers/BlogRoll.jsx
+++ b/app/containers/Blog.jsx
@@ -6,9 +6,9 @@ import '../scss/main'
import * as Actions from '../actions'
import { bindActionCreators } from 'redux'
-import Blogpost from '../components/BlogRoll/LensBlogpostSummary'
+import BlogpostSummary from 'pubsweet-substance-components/Summary'
-class BlogRoll extends React.Component {
+class Blog extends React.Component {
constructor (props) {
super(props)
this.props.actions.hydrate()
@@ -17,9 +17,9 @@ class BlogRoll extends React.Component {
render () {
var fragments = this.props.fragments.map(function (blogpost) {
if (blogpost.status === 'published') {
- return (<Blogpost
+ return (<BlogpostSummary
key={blogpost._id}
- blogpost={blogpost}
+ fragment={blogpost}
/>)
}
})
@@ -31,7 +31,7 @@ class BlogRoll extends React.Component {
}
}
-BlogRoll.propTypes = {
+Blog.propTypes = {
// Data
collection: React.PropTypes.object,
fragments: React.PropTypes.array,
@@ -62,4 +62,4 @@ function mapDispatchToProps (dispatch) {
export default connect(
mapStateToProps,
mapDispatchToProps
-)(BlogRoll)
+)(Blog)
diff --git a/app/components/BlogRoll/LensBlogpost.jsx b/app/containers/BlogpostWrapper.jsx
similarity index 77%
rename from app/components/BlogRoll/LensBlogpost.jsx
rename to app/containers/BlogpostWrapper.jsx
index 29bdd7295a4ac5e8d83c29b20a1b88208cd46316..18384c7413eac979b3b93006b83e6f4deb688905 100644
--- a/app/components/BlogRoll/LensBlogpost.jsx
+++ b/app/containers/BlogpostWrapper.jsx
@@ -1,16 +1,15 @@
import React from 'react'
-import LensReader from 'lens/ReactLensReader'
-import '../../scss/components/_blogpost'
import _ from 'lodash'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { pushState } from 'redux-router'
-import * as Actions from '../../actions'
+import * as Actions from '../actions'
-// Styles
-import '../../../node_modules/lens/styles/lens-reader.scss'
+// Which reader to use?
+import Blogpost from 'pubsweet-substance-components/Reader'
+// import Blogpost from 'pubsweet-components/QuillReader'
-export default class LensBlogpost extends React.Component {
+class BlogpostWrapper extends React.Component {
constructor (props) {
super(props)
this.props.actions.hydrate()
@@ -22,7 +21,7 @@ export default class LensBlogpost extends React.Component {
if (blogpost) {
return (
<div className='blogpost'>
- <LensReader content={blogpost.source} />
+ <Blogpost content={blogpost.source} />
</div>
)
} else {
@@ -33,7 +32,7 @@ export default class LensBlogpost extends React.Component {
}
}
-LensBlogpost.propTypes = {
+BlogpostWrapper.propTypes = {
// Data
blogpost: React.PropTypes.object,
// Injected by React Redux
@@ -64,4 +63,4 @@ function mapDispatchToProps (dispatch) {
export default connect(
mapStateToProps,
mapDispatchToProps
-)(LensBlogpost)
+)(BlogpostWrapper)
diff --git a/app/routes.jsx b/app/routes.jsx
index 16ee657d51fccc936760476b5cf49dd916131518..33a30ae55eb906c7ab080e60f83a2907d82710ed 100644
--- a/app/routes.jsx
+++ b/app/routes.jsx
@@ -4,16 +4,16 @@ import { Route } from 'react-router'
// Admin
import Admin from './containers/Admin'
import About from './components/Admin/About'
-import BlogManager from './containers/BlogManager'
-import Editor from './components/Admin/SubstanceEditor'
+import BlogManager from './containers/Admin/BlogManager'
+import Editor from './containers/Admin/EditorWrapper'
// Public
-import BlogRoll from './containers/BlogRoll'
-import Blogpost from './components/BlogRoll/LensBlogpost'
+import Blog from './containers/Blog'
+import Blogpost from './containers/BlogpostWrapper'
export default (
<Route>
- <Route path='/' component={BlogRoll}/>
+ <Route path='/' component={Blog}/>
<Route path='/admin' component={Admin}>
<Route path='manager' component={BlogManager} />
<Route path='editor/:id' component={Editor} />
diff --git a/app/scss/components/Admin/blogpost.scss b/app/scss/components/Admin/blogpost.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/app/scss/components/_blogpost.scss b/app/scss/components/_blogpost.scss
deleted file mode 100644
index 38886c96d0bb9613e5154d55b23a70afa10cc5b8..0000000000000000000000000000000000000000
--- a/app/scss/components/_blogpost.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.blogpost {
- padding-bottom: 2em;
-}
diff --git a/app/scss/components/_substanceEditor.scss b/app/scss/components/_substanceEditor.scss
deleted file mode 100644
index 0780f1ac047ed9926379d93e13fd714da16d6b12..0000000000000000000000000000000000000000
--- a/app/scss/components/_substanceEditor.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-// .content-tools-component, .le-main, .le-workspace, .lc-writer {
-// top: 52px;
-// }
-
-// .content-panel-component {
-// top: 92px;
-// }
-
-// .panel-content-inner {
-// z-index: 2;
-// }
-
-// .toc-panel-component, .le-resource {
-// top: 92px;
-// }
-
-.lc-writer {
- top: 52px;
-}
diff --git a/package.json b/package.json
index 24c456cd96a78392346ca75ca933059ef678460a..79daaf90d0a9db95651ad6b024a84ec2461ef31b 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,6 @@
"react-bootstrap": "^0.25.100-react-pre.1",
"react-dom": "^0.14.0-rc1",
"react-helmet": "^1.0.1",
- "react-quill": "jure/react-quill",
"react-router": "^1.0.0-rc3",
"react-router-bootstrap": "^0.19.0",
"react-redux": "^4.0.0",
@@ -49,9 +48,7 @@
"serve-favicon": "~2.3.0",
"style-loader": "^0.12.3",
"script-loader": "^0.6.1",
- "lens": "substance/lens#969d3f0f1c1b13361317986ea91cc5dfc1073748",
- "trix": "^0.9.0",
- "simplemde": "^1.8.0",
+ "pubsweet-substance-components": "file:../substance-components",
"webpack": "^1.12.2",
"pouchdb": "^5.0.0",
"leveldown": "^1.4.1",
diff --git a/webpack/webpack.dev.config.js b/webpack/webpack.dev.config.js
index f15236518b8b97e8f175fba0f6942f0fb06b87bd..b0609e0175b33c6deddfd3dffb5cd57018fa083a 100644
--- a/webpack/webpack.dev.config.js
+++ b/webpack/webpack.dev.config.js
@@ -8,6 +8,8 @@ var publicPath = 'http://localhost:3001/assets/'
var WEBPACK_HOST = 'localhost'
var WEBPACK_PORT = 3001
+// We're including JSX components from our components package,
+// but excluding its node_modules.
var commonLoaders = [
{
test: /\.js$|\.jsx$/,
@@ -15,7 +17,20 @@ var commonLoaders = [
include: [
path.join(__dirname, '..', 'app'),
path.join(__dirname, '..', 'routes'),
- path.join(__dirname, '..', 'app.js')
+ path.join(__dirname, '..', 'app.js'),
+ path.join(__dirname,
+ '..',
+ 'node_modules',
+ 'pubsweet-substance-components'
+ )
+ ],
+ exclude: [
+ path.join(__dirname,
+ '..',
+ 'node_modules',
+ 'pubsweet-substance-components',
+ 'node_modules'
+ )
]
},
{ test: /\.png$/, loader: 'url-loader' },
@@ -47,7 +62,7 @@ module.exports = [
// The output path from the view of the Javascript
publicPath: publicPath
},
- devtool: 'eval-source-map',
+ devtool: 'inline-source-map',
module: {
preLoaders: [{
test: /\.js$|\.jsx$/,