Call command events also when called from buttons

docs/.vuepress/components/DemoCustomPanels.vue

@@ -48,6 +48,8 @@ module.exports = {
       ],
     });
     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>

docs/getting-started.md

@@ -192,7 +192,17 @@ editor3.Panels.addPanel({
 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).
 
--- show commands events
+```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', () => console.log('After the command run'));
+```
 
 ## Layers
 -- show image

src/commands/view/CommandAbstract.js

@@ -106,7 +106,8 @@ module.exports = Backbone.View.extend({
       return;
     }
 
-    const result = this.run(editor, editor, options);
+    const sender = options.sender || editor;
+    const result = this.run(editor, sender, options);
     editor.trigger(`run:${id}`, result, options);
     return result;
   },
@@ -119,8 +120,9 @@ module.exports = Backbone.View.extend({
    * */
   callStop(editor, options = {}) {
     const id = this.id;
+    const sender = options.sender || editor;
     editor.trigger(`stop:${id}:before`, options);
-    const result = this.stop(editor, editor, options);
+    const result = this.stop(editor, sender, options);
     editor.trigger(`stop:${id}`, result, options);
     return result;
   },

src/panels/view/ButtonView.js

@@ -71,6 +71,7 @@ module.exports = Backbone.View.extend({
   updateActive() {
     const model = this.model;
     const context = model.get('context');
+    const options = model.get('options');
     let command = {};
     var editor = this.em && this.em.get ? this.em.get('Editor') : null;
     var commandName = model.get('command');
@@ -88,8 +89,7 @@ module.exports = Backbone.View.extend({
       model.set('active', true, { silent: true }).trigger('checkActive');
 
       if (command.run) {
-        command.run(editor, model, model.get('options'));
-        editor.trigger('run:' + commandName);
+        command.callRun(editor, { ...options, sender: model });
       }
 
       // Disable button if there is no stop method
@@ -99,8 +99,7 @@ module.exports = Backbone.View.extend({
       model.collection.deactivateAll(context);
 
       if (command.stop) {
-        command.stop(editor, model, model.get('options'));
-        editor.trigger('stop:' + commandName);
+        command.callStop(editor, { ...options, sender: model });
       }
     }
   },