From cf431db237c5d748f91976e0ea710ab43a03014c Mon Sep 17 00:00:00 2001
From: Tom Medema <tommedema@gmail.com>
Date: Fri, 9 Mar 2018 18:44:58 +0100
Subject: [PATCH] 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;}',