Initialize all the components with dynamic html tags style

[zee-algo]

I have a block which is like default user styles of some HTML tags like headings tags, p, img etc. I want to save this default element style and use in all over the application. In short, i want to initialize all that html tags with default style dynamically.
How can I achieve it?

[artf]

You can define components with default styles https://grapesjs.com/docs/modules/Components.html#components-css

[zee-algo]

@artf Thanks for reply.
I have page like global-theme-style where a user can set its default style of different multiple html tags, you can see in the screenshot attached below.

just imagine, user give a font-family serif to h1 tag.
Remember, I have many screens which contains multiple different types of blocks.
I want that all h1 tags (used in all grapesjs instances in other screens) should be initialize with font-family serif by default.

[artf]

You should be able to define custom default styles as described in docs, eg:

editor.Components.addType('h1', {
  isComponent: el => el.tagName === 'H1',
  model: {
    defaults: { styles: `h1 { color: red }` },
  },
});

Then if you want to change that specific style rule you can target it directly via getRule/setRule

// Update/create rule
editor.Css.setRule('h1', { color: 'blue' });

[zee-algo]

Hey @artf This is showing styles as implemented. But unfortunately, traits values are not updated accordingly in reality.
How can i assign the traits values dynamically on load dynamically?

[artf]

I don't think you should rely on traits here as you're editing styles globally for each H* element. It would make sense to make those inputs completely custom I guess