Hello
I just saw your PR, thank you, that's a good surprise :)
Sure I would love some help, I will share my todo list here then
You need symbols for a project of yours?
I need this plugin for the next version of silex.me
Have a great day

Yes, I need symbols for a project I'm working on.

My end goal is to be able that whenever a symbol style/attributes/selection changes all the other instances of that symbol get updated.

Looking forward to seeing your todo list :)

Great :)

Here is my todo

• Backbone models for Symbols and Symbol
• Commands to create/delete symbol instances
• Mechanism to store the updated component's json in order to create new components out of the symbol
• Mechanism to track components inside Symbol instances and to apply a change to all occurrences of a component
• Sync attributes
• Sync css classes / selectors
• Sync children
• Sync nested children
• Sync styles
• Handle symbols in symbols
• Handle move a child from a symbol directly to another symbol
• Support pages
• Prevent dropping a symbol into itself (tip on how to prevent drop and here too)
• Prevent dropping from the stage a symbol child into the same symbol (or handle it as a move)
• Prevent dropping from the symbols pane a symbol child into the same symbol (or handle it as a move)
• Prevent make a symbol when it is a symbol already
• Support for making a component a symbol when the component is in a symbol (add symbol id to all instances)
• Symbols wording / UI #4 (opionion wanted)
• Tag name support
• Undo redo support
• Rename symbol
• Add a trait for all symbols instances: unlink/pause sync

Bugs

• when you delete something that is not in other instances it deltes everything
• Deleted symbols keep the symbol icon #6 (help wanted)
• drop a quote in a symbol, then drag it to an other instance of the same symbol => the whole instance disappears
• drop a "link block" component in a symbol changes its properties for: display: inline-block; min-height: 50px; padding: 5px;
• change text inside a symbol then undo will undo the change only in the instance you changed

It would be great to collaborate - eventually I'll transfer this repo to the Silex Labs org (the foundation which holds silex copyright)

Have a nice day !

Thank you for sharing your to-do list, it helps a lot.

I already started to look at those three, I'll try to open a PR this week

• Sync attributes
• Sync styles
• Sync CSS classes / selectors

👍

hey @BentoumiTech i'm back on the subject
it seems all broken, i hope you didn't struggle with my non working code

we should probably use

https://www.npmjs.com/package/morphdom

I'm also interested on the idea of this project but I'm not able to get it to work to test it, any clue/help ?
I can get npm to install/start but I'm getting this message on console:

grapesjs@latest:2 Plugin grapesjs-sympbols not found Object
y @ grapesjs@latest:2
log.js:24 [HMR] Waiting for update signal from WDS...
lit-html.js:49 Lit is in dev mode. Not recommended for production! See https://lit.dev/msg/dev-mode for more information.
issueWarning @ lit-html.js:49
index.js:551 [webpack-dev-server] Hot Module Replacement enabled.
index.js:551 [webpack-dev-server] Live Reloading enabled.
DevTools failed to load source map: Could not load content for webpack://grapesjs-sympbols/node_modules/underscore/underscore-umd.js.map: Fetch through target failed: Unsupported URL scheme; Fallback: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load source map: Could not load content for webpack://grapesjs-sympbols/node_modules/lit-html/development/lit-html.js.map: Fetch through target failed: Unsupported URL scheme; Fallback: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load source map: Could not load content for https://unpkg.com/grapes.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

Thank you for reply !
The main error message is that this one Plugin grapesjs-sympbols not found it doesn't register the grapesjs-symbols plugin.

I did a hand made unification of this project an removed the need for lit-html but then I've got another problem where is the #symbols (appendTo: '#symbols') located ?

Do we need to create an empty div/element with that id ?

Any way thank you for your great work !

Yes, for now i bundled a UI which you need to tell where to go, with the appendTo option

The ui needs lithtml though
You can leave it it was just a warning
Please understand that it will not work yet, but you are welcome to try, please open a new issue then

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/gOjYweZ

Updated the "road map" here

The demo should be up to date