Issue #2697Opened April 2, 2020by kuhelbeher1 reactions

[QUESTION] Problem with custom component type and table cell

Question

Hello! I'm trying to add custom component type:

  domc.addType('image-block', {
    extend: 'cell',
    model: {
      defaults: function () {
        return {
          name: 'Background image',
          type: 'image-block',
          tagName: 'td',
          void: false,
          droppable: true
        }
      }
    },
    isComponent (el) {
      if (el.tagName === 'TD' && el.classList.contains('bg-image')) {
        return { type: 'image-block' }
      }
    }
  })

And also I'm adding new block:

bm.add('image-block', {
    label: 'Background Image',
    category: 'Basic',
    content: `
      <table width="100%" class="bg-image-wrapper">
        <tbody>
          <tr>
            <td class="bg-image">
            </td>
          </tr>
        </tbody>
      </table>
      <style>
        .bg-image-wrapper {
          min-height: 200px;
        }
        .bg-image {
          background-image: url(https://i.pinimg.com/564x/cd/54/01/cd5401f170307b0fbf6cb28fb62e69f7.jpg);
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
        }
      </style>
    `

But when I drop this block on the canvas the <td> tag doesn't appear on canvas and DOM. If I remove isComponent function from component definition, it works as expected. Could I get help with this?

Answers (3)

artfApril 16, 20201 reactions

@kuhelbeher your code is correct (except is extend: 'cell', and not extends: 'cell',), unfortunately, there is a bug (or a bad logic) applied on the row component, so, for now, I'd suggest adding this as a patch:

const modelDefault =  domc.getType('default').model;
domc.addType('row', {
    model: {
      initialize() {
        modelDefault.prototype.initialize.apply(this, arguments);
      },
    }
});

and now it should work: https://jsfiddle.net/corasd1h/

noogenApril 5, 20200 reactions

@kuhelbeher because your component is a table per your content definition above and not a td as defined in your addType of tagName property?

kuhelbeherApril 6, 20200 reactions

@noogen I don't think the problem is with this. I tried to define component and block like this:

  domc.addType('custom-cell', {
    extends: 'cell',
    model: {
      defaults: {
        removable: false,
        name: 'Custom cell',
        type: 'custom-cell',
        copyable: false,
        tagName: 'td'
      }
    }
  })

  bm.add('root', {
    label: 'Page Wrapper',
    category: opt.category,
    content: `
        <table width="400px">
          <tbody>
            <tr>
              <td data-gjs-type="custom-cell">
              
              </td>
            </tr>
          </tbody>
        </table>
    `,
  })

But the problem remains - td tag (and all what is inside of it) doesn't appear on canvas, Maybe I'm doing something wrong? I am trying to create new component type from built-in 'cell' type but it should be in table. Thats why I created new block. Maybe you can suggest some other solution?

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.