[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)
@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/
@kuhelbeher because your component is a table per your content definition above and not a td as defined in your addType of tagName property?
@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.
Issue #2696
[QUESTION]: How can I create block with background image with behavior like built-in "image"?
Hello, I'm trying to create block with background image (similar to Grapedrop Image Box). I added new component like this: And also I added...
Issue #2777
[QUESTION] How to update styles in Style Manager
Hello. I created custom component where I set backgraound-image via custom asset manager Custom block code: Command which I run to set new...
Issue #2359
Absolute mode, component's style missing when dragged into canvas
Hi guys, I'm working with grapesjs which version is '0.15.8', and in 'absolute' mode when I drag a block into canvas, I find the styles of...
Issue #2103
[QUESTION] Custom Component dragging issue
This is how I've created a custom component: This is my custom block: The thing is that I have wrapped the image tag inside <a> tag when it...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.