Feature: Document Preview

[leekelleher]

Description

[!NOTE] This PR is to be aligned with the server-side PR: https://github.com/umbraco/Umbraco-CMS/pull/16279

Adds the Document Preview feature to Bellissima.

https://github.com/umbraco/Umbraco.CMS.Backoffice/assets/209066/36d4e1ec-b062-4354-a78e-f9e790d5bb59

This introduces a new extension type called previewApp, upon registration they will appear in the Preview window's menu (anchored to the bottom of the screen). This follows a similar approach to 'headerApp' extensions.

The core logic of the preview feature is within the UmbPreviewContext, with the preview-apps interacting with it, keeping it as generic as possible; e.g. context knows nothing about "devices", that is isolated within the devices preview-app, the context exposes the iframe wrapper element, so that the device dimensions can be applied directly.

Unfinished tasks

Still to do...

• [x] Save the document before opening the preview window.
• [x] ~Integrate SignalR connection to Preview Hub.~ Uses native WebSocket to connect to the SignalR Preview Hub.
• [ ] GUID ID based preview routes, (currently the preview is hard-coded to website's root path, /).
• [x] ~Review CORS SameOrigin issue with accessing <iframe> document contents.~ Not required.
• [ ] Website Preview Badge, e.g. ContentSettings.cs#L16-L149

Types of changes

• [x] New feature (non-breaking change which adds functionality)

How to test?

• In the backoffice, navigate to a document, press the Save and Preview button.
• Use the menu apps to interact with the website preview, e.g. change device; change culture.