Skip to content

Commit fe20f00

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

File tree

5 files changed

+383
-4
lines changed

5 files changed

+383
-4
lines changed

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

+296-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><p>This is a tip.</p></div>
34+
</div>
35+
</li>
36+
</ol>
37+
<ul>
38+
<li>
39+
<p>Title 2</p>
40+
<div>
41+
<div>NOTE</div>
42+
<div><p>This is a note.</p></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,44 @@ 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.p>{"This is a tip."}</_components.p>
139+
</_components.div>
140+
</_components.div>
141+
{"\\n"}
142+
</_components.li>
143+
{"\\n"}
144+
</_components.ol>
145+
{"\\n"}
146+
<_components.ul>
147+
{"\\n"}
148+
<_components.li>
149+
{"\\n"}
150+
<_components.p>{"Title 2"}</_components.p>
151+
{"\\n"}
152+
<_components.div className="rspress-directive note">
153+
<_components.div className="rspress-directive-title">
154+
{"NOTE"}
155+
</_components.div>
156+
<_components.div className="rspress-directive-content">
157+
<_components.p>{"This is a note."}</_components.p>
158+
</_components.div>
159+
</_components.div>
160+
{"\\n"}
161+
</_components.li>
162+
{"\\n"}
163+
</_components.ul>
107164
</>
108165
);
109166
}
@@ -125,6 +182,243 @@ export default MDXContent;
125182
"
126183
`;
127184

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

‎__test__/container-content.md

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

2222
:::
23+
24+
1. Title 1
25+
26+
:::tip
27+
This is a tip.
28+
:::
29+
30+
- Title 2
31+
32+
:::note
33+
This is a note.
34+
:::

0 commit comments

Comments
 (0)