thank you for your answer 🙏
it may be easier for me to do a plugin, what do you think?
i'm not familiar with backbone, i can learn but i would have questions
the main symbols should be on a collection in editor.Symbols?

The backbone is used here mainly as a simple event emitter, so not a big deal.
I'd say the main symbols should be collected at the Component module level (similar to how all other components are tracked via editor.Components.componentsById).
The next step would be to properly store them on the JSON project (via editor.Components.store/load).

{
 assets: [...],
 styles: [...],
 pages: [...],
 // New collection
 symbols: [...],
}

About the plugin, I still think it might be better to keep this functionality in the core due to a strict relation with the base component and the JSON project data but idk, I guess it might also depend on how well the plugin could play in this scenario.

Ok thank you for the answer

I started learning backbone, i never thought i would one day 😅

The concept would be this ?

• every time a component is created/deleted, we check if it is a symbol and add/remove it to/from the Symbol
• no more "master" component
• every time a component related to a symbol is updated we update the other components of its symbols (2 way sync) or only if it asks us to (1 way sync)?

Here is what i understand i should do

1. split the symbols related features from CssRule.js, Component.js to Symbol.js
2. from Components.js to Symbols.js
3. add the Symbols collection (editor.Symbols)
4. save the symbols (minus the components which are maintained at runtime)

FYI: I updated the "roadmap" with my progress, take a look at the demo to see how it is working so far
https://codepen.io/lexoyo/pen/xxJGEwo

cc @artf

Maybe easier with a video
https://youtu.be/hR0GXWF-_vc

Hi @lexoyo sorry for the late reply, thanks for updating about your progress, it looks really good.
I can confirm about the list of events and also the intention of component:update:components trigger during new component drag. It's used to create (first event) and remove (second event) a temporary component from the block content in order to understand where the component can be dropped.
I think in the future the internal creation action in the Sorter will be replaced by this method, but for now, component:update:components provides options containing information about temporary actions.

Thank you @artf !
A question for when you will have time: when I sync the changes of a text element, the cursor is sent back to the beginning of the element. Do you know why? Is it normal? Is it on grapesjs side or on my side maybe?
I'll investigate, just asking in case you know this behavior

Thank you @artf ! A question for when you will have time: when I sync the changes of a text element, the cursor is sent back to the beginning of the element. Do you know why? Is it normal? Is it on grapesjs side or on my side maybe? I'll investigate, just asking in case you know this behavior

this is still a problem :)

Awesome work @lexoyo ❤️ I'll try to find time to review it

I'm still working on it and it still have several important bugs, so no hurry, but i'd apreciate it greatly at one point

bump @artf for the review, but I understand if it is too much to ask 🙏

also I have a question: I don't find an event to detect a component style change (i tried component, component:update, component:update:style, component:styleUpdate, change, style, selector)

I have a question: I don't find an event to detect a component style change (i tried component, component:update, component:update:style, component:styleUpdate, change, style, selector)

In the end I sync "inline" styles on styleable:change: https://github.com/silexlabs/grapesjs-symbols/blob/main/src/model/Symbols.js#L145

Hi I am not sure I understand, would you open an issue here and explain what is the error etc ?
https://github.com/silexlabs/grapesjs-symbols/issues/new

Hello
Not sure what you mean but symbols are not useful accross tabs
Please create another issue