Update Module assets in docs

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

@@ -140,7 +140,6 @@ var panelSwitcher = {
           const row = this.getRowEl(editor);
           const lmEl = this.getLayersEl(row);
           lmEl.style.display = 'none';
-          sender && sender.set('active', false);
         },
       },
     }, {
@@ -161,7 +160,6 @@ var panelSwitcher = {
           const row = this.getRowEl(editor);
           const smEl = this.getStyleEl(row);
           smEl.style.display = 'none';
-          sender && sender.set('active', false);
         },
       },
     }

docs/getting-started.md

@@ -4,6 +4,7 @@ meta:
   - name: keywords
     content: grapesjs getting started
 ---
+TODO: webpage preset link
 
 # Getting Started
 
@@ -312,12 +313,12 @@ const editor = grapesjs.init({
             id: 'show-layers',
             active: true,
             label: 'Layers',
-            command: 'commandShowLayers',
+            command: 'show-layers',
           }, {
             id: 'show-style',
             active: true,
             label: 'Styles',
-            command: 'commandShowStyle',
+            command: 'show-styles',
         }],
       }
     ]
@@ -366,7 +367,7 @@ const editor = grapesjs.init({
 });
 
 // Define commands
-editor.Commands.add('commandShowLayers', {
+editor.Commands.add('show-layers', {
   getRowEl(editor) { return editor.getContainer().closest('.editor-row'); },
   getLayersEl(row) { return row.querySelector('.layers-container') },
 
@@ -377,10 +378,9 @@ editor.Commands.add('commandShowLayers', {
   stop(editor, sender) {
     const lmEl = this.getLayersEl(this.getRowEl(editor));
     lmEl.style.display = 'none';
-    sender && sender.set('active', false);
   },
 });
-editor.Commands.add('commandShowStyle', {
+editor.Commands.add('show-styles', {
   getRowEl(editor) { return editor.getContainer().closest('.editor-row'); },
   getStyleEl(row) { return row.querySelector('.styles-container') },
 
@@ -391,7 +391,6 @@ editor.Commands.add('commandShowStyle', {
   stop(editor, sender) {
     const smEl = this.getStyleEl(this.getRowEl(editor));
     smEl.style.display = 'none';
-    sender && sender.set('active', false);
   },
 });
 ```
@@ -400,16 +399,17 @@ editor.Commands.add('commandShowStyle', {
   <DemoStyle/>
 </Demo>
 
-Now any component could be defined with its own style, you can add any other CSS property to your sectors and configure it by your needs.
+Inside Style Manager definition we use `buildProps` to create properties from [available built-in objects](modules/Style-manager.html#built-in-properties) then in `properties` we can override same objects (eg. passing another `name` to change the label) identified by `property` name. As you can see from `custom-prop` example it's a matter of defining the CSS `property` and the input `type`. We suggest to check a more complete example of Style Manager properties usage from the [webpage preset](##)
 
-<!-- To get more about style manager extension check out this guide.
+<!--
+To get more about style manager extension check out this guide.
 Each component can also indicate what to style and what not.
 
 -- Example component with limit styles
 -->
 
 ## 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 behaviours
+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
 
 ## 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

docs/modules/Assets.md

@@ -153,7 +153,7 @@ If you want a complete list of available properties check the source [AssetImage
 The built-in Asset Manager modal is implemented and is showing up when requested. By default, you can make it appear by dragging Image Components in canvas, double clicking on images and all other stuff related to images (eg. CSS styling)
 
 
-[[img/assets-builtin-modal.png]]
+<img :src="$withBase('/assets-builtin-modal.png')">
 
 
 Showing up of the modal is registered with a command, so you can make it appear with this
@@ -315,7 +315,7 @@ am.render(am.getAll().filter(
 
 You should see something like this
 
-[[img/assets-empty-view.png]]
+<img :src="$withBase('/assets-empty-view.png')">
 
 
 The SVG asset is not correctly rendered and this is because we haven't yet configured its view
@@ -349,7 +349,7 @@ am.addType('svg-icon', {
 
 This is the result
 
-[[img/assets-svg-view.png]]
+<img :src="$withBase('/assets-svg-view.png')">
 
 
 Now we have to deal with how to assign our `svgContent` to the selected element
@@ -465,7 +465,7 @@ am.addType('image', {
 Asset Manager includes an easy to use, drag and drop, uploader and integrates few UI helpers. The default uploader is already visible when you open the Asset Manager.
 
 
-[[img/assets-uploader.png]]
+<img :src="$withBase('/assets-uploader.png')">
 
 
 You can click on the uploader to start select your files or just drag them directly from your computer to trigger the uploader. Obviously, before make it work you have to setup your server in order to receive your assets and specify the upload endpoint in configurations
@@ -552,8 +552,7 @@ When the uploading is over, by default (via config parameter `autoAdd: 1`), the
 
 There is also another helper which improve the uploading of assets, a full-width editor dropzone.
 
-
-[[img/assets-full-dropzone.gif]]
+<img :src="$withBase('/assets-full-dropzone.gif')">
 
 
 All you have to do is to activate it and possibly set a custom content (you might also want to hide the default uploader)

docs/modules/Traits.md

@@ -25,7 +25,7 @@ In GrapesJS, Traits could define different parameters and behaviors of a single
 
 You can add traits to the component by extending them or while creating a new one. Let's see in this example how to make inputs more customizable by the editor. All components, by default, contain 2 traits: id and title (at the moment of writing). So, if you select an input and open the Settings panel you will see just this:
 
-[[img/default-traits.png]]
+<img :src="$withBase('/default-traits.png')">
 
 In this case we gonna create a new Component ([check here](Components) for more details about the creation of new components) with a new set of traits
 
@@ -73,7 +73,7 @@ domComps.addType('input', {
 
 Now the result will be
 
-[[img/input-custom-traits.png]]
+<img :src="$withBase('/input-custom-traits.png')">
 
 By default, traits modify attributes of the model (which than reflected in canvas) but you can also have traits which change the property