fix: support nested container syntax in component

Author: JounQin

Cargo.lock

@@ -20,3 +20,6 @@ markdown                  = { workspace = true }
 pretty_assertions         = { workspace = true }
 swc_core                  = { workspace = true }
 slugger                   = { path = "../slugger" }
+
+[dev-dependencies]
+insta = "1.42.0"

crates/mdx_rs/Cargo.toml

@@ -46,6 +46,7 @@ use mdx_plugin_toc::{mdx_plugin_toc, TocItem, TocResult};
 pub use crate::configuration::{MdxConstructs, MdxParseOptions, Options};
 pub use crate::mdx_plugin_recma_document::JsxRuntime;
 
+#[derive(Debug)]
 pub struct CompileResult {
   pub code: String,
   pub links: Vec<String>,
@@ -148,7 +149,49 @@ pub fn compile(value: &str, filepath: &str, development: bool, root: &str) -> Co
 mod tests {
   use super::*;
   #[test]
-  fn test_collect_title_in_mdast() {
-    compile("## Container Title {#custom-title}", "", true, "");
+  fn test_compile_custom_title() {
+    let result = compile("## Container Title {#custom-title}", "", true, "");
+
+    insta::assert_debug_snapshot!(result);
+  }
+
+  #[test]
+  fn test_compile_container_nested_in_list_and_component() {
+    let result = compile(
+      "
+<div>
+- Title
+
+  :::tip
+  This is a tip
+  :::
+</div>
+",
+      "",
+      true,
+      "",
+    );
+
+    insta::assert_debug_snapshot!(result);
+  }
+
+  #[test]
+  fn test_compile_container_nested_in_list_and_component_mdx() {
+    let result = compile(
+      "
+<Steps>
+- Title
+
+  :::tip
+  This is a tip
+  :::
+</Steps>
+",
+      "test.mdx",
+      true,
+      "",
+    );
+
+    insta::assert_debug_snapshot!(result);
   }
 }

crates/mdx_rs/src/lib.rs

@@ -0,0 +1,13 @@
+---
+source: crates/mdx_rs/src/lib.rs
+expression: result
+---
+CompileResult {
+    code: "import { useMDXComponents as _provideComponents } from \"@mdx-js/react\";\nfunction _createMdxContent(props) {\n    const _components = Object.assign({\n        div: \"div\",\n        p: \"p\"\n    }, _provideComponents(), props.components);\n    return <_components.div className=\"rspress-directive tip\"><_components.div className=\"rspress-directive-title\">{\"TIP\"}</_components.div><_components.div className=\"rspress-directive-content\"><_components.p>{\"This is a tip\"}</_components.p></_components.div></_components.div>;\n}\nfunction MDXContent(props = {}) {\n    const { wrapper: MDXLayout } = Object.assign({}, _provideComponents(), props.components);\n    return MDXLayout ? <MDXLayout {...props}><_createMdxContent {...props}/></MDXLayout> : _createMdxContent(props);\n}\nexport default MDXContent;\n",
+    links: [],
+    html: "<div><div>TIP</div><div><p>This is a tip</p></div></div>",
+    title: "",
+    toc: [],
+    languages: [],
+    frontmatter: "{}",
+}

crates/mdx_rs/src/snapshots/mdx_rs__tests__compile_container_nested_in_list_and_component.snap

@@ -0,0 +1,13 @@
+---
+source: crates/mdx_rs/src/lib.rs
+expression: result
+---
+CompileResult {
+    code: "import { useMDXComponents as _provideComponents } from \"@mdx-js/react\";\nfunction _createMdxContent(props) {\n    const _components = Object.assign({\n        ul: \"ul\",\n        li: \"li\",\n        p: \"p\",\n        div: \"div\"\n    }, _provideComponents(), props.components), { Steps } = _components;\n    if (!Steps) _missingMdxReference(\"Steps\", true, \"2:1-8:9\");\n    return <Steps><_components.ul>{\"\\n\"}<_components.li>{\"\\n\"}<_components.p>{\"Title\"}</_components.p>{\"\\n\"}<_components.div className=\"rspress-directive tip\"><_components.div className=\"rspress-directive-title\">{\"TIP\"}</_components.div><_components.div className=\"rspress-directive-content\"><_components.p>{\"This is a tip\"}</_components.p></_components.div></_components.div>{\"\\n\"}</_components.li>{\"\\n\"}</_components.ul></Steps>;\n}\nfunction MDXContent(props = {}) {\n    const { wrapper: MDXLayout } = Object.assign({}, _provideComponents(), props.components);\n    return MDXLayout ? <MDXLayout {...props}><_createMdxContent {...props}/></MDXLayout> : _createMdxContent(props);\n}\nexport default MDXContent;\nfunction _missingMdxReference(id, component, place) {\n    throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\" + (place ? \"\\nIt’s referenced in your code at `\" + place + \"` in `test.mdx`\" : \"\"));\n}\n",
+    links: [],
+    html: "",
+    title: "",
+    toc: [],
+    languages: [],
+    frontmatter: "{}",
+}

crates/mdx_rs/src/snapshots/mdx_rs__tests__compile_container_nested_in_list_and_component_mdx.snap

@@ -0,0 +1,21 @@
+---
+source: crates/mdx_rs/src/lib.rs
+expression: result
+---
+CompileResult {
+    code: "import { useMDXComponents as _provideComponents } from \"@mdx-js/react\";\nfunction _createMdxContent(props) {\n    const _components = Object.assign({\n        h2: \"h2\",\n        a: \"a\"\n    }, _provideComponents(), props.components);\n    return <_components.h2 id=\"custom-title\">{\"Container Title\"}<_components.a className=\"header-anchor\" aria-hidden=\"true\" href=\"#custom-title\">{\"#\"}</_components.a></_components.h2>;\n}\nfunction MDXContent(props = {}) {\n    const { wrapper: MDXLayout } = Object.assign({}, _provideComponents(), props.components);\n    return MDXLayout ? <MDXLayout {...props}><_createMdxContent {...props}/></MDXLayout> : _createMdxContent(props);\n}\nexport default MDXContent;\n",
+    links: [
+        "#custom-title",
+    ],
+    html: "<h2 id=\"custom-title\">Container Title<a aria-hidden=\"true\" href=\"#custom-title\">#</a></h2>",
+    title: "",
+    toc: [
+        TocItem {
+            text: "Container Title",
+            depth: 2,
+            id: "custom-title",
+        },
+    ],
+    languages: [],
+    frontmatter: "{}",
+}

crates/mdx_rs/src/snapshots/mdx_rs__tests__compile_custom_title.snap

@@ -182,6 +182,16 @@ fn traverse_children(root: &mut hast::Root) {
   let mut index = 0;
   while index < root.children.len() {
     let child = &mut root.children[index];
+
+    if let hast::Node::MdxJsxElement(element) = child {
+      let mut element_as_root = hast::Root {
+        children: element.children.clone(),
+        position: element.position.clone(),
+      };
+      traverse_children(&mut element_as_root);
+      element.children = element_as_root.children;
+    }
+
     if let hast::Node::Element(element) = child {
       let mut element_as_root = hast::Root {
         children: element.children.clone(),