From 32ec60ef3be32bdcc0c105c7a4749d0b92cfaa74 Mon Sep 17 00:00:00 2001
From: Jure Triglav <juretriglav@gmail.com>
Date: Thu, 29 Oct 2015 12:47:46 +0100
Subject: [PATCH] Integrated Trix editor
---
app/components/TrixEditor.jsx | 79 +++++++++++++++++++++++++++++++++++
app/routes.jsx | 2 +-
package.json | 2 +
webpack/webpack.dev.config.js | 5 +--
4 files changed, 84 insertions(+), 4 deletions(-)
create mode 100644 app/components/TrixEditor.jsx
diff --git a/app/components/TrixEditor.jsx b/app/components/TrixEditor.jsx
new file mode 100644
index 000000000..4bd38e60e
--- /dev/null
+++ b/app/components/TrixEditor.jsx
@@ -0,0 +1,79 @@
+// 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)
diff --git a/app/routes.jsx b/app/routes.jsx
index 7bd755503..658b5db6c 100644
--- a/app/routes.jsx
+++ b/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'
diff --git a/package.json b/package.json
index 1ec85b149..27f866753 100644
--- a/package.json
+++ b/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",
diff --git a/webpack/webpack.dev.config.js b/webpack/webpack.dev.config.js
index e30ef031b..f15236518 100644
--- a/webpack/webpack.dev.config.js
+++ b/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'
}
])
},
--
GitLab