Integrated Trix editor

app/components/TrixEditor.jsx

+// WIP EXPERIMENTAL
+
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import * as Actions from '../actions'
+import _ from 'lodash'
+import React from 'react'
+import 'trix/dist/trix.css'
+require('script!../../node_modules/trix/dist/trix.js')
+
+// import '../scss/components/_trixEditor'
+
+class TrixEditor extends React.Component {
+  constructor (props) {
+    super(props)
+    this._onChange = this._onChange.bind(this)
+  }
+
+  componentDidMount () {
+    document.querySelector('trix-editor').addEventListener('trix-change', this._onChange)
+  }
+
+  componentWillUnmount () {
+    document.querySelector('trix-editor').removeEventListener('trix-change', this._onChange)
+  }
+
+  _onChange (event) {
+    let element = document.querySelector('trix-editor')
+    let fragment = Object.assign(this.props.fragment, {
+      source: JSON.stringify(element.editor),
+      presentation: element.innerHTML
+    })
+    this.props.actions.updateFragment(fragment)
+  }
+
+  render () {
+    let editor
+
+    if (this.props.fragment) {
+      editor = <div>
+        <input id='content' value={this.props.fragment.presentation} type='hidden' name='content'/>
+        <trix-editor id='trix-editor' input='content'></trix-editor>
+      </div>
+    } else {
+      editor = <trix-editor></trix-editor>
+    }
+
+    return (
+      <div>
+        {editor}
+      </div>
+    )
+  }
+}
+
+TrixEditor.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
+)(TrixEditor)

app/routes.jsx

@@ -6,7 +6,7 @@ import App from './containers/App'
 // Admin
 import About from './components/About'
 import BlogManager from './containers/BlogManager'
-import Editor from './components/SubstanceEditor'
+import Editor from './components/TrixEditor'
 
 // Public
 import Share from './components/Share'

package.json

@@ -48,7 +48,9 @@
     "sass-loader": "^3.0.0",
     "serve-favicon": "~2.3.0",
     "style-loader": "^0.12.3",
+    "script-loader": "^0.6.1",
     "lens-writer": "substance/lens#master",
+    "trix": "^0.9.0",
     "webpack": "^1.12.2",
     "pouchdb": "^5.0.0",
     "leveldown": "^1.4.1",

webpack/webpack.dev.config.js

@@ -55,9 +55,8 @@ module.exports = [
         loaders: ['eslint-loader']
       }],
       loaders: commonLoaders.concat([
-          { test: /\.scss$/,
-            loader: 'style!css!sass?includePaths[]=' +
-              path.resolve(__dirname, '../node_modules/lens-writer/app/assets/fonts/')
+          { test: /\.scss$|\.css$/,
+            loader: 'style!css!sass'
           }
       ])
     },