Add traits demo in docs

docs/.vuepress/components/DemoTraits.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <div class="panel__top" id="panel__top6">
+        <div class="panel__basic-actions" id="panel__basic-actions6"></div>
+        <div class="panel__switcher" id="panel__switcher6"></div>
+    </div>
+
+    <div class="editor-row">
+      <div class="editor-canvas">
+        <div class="gjs" id="gjs6">
+          <h1>Hello World Component!</h1>
+        </div>
+      </div>
+      <div class="panel__right" id="panel__right6">
+        <div class="layers-container" id="layers-container6"></div>
+        <div class="styles-container" id="styles-container6"></div>
+        <div class="traits-container" id="traits-container6"></div>
+      </div>
+    </div>
+
+    <div id="blocks6"></div>
+  </div>
+</template>
+
+<script>
+module.exports = {
+  mounted() {
+    const utils = require('./demos/utils.js');
+    const editor6 = grapesjs.init(utils.gjsConfigTraits);
+    editor6.Panels.addPanel(Object.assign({}, utils.panelTop, {
+      el: '#panel__top6'
+    }));
+    editor6.Panels.addPanel(Object.assign({}, utils.panelBasicActions, {
+      el: '#panel__basic-actions6'
+    }));
+    editor6.Panels.addPanel(Object.assign({}, utils.panelSidebar, {
+      el: '#panel__right6'
+    }));
+    editor6.Panels.addPanel(Object.assign({}, utils.panelSwitcherTraits, {
+      el: '#panel__switcher6'
+    }));
+    window.editor6 = editor6;
+  }
+}
+</script>
+
+<style>
+.panel__switcher {
+  position: initial;
+}
+</style>

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

@@ -70,6 +70,9 @@ var styleManager = {
     }]
 };
 
+var layerManager = { scrollLayers: 0 };
+var traitManager = {};
+
 var panelTop = { id: 'panel-top' };
 var panelBasicActions = {
   id: 'panel-basic',
@@ -119,50 +122,81 @@ var panelSidebar = {
     keyWidth: 'flex-basis',
   },
 };
+
+var buttonShowLayers = {
+  id: 'show-layers',
+  active: true,
+  label: 'Layers',
+  command: {
+    getRowEl(editor) { return editor.getContainer().parentNode.parentNode; },
+    getLayersEl(row) { return row.querySelector('.layers-container') },
+    getStyleEl(row) { return row.querySelector('.styles-container') },
+
+    run(editor, sender) {
+      const row = this.getRowEl(editor);
+      const lmEl = this.getLayersEl(row);
+      lmEl.style.display = '';
+    },
+    stop(editor, sender) {
+      const row = this.getRowEl(editor);
+      const lmEl = this.getLayersEl(row);
+      lmEl.style.display = 'none';
+    },
+  },
+};
+var buttonShowStyle = {
+  id: 'show-style',
+  label: 'Styles',
+  active: true,
+  command: {
+    getRowEl(editor) { return editor.getContainer().parentNode.parentNode; },
+    getLayersEl(row) { return row.querySelector('.layers-container') },
+    getStyleEl(row) { return row.querySelector('.styles-container') },
+
+    run(editor, sender) {
+      const row = this.getRowEl(editor);
+      const smEl = this.getStyleEl(row);
+      smEl.style.display = '';
+    },
+    stop(editor, sender) {
+      const row = this.getRowEl(editor);
+      const smEl = this.getStyleEl(row);
+      smEl.style.display = 'none';
+    },
+  },
+};
+var buttonShowTraits = {
+  id: 'show-traits',
+  label: 'Traits',
+  active: true,
+  command: {
+    getTraitsEl(editor) {
+      const row = editor.getContainer().closest('.editor-row');
+      return row.querySelector('.traits-container');
+    },
+    run(editor, sender) {
+      this.getTraitsEl(editor).style.display = '';
+    },
+    stop(editor, sender) {
+      this.getTraitsEl(editor).style.display = 'none';
+    },
+  },
+};
+
 var panelSwitcher = {
   id: 'panel-switcher',
   buttons: [
-    {
-      id: 'show-layers',
-      active: true,
-      label: 'Layers',
-      command: {
-        getRowEl(editor) { return editor.getContainer().parentNode.parentNode; },
-        getLayersEl(row) { return row.querySelector('.layers-container') },
-        getStyleEl(row) { return row.querySelector('.styles-container') },
-
-        run(editor, sender) {
-          const row = this.getRowEl(editor);
-          const lmEl = this.getLayersEl(row);
-          lmEl.style.display = '';
-        },
-        stop(editor, sender) {
-          const row = this.getRowEl(editor);
-          const lmEl = this.getLayersEl(row);
-          lmEl.style.display = 'none';
-        },
-      },
-    }, {
-      id: 'show-style',
-      label: 'Styles',
-      active: true,
-      command: {
-        getRowEl(editor) { return editor.getContainer().parentNode.parentNode; },
-        getLayersEl(row) { return row.querySelector('.layers-container') },
-        getStyleEl(row) { return row.querySelector('.styles-container') },
-
-        run(editor, sender) {
-          const row = this.getRowEl(editor);
-          const smEl = this.getStyleEl(row);
-          smEl.style.display = '';
-        },
-        stop(editor, sender) {
-          const row = this.getRowEl(editor);
-          const smEl = this.getStyleEl(row);
-          smEl.style.display = 'none';
-        },
-      },
-    }
+    buttonShowLayers,
+    buttonShowStyle,
+  ],
+};
+
+var panelSwitcherTraits = {
+  id: 'panel-switcher',
+  buttons: [
+    buttonShowLayers,
+    buttonShowStyle,
+    buttonShowTraits,
   ],
 };
 
@@ -205,14 +239,24 @@ var gjsConfigStyle = Object.assign({}, gjsConfigBlocks, {
   styleManager: Object.assign({}, styleManager, { appendTo: '#styles-container5' }),
 });
 
+var gjsConfigTraits = Object.assign({}, gjsConfigBlocks, {
+  container: '#gjs6',
+  blockManager: Object.assign({}, blockManager, { appendTo: '#blocks6' }),
+  layerManager: Object.assign({}, layerManager, { appendTo: '#layers-container6' }),
+  styleManager: Object.assign({}, styleManager, { appendTo: '#styles-container6' }),
+  traitManager: Object.assign({}, traitManager, { appendTo: '#traits-container6' }),
+});
+
 module.exports = {
   gjsConfigStart,
   gjsConfigBlocks,
   gjsConfigPanels,
   gjsConfigLayers,
   gjsConfigStyle,
+  gjsConfigTraits,
   panelTop,
   panelBasicActions,
   panelSidebar,
   panelSwitcher,
+  panelSwitcherTraits,
 };

docs/getting-started.md

@@ -409,7 +409,72 @@ Each component can also indicate what to style and what not.
 -->
 
 ## Traits
-Most of them time you would style your components and you would place them somewhere in the structure, but sometimes your components might need custom attributes or even custom behaviors and for this need you can make use of traits
+Most of the time you would style your components and place them somewhere in the structure, but sometimes your components might need custom attributes or even custom behaviors and for this need you can make use of traits. A common use of traits is the ability to update HTML element attributes (eg. `placeholder` for inputs or `alt` for images) but you can also define your own custom traits, access the selected Component model and do whatever you want. For this guide we just gonna show you how to render available traits, for more details on how to extend them we suggest to read the [Trait Manager Module page](modules/Traits.html).
+
+Let's create a new container for traits, tell the editor where to render it and update the sidebar switcher
+
+```html{12}
+<div class="panel__top">
+    <div class="panel__basic-actions"></div>
+    <div class="panel__switcher"></div>
+</div>
+<div class="editor-row">
+  <div class="editor-canvas">
+    <div id="gjs">...</div>
+  </div>
+  <div class="panel__right">
+    <div class="layers-container"></div>
+    <div class="styles-container"></div>
+    <div class="traits-container"></div>
+  </div>
+</div>
+<div id="blocks"></div>
+```
+
+```js
+const editor = grapesjs.init({
+  // ...
+  panels: {
+    defaults: [
+      // ...
+      {
+        id: 'panel-switcher',
+        el: '.panel__switcher',
+        buttons: [
+          // ...
+          {
+            id: 'show-traits',
+            active: true,
+            label: 'Traits',
+            command: 'show-traits',
+        }],
+      }
+    ]
+  },
+  traitManager: {
+    appendTo: '.traits-container',
+  },
+});
+
+// Define command
+// ...
+editor.Commands.add('show-traits', {
+  getTraitsEl(editor) {
+    const row = editor.getContainer().closest('.editor-row');
+    return row.querySelector('.traits-container');
+  },
+  run(editor, sender) {
+    this.getTraitsEl(editor).style.display = '';
+  },
+  stop(editor, sender) {
+    this.getTraitsEl(editor).style.display = 'none';
+  },
+});
+```
+
+<Demo>
+  <DemoTraits/>
+</Demo>
 
 ## Devices
 Grapesjs implements also a built-in module witch allows you to work with responsive templates easily. Let's see how to define different devices