withProse remark plugin that escapes `prose` for MDX components

next.config.js

let { withProse } = require("./src/remark/withProse");
let { withSyntaxHighlighting } = require("./src/remark/withSyntaxHighlighting");
let { withTableOfContents } = require("./src/remark/withTableOfContents");
let { withExamples } = require("./src/remark/withExamples");
let { withLayout } = require("./src/remark/withLayout");
let { withNextLinks } = require("./src/remark/withNextLinks");
let { VueLoaderPlugin } = require("vue-loader");
let path = require("path");

const withMDX = require("@next/mdx")({
  options: {
    remarkPlugins: [
      withProse,
      withSyntaxHighlighting,
      withTableOfContents,
      withNextLinks,
      withExamples,
      withLayout,
    ],
  },
});
module.exports = withMDX({
  pageExtensions: ["js", "jsx", "mdx"],

  async redirects() {
    return [
      { source: "/react", destination: "/", permanent: false },
      { source: "/vue", destination: "/", permanent: false },
    ];
  },

  webpack(config) {
    config.resolveLoader.modules.push(
      path.resolve(__dirname, "src", "loaders")
    );

    config.module.rules.push({
      test: /\.(png|jpe?g|gif)$/i,
      use: [
        {
          loader: "file-loader",
          options: {
            publicPath: "/_next",
            name: "static/media/[name].[hash].[ext]",
          },
        },
      ],
    });

    config.module.rules.push({
      test: /\.svg$/,
      use: (resource) => {
        // this is to make it so each svg import has a unique id. when importing
        // an svg use the resource query to modify the id...
        // example:
        //   import { ReactComponent as Icon } from "@/svgs/my-icon?uniqueId"
        //
        let svg = path.parse(resource.resource).name;
        let id = resource.resourceQuery
          ? resource.resourceQuery.replace(/^\?/, "_")
          : "_";
        let prefix = `${svg}-${id}`;
        return [
          {
            loader: "@svgr/webpack",
            options: {
              svgoConfig: {
                plugins: [
                  {
                    prefixIds: {
                      prefix,
                    },
                  },
                ],
              },
            },
          },
          {
            loader: "file-loader",
            options: {
              publicPath: "/_next",
              name: "static/media/[name].[hash].[ext]",
            },
          },
        ];
      },
    });

    config.module.rules.push({
      test: /\.vue$/,
      loader: "vue-loader",
    });

    config.plugins.push(new VueLoaderPlugin());

    return config;
  },
});

withProse.js

/*
  Usage:

  const withMDX = require("@next/mdx")({
    options: {
      remarkPlugins: [
        withProse,
      ],
    },
  });
*/

const proseComponents = ["Heading"];

const isJsNode = (node) => {
  return (
    ["jsx", "import", "export"].includes(node.type) &&
    !/^<[a-z]+(>|\s)/.test(node.value) &&
    !new RegExp(`^<(${proseComponents.join("|")})(>|\\s)`).test(node.value)
  );
};

module.exports.withProse = () => {
  return (tree) => {
    let insideProse = false;
    tree.children = tree.children.flatMap((node, i) => {
      if (insideProse && isJsNode(node)) {
        insideProse = false;
        return [{ type: "jsx", value: "</div>" }, node];
      }
      if (!insideProse && !isJsNode(node)) {
        insideProse = true;
        return [
          { type: "jsx", value: '<div className="prose">' },
          node,
          ...(i === tree.children.length - 1
            ? [{ type: "jsx", value: "</div>" }]
            : []),
        ];
      }
      if (i === tree.children.length - 1 && insideProse) {
        return [node, { type: "jsx", value: "</div>" }];
      }
      return [node];
    });
  };
};