Embedded Document Links don't correctly display Caption

[alan-cole]

Describe the bug
When creating a basic text field on a landing page, and adding Media embed of type Document, If a caption is included with the embed, The end-result on the page will display an indented document link, with a caption that is not using the Document Link's caption style.

To Reproduce
Steps to reproduce the behaviour:

1. Create a new Landing Page
2. Add a Basic Text WYSIWYG
3. Add a Media embed for a document with a caption
4. Complete creating the landing page and save
5. View the page on the front-end
6. Observe the indented / incorrectly styled caption.

Expected behaviour
A Document Link caption should render as per the Document Link component.
https://www.ripple.sdp.vic.gov.au/?path=/story/molecules-documentlink--document-link

Actual behaviour
The document link is appearing indented, with a differently styled caption text.

Screenshots
This is using the caption field provided by Drupal media embed:

Versions

• Ripple: 1.22.0

Desktop (please complete the following information):

• OS: macOS
• Browser Firefox / Chrome
• Version: Latest

Additional context
From what I can see of the HTML:

An expected document link should output like:

<figure class="rpl-document-link">
  <a aria-label="This is the name of the document File type: pdf. Size: 1.4 mb" href="https://www.google.com" target="_blank" class="rpl-document-link__link">
    <!-- <svg>Removed embedded svg for clarity</svg> -->
    <div class="rpl-document-link__info">
      <span class="rpl-document-link__title">This is the name of the document</span>
      <div class="rpl-document-link__meta">
        <span class="rpl-document-link__type">pdf</span><span class="rpl-document-link__size rpl-document-link__size--seperator">1.4 mb</span>
      </div>
    </div>
  </a>
  <figcaption class="rpl-document-link__caption">This is a longer description of the document above.</figcaption>
</figure>

But what is being output by the Markup component is:

<figure role="group" class="caption caption-drupal-entity">
  <figure class="rpl-document-link">
    <a aria-label="Demo Sample Document File type: docx. Size: 7.53 KB" href="/sites/default/files/tide_demo_content/sample.docx" download="" class="rpl-document-link__link">
      <!-- <svg>Removed embedded svg for clarity</svg> -->
      <div class="rpl-document-link__info">
        <span class="rpl-document-link__title">Demo Sample Document</span>
        <div class="rpl-document-link__meta">
          <span class="rpl-document-link__type">docx</span> <span class="rpl-document-link__size rpl-document-link__size--seperator">7.53 KB</span>
        </div>
      </div>
    </a>
    <!---->
  </figure>
  <figcaption>This is a caption!</figcaption>
</figure>

Where a figure with a figcaption is wrapping the document link figure.

I believe this is because the markup-plugin that swaps out the Drupal embed with the Vue component doesn't check if it's being wrapped by a figure with caption.

If the markup plugin could also check for any document embeds within a figure, then replace the figure with the document link (with caption passed to the document link component), this should fix the issue.