Why the nested directives are parsed correctly but their HTML does not render?

[reypm]

Hi there, I have a directive called card which is a wrapper with styles and so on and can contain nested directives as shown in the example below:

::::card

# This is common markdown

:::image{id="https://dummyimage.com/300x200/000000/fff"}
:::

:::notice{note}
This is a note notice
:::

::::

card, image and notice are custom directives. I want to be able to parse the directives inside card using the custom code created for image and notice but I cannot get it to work and by no work I mean the render is not working as it should be. This is my code:

import type { ContainerDirective } from 'mdast-util-directive'
import { toHast } from 'mdast-util-to-hast'

function processCard(node: ContainerDirective) {
  node.data = node.data ?? {}
  node.data.hName = 'section'
  node.data.hProperties = {
    className: 'sc-card'
  }

  node.data.hChildren = [
    {
      type: 'element',
      tagName: 'div',
      properties: {
        className: node.name + '-content'
      },
      children: node.children.map(toHast)
    }
  ]
}

export default processCard

And having the above markdown yields the following (I have removed the position: {} to make this shorter):

{
  "type": "containerDirective",
  "name": "card",
  "attributes": {},
  "children": [
    {
      "type": "heading",
      "depth": 1,
      "children": [
        {
          "type": "text",
          "value": "This is common markdown"
        }
      ]
    },
    {
      "type": "image",
      "url": "https://it3-content.usbank.com/300x200/000000/fff",
      "title": null
    },
    {
      "type": "containerDirective",
      "name": "notice",
      "attributes": {
        "note": ""
      },
      "children": [
        {
          "type": "paragraph",
          "children": [
            {
              "type": "text",
              "value": "This is a note notice"
            }
          ]
        }
      ],
      "data": {
        "hName": "section",
        "hProperties": {
          "className": "sc-notice note"
        },
        "hChildren": [
          {
            "type": "element",
            "tagName": "div",
            "properties": {
              "className": "notice-title"
            },
            "children": [
              {
                "type": "element",
                "tagName": "svg",
                "properties": {
                  "className": "notice-icon",
                  "variant": "note"
                },
                "children": []
              },
              {
                "type": "element",
                "tagName": "p",
                "properties": {
                  "className": "notice-icon"
                },
                "children": [
                  {
                    "type": "text",
                    "value": "note"
                  }
                ]
              }
            ]
          },
          {
            "type": "element",
            "tagName": "div",
            "properties": {
              "className": "notice-content"
            },
            "children": [
              {
                "type": "element",
                "tagName": "p",
                "properties": {},
                "children": [
                  {
                    "type": "text",
                    "value": "This is a note notice"
                  }
                ]
              }
            ]
          }
        ]
      }
    }
  ],
  "data": {
    "hName": "section",
    "hProperties": {
      "className": "sc-card"
    },
    "hChildren": [
      {
        "type": "element",
        "tagName": "div",
        "properties": {
          "className": "card-content"
        },
        "children": [
          {
            "type": "element",
            "tagName": "h1",
            "properties": {
              "id": "this-is-common-markdown"
            },
            "children": [
              {
                "type": "text",
                "value": "This is common markdown"
              }
            ]
          },
          {
            "type": "element",
            "tagName": "div",
            "properties": {},
            "children": []
          },
          {
            "type": "element",
            "tagName": "div",
            "properties": {},
            "children": [
              {
                "type": "element",
                "tagName": "p",
                "properties": {},
                "children": [
                  {
                    "type": "text",
                    "value": "This is a note notice"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

I would expect the same HTML to be created for the image (which should render the image) and the notice directive inside the card but that is not happening. Why? What I am missing here?

As usual here is a runnable example: https://codesandbox.io/s/remark-directive-forked-zmwdn8

[ChristianMurphy]

Hey @reypm! 👋
TL;DR The visitor is running preorder without recursion, it needs to be either postorder or recursive.
Context The visit function is run as a depth first traversal in preorder (https://github.com/syntax-tree/unist-util-visit-parents#api and https://github.com/syntax-tree/unist#preorder), meaning visits parent nodes before children nodes.
node.children.map(toHast) is transforming child content without/before child directives have been updated.
To solve this either:

• do a postorder traversal instead so the children will be transformed first (🌟 better idea)
• or recursively call your plugin inside the node.children.map step

[reypm]

Howdy @ChristianMurphy:

do a postorder traversal instead so the children will be transformed first (🌟 better idea)

Even if docs are pretty clear on this matter I am not sure how to turn NLR into LRN. At first I thought it was just by adding the reverse=true to the visit function but if this is the case and I was right is not working for me since the content inside the card directive is not being render.

This is what I did:

  return (tree: Root, file: VFile) => {
    visit(
      tree,
      "containerDirective",
      (node, index, parent) => {
        switch (node.name) {
          case "image": {
            processImage(node, index, parent, file);
            break;
          }
          case "notice": {
            processNotice(node, index, parent, file);
            break;
          }
          case "card": {
            processCard(node);
            break;
          }
        }
      },
      true
    );
  };

If I am mistaken, could you please give me some more hints? Some code would help!

[wooorm]

reverse doesn’t change to a depth-first tree-traversel, so it doesn’t do what you want.

Your problem is that you transform the tree.
While transforming the tree, by setting hChildren, you are saying: ignore everything, use my hChildren instead.

Hopefully, you don’t care about the div, and can apply the class to the section instead.
Then it just works:

  node.data.hProperties = {
-   className: ['sc-card']
+   className: ['sc-card', node.name + '-content']
  }

- node.data.hChildren = [
-   {
-     type: 'element',
-     tagName: 'div',
-     properties: {
-       className: node.name + '-content'
-     },
-     children: node.children.map(toHast)
-   }
- ]

[reypm]

awesome, thank you both, exactly what I was looking for 💯

[reypm]

hey @wooorm / @ChristianMurphy I know this was answered a while ago but is there any way to achieve the same while modifying the tree? See the following code:

import type { VFile } from 'vfile'
import {
  ContainerDirective,
  LeafDirective,
  TextDirective,
} from 'mdast-util-directive'
import { toHast } from 'mdast-util-to-hast'
import type { Element } from 'hast'

function processNotice(
  node: TextDirective | LeafDirective | ContainerDirective,
  file: VFile
) {
  const allowedTypes = ['warning', 'important', 'note', 'tip', 'info']
  // @ts-ignore
  const firstElementKey = Object.keys(node.attributes)[0]
  let currentType: string | undefined = ''

  // @ts-ignore
  if (Object.hasOwn(node.attributes, 'title')) {
    // @ts-ignore
    currentType = node.attributes.title
  } else if (allowedTypes.indexOf(firstElementKey) !== -1) {
    currentType = firstElementKey
  } else {
    file.fail('notice directive: invalid type', node)
  }

  node.data = node.data ?? {}
  node.data.hName = 'section'
  node.data.hProperties = {
    className: 'sc-notice ' + currentType,
  }

  const icon: Element = {
    type: 'element',
    tagName: 'svg',
    properties: {
      className: 'notice-icon',
      variant: currentType,
    },
    children: [],
  }

  const content: Element = {
    type: 'element',
    tagName: 'p',
    properties: {
      className: node.name + '-icon',
    },
    children: [
      {
        type: 'text',
        value: currentType,
      },
    ],
  }

  node.data.hChildren = [
    {
      type: 'element',
      tagName: 'div',
      properties: {
        className: 'notice-title',
      },
      children: [icon, content],
    },
    {
      type: 'element',
      tagName: 'div',
      properties: {
        className: 'notice-content',
      },
      // @ts-expect-error not all content types can be translated as inner content of element
      children: node.children.map(toHast),
    },
  ]
}

export default processNotice

Now if I do something like:

:::notice{info}
This is a notice. Go to :magic-link[Google]{id="https://www.google.com/"} and search for something.
:::

It does parse the main notice properly but it does not parse the magic-link inside of it and I wonder if there is a way to achieve this 🤔

Thanks in advance

[ChristianMurphy]

This line:

children: node.children.map(toHast),

looks at the children of the notice directive, but is not configured to support directives.

[reypm]

Can you point me to the right direction? I am not sure what should I do here to support directives 🤔