From 2c8b06728e49a1f69420627e2563af332269d6ca Mon Sep 17 00:00:00 2001 From: Tom Medema Date: Wed, 11 Apr 2018 17:46:59 -0700 Subject: [PATCH 1/4] added test cases for multiple font faces --- test/specs/grapesjs/index.js | 20 ++++++++++++ test/specs/parser/model/ParserCss.js | 33 ++++++++++++++++++++ test/specs/parser/model/ParserHtml.js | 44 +++++++++++++++++++++++++++ 3 files changed, 97 insertions(+) diff --git a/test/specs/grapesjs/index.js b/test/specs/grapesjs/index.js index db4723538..0169123bb 100644 --- a/test/specs/grapesjs/index.js +++ b/test/specs/grapesjs/index.js @@ -157,6 +157,26 @@ describe('GrapesJS', () => { expect(editor.getStyle().length).toEqual(2); }); + it('Init editor from element with multiple font-face at-rules', () => { + config.fromElement = 1; + config.storageManager = { type: 0 }; + fixture.innerHTML = + ` + ` + htmlString; + const editor = obj.init(config); + const css = editor.getCss(); + const styles = editor.getStyle(); + expect(styles.length).toEqual(2); + }); + it('Set components as HTML', () => { var editor = obj.init(config); editor.setComponents(htmlString); diff --git a/test/specs/parser/model/ParserCss.js b/test/specs/parser/model/ParserCss.js index dc5c8bae8..99bdef6f3 100644 --- a/test/specs/parser/model/ParserCss.js +++ b/test/specs/parser/model/ParserCss.js @@ -277,6 +277,39 @@ module.exports = { expect(obj.parse(str)).toEqual(result); }); + it('Parses multiple font-face at-rules', () => { + const str = ` + @font-face { + font-family: "Open Sans"; + } + @font-face { + font-family: 'Glyphicons Halflings'; + src:url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot) + }`; + const result = [ + { + selectors: [], + selectorsAdd: '', + style: { 'font-family': '"Open Sans"' }, + singleAtRule: 1, + atRuleType: 'font-face' + }, + { + selectors: [], + selectorsAdd: '', + style: { + 'font-family': "'Glyphicons Halflings'", + src: + 'url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot)' + }, + singleAtRule: 1, + atRuleType: 'font-face' + } + ]; + const parsed = obj.parse(str); + expect(parsed).toEqual(result); + }); + it('Parse ID rule', () => { var str = `#test { color: red }`; var result = { diff --git a/test/specs/parser/model/ParserHtml.js b/test/specs/parser/model/ParserHtml.js index f7e5ba1a9..11e01bb91 100644 --- a/test/specs/parser/model/ParserHtml.js +++ b/test/specs/parser/model/ParserHtml.js @@ -372,6 +372,50 @@ module.exports = { expect(res.css).toEqual(resCss); }); + it.only('Respect multiple font-faces contained in styles in html', () => { + const str = ` + +
a div
+ `; + + const expected = [ + { + selectors: [], + selectorsAdd: '', + style: { + 'font-family': '"Open Sans"', + src: + 'url(https://fonts.gstatic.com/s/droidsans/v8/SlGVmQWMvZQIdix7AFxXkHNSbRYXags.woff2)' + }, + singleAtRule: 1, + atRuleType: 'font-face' + }, + { + selectors: [], + selectorsAdd: '', + style: { + 'font-family': "'Glyphicons Halflings'", + src: + 'url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot)' + }, + singleAtRule: 1, + atRuleType: 'font-face' + } + ]; + + const res = obj.parse(str, new ParserCss()); + expect(res.css).toEqual(expected); + }); + it('Parse nested div with text and spaces', () => { var str = '

TestText

'; var result = { From d5b1c51e3a7768c5540600550a8e42e6c5623f7f Mon Sep 17 00:00:00 2001 From: Duarte Henriques Date: Thu, 12 Apr 2018 15:59:22 +0100 Subject: [PATCH 2/4] Ignore yarn files so contributors can use it --- .gitignore | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.gitignore b/.gitignore index f21e704de..8d6f7c26c 100644 --- a/.gitignore +++ b/.gitignore @@ -4,6 +4,8 @@ .project .idea npm-debug.log* +yarn-error.log +yarn.lock style/.sass-cache/ img/ From 767e0673ac9442017b0feb41d833fd5b395a9e29 Mon Sep 17 00:00:00 2001 From: Duarte Henriques Date: Thu, 12 Apr 2018 16:01:15 +0100 Subject: [PATCH 3/4] Support percentage based media-widths --- src/css_composer/view/CssRulesView.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/css_composer/view/CssRulesView.js b/src/css_composer/view/CssRulesView.js index 42297d6d1..892265a4f 100644 --- a/src/css_composer/view/CssRulesView.js +++ b/src/css_composer/view/CssRulesView.js @@ -2,6 +2,10 @@ const CssRuleView = require('./CssRuleView'); const CssGroupRuleView = require('./CssGroupRuleView'); const $ = Backbone.$; +// % is not a valid character for classes +const getBlockId = (pfx, widthMedia) => + `${pfx}rules-${widthMedia.replace('%', 'pc')}`; + module.exports = require('backbone').View.extend({ initialize(o) { const config = o.config || {}; @@ -63,13 +67,13 @@ module.exports = require('backbone').View.extend({ } const mediaWidth = this.getMediaWidth(model.get('mediaText')); - const styleBlockId = `#${this.pfx}rules-${mediaWidth}`; + const styleBlockId = getBlockId(this.pfx, mediaWidth); if (rendered) { if (fragment) { - fragment.querySelector(styleBlockId).appendChild(rendered); + fragment.querySelector(`#${styleBlockId}`).appendChild(rendered); } else { - let $stylesContainer = this.$el.find(styleBlockId); + let $stylesContainer = this.$el.find(`#${styleBlockId}`); $stylesContainer.append(rendered); } } @@ -104,8 +108,7 @@ module.exports = require('backbone').View.extend({ ((left && left.replace('px', '')) || Number.MAX_VALUE) ) .forEach(widthMedia => { - const blockId = pfx + 'rules-' + widthMedia; - $(`
`).appendTo(frag); + $(`
`).appendTo(frag); }); this.collection.each(model => this.addToCollection(model, frag)); From e728eb8c6ed1b08f43f822aced31260c9545bc25 Mon Sep 17 00:00:00 2001 From: Tom Medema Date: Thu, 12 Apr 2018 10:02:06 -0700 Subject: [PATCH 4/4] allow for multiple at-rules --- src/css_composer/index.js | 9 +++++++-- test/specs/grapesjs/index.js | 1 + test/specs/parser/model/ParserHtml.js | 2 +- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/css_composer/index.js b/src/css_composer/index.js index 1a5dd374d..3443780cb 100644 --- a/src/css_composer/index.js +++ b/src/css_composer/index.js @@ -182,8 +182,13 @@ module.exports = () => { var w = width || ''; var opt = { ...opts }; var rule = this.get(selectors, s, w, opt); - if (rule) return rule; - else { + + // do not create rules that were found before + // unless this is an at-rule, for which multiple declarations + // make sense (e.g. multiple `@font-type`s) + if (rule && rule.config && !rule.config.atRuleType) { + return rule; + } else { opt.state = s; opt.mediaText = w; opt.selectors = ''; diff --git a/test/specs/grapesjs/index.js b/test/specs/grapesjs/index.js index 0169123bb..c4ad136d1 100644 --- a/test/specs/grapesjs/index.js +++ b/test/specs/grapesjs/index.js @@ -166,6 +166,7 @@ describe('GrapesJS', () => { @font-face { font-family: 'Glyphicons Halflings'; src: url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2) format('woff2'); + } @font-face { font-family: 'Droid Sans'; src: url(https://fonts.gstatic.com/s/droidsans/v8/SlGVmQWMvZQIdix7AFxXkHNSbRYXags.woff2) format('woff2'); diff --git a/test/specs/parser/model/ParserHtml.js b/test/specs/parser/model/ParserHtml.js index 11e01bb91..683c1afa1 100644 --- a/test/specs/parser/model/ParserHtml.js +++ b/test/specs/parser/model/ParserHtml.js @@ -372,7 +372,7 @@ module.exports = { expect(res.css).toEqual(resCss); }); - it.only('Respect multiple font-faces contained in styles in html', () => { + it('Respect multiple font-faces contained in styles in html', () => { const str = `