Make the `toRequire` work also with IDs of the property

dist/grapes.js

@@ -27685,6 +27685,8 @@ module.exports = {
 "use strict";
 
 
+var _underscore = __webpack_require__(/*! underscore */ "./node_modules/underscore/underscore.js");
+
 module.exports = {
   /**
    * Check if fullscreen mode is enabled
@@ -27738,11 +27740,16 @@ module.exports = {
     }
   },
   run: function run(editor, sender) {
+    var opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+
     this.sender = sender;
-    var pfx = this.enable(editor.getContainer());
+    var target = opts.target;
+
+    var targetEl = (0, _underscore.isElement)(target) ? target : document.querySelector(target);
+    var pfx = this.enable(targetEl || editor.getContainer());
     this.fsChanged = this.fsChanged.bind(this, pfx);
     document.addEventListener(pfx + 'fullscreenchange', this.fsChanged);
-    if (editor) editor.trigger('change:canvasOffset');
+    editor.trigger('change:canvasOffset');
   },
   stop: function stop(editor, sender) {
     if (sender && sender.set) sender.set('active', false);
@@ -34936,10 +34943,12 @@ module.exports = _backbone2.default.View.extend({
    * */
   updateAttributes: function updateAttributes() {
     var model = this.model;
-    var defaultAttr = {
+    var defaultAttr = { 'data-gjs-type': model.get('type') || 'default' };
-      'data-gjs-type': model.get('type') || 'default',
+
-      'data-highlightable': model.get('highlightable') ? 1 : ''
+    if (model.get('highlightable')) {
-    };
+      defaultAttr['data-highlightable'] = 1;
+    }
+
     this.$el.attr(_extends({}, defaultAttr, model.getAttributes()));
     this.updateStyle();
   },
@@ -38082,7 +38091,7 @@ module.exports = function () {
     plugins: plugins,
 
     // Will be replaced on build
-    version: '0.14.40',
+    version: '0.14.41',
 
     /**
      * Initialize the editor with passed options
@@ -42366,7 +42375,7 @@ var Selector = Backbone.Model.extend({
    * @private
    */
   escapeName: function escapeName(name) {
-    return ('' + name).trim().replace(/([^a-z0-9\w-]+)/gi, '-');
+    return ('' + name).trim().replace(/([^a-z0-9\w-\:]+)/gi, '-');
   }
 });
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "grapesjs",
-  "version": "0.14.40",
+  "version": "0.14.41",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "grapesjs",
   "description": "Free and Open Source Web Builder Framework",
-  "version": "0.14.40",
+  "version": "0.14.41",
   "author": "Artur Arseniev",
   "license": "BSD-3-Clause",
   "homepage": "http://grapesjs.com",

src/style_manager/model/Property.js

@@ -30,8 +30,9 @@ const Property = require('backbone').Model.extend(
     },
 
     initialize(props = {}, opts = {}) {
-      var name = this.get('name');
+      const name = this.get('name');
-      var prop = this.get('property');
+      const prop = this.get('property');
+      !this.get('id') && this.set('id', prop);
 
       if (!name) {
         this.set(
@@ -39,6 +40,7 @@ const Property = require('backbone').Model.extend(
           prop.charAt(0).toUpperCase() + prop.slice(1).replace(/-/g, ' ')
         );
       }
+
       Property.callInit(this, props, opts);
     },
 

src/style_manager/view/PropertyView.js

@@ -392,6 +392,7 @@ module.exports = Backbone.View.extend({
   isTargetStylable(target) {
     const trg = target || this.getTarget();
     const model = this.model;
+    const id = model.get('id');
     const property = model.get('property');
     const toRequire = model.get('toRequire');
     const unstylable = trg.get('unstylable');
@@ -411,7 +412,10 @@ module.exports = Backbone.View.extend({
 
     // Check if the property is available only if requested
     if (toRequire) {
-      stylable = (stylableReq && stylableReq.indexOf(property) >= 0) || !target;
+      stylable =
+        !target ||
+        (stylableReq &&
+          (stylableReq.indexOf(id) >= 0 || stylableReq.indexOf(property) >= 0));
     }
 
     return stylable;