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', na...
Answers (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 wil...
Another 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 imp...
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
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
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.