Merge pull request GrapesJS#942 from tommedema/wip-pr-expose-base-css

New feature: expose `baseCss` (non-breaking & with tests)
momu-2016 · Mar 24, 2018 · d5f0ae9 · d5f0ae9
2 parents 7af53cd + 20c0177
commit d5f0ae9
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 36 deletions.
diff --git a/README.md b/README.md
@@ -124,9 +124,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
 
 
-
-
-
 ## Development
 
 GrapesJS uses [Webpack](https://github.com/webpack/webpack) as a module bundler and [Babel](https://github.com/babel/babel) as a compiler.

diff --git a/src/canvas/view/CanvasView.js b/src/canvas/view/CanvasView.js
@@ -97,34 +97,16 @@ 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
       // Firefox is impossible to drag stuff in empty canvas, so bring back
       // `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
@@ -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;}',
 

diff --git a/test/helper.js b/test/helper.js
@@ -3,7 +3,9 @@ import expect from 'expect';
 import sinon from 'sinon';
 import { JSDOM } from 'jsdom';
 
-const dom = new JSDOM('<!doctype html><html><body></body></html>');
+const dom = new JSDOM('<!doctype html><html><body></body></html>', {
+  resources: 'usable'
+});
 const window = dom.window;
 
 // Fix for the require of jquery

diff --git a/test/specs/grapesjs/index.js b/test/specs/grapesjs/index.js
@@ -79,6 +79,32 @@ describe('GrapesJS', () => {
       expect(editor.getStyle().length).toEqual(0);
     });
 
+    it('Editor canvas baseCSS can be overwritten', () => {
+      config.components = htmlString;
+      config.baseCss = '#wrapper { background-color: #eee; }';
+      config.protectedCss = '';
+
+      var editor = obj.init(config);
+
+      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', () => {
       config.components = htmlString;
       var editor = obj.init(config);
Original file line number	Diff line number	Diff line change
Expand Up		@@ -124,9 +124,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





		## Development

		GrapesJS uses [Webpack](https://github.com/webpack/webpack) as a module bundler and [Babel](https://github.com/babel/babel) as a compiler.
Expand Down