Merge branch 'dev' of https://github.com/artf/grapesjs into dev

docs/modules/Components.md

@@ -191,7 +191,7 @@ When we pass an HTML string to the editor like this:
 
 For each DOM element (`div`, `img`, `span`, etc.) the editor will create and store an object representation. Every future change to the template will be made on top of this structure, which will then reflect on the canvas. So each object, usually called *Model* (or state/store), will be the source of truth for the template, but what exactly does that mean?
 
-In more practical example, once the template is rendered on the canvas, if you try to remove one of its elements (eg. by using using the browser inspector) and ask the editor to print the HTML (using `editor.getHtml()`) you'll see that the element will still be there. This is because the editor relies on Models and not on the DOM elements inside the canvas. This approach allows us to be extremely flexible on how we generate the final code (from the *Model*) and how to render it inside the canvas (from the *View*).
+In more practical example, once the template is rendered on the canvas, if you try to remove one of its elements (eg. by using the browser inspector) and ask the editor to print the HTML (using `editor.getHtml()`) you'll see that the element will still be there. This is because the editor relies on Models and not on the DOM elements inside the canvas. This approach allows us to be extremely flexible on how we generate the final code (from the *Model*) and how to render it inside the canvas (from the *View*).
 
 
 

src/canvas/view/CanvasView.js

@@ -262,7 +262,7 @@ export default Backbone.View.extend({
       body.append(this.getJsContainer());
       em.trigger('loaded');
       this.frame.el.contentWindow.onscroll = this.onFrameScroll;
-      this.frame.udpateOffset();
+      this.frame.updateOffset();
 
       // Avoid the default link behaviour in the canvas
       body.on(

src/canvas/view/FrameView.js

@@ -13,7 +13,7 @@ export default Backbone.View.extend({
   },
 
   initialize(o) {
-    bindAll(this, 'udpateOffset');
+    bindAll(this, 'updateOffset');
     this.config = o.config || {};
     this.ppfx = this.config.pStylePrefix || '';
     this.em = this.config.em;
@@ -45,19 +45,19 @@ export default Backbone.View.extend({
     const noChanges = currW == newW && currH == newH;
     style.width = newW;
     style.height = newH;
-    this.udpateOffset();
+    this.updateOffset();
     // Prevent fixed highlighting box which appears when on
     // component hover during the animation
     em.stopDefault({ preserveSelected: 1 });
-    noChanges ? this.udpateOffset() : $el.on(motionsEv, this.udpateOffset);
+    noChanges ? this.updateOffset() : $el.on(motionsEv, this.updateOffset);
   },
 
-  udpateOffset() {
+  updateOffset() {
     const em = this.em;
     const offset = em.get('Canvas').getOffset();
     em.set('canvasOffset', offset);
     em.runDefault({ preserveSelected: 1 });
-    this.$el.off(motionsEv, this.udpateOffset);
+    this.$el.off(motionsEv, this.updateOffset);
   },
 
   getDoc() {

src/styles/scss/_gjs_inputs.scss

@@ -81,6 +81,7 @@
 }
 
 .#{$app-prefix}select option,
+.#{$app-prefix}field-select option,
 .#{$clm-prefix}select option,
 .#{$sm-prefix}select option,
 .#{$app-prefix}fields option,

src/utils/Sorter.js

@@ -27,7 +27,7 @@ export default Backbone.View.extend({
       'onMove',
       'endMove',
       'rollback',
-      'udpateOffset',
+      'updateOffset',
       'moveDragHelper'
     );
     var o = opt || {};
@@ -69,8 +69,8 @@ export default Backbone.View.extend({
     this.activeTextModel = null;
 
     if (this.em && this.em.on) {
-      this.em.on('change:canvasOffset', this.udpateOffset);
-      this.udpateOffset();
+      this.em.on('change:canvasOffset', this.updateOffset);
+      this.updateOffset();
     }
   },
 
@@ -98,7 +98,7 @@ export default Backbone.View.extend({
   /**
    * Triggered when the offset of the editro is changed
    */
-  udpateOffset() {
+  updateOffset() {
     const offset = this.em.get('canvasOffset') || {};
     this.offTop = offset.top;
     this.offLeft = offset.left;