What is the best way to exted syntax and reparse child nodes?

[iAdramelk]

Hi. I'm trying to create a plugin to emulate pymdown.tabbed plugin.

It allows to create tabs like this:

=== "Tab 1"

    Content **1**.

=== "Tab 2"

    Content <b>2</b>.

And transforms it to html node (in my case I also want to replace it with mdx node instead, but its not that relevant here) like that:

<div class="tabbed-content">
  <div class="tabbed-set" data-tabs="2:2">
    <input checked="checked" id="__tabbed_2_1" name="__tabbed_2" type="radio">
    <label for="__tabbed_2_1">Tab <strong>1</strong></label>
    <div class="tabbed-content"><p>Content 1.</p></div>
    <input id="__tabbed_2_2" name="__tabbed_2" type="radio">
    <label for="__tabbed_2_2">Tab 2</label>
    <div class="tabbed-content"><p>Content <b>2</b>.</p></div>
  </div>
</div>

As you can see, the can be markdown syntax or html content inside the tab. And because of the for space symbols before it, it is parsed to the code node by default without parsing it's syntax. In the real examples there can also be situations then tab can have other tabs inside or have some other custom syntax.

I already made a version that do that I want, but maybe there is a way to make it in more efficient.

What I do right now:

• I parse *.md document with mdast.
• I use unist-util-visit to replace original nodes with new placeholders on the first run. Placeholders look like this:

{
  {
    type: 'tab-set',
    children: [
       {
         type: 'tab',
         label: 'Tab 1',
         content: 'Content **1**'
       },
       {
         type: 'tab',
         label: 'Tab 2',
         content: 'Content **2**'
       },
    ]
  }
}

• At the same time then I create above nodes, I add references to them to separate array.
• After I prepare all placeholders, I take an array with the references to them and by using await Promise.all(references.map()) transform tab-set nodes to the html string (or jsx string in my case). I need to use async here because some plugins that I use for remark are asynchronous.

This works, but I don't like a number or things in my implementation:

1. To reparse code nodes content I need to create separate parser/stringifier and somehow copy all plugins and their settings to it. In my case I created config preset and share it between parent and child instances. I don't like it because I can't use my code as universal plugin, it need to always know what plugins its parent is using.
2. I need to stringify large chunks of the markdown AST early, it forces me to add this async logic that is only needed other plugins and it complicates code.

In the perfect world I would like to be able to do something like that:

1. Replace some original nodes with the custom nodes. (maybe even in the parsing phase).
2. If needed, mark some previously unparsed nodes as nodes that needs reparsing with the same parser and plugins set.
3. Only transfrom this new nodes to the html-nodes at the time of running remark-rehype.

I probably can achieve 3 with remark-rehype handlers, but it will require using two separate plugins in the config which is not perfect, but I don't see how I can do 1 or 2 now. But maybe I missing something.

Can you please help me, maybe I'm doing something wrong and there is a better way to implement this?

[wooorm]

If you’re using MDX, why not use JSX components?

For markdown extensions, maybe directives are better? https://github.com/remarkjs/remark-directive

[iAdramelk]

@wooorm I need backwards compatibility with the existing docs site created with the mkdocs. They are actively developed right now and will for some time exist in both versions old mkdocs one and new mdx one.

[iAdramelk]

Alternatively, custom nodes also can have children: you can detect the “tab” headings, and their following code, “unwrap” that code by parsing it (unified().use(remarkParse).parse(code.value)) and inject it directly into the tree or that custom node as its children. Once those nodes are in the tree, all further plugins can deal with them (typically plugins also visit children of unknown nodes)?

Yeah, I can probably do that. But I will also need to apply all the other remark plugins that I use here and somehow sync their list with the parent parser. It will prevent me from creating standalone plugin. Also I will need to make separate helper fro the remark-rehype that will transform this new node to html, which will again complicate it's usage as standalone plugin. (Also if I want to use jsx node instead of html node here, I will need to first serialize this node's children to jsx instead of just using rehype, bit it is an issue of mdx, and not issue of unified or rehype)

Will check micromark syntax extensions through, thanks.

[wooorm]

But I will also need to apply all the other remark plugins that I use here and somehow sync their list with the parent parser

I don]t really see why that’s needed? 🤔

[iAdramelk]

I don]t really see why that’s needed? 🤔

I use 3 other remark plugins right now: remark-copy-linked-files (this one is async, btw), my own plugin for admonitions (also custom syntax from mkdocs), and plugin to resolve syntax like {!examples/resources/onelogin-connector.yaml!} to include content of other files.

Because tabs can contain images, admonitions, code blocks or, actually even other tabs, I need to resolve these syntaxes too. So I can't just use unified().use(remarkParse).parse(code.value)), I need also add these plugins and because remark-copy-linked-files is async plugin I also can't just replace value inline, I need to collect all value references and resolve them separately with Promise.all.

[wooorm]

Depends on what you do with unified().use(remarkParse).parse(code.value)): say you use your tabs plugin as the first plugin, and it inject tabs into the original tree, then future plugins will run on the new tree?

[iAdramelk]

Good point. I still need to add plugin for tabs itself, because I can have nested tabs, but otherwise it will work for my case. Thank you.

It can potentially cause problems in the case when I have multiple custom syntax plugins which can nest each other. E. g. tabs => something else => tabs. But right now I don't have such problem.