LAYOUTS-629 Implement editing blocks in the preview

components.js

@@ -1,3 +1,4 @@
 export {default as Avatar} from './components/avatar/element.js';
 export {default as Badge} from './components/badge/element.js';
+export {default as Block} from './components/block/element.js';
 export {default as Dropdown} from './components/dropdown/element.js';

components/block/element.js

@@ -9,59 +9,93 @@ export default class Block extends LitElement {
   static styles = [style];
 
   static properties = {
-    blockId: {type: Number},
+    blockId: {type: String, attribute: 'data-ngl-block-id'},
   };
 
-  renderMenu() {
-    return html`
-      <nav>
-        <button @click=${this.edit}>Edit</button>
-        <button @click=${this.moveUp}>Move Up</button>
-        <button @click=${this.moveDown}>Move Down</button>
-        <button @click=${this.delete}>Delete</button>
-      </nav>
-    `;
-  }
+  constructor() {
+    super();
 
-  edit(e) {
-    console.log(e.target.innerText);
-    this.refresh();
+    this.isSaveListenerAttached = false;
   }
 
-  delete(e) {
-    console.log(e.target.innerText);
-    this.remove();
+  getBlock() {
+    return window.parent.Core.g.layout.blocks.findWhere({id: this.blockId});
   }
 
-  moveUp(e) {
-    console.log(e.target.innerText);
-    const prevElement = this.previousElementSibling;
-    isBlock(prevElement) && this.parentNode.insertBefore(this, prevElement);
+  renderMenu() {
+    const block = this.getBlock();
+    const isInLinkedZone = block.zone().is_linked();
+
+    if (isInLinkedZone) {
+      return html`
+        <div class="edit-menu">
+          <button @click=${this.refresh}>Refresh</button>
+        </div>
+      `;
+    } else {
+      const parentId = block.attributes.parent_block_id;
+      const parent = document.querySelector(
+        `ngl-block[data-ngl-block-id="${parentId}"]`
+      );
+
+      if (parent && isBlock(parent)) {
+        return html`
+          <div class="edit-menu">
+            <button @click=${parent.edit.bind(parent)}>Edit container</button>
+            <button @click=${parent.refresh.bind(parent)}>
+              Refresh container
+            </button>
+            <button @click=${this.edit}>Edit</button>
+            <button @click=${this.refresh}>Refresh</button>
+          </div>
+        `;
+      } else {
+        return html`
+          <div class="edit-menu">
+            <button @click=${this.edit}>Edit</button>
+            <button @click=${this.refresh}>Refresh</button>
+          </div>
+        `;
+      }
+    }
   }
 
-  moveDown(e) {
-    console.log(e.target.innerText);
-    const nextElement = this.nextElementSibling;
-    isBlock(nextElement) && this.parentNode.insertBefore(nextElement, this);
+  edit() {
+    const block = this.getBlock();
+    block.trigger('edit');
+
+    if (!this.isSaveListenerAttached) {
+      block.on('sidebar_save:success', () => {
+        this.refresh();
+      });
+      this.isSaveListenerAttached = true;
+    }
   }
 
   async fetch() {
     const resp = await fetch(window.location.href);
     return resp.text();
   }
 
+  get main() {
+    return this.shadowRoot.querySelector('main');
+  }
+
   async refresh() {
+    this.main.classList.add('loading');
     let html = await this.fetch();
+    this.main.classList.remove('loading');
     const template = document.createElement('template');
     template.innerHTML = html;
     const currentBlockHtml = template.content.querySelector(
-      `ngl-block[blockId="${this.blockId}"]`
+      `ngl-block[data-ngl-block-id="${this.blockId}"]`
     );
 
-    // Simulate text change
-    currentBlockHtml.querySelector('.timestamp').innerText =
-      new Date().toLocaleTimeString();
     this.innerHTML = currentBlockHtml.innerHTML;
+
+    this.dispatchEvent(
+      new Event('ngl:refresh', {bubbles: true, composed: true})
+    );
   }
 
   render() {

components/block/style.js

@@ -3,37 +3,39 @@ import {css} from 'lit';
 export default css`
   :host {
     --ngl-block-outline-color: #333;
-    --ngl-block-outline-color-active: #f66;
+    --ngl-block-outline-color-active: #990099;
 
     display: contents;
   }
 
-  ::slotted(.ngl-block) {
-    outline: 2px solid var(--ngl-block-outline-color) !important;
-    outline-offset: 4px;
-  }
-
   :hover ::slotted(.ngl-block) {
-    outline-color: var(--ngl-block-outline-color-active) !important;
+    box-shadow: inset 0px 0px 0px 2px var(--ngl-block-outline-color-active) !important;
   }
 
   main {
     position: relative;
   }
 
-  nav {
+  main.loading {
+    opacity: 0.5;
+  }
+
+  .edit-menu {
+    z-index: 80001;
     display: none;
+    visibility: hidden;
+    opacity: 0;
     position: absolute;
-    right: 0px;
-    top: 0;
     background: #fff;
     border: 1px solid #ccc;
     padding: 5px;
-    border-radius: 5px;
+    border-radius: 4px;
   }
 
-  main:hover nav {
+  main:hover .edit-menu {
     display: block;
+    opacity: 1;
+    visibility: visible;
   }
 
   button {

rollup.config.js

@@ -18,7 +18,7 @@ import replace from '@rollup/plugin-replace';
 const shouldMinify = false;
 
 export default {
-  input: 'components/block/element.js',
+  input: 'components.js',
   // preserveEntrySignatures: 'strict',
   output: {
     name: 'ngl',