From cf5be4c1989d583feb694843e59fd06045fe3acb Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Sat, 14 Aug 2021 15:30:58 +0200
Subject: [PATCH] Add onClick property to Block

---
 src/block_manager/config/config.js  | 14 ++++++++++++--
 src/block_manager/model/Block.js    |  2 ++
 src/block_manager/view/BlockView.js | 12 +++++++++---
 3 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/block_manager/config/config.js b/src/block_manager/config/config.js
index 92e4784b1..a0b914e5f 100644
--- a/src/block_manager/config/config.js
+++ b/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: []
 };
diff --git a/src/block_manager/model/Block.js b/src/block_manager/model/Block.js
index bec276ec7..842105443 100644
--- a/src/block_manager/model/Block.js
+++ b/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: {}
     };
   }
diff --git a/src/block_manager/view/BlockView.js b/src/block_manager/view/BlockView.js
index fe59d23b5..a8b0d4c3b 100644
--- a/src/block_manager/view/BlockView.js
+++ b/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();