Skip to content

Commit cfffa1d

Browse files
JounQinJounQin
committed
fix: support nested container syntax in component
1 parent d05dd6d commit cfffa1d

File tree

5 files changed

+365
-4
lines changed

5 files changed

+365
-4
lines changed

‎__test__/__snapshots__/index.spec.ts.snap

+284-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
22

3-
exports[`compile > should render container content correctly 1`] = `
3+
exports[`compile > should render container content in md correctly 1`] = `
44
"<div>
55
<div>TIP</div>
66
<div>
@@ -25,10 +25,28 @@ exports[`compile > should render container content correctly 1`] = `
2525
</code></pre>
2626
</div>
2727
</div>
28+
<ol>
29+
<li>
30+
<p>Title 1</p>
31+
<div>
32+
<div>TIP</div>
33+
<div></div>
34+
</div>
35+
</li>
36+
</ol>
37+
<ul>
38+
<li>
39+
<p>Title</p>
40+
<div>
41+
<div>TIP</div>
42+
<div></div>
43+
</div>
44+
</li>
45+
</ul>
2846
"
2947
`;
3048

31-
exports[`compile > should render container content correctly 2`] = `
49+
exports[`compile > should render container content in md correctly 2`] = `
3250
"import { useMDXComponents as _provideComponents } from "@mdx-js/react";
3351
function _createMdxContent(props) {
3452
const _components = Object.assign(
@@ -39,6 +57,7 @@ function _createMdxContent(props) {
3957
ul: "ul",
4058
li: "li",
4159
pre: "pre",
60+
ol: "ol",
4261
},
4362
_provideComponents(),
4463
props.components
@@ -104,6 +123,40 @@ function _createMdxContent(props) {
104123
{"\\n"}
105124
</_components.div>
106125
</_components.div>
126+
{"\\n"}
127+
<_components.ol>
128+
{"\\n"}
129+
<_components.li>
130+
{"\\n"}
131+
<_components.p>{"Title 1"}</_components.p>
132+
{"\\n"}
133+
<_components.div className="rspress-directive tip">
134+
<_components.div className="rspress-directive-title">
135+
{"TIP"}
136+
</_components.div>
137+
<_components.div className="rspress-directive-content" />
138+
</_components.div>
139+
{"\\n"}
140+
</_components.li>
141+
{"\\n"}
142+
</_components.ol>
143+
{"\\n"}
144+
<_components.ul>
145+
{"\\n"}
146+
<_components.li>
147+
{"\\n"}
148+
<_components.p>{"Title"}</_components.p>
149+
{"\\n"}
150+
<_components.div className="rspress-directive tip">
151+
<_components.div className="rspress-directive-title">
152+
{"TIP"}
153+
</_components.div>
154+
<_components.div className="rspress-directive-content" />
155+
</_components.div>
156+
{"\\n"}
157+
</_components.li>
158+
{"\\n"}
159+
</_components.ul>
107160
</>
108161
);
109162
}
@@ -125,6 +178,235 @@ export default MDXContent;
125178
"
126179
`;
127180

181+
exports[`compile > should render container content in mdx correctly 1`] = `
182+
"<div>
183+
<div>TIP</div>
184+
<div>
185+
<p>First line <code>block</code></p>
186+
<p>Second line <code>block2</code></p>
187+
</div>
188+
</div>
189+
<div>
190+
<div>TIP</div>
191+
<div>
192+
<ul>
193+
<li>List item 1 <code>block</code>。</li>
194+
<li>List item 2 <code>block2</code>。</li>
195+
</ul>
196+
</div>
197+
</div>
198+
<div>
199+
<div>TIP</div>
200+
<div>
201+
<p>Some code:</p>
202+
<pre><code>console.log('hello world');
203+
</code></pre>
204+
</div>
205+
</div>
206+
<ol>
207+
<li>
208+
<p>Title 1</p>
209+
<div>
210+
<div>TIP</div>
211+
<div></div>
212+
</div>
213+
</li>
214+
</ol>
215+
<ul>
216+
<li>
217+
<p>Title</p>
218+
<div>
219+
<div>TIP</div>
220+
<div></div>
221+
</div>
222+
</li>
223+
</ul>
224+
"
225+
`;
226+
227+
exports[`compile > should render container content in mdx correctly 2`] = `
228+
"import { useMDXComponents as _provideComponents } from "@mdx-js/react";
229+
function _createMdxContent(props) {
230+
const _components = Object.assign(
231+
{
232+
div: "div",
233+
p: "p",
234+
code: "code",
235+
ul: "ul",
236+
li: "li",
237+
pre: "pre",
238+
ol: "ol",
239+
},
240+
_provideComponents(),
241+
props.components
242+
),
243+
{ Steps } = _components;
244+
if (!Steps) _missingMdxReference("Steps", true, "34:1-46:9");
245+
return (
246+
<>
247+
<_components.div className="rspress-directive tip">
248+
<_components.div className="rspress-directive-title">
249+
{"TIP"}
250+
</_components.div>
251+
<_components.div className="rspress-directive-content">
252+
<_components.p>
253+
{"First line "}
254+
<_components.code>{"block"}</_components.code>
255+
</_components.p>
256+
{"\\n"}
257+
<_components.p>
258+
{"Second line "}
259+
<_components.code>{"block2"}</_components.code>
260+
{"\\n"}
261+
</_components.p>
262+
</_components.div>
263+
</_components.div>
264+
{"\\n"}
265+
<_components.div className="rspress-directive tip">
266+
<_components.div className="rspress-directive-title">
267+
{"TIP"}
268+
</_components.div>
269+
<_components.div className="rspress-directive-content">
270+
{"\\n"}
271+
<_components.ul>
272+
{"\\n"}
273+
<_components.li>
274+
{"List item 1 "}
275+
<_components.code>{"block"}</_components.code>
276+
{"。"}
277+
</_components.li>
278+
{"\\n"}
279+
<_components.li>
280+
{"List item 2 "}
281+
<_components.code>{"block2"}</_components.code>
282+
{"。"}
283+
</_components.li>
284+
{"\\n"}
285+
</_components.ul>
286+
{"\\n"}
287+
</_components.div>
288+
</_components.div>
289+
{"\\n"}
290+
<_components.div className="rspress-directive tip">
291+
<_components.div className="rspress-directive-title">
292+
{"TIP"}
293+
</_components.div>
294+
<_components.div className="rspress-directive-content">
295+
{"\\n"}
296+
<_components.p>{"Some code:"}</_components.p>
297+
{"\\n"}
298+
<_components.pre>
299+
<_components.code className="language-ts">
300+
{"console.log('hello world');\\n"}
301+
</_components.code>
302+
</_components.pre>
303+
{"\\n"}
304+
</_components.div>
305+
</_components.div>
306+
{"\\n"}
307+
<_components.ol>
308+
{"\\n"}
309+
<_components.li>
310+
{"\\n"}
311+
<_components.p>{"Title 1"}</_components.p>
312+
{"\\n"}
313+
<_components.div className="rspress-directive tip">
314+
<_components.div className="rspress-directive-title">
315+
{"TIP"}
316+
</_components.div>
317+
<_components.div className="rspress-directive-content" />
318+
</_components.div>
319+
{"\\n"}
320+
</_components.li>
321+
{"\\n"}
322+
</_components.ol>
323+
{"\\n"}
324+
<_components.ul>
325+
{"\\n"}
326+
<_components.li>
327+
{"\\n"}
328+
<_components.p>{"Title"}</_components.p>
329+
{"\\n"}
330+
<_components.div className="rspress-directive tip">
331+
<_components.div className="rspress-directive-title">
332+
{"TIP"}
333+
</_components.div>
334+
<_components.div className="rspress-directive-content" />
335+
</_components.div>
336+
{"\\n"}
337+
</_components.li>
338+
{"\\n"}
339+
</_components.ul>
340+
{"\\n"}
341+
<Steps>
342+
<_components.ol>
343+
{"\\n"}
344+
<_components.li>
345+
{"\\n"}
346+
<_components.p>{"Title 1"}</_components.p>
347+
{"\\n"}
348+
<_components.div className="rspress-directive tip">
349+
<_components.div className="rspress-directive-title">
350+
{"TIP"}
351+
</_components.div>
352+
<_components.div className="rspress-directive-content" />
353+
</_components.div>
354+
{"\\n"}
355+
</_components.li>
356+
{"\\n"}
357+
</_components.ol>
358+
<_components.ul>
359+
{"\\n"}
360+
<_components.li>
361+
{"\\n"}
362+
<_components.p>{"Title"}</_components.p>
363+
{"\\n"}
364+
<_components.div className="rspress-directive tip">
365+
<_components.div className="rspress-directive-title">
366+
{"TIP"}
367+
</_components.div>
368+
<_components.div className="rspress-directive-content" />
369+
</_components.div>
370+
{"\\n"}
371+
</_components.li>
372+
{"\\n"}
373+
</_components.ul>
374+
</Steps>
375+
</>
376+
);
377+
}
378+
function MDXContent(props = {}) {
379+
const { wrapper: MDXLayout } = Object.assign(
380+
{},
381+
_provideComponents(),
382+
props.components
383+
);
384+
return MDXLayout ? (
385+
<MDXLayout {...props}>
386+
<_createMdxContent {...props} />
387+
</MDXLayout>
388+
) : (
389+
_createMdxContent(props)
390+
);
391+
}
392+
export default MDXContent;
393+
function _missingMdxReference(id, component, place) {
394+
throw new Error(
395+
"Expected " +
396+
(component ? "component" : "object") +
397+
" \`" +
398+
id +
399+
"\` to be defined: you likely forgot to import, pass, or provide it." +
400+
(place
401+
? "\\nIt’s referenced in your code at \`" +
402+
place +
403+
"\` in \`container-content.mdx\`"
404+
: "")
405+
);
406+
}
407+
"
408+
`;
409+
128410
exports[`compile > should render container title in md correctly 1`] = `
129411
"<h2 id="custom-title">
130412
Container Title<a aria-hidden="true" href="#custom-title">#</a>

‎__test__/container-content.md

+10
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,13 @@ console.log('hello world');
2020
```
2121

2222
:::
23+
24+
1. Title 1
25+
26+
:::tip
27+
:::
28+
29+
- Title
30+
31+
:::tip
32+
:::

‎__test__/container-content.mdx

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
:::tip
2+
First line `block`
3+
4+
Second line `block2`
5+
:::
6+
7+
:::tip
8+
9+
- List item 1 `block`。
10+
- List item 2 `block2`。
11+
12+
:::
13+
14+
:::tip
15+
16+
Some code:
17+
18+
```ts
19+
console.log('hello world');
20+
```
21+
22+
:::
23+
24+
1. Title 1
25+
26+
:::tip
27+
:::
28+
29+
- Title
30+
31+
:::tip
32+
:::
33+
34+
<Steps>
35+
36+
1. Title 1
37+
38+
:::tip
39+
:::
40+
41+
- Title
42+
43+
:::tip
44+
:::
45+
46+
</Steps>

0 commit comments

Comments
 (0)