hashicorp / next-mdx-remote

Load MDX content from anywhere
Mozilla Public License 2.0
2.72k stars 141 forks source link

Advice needed for retext #241

Closed sebastienbarre closed 2 years ago

sebastienbarre commented 2 years ago

Hello. Thanks for the great work.

I was wondering if you could provide guidance with respect to using retextjs/retext with this plugin.

I noticed that remark and rehype plugins can be provided:

mdxOptions: {
      remarkPlugins: [],
      rehypePlugins: [],
    },

and I found the following plugin: remarkjs/remark-retext: plugin to transform from remark (Markdown) to retext (natural language), which I assume could be slotted into remarkPlugins. However, retext-- just like remark and rehype--works through plugins, and I'm a bit lost as to how I can pass a list of retext plugins to mdxOptions, or to remark-text.

Thank you

sebastienbarre commented 2 years ago

Had a long discussion about this with a remark/retext guru in: Using remark-retext with MDX (in Next.js). · Discussion #965 · remarkjs/remark.

The following is certainly possible:

import { serialize } from "next-mdx-remote/serialize";
import dictionary from "dictionary-en";
import remarkMdx from "remark-mdx";
import remarkRetext from "remark-retext";
import retextEnglish from "retext-english";
import retextSpell from "retext-spell";
import { unified } from "unified";

[...]

  const mdxSource = await serialize(mdxContent, {
    mdxOptions: {
      remarkPlugins: [
        remarkMdx,
        [remarkRetext, unified().use(retextEnglish).use(retextSpell, dictionary)],
      ],
    },
  });

Unfortunately the warnings/errors would not be surfaced to the console/terminal where Next.js dev mode was started from (say with npm run dev). So while the plugins would be executed, any spell-check errors would be effectively silenced...

BRKalow commented 2 years ago

Thanks for raising this! It looks like you've found some more information here, and unfortunately due to the nature of how the content is being parsed with this library and Next.js there doesn't seem to be a great way to get the output you're looking for. I'm going to close this as I don't think there is anything actionable here, but feel free to keep the discussion rolling or create a new issue if you believe there is something we can do to make this better.

Thanks!