[QUESTION] Adding new traits to component and update current ones with these
Question
I have some custom components created before modifying their traits (for example, I created a new trait for it), these components wont contain the new trait. If I drag a new component into the editor, it will have it.
Steps to reproduce:
- Create a custom component and compile the code
- Drag this custom component into the editor
- Save the changes to DB
- Modify the component by adding a new trait and compile again
- Load the components from DB
- Loaded components wont have the new trait
I load and save all the data into the database: styles, css, components,and html.
load(keys, clb, clbErr) {
// Load from model
const content = _model.template[_language.locale];
delete content.assets; // Delete assets if they exist
clb(content);
},
Is there a way to make the loaded components aware of the changes in the traits?
Answers (3)
@Lakshit-Singhal In that case I think the best option would be to create a custom plugin, and before you initialize GrapesJS, call the API, get the values and pass them in the initialization function via the plugin's options, that way they are present when the trait gets initialized. Check the documentation on how to create a custom plugin, or you can take a look at my plugins: GrapesJS Bootstrap 4 and GrapesJS Swiper Slider to get an idea.
This happens because the editor stores also traits information in components. You can delete this information be extending the component and updating its toJSON method
const typeModel = domc.getType('my-type').model;
domc.addType('my-type', {
model: {
...
toJSON() {
const result = typeModel.prototype.toJSON.apply(this);
delete result.traits;
return result;
}
}
})
ps: I think I'll remove traits from JSON in the next release. Perhaps many versions back that would have made sense, but now I'd not even recommend storing stuff in Traits
@artf this removed custom traits !! as I mentioned in #2007
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2226
[QUESTION] Updating a component type trait definition after init
I have created a custom component & block which is used to display/embed uploaded files. I have defined traits for this component see below...
Issue #2170
[QUESTION] Custom component - how to set editable to true
Hi, I've created a custom component type, but I am having some trouble making it editable. The component is a "span" with component type "t...
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 #701
Modifying a component in the editor clears the model content
What I'm trying to achieve: I have special "data-" attributes on some of the components I pull into the editor. When one of these is modifi...
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.