Custom type unrecognized on import
Hi, for the record, when i try to change the isComponent return, with a type defined in a plugin like this : isComponent: el => { if (el.tagName === 'DIV' && (typeof el.classList !== 'undefined' && el.classList.contains('imagelink-class'))) { return { type: 'marketing-button' }; } }, the import will recognize my <div>...
Read full answer below ↓Question
Hi,
i succeed to create a new type containing a clickable image. But unfortunaltely, the new custom type isn't recognize by the HTML parser on import.
Here is my new type source code :
`editor.DomComponents.addType('imagelink', {
isComponent: el => {
if (el.tagName === 'DIV' && (typeof el.classList !== 'undefined' && el.classList.contains('imagelink-class'))) {
return { type: 'imagelink' };
}
},
model: {
defaults: {
tagName: 'div',
resizable: {keepAutoHeight: true},
attributes: {class: 'imagelink-class', "data-type": "imagelink"},
droppable: false,
traits: [
{
type: 'href', label: 'Source', name: 'href'
},
{
type: 'select',
label: 'Target',
name: 'target',
options: [
{ value: '', name: 'This window' },
{ value: '_blank', name: 'New window' }
]
}
],
components: [
{
resizable: false,
draggable: false,
droppable: false,
selectable: false,
hoverable: false,
type: 'link',
components: [{
type: 'image',
attributes: {
src: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImZpbGw6IHJnYmEoMCwwLDAsMC4xNSk7IHRyYW5zZm9ybTogc2NhbGUoMC43NSkiPgogICAgICAgIDxwYXRoIGQ9Ik04LjUgMTMuNWwyLjUgMyAzLjUtNC41IDQuNSA2SDVtMTYgMVY1YTIgMiAwIDAgMC0yLTJINWMtMS4xIDAtMiAuOS0yIDJ2MTRjMCAxLjEuOSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMnoiPjwvcGF0aD4KICAgICAgPC9zdmc+',
style:'width:100%;'
},
resizable: false,
draggable: false,
droppable: false,
hoverable: false,
selectable: false,
}]
}
]
},
init() {
this.on('change:attributes:href', this.handleHrefChange);
this.on('change:attributes:target', this.handleTargetChange);
},
handleHrefChange: function ( component, value ) {
delete component.attributes.attributes.href;
delete component.attributes.attributes.target;
component.attributes.components.models[0].attributes.attributes.href = value;
return false;
},
handleTargetChange: function ( component, value ) {
delete component.attributes.attributes.href;
delete component.attributes.attributes.target;
component.attributes.components.models[0].attributes.attributes.target = value;
return false;
},
},
});`
I precise the definition of the new type is include in a plugin, which is passed in the editor initialization :
var editor = grapesjs.init({
....
plugins: [myplugin];
...
}
I tried to use the isComponent parameter to do so, the condition is good, but the plugin render all the dom components separately (`<img>` and `<a>`) instead of the "imagelink" type. So when i click on the image, i can't change the traits defined in my type.
I think i'm missing some points, but i can't figure it out... Could you please tell me what's wrong ?
I know it is possible, for example the plugin 'gjs-social' and its type 'Social-link-block' works perfecty...
Best regardsAnswers (3)
Hi,
for the record, when i try to change the isComponent return, with a type defined in a plugin like this :
`isComponent: el => {
if (el.tagName === 'DIV' && (typeof el.classList !== 'undefined' && el.classList.contains('imagelink-class'))) {
return { type: 'marketing-button' };
}
},`
the import will recognize my `<div><a><img></a></div>` DOM results as a marketing-button (defined in the plugin grapesjs-block-avance
I think i miss something in the type definition to help grapesjs to recognize my type on import....
Best regardsAnother curiosity which might be logical... If i tried to put a exotic isComponent function like this :
if (el.tagName === 'ABCDE') { return { type: 'imagelink' }; }
And when i try to import this html text :
<abcde>test</abcde>
The plugin detect correctly my "imagelink" custom type.
BUT, when i import this html text :
<abcde><img src="ggggg"></abcde>
it didn't work. I guess the plugin stil go further in the component recognition and detect the IMG and A dom, and override so the detection...
I think you're missing the point of components. You have a custom one (imagelink) and then an inner one (img), so the editor shows it, so I see no issues here. To see the traits from the custom component you have to select it and it has nothing to do with the inner image
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3228
Component Value is not changing
Hi @artf I've added a new component here is the code on selecting the h1 and h2 tag it's changing the value in the HTML section as you can...
Issue #3136
Create one more key in JSON
{ "type": "text", "status": "hovered", "content": "Insert your text here", "attributes": { "id": "ixx2" }, "activeOnRender": 0, "open": fal...
Issue #2549
[QUESTION] Update component view on property change
Hi everyone, I'm trying to create a component that will update it's view based on a property value My approach is bassed on #1227 and on th...
Issue #2614
[QUESTION] Recursive view update of custom component
Hi, I have defined a custom type like: I want to keep the customTag in my model and show the content (HTML) in the view. However, in the co...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.