Issue #2657Opened March 16, 2020by Podvodila0 reactions

[Bug]: custom style property is not working when toRequire attribute is set

Question

  1. Are you using the latest release (older versions are NOT supported)? Yes
  2. What is the expected behavior? Custom style property applying to component
  3. What happens instead? Custom style property is not working
  4. Steps to reproduce
  • select Box component
  • try to change Box Width style property (under Custom tab) image

When I add custom style property(flex) with toRequire: 1 parameter then custom style is not working. When I mark toRequire as 0 then style property work as expected.

JSFiddle with toRequire: 1 - https://jsfiddle.net/rjw7Lq93/1/ JSFiddle with toRequire: 0 - https://jsfiddle.net/rjw7Lq93/2/

Answers (3)

PodvodilaMarch 18, 20200 reactions
Code SnippetTEXT
I managed to hotfix it by extending `isTargetStylable` method inside PropertyView.js - https://github.com/artf/grapesjs/blob/85b7b82103e12fb01a3700b1002a57a7b60ccaf1/src/style_manager/view/PropertyView.js#L504-510

I replaced this

> if (toRequire) {
      stylable =
        !target ||
        (stylableReq &&
          (stylableReq.indexOf(id) >= 0 || stylableReq.indexOf(property) >= 0));
    }

with this 

> if (toRequire) {
                        stylable =
                            !target || 
                             trg.cid === this.getTarget().cid || 
                            (stylableReq &&
                                (stylableReq.indexOf(id) >= 0 || stylableReq.indexOf(property) >= 0));
                    }

It seems that the wrong `target` parameter comes inside the method on component style change

JSFiddle with extended PropertyView - https://jsfiddle.net/6zf03t9w/
PodvodilaMarch 18, 20200 reactions
Code SnippetTEXT
Offtop
I don't want to create another topic, just want to say that in the same method(isTargetStylable) that would be better to replace searching for property with id(as I understand for the built-in styles, it is the same as the property) inside unstylable(as well as stylable) check 

> if (_.isArray(unstylable)) {
          stylable = unstylable.indexOf(property) < 0;
        }

->

> if (_.isArray(unstylable)) {
          stylable = unstylable.indexOf(id) < 0;
        }

Since I had a problem with displaying a custom style for a component of the same property as the built-in one. (in my application, the built-in style should be displayed for some components, and custom for others)
artfApril 3, 20200 reactions

would be better to replace searching for property with id(as I understand for the built-in styles, it is the same as the property) inside unstylable(as well as stylable) check

Yeah, totally correct!

Honestly, I use toRequire option and never seen this kind of issue so I'm not sure why this happening. Would you mind to create a PR with your fixes (maybe I'll try to investigate better)?

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.