Index Props for <li>

[drxc00]

Hi, I'm using react-markdown alongside react-pdf to dynamically build PDFs with markdown. I use the components props to map the converted components to specific react-pdf components, to render the pdf. This approach has been working well, however, I am having difficulty when it comes to ordered lists, specifically, knowing the index of a specific list item. In the old documentation, it was mentioned that extra props are passed to ul, ol, li, and components, however, checking the changelogs, it was removed a few updates ago. I was wondering if there is a way to access these values. Thank you in advance.

[wooorm]

See the changelog you found. Next to what you read, is likely a migration tip.
You can do everything with plugins. Read up on plugins here: https://unifiedjs.com.

[drxc00]

thank you for the tip. If others are looking for a solution to this you can try and create a custom remark plugin.

import { visit } from 'unist-util-visit';

export function remarkAddProps() {
    return (tree) => {
        // visit a list
        visit(tree, 'list', (listNode) => {
            let index = 1; // start an index counter
            // visit the list nodes and add the index to the props
            visit(listNode, 'listItem', (listItemNode) => {
                listItemNode.data = listItemNode.data || {};
                listItemNode.data.hProperties = listItemNode.data.hProperties || {};
                listItemNode.data.hProperties['list-index'] = index; // Add a `data-index` prop
                index += 1;
            });
        });
    };
}

then simply add that plugin to the react-pdf.

[wooorm]

You duplicate walking. That means that for lists in lists, as in list items in list items, you will have problems.

Lists have exactly only list items as children. List items have exactly only a list as a parent. This fact makes things simpler.
Also: I recommend using the common HTML data attribute name pattern.
Say for example:

visit(tree, function (node, index) {
  if (node.type === 'listItem' && typeof index === 'number') {
    node.data = node.data || {}
    node.data.hProperties = node.data.hProperties || {}
    node.data.hProperties.dataListIndex = index
  }
})