Prepare way to communicate betwen renderer and react

public/styles.css

@@ -120,5 +120,4 @@ body {
 
 .block-entry {
     border: 1px solid #ddd;
-    cursor: pointer;
 }

src/containers/App.js

@@ -20,6 +20,19 @@ class App extends React.Component {
     this.handleChangeActiveTab = this.handleChangeActiveTab.bind(this);
     this.handleChangePreviewMode = this.handleChangePreviewMode.bind(this);
     this.handlePushBlock = this.handlePushBlock.bind(this);
+    this.handleMessage = this.handleMessage.bind(this);
+  }
+
+  componentDidMount() {
+    window.addEventListener("message", this.handleMessage)
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener("message", this.handleMessage)
+  }
+
+  handleMessage(event) {
+    console.log(event.data)
   }
 
   handleChangeActiveTab(index) {

src/containers/BlocksGallery.js

@@ -9,10 +9,9 @@ class BlocksGallery extends Component {
         {Object.keys(blocks).map(blockId => {
           const block = blocks[blockId];
           if (block.category === this.props.category) {
-            return <div>
+            return <div key={blockId}>
               <img
                 src={block.preview}
-                key={blockId}
                 alt={block.title}
                 className='img-fluid block-entry' />
                 <div className='d-flex align-items-center justify-content-between mt-1 mb-3'>

src/reducers/layout.js

@@ -19,7 +19,6 @@ export default function reducer(state = initialState, action) {
           }
         }]
       }
-      break;
     default:
       return state;
   }

src/utils/renderHandlebars.js

@@ -1,11 +1,21 @@
 import handlebars from "handlebars";
 import document from "../views/document";
+import section from "../views/section";
 import blocks from "../views/blocks";
 
 function render(layoutBlocks) {
   const innerHTML = layoutBlocks.reduce((acc, layoutBlock) => {
-    const tpl = handlebars.compile(blocks[layoutBlock.blockId].component);
-    return `${acc}${tpl(layoutBlock.data)}`;
+    const blockHbs = blocks[layoutBlock.blockId].hbs;
+    const blockTemplate = handlebars.compile(blockHbs);
+    const blockHTML = blockTemplate(layoutBlock.data);
+
+    const sectionTemplate = handlebars.compile(section);
+    const sectionHTML = sectionTemplate({
+      content: blockHTML,
+      uuid: layoutBlock.uuid
+    });
+
+    return `${acc}${sectionHTML}`;
   }, ``);
 
   return handlebars.compile(document)({

src/views/blocks/a1.js

@@ -1,4 +1,4 @@
-const component = `
+const hbs = `
 <div>
   <div class="container">
     <div class="row">
@@ -37,7 +37,7 @@ const component = `
 `;
 
 const block = {
-  component,
+  hbs,
   title: 'Article #1',
   preview: 'https://i.imgur.com/6QUsWtK.png',
   category: 'article',

src/views/blocks/a2.js

@@ -1,4 +1,4 @@
-const component = `
+const hbs = `
 <div>
   <div class="container">
     <div class="row">
@@ -28,7 +28,7 @@ const component = `
 `;
 
 const block = {
-  component,
+  hbs,
   title: 'Article #2',
   preview: 'https://i.imgur.com/xljS5RC.png',
   category: 'article',

src/views/blocks/g1.js

@@ -1,4 +1,4 @@
-const component = `
+const hbs = `
 <div class="text-center">
     <div class="container">
         <div class="row">
@@ -17,7 +17,7 @@ const component = `
 `;
 
 const block = {
-  component,
+  hbs,
   title: 'Image Gallery #1',
   preview: 'https://i.imgur.com/EwoDspY.png',
   category: 'gallery',

src/views/blocks/h1.js

@@ -1,4 +1,4 @@
-const component = `
+const hbs = `
 <div class="container text-center">
   <strong>{{title}}</strong>
   <h1 class="display-4 my-3">{{tagline}}</h1>
@@ -7,7 +7,7 @@ const component = `
 `;
 
 const block = {
-  component,
+  hbs,
   title: 'Simple Header #1',
   preview: 'https://i.imgur.com/IXz7LZ5.png',
   category: 'header',

src/views/blocks/h2.js

@@ -1,4 +1,4 @@
-const component = `
+const hbs = `
 <div class="jumbotron">
   <div class="container text-center">
     <h1 class="display-4">{{title}}</h1>
@@ -10,7 +10,7 @@ const component = `
 `;
 
 const block = {
-  component,
+  hbs,
   title: 'Simple Header #2',
   preview: 'https://i.imgur.com/1bYEKB4.png',
   category: 'header',

src/views/document.js

@@ -1,4 +1,4 @@
-export default `
+const document = `
 <!doctype html>
 <html lang="en">
   <head>
@@ -11,6 +11,18 @@ export default `
   {{{content}}}
   <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
+  <script>
+document.querySelectorAll('section[visual-editor]').forEach(el => {
+  el.addEventListener('click', () => {
+    window.top.postMessage({
+      event: 'click',
+      blockId: el.getAttribute('visual-editor')
+    }, '*');
+  })
+})
+  </script>
   </body>
 </html>
 `;
+
+export default document;

src/views/section.js

@@ -0,0 +1,7 @@
+const section = `
+<section visual-editor="{{uuid}}">
+{{{content}}}
+</section>
+`;
+
+export default section;