Error when including a custom component inside another block

Question

Sorry for the vague title. I'm not sure how to describe this concisely. I have a custom block where i want to restrict that only images can be dropped into a certain part of the block. I tried something like this:

  comps.addType('image-container', {
    model: defaultModel.extend({
      // Extend default properties
      defaults: Object.assign({}, defaultModel.prototype.defaults, {
        // Can only drop these elements inside it
        droppable: "img",
      }),
    },
    {
      isComponent: function(el) {
        if(el.tagName == 'DIV' && $(el).hasClass("image-container")){
          return {type: "image-container"};
        }
      },
    })
  });

  blockManager.add('test-with-image-container', {
    label: 'Test Block With Image Container',
    attributes: {class:'fa fa-pencil'},
    content: '<div class="test-block">You can drop an image below:<div class="image-container"></div></div>',
    category: 'Blocks',
  });

However, when I do this, trying to drag the block off the block palette raises the following error:

... grapes.min.js:2 Uncaught TypeError: s is not a constructor at F.i.addToCollection (VM6196 grapes.min.js:2) at VM6196 grapes.min.js:2 at Function.C.each.C.forEach (VM6196 grapes.min.js:2) at F.i.each (VM6196 grapes.min.js:2) at F.i.render (VM6196 grapes.min.js:2) at F.i.renderChildren (VM6196 grapes.min.js:2) at F.i.render (VM6196 grapes.min.js:2) at F.i.addToCollection (VM6196 grapes.min.js:2) at F.i.addTo (VM6196 grapes.min.js:2) at y (VM6196 grapes.min.js:2) ...

Any advice? Is there a better way to accomplish what I want to do?

Thanks!

Answers (3)

roytang• November 5, 20171 reactions

Seeing as how your comment fixed the original error I encountered, I'll close this comment and post a separate one for my questions about usage of the droppable property.

artf• October 30, 20170 reactions

The view is mandatory when you're defining a new Component type

comps.addType('image-container', {
    model: defaultModel...
    view: defaultView;
  });

roytang• November 4, 20170 reactions

Thanks! Adding the defaultView did indeed get rid of the error, but I'm still unable to do what I want - I can't seem to drop an image inside the "image-container" part of the sample above. When I try to drop the an image component there, it's inserted into the containing "test-block" instead.

My test code is now:

  comps.addType('image-container', 
  {
    model: defaultModel.extend(
    {
      // Extend default properties
      defaults: Object.assign({}, defaultModel.prototype.defaults, 
      {
        // Can only drop these elements inside it
        droppable: "img",
      }),
    },
    {
      isComponent: function(el) 
      {
        if(el.tagName == 'DIV' && $(el).hasClass("image-container"))
        {
          return {type: "image-container"};
        }
      },
    }),
    view: defaultView
  });

  blockManager.add('test-with-image-container', 
  {
    label: 'Test Block With Image Container',
    attributes: {class:'fa fa-pencil'},
    content: '<div class="test-block">You can drop an image below:<div class="image-container"></div></div>',
    category: 'Blocks',
  });

Am I using the "droppable" property incorrectly? It just needs to be a CSS selector right?

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.

Presets Plugins Components Blocks Assets Commands I18n Layers Styles Storages RTE Newsletters Web pages Site builders

Error when including a custom component inside another block

Question

Answers (3)

Related Questions and Answers

Can I restrict what blocks that can be dropped into a container

How to enable functionality only for specific image component, not all

[Question] Any/Trigger event when any block is dropped inside canvas?

[QUESTION] Create custom selected component settings

Paid Plugins That Match This Issue

Browse Plugin Categories