Never can get Tag's name to return the name of the React Component

[mattiel]

I'm currently starting fresh with Nextjs14 with Typescript, and have encountered that simple conversion from the starter does not work and one problem I cannot get to solve is the this.render as string to return a string, instead of the reference to the functional component itself.

// heading.markdoc.ts
import { Tag } from '@markdoc/markdoc';
import Heading from '@components/Heading';

import type { RenderableTreeNodes } from '@markdoc/markdoc';
import type { MarkdocNextJsSchema } from '@markdoc/next.js';

function generateID(
  children: RenderableTreeNodes[],
  attributes: MarkdocNextJsSchema['attributes']
) {
  if (attributes?.id && typeof attributes.id === 'string') {
    return attributes.id;
  }

  return children
    ?.filter((child) => typeof child === 'string')
    .join(' ')
    .replace(/[?]/g, '')
    .replace(/\s+/g, '-')
    .toLowerCase();
}

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

    // this part seems to be the problem
    return new Tag(this.render as string, { ...attributes, id }, children);
  },
};

export default heading;

if (node.name === 'Heading') will always return false because node.name is [Function: Heading]. Unless I manually replace this.render with Heading, but doesn't seem like the right solution.

Any thoughts and help would be appreciated.

[mfix-stripe]

@mattiel you could just compare against === Heading instead of === 'Heading', where Heading is the function component you mentioned above.

Let me know if that solves your issue.

[mattiel]

Comparison of node.name and Heading gives type error because node.name is a string.

[mfix-stripe]

What is the string equal to? How you implement this is up to you—if you node name it called heading than you can do the comparison as === 'heading'.