I've configured TinyMCE to insert nested <div>s to create an image gallery-style layout for multiple similarly-sized images (with placeholder text to stop them being stripped out), then inserting <figure> tags with images and captions into the innermost <div>s.  On Firefox this was fine, but I later found out that in Chrome it appeared to be stripping out the innermost <div>.

After upgrading from v4 to v5 in the hope this would fix it, no joy (but two days of updating the editor config to handle the update ).  Then I realised it wasn't stripping the <div>, it was merging the new content with the placeholder text <p>aragraphs.

Long story short, by adding contenteditable="false" to the outermost <div>, and contenteditable="true" to the inner <div>s, I can now insert images into the blocks without everything being re-jigged.

<div class="image-frame" contenteditable="false">
  <div class="four-up" contenteditable="true">
    <p>Image 1</p>
  </div>
  <div class="four-up" contenteditable="true">
    <p>Image 2</p>
  </div>
  <div class="four-up" contenteditable="true">
    <p>Image 3</p>
  </div>
  <div class="four-up" contenteditable="true">
    <p>Image 4</p>
  </div>
</div>