Refactor media resize into shared mixin and fix drag-and-drop in work items

What does this MR do and why?

This is a preparatory (refactor + bugfix) MR for Support iframe embeds in rich-text editor (!231412), which is part of <iframe> embeds in Markdown content (#282443).

We do a couple things here:

1. Fix drag-and-drop in work items; right now there's a @dragstart="preventDefaultConditionally" which only prevents default when a resize handle is being dragged (Fix resizing of attached image in RTE (!218052 - merged)). This fixed resize in the editor, but not moving elements around within it; the current live behaviour is a confusing mix of "you can resize and drag, but resizing also triggers drag". We now detect if the target is within ProseMirror at all, and defer all action (and preventDefault decisions) to the editor when so.
2. Refactor media resizing into a mixin, as we're about to add a new user of this in Support iframe embeds in rich-text editor (!231412). The media_resize mixin handles the resize handle case itself, so it doesn't need to be potentially scattered amongst all users.
3. Fix the "selected node" outline for video (and audio) elements by adding ProseMirror-selectednode to their node views when the selected prop is set (which is set automatically by TipTap when provided, via its VueNodeViewRenderer). With the prop, we don't rely on ProseMirror keeping the class on the container set. This means the node remains outlined even when the bubble menu is opened (and closed again).
4. Stop images from being misaligned within the node view container by setting vertical-align: bottom. This removes a rather chunky extra border-looking thing on the bottom edge of selected images. We adjust the resize handles' position offsets to account for this.
5. Refocus the editor after cancelling the bubble menu. This is for symmetry with accepting the bubble menu.

References

• Support iframe embeds in rich-text editor (!231412) (stacked MR on this one)
• <iframe> embeds in Markdown content (#282443) (wider feature)

Screenshots or screen recordings

No.	Before	After
1+2
3
4
5	You can't really tell this one in a video because there's no obvious difference between the editor being focussed and not, except for the fact that keyboard input is received by the editor. But it's really fixed!

How to set up and validate locally

1. Check out the branch.
2. Go to a rich-text editor and drop some images and videos in. I got that globe from a sketchy free .mp4 website, you could do it too!
3. Test that you can resize images and videos, drag and drop images around in the document (with videos it's a little iffy still and I'm not claiming to have fixed this), use the bubble menu, and things generally look Much Better.
4. Bella.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.