How to implement attributes?

[ivanjaros]

I'd like to be able to add css classes to images, or tables or other properties. I have seen { foo=bar } syntax appended to an element to serve for this purpose. Are there recommended ways to do this or some built-in support? For example if i would have image token, it would have additional field, like "attributes", with all these values.

[calculuschild]

I have developed a solution to this for my own project at homebrewery.naturalcrit.com that uses a curly brace syntax similar to what you describe. I have several thousand users who thave been using this for years, with quite a bit if user feedback and tweaking along the way. Skim over the home page there to get an idea of how it works.

If that format seems useful to you, I can see about separating it into an extension as an NPM package. Or I can point you directly to my extension code for you to paste in.

[ivanjaros]

thanks, looks like interesting project.
i got recommended this https://www.npmjs.com/package/attributes-parser in another question. I would guess that it might be possible to use walkTokens and look for some kind of pattern {...} that is either at the end of the match or ends the first line(in case of block) and then it should be only a matter of parsing it, removing it so it won' get rendered as text, and setting it to the token for further processing.

So for example we could take the simplest code. In line version would be

`print "foo"`{.someClass}

or

```js {.someClass}
print "foo"
```

For block elements, there can be space, for inline elements, it must not be separated by a space.

Though my knowledge of marked and regex is not sufficient to figure out the technical solution.

[calculuschild]

I would guess that it might be possible to use walkTokens and look for some kind of pattern {...} that is either at the end of the match

Yes, it is possible to do this. This is similar to what our solution does.

[ivanjaros]

The main logic is here https://github.com/arve0/markdown-it-attrs/blob/master/utils.js though not sure how it could be implemented in marked in a way that would work as described(run on each token, "cut" the attributes, parse them and set them on the token object).

[ivanjaros]

Seems this is the one for markedjs. It is even listed in the "known" extensions list
https://github.com/bent10/marked-extensions/tree/main/packages/directive

[ivanjaros]

unfortunately it does not hook into existing system, as i have described would be desirable, but it takes over. so you have to render everything the original component does. which would not be the end of the world but for example, when i want to match image tag to add some floating class, it will match only the image's alt text but not the entire definition with url and title, so it's kinda useless.

[ivanjaros]

Ok, I have figured it out. This is simple extension that just looks for attributes pattern following certain tokens. In this case it hooks into image so it won't trigger if preceding token is text or table or code.

import parseAttrs from 'attributes-parser'

const attributes = {
  name: 'attributes',
  level: 'inline',
  start(src) { return src.match(/^\{.*\}/)?.index; },
  tokenizer(src, tokens) {
    const match = src.match(/^\{(.*)\}/);
    if (match && tokens.length > 0) {
      let last = tokens[tokens.length-1]
      if (['image'].includes(last.type)) {
        last.attributes = parseAttrs(match[1])
        return {
          type: 'attributes',
          raw: match[0],
        };
      }
    }
  }
};

There is no renderer because there is nothing to render but it must return token to avoid the attributes being rendered as text.

This obviously works only if the configuration follows the token. Which is great case for image, or link. But table would work better if it preceded it. But tokenizer only has access to preceding tokens. Code block on the other hand must encompass it. So in such cases walkTokens would be needed to massage some values or look ahead for the following token to match.