[changed] supporting React 0.14.0

Author: mzabriskie

examples/basic/app.js

@@ -1,7 +1,8 @@
-var React = require('react');
-var TinyMCE = require('../../lib/main');
+import React from 'react';
+import ReactDOM from 'react-dom';
+import TinyMCE from '../../lib/main';
 
-var STYLES = {
+const STYLES = {
   container: {
     fontFamily: 'Helvetica Neue, sans-serif',
     padding: '0 25px'
@@ -16,20 +17,20 @@ var STYLES = {
   }
 };
 
-var App = React.createClass({
-  getInitialState: function () {
+const App = React.createClass({
+  getInitialState() {
     return {
       content: '<p><strong>Welcome to react-tinymce</strong></p>'
     };
   },
 
-  handleEditorChange: function (e) {
+  handleEditorChange(e) {
     this.setState({
       content: e.target.getContent()
     });
   },
- 
-  render: function () {
+
+  render() {
     return (
       <div style={STYLES.container}>
         <h1>react-tinymce</h1>
@@ -45,4 +46,4 @@ var App = React.createClass({
   }
 });
 
-React.render(<App/>, document.getElementById('example'));
+ReactDOM.render(<App/>, document.getElementById('example'));

lib/components/TinyMCE.js

@@ -1,12 +1,12 @@
-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 from 'react';
+import { findDOMNode } from 'react-dom';
+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,101 +24,101 @@ 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 (
+      <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
+    findDOMNode(this).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);
         });
       });
       // 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);
         });
       }
     };
 
     tinymce.init(config);
 
-    self.getDOMNode().style.hidden = "";
+    findDOMNode(this).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;
 });
 

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);
+  });
+});

lib/helpers/uc_first.js renamed to 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);
-};
+}

lib/helpers/uuid.js

@@ -1,4 +1,4 @@
-var count = 0;
+let count = 0;
 module.exports = function uuid() {
   return 'react-tinymce-' + count++;
 };

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,15 @@
   "author": "Matt Zabriskie",
   "license": "MIT",
   "peerDependencies": {
-    "react": "^0.13.3"
+    "react": "^0.14.0",
+    "react-dom": "^0.14.0"
   },
   "devDependencies": {
-    "rackt-cli": "^0.2.0",
-    "react": "^0.13.3"
+    "rackt-cli": "^0.5.2",
+    "react": "^0.14.0",
+    "react-dom": "^0.14.0"
   },
   "dependencies": {
     "lodash": "^3.9.3"
   }
-}
+}