title: How to insert an image with a caption into a custom element in CKEditor 5?
body: <p>I am trying to insert an image element inside a custom  tag. But image is not set properly. I customized image upload plugin of ckeditor. </p>
  
  <p>Original upload plugin had these lines:</p>
  
  <pre><code>const imageElement = writer.createElement('image', { uploadId: loader.id });
  const insertAtSelection = findOptimalInsertionPosition(doc.selection);
  editor.model.insertContent(imageElement, insertAtSelection);
  </code></pre>
  
  <p>It's added image in dom tree like this:</p>
  
  <pre><code>&lt;h2&gt;TITLE&lt;/h2&gt;
  &lt;figure class="image ck-widget ck-widget_selected" contenteditable="false"&gt;
      &lt;img src="EXAMPLE/URL" title="" style=""&gt;
      &lt;figcaption class="ck-editor__editable ck-editor__nested-editable ck-placeholder" contenteditable="true" data-placeholder=""&gt;&lt;br data-cke-filler="true"&gt;&lt;/figcaption&gt;
  &lt;/figure&gt;
  </code></pre>
  
  <p>I changed the plugin. When I upload image, this code lines are running:</p>
  
  <pre><code>const imageElement = writer.createElement('image', { uploadId: loader.id });
  writer.appendElement('content', { 'guid': guid }, parent);
  content = parent.getChild(parent.childCount - 1);
  writer.append(imageElement, content);
  writer.setSelection(content.getChild(content.childCount - 1), 0);
  </code></pre>
  
  <p>My code inserts image to dom tree like this:</p>
  
  <pre><code>&lt;h2&gt;TITLE&lt;/h2&gt;
  &lt;content&gt;
      &lt;figure class="image ck-widget" contenteditable="false"&gt;
          &lt;img&gt;
      &lt;/figure&gt;
  &lt;/content&gt;
  </code></pre>
  
  <p>How can I set image attributes and caption? I suspected the <code>insertContent</code>. I tried to run <code>insertContent</code> but I couldn't know what should be sent to <code>insertContent</code> as position parameter. If I use <code>findOptimalInsertionPosition(doc.selection)</code>, image is added outside the <code>&lt;content&gt;</code>.</p>