Example that demonstrates how to add a caption to a table in Markdoc

table-caption.mjs

import Markdoc from "@markdoc/markdoc";

const config = {
  tags: {
    table: {
      slots: {
        caption: { render: false },
      },
      transform(node, config) {
        if (node.children[0]?.type !== "table") return;
        const [table] = node.transformChildren(config);

        if (node.slots.caption)
          table.children.unshift(new Markdoc.Tag("caption", {}, [
            node.slots.caption.transform(config)
          ]));

        return table;
      },
    },
  },
};

const content = `
# Testing

This is a test

{% table %}
{% slot "caption" %}
This is a caption
{% /slot %}

- Column 1
- Column 2
- Column 3
---
- Foo
- Bar
- Baz
{% /table %}
`;

const ast = Markdoc.parse(content, {slots: true});
const output = Markdoc.transform(ast, config);
const html = Markdoc.renderers.html(output);
console.log(html);

Sorry for my ignorance, but how and where would I add this to the markdoc-starter? Possibly in /markdoc/tags?

@benrudolphWSP I'm not super familiar with how the next.js plugin works, but I think you would want to have the table tag (the value of the table property in config in this example) as a top-level export in a markdoc/tags/table.markdoc.ts file. I'm not sure if the next.js plugin supports slots yet, though.

@benrudolphWSP update to add slots to the next.js plugin is incoming: markdoc/next.js#31 After that lands, you can add slots: true to your tokenizer options in next.config.js to make this work