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

[RuudH]

Hi Artur,

First of all grapesjs is awsome!

At the moment i am trying to puzzle together how to create a pannel with a button that opens a new view, like the blocks and layermanager buttons do. I want to render my own set of items in that new view. I am looking at the code you use to open those views but that uses the managers to render the items. it is also a bit unclear what all the code does.

It would be great to have some more documentation on this subject.

[artf]

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)

[daniel-farina]

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

[Moikapy]

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.

[josergomezm]

@daniel-farina You missed one of the files; you also need to edit the src/commands/index.js

defaultCommands['open-sections'] = require('./view/OpenSections');

[Sulav182]

I followed all the mentioned steps, but I am getting 'Cannot read property 'add' of undefined' when trying to add a block to the section manager. Has anyone dealt with this error before?