#3491021 Use comment annotations

Issues

1. Regions are not wrapped using HTML comments, but still wrapped in div. Will create a new D.o. issue to address this.
2. Block components (e.g. powered by drupal) are not wrapped at all - no div OR HTML comment. fixed by @bnjmnm
3. I spotted that the Image component does not have data-component-id like other components do. Not sure it’s an issue?

Changes

Just a brief explainer of the changes in this MR. The headline is that now each XB Component is not wrapped in a div but just rendered exactly as-is into the page. Instead there are HTML comments before and after each component and inside each slot and this MR leverages those comments to build a 'map' allowing the React app to find a given HTML element in the preview iFrame from a given Component UUID or Slot ID.

Viewport.tsx

1. wrap each viewport with a new React Context Provider that passes through the ‘map’ of component and slot ids to their respective HTML DOM elements in the iFrame document.


ComponentOverlay.tsx

1. moveElement replaced with moveDomElement - so that a component made up of multiple elements can still be moved (although this move is just the ‘optimistic’ DOM update that happens instantly on DnD)
2. uses the new slotsMap and componentsMap to look up DOM elements inside the iFrame replacing need to do e.g. iframeDocument.querySelector('[data-xb-uuid="${component.uuid}"]
3. sortable initialisation has been changed to find sortable items by data-xb-uuid instead of the class xb--sortable-item which no longer exists.

SlotOverlay.tsx

1. Same as ComponentOverlay.tsx, this uses the new slotsMap and componentsMap to look up DOM elements inside the iFrame replacing need to do e.g. iframeDocument.querySelector('[data-xb-uuid="${component.uuid}"]

useSyncPreviewElementSize

1. based on the existing useSyncElementSize but takes an array of elements and returns the rect (top, left, width, height) of all the elements as if a box had been drawn to contain them all.
2. Only implements a resize observer, not a mutationObserver.

function-utils.ts

1. multiple new functions for traversing components and slots via the HTML comments - see individual comments in the file. A bunch of these turned out to not be useful yet, but I've left them in in case they are useful later.
2. I've run out of time to write tests for these functions.