QA to Main

package.json

@@ -4,7 +4,9 @@
   "version": "1.3.0",
   "description": "Starter project for Adobe Helix",
   "scripts": {
-    "dev": "aem up --url=https://main--acme-services-gdrive--initialyze.aem.page/",
+    "dev:da": "aem up --url=https://main--acme-services--initialyze.aem.page/",
+    "dev:gdrive": "aem up --url=https://main--acme-services-gdrive--initialyze.aem.page/",
+    "dev:ue": "aem up --url=https://main--acme-services-ue--initialyze.aem.page/",
     "lint:js": "eslint .",
     "lint:css": "stylelint \"blocks/**/*.css\" \"styles/*.css\"",
     "lint": "npm run lint:js && npm run lint:css",

scripts/editor-support-rte.js

@@ -0,0 +1,67 @@
+/* eslint-disable no-console */
+/* eslint-disable no-cond-assign */
+/* eslint-disable import/prefer-default-export */
+
+// group editable texts in single wrappers if applicable.
+// this script should execute after script.js but before the the universal editor cors script
+// and any block being loaded
+
+export function decorateRichtext(container = document) {
+  function deleteInstrumentation(element) {
+    delete element.dataset.richtextResource;
+    delete element.dataset.richtextProp;
+    delete element.dataset.richtextFilter;
+    delete element.dataset.richtextLabel;
+  }
+
+  let element;
+  while (element = container.querySelector('[data-richtext-prop]:not(div)')) {
+    const {
+      richtextResource,
+      richtextProp,
+      richtextFilter,
+      richtextLabel,
+    } = element.dataset;
+    deleteInstrumentation(element);
+    const siblings = [];
+    let sibling = element;
+    while (sibling = sibling.nextElementSibling) {
+      if (sibling.dataset.richtextResource === richtextResource
+        && sibling.dataset.richtextProp === richtextProp) {
+        deleteInstrumentation(sibling);
+        siblings.push(sibling);
+      } else break;
+    }
+
+    let orphanElements;
+    if (richtextResource && richtextProp) {
+      orphanElements = document.querySelectorAll(`[data-richtext-id="${richtextResource}"][data-richtext-prop="${richtextProp}"]`);
+    } else {
+      const editable = element.closest('[data-aue-resource]');
+      if (editable) {
+        orphanElements = editable.querySelectorAll(`:scope > :not([data-aue-resource]) [data-richtext-prop="${richtextProp}"]`);
+      } else {
+        console.warn(`Editable parent not found or richtext property ${richtextProp}`);
+        return;
+      }
+    }
+
+    if (orphanElements.length) {
+      console.warn('Found orphan elements of a richtext, that were not consecutive siblings of '
+        + 'the first paragraph', orphanElements);
+      orphanElements.forEach((orphanElement) => deleteInstrumentation(orphanElement));
+    } else {
+      const group = document.createElement('div');
+      if (richtextResource) {
+        group.dataset.aueResource = richtextResource;
+        group.dataset.aueBehavior = 'component';
+      }
+      if (richtextProp) group.dataset.aueProp = richtextProp;
+      if (richtextLabel) group.dataset.aueLabel = richtextLabel;
+      if (richtextFilter) group.dataset.aueFilter = richtextFilter;
+      group.dataset.aueType = 'richtext';
+      element.replaceWith(group);
+      group.append(element, ...siblings);
+    }
+  }
+}

scripts/editor-support.js

@@ -0,0 +1,119 @@
+import {
+  decorateBlock,
+  decorateBlocks,
+  decorateButtons,
+  decorateIcons,
+  decorateSections,
+  loadBlock,
+  loadScript,
+  loadSections,
+} from './aem.js';
+import { decorateRichtext } from './editor-support-rte.js';
+import { decorateMain } from './scripts.js';
+
+async function applyChanges(event) {
+  // redecorate default content and blocks on patches (in the properties rail)
+  const { detail } = event;
+
+  const resource = detail?.request?.target?.resource // update, patch components
+    || detail?.request?.target?.container?.resource // update, patch, add to sections
+    || detail?.request?.to?.container?.resource; // move in sections
+  if (!resource) return false;
+  const updates = detail?.response?.updates;
+  if (!updates.length) return false;
+  const { content } = updates[0];
+  if (!content) return false;
+
+  // load dompurify
+  await loadScript(`${window.hlx.codeBasePath}/scripts/dompurify.min.js`);
+
+  const sanitizedContent = window.DOMPurify.sanitize(content, { USE_PROFILES: { html: true } });
+  const parsedUpdate = new DOMParser().parseFromString(sanitizedContent, 'text/html');
+  const element = document.querySelector(`[data-aue-resource="${resource}"]`);
+
+  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 loadSections(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[data-aue-resource]') || element?.closest('.block[data-aue-resource]');
+    if (block) {
+      const blockResource = block.getAttribute('data-aue-resource');
+      const newBlock = parsedUpdate.querySelector(`[data-aue-resource="${blockResource}"]`);
+      if (newBlock) {
+        newBlock.style.display = 'none';
+        block.insertAdjacentElement('afterend', newBlock);
+        decorateButtons(newBlock);
+        decorateIcons(newBlock);
+        decorateBlock(newBlock);
+        decorateRichtext(newBlock);
+        await loadBlock(newBlock);
+        block.remove();
+        newBlock.style.display = null;
+        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;
+        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 loadSections(parentElement);
+          element.remove();
+          newSection.style.display = null;
+        } else {
+          element.replaceWith(...newElements);
+          decorateButtons(parentElement);
+          decorateIcons(parentElement);
+          decorateRichtext(parentElement);
+        }
+        return true;
+      }
+    }
+  }
+
+  return false;
+}
+
+function attachEventListners(main) {
+  [
+    'aue:content-patch',
+    'aue:content-update',
+    'aue:content-add',
+    'aue:content-move',
+    'aue:content-remove',
+    'aue:content-copy',
+  ].forEach((eventType) => main?.addEventListener(eventType, async (event) => {
+    event.stopPropagation();
+    const applied = await applyChanges(event);
+    if (!applied) window.location.reload();
+  }));
+}
+
+attachEventListners(document.querySelector('main'));
+
+// decorate rich text
+// this has to happen after decorateMain(), and everythime decorateBlocks() is called
+decorateRichtext();
+// in cases where the block decoration is not done in one synchronous iteration we need to listen
+// for new richtext-instrumented elements. this happens for example when using experimentation.
+const observer = new MutationObserver(() => decorateRichtext());
+observer.observe(document, { attributeFilter: ['data-richtext-prop'], subtree: true });