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

.github/ISSUE_TEMPLATE.md

@@ -1,26 +0,0 @@
-## WARNING
-READ and FOLLOW next 5 steps, then REMOVE them before posting the issue
-
-1. Follow CONTRIBUTING Guidelines https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md
-2. Use the GitHub Issues EXCLUSIVELY for BUGS, FEATURE REQUESTS or QUESTIONS. Prefix the title of the issue with its context, eg. `[Bug]: ....`
-3. Do a quick SEARCH first, to see if someone else didn't open the same issue
-4. DON'T ASK to create examples/code for you, read DOCS and APIs first, then you can post what you have tried (we'd like to see your code) and what you're unable to achieve
-5. All relative statements/questions have to be filled/answered, otherwise, the issue might be CLOSED
-
-## You're submitting a BUG
-  1. Are you using the latest release (older versions are NOT supported)?
-      1. If you're not sure, type `grapesjs.version` in console and press ENTER
-  1. Are you facing the bug with your local copy of GrapesJS or with the current demo?
-  1. If a local copy
-      1. Indicate all informations about your OS, browser and GrapesJS version.
-      1. Are you able to reproduce the bug from the demo?
-  1. What is the expected behavior?
-  1. What happens instead?
-  1. If you're able to reproduce the bug indicate all the necessary steps
-  1. Attach screenshots (using KAP/LICEcap), screencasts or live demo
-     1. JSFiddle Starter template https://jsfiddle.net/szLp8h4n
-     1. CodeSandbox Starter template https://codesandbox.io/s/1r0w2pk1vl
-
-## You're submitting a FEATURE REQUEST
-  1. Be sure to work on the latest version, as the feature might be already there
-  1. Keep in mind that the feature should be considered valid to use for everyone, not only for your case

.github/ISSUE_TEMPLATE/01_bug_report.md

@@ -0,0 +1,36 @@
+---
+name: 🐜 Bug report
+about: If something is not working as excepted
+title: 'BUG: '
+---
+
+## WARNING
+READ and FOLLOW next 3 steps, then REMOVE them before posting the issue
+
+1. Follow CONTRIBUTING Guidelines https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md
+2. Do a quick SEARCH first, to see if someone else didn't open the same issue
+3. All relative statements/questions have to be filled/answered, otherwise, the issue might be CLOSED
+4. JSFiddle Starter template https://jsfiddle.net/szLp8h4n
+5. CodeSandbox Starter template https://codesandbox.io/s/1r0w2pk1vl
+
+**Version:**
+
+*You can get the version by typing `grapesjs.version` into the console*
+
+**Are you able to reproduce the bug from the demo?**
+
+[ ] Yes
+[ ] No
+
+**What is the expected behavior?**
+
+*Describe the bug **detailed***
+
+**What is the current behavior?**
+
+*Descripe the bug **detailed***
+
+**Are you able to attach screenshots, screencasts or a live demo?**
+
+[ ] Yes (attach)
+[ ] No

.github/ISSUE_TEMPLATE/02_feature_request.md

@@ -0,0 +1,28 @@
+---
+name: 🚀 Feature request
+about: If you have a feature request
+title: 'FEAT: '
+---
+
+## WARNING
+READ and FOLLOW next 3 steps, then REMOVE them before posting the issue
+
+1. Follow CONTRIBUTING Guidelines https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md
+2. Do a quick SEARCH first, to see if someone else didn't open the same issue
+3. All relative statements/questions have to be filled/answered, otherwise, the issue might be CLOSED
+4. JSFiddle Starter template https://jsfiddle.net/szLp8h4n
+5. CodeSandbox Starter template https://codesandbox.io/s/1r0w2pk1vl
+
+**What are you trying to add to GrapesJS?**
+
+*Describe your feature request **detailed***
+
+**Is there an alternative at the latest version?**
+
+[ ] Yes (descripe the alternative)
+[ ] No
+
+**Is this related to an issue?**
+
+[ ] Yes (Give a link to the issue)
+[ ] No

.github/config.yml

@@ -0,0 +1 @@
+blank_issues_enabled: false

src/dom_components/index.js

@@ -509,6 +509,7 @@ export default () => {
      * @param {string} [component.content=''] String inside component
      * @param {Object} [component.style={}] Style object
      * @param {Object} [component.attributes={}] Attribute object
+     * @param {Object} opt the options object to be used by the [Components.add]{@link getComponents} method
      * @return {Component|Array<Component>} Component/s added
      * @example
      * // Example of a new component with some extra property
@@ -522,8 +523,8 @@ export default () => {
      *   attributes: { title: 'here' }
      * });
      */
-    addComponent(component) {
-      return this.getComponents().add(component);
+    addComponent(component, opt = {}) {
+      return this.getComponents().add(component, opt);
     },
 
     /**
@@ -551,11 +552,12 @@ export default () => {
     /**
      * Set components
      * @param {Object|string} components HTML string or components model
+     * @param {Object} opt the options object to be used by the {@link addComponent} method
      * @return {this}
      * @private
      */
-    setComponents(components) {
-      this.clear().addComponent(components);
+    setComponents(components, opt = {}) {
+      this.clear().addComponent(components, opt);
     },
 
     /**

src/dom_components/view/ComponentView.js

@@ -4,7 +4,7 @@ import Components from '../model/Components';
 import ComponentsView from './ComponentsView';
 import Selectors from 'selector_manager/model/Selectors';
 import { replaceWith } from 'utils/dom';
-import { setViewEl, getElRect } from 'utils/mixins';
+import { setViewEl } from 'utils/mixins';
 
 export default Backbone.View.extend({
   className() {

src/editor/index.js

@@ -247,6 +247,7 @@ export default (config = {}) => {
     /**
      * Set components inside editor's canvas. This method overrides actual components
      * @param {Array<Object>|Object|string} components HTML string or components model
+     * @param {Object} opt the options object to be used by the [setComponents]{@link em#setComponents} method
      * @return {this}
      * @example
      * editor.setComponents('<div class="cls">New component</div>');
@@ -257,8 +258,8 @@ export default (config = {}) => {
      *   content: 'New component'
      * });
      */
-    setComponents(components) {
-      em.setComponents(components);
+    setComponents(components, opt = {}) {
+      em.setComponents(components, opt);
       return this;
     },
 
@@ -294,6 +295,7 @@ export default (config = {}) => {
     /**
      * Set style inside editor's canvas. This method overrides actual style
      * @param {Array<Object>|Object|string} style CSS string or style model
+     * @param {Object} opt the options object to be used by the [setStyle]{@link em#setStyle} method
      * @return {this}
      * @example
      * editor.setStyle('.cls{color: red}');
@@ -303,8 +305,8 @@ export default (config = {}) => {
      *   style: { color: 'red' }
      * });
      */
-    setStyle(style) {
-      em.setStyle(style);
+    setStyle(style, opt = {}) {
+      em.setStyle(style, opt);
       return this;
     },
 

src/editor/model/Editor.js

@@ -382,11 +382,12 @@ export default Backbone.Model.extend({
   /**
    * Set components inside editor's canvas. This method overrides actual components
    * @param {Object|string} components HTML string or components model
+   * @param {Object} opt the options object to be used by the [setComponents]{@link setComponents} method
    * @return {this}
    * @private
    */
-  setComponents(components) {
-    return this.get('DomComponents').setComponents(components);
+  setComponents(components, opt = {}) {
+    return this.get('DomComponents').setComponents(components, opt);
   },
 
   /**
@@ -407,13 +408,14 @@ export default Backbone.Model.extend({
   /**
    * Set style inside editor's canvas. This method overrides actual style
    * @param {Object|string} style CSS string or style model
+   * @param {Object} opt the options object to be used by the [CssRules.add]{@link rules#add} method
    * @return {this}
    * @private
    */
-  setStyle(style) {
+  setStyle(style, opt = {}) {
     var rules = this.get('CssComposer').getAll();
     for (var i = 0, len = rules.length; i < len; i++) rules.pop();
-    rules.add(style);
+    rules.add(style, opt);
     return this;
   },
 

src/navigator/view/ItemView.js

@@ -108,7 +108,7 @@ export default Backbone.View.extend({
     const model = this.model;
     const hClass = `${pfx}layer-hidden`;
     const hideIcon = 'fa-eye-slash';
-    const hidden = model.getStyle().display == 'none';
+    const hidden = model.getStyle().display === 'none';
     const method = hidden ? 'addClass' : 'removeClass';
     this.$el[method](hClass);
     this.getVisibilityEl()[method](hideIcon);
@@ -297,13 +297,12 @@ export default Backbone.View.extend({
   /**
    * Check if component is visible
    *
-   * @return bool
+   * @return boolean
    * */
   isVisible() {
-    var css = this.model.get('style'),
-      pr = css.display;
-    if (pr && pr == 'none') return;
-    return 1;
+    const { display } = this.model.getStyle();
+
+    return !(display && display === 'none');
   },
 
   /**

src/style_manager/model/PropertyFactory.js

@@ -548,7 +548,7 @@ export default () => ({
             'Comic Sans MS, cursive' + ss,
             'Courier New, Courier, monospace',
             'Georgia, serif',
-            'Helvetica, serif',
+            'Helvetica' + ss,
             'Impact, Charcoal' + ss,
             'Lucida Sans Unicode, Lucida Grande' + ss,
             'Tahoma, Geneva' + ss,

test/specs/navigator/view/ItemView.js

@@ -0,0 +1,36 @@
+import ItemView from '../../../../src/navigator/view/ItemView';
+
+describe('ItemView', () => {
+  let itemView, fakeModel, fakeModelStyle;
+
+  beforeEach(() => {
+    fakeModelStyle = {};
+
+    fakeModel = {
+      get: jest.fn(),
+      set: jest.fn(),
+      getStyle: jest.fn(() => fakeModelStyle)
+    };
+
+    itemView = new ItemView({
+      model: fakeModel,
+      config: {
+        em: {
+          get: jest.fn(() => ({ stylePrefix: '' }))
+        }
+      }
+    });
+  });
+
+  describe('.isVisible', () => {
+    it("should return `false` if the model's `style` object has a `display` property set to `none`, `true` otherwise", () => {
+      expect(itemView.isVisible()).toEqual(true);
+      fakeModelStyle.display = '';
+      expect(itemView.isVisible()).toEqual(true);
+      fakeModelStyle.display = 'none';
+      expect(itemView.isVisible()).toEqual(false);
+      fakeModelStyle.display = 'block';
+      expect(itemView.isVisible()).toEqual(true);
+    });
+  });
+});

test/specs/style_manager/model/Models.js

@@ -664,7 +664,7 @@ describe('PropertyFactory', () => {
         { name: 'Comic Sans MS', value: 'Comic Sans MS, cursive' + ss },
         { name: 'Courier New', value: 'Courier New, Courier' + ms },
         { name: 'Georgia', value: 'Georgia, serif' },
-        { name: 'Helvetica', value: 'Helvetica, serif' },
+        { name: 'Helvetica', value: 'Helvetica' + ss },
         { name: 'Impact', value: 'Impact, Charcoal' + ss },
         {
           name: 'Lucida Sans Unicode',