react-style-editor - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

lib/components/Comment.js

@@ -24,2 +24,4 @@ "use strict";
 
+var _hasSelection = _interopRequireDefault(require("../utils/hasSelection"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -113,2 +115,3 @@
     _defineProperty(_assertThisInitialized(_this), "onContentClick", function (event) {
+      if ((0, _hasSelection["default"])()) return;
       event.stopPropagation();
@@ -124,2 +127,3 @@
     _defineProperty(_assertThisInitialized(_this), "onCommentClick", function (event) {
+      if ((0, _hasSelection["default"])()) return;
       event.stopPropagation();
@@ -160,3 +164,2 @@
           isEditingAfter = _this$state.isEditingAfter;
-      var isLegit = !!content.match(/^\s*[-a-zA-Z0-9_]*\s*:|[{}()*@;/\]]/);
       var cleanContent = (0, _clean["default"])(content);
@@ -174,3 +177,3 @@ var shortContent = cleanContent;
         onClick: this.onCommentClick
-      }, isLegit && /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
         id: id,
@@ -177,0 +180,0 @@ tick: 0,

lib/components/Declaration.js

@@ -28,2 +28,4 @@ "use strict";
 
+var _hasSelection = _interopRequireDefault(require("../utils/hasSelection"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -139,2 +141,3 @@
     _defineProperty(_assertThisInitialized(_this), "onDeclarationClick", function (event) {
+      if ((0, _hasSelection["default"])()) return;
       event.stopPropagation();
@@ -150,2 +153,3 @@
     _defineProperty(_assertThisInitialized(_this), "onPropertyClick", function (event) {
+      if ((0, _hasSelection["default"])()) return;
       event.stopPropagation();
@@ -161,2 +165,3 @@
     _defineProperty(_assertThisInitialized(_this), "onValueClick", function (event) {
+      if ((0, _hasSelection["default"])()) return;
       event.stopPropagation();
@@ -163,0 +168,0 @@

lib/components/Rule.js

@@ -30,2 +30,4 @@ "use strict";
 
+var _hasSelection = _interopRequireDefault(require("../utils/hasSelection"));
+
 var _typeToComponent;
@@ -140,2 +142,3 @@
     _defineProperty(_assertThisInitialized(_this), "onSelectorClick", function (event) {
+      if ((0, _hasSelection["default"])()) return;
       event.stopPropagation();
@@ -151,2 +154,3 @@
     _defineProperty(_assertThisInitialized(_this), "onBraceClick", function (event) {
+      if ((0, _hasSelection["default"])()) return;
       event.stopPropagation();
@@ -162,2 +166,3 @@
     _defineProperty(_assertThisInitialized(_this), "onHeaderClick", function (event) {
+      if ((0, _hasSelection["default"])()) return;
       event.stopPropagation();
@@ -179,2 +184,3 @@
     _defineProperty(_assertThisInitialized(_this), "onFooterClick", function (event) {
+      if ((0, _hasSelection["default"])()) return;
       event.stopPropagation();
@@ -181,0 +187,0 @@

lib/components/StyleEditor.js

@@ -34,2 +34,4 @@ "use strict";
 
+var _hasSelection = _interopRequireDefault(require("../utils/hasSelection"));
+
 var _excluded = ["value", "className", "readOnly"];
@@ -255,4 +257,4 @@
     _defineProperty(_assertThisInitialized(_this), "onCopy", function (event) {
-      var blob = (0, _prettify["default"])(_this.currentRules); // console.log(blob); // TODO
-
+      if ((0, _hasSelection["default"])()) return;
+      var blob = (0, _prettify["default"])(_this.currentRules);
       event.nativeEvent.clipboardData.setData('text/plain', blob);
@@ -263,2 +265,4 @@ event.preventDefault();
     _defineProperty(_assertThisInitialized(_this), "onClick", function () {
+      if ((0, _hasSelection["default"])()) return;
+
       _this.setState({
@@ -265,0 +269,0 @@ isEditing: true,

lib/utils/validate.js

@@ -170,6 +170,7 @@ "use strict";
   document.head.appendChild(iframe);
-  var iframeDocument = iframe.contentWindow.document; // document.head.removeChild(iframe); // TODO: investigate why Chrome 8X breaks if we remove the iframe
+  var iframeDocument = iframe.contentWindow.document;
+  var style = iframeDocument.createElement('style');
+  iframeDocument.head.appendChild(style); // Important: Since Chrome 80 (or so), we need to remove the iframe AFTER we added the style.
 
-  var style = iframeDocument.createElement('style');
-  iframeDocument.head.appendChild(style);
+  document.head.removeChild(iframe);
   return style.sheet;
@@ -176,0 +177,0 @@ };

package.json

 {
     "name": "react-style-editor",
-    "version": "0.3.0",
+    "version": "0.4.0",
     "description": "A React component that displays and edits CSS, similar to the browser's DevTools.",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -91,3 +91,2 @@ # React Style Editor
 -   Dropdown suggestions for properties/values (similar to the browser)
--   Ability to copy/delete fragments of code
 -   Keyboard support for `TAB`, `:` and `UP`/`DOWN` increments of numeric values
@@ -98,3 +97,2 @@ -   Theme support (similar to the browser)
 -   Better code quality through `propTypes`
--   Better comment rendering (some comments look better inline rather than block)
 -   Filters (similar to the browser)
@@ -101,0 +99,0 @@ -   Error messages displayed in the warning-sign's tooltip

src/components/Comment.js

@@ -9,2 +9,3 @@ import React from 'react';
 import shorten from '../utils/shorten';
+import hasSelection from '../utils/hasSelection';
 
@@ -53,3 +54,2 @@ // =====================================================================================================================
 
-        const isLegit = !!content.match(/^\s*[-a-zA-Z0-9_]*\s*:|[{}()*@;/\]]/);
         const cleanContent = clean(content);
@@ -66,3 +66,3 @@
             <div className={classes.root} onClick={this.onCommentClick}>
-                {isLegit && <Checkbox id={id} tick={0} onTick={onTick} />}
+                <Checkbox id={id} tick={0} onTick={onTick} />
 
@@ -106,2 +106,3 @@ {isEditingContent ? (
     onContentClick = (event) => {
+        if (hasSelection()) return;
         event.stopPropagation();
@@ -116,2 +117,3 @@ this.setState({isEditingContent: true});
     onCommentClick = (event) => {
+        if (hasSelection()) return;
         event.stopPropagation();
@@ -118,0 +120,0 @@ this.setState({isEditingAfter: true});

src/components/Declaration.js

@@ -11,2 +11,3 @@ import React from 'react';
 import Alert from './Alert';
+import hasSelection from '../utils/hasSelection';
 
@@ -151,2 +152,3 @@ // =====================================================================================================================
     onDeclarationClick = (event) => {
+        if (hasSelection()) return;
         event.stopPropagation();
@@ -161,2 +163,3 @@ this.setState({isEditingAfter: true});
     onPropertyClick = (event) => {
+        if (hasSelection()) return;
         event.stopPropagation();
@@ -171,2 +174,3 @@ this.setState({isEditingProperty: true});
     onValueClick = (event) => {
+        if (hasSelection()) return;
         event.stopPropagation();
@@ -173,0 +177,0 @@ this.setState({isEditingValue: true});

src/components/Rule.js

@@ -12,2 +12,3 @@ import React from 'react';
 import Alert from './Alert';
+import hasSelection from '../utils/hasSelection';
 
@@ -177,2 +178,3 @@ // =====================================================================================================================
     onSelectorClick = (event) => {
+        if (hasSelection()) return;
         event.stopPropagation();
@@ -187,2 +189,3 @@ this.setState({isEditingSelector: true});
     onBraceClick = (event) => {
+        if (hasSelection()) return;
         event.stopPropagation();
@@ -197,2 +200,3 @@ this.setState({isEditingBefore: true});
     onHeaderClick = (event) => {
+        if (hasSelection()) return;
         event.stopPropagation();
@@ -211,2 +215,3 @@ if (this.props.hasBraceBegin) {
     onFooterClick = (event) => {
+        if (hasSelection()) return;
         event.stopPropagation();
@@ -213,0 +218,0 @@ this.setState({isEditingAfter: true});

src/components/StyleEditor.js

@@ -14,2 +14,3 @@ import React from 'react';
 import cls from '../utils/cls';
+import hasSelection from '../utils/hasSelection';
 
@@ -268,4 +269,4 @@ // =====================================================================================================================
     onCopy = (event) => {
+        if (hasSelection()) return;
         const blob = prettify(this.currentRules);
-        // console.log(blob); // TODO
         event.nativeEvent.clipboardData.setData('text/plain', blob);
@@ -279,2 +280,3 @@ event.preventDefault();
     onClick = () => {
+        if (hasSelection()) return;
         this.setState({
@@ -281,0 +283,0 @@ isEditing: true,

src/utils/validate.js

@@ -120,5 +120,8 @@ /**
     const iframeDocument = iframe.contentWindow.document;
-    // document.head.removeChild(iframe); // TODO: investigate why Chrome 8X breaks if we remove the iframe
     const style = iframeDocument.createElement('style');
     iframeDocument.head.appendChild(style);
+
+    // Important: Since Chrome 80 (or so), we need to remove the iframe AFTER we added the style.
+    document.head.removeChild(iframe);
+
     return style.sheet;
@@ -125,0 +128,0 @@ };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

207821

increased by1.4%

Number of package files

50

increased by6.38%

Lines of code

5039

increased by0.92%

Worsened metrics

Number of lines in readme file

103

decreased by-1.9%

No dependency changes