Nested contenteditable areas

1

Are nested contenteditable areas something that would work with ProseMirror?

<div contenteditable="true">
<p>foobar</p>
<div contenteditable="false">
   <div>not editable header</div>
   <div>
      some styling stuff <div class="cool-style-element"></div> also not editable
      <div contenteditable="true">
         This is editable again! Wow amazing
      </div>
   </div>   
</div>
</div>
2

What would you be using them for? We will, if I can get browser to handle it properly, have things like images with editable captions beneath them, where the image wrapper isn’t editable but the caption is. Is that the kind of thing you were thinking of?

3

That could be one possibility, medium.com’s figures e.g. look like this:

<figure contenteditable="false">
   <img src="...">
   <figcaption contenteditable="true"></figcaption>
</figure>

My experience however has shown, that these things are really hard to get right in all browsers. That’s probably why medium.com only supports a hand full.