diff --git a/examples/basic/app.js b/examples/basic/app.js
index 04c287e..b4f4dd8 100644
--- a/examples/basic/app.js
+++ b/examples/basic/app.js
@@ -1,7 +1,7 @@
-var React = require('react');
-var TinyMCE = require('../../lib/main');
+import React from 'react';
+import TinyMCE from '../../lib/main';
-var STYLES = {
+const STYLES = {
container: {
fontFamily: 'Helvetica Neue, sans-serif',
padding: '0 25px'
@@ -16,20 +16,20 @@ var STYLES = {
}
};
-var App = React.createClass({
- getInitialState: function () {
+const App = React.createClass({
+ getInitialState() {
return {
content: 'Welcome to react-tinymce
'
};
},
- handleEditorChange: function (e) {
+ handleEditorChange(e) {
this.setState({
content: e.target.getContent()
});
},
-
- render: function () {
+
+ render() {
return (
react-tinymce
diff --git a/lib/components/TinyMCE.js b/lib/components/TinyMCE.js
index 3fa7972..93150a0 100644
--- a/lib/components/TinyMCE.js
+++ b/lib/components/TinyMCE.js
@@ -1,12 +1,11 @@
-var React = require('react');
-var DOM = React.DOM;
-var isEqual = require('lodash/lang/isEqual');
-var uuid = require('../helpers/uuid');
-var uc_first = require('../helpers/uc_first');
+import React, { DOM } from 'react';
+import isEqual from 'lodash/lang/isEqual';
+import uuid from '../helpers/uuid';
+import ucFirst from '../helpers/ucFirst';
// Include all of the Native DOM and custom events from:
// https://github.com/tinymce/tinymce/blob/master/tools/docs/tinymce.Editor.js#L5-L12
-var EVENTS = [
+const EVENTS = [
'focusin', 'focusout', 'click', 'dblclick', 'mousedown', 'mouseup',
'mousemove', 'mouseover', 'beforepaste', 'paste', 'cut', 'copy',
'selectionchange', 'mouseout', 'mouseenter', 'mouseleave', 'keydown',
@@ -24,66 +23,71 @@ var EVENTS = [
// Note: because the capitalization of the events is weird, we're going to get
// some inconsistently-named handlers, for example compare:
// 'onMouseleave' and 'onNodeChange'
-var HANDLER_NAMES = EVENTS.map(function(event) {
- return 'on' + uc_first(event);
+const HANDLER_NAMES = EVENTS.map((event) => {
+ return 'on' + ucFirst(event);
});
-var TinyMCE = React.createClass({
+const TinyMCE = React.createClass({
displayName: 'TinyMCE',
propTypes: {
config: React.PropTypes.object,
- content: React.PropTypes.string,
+ content: React.PropTypes.string
},
- getDefaultProps: function () {
+ getDefaultProps() {
return {
config: {},
content: ''
};
},
- componentWillMount: function () {
+ componentWillMount() {
this.id = this.id || uuid();
},
- componentDidMount: function () {
+ componentDidMount() {
this._init(this.props.config);
},
- componentWillUnmount: function () {
+ componentWillUnmount() {
this._remove();
},
- componentWillReceiveProps: function (nextProps) {
+ componentWillReceiveProps(nextProps) {
if (!isEqual(this.props.config, nextProps.config)) {
this._init(nextProps.config, nextProps.content);
}
},
- shouldComponentUpdate: function (nextProps, nextState) {
+ shouldComponentUpdate(nextProps) {
return (
!isEqual(this.props.content, nextProps.content) ||
!isEqual(this.props.config, nextProps.config)
);
},
- _init: function (config, content) {
+ render() {
+ return DOM.textarea({
+ id: this.id,
+ defaultValue: this.props.content
+ });
+ },
+
+ _init(config, content) {
if (this._isInit) {
this._remove();
}
- var self = this;
-
- //hide the textarea that is me so that no one sees it
- self.getDOMNode().style.hidden = "hidden";
+ // hide the textarea that is me so that no one sees it
+ this.getDOMNode().style.hidden = 'hidden';
config.selector = '#' + this.id;
- config.setup = function (editor) {
- EVENTS.forEach(function (event, index) {
- var handler = self.props[HANDLER_NAMES[index]];
+ config.setup = (editor) => {
+ EVENTS.forEach((event, index) => {
+ const handler = this.props[HANDLER_NAMES[index]];
if (typeof handler !== 'function') return;
- editor.on(event, function(e) {
+ editor.on(event, (e) => {
// native DOM events don't have access to the editor so we pass it here
handler(e, editor);
});
@@ -91,7 +95,7 @@ var TinyMCE = React.createClass({
// need to set content here because the textarea will still have the
// old `this.props.content`
if (content) {
- editor.on('init', function() {
+ editor.on('init', () => {
editor.setContent(content);
});
}
@@ -99,26 +103,19 @@ var TinyMCE = React.createClass({
tinymce.init(config);
- self.getDOMNode().style.hidden = "";
+ this.getDOMNode().style.hidden = '';
this._isInit = true;
},
- _remove: function () {
- tinymce.EditorManager.execCommand("mceRemoveEditor", true, this.id);
+ _remove() {
+ tinymce.EditorManager.execCommand('mceRemoveEditor', true, this.id);
this._isInit = false;
- },
-
- render: function () {
- return DOM.textarea({
- id: this.id,
- defaultValue: this.props.content
- });
}
});
-//add handler propTypes
-HANDLER_NAMES.forEach(function (name) {
+// add handler propTypes
+HANDLER_NAMES.forEach((name) => {
TinyMCE.propTypes[name] = React.PropTypes.func;
});
diff --git a/lib/components/__tests__/TinyMCE-test.js b/lib/components/__tests__/TinyMCE-test.js
new file mode 100644
index 0000000..c717ead
--- /dev/null
+++ b/lib/components/__tests__/TinyMCE-test.js
@@ -0,0 +1,11 @@
+// import React 'react';
+// import TestUtils from 'react-addons-test-utils';
+// import TinyMCE from '../..//main';
+import { equal } from 'assert';
+
+/* eslint func-names:0 */
+describe('react-tinymce', function() {
+ it('should render', function() {
+ equal(true, true);
+ });
+});
diff --git a/lib/helpers/uc_first.js b/lib/helpers/ucFirst.js
similarity index 52%
rename from lib/helpers/uc_first.js
rename to lib/helpers/ucFirst.js
index e3bee40..922b0c2 100644
--- a/lib/helpers/uc_first.js
+++ b/lib/helpers/ucFirst.js
@@ -1,3 +1,3 @@
-module.exports = function uc_first(str) {
+export default function ucFirst(str) {
return str[0].toUpperCase() + str.substring(1);
-};
+}
diff --git a/lib/helpers/uuid.js b/lib/helpers/uuid.js
index 44bf8cd..bc05003 100644
--- a/lib/helpers/uuid.js
+++ b/lib/helpers/uuid.js
@@ -1,4 +1,4 @@
-var count = 0;
+let count = 0;
module.exports = function uuid() {
return 'react-tinymce-' + count++;
};
diff --git a/package.json b/package.json
index aa369fb..8884184 100644
--- a/package.json
+++ b/package.json
@@ -4,8 +4,8 @@
"description": "React TinyMCE component",
"main": "lib/main.js",
"scripts": {
- "test": "node_modules/.bin/rackt test --ci --browsers Firefox",
- "start": "node_modules/.bin/rackt dev"
+ "test": "node_modules/.bin/rackt test --single-run --browsers Firefox",
+ "start": "node_modules/.bin/rackt server"
},
"keywords": [
"tinymce",
@@ -14,13 +14,13 @@
"author": "Matt Zabriskie",
"license": "MIT",
"peerDependencies": {
- "react": "^0.13.3"
+ "react": "^0.14.0"
},
"devDependencies": {
- "rackt-cli": "^0.2.0",
- "react": "^0.13.3"
+ "rackt-cli": "^0.5.2",
+ "react": "^0.14.0"
},
"dependencies": {
"lodash": "^3.9.3"
}
-}
\ No newline at end of file
+}
diff --git a/specs/TinyMCE.spec.js b/specs/TinyMCE.spec.js
deleted file mode 100644
index c3dd207..0000000
--- a/specs/TinyMCE.spec.js
+++ /dev/null
@@ -1,10 +0,0 @@
-var React = require('react/addons');
-var TestUtils = React.addons.TestUtils;
-var TinyMCE = require('../lib/main');
-var {ok, equal, strictEqual, throws} = require('assert');
-
-describe('react-tinymce', function () {
- it('should render', function () {
- equal(true, true);
- });
-});
diff --git a/specs/helper.js b/specs/helper.js
deleted file mode 100644
index 2429a29..0000000
--- a/specs/helper.js
+++ /dev/null
@@ -1,9 +0,0 @@
-React = require('react/addons');
-TestUtils = React.addons.TestUtils;
-TinyMCE = require('../lib/main');
-
-assert = require('assert');
-ok = assert.ok;
-equal = assert.equal;
-strictEqual = assert.strictEqual;
-throws = assert.throws;
diff --git a/specs/main.js b/specs/main.js
deleted file mode 100644
index 91d99f9..0000000
--- a/specs/main.js
+++ /dev/null
@@ -1 +0,0 @@
-require('./TinyMCE.spec');