Start command documentation and clean its configuration

dist/grapes.js

@@ -25079,6 +25079,7 @@ module.exports = function () {
 
       var elem = (0, _mixins.getElement)(el);
       var cv = this.getCanvasView();
+      if (!elem) return;
 
       if (!cv.isElInViewport(elem) || opts.force) {
         elem.scrollIntoView(opts);
@@ -27828,7 +27829,13 @@ module.exports = {
           width = _editor$Canvas$offset.width,
           height = _editor$Canvas$offset.height;
 
-      this.setPosition({ x: left, y: top, position: position, width: width, height: height });
+      this.setPosition({
+        x: left,
+        y: top,
+        width: width + 'px',
+        height: height + 'px',
+        position: position
+      });
     }
   },
   onDrag: function onDrag() {
@@ -29962,16 +29969,15 @@ module.exports = {
    * On frame scroll callback
    * @private
    */
-  onFrameScroll: function onFrameScroll(e) {
+  onFrameScroll: function onFrameScroll() {
     var el = this.cacheEl;
+
     if (el) {
       var elPos = this.getElementPos(el);
       this.updateBadge(el, elPos);
       var model = this.em.getSelected();
-
-      if (model) {
-        this.updateToolbarPos(model.view.el);
-      }
+      var viewEl = model && model.getEl();
+      viewEl && this.updateToolbarPos(viewEl);
     }
   },
 
@@ -39262,7 +39268,7 @@ module.exports = function () {
     plugins: plugins,
 
     // Will be replaced on build
-    version: '0.14.58',
+    version: '0.14.59',
 
     /**
      * Initialize the editor with passed options

docs/modules/Commands.md

@@ -0,0 +1,38 @@
+---
+title: Commands
+---
+
+# Commands
+
+A basic command in GrapesJS it's a simple function, but you will see in this guide how powerfull they can be. The main goal of the Command module is to centralize functions and be easily reused across the editor. Another big advantage of using commands is the ability to track them, extend or even interrupt beside some conditions.
+
+::: warning
+This guide is referring to GrapesJS v0.14.59 or higher
+:::
+
+[[toc]]
+
+
+## Basic configuration
+
+You can create your commands already from initialization by passing them in the `commands.defaults` options:
+
+```js
+const editor = grapesjs.init({
+  ...
+  commands: {
+    defaults: [
+      {
+        // id and run are mandatory in this case
+        id: 'my-command-id',
+        run() {
+          alert('This is my command');
+        },
+      }, {
+        id: '...',
+        // ...
+      }
+    ],
+  }
+});
+```

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "grapesjs",
-  "version": "0.14.58",
+  "version": "0.14.59",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "grapesjs",
   "description": "Free and Open Source Web Builder Framework",
-  "version": "0.14.58",
+  "version": "0.14.59",
   "author": "Artur Arseniev",
   "license": "BSD-3-Clause",
   "homepage": "http://grapesjs.com",

src/commands/config/config.js

@@ -1,31 +1,10 @@
 module.exports = {
-  ESCAPE_KEY: 27,
-
   stylePrefix: 'com-',
 
+  // Default array of commands
   defaults: [],
 
   // If true, stateful commands (with `run` and `stop` methods) can't be runned multiple times.
   // So, if the command is already active, running it again will not execute the `run` method
-  strict: 1,
-
-  // Editor model
-  // @deprecated
-  em: null,
-
-  // If true center new first-level components
-  // @deprecated
-  firstCentered: true,
-
-  // If true the new component will created with 'height', else 'min-height'
-  // @deprecated
-  newFixedH: false,
-
-  // Minimum height (in px) of new component
-  // @deprecated
-  minComponentH: 50,
-
-  // Minimum width (in px) of component on creation
-  // @deprecated
-  minComponentW: 50
+  strict: 1
 };

src/commands/index.js

@@ -28,13 +28,15 @@
 
 import { isFunction, includes } from 'underscore';
 import CommandAbstract from './view/CommandAbstract';
+import defaults from './config/config';
+
+console.log('defaults', defaults);
 
 module.exports = () => {
   let em;
   var c = {},
     commands = {},
-    defaultCommands = {},
-    defaults = require('./config/config');
+    defaultCommands = {};
   const active = {};
 
   // Need it here as it would be used below

src/commands/view/CreateComponent.js

@@ -194,7 +194,7 @@ module.exports = _.extend({}, SelectPosition, {
    * */
   rollback(e, force) {
     var key = e.which || e.keyCode;
-    if (key == this.config.ESCAPE_KEY || force) {
+    if (key == 27 || force) {
       this.isDragged = false;
       this.endDraw();
     }

src/commands/view/MoveComponent.js

@@ -129,7 +129,7 @@ module.exports = _.extend({}, SelectPosition, SelectComponent, {
    * */
   rollback(e, force) {
     var key = e.which || e.keyCode;
-    if (key == this.opt.ESCAPE_KEY || force) {
+    if (key == 27 || force) {
       this.sorter.moved = false;
       this.sorter.endMove();
     }