Grapesjs: Roadmap

[artf]

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

• [x] Improve dragging process #113
• [x] Auto scroll the canvas while dragging components #102
• [x] Add the possibility to group Blocks
• [x] 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
• [x] Drag and drop images outside browser directly to GrapesJs #198
• [x] 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
• [x] New propagate property on components #422
• [x] 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
• [x] Keymap module API-Keymaps
• [x] Undo Manager module (with its own APIs) API-Undo-Manager
• [x] Add HTML5 D&D support
• [x] 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
• [x] Logger module https://github.com/artf/grapesjs/releases/tag/v0.14.33
• [x] Absolute/Designer mode With this mode enabled the user should be able to move components "freely" inside the canvas (relying on absolute positioning) #1936
• [x] 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

• [x] Image editor grapesjs-aviary
• [x] Form Components/Blocks grapesjs-plugin-forms
• [x] Add gradient style property grapesjs-style-gradient
• [x] Flexbox block example grapesjs-blocks-flexbox
• [x] Bootstrap Blocks z1lk/grapesjs-blocks-bootstrap4
• [x] 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.
• [ ] Page Manager #247
• [ ] Alternative Code Editor

Codebase

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

[aloksharma1]

are you on gitter, also how about adding bootstrap support in the roadmap?

[artf]

are you on gitter

not yet :)

Exactly, what do you mean by 'adding bootstrap'? If you're talking about loading external styles inside the template, you're already able to do so, check this issue for example

[aloksharma1]

i mean adding bootstrap components in drag-drop builder, for easy build up of websites.

[artf]

well, yeah, I add it to plugins

[givanz]

Hi

Congratulations, GrapeJs looks awesome, the most feature rich and cleanly coded open source online html editor by far.

There are some features that might make it even better in my option, here are some of my proposals.

Can the components tab be changed to show as a panel on the left? Most editors have properties and blocks shown at the same time for easier editing (jetstrap, http://ionic.io/products/creator etc).

When I click on a block, for example on map block (after adding it), I must click settings to see the block settings and to configure the map, I think that it would be easier for blocks to show settings by default or even better have only one tab for both settings and style and show settings first.

Can the interface colors/theme be easily changed by editting a scss/less file or something similar? to have different themes like one with white background.

Is it possible to toggle the elements grids (dashed boxes) by config or button? It looks cleaner without them and if it used mainly for editing editing blocks and not html elements (regular users without css/html knowledge) it might not be very useful.

Is it possible to have an option to limit highlighting/editing to only some elements (only blocks without html elements for example) on the page? I plan to use grapejs in an open source cms I'm developing and this option is helpful to limit editing only to blocks for users that are not familiar with html/css.

Is there any documentation/examples on how to add new blocks or change settings?

Thanks.

[artf]

Thanks @givanz for your kind words and suggestions.
About blocks, shown always on the left, could be a cool idea but not in the way how the canvas is now rendered. I'd like to keep canvas as wide as possible and with another side panel the view will be too much squashed. But this is just my opinion, you could easily move the block container wherever you want.

I definitely agree about 'Settings panel', I think an additional option could be a solution. Anyway I've not yet figured out the best/easiest way to manage the UI (panels, buttons, etc.) for devs, therefore all that part it's just a default set (but can be easily moved around with js).

No 'theme' options for the moment, but you can easily change the entire UI with few CSS changes

#gjs-rte-toolbar, .gjs-bg-main, .gjs-clm-select option, .gjs-clm-tags .gjs-sm-colorp-c, .gjs-editor, .gjs-mdl-dialog, .gjs-nv-item .gjs-nv-title-c, .gjs-off-prv, .gjs-pn-panel, .gjs-select option, .gjs-sm-sector .gjs-sm-colorp-c, .gjs-sm-select option, .gjs-sm-unit option, .sp-container, .gjs-block {
    background-color: white;
}
#gjs-rte-toolbar .gjs-rte-btn, .gjs-btn-prim, .gjs-btnt, .gjs-clm-tags .gjs-sm-composite.gjs-clm-field, .gjs-clm-tags .gjs-sm-field.gjs-sm-composite, .gjs-clm-tags .gjs-sm-stack #gjs-sm-add, .gjs-color-main, .gjs-mdl-dialog, .gjs-off-prv, .gjs-pn-btn, .gjs-pn-panel, .gjs-sm-sector .gjs-sm-composite.gjs-clm-field, .gjs-sm-sector .gjs-sm-field.gjs-sm-composite, .gjs-sm-sector .gjs-sm-stack #gjs-sm-add {
    color: #777;
}
.gjs-btnt.gjs-pn-active, .gjs-color-active, .gjs-pn-btn.gjs-pn-active, .gjs-pn-btn:active, .gjs-block:hover {
    color: #59a6e6;
}
.gjs-btnt.gjs-pn-active, .gjs-pn-btn.gjs-pn-active {
    background-color: rgba(0, 0, 0, 0.03);
}

You can already disable dashed boxes in demo

For creating new Blocks I suggest you check this wiki there you should also find how to change components properties (eg. make element not editable)

[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]

thanks @meteorsnows, smart guides and snapping are definitely a must in Designer mode so I've already considered it

[ShinJii89]

Hi,
Are you planning add possibility to paste for example in import javascript code? Because now when I import some page with html, css & javascript, your builder cut off all JS code :D

[artf]

@ShinJii89 Scripts are just ignored by configurations.
If you want to try it in the demo, you have to paste this in devtools:

editor.getConfig().allowScripts = 1

[integrateddigital]

Hi @artf and everyone,

I would be happy to contribute with a plugin that offers the ability to use Google's File and Image picker instead of the filestack one ( mainly because of the cost of FileStack .. ) ... I am currently coding it anyways, and if there's interest then I would be happy to place it in git.. txs again for the great library.

[lexoyo]

@integrateddigital I use unifile which provide routes to manage files with dropbox, ftp, github... and it is easy to add new services so you could use it (even as a canvas for 1 service it is interesting)
https://github.com/silexlabs/unifile

[integrateddigital]

thanks @lexoyo , does unifile allow image search by keyword ? that's the actual specific functionality that I want to replicate ... good timing as I've just realized the google image picker might not be ideal as it does bring ads; If I can type a keyword, get back images then it's good, suggestions welcome...

[lexoyo]

Nice! I'd like to have this functionality. The code is really clean and a state of the art in nodejs, so it should be feasible without headaches, I'll poke the lead developer @JbIPS to know for sure

[integrateddigital]

It's very handy, the gjs-plugin-filestack does have that, but it is too costly per month,.... i'm playing with a couple of other pickers right now, ... engagement goes very high when you allow the user to fetch images without having to switch tabs or windows... let me know and I will let you know .. :-)

[JbIPS]

Hello! I've been invoked here to talk about unifile. To be clear, unifile is a nodejs library that replicate the filesystem module but for cloud storage (GitHub, Dropbox, WebDAV, FTP SFTP,...). It let you manipulate files so you could use it to search images but you'll have to implement that yourself (I'd be glad to help).

[vinzee]

Hello, I really appreciate the work you guys are doing and the fact that such a library is open source.

I would be happy to contribute to as I have worked on a product very similar to this one created using backboneJS & marionetteJS along with Rails on the backend. We had a async save, a peer-to-peer sync and a template manager in place along with all the stuff currently present here.

Is there a gitter / slack channel wherein we can discuss ?

[artf]

Thanks @vinzee I'd really appreciate any help, something such as template manager would be awesome to have. If you want to discuss anything related to grapesjs I think "Github's Issues" is all we need, it'd be a mess tracking stuff with more discussion channels.

[rgcarrasqueira]

Hey Artur! How to contribute with translating for other languages. I would like to translate it to Brazilian Portuguese?

[artf]

Hi @rgcarrasqueira you can check #26 about i18n and why I don't plan to add it

[rgcarrasqueira]

Hey Art!

I've tweak some stuffs on my editor and I create a way to open a template gallery, choose a layout and set it at the canvas, I'm sharing the code above:

cmdm.add('choose-layout',{
        run(editor, sender) {
            var layout_id = opts.id
            var url  = "http://localhost/template/id.json";
            url = url.replace('123', layout_id);

            $.getJSON(url, function(data){
                var html_code = data.message
                var iframe = $('iframe.gjs-frame'); // or some other selector to get the iframe
                $('#wrapper', iframe.contents()).html('')
                comps.clear();
                localStorage.clear();
                comps.getWrapper().set('content', '');
                opts.editor.setComponents(html_code);
            });
            // once chosen a layout close the modal window
            $('#choose-layout-modal').modal('hide');
        }
    });

    cmdm.add('open-layout-list',{
        run(editor, sender) {
            sender.set('active', 0);
            // opens a bootstrap modal
            $('#choose-layout-modal').modal('show').load("{% url email-template-layout-list %}");
        }
    })

    pnm.addButton('options', {
        id: 'open-modal-layout-list',
        className: 'fa fa-newspaper-o',
        command: 'open-layout-list',
        attributes: {
            'title': 'Choose a layout',
            'data-tooltip-pos': 'bottom',
        },
        active: false,
    });

Hope that it helps!

[rgcarrasqueira]

Hi Art!

For the custom code editor I've did at my project:

   cmdm.add('export-template', {
        run(editor, sender) {
            sender.set('active', 0);
            // used a bootstrap modal
            $('#source-code').modal('show');
            $('#source-code').modal({
                backdrop: 'static',
                keyboard: false
            })
        }
    });

    var ViewCodeBtn = editor.Panels.getButton('options', 'export-template');
    ViewCodeBtn.set('command', 'export-template');

    codeViewer = editor && editor.CodeManager.getViewer('CodeMirror').clone();

    codeViewer.set({
        codeName: 'htmlmixed',
        readOnly: 0,
        theme: 'hopscotch',
        autoBeautify: true,
        autoCloseTags: true,
        autoCloseBrackets: true,
        styleActiveLine: true,
        smartIndent: true,
    });

    codeViewer.init(document.getElementById('code'));
    viewer = codeViewer.editor;

    function updatePreview() {
        var iframe = $('iframe.gjs-frame'); // or some other selector to get the iframe

        html_code = cmdm.get('gjs-get-inlined-html').run(editor)

        if(viewer.getValue()){
            html_code = viewer.getValue()
        }

        $('#wrapper', iframe.contents()).html('')
        editor.DomComponents.getWrapper().set('content', '');
        editor.setComponents(html_code);
    }

    var delay;

    viewer.on("change", function() {
        clearTimeout(delay);
        delay = setTimeout(updatePreview, 300);
    });

    viewer.refresh();

    setTimeout(updatePreview, 300);

It is running like a charm

[artf]

thanks @rgcarrasqueira 👍 I'll try to make a good use of your code

[Geczy]

Any updates on the jQuery deprecation? Wanting to use GrapesJS in a ReactJS application, and it doesn't make sense to load jQuery

[artf]

Sorry @Geczy but haven't worked yet on this

[Geczy]

@artf my company would like to offer a bounty for removal of jQuery, and are asking for an estimate on this. What do you think?

[artf]

@Geczy I'm busy with other stuff in this period but I could work on this the next week in a couple of days

[foaadnami]

Awesome work! Suggestion to add a changelog. Looked around and couldn't find one (?)

[artf]

Thank you @foaadnami for the suggestion but I already rely on Releases to keep track of changes

[foaadnami]

This is perfect. Sorry missed it!

On Sep 13, 2017 12:04 AM, "Artur Arseniev" [e-mail] wrote:

Thank you @foaadnami https://github.com/foaadnami for the suggestion
but I already rely on Releases https://github.com/artf/grapesjs/releases
to keep track of changes

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/artf/grapesjs/issues/74#issuecomment-328968682, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AQWpzPFwY9aNKik7EYRAV2m-jmbfwixvks5shuPKgaJpZM4NBANr
.

[Geczy]

@artf it is still important to us to remove jQuery, will you accept a bounty to do it sooner?

[artf]

@Geczy sure :)

[JFOC]

@rgcarrasqueira Hi, would you mine to share the id.json for layout of template gallery ?
and at here:
$('#choose-layout-modal').modal('show').load("{% url email-template-layout-list %}");

what this should ?

thank you

[rgcarrasqueira]

This a HTML content, in my case a boostrap modal:

<script type="text/javascript">
    $(document).ready(function() {
        var commands = editor.Commands;
        $("input[id^='choose']").click(function() {
            opts = {
                id: $(this).attr("data-model-value"),
                editor: editor
            }
            commands.get('choose-layout').run(opts)
        })
    });
</script>


<style type="text/css">
    #basic,
    #theme {
        margin-top: 15px !important;
    }

    h5,
    .h5 {
        font-size: 14px;
        padding-bottom: 10px;
    }

    #choose-layout-modal .tab-pane {
        overflow-y: scroll !important;
        overflow-x: hidden !important;
        height: 340px;
    }

    #choose-layout-modal .tab-content {
        padding-top: 0px;
        overflow: hidden;
    }

    #choose-layout-modal .tab-content>.tab-pane {
        margin-top: 20px;
    }
</style>

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Vamos começar?</h4>
        </div>
        <div class="modal-body">


            <div class="row">
                <div class="col-xs-12">
                    <h5>Selecione um dos exemplos abaixo para começar o seu novo modelo de e-mail:</h5>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div class="tabbable">
                        <ul class="nav nav-tabs">


                            <li class="active">
                                <a data-toggle="tab" href="#basic">Modelos Básicos</a>
                            </li>




                            <li>
                                <a data-toggle="tab" href="#theme">Temáticos</a>
                            </li>




                            <li class="nav-item">
                                <a data-toggle="tab" href="#saved_by_customer">Modelos Salvos</a>
                            </li>

                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="basic">
                                <div class="row">



                                    <div class="col-xs-3">
                                        <div class="panel panel-default">
                                            <div class="panel-heading text-center">1 Coluna</div>
                                            <div class="panel-body text-center">
                                                <div class="col-xs-12">


                                                    <img src="https://d3nkfx61w0hihq.cloudfront.net/mailerweb/img/templates/single_column.png" width="160" class="img-thumbnail">

                                                </div>
                                                <div class="col-xs-12">
                                                    <h4><input id="choose_32887" value="Escolher" data-model-type="component-template" data-model-value="32887" type="submit" class="btn btn-default btn-block"></h4>
                                                </div>
                                            </div>
                                        </div>
                                    </div>



                                    <div class="col-xs-3">
                                        <div class="panel panel-default">
                                            <div class="panel-heading text-center">2 Colunas</div>
                                            <div class="panel-body text-center">
                                                <div class="col-xs-12">


                                                    <img src="https://d3nkfx61w0hihq.cloudfront.net/mailerweb/img/templates/two_columns.png" width="160" class="img-thumbnail">

                                                </div>
                                                <div class="col-xs-12">
                                                    <h4><input id="choose_32888" value="Escolher" data-model-type="component-template" data-model-value="32888" type="submit" class="btn btn-default btn-block"></h4>
                                                </div>
                                            </div>
                                        </div>
                                    </div>



                                    <div class="col-xs-3">
                                        <div class="panel panel-default">
                                            <div class="panel-heading text-center">2 e 3 Colunas</div>
                                            <div class="panel-body text-center">
                                                <div class="col-xs-12">


                                                    <img src="https://d3nkfx61w0hihq.cloudfront.net/mailerweb/img/templates/two_and_three_columns.png" width="160" class="img-thumbnail">

                                                </div>
                                                <div class="col-xs-12">
                                                    <h4><input id="choose_32889" value="Escolher" data-model-type="component-template" data-model-value="32889" type="submit" class="btn btn-default btn-block"></h4>
                                                </div>
                                            </div>
                                        </div>
                                    </div>



                                    <div class="col-xs-3">
                                        <div class="panel panel-default">
                                            <div class="panel-heading text-center">3 Colunas</div>
                                            <div class="panel-body text-center">
                                                <div class="col-xs-12">


                                                    <img src="https://d3nkfx61w0hihq.cloudfront.net/mailerweb/img/templates/three_columns_and_text.png" width="160" class="img-thumbnail">

                                                </div>
                                                <div class="col-xs-12">
                                                    <h4><input id="choose_32890" value="Escolher" data-model-type="component-template" data-model-value="32890" type="submit" class="btn btn-default btn-block"></h4>
                                                </div>
                                            </div>
                                        </div>
                                    </div>



                                    <div class="col-xs-3">
                                        <div class="panel panel-default">
                                            <div class="panel-heading text-center">3 e 2 Colunas</div>
                                            <div class="panel-body text-center">
                                                <div class="col-xs-12">


                                                    <img src="https://d3nkfx61w0hihq.cloudfront.net/mailerweb/img/templates/three_and_two_columns.png" width="160" class="img-thumbnail">

                                                </div>
                                                <div class="col-xs-12">
                                                    <h4><input id="choose_32918" value="Escolher" data-model-type="component-template" data-model-value="32918" type="submit" class="btn btn-default btn-block"></h4>
                                                </div>
                                            </div>
                                        </div>
                                    </div>



                                    <div class="col-xs-3">
                                        <div class="panel panel-default">
                                            <div class="panel-heading text-center">Coluna Lateral à Direita</div>
                                            <div class="panel-body text-center">
                                                <div class="col-xs-12">


                                                    <img src="https://d3nkfx61w0hihq.cloudfront.net/mailerweb/img/templates/right_sidebar.png" width="160" class="img-thumbnail">

                                                </div>
                                                <div class="col-xs-12">
                                                    <h4><input id="choose_32914" value="Escolher" data-model-type="component-template" data-model-value="32914" type="submit" class="btn btn-default btn-block"></h4>
                                                </div>
                                            </div>
                                        </div>
                                    </div>



                                    <div class="col-xs-3">
                                        <div class="panel panel-default">
                                            <div class="panel-heading text-center">Coluna Lateral à Esquerda</div>
                                            <div class="panel-body text-center">
                                                <div class="col-xs-12">


                                                    <img src="https://d3nkfx61w0hihq.cloudfront.net/mailerweb/img/templates/left_sidebar.png" width="160" class="img-thumbnail">

                                                </div>
                                                <div class="col-xs-12">
                                                    <h4><input id="choose_32891" value="Escolher" data-model-type="component-template" data-model-value="32891" type="submit" class="btn btn-default btn-block"></h4>
                                                </div>
                                            </div>
                                        </div>
                                    </div>



                                    <div class="col-xs-3">
                                        <div class="panel panel-default">
                                            <div class="panel-heading text-center">Texto e 3 Colunas</div>
                                            <div class="panel-body text-center">
                                                <div class="col-xs-12">


                                                    <img src="https://d3nkfx61w0hihq.cloudfront.net/mailerweb/img/templates/text_and_three_columns.png" width="160" class="img-thumbnail">

                                                </div>
                                                <div class="col-xs-12">
                                                    <h4><input id="choose_32916" value="Escolher" data-model-type="component-template" data-model-value="32916" type="submit" class="btn btn-default btn-block"></h4>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="modal-footer">


            <button type="button" class="btn btn-primary" data-dismiss="modal">Vou criar meu próprio modelo</button>

        </div>
    </div>
    <!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->

[Deepak813]

Did we get the Custom HTML type in video traits so that user can able to enter the iframe code and it will embed in the html.

As,all the famous editor have this feature which is common one in video category.

Is this video traits is in roadmap.

As we have created this new component but that conflicts with the existing video traits.

[artf]

@Deepak813 https://github.com/artf/grapesjs/issues/601#issuecomment-350229378

[Jogai]

Regarding font-awesome, bootstrap-select makes it an option to specify on initialization which I like. It would need a mapping for icons that have different names. (Boostrap-select only has one icon, so thats easy for them). That way its always possible to use icons you already have in your project instead of pulling in another dependency.

The component toolbar is easy to customize (for example I just add data-gjs-removable="false" to an element in my template and thats enough) but there is no option to hide the "select-parent" command. An attribute like "traverse" would be helpful for me (i'm just dumbing the editor down for my users)

[artf]

Custom CSS parsers available from https://github.com/artf/grapesjs/releases/tag/v0.14.33
Created also for that case https://github.com/artf/grapesjs-parser-postcss

[FrciSmrci]

@artf Do you have an estimate on when the following feature is going to be released => Custom color picker. eg. as with RTE using editor.setCustomRte() it might be editor.setCustomColorPicker()?

[artf]

@FrciSmrci unfortunately, I didn't plan it yet and IMHO I'm not even sure anymore if it's the correct way of customization. Probably it would be better to create some kind of customizable UI system, where the developer can change/update the color input itself (as all other inputs) and not only the color picker

[loganvolkers]

We actually have a custom color picker wired up with GrapesJS.

What we did:

• Create a whole new panel for editing traits
• Connect the panel to the Backbone model for list of components and currently selected component
• Embed a custom tree view with embedded JSON Schema Forms

Here's the result:

Ideally the forms used in Grapes would be more pluggable without that work, though.

@artf if you're looking for inspiration, then JSON Schema auto-generated forms may serve as a good start. I'm a fan of React JSON Schema Forms because it makes it very easy to add custom widgets or fields components, override styling, titles, helptext, etc.

[Sibbir7350]

Hello @artf

327 I just wanted to know is there sample code for drag and drop.. I am having difficulty while wanted to drag component inside the canvas.. My aim is to move the element by absolute position.. not by sorting

[luisalvarado]

Hi @artf , just to understand the design mode better, will this allow me to drag an element (link, div, span, anything..) around the page and position it in a specific place. More like a more intuitive, drag & drop replacement for the current one and allow the use to organize items in the way that is not restricted by the current block concept?

[artf]

@luisalvarado correct. As a tiny update, I've started working on a new feature which, once finished, will allow me to add the designer mode easily.

[luisalvarado]

@artf This is beautiful, thank you.

[jakemonton]

@artf I'm excited about the design mode feature!

[artf]

@jakemonton actually, I started working on it a few days ago, I hope to post soon a new follow-up issue describing it more in details

[artf]

A new issue about the Designer mode: #1936