GrapesJS / grapesjs

Free and Open source Web Builder Framework. Next generation tool for building templates without coding
https://grapesjs.com
BSD 3-Clause "New" or "Revised" License
22.4k stars 4.06k forks source link

isComponent is not returning trait #709

Closed NicholasGati closed 6 years ago

NicholasGati commented 6 years ago

Happy new year! I am having an issue with isComponent(). Here is my code:

const log = msg => console.log(msg);

comps.addType('selectReference', {
    model: defaultModel.extend(
    {
      defaults: Object.assign({}, defaultModel.prototype.defaults, {
        traits: [
          {
            changeProp: true,
            type: 'select',
            label: 'Reference ',
            name: 'selectReference',
            options: [] // start out empty and dynamically add to the array
          }
        ]
      }),
      init: function() {
        this.listenTo(this, 'change:selectReference', this.selectSlideSection);
      },
      selectSlideSection: function(e) {
        const referencedSlideSectionId = e.changed['selectReference'];
        const currentSlideSectionId = e.attributes['section-id'];

        if (currentSlideSectionId != undefined && currentSlideSectionId != '') {
          //send to ajax function that saves reference 
          saveSlideSectionReference(currentSlideSectionId, referencedSlideSectionId);          
        } else {
          log(referencedSlideSectionId);
        }
      }
    },
    {
      isComponent: function(el) {
        const allowedToHaveReferences = ['type1', 'type2', 'type3'];
        if (el.tagName == 'SECTION' && allowedToHaveReferences.indexOf(el.id) > -1) {
          log('inside');
          return { type: 'selectReference' };
        }  
      }  
    }),
    view: defaultType.view.extend({
      render: function() {
        defaultType.view.prototype.render.apply(this, arguments);
        return this;
      }
    })
  });

For some reason the only time the trait shows up in component settings is when I remove the if-statement completely from isComponent() and just return { type: 'selectReference' }. However, it becomes a trait of everything then. I have checked the el.tagName values and they are what I expect them to be. I have also made sure that I have the correct el.id values. I even checked the if-statement itself and it does indeed pass through the if-statement logs the output correctly. So, I am confused as to why the trait is not being returned. Please help. Thank you!

artf commented 6 years ago

Hi Nicholas, are you defining selectReference inside a plugin?

NicholasGati commented 6 years ago

Hey Artur. Yes, it's inside of a plugin.

artf commented 6 years ago

Tried your code here https://jsfiddle.net/vv7sch2u/ and seems to work properly

NicholasGati commented 6 years ago

Hmm, this is interesting. In JsFiddle did you try this with the latest version of GrapesJS? I think my issue might be pertaining to the fact that I am using an older version of GrapesJS. I will let you know if switching the version helps.

NicholasGati commented 6 years ago

Hey Artur.

I switched to the newest version of GrapesJS and it actually broke everything. I am not sure what to do about isComponent if we can't use the newest version. There is too much code that we have written and the library does not seem backwards compatible for us to switch. It seems that certain things are no longer in the newer versions that were in the older ones and there are no explanations as to what the replacement of each removed thing is. Maybe there is a workaround to fix isComponent? What was changed from older versions to make it so that there are no longer issues with isComponent?

Thanks!

artf commented 6 years ago

it actually broke everything

I'd appreciate more information. Do you have errors in console? From which version are you trying to switch?

It seems that certain things are no longer in the newer versions that were in the older ones

Exactly, what are you talking about? If I remove something from the core (as I did with default blocks) generally I replace it with some plugin/s

and there are no explanations as to what the replacement of each removed thing is

All changes are tracked here https://github.com/artf/grapesjs/releases

Maybe there is a workaround to fix isComponent

I didn't make any change with isComponent itself, so I guess it's something else. Are you able to provide some live example of the problem?

lock[bot] commented 5 years ago

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.