Adding attributes

[lukasoppermann]

Hey,

I can't find out how to get attributes into the mix:

• remark-attr https://github.com/arobase-che/remark-attr doesn't work with the new version and the author said he doesn't have time to fix it (so it somebody would need to send a PR)
• I tried using the suggested directives https://github.com/remarkjs/remark-directive but can't get it to work for images

My current try is the following:

const htmlDirectives = () => {
  const tags = {
    image: 'img'
  }

  return transform

  function transform (tree) {
    visit(tree, ['textDirective', 'leafDirective', 'containerDirective'], ondirective)
  }

  function ondirective (node) {
    const data = node.data || (node.data = {})
    const hast = h(node.name, node.attributes)

    data.hName = tags[hast.tagName] || hast.tagName
    data.hProperties = hast.properties
  }
}

    <Remark
      remarkPlugins={[
        [gfm],
        [directive],
        [htmlDirectives],
      ]}

Edited

Reading the commonmark specs discussion I assumed I could do :image[alt-text](/image.jpg){width=100px}

However, it seems that the url (anything within the "()" ) is not transferred to the function.

Solution
I solved it now by just using :image{src=/image.jpg width=100px}

[wooorm]

To be clear, arobase-che said that PRs are welcome, just that he’s busy with other things (arobase-che/remark-attr#22 (comment)). This is open source after all, and it’s made by all of us.

Your error seems to be missing a message. It looks like you omitted the first (few) lines?

Making a runnable example, such as a codesandbox, also helps for maintainers to answer questions faster!

[lukasoppermann]

Hey, I found the issue. I thought it would use a link in () as mentioned in one of the referenced documents for pandoc. Got it working now.

Concerning the other repo, I did not mean to suggest that it is not okay that he doesn't have time for it. I work on some open source projects myself and know that it is very demanding. I just think that if this is such a huge change, as suggested in the comments, the likelihood of somebody sending a PR is rather slim.

I am sorry if that was badly phrased.

[lukasoppermann]

Ahhm, okay. That is good to know.

Several urls seem weird indeed, however one url (/link) seems fine to me at least.

[wooorm]

I think it’s an interesting idea, but the problem I also see with it is that: urls don‘t make sense for all directives. What should happen with a note directive that gets one? It also can’t be set on attributes, because it’s unclear whether it’s a href or an src.

I’d rather not implement something that’s only an idea and works different in each implementation 🤔

[lukasoppermann]

I do understand this. So you prefer to add a src or href in the attribute section?

[wooorm]

Yeah!

Note that you don‘t have to have “html directives” (although you of course can): you can make your own directives accept {url=whatever}, which then is used as a href or src or something else!

[lukasoppermann]

Fair point.