Extend Pannel/Command examples/documentation with opening a new view

A good practice to get familiar with GrapeJS would be to attempt to duplicate the blocks manager and create your own. You can accomplish that by editing the files below. A good example would be to copy the src/block_managerand call it src/section_manager, then rename all the names from BlockManager to SectionManager. Look trough the code, its not that many lines.

Then you will need to edit the following files to make it work:

src/editor/index.js SectionManager: em.get('SectionManager'), src/editor/model/Editor.js

require('section_manager'),

Then create a new file src/commands/view/OpenSections.js

Modify all the contents of this to actually match the names of the section manager. 
Example: 
  var sm = editor.SectionManager;

src/editor/config/config.js

//Configurations for Section Manager
sectionManager: {},

src/panels/config/config.js

var osc = 'open-sections';

{
   id: osc,
   className: 'fa fa-th-large',
   command: osc,
   active: false,
   attributes  : { title: 'Open Sections' },
},

index.html

sectionManager: 
{
   categories: {
       open:true
   }
},

var sm = editor.SectionManager;

    sm.add(this.id, {
                   label: this.label,
                   category: this.category,
                   attributes: this.attributes,
                   content: this.content,
               });

Do a full source search for BlockManager or block_manager to make sure I didn't miss anything. This way you will better understand how the BlockManager works.

Of course you will need to change some css clases to move the manager to your desired location, or inject the contents of it to a completely different section of your UI.

That's a rough idea. A better idea would be to create an independent plugin that creates this section manager, I will look into that soon after I get familiar with all the files and I better understand.

I also believe we should somehow pick a UI such as semantic-iu to create dynamic bars, modals, etc with grapejs. Here is an example of one of my attempts to create a new sidebar using semantic-iu:

The bar shows and automatically hides when you start dragging the element. I think @artf is trying to keep this editor as lean as possible without dependencies but this might work for some people.

Instead of modifying the block manager, I created my own manager where I get to modify it without touching the original BlockManager.

Cheers

Hey, was looking into doing something similar and found this here. Was wondering if there is any documentation further explaining the process of creating new views.

Hi @RuudH thanks for the suggestion, I hope to publish soon something more about this argument. For now, I can only suggest you check commands used for those panels (eg. OpenBlocks)