diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md deleted file mode 100644 index dcf0001cf..000000000 --- a/.github/ISSUE_TEMPLATE.md +++ /dev/null @@ -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 diff --git a/.github/ISSUE_TEMPLATE/01_bug_report.md b/.github/ISSUE_TEMPLATE/01_bug_report.md new file mode 100644 index 000000000..44807a0c3 --- /dev/null +++ b/.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 \ No newline at end of file diff --git a/.github/ISSUE_TEMPLATE/02_feature_request.md b/.github/ISSUE_TEMPLATE/02_feature_request.md new file mode 100644 index 000000000..00822eb4b --- /dev/null +++ b/.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 \ No newline at end of file diff --git a/.github/config.yml b/.github/config.yml new file mode 100644 index 000000000..ec4bb386b --- /dev/null +++ b/.github/config.yml @@ -0,0 +1 @@ +blank_issues_enabled: false \ No newline at end of file diff --git a/src/dom_components/index.js b/src/dom_components/index.js index 74d7b4091..d92581bfc 100644 --- a/src/dom_components/index.js +++ b/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/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); }, /** diff --git a/src/dom_components/view/ComponentView.js b/src/dom_components/view/ComponentView.js index fc626fde5..68ba1f9f4 100644 --- a/src/dom_components/view/ComponentView.js +++ b/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() { diff --git a/src/editor/index.js b/src/editor/index.js index 6f99b55f7..edad5c85f 100644 --- a/src/editor/index.js +++ b/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|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('
New component
'); @@ -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|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; }, diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js index 03a0e22f4..980d928da 100644 --- a/src/editor/model/Editor.js +++ b/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; }, diff --git a/src/navigator/view/ItemView.js b/src/navigator/view/ItemView.js index 265777771..2d3594a56 100644 --- a/src/navigator/view/ItemView.js +++ b/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'); }, /** diff --git a/src/style_manager/model/PropertyFactory.js b/src/style_manager/model/PropertyFactory.js index a1b3a8fb7..35b433a94 100644 --- a/src/style_manager/model/PropertyFactory.js +++ b/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, diff --git a/test/specs/navigator/view/ItemView.js b/test/specs/navigator/view/ItemView.js new file mode 100644 index 000000000..fb1e8a6e4 --- /dev/null +++ b/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); + }); + }); +}); diff --git a/test/specs/style_manager/model/Models.js b/test/specs/style_manager/model/Models.js index 3ae354889..8c5058141 100644 --- a/test/specs/style_manager/model/Models.js +++ b/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',