[QUESTION] Problem with custom component type and table cell

[kuhelbeher]

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 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?

[noogen]

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

[kuhelbeher]

@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?

[artf]

@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/