[QUESTION] documentation of stored object structure
Question
Hey,
I would like to incorporate this package with my existing element based backend. To do so I would need to map the data posted to the remote storage server into my own data structure and during load also back to grapesjs structure.
So for a super basic example I've took the simple heading element <h1> which is also used in the package documentation.
<h1>Hello World Component!</h1>
In my app this would be a twig template with a single placeholder:
<h1>{{ headline}}</h1>
The datastructure would be the following, I use JSON no DB but the idea should be clear:
[
{
"type": "h1",
"data": {
"headline": "Hello World Component!"
}
}
]
And this is what I can dump from the simple-storage manager (also from documentation) using the following console.log(). Could you add a documentation page related to the object created for a component in the storage? Primary to know what's required to pass and what's optional?
console.log(JSON.parse(data['gjs-components']));
[
{
"tagName":"h1",
"type":"text",
"name":"",
"removable":true,
"draggable":true,
"droppable":false,
"badgable":true,
"stylable":true,
"stylable-require":"",
"style-signature":"",
"unstylable":"",
"highlightable":true,
"copyable":true,
"resizable":false,
"editable":true,
"layerable":true,
"selectable":true,
"hoverable":true,
"void":false,
"state":"",
"status":"",
"content":"Hello World Component!",
"icon":"",
"style":"",
"classes":[
],
"script":"",
"attributes":{
},
"traits":[
{
"type":"text",
"label":"",
"name":"id",
"min":"",
"max":"",
"unit":"",
"step":1,
"target":"",
"default":"",
"placeholder":"eg. Text here",
"changeProp":0,
"options":[
]
},
{
"type":"text",
"label":"",
"name":"title",
"min":"",
"max":"",
"unit":"",
"step":1,
"target":"",
"default":"",
"placeholder":"eg. Text here",
"changeProp":0,
"options":[
]
}
],
"propagate":"",
"dmode":"",
"components":[
],
"view":""
}
]
Answers (1)
You can see all the Component's properties here: https://grapesjs.com/docs/api/component.html#component and none of them are required
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1429
Empty content when load from remote storage if components array is not empty
I have problem loading stored remote content into the editor when the JSON contains non empty gjs-components My JSON data looks like this w...
Issue #2808
[QUESTION] Custom type component in production environment
Hi, I have a question, when I create a custom type component from the editor, what would be the next step to show that component in my appl...
Issue #3019
[QUESTION] - Bind inner text/html (like div, p, h1) to Trait
Hi! I've created a custom trait, and I want to be allowed to change the content of the tags (in this case it's a H1 tag) based on the trait...
Issue #2917
BUG: Style Manage does not hide style blocks
Hey @artf, I'm trying to hide style properties based on the selected element. for example, when I drag and drop an image on my GrapesJS, I...
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.