Additional options to allow more sophisticated examples

[codepunkt]

I'd like to style the existing children of the link. The goal is to start with a link like this:

[a link](http://example.com/some/path)

And be able to generate something like that:

<a href="http://example.com/some/path" rel="noopener noreferrer">
  <span class="link-content">a link</span>
  &#65279;
  <span class="link-hint">
    <img src="http://favicon-api.example.com/?domain=example.com">
  </span>
</a>

What's not possible today is:

• Wrapping the "original content" into a specified wrapper (.link-content span from the example above)
• Changing the content depending on original link href
• Adding something in between the wrapped "original content" and the additional content that's wrapped into the .link-hint span

To reach the desired result, I'm using this with:

{
  rel: 'noopener noreferrer',
  content: linkUrl => [
    {
      type: 'element',
      tagName: 'img',
      properties: {
        src: `http://favicon-api.example.com/?domain=${new URL(linkUrl).hostname}`
      },
    },
  ],
  contentProperties: {
    class: 'link-hint',
  },
  beforeContent: {
    type: 'text',
    value: '',
  },
  transformChildren: (children) => {
    return [
      {
        type: 'fragment',
        children: [],
        data: {
          hName: 'span',
          hChildren: children,
          hProperties: {
            class: 'link-content',
          },
        },
      },
    ]
  },
}

I know it's a lot, but the result is really nice and it's not something i could do with the existing library.

Can you think of better/easier APIs to reach the results i want? Would love to discuss!

[codepunkt]

Build fails because test coverage threshold is a miss.

@wooorm I can implement tests for everything when we have agreed on a good API.

[wooorm]

Sorry, I was busy making micromark.

I see that your use case makes sense; but I’m unsure whether it makes sense in this project? This what, triples the API surface? That could be buggy, such as that content passed to transformChildren is mdast, as in that it includes emphasis nodes, but your injecting it into hChildren, which will make divs for unknown nodes.

Might it make sense to solve your problems in the hast/rehype space instead, with your own plugin, or with rehype-urls perhaps?

[wooorm]

@codepunkt Ping! 😊

[codepunkt]

It might make sense to solve this elsewhere - i'm not deep enough into this space to comment on that. Also not sure how that would work - and as I'm using my fork on codepunkt.de, I'm kinda happy with it.

It's up to you if you think this sounds worthwhile or not 😀

[wooorm]

It’s becoming a bit complex I think, so I’ll pass on it. Still, I’m not saying it’s in any way bad. Just: it could live somewhere else quite nicely!

Thanks for the work though, Christoph, and happy holidays!