react-sane-contenteditable - npm Package Compare versions

Comparing version 1.5.0 to 1.5.2-beta.0

.size-snapshot.json

 {
   "dist/index.umd.js": {
-    "bundled": 14282,
-    "minified": 6125,
-    "gzipped": 2289
+    "bundled": 14766,
+    "minified": 6348,
+    "gzipped": 2342
   },
   "dist/index.umd.min.js": {
-    "bundled": 14282,
-    "minified": 6125,
-    "gzipped": 2289
+    "bundled": 14766,
+    "minified": 6348,
+    "gzipped": 2342
   },
   "dist/index.esm.js": {
-    "bundled": 13075,
-    "minified": 7096,
-    "gzipped": 2333,
+    "bundled": 13531,
+    "minified": 7383,
+    "gzipped": 2385,
     "treeshaked": {
       "rollup": {
-        "code": 5809,
+        "code": 6032,
         "import_statements": 63
       },
       "webpack": {
-        "code": 6899
+        "code": 7124
       }
@@ -24,0 +24,0 @@ }

lib/cjs/react-sane-contenteditable.js

@@ -85,2 +85,3 @@ "use strict";
   onBlur: _propTypes2.default.func,
+  onFocus: _propTypes2.default.func,
   onKeyDown: _propTypes2.default.func,
@@ -103,2 +104,3 @@ onPaste: _propTypes2.default.func,
   onBlur: function onBlur() {},
+  onFocus: function onFocus() {},
   onKeyDown: function onKeyDown() {},
@@ -172,3 +174,4 @@ onPaste: function onPaste() {},
       _this.setState({
-        value: value
+        value: value,
+        isFocused: false
       }, function () {
@@ -183,2 +186,10 @@ _this.props.onChange(ev, value);
 
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_onFocus", function (ev) {
+      _this.setState({
+        isFocused: true
+      });
+
+      _this.props.onFocus(ev);
+    });
+
     _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_onKeyDown", function (ev) {
@@ -214,3 +225,4 @@ var _this$props = _this.props,
     _this.state = {
-      value: props.content
+      value: props.content,
+      isFocused: false
     };
@@ -229,5 +241,9 @@ return _this;
     value: function componentWillReceiveProps(nextProps) {
+      var _this2 = this;
+
       if (nextProps.content !== this.sanitiseValue(this.state.value)) {
         this.setState({
           value: nextProps.content
+        }, function () {
+          if (!_this2.state.isFocused) _this2.forceUpdate();
         });
@@ -280,3 +296,3 @@ }
     value: function render() {
-      var _this2 = this;
+      var _this3 = this;
 
@@ -292,3 +308,3 @@ var _this$props3 = this.props,
         innerRef: function innerRef(c) {
-          _this2._element = c;
+          _this3._element = c;
           props.innerRef(c);
@@ -298,3 +314,3 @@ }
         ref: function ref(c) {
-          _this2._element = c;
+          _this3._element = c;
           props.innerRef(c);
@@ -312,2 +328,3 @@ }
         onBlur: this._onBlur,
+        onFocus: this._onFocus,
         onInput: this._onChange,
@@ -314,0 +331,0 @@ onKeyDown: this._onKeyDown,

lib/esm/react-sane-contenteditable.js

@@ -54,2 +54,3 @@ import _extends from "@babel/runtime/helpers/extends";
   onBlur: PropTypes.func,
+  onFocus: PropTypes.func,
   onKeyDown: PropTypes.func,
@@ -72,2 +73,3 @@ onPaste: PropTypes.func,
   onBlur: function onBlur() {},
+  onFocus: function onFocus() {},
   onKeyDown: function onKeyDown() {},
@@ -141,3 +143,4 @@ onPaste: function onPaste() {},
       _this.setState({
-        value: value
+        value: value,
+        isFocused: false
       }, function () {
@@ -152,2 +155,10 @@ _this.props.onChange(ev, value);
 
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_onFocus", function (ev) {
+      _this.setState({
+        isFocused: true
+      });
+
+      _this.props.onFocus(ev);
+    });
+
     _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "_onKeyDown", function (ev) {
@@ -183,3 +194,4 @@ var _this$props = _this.props,
     _this.state = {
-      value: props.content
+      value: props.content,
+      isFocused: false
     };
@@ -198,5 +210,9 @@ return _this;
     value: function componentWillReceiveProps(nextProps) {
+      var _this2 = this;
+
       if (nextProps.content !== this.sanitiseValue(this.state.value)) {
         this.setState({
           value: nextProps.content
+        }, function () {
+          if (!_this2.state.isFocused) _this2.forceUpdate();
         });
@@ -249,3 +265,3 @@ }
     value: function render() {
-      var _this2 = this;
+      var _this3 = this;
 
@@ -261,3 +277,3 @@ var _this$props3 = this.props,
         innerRef: function innerRef(c) {
-          _this2._element = c;
+          _this3._element = c;
           props.innerRef(c);
@@ -267,3 +283,3 @@ }
         ref: function ref(c) {
-          _this2._element = c;
+          _this3._element = c;
           props.innerRef(c);
@@ -281,2 +297,3 @@ }
         onBlur: this._onBlur,
+        onFocus: this._onFocus,
         onInput: this._onChange,
@@ -283,0 +300,0 @@ onKeyDown: this._onKeyDown,

package.json

 {
   "name": "react-sane-contenteditable",
-  "version": "1.5.0",
+  "version": "1.5.2-beta.0",
   "description": "React component with sane defaults to make any element contentEditable",
@@ -12,7 +12,3 @@ "main": "lib/cjs/react-sane-contenteditable.js",
   "author": "Ashley Williams <[e-mail]>",
-  "contributors": [
-    "Nick Aspinall",
-    "Raphael Silva Cavalcanti",
-    "Jess Telford"
-  ],
+  "contributors": ["Nick Aspinall", "Raphael Silva Cavalcanti", "Jess Telford"],
   "license": "MIT",
@@ -87,9 +83,3 @@ "dependencies": {
   },
-  "keywords": [
-    "react-component",
-    "contenteditable",
-    "editable",
-    "react",
-    "content-editable"
-  ]
+  "keywords": ["react-component", "contenteditable", "editable", "react", "content-editable"]
 }

src/__tests__/react-sane-contenteditable.test.js

@@ -121,2 +121,20 @@ import React from 'react';
 
+  it('state.isFocused is true onFocus', () => {
+    const wrapper = mount(<ContentEditable />);
+
+    wrapper.simulate('focus');
+
+    expect(wrapper.state('isFocused')).toEqual(true);
+  });
+
+  it('state.isFocused is false onBlur', () => {
+    const wrapper = mount(<ContentEditable />);
+
+    wrapper.instance()._element.innerText = 'foo bar';
+    wrapper.find('div').simulate('input');
+    wrapper.simulate('blur');
+
+    expect(wrapper.state('isFocused')).toEqual(false);
+  });
+
   it('props.caretPosition sets selection on mount', () => {
@@ -123,0 +141,0 @@ mount(<ContentEditable caretPosition="start" />);

src/react-sane-contenteditable.js

@@ -25,2 +25,3 @@ import React, { Component } from 'react';
   onBlur: PropTypes.func,
+  onFocus: PropTypes.func,
   onKeyDown: PropTypes.func,
@@ -43,2 +44,3 @@ onPaste: PropTypes.func,
   onBlur: () => {},
+  onFocus: () => {},
   onKeyDown: () => {},
@@ -56,2 +58,3 @@ onPaste: () => {},
       value: props.content,
+      isFocused: false,
     };
@@ -67,3 +70,5 @@ }
     if (nextProps.content !== this.sanitiseValue(this.state.value)) {
-      this.setState({ value: nextProps.content });
+      this.setState({ value: nextProps.content }, () => {
+        if (!this.state.isFocused) this.forceUpdate();
+      });
     }
@@ -158,3 +163,6 @@ }
     // We finally set the state to the sanitised version (rather than the `rawValue`) because we're blurring the field.
-    this.setState({ value }, () => {
+    this.setState({
+        value,
+        isFocused: false,
+    }, () => {
       this.props.onChange(ev, value);
@@ -167,2 +175,9 @@ this.forceUpdate();
 
+  _onFocus = ev => {
+    this.setState({
+        isFocused: true,
+    });
+    this.props.onFocus(ev);
+  };
+
   _onKeyDown = ev => {
@@ -220,2 +235,3 @@ const { maxLength, multiLine } = this.props;
         onBlur={this._onBlur}
+        onFocus={this._onFocus}
         onInput={this._onChange}
@@ -222,0 +238,0 @@ onKeyDown={this._onKeyDown}

New alerts

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

282375

increased by0.6%

Lines of code

1406

increased by4.07%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of high maintenance alerts

1

increased byInfinity%

Number of low quality alerts

1

increased byInfinity%

No dependency changes