Add new Command lifecycle events

src/commands/index.js

@@ -55,6 +55,7 @@ module.exports = () => {
     }
 
     delete obj.initialize;
+    obj.id = id;
     commands[id] = AbsCommands.extend(obj);
     return this;
   };

src/commands/view/CommandAbstract.js

@@ -90,6 +90,38 @@ module.exports = Backbone.View.extend({
    * */
   init(o) {},
 
+  /**
+   * Method that run command
+   * @param  {Object}  editor Editor instance
+   * @param  {Object}  [options={}] Options
+   * @private
+   * */
+  callRun(editor, options = {}) {
+    const id = this.id;
+    editor.trigger(`run:${id}:before`, options);
+
+    if (options && options.abort) {
+      editor.trigger(`abort:${id}`, options);
+      return;
+    }
+
+    const result = this.run(editor, editor, options);
+    editor.trigger(`run:${id}`, result, options);
+  },
+
+  /**
+   * Method that run command
+   * @param  {Object}  editor Editor instance
+   * @param  {Object}  [options={}] Options
+   * @private
+   * */
+  callStop(editor, options = {}) {
+    const id = this.id;
+    editor.trigger(`stop:${id}:before`, options);
+    const result = this.stop(editor, editor, options);
+    editor.trigger(`stop:${id}`, result, options);
+  },
+
   /**
    * Method that run command
    * @param  {Object}  em     Editor model

src/editor/index.js

@@ -58,6 +58,9 @@
  * ## Commands
  * * `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);`)
  * ## General
  * * `canvasScroll` - Triggered when the canvas is scrolle
  * * `undo` - Undo executed
@@ -426,14 +429,11 @@ module.exports = config => {
      * @example
      * editor.runCommand('myCommand', {someValue: 1});
      */
-    runCommand(id, options) {
-      var result;
-      var command = em.get('Commands').get(id);
+    runCommand(id, options = {}) {
+      let result;
+      const command = em.get('Commands').get(id);
+      if (command) result = command.callRun(this, options);
 
-      if (command) {
-        result = command.run(this, this, options);
-        this.trigger('run:' + id);
-      }
       return result;
     },
 
@@ -445,14 +445,11 @@ module.exports = config => {
      * @example
      * editor.stopCommand('myCommand', {someValue: 1});
      */
-    stopCommand(id, options) {
-      var result;
-      var command = em.get('Commands').get(id);
+    stopCommand(id, options = {}) {
+      let result;
+      const command = em.get('Commands').get(id);
+      if (command) result = command.callStop(this, options);
 
-      if (command) {
-        result = command.stop(this, this, options);
-        this.trigger('stop:' + id);
-      }
       return result;
     },
 

test/specs/grapesjs/index.js

@@ -252,6 +252,32 @@ describe('GrapesJS', () => {
       expect(editor.testVal).toEqual(htmlString + '5');
     });
 
+    it('Trigger custom command events', () => {
+      const id = 'test-command';
+      const editor = obj.init(config);
+      const result = {};
+      editor.on(`run:${id}`, () => (result.run = 1));
+      editor.on(`run:${id}:before`, () => (result.runBefore = 1));
+      editor.on(`stop:${id}`, () => (result.stop = 1));
+      editor.on(`stop:${id}:before`, () => (result.stopBefore = 1));
+      editor.on(`abort:${id}`, () => (result.abort = 1));
+      editor.Commands.add(id, {
+        run() {},
+        stop() {}
+      });
+      editor.runCommand(id);
+      editor.stopCommand(id);
+      editor.on(`run:${id}:before`, opts => (opts.abort = 1));
+      editor.runCommand(id);
+      expect(result).toEqual({
+        run: 1,
+        runBefore: 1,
+        stop: 1,
+        stopBefore: 1,
+        abort: 1
+      });
+    });
+
     it('Set default devices', () => {
       config.deviceManager = {};
       config.deviceManager.devices = [