[Bug] Components with custom tag are not rendered if specified in theme body
Question
Hello I created very simple skeleton of GrapesJS editor. HTML template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
</head>
<body>
<div id="gjs">
<test-tag></test-tag>
</div>
</body>
</html>
Javascript:
import 'grapesjs/dist/css/grapes.min.css'
import grapesjs from 'grapesjs';
var editor = grapesjs.init({
autorender: 0,
container: '#gjs',
fromElement: true,
storageManager: {type: null},
});
// Get DomComponents module
var comps = editor.DomComponents;
var defaultType = comps.getType('default');
comps.addType('test-component-type', {
model: {
defaults: {}
},
view: {
tagName: 'div',
render: function () {
defaultType.view.prototype.render.apply(this, arguments);
var element = document.createElement("h1");
element.innerText = "TEST-COMPONENT OK";
this.el.appendChild(element);
return this;
}
},
});
editor.render()
editor.BlockManager.add('test-block', {
label: 'Test Block',
content: {
type: 'test-component-type'
}
});
Result of loading:
As you see, component is not rendered.
But if I drop blocks manually, everything is ok:
If I change template and set data-gjs-type attribute to <test-tag data-gjs-type="test-component-type"></test-tag> value, everything works too.
I tried also construction with isComponent defined but with the same result. Custom tags, specified in templates are not rendered on page load.
Looks like bug, or maybe I'm wrong somewhere and additional render calls required?
Thanks.
Answers (3)
There are 2 issues:
- You forgot to specify
isComponent(used in the parsing process)
comps.addType('test-component-type', {
isComponent: el => el.tagName === 'TEST-TAG',
view: {
// use onRender hook instead of render
onRender() {
const el = document.createElement("h1");
el.innerText = 'TEST-COMPONENT OK';
this.el.appendChild(el);
}
},
});
- Currently, new component types are not working for the initial template, so the only way is to add them via plugins (I didn't find time to see why it's happening)
@artf , thank you for your answer, but I also
tried also construction with
isComponentdefined but with the same result.
whatever, I implemented this feature via plugins as you mentioned.
Have no idea why new component types don't work too, I will crate a PR if will figure out.
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1173
Head tag data displaying in body and head is showing empty
Hi Artf there is head tag and meta tags in my head tag of HTML i am assigning to editor components. Like But it is displaying <head> conten...
Issue #1699
[BUG] Link elements are not copyable/deletable
In the editor, if we have link element with some classes, the editor does not allow to copy/delete the element. GrapesJS version: v0.14.50S...
Issue #1746
[FEATURE REQUEST] Don't Strip off html , head and body tags from imported html
Hi Team, We have noticed grapesjs has customised the actual template uploaded, by stripping off the html, head and body tags and adds new s...
Issue #626
Placing non-editable HTML around wrapper
My CMS works like this: sites can have one theme and many templates under that theme. Themes are rendered on every page, and templates are...
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.