WIP: Add inline image resizing UI

[ellatrix]

Description

This PR adds UI to resize inline images. This is a more hidden feature. This PR should aim to add the minimum UI needed so that the image dimensions can be changed without TinyMCE's resize handles.

• Should PostitionedAtSelection be moved to the rich-text package or the components package?

How has this been tested?

Screenshots

Types of changes

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.

[ellatrix]

@jasmussen I might need your help with the design of this. :) Ideally it should look a bit like the link input pop up. Should the input have a label? It's otherwise unclear what the input field is for? Feel free to change anything on this PR!

[jasmussen]

Cool!

I pushed a little polish:

Is there a chance we can get some resize handles? Or is this the new interface?

[ellatrix]

@jasmussen Thanks! The image block has resize handles that we added. Currently the inline images have resize handles that TinyMCE added. I'm trying to add some minimal accessible UI to the inline images when we pull out TinyMCE, so resizing is still possible. As this is a lesser used feature, adding resize handles is not a top priority.

[jasmussen]

Works for me. Shine on!

[ellatrix]

Rebased. Seems to work fine now.

There's a small issue with the image format that is more obvious after this PR. The image object receives boundaries, but it shouldn't, as it's just an object, and at those boundaries, the UI is displayed. This issue as already present in master. I plan to fix it with a refactoring of the object format (don't worry, no API changes). The idea is that the objects are so different from formats that it justifies a separate key in the rich text value.

• There can only be one per index.
• We have to add object: true to it for special handling.
• It should not have format boundaries.
• I think there are some problems during serialisation where the object should always be last, but after applying a format it isn't.

With a separate key for objects, all these issues would go away. Perhaps something similar should be done for line separator formats (read: lists).

[youknowriad]

Some issues:

• When I enter the format from the left (keyboard), the width input is empty
• Why do I have to type "Enter" to apply the change, since the input is directly visible, I expect that the change is applied without submitting the form.
• Copy pasting text with an inline image, results in a paragraph block and an image block.

[ellatrix]

• Why do I have to type "Enter" to apply the change, since the input is directly visible, I expect that the change is applied without submitting the form.

It's like the link input. Without enter, the image would continuously change in size.

[ellatrix]

• Copy pasting text with an inline image, results in a paragraph block and an image block.

This is an issue in master as well. Pasted images rarely occur outside of paragraphs, so they are taken out.

[ellatrix]

• When I enter the format from the left (keyboard), the width input is empty

I thought this issue would be gone after f96dbe0. Could reproduce before but not after.

[ellatrix]

Thanks @noisysocks! Cc @jasmussen for the design. I think the pop up should look closer to the one we have for links.