Add `appendOnClick` option to Blocks module #1951

src/block_manager/config/config.js

@@ -3,5 +3,8 @@ module.exports = {
   // With the empty value, nothing will be rendered
   appendTo: '',
 
+  // Append blocks to canvas on click
+  appendOnClick: 0,
+
   blocks: []
 };

src/block_manager/view/BlockView.js

@@ -4,6 +4,7 @@ import { on, off, hasDnd } from 'utils/mixins';
 
 module.exports = Backbone.View.extend({
   events: {
+    click: 'handleClick',
     mousedown: 'startDrag',
     dragstart: 'handleDragStart',
     drag: 'handleDrag',
@@ -20,6 +21,40 @@ module.exports = Backbone.View.extend({
     this.listenTo(model, 'change', this.render);
   },
 
+  handleClick() {
+    const { config, model, em } = this;
+    if (!config.appendOnClick) return;
+    const sorter = config.getSorter();
+    const content = model.get('content');
+    const selected = em.getSelected();
+    sorter.setDropContent(content);
+    let target, valid;
+
+    // If there is a selected component, try first to append
+    // the block inside, otherwise, try to place it as a next sibling
+    if (selected) {
+      valid = sorter.validTarget(selected.getEl(), content);
+
+      if (valid.valid) {
+        target = selected;
+      } else {
+        const parent = selected.parent();
+        valid = sorter.validTarget(parent.getEl(), content);
+        if (valid.valid) target = parent;
+      }
+    }
+
+    // If no target found yet, try to append the block to the wrapper
+    if (!target) {
+      const wrapper = em.getWrapper();
+      valid = sorter.validTarget(wrapper.getEl(), content);
+      if (valid.valid) target = wrapper;
+    }
+
+    const result = target && target.append(content)[0];
+    result && em.setSelected(result, { scroll: 1 });
+  },
+
   /**
    * Start block dragging
    * @private

src/canvas/index.js

@@ -461,7 +461,11 @@ module.exports = () => {
       if (!elem) return;
 
       if (!cv.isElInViewport(elem) || opts.force) {
-        elem.scrollIntoView(opts);
+        const opt =
+          typeof opts === 'object'
+            ? opts
+            : { behavior: 'smooth', block: 'nearest' };
+        elem.scrollIntoView(opt);
       }
     },
 

src/editor/index.js

@@ -411,6 +411,8 @@ export default (config = {}) => {
     /**
      * Select a component
      * @param  {Component|HTMLElement} el Component to select
+     * @param  {Object} [opts] Options
+     * @param  {Boolean} [opts.scroll] Scroll canvas to the selected element
      * @return {this}
      * @example
      * // Select dropped block
@@ -418,8 +420,8 @@ export default (config = {}) => {
      *  editor.select(model);
      * });
      */
-    select(el) {
-      em.setSelected(el);
+    select(el, opts) {
+      em.setSelected(el, opts);
       return this;
     },
 

src/editor/model/Editor.js

@@ -281,9 +281,11 @@ module.exports = Backbone.Model.extend({
    * @private
    */
   setSelected(el, opts = {}) {
+    const { scroll } = opts;
     const multiple = isArray(el);
     const els = multiple ? el : [el];
     const selected = this.get('selected');
+    let added;
 
     // If an array is passed remove all selected
     // expect those yet to be selected
@@ -294,7 +296,10 @@ module.exports = Backbone.Model.extend({
       if (model && !model.get('selectable')) return;
       !multiple && this.removeSelected(selected.filter(s => s !== model));
       this.addSelected(model, opts);
+      added = model;
     });
+
+    scroll && added && this.get('Canvas').scrollTo(added, scroll);
   },
 
   /**

src/utils/Sorter.js

@@ -102,6 +102,7 @@ module.exports = Backbone.View.extend({
    * @param {String|Object} content
    */
   setDropContent(content) {
+    this.dropModel = null;
     this.dropContent = content;
   },