feat: handle section and main updates

scripts/editor-support.js

@@ -1,63 +1,104 @@
 import {
   decorateBlock,
+  decorateBlocks,
   decorateButtons,
   decorateIcons,
+  decorateSections,
   loadBlock,
+  loadBlocks,
 } from './aem.js';
 // eslint-disable-next-line import/no-unresolved
 import { decorateRichtext } from './editor-support-rte.js';
+import { decorateMain } from './scripts.js';
 
 const connectionPrefix = 'urn:aemconnection:';
 
-async function handleEditorUpdate(event) {
+async function applyChanges(event) {
   // redecorate default content and blocks on patches (in the properties rail)
   const { detail } = event;
 
-  const resource = detail?.request?.target?.resource;
-  if (!resource) return;
+  const resource = detail?.request?.target?.resource
+    || detail?.request?.target?.container?.resource;
+  if (!resource) return false;
   const updates = detail?.response?.updates;
-  if (!updates.length) return;
+  if (!updates.length) return false;
   const { content } = updates[0];
 
   const parsedUpdate = new DOMParser().parseFromString(content, 'text/html');
   const element = document.querySelector(`[data-aue-resource="${resource}"]`);
-  // proceed only if the updated element exists and is not a section
-  if (element && !element.matches('.section')) {
+
+  if (element) {
+    if (element.matches('main')) {
+      const newMain = parsedUpdate.querySelector(`[data-aue-resource="${resource}"]`);
+      newMain.style.display = 'none';
+      element.insertAdjacentElement('afterend', newMain);
+      decorateMain(newMain);
+      decorateRichtext(newMain);
+      await loadBlocks(newMain);
+      element.remove();
+      newMain.style.display = null;
+      // eslint-disable-next-line no-use-before-define
+      attachEventListners(newMain);
+      return true;
+    }
+
     const block = element.parentElement?.closest('.block') || element?.closest('.block');
     if (block) {
       const blockResource = block.getAttribute('data-aue-resource');
-      if (!blockResource || !blockResource.startsWith(connectionPrefix)) return;
+      if (!blockResource || !blockResource.startsWith(connectionPrefix)) return false;
       const newBlock = parsedUpdate.querySelector(`[data-aue-resource="${blockResource}"]`);
       if (newBlock) {
         newBlock.style.display = 'none';
         block.insertAdjacentElement('afterend', newBlock);
-        // decorate buttons and icons
         decorateButtons(newBlock);
         decorateIcons(newBlock);
-        // decorate and load the block
         decorateBlock(newBlock);
         await loadBlock(newBlock);
-        // remove the old block and show the new one
         block.remove();
         newBlock.style.display = null;
-        return;
+        return true;
       }
     } else {
+      // sections and default content, may be multiple in the case of richtext
       const newElements = parsedUpdate.querySelectorAll(`[data-aue-resource="${resource}"],[data-richtext-resource="${resource}"]`);
       if (newElements.length) {
         const { parentElement } = element;
-        element.replaceWith(...newElements);
-        // decorate buttons and icons
-        decorateButtons(parentElement);
-        decorateIcons(parentElement);
-        decorateRichtext(parentElement);
-        return;
+        if (element.matches('.section')) {
+          const [newSection] = newElements;
+          newSection.style.display = 'none';
+          element.insertAdjacentElement('afterend', newSection);
+          decorateButtons(newSection);
+          decorateIcons(newSection);
+          decorateRichtext(newSection);
+          decorateSections(parentElement);
+          decorateBlocks(parentElement);
+          await loadBlocks(newSection);
+          element.remove();
+          newSection.style.display = null;
+        } else {
+          element.replaceWith(...newElements);
+          decorateButtons(parentElement);
+          decorateIcons(parentElement);
+          decorateRichtext(parentElement);
+        }
+        return true;
       }
     }
   }
 
-  window.location.reload();
+  return false;
+}
+
+function attachEventListners(main) {
+  [
+    'aue:content-patch',
+    'aue:content-update',
+    'aue:content-add',
+  ].forEach((eventType) => main?.addEventListener(eventType, async (event) => {
+    event.stopPropagation();
+    const applied = await applyChanges(event);
+    if (!applied) window.location.reload();
+  }));
 }
 
-document.querySelector('main')?.addEventListener('aue:content-patch', handleEditorUpdate);
-document.querySelector('main')?.addEventListener('aue:content-update', handleEditorUpdate);
+attachEventListners(document.querySelector('main'));