feat: in-context editable blocks (#5)

* feat: support in-context authoring for blocks

* fix: preserve rte instrumentation

* fix: decorate richtext after decorating blocks on reload

* fix: move editor-support-rte.js scripts to boilerplate

* chore: short hand for moving instrumentation

* fix: remove moved attribute

blocks/cards/cards.js

@@ -1,21 +1,24 @@
 import { createOptimizedPicture } from '../../scripts/aem.js';
+import { moveInstrumentation } from '../../scripts/scripts.js';
 
 export default function decorate(block) {
  /* change to ul, li */
  const ul = document.createElement('ul');
  [...block.children].forEach((row) => {
  const li = document.createElement('li');
- [...row.attributes].forEach(({ nodeName, nodeValue }) => {
- li.setAttribute(nodeName, nodeValue);
- });
+ moveInstrumentation(row, li);
  while (row.firstElementChild) li.append(row.firstElementChild);
  [...li.children].forEach((div) => {
  if (div.children.length === 1 && div.querySelector('picture')) div.className = 'cards-card-image';
  else div.className = 'cards-card-body';
  });
  ul.append(li);
  });
- ul.querySelectorAll('img').forEach((img) => img.closest('picture').replaceWith(createOptimizedPicture(img.src, img.alt, false, [{ width: '750' }])));
+ ul.querySelectorAll('img').forEach((img) => {
+ const optimizedPic = createOptimizedPicture(img.src, img.alt, false, [{ width: '750' }]);
+ moveInstrumentation(img, optimizedPic.querySelector('img'));
+ img.closest('picture').replaceWith(optimizedPic);
+ });
  block.textContent = '';
  block.append(ul);
 }

scripts/aem.js

@@ -634,10 +634,22 @@ function decorateBlock(block) {
  if ((!firstChild && cellText)
  || (firstChild && !firstChild.tagName.match(/^(P(RE)?|H[1-6]|(U|O)L|TABLE)$/))) {
  const paragraph = document.createElement('p');
+ [...cell.attributes]
+ // move the instrumentation from the cell to the new paragraph, also keep the class
+ // in case the content is a buttton and the cell the button-container
+ .filter(({ nodeName }) => nodeName === 'class'
+ || nodeName.startsWith('data-aue')
+ || nodeName.startsWith('data-richtext'))
+ .forEach(({ nodeName, nodeValue }) => {
+ paragraph.setAttribute(nodeName, nodeValue);
+ cell.removeAttribute(nodeName);
+ });
  paragraph.append(...cell.childNodes);
  cell.replaceChildren(paragraph);
  }
  });
+ // eslint-disable-next-line no-use-before-define
+ decorateButtons(block);
  }
 }
 

scripts/editor-support-rte.js

@@ -1,40 +1,59 @@
-// group editable texts in single wrappers if applicable
-//
-// this script should execute after script.js by editor-support.js
+/* 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
 
-// eslint-disable-next-line import/prefer-default-export
 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;
- // eslint-disable-next-line no-cond-assign
- while (element = container.querySelector('[data-richtext-resource]')) {
- const { richtextResource, richtextProp, richtextFilter } = element.dataset;
+ while (element = container.querySelector('[data-richtext-prop]:not(div)')) {
+ const {
+ richtextResource,
+ richtextProp,
+ richtextFilter,
+ richtextLabel,
+ } = element.dataset;
  deleteInstrumentation(element);
  const siblings = [];
  let sibling = element;
- // eslint-disable-next-line no-cond-assign
  while (sibling = sibling.nextElementSibling) {
  if (sibling.dataset.richtextResource === richtextResource
  && sibling.dataset.richtextProp === richtextProp) {
  deleteInstrumentation(sibling);
  siblings.push(sibling);
  } else break;
  }
- const orphanElements = document.querySelectorAll(`[data-richtext-id="${richtextResource}"][data-richtext-prop="${richtextProp}"]`);
+
+ 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(`[data-richtext-prop="${richtextProp}"]`);
+ } else {
+ console.warn(`Editable parent not found or richtext property ${richtextProp}`);
+ return;
+ }
+ }
+
  if (orphanElements.length) {
- // eslint-disable-next-line no-console
  console.warn('Found orphan elements of a richtext, that were not consecutive siblings of '
- + 'the first paragraph.', orphanElements);
- orphanElements.forEach((el) => deleteInstrumentation(el));
+ + 'the first paragraph', orphanElements);
+ orphanElements.forEach((orphanElement) => deleteInstrumentation(orphanElement));
  } else {
  const group = document.createElement('div');
- group.dataset.aueResource = richtextResource;
- group.dataset.aueProp = richtextProp;
+ if (richtextResource) group.dataset.aueResource = richtextResource;
+ if (richtextProp) group.dataset.aueProp = richtextProp;
+ if (richtextLabel) group.dataset.aueLabel = richtextLabel;
  if (richtextFilter) group.dataset.aueFilter = richtextFilter;
  group.dataset.aueBehavior = 'component';
  group.dataset.aueType = 'richtext';

scripts/editor-support.js

@@ -50,8 +50,8 @@ async function applyChanges(event) {
  block.insertAdjacentElement('afterend', newBlock);
  decorateButtons(newBlock);
  decorateIcons(newBlock);
- decorateRichtext(newBlock);
  decorateBlock(newBlock);
+ decorateRichtext(newBlock);
  await loadBlock(newBlock);
  block.remove();
  newBlock.style.display = null;

scripts/scripts.js

@@ -14,6 +14,40 @@ import {
 
 const LCP_BLOCKS = []; // add your LCP blocks to the list
 
+/**
+ * Moves all the attributes from a given elmenet to another given element.
+ * @param {Element} from the element to copy attributes from
+ * @param {Element} to the element to copy attributes to
+ */
+export function moveAttributes(from, to, attributes) {
+ if (!attributes) {
+ // eslint-disable-next-line no-param-reassign
+ attributes = [...from.attributes].map(({ nodeName }) => nodeName);
+ }
+ attributes.forEach((attr) => {
+ const value = from.getAttribute(attr);
+ if (value) {
+ to.setAttribute(attr, value);
+ from.removeAttribute(attr);
+ }
+ });
+}
+
+/**
+ * Move instrumentation attributes from a given element to another given element.
+ * @param {Element} from the element to copy attributes from
+ * @param {Element} to the element to copy attributes to
+ */
+export function moveInstrumentation(from, to) {
+ moveAttributes(
+ from,
+ to,
+ [...from.attributes]
+ .map(({ nodeName }) => nodeName)
+ .filter((attr) => attr.startsWith('data-aue-') || attr.startsWith('data-richtext-')),
+ );
+}
+
 /**
  * load fonts.css and set a session storage flag
  */