Add onClick property to Block

src/block_manager/config/config.js

@@ -3,8 +3,18 @@ export default {
   // With the empty value, nothing will be rendered
   appendTo: '',
 
-  // Append blocks to canvas on click
-  appendOnClick: 0,
+  // Append blocks to canvas on click.
+  // With the `true` value, it will try to append the block to the selected component.
+  // If there is no selected component, the block will be appened to the wrapper.
+  // You can also pass a function to this option, use it as a catch-all for all block
+  // clicks and implement a custom logic for each block.
+  // appendOnClick: (editor, block) => {
+  //   if (block.get('id') === 'some-id')
+  //    editor.getSelected().append(block.get('content'))
+  //   else
+  //    editor.getWrapper().append(block.get('content'))
+  // }
+  appendOnClick: false,
 
   blocks: []
 };

src/block_manager/model/Block.js

@@ -9,6 +9,7 @@ import { Model } from 'common';
  * @property {Boolean} [select=false] If true, the dropped component will be selected
  * @property {Boolean} [resetId=false] If true, all IDs of dropped components and their styles will be changed
  * @property {Boolean} [disable=false] Disable the block from being interacted
+ * @property {Function} [onClick] Custom behavior on click, eg. `(editor, block) => editor.getWrapper().append(block.get('content'))`
  * @property {Object} [attributes={}] Block attributes to apply in the view element
  */
 export default class Block extends Model {
@@ -22,6 +23,7 @@ export default class Block extends Model {
       select: false,
       resetId: false,
       disable: false,
+      onClick: null,
       attributes: {}
     };
   }

src/block_manager/view/BlockView.js

@@ -1,5 +1,5 @@
 import Backbone from 'backbone';
-import { isObject } from 'underscore';
+import { isFunction, isObject } from 'underscore';
 import { on, off, hasDnd } from 'utils/mixins';
 
 export default Backbone.View.extend({
@@ -21,9 +21,15 @@ export default Backbone.View.extend({
     this.listenTo(model, 'change', this.render);
   },
 
-  handleClick() {
+  handleClick(ev) {
     const { config, model, em } = this;
-    if (!config.appendOnClick) return;
+    const onClick = model.get('onClick') || config.appendOnClick;
+    em.trigger('block:click', model, ev);
+    if (!onClick) {
+      return;
+    } else if (isFunction(onClick)) {
+      return onClick(em.getEditor(), model, { event: ev });
+    }
     const sorter = config.getSorter();
     const content = model.get('content');
     const selected = em.getSelected();