Fix activate/select on blocks with content as array

docs/modules/Blocks.md

@@ -118,7 +118,7 @@ editor.Components.addType('my-cmp-alt', {
 ```
 
 ### HTML strings
-Using HTML strings as `content` is not wrong, in some cases you don't need the finest control over components and want to leave the user full freedom on template composition (eg. static site builder editor with HTML copy-pasted from some framework like [Tailwind Components](https://tailwindcomponents.com/))
+Using HTML strings as `content` is not wrong, in some cases you don't need the finest control over components and want to leave the user full freedom on template composition (eg. static site builder editor with HTML copy-pasted from a framework like [Tailwind Components](https://tailwindcomponents.com/))
 ```js
 // Your block
 {
@@ -169,7 +169,7 @@ editor.Components.addType('cmp-Y', {
   }
 });
 
-// -- [Option 2]: Declare properties in HTML strings (less recommended) --
+// -- [Option 2]: Declare properties in HTML strings (less recommended option) --
 {
   // ...
   content: `<div class="el-X">
@@ -182,6 +182,23 @@ editor.Components.addType('cmp-Y', {
 // You're already defining properties of each element.
 ```
 
+Here we showed all the possibilities you have with HTML strings, but we strongly advise against the abuse of the `Option 2` and to stick to a more component-oriented approach.
+Without a proper component type, not only your HTML will be harder to read, but all those defined properties will be "hard-coded" to a generic component of those elements. So, if one day you decide to "upgrade" the logic of the component (eg. `draggable: '.el-X'` -> `draggable: '.el-X, .el-Z'`), you won't be able.
+
+
+### Mixed
+It's also possible to mix components with HTML strings by passing an array.
+```js
+{
+  // ...
+  // Options like `activate`/`select` will be triggered only on the first component.
+  activate: true,
+  content: [
+    { type: 'image' },
+    `<div>Extra</div>`
+  ]
+}
+```
 
 
 ## Important caveats

src/block_manager/view/BlockView.js

@@ -1,5 +1,5 @@
 import Backbone from 'backbone';
-import { isFunction, isObject } from 'underscore';
+import { isFunction, isObject, isArray } from 'underscore';
 import { on, off, hasDnd } from 'utils/mixins';
 
 export default Backbone.View.extend({
@@ -107,18 +107,19 @@ export default Backbone.View.extend({
       const oldActive = result.get && result.get(oldKey);
       const toActive = model.get('activate') || oldActive;
       const toSelect = model.get('select');
+      const first = isArray(result) ? result[0] : result;
 
       if (toSelect || (toActive && toSelect !== false)) {
-        em.setSelected(result);
+        em.setSelected(first);
       }
 
       if (toActive) {
-        result.trigger('active');
-        result.unset(oldKey);
+        first.trigger('active');
+        first.unset(oldKey);
       }
 
       if (model.get('resetId')) {
-        result.onAll(model => model.resetId());
+        first.onAll(model => model.resetId());
       }
     }