Wrapping text around images

[zachberry]

Spent a little bit of time today investigating what this might take.

If we remove white-space: pre-wrap and width: 100% from .component[data-obo-component='true'] then we can apply float: left to *[data-type='ObojoboDraft.Chunks.Figure'] and it will wrap in the viewer. We can ensure certain chunks don't wrap with (an example:)

css

*[data-type='ObojoboDraft.Chunks.Question'] {
	clear: both;
}

The editor is more problematic. The insert menu (+)::::(+) isn't rendering as expected because the height calculation of the floated chunk is not what it expects. It also causes the cursor to jump into any wrapping text, so each floatable chunk would need to have a dummy text node to trap input.

We also need a solution for no longer having pre-wrap, as text like \t[ ] would be rendered as [ ] instead of [ ].

Last, we need a convention for our internal attribute for wrapping. I could see us wrapping other items, like tables, so maybe a new wrap attribute with none (default), left or right. OR, probably a better idea, utilize the align property and let wrap be a boolean. Downside to that is allowing users to left-align an image and not-wrap it, which could be weird.

Last last, need to wipe out any floating styles at mobile sizes.

[FrenjaminBanklin]

I took a bit more of a dumbed-down approach to this. Rather than make it possible to float a Figure and allow any other chunk type to wrap around it, I've made it possible to convert a Figure into a floating image that has text wrapping around it to either side.

This doesn't (currently) allow for anything to wrap around the image other than plain text, and the text that wraps around the image is a part of the Figure itself rather than its own Text chunk. So it's a pretty significant compromise, but a foolproof solution to the 'let anything wrap around an image' problem frankly seems like it'd be more complicated than the payoff is worth.