From c34ef8f2657ab26b2974ef9ec59cfa1d3185d82d Mon Sep 17 00:00:00 2001
From: Jerry Tapolcsanyi <jtapolcsanyi@jtapolcsanyi-mbp.local>
Date: Sat, 27 Jan 2018 09:31:39 -0500
Subject: [PATCH] Moved styles from index to blocks.

---
 src/blocks.js | 52 +++++++++++++++++++++++++++++++++++++++++++++++----
 src/index.js  | 35 ----------------------------------
 2 files changed, 48 insertions(+), 39 deletions(-)

diff --git a/src/blocks.js b/src/blocks.js
index 69611b7..21ea5c8 100644
--- a/src/blocks.js
+++ b/src/blocks.js
@@ -3,6 +3,32 @@ export default function (editor, opt = {}) {
   let bm = editor.BlockManager;
   let blocks = c.blocks;
   let stylePrefix = c.stylePrefix;
+  const styleRow = `
+  .${stylePrefix}row {
+    display: table;
+    padding: 10px;
+    width: 100%;
+  }
+  @media (max-width: 768px) {
+    .${stylePrefix}cell, .${stylePrefix}cell30, .${stylePrefix}cell70 {
+      width: 100%;
+      display: block;
+    }
+  }`;
+  const styleClm = `
+  .${stylePrefix}cell {
+    width: 8%;
+    display: table-cell;
+    height: 75px;
+  }`;
+  const styleClm30 = `
+  .${stylePrefix}cell30 {
+    width: 30%;
+  }`;
+  const styleClm70 = `
+  .${stylePrefix}cell70 {
+    width: 70%;
+  }`;
 
   if (blocks.indexOf('column1') >= 0) {
     bm.add('column1', {
@@ -11,7 +37,11 @@ export default function (editor, opt = {}) {
       attributes: {class:'gjs-fonts gjs-f-b1'},
       content: `<div class="${stylePrefix}row" data-gjs-droppable=".${stylePrefix}cell" data-gjs-custom-name="Row">
           <div class="${stylePrefix}cell" data-gjs-draggable=".${stylePrefix}row" data-gjs-custom-name="Cell"></div>
-        </div>`
+        </div>
+        <style>
+          ${styleRow}
+          ${styleClm}
+        </style>`
     });
   }
 
@@ -23,7 +53,11 @@ export default function (editor, opt = {}) {
       content: `<div class="${stylePrefix}row" data-gjs-droppable=".${stylePrefix}cell" data-gjs-custom-name="Row">
           <div class="${stylePrefix}cell" data-gjs-draggable=".${stylePrefix}row" data-gjs-custom-name="Cell"></div>
           <div class="${stylePrefix}cell" data-gjs-draggable=".${stylePrefix}row" data-gjs-custom-name="Cell"></div>
-        </div>`
+        </div>
+        <style>
+          ${styleRow}
+          ${styleClm}
+        </style>`
     });
   }
 
@@ -36,7 +70,11 @@ export default function (editor, opt = {}) {
           <div class="${stylePrefix}cell" data-gjs-draggable=".${stylePrefix}row" data-gjs-custom-name="Cell"></div>
           <div class="${stylePrefix}cell" data-gjs-draggable=".${stylePrefix}row" data-gjs-custom-name="Cell"></div>
           <div class="${stylePrefix}cell" data-gjs-draggable=".${stylePrefix}row" data-gjs-custom-name="Cell"></div>
-        </div>`
+        </div>
+        <style>
+          ${styleRow}
+          ${styleClm}
+        </style>`
     });
   }
 
@@ -48,7 +86,13 @@ export default function (editor, opt = {}) {
       content: `<div class="${stylePrefix}row" data-gjs-droppable=".${stylePrefix}cell" data-gjs-custom-name="Row">
           <div class="${stylePrefix}cell ${stylePrefix}cell30" data-gjs-draggable=".${stylePrefix}row" data-gjs-custom-name="Cell"></div>
           <div class="${stylePrefix}cell ${stylePrefix}cell70" data-gjs-draggable=".${stylePrefix}row" data-gjs-custom-name="Cell"></div>
-        </div>`,
+        </div>
+        <style>
+          ${styleRow}
+          ${styleClm}
+          ${styleClm30}
+          ${styleClm70}
+        </style>`,
     });
   }
 
diff --git a/src/index.js b/src/index.js
index e20bd77..2968171 100644
--- a/src/index.js
+++ b/src/index.js
@@ -23,41 +23,6 @@ export default grapesjs.plugins.add('gjs-blocks-basic', (editor, opts) => {
       c[name] = defaults[name];
   }
 
-  const stylePrefix = c.stylePrefix;
-
-  if (c.addBasicStyle) {
-    editor.addComponents(`
-      <style>
-        .${stylePrefix}row {
-          display: table;
-          padding: 10px;
-          width: 100%;
-        }
-
-        .${stylePrefix}cell {
-          width: 8%;
-          display: table-cell;
-          height: 75px;
-        }
-
-        .${stylePrefix}cell30 {
-          width: 30%;
-        }
-
-        .${stylePrefix}cell70 {
-          width: 70%;
-        }
-
-        @media (max-width: 768px) {
-          .${stylePrefix}cell, .${stylePrefix}cell30, .${stylePrefix}cell70 {
-            width: 100%;
-            display: block;
-          }
-        }
-      </style>
-      `);
-  }
-
   // Add blocks
   let loadBlocks = require('./blocks');
   loadBlocks.default(editor, c);