New Features for GrapeJS

[mohamedsalem401]

Hi there, first of all, thank you for this amazing framework. I've been working on some improvements and new features for GrapeJS. And I wanted to see if I can contribute to building such an amazing framework.

I understand that GrapeJS should provide the core for building editors on top of it, but I think the following features will help other developers create their editors faster, so I made the following features as a start. Some I’ve already written most of the code for (might need some changes first) while some other suggestions need more planning.

Clipboard improvements: code: b9cbc37

• Pasting images ( added to the assets manager )
• Pasting text ( we can add rich-text as well )
• Pasting HTML components
• Cross-tab clipboard
• Pasting Figma components (not yet implemented)
• Overriding Native Pasting: Offer the ability to override native pasting behavior and customize how content is handled when pasted into GrapeJS. (not yet implemented)
• UX: changing the behavior for successive pasting

---

Context Menu Manager: code: a8de4e6

• The list of items is dynamically generated
• Can be customized
• Can be extended using any plugin

---

Toasts Manager: code: dd502ae

• Show customizable toasts
• Can be shown in different positions (top-left, top-center, etc.)
• Has different variants (warning, error, etc.)
  

---

Command Palette Manager: code: 0f32345

• Can have multiple commands or files to be opened
• Can be customized
  

---

Version Control System Manager (Suggestion)

I've been thinking about how we can integrate with existing modules for version control features like semantic versioning and conflict resolution. While I haven't started implementing it yet (it might require some planning first), I came across this interesting paper on Version Control of Trees with Line-Based Version Control Systems

I can create a more detailed description of how we can approach this integration. However, I'd love to hear your thoughts on whether this would be a valuable addition.

ChatGPT ( Plugin )

• Make ChatGPT agent context-aware of the current components and HTML structure.
• Store and load a list of previous conversations.
• Drag ChatGPT-generated content into the canvas.

Tailwind ( Plugin )

• Make design systems based on Tailwind classes.
• Replace the class selector with the Monaco editor with autocomplete.
  

---

I’m excited to contribute to GrapeJS! Let me know what you think of these features and which ones you’d like to see implemented first.

[micker]

Whaooo impressive list

[lexoyo]

Excellent !
Why don't you go ahead and make 1 PR per feature?
And maybe 1 discussion per feature, I'd add ideas to some of them

[mohamedsalem401]

Sure thing, I just wanted to check with the maintainers before I open PRs so as not to spam the repo or something.

[mohamedsalem401]

Hey @lexoyo,
As Artur suggested, those features might be better implemented as community plugins. However, I'd still love to hear your thoughts on them. What do you think?

[lexoyo]

Hi @mohamedsalem401 thank you for the reminder :)

These once are great improvements but not a priority for me: Context Menu Manager, Command Palette Manager

Clipboard improvements

This one I would add to silex right away, especially for Figma and Cross-tab clipboard

We would need to add some code to also copy / paste the styles used on the components

Toasts Manager

For the notifications, I recently decided to drop toasts in Silex and created this plugin: https://github.com/silexlabs/grapesjs-notifications

It just adds a command to the editor

The big thing here for Silex is the possibility to link to a specific component in the notifications. Then the user sees a "select component" button in the notification. It is useful when there is a problem with this component. Very useful for advanced users in silex

Version Control System Manager

This is becoming a priority for Silex and I wrote a feature request here: https://roadmap.silex.me/posts/15/version-control

I believe there are amazing things to do, such as navigating a previous version then come back to the current version

Note that Silex supports multiple storage such as gitlab and ftp

There is a bounty on this feature as you can see

Let me know what you think?

ChatGPT

Excellent idea, especially the context aware, with functions to create blocks of course

I am thinking about this for a while but it is not a priority unfortunately, but I would love to help on this, because it's fun!

Tailwind

Here is a feature request in Silex with an interesting suggestion: https://roadmap.silex.me/posts/2/tailwind-css-support

Someone said it should be more generic than tailwind, and this makes sense I think

This is not a priority for Silex but would be a great improvement

Questions

I have a few questions:

1. What would be your plugins licence? Would you consider AGPL? Or at least an MIT :)
2. Would bounties help?

Have a nice day !

[mohamedsalem401]

Hey @lexoyo,

I’m really interested in collaborating with you on building those plugins. We could work effectively by staying in touch through email or by setting up a discussion thread on the Silex repository.

Regarding your questions:

1. What would be your plugins licence? Would you consider AGPL? Or at least an MIT :)

I haven't made my decision yet on whether the license will be copyleft or permissive, but it will be open-source with minimal restrictions for modification and redistribution.

2. Would bounties help?

I'm available to help out regardless, as I'm currently looking for a new job and have some free time.

Looking forward to your thoughts!

[lexoyo]

Awesome ! :)
An issue on Silex or discussion in grapesjs is a good idea
Or join Silex chat too https://short.silex.me/chat
I'll be there wherever
I'm currently working on Silex (mainly docs and communication) and 1 grapesjs plugin (advanced selector)
But I am happy to collaborate on other ones while you are available

[artf]

Thanks @mohamedsalem401 there is a lot of good stuff but the goal is to make the framework as lean and headless as possible so for all these additions I'd suggest creating plugins instead of merging them to the core.

[mohamedsalem401]

Thanks for the feedback, @artf! I agree that keeping the framework lean might be a better approach. Would you prefer to develop these additional features as official plugins or as community-driven plugins?

Speaking of keeping things lean, I noticed the GrapesJS roadmap. Is there a core feature on that list that you think could benefit from some help, without compromising the framework's leanness?

[artf]

Thanks for understanding @mohamedsalem401 unfortunately is common to see GrapesJS as an "application" but if we would accept any of the many missing features that a common no-code builder has, it won't be a framework anymore.

Would you prefer to develop these additional features as official plugins or as community-driven plugins?

I think a community plugin is the most obvious choice.

Speaking of keeping things lean, I noticed the GrapesJS roadmap. Is there a core feature on that list that you think could benefit from some help, without compromising the framework's leanness?

Speaking of features/plugins with UI, right now we don't have a common "UI interface". That means those who want to add a new feature containing some new UI (your plugins will potentially fall in the same bucket), will mostly try to bring their own framework of choice (eg. React, Vue, Angular, etc.) and that will force the consumer of GrapesJS to bundle multiple UI frameworks.
Here is the related discussion.
Let me know if you would be interested and I'll be more than happy to provide more details.

[mohamedsalem401]

Yes, I think it would be a good idea to move the UI components to @grapesjs/core-ui while keeping @grapesjs/core (without UI) focused on the core functionalities.

Let me know if you're interested, and I'll be more than happy to provide additional details.

Yes, sure—please send me more details.

[mohamedsalem401]

Hi @artf,

I hope you’re doing well! I wanted to follow up on our discussion. I’m still very interested in contributing and would love to hear more about the UI-related discussion we touched on.

Additionally, I noticed there are some issues listed on the GrapesJS GitHub. If there’s any chance I could assist with one of these, please let me know—I’m eager to help!

Looking forward to your response.

[artf]

sorry @mohamedsalem401 I'll ping you soon with more details 🙇‍♂️