From 0835f1294c24d269453303973177ef21ea666653 Mon Sep 17 00:00:00 2001 From: mzabriskie Date: Thu, 22 Oct 2015 02:12:16 -0600 Subject: [PATCH] [changed] supporting React 0.14.0 --- examples/basic/app.js | 16 +++--- lib/components/TinyMCE.js | 73 ++++++++++++------------ lib/components/__tests__/TinyMCE-test.js | 11 ++++ lib/helpers/{uc_first.js => ucFirst.js} | 4 +- lib/helpers/uuid.js | 2 +- package.json | 12 ++-- specs/TinyMCE.spec.js | 10 ---- specs/helper.js | 9 --- specs/main.js | 1 - 9 files changed, 63 insertions(+), 75 deletions(-) create mode 100644 lib/components/__tests__/TinyMCE-test.js rename lib/helpers/{uc_first.js => ucFirst.js} (52%) delete mode 100644 specs/TinyMCE.spec.js delete mode 100644 specs/helper.js delete mode 100644 specs/main.js 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');