feat(canvas): send scoped quick-edit reload hints

[andreas-haller]

Relates to adobe/da-nx#814.

This change scopes the reload/refresh of the WYSIWYG layout view to either block, section or page level instead of rebuilding all unaffected content every time a structural change happens. This should not affect simple text changes outside of the metadata block.
Also metadata and section-metadata blocks are handled separately to ensure page and section level refreshes instead of block level.

To activate the changes a new initializer is required. A script tag like

<script nonce="..." src="https://da.live/nx/public/plugins/quick-edit/quick-edit-init.js" type="module"></script>

has to be added at the beginning of <head>. If this is not done and the standard quick-edit snipped is loaded via scripts.js the reload behavior should stay unchanged. Once these changes are properly tested the auto inclusion can be adjusted in preview.da.live

Details

• Add rerenderScope to SET_BODY, identifying a changed block, section, added/removed section, or whole page.
• Track preview synchronization so suppressed updates and iframe-requested reloads include pending changes.
• Debounce metadata rerenders and add regression coverage.

Related Issue

#1327
adobe/da-nx#738.

How Has This Been Tested?

Manually tested at:
https://reload--da-live--adobe.aem.live/canvas?nx=reload&quick-edit=reload#/andreas-haller/eds-ew/index
and loading the init script via override in the header:

<script nonce="..." src="https://da.live/nx/public/plugins/quick-edit/quick-edit-init.js" type="module"></script>

Regression tests cover scope selection, metadata changes, suppressed updates, and reload recovery.

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• I have signed the Adobe Open Source CLA.
• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.

[aem-code-sync]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch.
In case there are problems, just click the checkbox below to rerun the respective action.

• Re-sync branch

Commits

• e7bfcf7 ✅ (latest)

[hannessolo]

Thanks, I did some clicking around it and it works great, and had a (not too in-depth) look at the code.

One thought I had is about whether we need to notify the page that a block was re-rendered, and give the page a chance to ask for more than just the block to be re-rendered.

Eg. if several blocks together in a section are rendered into a carousel (or similar), perhaps modifying one block would need a chance to say "please reload the whole section". I'd need to create a test to see what happens now. I think UE offers something like that @sharanyavinod ?

We don't necessarily need to implement this right now, but I wanted to bring it up so at least we could make sure to have a path forward to implement it if needed in the future.

[hannessolo]

Also, putting this down as a note to self - this should pave the way to making wysiwyg button editing better. We need to think about what kind of logic would need to be added to support that usecase, since it's something people have asked for.