refactor: make structure more runtime reasonable

src/core/rendering/complex-plugins/code-block-escape/CodeBlockMermaid.tsx → src/components-parsing/complex-plugin-components/code-block-escape/CodeBlockMermaid.tsx

@@ -1,5 +1,5 @@
 import { MermaidExcalidraw } from "@/components/ExcalidrawScene/MermaidExcalidraw";
-import { CodeBlockProps } from "./types";
+import { CodeBlockProps } from "../../../core/parsing/complex-plugins/code-block-escape/types";
 
 export const CodeBlockMermaid = (props: CodeBlockProps) => {
   let name = props.lang ?? undefined; // string | undefined

src/core/rendering/complex-plugins/obsidian-rich/ObsidianRichExcalidraw.tsx → src/components-parsing/complex-plugin-components/obsidian-rich/ObsidianRichExcalidraw.tsx

@@ -1,5 +1,5 @@
 import EmbededExcalidraw from "@/components/ExcalidrawScene/EmbededExcalidraw";
-import { ObsidianRichProps } from "./types";
+import { ObsidianRichProps } from "../../../core/parsing/complex-plugins/obsidian-rich/types";
 
 export const ObsidianRichExcalidraw = (props: ObsidianRichProps) => {
   console.log("ObsidianRichExcalidraw:", props);

src/components-parsing/component-parsing.tsx

@@ -0,0 +1,19 @@
+import License from "@/components/License";
+import { MDXComponents } from "mdx/types";
+import { Bar } from "./chartjs";
+import { CodeBlockMermaid } from "./complex-plugin-components/code-block-escape/CodeBlockMermaid";
+import { ObsidianRichExcalidraw } from "./complex-plugin-components/obsidian-rich/ObsidianRichExcalidraw";
+
+export const components: MDXComponents = {
+  Bar,
+  License,
+  CodeBlockMermaid,
+  ObsidianRichExcalidraw,
+  // code: (props: any) => {
+  //   if (props.className === "language-mermaid") {
+  //     return <Mermaid {...props} />;
+  //   }
+  //   const language = props.className?.replace("language-", "");
+  //   return <CodeBlock language={language} {...props} />;
+  // },
+};

src/core/parsing/README.md

@@ -0,0 +1,23 @@
+# `core/parsing`
+
+This directory contains the mdx parsing logic.
+
+Mostly contains about:
+
+- `remark` plugins
+- `rehype` plugins
+- `complex` plugins
+
+## Complex Plugins
+
+Complex plugins are the plugins about defining a new syntax, parsing it and provide a new JSX element for it.
+It may mainly contains:
+
+- `type` definition, which is the interface between the parsing plugin and the rendering component.
+- `remark` plugin or `rehype` plugin, which is the parsing logic.
+
+Mostly should define a new component, which should receive props of type defined in `type`.
+
+Attention:
+
+All modules in this directory should not be imported by any Component at rendering time, except the `type`.

src/core/parsing/rendering-parse.ts

@@ -0,0 +1,91 @@
+import { CompileOptions } from "@mdx-js/mdx";
+import { serialize } from "next-mdx-remote/serialize";
+import rehypeAutolinkHeadings from "rehype-autolink-headings";
+import rehypeKatex, { Options as KatexOptions } from "rehype-katex";
+import rehypePrettyCode, {
+  Options as PrettyCodeOptions,
+} from "rehype-pretty-code";
+import rehypeSlug from "rehype-slug";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
+import remarkUnwrapImages from "remark-unwrap-images";
+import { ParseMdxProps } from "../types/rendering";
+import {
+  RemarkCodeBlockEscapeOptions,
+  remarkCodeBlockEscape,
+} from "./complex-plugins/code-block-escape/remark-code-block-escape";
+import remarkObsidianRich, {
+  RemarkObsidianRichOptions,
+} from "./complex-plugins/obsidian-rich/remark-obsidian-rich";
+import { ObsidianRichProps } from "./complex-plugins/obsidian-rich/types";
+
+const genMdxOptions = (props: ParseMdxProps) => {
+  const defaultMdxOptions: Omit<
+    CompileOptions,
+    "outputFormat" | "providerImportSource"
+  > = {
+    remarkPlugins: [
+      remarkGfm,
+      remarkMath,
+      // remarkExcalidrawMermaid,
+      [
+        remarkCodeBlockEscape,
+        {
+          escapes: [["mermaid", "CodeBlockMermaid"]],
+        } as RemarkCodeBlockEscapeOptions,
+      ],
+      // [remarkMermaid, { wrap: true, className: ["mermaid"] }],
+      [
+        remarkObsidianRich,
+        {
+          matchers: [
+            [
+              (props: ObsidianRichProps) =>
+                props.file.endsWith(".excalidraw") ||
+                props.file.endsWith(".excalidraw.md"),
+              "ObsidianRichExcalidraw",
+            ],
+          ],
+        } as RemarkObsidianRichOptions,
+      ],
+      remarkUnwrapImages,
+    ],
+    rehypePlugins: [
+      rehypeSlug,
+      [rehypeAutolinkHeadings, { behavior: "wrap" }],
+      [
+        rehypeKatex,
+        {
+          strict: false,
+        } as KatexOptions,
+      ],
+      [
+        rehypePrettyCode,
+        {
+          theme: "rose-pine-moon",
+          keepBackground: true,
+          onVisitLine: (node: any) => {
+            if (node.children.length === 0) {
+              node.children = [{ type: "text", value: " " }];
+            }
+          },
+          onVisitHighlightedLine: (node: any) => {
+            node.properties.className.push("highlighted");
+          },
+          onVisitHighlightedWord: (node: any, id: string | undefined) => {
+            node.properties.className = ["word"];
+          },
+        } as PrettyCodeOptions,
+      ],
+    ],
+  };
+  return defaultMdxOptions;
+};
+
+export const parseMdx = async (content: string, props: ParseMdxProps) => {
+  const mdxOptions = genMdxOptions(props);
+  const source = await serialize(content, {
+    mdxOptions: mdxOptions,
+  });
+  return source;
+};