feat!: Support alternate ElementWrapper

[rhystmills]

What does this change?

This adds support for a using an alternate ElementWrapper for elements. In this case I'm exporting a new AltStyleElementWrapper from prosemirror-elements, making use of components from the existing ElementWrapper with some design changes. The new layout aims to feel more spacious within - for example when an element makes up most of a piece of content.

The controls from ElementWrapper are now moved to their own file (WrapperControls) so that it's simpler to compose a new ElementWrapper.

This PR includes a breaking change to createReactElementSpec, which will now take an options object as its argument rather than separate ordered arguments. The footprint for this PR looks fairly large because I've needed to update the demo element forms to provide arguments in this format.

We are aiming to use these styles in the upcoming 'key takeaways' element, which will represent the majority of content in a key takeaways article.

Since Composer now provides the Form components itself, we will need to provide new or altered components there to restyle the form itself. I've updated the styles used in the demo components here to mirror the intended experience in Compose.

This PR also makes some changes to the overall demo styles to make it slightly more user-friendly.

In the demo app here:

In Composer:

How to test

Run the demo locally and click 'Add Alt Style' alongside another element. Do they have different styles? Are there any React-related errors?

[rhystmills]

This can be used locally with flexible-content via yalc with this Composer branch: https://github.com/guardian/flexible-content/pull/4449

To do so:

1. Publish this branch locally with yarn yalc
2. Run yalc add @guardian/prosemirror-elements in the composer subfolder of flexible content locally, then run npm install.
3. Run ./dev-start.sh in flexible-content, and activate the key takeaways feature switch (see the menu with shift-fn-f12 and refresh)
4. Does the alternately styled key takeaways element appear in the element insertion submenu?

[rhystmills]

Had a chat with @jonathonherbert off GitHub - have a more flexible API change that could achieve these changes - enabling us to replace the ElementWrapper itself, rather than specifying styles, and controlling the form appearance from the elements passed in there, rather than by threading a style argument through.

[rhystmills]

That's now implemented!

[simonbyford]

This looks excellent, nice work!

I wonder about the name AltStyleElement but can't think of a better one 🤔 I guess we're avoiding calling it anything to do with Key Takeaways as we're hoping to use it more broadly?

[jonathonherbert]

Perfect 👌

[jonathonherbert]

This looks really neat. One suggestion about naming and commenting.