Symbols

[lexoyo]

Hello
I am integrating grapesjs in silex 🎉 (I will release as much grapesjs plugins as I can)
My question is about symbols, I guess it will be for @artf 🙏
Do you think I should use your POC (and contribute if I can?) or create a separate plugin to manage all syncs?
I guess the only problem with the POC is that the symbol is added to the page as you said in the PR

[artf]

Awesome @lexoyo
I'd say I'm ok with having symbols in the core (maybe it would be worth moving all the related methods outside of the Component to make it more readable) but as you mentioned the main issue right now is not providing the way to store the main symbols properly.

[lexoyo]

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?

[artf]

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.

[lexoyo]

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)

[lexoyo]

I ended up doing it as a plugin and not using your implementation of Symbols @artf :-/

I feel like I need to validate what I am doing as it could be a nice plugin for everyone. Also I definitely can hear a "that is not the way to go", please don't be gentle and let's discuss it with anyone / everyone

Here is what I did for now

On editor load

• editor.Symbols = new Symbols([], { options, editor }), this is a collection of symbols, each symbol has a components list
• new SymbolsView(editor.Symbols, { options, editor }), this is the list of symbols, draggable to the stage
• Storage(editor, opts) => adds the symbols key to the saved/loaded data (saved data does not contain the symbols components lists)

On storage:end:load I browse all components and update all the symbols components lists

On component:create and component:remove I maintain the symbols components lists up to date

On drop from the list I create a new element with the symbols json

The WIP code is here

The list of symbols looks like this, with the number of components for each symbol:

Here is my todo list / what I plan to do next

EDIT: todo list moved here

[lexoyo]

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

[lexoyo]

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

[artf]

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.

[lexoyo]

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

[lexoyo]

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 :)

[lexoyo]

I'm very happy about how it goes for now, grapesjs is really awesome @artf

The synchro of instances between pages works now and the symbols in symbols too

Would anyone test it and let me know what bugs they have?

Also I put many TODO: Needs review in specific places, in case you have time @artf : https://github.com/silexlabs/grapesjs-symbols/search?q=%22TODO%3A+needs+review%22

🚀

[artf]

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

[lexoyo]

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

[lexoyo]

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)

[lexoyo]

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

[lexoyo]

Another question, this is probably stupid but I struggle with carret position

When I change the text content of a component in a symbol, I update all other occurences with occurence.components(changed.getCurrentView().getContent()) and this seems to reset the carret position in changed to 0

I can't get the carret position with window.getSelection(), because never has any range in the callback of editor.on('component:input'

Would anyone have a pointer?

[lexoyo]

Hello @artf
I guess you're busy and that's very ok, I just hope you're fine
I figured everything out, all the important and touchy features are implemented
DEMO
Repo
I will battle test it on Silex soon
Thank you for your help!!

[artf]

Sorry Alex, unfortunately it's a bit an hectic period right now so can't really find time to check your implementation but I'm happy to hear you were able to figure it out by yourself.

[lexoyo]

No worries!

[Samkanda]

Hey, how would you import this package in react(nextjs). I am getting a module not found when I attempt it. Issue is in error tab as well with screen shot

[lexoyo]

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

[rokon-rabbi]

hello! i want to use html and css code that is generated and with that i want to show new webpage in another tab. how to solve this?

[lexoyo]

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