Status, roadmap...
BentoumiTech opened this issue · comments
An amazing plugin that you are working on!
I was playing with Symbols on grapes and saw your project, I like the approach you took to implement it.
Do there is any code I can contribute to help you get the plugin ready?
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
jsonin 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)
- #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
- #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
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