react-sane-contenteditable - npm Package Compare versions

Comparing version 1.3.5 to 1.4.0

lib/index.js

@@ -1,17 +0,32 @@
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
 
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { omit, isEqual, pick, without } from "lodash";
-
 var propTypes = {
@@ -23,3 +38,4 @@ content: PropTypes.string,
   sanitise: PropTypes.bool,
-  tagName: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), // The element to make contenteditable. Takes an element string ('div', 'span', 'h1') or a styled component
+  tagName: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  // The element to make contenteditable. Takes an element string ('div', 'span', 'h1') or a styled component
   innerRef: PropTypes.func,
@@ -31,4 +47,4 @@ onBlur: PropTypes.func,
   styled: PropTypes.bool // If element is a styled component (uses innerRef instead of ref)
+
 };
-
 var defaultProps = {
@@ -49,13 +65,16 @@ content: "",
 
-var ContentEditable = function (_Component) {
+var ContentEditable =
+/*#__PURE__*/
+function (_Component) {
   _inherits(ContentEditable, _Component);
 
   function ContentEditable(props) {
+    var _this;
+
     _classCallCheck(this, ContentEditable);
 
-    var _this = _possibleConstructorReturn(this, (ContentEditable.__proto__ || Object.getPrototypeOf(ContentEditable)).call(this, props));
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(ContentEditable).call(this, props));
 
-    _this._onChange = function (ev) {
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_onChange", function (ev) {
       var sanitise = _this.props.sanitise;
-
       var rawValue = _this._element.innerText;
@@ -65,12 +84,12 @@ var value = sanitise ? _this.sanitiseValue(rawValue) : rawValue;
       if (_this.state.value !== value) {
-        _this.setState({ value: rawValue }, function () {
+        _this.setState({
+          value: rawValue
+        }, function () {
           _this.props.onChange(ev, value);
         });
       }
-    };
+    });
 
-    _this._onPaste = function (ev) {
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_onPaste", function (ev) {
       var maxLength = _this.props.maxLength;
-
-
       ev.preventDefault();
@@ -81,13 +100,14 @@ var text = ev.clipboardData.getData("text").substr(0, maxLength);
       _this.props.onPaste(ev);
-    };
+    });
 
-    _this._onBlur = function (ev) {
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_onBlur", function (ev) {
       var sanitise = _this.props.sanitise;
-
       var rawValue = _this._element.innerText;
-      var value = sanitise ? _this.sanitiseValue(rawValue) : rawValue;
+      var value = sanitise ? _this.sanitiseValue(rawValue) : rawValue; // We finally set the state to the sanitised version (rather than the `rawValue`) because we're blurring the field.
 
-      // We finally set the state to the sanitised version (rather than the `rawValue`) because we're blurring the field.
-      _this.setState({ value: value }, function () {
+      _this.setState({
+        value: value
+      }, function () {
         _this.props.onChange(ev, value);
+
         _this.forceUpdate();
@@ -97,28 +117,26 @@ });
       _this.props.onBlur(ev);
-    };
+    });
 
-    _this._onKeyDown = function (ev) {
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_onKeyDown", function (ev) {
       var _this$props = _this.props,
           maxLength = _this$props.maxLength,
           multiLine = _this$props.multiLine;
+      var value = _this._element.innerText; // return key
 
-      var value = _this._element.innerText;
-
-      // return key
       if (!multiLine && ev.keyCode === 13) {
         ev.preventDefault();
-        ev.currentTarget.blur();
-        // Call onKeyUp directly as ev.preventDefault() means that it will not be called
+        ev.currentTarget.blur(); // Call onKeyUp directly as ev.preventDefault() means that it will not be called
+
         _this._onKeyUp(ev);
-      }
+      } // Ensure we don't exceed `maxLength` (keycode 8 === backspace)
 
-      // Ensure we don't exceed `maxLength` (keycode 8 === backspace)
+
       if (maxLength && !ev.metaKey && ev.which !== 8 && value.replace(/\s\s/g, " ").length >= maxLength) {
-        ev.preventDefault();
-        // Call onKeyUp directly as ev.preventDefault() means that it will not be called
+        ev.preventDefault(); // Call onKeyUp directly as ev.preventDefault() means that it will not be called
+
         _this._onKeyUp(ev);
       }
-    };
+    });
 
-    _this._onKeyUp = function (ev) {
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_onKeyUp", function (ev) {
       // Call prop.onKeyDown callback from the onKeyUp event to mitigate both of these issues:
@@ -129,3 +147,3 @@ // Access to Synthetic event: https://github.com/ashleyw/react-sane-contenteditable/issues/14
       _this.props.onKeyDown(ev, _this._element.innerText);
-    };
+    });
 
@@ -142,3 +160,5 @@ _this.state = {
       if (nextProps.content !== this.sanitiseValue(this.state.value)) {
-        this.setState({ value: nextProps.content }, this.forceUpdate);
+        this.setState({
+          value: nextProps.content
+        }, this.forceUpdate);
       }
@@ -149,3 +169,3 @@ }
     value: function shouldComponentUpdate(nextProps) {
-      var propKeys = without(Object.keys(propTypes), "content");
+      var propKeys = without(Object.keys(nextProps), "content");
       return !isEqual(pick(nextProps, propKeys), pick(this.props, propKeys));
@@ -156,13 +176,12 @@ }
     value: function sanitiseValue(val) {
-      var _props = this.props,
-          maxLength = _props.maxLength,
-          multiLine = _props.multiLine,
-          sanitise = _props.sanitise;
+      var _this$props2 = this.props,
+          maxLength = _this$props2.maxLength,
+          multiLine = _this$props2.multiLine,
+          sanitise = _this$props2.sanitise;
 
-
       if (!sanitise) {
         return val;
-      }
+      } // replace encoded spaces
 
-      // replace encoded spaces
+
       var value = val.replace(/&nbsp;/g, " ");
@@ -187,8 +206,8 @@
 
-      var _props2 = this.props,
-          Element = _props2.tagName,
-          content = _props2.content,
-          editable = _props2.editable,
-          styled = _props2.styled,
-          props = _objectWithoutProperties(_props2, ["tagName", "content", "editable", "styled"]);
+      var _this$props3 = this.props,
+          Element = _this$props3.tagName,
+          content = _this$props3.content,
+          editable = _this$props3.editable,
+          styled = _this$props3.styled,
+          props = _objectWithoutProperties(_this$props3, ["tagName", "content", "editable", "styled"]);
 
@@ -206,6 +225,10 @@ return React.createElement(Element, _extends({}, omit(props, Object.keys(propTypes)), styled ? {
       }, {
-        style: _extends({ whiteSpace: "pre-wrap" }, props.style),
+        style: _objectSpread({
+          whiteSpace: "pre-wrap"
+        }, props.style),
         contentEditable: editable,
         key: Date(),
-        dangerouslySetInnerHTML: { __html: this.state.value },
+        dangerouslySetInnerHTML: {
+          __html: this.state.value
+        },
         onBlur: this._onBlur,
@@ -225,3 +248,2 @@ onInput: this._onChange,
 ContentEditable.defaultProps = defaultProps;
-
 export default ContentEditable;

package.json

 {
   "name": "react-sane-contenteditable",
-  "version": "1.3.5",
+  "version": "1.4.0",
   "description": "React component with sane defaults to make any element contentEditable",
@@ -22,19 +22,25 @@ "main": "lib/index.js",
   "devDependencies": {
-    "babel-cli": "^6.24.0",
-    "babel-plugin-external-helpers": "^6.22.0",
-    "babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
-    "babel-plugin-transform-react-jsx": "^6.24.1",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-es2015": "^6.24.0",
-    "babel-preset-react": "^6.23.0",
-    "babel-preset-stage-2": "^6.22.0",
-    "eslint-config-airbnb": "^13.0.0",
-    "eslint-plugin-babel": "^4.0.1",
-    "eslint-plugin-flow-vars": "^0.5.0",
-    "eslint-plugin-import": "^2.2.0",
-    "eslint-plugin-jsx-a11y": "^2.2.3",
-    "eslint-plugin-react": "^6.8.0",
+    "@babel/cli": "^7.0.0-rc.1",
+    "@babel/core": "^7.0.0-rc.1",
+    "@babel/plugin-external-helpers": "^7.0.0-rc.1",
+    "@babel/plugin-proposal-class-properties": "^7.0.0-rc.1",
+    "@babel/plugin-transform-spread": "^7.0.0-rc.1",
+    "@babel/preset-env": "^7.0.0-rc.1",
+    "@babel/preset-react": "^7.0.0-rc.1",
+    "babel-core": "^7.0.0-0",
+    "babel-eslint": "^8.2.6",
+    "babel-jest": "^23.4.2",
+    "enzyme": "^3.4.0",
+    "enzyme-adapter-react-16": "^1.2.0",
+    "eslint": "^5.3.0",
+    "eslint-config-airbnb": "^17.0.0",
+    "eslint-plugin-babel": "^5.1.0",
+    "eslint-plugin-import": "^2.13.0",
+    "eslint-plugin-jest": "^21.18.0",
+    "eslint-plugin-jsx-a11y": "^6.1.1",
+    "eslint-plugin-react": "^7.10.0",
+    "jest": "^23.4.2",
     "react-dom": "^16.3.2",
     "rollup": "^0.58.2",
-    "rollup-plugin-babel": "^3.0.4",
+    "rollup-plugin-babel": "^4.0.0-beta.8",
     "rollup-plugin-commonjs": "^9.1.3",
@@ -49,3 +55,6 @@ "rollup-plugin-jsx": "^1.0.3",
     "prepublish": "yarn build",
-    "demo": "./node_modules/rollup/bin/rollup --config example/rollup.config.js"
+    "demo": "./node_modules/rollup/bin/rollup --config example/rollup.config.js",
+    "dev": "yarn run demo -w",
+    "test": "jest --watch",
+    "lint": "./node_modules/.bin/eslint src/*.js"
   },
@@ -52,0 +61,0 @@ "bugs": {

README.md

@@ -53,1 +53,14 @@ # react-sane-contenteditable
 ```
+
+### Develop
+
+### Tests
+`yarn test`
+
+### Linting
+`yarn run lint`
+
+### Dev
+Runs the rollup dev server with file watching on both the src and demo
+
+`yarn run dev`

src/react-sane-contenteditable.js

@@ -51,3 +51,3 @@ import React, { Component } from "react";
   shouldComponentUpdate(nextProps) {
-    const propKeys = without(Object.keys(propTypes), "content");
+    const propKeys = without(Object.keys(nextProps), "content");
     return !isEqual(pick(nextProps, propKeys), pick(this.props, propKeys));
@@ -54,0 +54,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

43509

increased by100.85%

Number of package files

14

increased by27.27%

Lines of code

878

increased by96.42%

Number of lines in readme file

66

increased by24.53%

Worsened metrics

Dev dependency count

28

increased by27.27%

No dependency changes