Add layers demo in docs

docs/.vuepress/components/DemoBasicBlocks.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div id="gjs2">
+    <div class="gjs" id="gjs2">
       <h1>Hello World Component!</h1>
     </div>
     <div id="blocks2"></div>
@@ -17,7 +17,7 @@ module.exports = {
 </script>
 
 <style>
-  #gjs2 {
+  .gjs {
     border: 3px solid #444;
   }
   .gjs-block {

docs/.vuepress/components/DemoCustomPanels.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <div id="basic-panel3"></div>
-    <div id="gjs3">
+    <div class="basic-panel" id="basic-panel3"></div>
+    <div class="gjs" id="gjs3">
       <h1>Hello World Component!</h1>
     </div>
     <div id="blocks3"></div>
@@ -11,54 +11,18 @@
 <script>
 module.exports = {
   mounted() {
-    // show addPanel with toggle-borders, export-code and custom alert show selected JSON + panel style
     const utils = require('./demos/utils.js');
     const editor3 = grapesjs.init(utils.gjsConfigPanels);
-    editor3.Panels.addPanel({
-      id: 'custom-panel',
-      el: '#basic-panel3',
-      buttons: [
-        {
-          id: 'visibility',
-          // active by default
-          active: true,
-          className: 'btn-toggle-borders',
-          label: '<u>B</u>',
-          // Built-in command
-          command: 'sw-visibility',
-        }, {
-          id: 'export',
-          className: 'btn-open-export',
-          label: 'Exp',
-          command: 'export-template',
-          // For grouping context of buttons in the same panel
-          context: 'export-template',
-        }, {
-          id: 'show-json',
-          className: 'btn-show-json',
-          label: 'JSON',
-          command(editor) {
-            editor.Modal.setTitle('Components JSON')
-              .setContent(`<textarea style="width:100%; height: 250px;">
-                ${JSON.stringify(editor.getComponents())}
-              </textarea>`)
-              .open();
-          },
-        }
-      ],
-    });
+    editor3.Panels.addPanel(Object.assign({}, utils.customPanel, {
+      el: '#basic-panel3'
+    }));
     window.editor3 = editor3;
-    editor3.on('run:export-template:before', () => console.log('Before the command run'));
-    editor3.on('run:export-template', () => console.log('After the command run'));
   }
 }
 </script>
 
 <style>
-  #gjs3 {
-    border: 3px solid #444;
-  }
-  #basic-panel3 {
+  .basic-panel {
     width: 100%;
     display: flex;
     justify-content: center;

docs/.vuepress/components/DemoLayers.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <div class="basic-panel" id="basic-panel4"></div>
+
+    <div class="editor-row">
+      <div class="editor-canvas">
+        <div class="gjs" id="gjs4">
+          <h1>Hello World Component!</h1>
+        </div>
+      </div>
+      <div class="editor-sidebar" id="editor-sidebar">
+        <div id="layers-container"></div>
+      </div>
+    </div>
+
+    <div id="blocks4"></div>
+  </div>
+</template>
+
+<script>
+module.exports = {
+  mounted() {
+    const utils = require('./demos/utils.js');
+    const editor4 = grapesjs.init(utils.gjsConfigLayers);
+    editor4.Panels.addPanel(Object.assign({}, utils.customPanel, {
+      el: '#basic-panel4'
+    }));
+    window.editor4 = editor4;
+  }
+}
+</script>
+
+<style>
+.editor-row {
+  display: flex;
+  justify-content: flex-start;
+  align-items: stretch;
+  flex-wrap: nowrap;
+}
+.editor-canvas {
+  flex-grow: 1;
+}
+.editor-sidebar {
+  flex-basis: 230px;
+  position: relative;
+}
+</style>

docs/.vuepress/components/demos/utils.js

@@ -29,6 +29,54 @@ var blockManager = {
   ]
 };
 
+var customPanel = {
+  id: 'custom-panel',
+  buttons: [
+    {
+      id: 'visibility',
+      // active by default
+      active: true,
+      className: 'btn-toggle-borders',
+      label: '<u>B</u>',
+      // Built-in command
+      command: 'sw-visibility',
+    }, {
+      id: 'export',
+      className: 'btn-open-export',
+      label: 'Exp',
+      command: 'export-template',
+      // For grouping context of buttons in the same panel
+      context: 'export-template',
+    }, {
+      id: 'show-json',
+      className: 'btn-show-json',
+      label: 'JSON',
+      command(editor) {
+        editor.Modal.setTitle('Components JSON')
+          .setContent(`<textarea style="width:100%; height: 250px;">
+            ${JSON.stringify(editor.getComponents())}
+          </textarea>`)
+          .open();
+      },
+    }
+  ],
+};
+
+var panelSidebar = {
+  el: '#editor-sidebar',
+  id: 'layers',
+  // Make the panel resizable
+  resizable: {
+    tc: 0, // Top handler
+    cl: 1, // Left handler
+    cr: 0, // Right handler
+    bc: 0, // Bottom handler
+    // Being a flex child we need to change `flex-basis` property
+    // instead of the `width` (default)
+    keyWidth: 'flex-basis',
+  },
+};
+
 var gjsConfigStart = {
   // Indicate where to init the editor. It's also possible to pass an HTMLElement
   container: '#gjs',
@@ -54,8 +102,17 @@ var gjsConfigPanels = Object.assign({}, gjsConfigBlocks, {
   blockManager: Object.assign({}, blockManager, { appendTo: '#blocks3' }),
 });
 
+var gjsConfigLayers = Object.assign({}, gjsConfigBlocks, {
+  container: '#gjs4',
+  blockManager: Object.assign({}, blockManager, { appendTo: '#blocks4' }),
+  layerManager: { appendTo: '#layers-container', scrollLayers: 0 },
+  panels: { defaults: [panelSidebar] }
+});
+
 module.exports = {
   gjsConfigStart,
   gjsConfigBlocks,
   gjsConfigPanels,
+  gjsConfigLayers,
+  customPanel,
 };

docs/getting-started.md

@@ -153,7 +153,7 @@ Now that we have a canvas and custom blocks let's see how to create a new custom
 ```
 
 ```js
-editor3.Panels.addPanel({
+editor.Panels.addPanel({
   id: 'custom-panel',
   el: '#basic-panel',
   buttons: [
@@ -190,26 +190,79 @@ editor3.Panels.addPanel({
 </Demo>
 
 So, we have defined where to render the panel with `el: '#basic-panel'` and then for each button we added a `command` property. The command could be the id, an object with `run` and `stop` functions or simply a single function.
-Try to use [Commands](api/commands.html) when possible, they allow you to track actions globally and also execute callbacks before and after their execution (or even interrupt them).
+Try to use [Commands](api/commands.html) when possible, they allow you to track actions globally and execute also callbacks before and after their execution (you can even interrupt them).
 
 ```js
-/*
-* * `run:{commandName}` - Triggered when some command is called to run (eg. editor.runCommand('preview'))
-* * `stop:{commandName}` - Triggered when some command is called to stop (eg. editor.stopCommand('preview'))
-* * `run:{commandName}:before` - Triggered before the command is called
-* * `stop:{commandName}:before` - Triggered before the command is called to stop
-* * `abort:{commandName}` - Triggered when the command execution is aborted (`editor.on(`run:preview:before`, opts => opts.abort = 1);`)
- */
-editor.on('run:export-template:before', () => console.log('Before the command run'));
+editor.on('run:export-template:before', opts => {
+  console.log('Before the command run');
+  if (0 /* some condition */) {
+    opts.abort = 1;
+  }
+});
 editor.on('run:export-template', () => console.log('After the command run'));
+editor.on('abort:export-template', () => console.log('Command aborted'));
 ```
 
 ## Layers
--- show image
 Another utility tool you might find useful when working with web elements is a layer manger. It's just a tree overview of the structure nodes and enables you to manage it easier. To enable it you just have to specify where to render it
 
--- show how to enable LM
--- HINT: create resizable panels
+```html
+<div id="basic-panel"></div>
+<div class="editor-row">
+  <div class="editor-canvas">
+    <div id="gjs">...</div>
+  </div>
+  <div class="editor-sidebar">
+    <div id="layers-container"></div>
+  </div>
+</div>
+<div id="blocks"></div>
+```
+
+```css
+.editor-row {
+  display: flex;
+  justify-content: flex-start;
+  align-items: stretch;
+  flex-wrap: nowrap;
+}
+.editor-canvas {
+  flex-grow: 1;
+}
+.editor-sidebar {
+  flex-basis: 230px;
+  position: relative;
+}
+```
+
+```js
+const editor = grapesjs.init({
+  // ...
+  layerManager: {
+    appendTo: '#layers-container'
+  },
+  // We define a default panel as a sidebar to contain layers
+  panels: {
+    defaults: [{
+      id: 'layers',
+      el: '.editor-sidebar',
+      // Make the panel resizable
+      resizable: {
+        tc: 0, // Top handler
+        cl: 1, // Left handler
+        cr: 0, // Right handler
+        bc: 0, // Bottom handler
+        // Being a flex child we need to change `flex-basis` property
+        // instead of the `width` (default)
+        keyWidth: 'flex-basis',
+      },
+    }]
+  }
+});
+```
+<Demo>
+ <DemoLayers/>
+</Demo>
 
 ## Style Manager
 An important step in any web project is the style definition and with the built-in style manager module you're able to do so freely and quickly.