cm-page-builder - npm Package Compare versions

Comparing version 1.2.7 to 1.2.8

lib/components/AddComponent.js

@@ -233,3 +233,3 @@ 'use strict';
   this.handleMouseUp = function (e) {
-    e.stopPropagation();
+    // e.stopPropagation()
     _this3.setState({ showActionBtn: e.target.innerHTML === '', isFocused: true });
@@ -236,0 +236,0 @@ _this3.props.setCurrentElem(_this3.props.id);

lib/components/ContentEditable.js

@@ -104,5 +104,4 @@ 'use strict';
           dangerouslySetInnerHTML: { __html: (0, _sanitizeHtml2.default)(content || '') },
-          styles: styles
-          //onMouseUp={handleMouseUp}
-          , 'data-gramm_editor': 'false',
+          styles: styles,
+          'data-gramm_editor': 'false',
           onSelect: context.handleSelection
@@ -109,0 +108,0 @@ })

lib/page/PageContainer.js

@@ -61,5 +61,4 @@ 'use strict';
 			var editTooltip = document.getElementById('cm-text-edit-tooltip');
-
 			if (editTooltip && !editTooltip.contains(e.target)) {
-				_this.setState({ actionDomRect: null });
+				_this.setState({ actionDomRect: null, activeFormatting: [] });
 			} else {
@@ -71,7 +70,2 @@ document.removeEventListener('mousedown', _this.handlePageClick);
 		_this.emitUpdate = function () {
-			for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-				args[_key] = arguments[_key];
-			}
-
-			console.log(args);
 			if (_this.props.handleUpdate) {
@@ -83,3 +77,3 @@ var _this$props;
 				// }
-				(_this$props = _this.props).handleUpdate.apply(_this$props, args);
+				(_this$props = _this.props).handleUpdate.apply(_this$props, arguments);
 			}
@@ -115,10 +109,11 @@ };
 		_this.handleMouseUp = function (e) {
-			_this.handleSelection(e);
-		};
+			e.persist();
+			var conElem = document.querySelector('[data-container-block="true"]');
+			if (conElem.offsetHeight < e.pageY) {
+				var appData = _this.props.appData;
 
-		_this.handleKeyPressList = function (e) {
-			switch (e.key) {
-				case 'a':
-					if (e.ctrlKey || e.metaKey) _this.handleSelection(e);
-					break;
+				var lastElem = appData.componentData[appData.componentData.length - 1];
+				if ((!lastElem || lastElem.componentType !== 'Text' || lastElem.content) && !_this.props.newPage) {
+					_this.props.addNewComponent({ id: lastElem && lastElem.id, componentType: 'Text' });
+				}
 			}
@@ -141,3 +136,3 @@ };
 			var selection = window.getSelection();
-			if (selection) {
+			if (selection && selection.rangeCount > 0) {
 				var dimensions = selection.getRangeAt(0).getBoundingClientRect();
@@ -147,3 +142,3 @@ _this.currentElemSelection = { elemId: e.target.dataset.id, selection: selection };
 					var scrollOffsets = _this.getScrollOffsets();
-					var actionDomRect = { top: dimensions.top + scrollOffsets.y - dimensions.height, left: dimensions.left + scrollOffsets.x };
+					var actionDomRect = { top: dimensions.top + scrollOffsets.y - dimensions.height - 10, left: dimensions.left + scrollOffsets.x };
 					_this.setState({ actionDomRect: actionDomRect });
@@ -157,4 +152,4 @@ }
 		_this.editText = function (e) {
+			e.preventDefault();
 			var activeFormatting = _this.state.activeFormatting;
-			//e.preventDefault()
 
@@ -165,3 +160,4 @@ var action = e.currentTarget.dataset.action;
 					var link = prompt('Enter a link');
-					document.execCommand('insertHTML', true, '<a href=' + link + ' contenteditable="false" target="_blank">' + window.getSelection().toString() + '</a>');
+					// document.execCommand('insertHTML', true, `<a href=${link} target="_blank">${window.getSelection().toString()}</a>`)	
+					document.execCommand(action, false, link);
 				} else document.execCommand("unlink", false, false);
@@ -174,2 +170,17 @@ } else document.execCommand(action);
 
+		_this.getSelectedNode = function (e) {
+			// To get the parent node of the selected DOM element so that all the slected tags can be detected
+			if (document.selection) return document.selection.createRange().parentElement();else {
+				var selection = window.getSelection();
+				if (selection.rangeCount > 0) {
+					var parent = selection.getRangeAt(0).startContainer.parentNode;
+					if (parent !== e.target) while (parent.parentNode && parent.parentNode !== e.target) {
+						parent = parent.parentNode;
+					}
+					return parent;
+				}
+				return null;
+			}
+		};
+
 		_this.handleRangeSelection = function (e) {
@@ -179,5 +190,4 @@ var activeFormatting = _this.state.activeFormatting;
 			activeFormatting = [];
-			var node = e.target;
-			while (node.firstChild) {
-				node = node.firstChild;
+			var node = _this.getSelectedNode(e);
+			while (node) {
 				switch (node.nodeName) {
@@ -200,40 +210,7 @@ case 'A':
 				}
+				node = node.firstChild;
 			}
-			_this.setState({ activeFormatting: activeFormatting });
+			_this.setState({ activeFormatting: activeFormatting, currentType: e.target.getAttribute("placeholder") });
 		};
 
-		_this._createLink = function (link) {
-			var sel = void 0,
-			    range = void 0;
-			if (window.getSelection && (sel = window.getSelection()).rangeCount) {
-				range = sel.getRangeAt(0);
-				range.collapse(true);
-				var anchor = document.createElement("a");
-				anchor.href = link;
-				anchor.contentEditable = "false";
-				anchor.appendChild(document.createTextNode(window.getSelection().toString()));
-				range.insertNode(anchor);
-				// Move the caret immediately after the inserted span
-				range.setStartAfter(anchor);
-				range.collapse(true);
-				sel.removeAllRanges();
-				sel.addRange(range);
-			}
-		};
-
-		_this.handleMouseUp = function (e) {
-			e.persist();
-			var conElem = document.querySelector('[data-container-block="true"]');
-			if (conElem.offsetHeight < e.pageY) {
-				var appData = _this.props.appData;
-
-				var lastElem = appData.componentData[appData.componentData.length - 1];
-				if ((!lastElem || lastElem.componentType !== 'Text' || lastElem.content) && !_this.props.newPage) {
-					_this.props.addNewComponent({ id: lastElem && lastElem.id, componentType: 'Text' });
-				}
-			} else {
-				_this.props.removeCurrentElem();
-			}
-		};
-
 		_this.showTooltip = function () {
@@ -322,3 +299,4 @@ _this.setState({ showTooltip: true });
 			    actionDomRect = _state.actionDomRect,
-			    activeFormatting = _state.activeFormatting;
+			    activeFormatting = _state.activeFormatting,
+			    currentType = _state.currentType;
 			var appData = this.props.appData;
@@ -332,3 +310,4 @@
 					id: 'page-builder',
-					onMouseUp: isEdit ? this.handleMouseUp : undefined
+					onMouseUp: isEdit ? this.handleMouseUp : undefined,
+					onSelect: isEdit ? this.handleSelection : undefined
 				},
@@ -347,4 +326,3 @@ _react2.default.createElement(
 						isEditMode: isEdit,
-						onMouseUp: isEdit ? this.handleMouseUp : undefined,
-						onKeyDown: isEdit ? this.handleKeyPressList : undefined
+						onMouseUp: isEdit ? this.handleMouseUp : undefined
 					})
@@ -367,3 +345,5 @@ ),
 							'div',
-							{ className: activeFormatting.includes('bold') ? "bold-tool-btn-active" : "bold-tool-btn", onMouseDown: this.editText, 'data-action': 'bold' },
+							{ className: activeFormatting.includes('bold') ? "bold-tool-btn-active" : "bold-tool-btn", onMouseDown: !['Heading', 'Subheading'].includes(currentType) ? this.editText : function (e) {
+									e.preventDefault();
+								}, 'data-action': 'bold' },
 							'B'
@@ -370,0 +350,0 @@ ),

package.json

 {
   "name": "cm-page-builder",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "description": "Awesome react starter kit",
@@ -71,4 +71,6 @@ "main": "lib/page/index.js",
     "prop-types": "^15.7.2",
+    "react-dom": "^16.8.6",
     "react-redux": "^7.1.0",
     "react-transition-group": "^4.0.1",
+    "redux": "^4.0.1",
     "redux-thunk": "^2.3.0",
@@ -75,0 +77,0 @@ "sanitize-html": "^1.20.1",

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

127550

increased by0.1%

Worsened metrics

Dependency count

18

increased by12.5%

Lines of code

3038

decreased by-0.23%

Dependency changes

• + Addedreact-dom@^16.8.6

• + Addedredux@^4.0.1