Sanity.io and Inline 'Float' Images with Text Wrap-around

Question

Wondering if anyone can say if creating an inline image with text wrap-around is possible in Sanity.io? See the example image below.

I've read https://medium.com/@kimbjrkman/how-to-use-inline-images-in-rich-text-with-sanity-io-c42594baa509 - but this is directed at 'annotations' for small icons that are attached to text that you select.

I understand the basics of portable text, and the structured content approach to 'content as data' in Sanity - but am a bit stumped as to how you might create a layout like the one shown in the image below.

A 'regular' image type in block content will not work - even if there are field options for 'float', or '% width' as the image isn't wrapped by text - it's another block element - separate from the text blocks above and below (and so even if you set a float on the image, the text above will start to one side, but will not wrap)

(Note that the image needs to appear with text wrapped around in both Studio/Desk and of course on the published page)

Answer 1

It turns out that this isn't possible in Sanity Desk because of the way the editor (Slate.js) renders paragraphs as div elements, as opposed to p elements. Options / fields can be set on the object image to indicate it should be rendered as a 'float', which will wrap and render correctly in the published page - but not in the editor.