react-tinymce-input - npm Package Compare versions

Comparing version 1.2.1 to 2.0.0

dist/TinyMCEInput.js

@@ -26,2 +26,4 @@ /*global tinymce */
 var React = require('react'),
+    PropTypes = require('prop-types'),
+    createReactClass = require('create-react-class'),
     uuid = require('uuid');
@@ -32,38 +34,38 @@
 
-var TinyMCEInput = React.createClass({
+var TinyMCEInput = createReactClass({
   displayName: 'TinyMCEInput',
   propTypes: {
-    className: React.PropTypes.string,
-    tinymceConfig: React.PropTypes.object.isRequired,
-    name: React.PropTypes.string, // the form name for the input element
-    value: React.PropTypes.string,
-    rows: React.PropTypes.number,
-    focus: React.PropTypes.bool, // focus the tinymce element if not already focused
-    maxInitWaitTime: React.PropTypes.number, // [20000] maximum amount of time to wait, in ms, for tinymce to create an editor before giving up
-    style: React.PropTypes.object,
-    ignoreUpdatesWhenFocused: React.PropTypes.bool, // tinymce can sometimes have cursor position issues on updates, if you app does not need live updates from the backing model, then set the prop and it will only update when the editor does not have focus
+    className: PropTypes.string,
+    tinymceConfig: PropTypes.object.isRequired,
+    name: PropTypes.string, // the form name for the input element
+    value: PropTypes.string,
+    rows: PropTypes.number,
+    focus: PropTypes.bool, // focus the tinymce element if not already focused
+    maxInitWaitTime: PropTypes.number, // [20000] maximum amount of time to wait, in ms, for tinymce to create an editor before giving up
+    style: PropTypes.object,
+    ignoreUpdatesWhenFocused: PropTypes.bool, // tinymce can sometimes have cursor position issues on updates, if you app does not need live updates from the backing model, then set the prop and it will only update when the editor does not have focus
 
-    pollInterval: React.PropTypes.number.isRequired, // [1000] inteval to wait between polling for changes in tinymce editor (since blur does not always work), changes are then synced if the editor is focused
+    pollInterval: PropTypes.number.isRequired, // [1000] inteval to wait between polling for changes in tinymce editor (since blur does not always work), changes are then synced if the editor is focused
 
     // intercepted events
-    onChange: React.PropTypes.func.isRequired, // this is a controlled component, we require onChange
-    onBlur: React.PropTypes.func,
-    onSetupEditor: React.PropTypes.func,
+    onChange: PropTypes.func.isRequired, // this is a controlled component, we require onChange
+    onBlur: PropTypes.func,
+    onSetupEditor: PropTypes.func,
 
     // direct pass through events
-    onActivate: React.PropTypes.func,
-    onClick: React.PropTypes.func,
-    onDeactivate: React.PropTypes.func,
-    onFocus: React.PropTypes.func,
-    onHide: React.PropTypes.func,
-    onInit: React.PropTypes.func,
-    onRedo: React.PropTypes.func,
-    onRemove: React.PropTypes.func,
-    onReset: React.PropTypes.func,
-    onShow: React.PropTypes.func,
-    onSubmit: React.PropTypes.func,
-    onUndo: React.PropTypes.func,
+    onActivate: PropTypes.func,
+    onClick: PropTypes.func,
+    onDeactivate: PropTypes.func,
+    onFocus: PropTypes.func,
+    onHide: PropTypes.func,
+    onInit: PropTypes.func,
+    onRedo: PropTypes.func,
+    onRemove: PropTypes.func,
+    onReset: PropTypes.func,
+    onShow: PropTypes.func,
+    onSubmit: PropTypes.func,
+    onUndo: PropTypes.func,
 
-    textareaProps: React.PropTypes.object.isRequired, // props passed through to the textarea
-    otherEventHandlers: React.PropTypes.objectOf(React.PropTypes.func.isRequired).isRequired
+    textareaProps: PropTypes.object.isRequired, // props passed through to the textarea
+    otherEventHandlers: PropTypes.objectOf(PropTypes.func.isRequired).isRequired
 
@@ -78,3 +80,4 @@ },
       otherEventHandlers: {},
-      onChange: function onChange() {}
+      onChange: function onChange() {},
+      component: 'textinput'
     };
@@ -131,9 +134,10 @@ },
     for (var i = 0, len = DIRECT_PASSTHROUGH_EVENTS.length; i < len; ++i) {
-      event = DIRECT_PASSTHROUGH_EVENTS[i];
-      editor.on(event.toLowerCase(), function (tinyMCEEvent) {
-        var handler = _this.props['on' + event];
-        if (typeof handler === 'function') {
-          handler(tinyMCEEvent);
-        }
-      });
+      (function (event) {
+        editor.on(event.toLowerCase(), function (tinyMCEEvent) {
+          var handler = _this.props['on' + event];
+          if (typeof handler === 'function') {
+            handler(tinyMCEEvent);
+          }
+        });
+      })(DIRECT_PASSTHROUGH_EVENTS[i]);
     }
@@ -235,5 +239,2 @@ /* eslint-enable no-loop-func */
     }
-    if (this.props.onBlur) {
-      this.props.onBlur();
-    }
   },
@@ -264,2 +265,3 @@ onTinyMCEUndo: function onTinyMCEUndo(tinyMCEEvent) {
     // solution: keep a separate input element, controlled by just react, that will actually be submitted
+    var Component = this.props.component;
     return React.createElement(
@@ -269,3 +271,3 @@ 'div',
       React.createElement('input', { type: 'hidden', name: this.props.name, value: this.state.value, readOnly: true }),
-      React.createElement('textarea', _extends({
+      React.createElement(Component, _extends({
         id: this.state.id,
@@ -275,3 +277,3 @@ defaultValue: this.state.value,
         rows: this.props.rows,
-        style: PSEUDO_HIDDEN
+        style: this.props.tinymceConfig.inline ? {} : PSEUDO_HIDDEN
       }, this.props.textareaProps))
@@ -278,0 +280,0 @@ );

package.json

 {
   "name": "react-tinymce-input",
-  "version": "1.2.1",
+  "version": "2.0.0",
   "description": "A React component to control TinyMCE.",
@@ -9,3 +9,3 @@ "main": "dist/TinyMCEInput.js",
     "build": "./scripts/build",
-    "prepublish": "npm run build",
+    "prepublish": "npm run-script build",
     "dev": "webpack-dev-server --progress --colors --port 8090"
@@ -36,7 +36,10 @@ },
     "babel-runtime": "^5.5.4",
+    "create-react-class": "^15.6.0",
     "eslint": "^0.22.1",
     "eslint-plugin-react": "^2.5.0",
     "node-libs-browser": "^0.5.2",
-    "react": "~0.13.3",
-    "react-hot-loader": "^1.2.7",
+    "react": "~15.6.1",
+    "react-dom": "~15.6.1",
+    "prop-types": "^15.5.10",
+    "react-hot-loader": "^1.3.1",
     "webpack": "^1.9.10",
@@ -43,0 +46,0 @@ "webpack-dev-server": "^1.9.0"

README.md

@@ -28,4 +28,2 @@ # React TinyMCE Input
 
-  - 1.2.1 updated peerDependencies to include React 15
-
   - 1.2.0 passthroughs
@@ -32,0 +30,0 @@

No alert changes

Improved metrics

Total package byte prevSize

17042

increased by0.31%

Lines of code

289

increased by0.7%

Worsened metrics

Dev dependency count

15

increased by25%

Number of lines in readme file

41

decreased by-4.65%

No dependency changes