How can I use remark-custom-heading-id in mdxToMarkdown?

[Daniel Erazo]

Hello, hope you can still help me, I want to use the remark-custom-heading-id to parse custom heading IDs, I'm using the mdxToMarkdown to allow MDX expressions but that function doesn't allow me to use the custom heading id syntax {#custom-id}. I'm using the following function to convert to MDX:

function mdxStringify(this: Processor) {
  const compiler = (tree: Node): string => {
    const markdown = toMarkdown(tree, {
      extensions: [gfmToMarkdown(), mdxToMarkdown()],
      bullet: "-",
      emphasis: "_",
      fences: true,
      resourceLink: true,
    });
    return markdown;
  };

  Object.assign(this, { Compiler: compiler });
}

If I remove the mdxToMarkdown function it handles custom heading ids properly, but I need that function, so is there a way to add a the remark-custom-heading-id as a plugin in that function? Thanks in advance.

By the way, that code is used in the following one:

export async function processMarkdown(content: string): Promise<string> {
  const preProcessed = preprocessingFixes(content);
  const processed = await unified()
    .use(remarkParse)
    .use(remarkGfm)
    .use(fixRogueHtml)
    .use(mdxStringify)
    .use(formatCodeLanguage)
    .process(preProcessed);
  const final = String(processed);
  // Now, validate that we have valid MDX (throws exception if not)
  await compile(final, { remarkPlugins: [remarkHeadingId] });
  return final;
}

You can see I'm using the remarkHeadingId as a plugin for the compiler but due to the mdxToMarkdown the output is \{#custom-id}