floating blocks cause placeholder to be mispositioned

<div>
  <img style="float: left">
  <Slate />
</div>

[ianstormtaylor]

Okay, good news and bad news!

Your question prompted me to deep dive into the placeholder. And turns out we don’t actually need to use a <Portal> to render it. So I was able to simplify how it’s rendered. Now it’s just a child at the same level with contentEditable={false}.

But, it’s still positioned absolutely by default, since this it the best for general cases.

But but, you should be able to pass style={...} to it, so you can customize it to handle your case. I believe you’ll want to float it to the left, and use make it zero-width. Something like:

style={{
  position: 'relative',
  float: 'left',
  width: '0px',
  marginRight: 'none',
  whiteSpace: 'nowrap'
}}

I think that will do it. The reason it’s not on by default is that it breaks for multi-line placeholders, so you’ll have to make sure your placeholder text is really short.

That’s the best I think we can do! But if anyone figures out a more bulletproof set of styles for the default let me know.

[aeneasr]

ok I’ll check it out, thanks!