Merge dev

src/canvas/config/config.js

@@ -24,5 +24,12 @@ module.exports = {
    *  return component.getName();
    * }
    */
-  customBadgeLabel: ''
+  customBadgeLabel: '',
+
+  /**
+   * When some textable component is selected and focused (eg. input or text component) the editor
+   * stops some commands (eg. disables the copy/paste of components with CTRL+C/V to allow the copy/paste of the text).
+   * This option allows to customize, by a selector, which element should not be considered textable
+   */
+  notTextable: ['button', 'input[type=checkbox]', 'input[type=radio]']
 };

src/canvas/index.js

@@ -409,11 +409,11 @@ module.exports = () => {
      * @private
      */
     isInputFocused() {
-      let contentDocument = this.getFrameEl().contentDocument;
-      return (
-        contentDocument.activeElement &&
-        contentDocument.activeElement.tagName !== 'BODY'
-      );
+      const doc = this.getDocument();
+      const toIgnore = ['body', ...this.getConfig().notTextable];
+      const focused = doc && doc.activeElement;
+
+      return focused && !toIgnore.some(item => focused.matches(item));
     },
 
     /**

src/commands/view/ComponentDelete.js

@@ -2,7 +2,7 @@ import { isArray } from 'underscore';
 
 module.exports = {
   run(ed, sender, opts = {}) {
-    if (ed.getModel().isEditing()) return;
+    if (ed.getModel().isEditing() || ed.Canvas.isInputFocused()) return;
     let components = opts.component || ed.getSelectedAll();
     components = isArray(components) ? [...components] : [components];
 

src/commands/view/ComponentEnter.js

@@ -1,6 +1,11 @@
 module.exports = {
   run(ed) {
-    if (!ed.Canvas.hasFocus() || ed.getModel().isEditing()) return;
+    if (
+      !ed.Canvas.hasFocus() ||
+      ed.getModel().isEditing() ||
+      ed.Canvas.isInputFocused()
+    )
+      return;
     const toSelect = [];
 
     ed.getSelectedAll().forEach(component => {

src/commands/view/ComponentExit.js

@@ -1,6 +1,11 @@
 module.exports = {
   run(ed) {
-    if (!ed.Canvas.hasFocus() || ed.getModel().isEditing()) return;
+    if (
+      !ed.Canvas.hasFocus() ||
+      ed.getModel().isEditing() ||
+      ed.Canvas.isInputFocused()
+    )
+      return;
     const toSelect = [];
 
     ed.getSelectedAll().forEach(component => {

src/commands/view/ComponentNext.js

@@ -1,6 +1,11 @@
 module.exports = {
   run(ed) {
-    if (!ed.Canvas.hasFocus() || ed.getModel().isEditing()) return;
+    if (
+      !ed.Canvas.hasFocus() ||
+      ed.getModel().isEditing() ||
+      ed.Canvas.isInputFocused()
+    )
+      return;
     const toSelect = [];
 
     ed.getSelectedAll().forEach(component => {

src/commands/view/ComponentPrev.js

@@ -1,6 +1,11 @@
 module.exports = {
   run(ed) {
-    if (!ed.Canvas.hasFocus() || ed.getModel().isEditing()) return;
+    if (
+      !ed.Canvas.hasFocus() ||
+      ed.getModel().isEditing() ||
+      ed.Canvas.isInputFocused()
+    )
+      return;
     const toSelect = [];
 
     ed.getSelectedAll().forEach(component => {

src/commands/view/CopyComponent.js

@@ -3,7 +3,7 @@ module.exports = {
     const em = ed.getModel();
     const models = [...ed.getSelectedAll()];
 
-    if (models.length && !em.isEditing()) {
+    if (models.length && !em.isEditing() && !ed.Canvas.isInputFocused()) {
       em.set('clipboard', models);
     }
   }

src/commands/view/PasteComponent.js

@@ -6,7 +6,7 @@ module.exports = {
     const clp = em.get('clipboard');
     const selected = ed.getSelected();
 
-    if (clp && selected && !em.isEditing()) {
+    if (clp && selected && !em.isEditing() && !ed.Canvas.isInputFocused()) {
       ed.getSelectedAll().forEach(comp => {
         if (!comp) return;
         const coll = comp.collection;

src/panels/view/PanelView.js

@@ -13,6 +13,7 @@ module.exports = Backbone.View.extend({
     this.id = this.pfx + model.get('id');
     this.listenTo(model, 'change:appendContent', this.appendContent);
     this.listenTo(model, 'change:content', this.updateContent);
+    this.listenTo(model, 'change:visible', this.toggleVisible);
     model.view = this;
   },
 
@@ -30,6 +31,14 @@ module.exports = Backbone.View.extend({
     this.$el.html(this.model.get('content'));
   },
 
+  toggleVisible() {
+    if (!this.model.get('visible')) {
+      this.$el.addClass(`${this.ppfx}hidden`);
+      return;
+    }
+    this.$el.removeClass(`${this.ppfx}hidden`);
+  },
+
   attributes() {
     return this.model.get('attributes');
   },

test/specs/panels/view/PanelView.js

@@ -39,6 +39,19 @@ module.exports = {
         expect(view.$el.html()).toEqual('test2');
       });
 
+      test('Hide panel', () => {
+        expect(view.$el.hasClass('hidden')).toBeFalsy();
+        model.set('visible', false);
+        expect(view.$el.hasClass('hidden')).toBeTruthy();
+      });
+
+      test('Show panel', () => {
+        model.set('visible', false);
+        expect(view.$el.hasClass('hidden')).toBeTruthy();
+        model.set('visible', true);
+        expect(view.$el.hasClass('hidden')).toBeFalsy();
+      });
+
       describe('Init with options', () => {
         beforeEach(() => {
           model = new Panel({