BUG: After JSON.stringify Components have not all fields
Question
GrapesJS version
- I confirm to use the latest version of GrapesJS
What browser are you using?
Chrome
Reproducible demo link
https://jsfiddle.net/sdimitrenco/rn8u4pc0/7/
Describe the bug
I'm not sure it's a bug or not, but for me, behavior look strange
I have a component List that includes, component ol and component li.
That code for block
{
id: 'list',
label: 'List',
category: 'Typography',
media: `<svg ....
</svg>
`,
content: {
type: 'list'
}
That model for the component list
grapes.DomComponents.addType('list', {
model: {
defaults: {
type: "list",
tagName: 'div',
editable: true,
droppable: false,
components: [
{
type: "ol",
tagName: 'ol',
droppable: false,
}
]
}
}
})
That model for the ol component
grapes.DomComponents.addType('ol', {
model: {
defaults: {
type: "ol",
tagName: 'ol',
components: [
{
type: 'li',
tagName: 'li',
}
]
}
}
})
And the model for the li component
grapes.DomComponents.addType('li', {
model: {
defaults: {
type: 'li',
tagName: 'li',
droppable: true,
attributes: {},
toolbar: [
// these are the default toolbar elements
{
attributes: {class: 'fas fa-list-ul'},
command: 'change-style-list'
},
{
attributes: {class: 'fa fa-arrow-up'},
command: 'select-parent'
},
{
attributes: {class: 'fas fa-arrows-alt'},
command: 'tlb-move'
},
{
attributes: {
class: 'far fa-clone',
},
command: 'tlb-clone',
},
{
attributes: {class: 'fa fa-trash'},
command: 'tlb-delete'
}
],
components: [
{
tagName: "span",
droppable: false,
type: "text",
components: [
{
type: "textnode",
content: "Type your text"
}
]
}
]
}
}
})
As you can see all models include types and tag Names, and inside grapes it work correct, but if I try convert it to json, like JSON.stringify(this.grapesInstance.getComponents()) I have json where missed all field with tagName, and it will looks like that
[
{
"type": "list",
"components": [
{
"type": "ol",
"droppable": false,
"components": [
{
"type": "li",
"components": [
{
"tagName": "span",
"type": "text",
"components": [
{
"type": "textnode",
"content": "Type your text"
}
]
}
]
}
]
}
]
}
]
I can't catch why it "tagName" lost. If I delete the custom type, the "tagName" serialized to json. I can't understand this rule.
Code of Conduct
- I agree to follow this project's Code of Conduct
Answers (1)
If the property is of the same value as the default definition, it's skipped. This is controlled by avoidDefaults config option and it's highly recommended to keep it true to have small JSONs as possible.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #5199
BUG: Changes in component's attributes being reproduced in all the instances instead of just one
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v114 Reproducible demo link https:/...
Issue #6409
BUG: Cannot drag to move components on mobile
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v133 Reproducible demo link https:/...
Issue #4323
BUG: Performance issue while dragging component to canvas when you have 2k component on canvas
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Google Chrome Version 101.0.4951.41 (Officia...
Issue #5990
BUG: When you delete a component, duplicate classes between components will be deleted.
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome 126.0.6478.127(Windows) Reproducibl...
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.