From cf431db237c5d748f91976e0ea710ab43a03014c Mon Sep 17 00:00:00 2001 From: Tom Medema Date: Fri, 9 Mar 2018 18:44:58 +0100 Subject: [PATCH 1/7] use config.baseCss in canvasView if set in config --- src/canvas/view/CanvasView.js | 34 ++-------------------------------- src/editor/config/config.js | 34 ++++++++++++++++++++++++++++++++++ 2 files changed, 36 insertions(+), 32 deletions(-) diff --git a/src/canvas/view/CanvasView.js b/src/canvas/view/CanvasView.js index 86ebd7845..89190626d 100644 --- a/src/canvas/view/CanvasView.js +++ b/src/canvas/view/CanvasView.js @@ -97,23 +97,7 @@ module.exports = Backbone.View.extend({ const colorWarn = '#ffca6f'; - let baseCss = ` - * { - box-sizing: border-box; - } - html, body, #wrapper { - min-height: 100%; - } - body { - margin: 0; - height: 100%; - background-color: #fff - } - #wrapper { - overflow: auto; - overflow-x: hidden; - } - `; + // I need all this styles to make the editor work properly // Remove `html { height: 100%;}` from the baseCss as it gives jumpings // effects (on ENTER) with RTE like CKEditor (maybe some bug there?!?) // With `body {height: auto;}` jumps in CKEditor are removed but in @@ -121,10 +105,8 @@ module.exports = Backbone.View.extend({ // `body {height: 100%;}`. // For the moment I give the priority to Firefox as it might be // CKEditor's issue - - // I need all this styles to make the editor work properly var frameCss = ` - ${baseCss} + ${em.config.baseCss || ''} .${ppfx}dashed *[data-highlightable] { outline: 1px dashed rgba(170,170,170,0.7); @@ -171,18 +153,6 @@ module.exports = Backbone.View.extend({ cursor: -webkit-grabbing; } - * ::-webkit-scrollbar-track { - background: rgba(0, 0, 0, 0.1) - } - - * ::-webkit-scrollbar-thumb { - background: rgba(255, 255, 255, 0.2) - } - - * ::-webkit-scrollbar { - width: 10px - } - ${conf.canvasCss || ''} ${protCss || ''} `; diff --git a/src/editor/config/config.js b/src/editor/config/config.js index 09bd8f2b9..bd0786b70 100644 --- a/src/editor/config/config.js +++ b/src/editor/config/config.js @@ -30,6 +30,40 @@ module.exports = { // Width for the editor container width: '100%', + // By default Grapes injects base CSS into the canvas. For example, it sets body margin to 0 + // and sets a default background color of white. This CSS is desired in most cases. + // use this property if you wish to overwrite the base CSS to your own CSS. This is most + // useful if for example your template is not based off a document with 0 as body margin. + baseCss: ` + * { + box-sizing: border-box; + } + html, body, #wrapper { + min-height: 100%; + } + body { + margin: 0; + height: 100%; + background-color: #fff + } + #wrapper { + overflow: auto; + overflow-x: hidden; + } + + * ::-webkit-scrollbar-track { + background: rgba(0, 0, 0, 0.1) + } + + * ::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.2) + } + + * ::-webkit-scrollbar { + width: 10px + } + `, + // CSS that could only be seen (for instance, inside the code viewer) protectedCss: '* { box-sizing: border-box; } body {margin: 0;}', From 6d095a0316191cdf3d67404717344b54bfa66833 Mon Sep 17 00:00:00 2001 From: Tom Medema Date: Fri, 9 Mar 2018 18:51:56 +0100 Subject: [PATCH 2/7] add baseCss overwrite documentation --- README.md | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 553a16335..6819e5b49 100644 --- a/README.md +++ b/README.md @@ -123,8 +123,15 @@ You could also grab the content directly from the element with `fromElement` pro For more practical example I suggest to look up the code inside this demo: http://grapesjs.com/demo.html - - +By default Grapes injects base CSS into the canvas. For example, it sets body margin to 0 and sets a default background color of white. This CSS is desired in most cases. However, if you wish to disable or define your own base CSS, you can do so with the `baseCss` config parameter. This is useful if for example your template is not based off a document with 0 as body margin: + +```javascript +var editor = grapesjs.init({ + container : '#gjs', + fromElement: true, + baseCss: 'html, body { background-color: #ffffff; }' +}); +``` ## Development From 61ef0fba5d0c96b6c4df1588463159022a2a5f4c Mon Sep 17 00:00:00 2001 From: Tom Medema Date: Fri, 9 Mar 2018 20:04:31 +0100 Subject: [PATCH 3/7] wip test case --- test/specs/grapesjs/index.js | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/test/specs/grapesjs/index.js b/test/specs/grapesjs/index.js index 110ef6c76..c55b4935b 100644 --- a/test/specs/grapesjs/index.js +++ b/test/specs/grapesjs/index.js @@ -69,7 +69,10 @@ describe('GrapesJS', () => { }); it('New editor is empty', () => { - var editor = obj.init(config); + var editor = obj.init({ + ...config, + baseCss: '#wrapper { background-color: #fff; }' + }); var html = editor.getHtml(); //var css = editor.getCss(); var protCss = editor.getConfig().protectedCss; @@ -79,6 +82,21 @@ describe('GrapesJS', () => { expect(editor.getStyle().length).toEqual(0); }); + // FIXME: remove .only + it.only('Editor canvas baseCSS can be overwritten', done => { + config.components = htmlString; + config.baseCss = '#wrapper { background-color: #fff; }'; + var editor = obj.init(config); + + const frame = editor.Canvas.getFrameEl(); + console.log(frame); + frame.onload = () => { + // FIXME: this never fires + console.log(frame.contentDocument.outerHTML); + done(); + }; + }); + it('Init editor with html', () => { config.components = htmlString; var editor = obj.init(config); From 0e47b6fe5df82dd01a7def2416860ed7d3ec2f0f Mon Sep 17 00:00:00 2001 From: Tom Medema Date: Fri, 9 Mar 2018 20:06:32 +0100 Subject: [PATCH 4/7] revert previous test change --- test/specs/grapesjs/index.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/test/specs/grapesjs/index.js b/test/specs/grapesjs/index.js index c55b4935b..8753d1dbf 100644 --- a/test/specs/grapesjs/index.js +++ b/test/specs/grapesjs/index.js @@ -69,10 +69,7 @@ describe('GrapesJS', () => { }); it('New editor is empty', () => { - var editor = obj.init({ - ...config, - baseCss: '#wrapper { background-color: #fff; }' - }); + var editor = obj.init(config); var html = editor.getHtml(); //var css = editor.getCss(); var protCss = editor.getConfig().protectedCss; From aba4b2362a3d55dff0575c16e5637b846455fc46 Mon Sep 17 00:00:00 2001 From: Tom Medema Date: Wed, 14 Mar 2018 15:30:33 +0100 Subject: [PATCH 5/7] enabled iframes in jsdoc and added positive and negative tests for baseCss overwriting feature --- test/helper.js | 6 +++++- test/specs/grapesjs/index.js | 31 +++++++++++++++++++++---------- 2 files changed, 26 insertions(+), 11 deletions(-) diff --git a/test/helper.js b/test/helper.js index 1a7db08bc..f2952fe0e 100644 --- a/test/helper.js +++ b/test/helper.js @@ -3,7 +3,10 @@ import expect from 'expect'; import sinon from 'sinon'; import { JSDOM } from 'jsdom'; -const dom = new JSDOM(''); +const dom = new JSDOM('', { + resources: 'usable', + pretendToBeVisual: true +}); const window = dom.window; // Fix for the require of jquery @@ -28,6 +31,7 @@ var localStorage = { } }; +global.dom = dom; global.window = window; global.document = window.document; global.FormData = window.FormData; diff --git a/test/specs/grapesjs/index.js b/test/specs/grapesjs/index.js index 8753d1dbf..d5c9fd8fd 100644 --- a/test/specs/grapesjs/index.js +++ b/test/specs/grapesjs/index.js @@ -79,19 +79,30 @@ describe('GrapesJS', () => { expect(editor.getStyle().length).toEqual(0); }); - // FIXME: remove .only - it.only('Editor canvas baseCSS can be overwritten', done => { + it('Editor canvas baseCSS can be overwritten', () => { config.components = htmlString; - config.baseCss = '#wrapper { background-color: #fff; }'; + config.baseCss = '#wrapper { background-color: #eee; }'; + config.protectedCss = ''; + var editor = obj.init(config); - const frame = editor.Canvas.getFrameEl(); - console.log(frame); - frame.onload = () => { - // FIXME: this never fires - console.log(frame.contentDocument.outerHTML); - done(); - }; + expect(window.frames[0].document.documentElement.outerHTML).toInclude( + config.baseCss + ); + expect(window.frames[0].document.documentElement.outerHTML) + .toNotInclude(`body { + margin: 0;`); + }); + + it('Editor canvas baseCSS defaults to sensible values if not defined', () => { + config.components = htmlString; + config.protectedCss = ''; + + var editor = obj.init(config); + + expect(window.frames[0].document.documentElement.outerHTML) + .toInclude(`body { + margin: 0;`); }); it('Init editor with html', () => { From 3646d9fc4d4c41f0502ae49d1194ddb667883d73 Mon Sep 17 00:00:00 2001 From: Tom Medema Date: Wed, 14 Mar 2018 15:32:35 +0100 Subject: [PATCH 6/7] removed redudandant options and global --- test/helper.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/test/helper.js b/test/helper.js index f2952fe0e..6231ba6e1 100644 --- a/test/helper.js +++ b/test/helper.js @@ -4,8 +4,7 @@ import sinon from 'sinon'; import { JSDOM } from 'jsdom'; const dom = new JSDOM('', { - resources: 'usable', - pretendToBeVisual: true + resources: 'usable' }); const window = dom.window; @@ -31,7 +30,6 @@ var localStorage = { } }; -global.dom = dom; global.window = window; global.document = window.document; global.FormData = window.FormData; From 20c0177d308957f56ea6d75e23a59d216137e4c2 Mon Sep 17 00:00:00 2001 From: Tom Medema Date: Fri, 23 Mar 2018 14:07:21 +0100 Subject: [PATCH 7/7] keep readme clean --- README.md | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/README.md b/README.md index 6819e5b49..2127444be 100644 --- a/README.md +++ b/README.md @@ -123,16 +123,6 @@ You could also grab the content directly from the element with `fromElement` pro For more practical example I suggest to look up the code inside this demo: http://grapesjs.com/demo.html -By default Grapes injects base CSS into the canvas. For example, it sets body margin to 0 and sets a default background color of white. This CSS is desired in most cases. However, if you wish to disable or define your own base CSS, you can do so with the `baseCss` config parameter. This is useful if for example your template is not based off a document with 0 as body margin: - -```javascript -var editor = grapesjs.init({ - container : '#gjs', - fromElement: true, - baseCss: 'html, body { background-color: #ffffff; }' -}); -``` - ## Development