Update Select Component

src/commands/view/SelectComponent.js

@@ -1,7 +1,9 @@
 var ToolbarView = require('dom_components/view/ToolbarView');
 var Toolbar = require('dom_components/model/Toolbar');
 var key = require('keymaster');
+var Backbone = require('backbone');
 let showOffsets;
+const $ = Backbone.$;
 
 module.exports = {
 
@@ -140,11 +142,12 @@ module.exports = {
    * @private
    */
   onHover(e) {
+    const model = $(e.target).data('model');
     e.stopPropagation();
     var trg = e.target;
 
     // Adjust tools scroll top
-    if(!this.adjScroll){
+    if (!this.adjScroll) {
       this.adjScroll = 1;
       this.onFrameScroll(e);
       this.updateAttached();
@@ -282,6 +285,7 @@ module.exports = {
   updateHighlighter(el, pos) {
     var $el = $(el);
     var model = $el.data('model');
+
     if(!model || (model && model.get('status') == 'selected')) {
       return;
     }

src/dom_components/view/ComponentView.js

@@ -29,9 +29,18 @@ module.exports = Backbone.View.extend({
     this.listenTo(model, 'change:script', this.render);
     this.listenTo(model, 'change', this.handleChange);
     this.listenTo(model.get('classes'), 'add remove change', this.updateClasses);
-    this.$el.data('model', model);
+
+    const $el = this.$el;
+    const el = this.el;
+    const em = this.em;
+    $el.data('model', model);
+    $el.data('collection', this.components);
     model.view = this;
-    this.$el.data("collection", this.components);
+
+    if (em) {
+      em.data(el, 'model', model);
+      em.data(el, 'collection', model.get('components'));
+    }
 
     if(model.get('classes').length)
       this.importClasses();

src/editor/model/Editor.js

@@ -1,21 +1,23 @@
-var deps = [
-require('utils'),
-require('storage_manager'),
-require('device_manager'),
-require('parser'),
-require('selector_manager'),
-require('modal_dialog'),
-require('code_manager'),
-require('panels'),
-require('rich_text_editor'),
-require('style_manager'),
-require('asset_manager'),
-require('css_composer'),
-require('dom_components'),
-require('canvas'),
-require('commands'),
-require('block_manager'),
-require('trait_manager'),
+import { isUndefined, defaults } from 'underscore';
+
+const deps = [
+  require('utils'),
+  require('storage_manager'),
+  require('device_manager'),
+  require('parser'),
+  require('selector_manager'),
+  require('modal_dialog'),
+  require('code_manager'),
+  require('panels'),
+  require('rich_text_editor'),
+  require('style_manager'),
+  require('asset_manager'),
+  require('css_composer'),
+  require('dom_components'),
+  require('canvas'),
+  require('commands'),
+  require('block_manager'),
+  require('trait_manager'),
 ];
 
 const Backbone = require('backbone');
@@ -607,4 +609,26 @@ module.exports = Backbone.Model.extend({
     w.getSelection().removeAllRanges();
   },
 
+  /**
+   * Set/get data from the HTMLElement
+   * @param  {HTMLElement} el
+   * @param  {string} name Data name
+   * @param  {any} value Date value
+   * @return {any}
+   * @private
+   */
+  data(el, name, value) {
+    const varName = '_gjs-data';
+
+    if (!el[varName]) {
+      el[varName] = {};
+    }
+
+    if (isUndefined(value)) {
+      return el[varName][name];
+    } else {
+      el[varName][name] = value;
+    }
+  }
+
 });

src/grapesjs/index.js

@@ -1,15 +1,15 @@
 import { isUndefined, defaults } from 'underscore';
 
 module.exports = (() => {
+  const cash = require('cash-dom');
+  require('utils/cashAdds')(cash);
+
   const defaultConfig = require('./config/config');
   const Editor = require('editor');
   const PluginManager = require('plugin_manager');
-  const cash = require('cash-dom');
   const plugins = new PluginManager();
   const editors = [];
 
-  require('utils/cashAdds')(cash);
-
   return {
 
     // Will be replaced on build