Initial support for allowing interaction with the preview

Overview

We currently prevent interaction with the preview to allow dragging and dropping components to work smoothly. (Imagine trying to drag a range slider but accidentally picking up and dragging the component that renders it).

To achieve this, the overlay component sits on top of the iFrame and intercepts all mouse events and the iFrame itself has a tabindex of -1 to prevent navigating to elements inside it with the keyboard.

We want to allow users to use/interact with the page they are previewing.

Proposed resolution

As the first step, we need build a foundational UX and basic UI.

1. Implement a UI switch between "preview" vs "editing" mode. (using React Router)
2. When in "preview" mode hide the overlay elements and allow the iFrame to receive focus
3. When in "preview" mode hide both sidebars
4. When in "preview" alter or intercept all link clicks to ensure the user can't navigate away from the XB page.

In addition there is an MVP of the following:

1. Add a keyboard shortcut, that when held, will enable "interactive" mode. ( currently it's holding the 'v' key). This is different from the Preview - in that it just hides the overlay and lets users interact with the iFrame. It's a bit buggy, but I'm leaving it in as it's a valuable dev tool (trying to use the browser dev tools to inspect the iFrame is currently really fiddly).

User interface changes

Entering Preview mode and moving between different preview widths

Clicking a link