How do you use inline text elements eg, kbd?

[taktran]

I can see in the Markdoc spec that it supports inline text elements such as kbd: https://markdoc-html-tag-schemas-docs.onrender.com/schemas/text#kbd
From the spec, it should work like

{% kbd "Ctrl" /%}

However, when I try it in the markdoc sandbox, kbd is an unrecognised tag: https://markdoc.dev/sandbox?c=LS0tCnRpdGxlOiBUZXh0Ci0tLQoKeyUga2JkICJDdHJsIiAvJX0K

I have it working on an astro website sandbox: https://stackblitz.com/edit/github-4aoujs?file=src%2Fcontent%2Fdocs%2Fintro.mdoc,markdoc.config.mjs

However, it doesn't work like the spec, as I can't get the primary attribute to work. Maybe getting primary to work is more of an astro markdoc integration issue though. The way I got it working was to specify kbd as a custom tag, render as kbd and use children:

// In `markdoc.config.mjs`
export default defineMarkdocConfig({
  // ...
  tags: {
    kbd: {
      render: 'kbd',
      attributes: {
        primary: { type: String },
      },
    },
  }
}

In markdoc

// Doesn't work
{% kbd "Ctrl" /%}

// Works
{% kbd %}Ctrl{% /kbd %}

Even though it doesn't work with primary, I still needed to add primary as an attribute to overcome validation issues.

So the main question is, what is the proper way to set up inline text elements? Is it supposed to work with primary attributes? Is there something missing in the astro markdoc integration or is it on the markdoc level?

[rpaul-stripe]

However, when I try it in the markdoc sandbox, kbd is an unrecognised tag

The markdoc-html-tag-schemas thing that you link is a third-party library that would have to be installed separately — Markdoc itself doesn't come with a kbd tag, so that is why it isn't recognized in the Markdoc sandbox.

I can't get the primary attribute to work.

By default, Markdoc tag attributes render out in HTML as attributes of the same name on the underlying HTML tag. In your example, the "primary" attribute in the Markdoc tag will become a literal primary="Ctrl" attribute on the kbd HTML tag in the output. In order to make an attribute's content render as the child of the node, you need to use a transform function. Here's a working implementation that does what you want:

const config = {
  tags: {
    kbd: {
      render: 'kbd',
      attributes: {
        primary: { type: String },
      },
      transform(node, config) {
        return new Markdoc.Tag(this.render, {}, node.attributes.primary);
      }
    }
  }
};

[taktran]

The markdoc-html-tag-schemas thing that you link is a third-party library

🤦🏼‍♂️ Didn't check that properly. I just assumed, because it had markdoc in the name 😅. Thanks for the clarification

Here's a working implementation that does what you want

Thanks! It just needed a tweak with the children param needing to be an array ie,

            transform(node) {
                // `node.attributes.primary` needs to be in an array
                return new Markdoc.Tag(this.render, {}, [node.attributes.primary]);
            },

Here is a working example: https://stackblitz.com/edit/github-4aoujs-8ex9nd?file=src%2Fcontent%2Fdocs%2Fintro.mdoc,markdoc.config.mjs