How to make an mdx editor with an editing preview？

[Adrian-Zephyr-Liao]

Tech Stack:

Next.js

My current progress:

import { compileMDX } from "next-mdx-remote/rsc";
import { CodeBlock } from "@/components/mdx/code-block";
import { api } from "@/trpc/server";
import { ArticleLayout } from "../_components/article-detail-layout";
import { Tabs, TabItem } from "@/components/mdx/tabs";

const components = {
  pre: ({ children }: { children: React.ReactNode }) => <>{children}</>,
  code: (props: React.ComponentProps<typeof CodeBlock>) => {
    const isInline = !props.className;
    if (isInline) {
      return (
        <code className="rounded-md bg-gray-950 px-2 py-0.5 text-[13px] font-medium text-gray-200 ring-1 ring-gray-800/50 dark:bg-gray-950/90 dark:text-gray-300/90">
          {props.children}
        </code>
      );
    }
    return <CodeBlock {...props} />;
  },
  Tabs,
  TabItem,
};

export default async function ArticlePage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const slug = (await params).slug;
  const article = await api.article.getBySlug({ slug });
  const { content } = await compileMDX({
    source: article?.content ?? "",
    components,
  });

  if (!article) {
    return <div>Article not found</div>;
  }

  return <ArticleLayout article={article}>{content}</ArticleLayout>;
}

The goal I want to achieve:

Implement an article editor to store the .mdx file I wrote in the database.How can I ensure that the preview of the edit matches the rendering effect of the mdx on the article detail page?

[wooorm]

There is a playground on the MDX website. You can see the code for that: https://github.com/mdx-js/mdx/blob/main/docs/_asset/editor.jsx.