rstacruz/markdown-it-decorate

Broken with `markdown-it-implicit-figures`

Opened this issue · 0 comments

  • I'm trying to use markdown-it-decorate and markdown-it-implicit-figures together

  • The way markdown-it-implicit-figures works is that <img> elements on their own line are wrapped in <figure>'s instead of <p>'s. Also, if enabled in that package's options, any alternate text supplied in the Image Link syntax becomes the <figcaption> within the <figure>.

    So this Markdown syntax

    ![I am the alternate text, which will become the figure caption](/some/link/to/somewhere.jpg "This is the title of the image")

    would be parsed to this html output

    <figure>
      <img src="/some/link/to/somewhere.jpg" alt="I am the alternate text, which will become the figure caption" title="This is the title of the image">
      <figcaption>I am the alternate text, which will become the figure caption</figcaption>
    </figure>
  • I'd like to be able to apply a class of class to the image, like so:

    ![I am the alternate text, which will become the figure caption](/some/link/to/somewhere.jpg "This is the title of the image")
    <!-- {.class} -->

    and get this

    <figure>
      <img src="/some/link/to/somewhere.jpg" alt="I am the alternate text, which will become the figure caption" title="This is the title of the image" class="class">
      <figcaption>I am the alternate text, which will become the figure caption</figcaption>
    </figure>
  • Instead, I get something like this, with the class="class" applied to the <figcaption> (because it's a sibling to the <img> maybe?)

    <figure>
      <img src="/some/link/to/somewhere.jpg" alt="I am the alternate text, which will become the figure caption" title="This is the title of the image">
      <figcaption class="class">I am the alternate text, which will become the figure caption</figcaption>
    </figure>

    or, if I fiddle with the whole disambiguation thing (<!-- {img:.class} -->) and place the HTML comment thingie just to the right of the Image Link syntax, like this

    ![I am the alternate text, which will become the figure caption](/some/link/to/somewhere.jpg "This is the title of the image") <!-- {.class} -->

I get the class applied, but the <figcaption> is gone

<figure>
  <img src="/some/link/to/somewhere.jpg" alt="I am the alternate text, which will become the figure caption" title="This is the title of the image" class="class">
</figure>

Any ideas?