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

New feature: expose `baseCss` (non-breaking & with tests)
8 years ago · d5f0ae94df
5 changed files with 65 additions and 36 deletions
--- 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.
--- 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 || ''}
      `;
--- 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;}',

--- 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
--- 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);