Replacing Existing Node with Next.js Fails to Pass Attributes

What happened?

Following the docs on nodes and next js nodes is confusing.

Goal: replace the default heading node as the nodes doc demonstrates.

Following the examples in the nodes seems to lead to either the render function being called with no props other than children, or only the transform step being called and not the render step.

Suggestion

Provide more details on the way the nextjs integration interacts with the described transform and render steps, and provide more complete examples for nextjs.

To reproduce

1. Create a markdoc file with a h1, h2, h3.
2. Try this basic example (as implied by the combination of nextjs and non-nextjs docs)

import { Title } from '../title';
import { Tag } from '@markdoc/markdoc';


const TitleWrapper = ({ level, id, children }) => {
    console.log('Wrapper called')
    return (
        <Title level={level} id={id}>{children}</Title>
    )
}

export const heading = {
    render: TitleWrapper,
    children: ['inline'],
    attibutes: {
        id: { type: String },
        level: {type: Number, required: true, default: 1}
    }
}

1. This does render the component however it is never passed any value for level other than the default.

2. Attempt #2 Try the following

import { Title } from '../title';
import { Tag } from '@markdoc/markdoc';

const TitleWrapper = ({ level, id, children }) => {
    console.log('wrapper')
    const order = Math.min((level || 1) +1, 6) as TitleOrder;
    return (
    
        <Title order={order} id={id}>{children}</Title>
    )
}


function generateID(children, attributes) {
 //... skipped for brevity as not relevant
}

export const heading = {
    render: TitleWrapper,
    children: ['inline'],
    attibutes: {
        id: { type: String },
        level: {type: Number, required: true, default: 1}
    },
    transform(node, config) {
        const attributes = node.transformAttributes(config);
        const children = node.transformChildren(config);

        const id = generateID(children, attributes);

        return new Tag(
        `h${node.attributes['level']}`,
        { ...attributes, id },
        children
        );
  }
}

This does allow for multi-level headings however the render function is never called (no log lines printed or component rendered).

Version

@markdoc/markdoc": 0.1.2, @markdoc/next.js: 0.1.4

Additional context

No response

[mfix-stripe]

It appears the solution is to map to the render function via the component name which appears to need to be in PascalCase for React components and lowercase for native HTML components

More context on this answer here: https://github.com/markdoc/markdoc/discussions/64

If you want to use a custom React component, we recommend creating a Heading component which accepts a level prop, as seen in this discussion. Which then requires returning new Tag('Heading' ...).

However, if you just want to transform your headings (to, for example, always have an ID), then you can use the new Tag(h${node.attributes[‘level’]} ...) pattern.

This is demonstrative of the fact that in React, Heading and h1, h2, etc, are different components. So you have to set the correct component new in your new Tag(...).

[arranf]

Repro is here: https://github.com/arranf/markdoc-nextjs-repro

@arranf you just have a typo, attibutes -> attributes slightly_smiling_face

🙃 🤡

Well I feel stupid now! Thanks!