Roadmap

This issue is a rough outline of some improvements/features we’d like to add to the editor. To keep things cleaner it’s better to open a new issue for any discussion about a related feature (then linked here) and use this one just for general questions/requests. Don’t hesitate to propose other stuff for the list and, of course, any kind of help is extremely welcome. Each section is ordered by priority (discussable).

Features

• Improve dragging process #113
• Auto scroll the canvas while dragging components #102
• Add the possibility to group Blocks
• At the moment, once the Style Manager is configured it remains static, so for each selected component you will get the same set of style properties. Would be cool to set specific properties for different components
• Drag and drop images outside browser directly to GrapesJs #198
• Replace the built-in RTE with pell, same concept but much smaller and with more reliable API than the current one. The execCommand API is not perfect and not even works consistently on all browsers in the same way, but I think it’s ok as a default/built-in WYSIWYG editor https://github.com/artf/grapesjs/wiki/API-Rich-Text-Editor
• New propagate property on components #422
• Add the possibility to create custom style properties in Style Manager Not yet documented but grapesjs-style-gradient might be a good point from where to start
• Keymap module API-Keymaps
• Undo Manager module (with its own APIs) API-Undo-Manager
• Add HTML5 D&D support
• GrapesJS uses the built-in CSS parser of the browser (to have less dependencies) but each browser has its own set of rules. It might be an option to attach custom parsers https://github.com/artf/grapesjs/releases/tag/v0.14.33
• Logger module https://github.com/artf/grapesjs/releases/tag/v0.14.33
• Absolute/Designer mode With this mode enabled the user should be able to move components “freely” inside the canvas (relying on absolute positioning) #1936
• I18n module https://github.com/artf/grapesjs/releases/tag/v0.15.9
• Custom color picker. eg. as with RTE using editor.setCustomRte() it might be editor.setCustomColorPicker()
• Custom Code Editor
• Namespaced CSS in output #391
• Make the editor more Accessible #654

Plugins

• Image editor grapesjs-aviary
• Form Components/Blocks grapesjs-plugin-forms
• Add gradient style property grapesjs-style-gradient
• Flexbox block example grapesjs-blocks-flexbox
• Bootstrap Blocks z1lk/grapesjs-blocks-bootstrap4
• Custom Code, block and component grapesjs-custom-code
• Template Manager, on start up shows a modal with templates (eg. by categories and with thumbnails) to choose or you can just import your own or start with a blank one. (grapesjs-template-manager)[https://github.com/Ju99ernaut/grapesjs-template-manager]
• Page Manager https://github.com/artf/grapesjs/pull/3411

Codebase

• Get rid of jquery. The data() method is probably the only one which is strictly required by the editor
• Get rid of grunt in favor of npm scripts
• Get rid of requirejs in favor of webpack as a bundler
• Enable to write ES6
• Get rid of font-awesome https://github.com/artf/grapesjs/releases/tag/v0.15.9

[meteorsnows]

For Absolute/Designer mode, There is feature like Smart Guide Line / Snapping to Object, which Simex also not having this feature.

One picture worth thousand word, that align feature most of us used in Microsoft Office to align object: https://www.edrawsoft.com/flowchart.php http://www.guidingtech.com/52926/smart-guide-optimization-powerpoint/

[artf]

well, yeah, I add it to plugins