Title
-First Paragraph
-Second Paragraph
-Title
+First Paragraph
+Second Paragraph
+Title
-First Paragraph
-Second Paragraph
-Title
+First Paragraph
+Second Paragraph
+{'console.log("hi");'});
+ expect(container.querySelector('code.rdmd-code')).toBeInTheDocument();
+ });
- const { container } = render({'console.log("hi");'});
+ expect(container).toHaveTextContent('console.log("hi");');
+ });
- expect(container).toHaveTextContent(/VARIABLE_SUBSTITUTED/);
- fireEvent.click(screen.getByRole('button'));
-
- expect(copy).toHaveBeenCalledWith(expect.stringMatching(/VARIABLE_SUBSTITUTED/));
+ it('handles undefined children', () => {
+ const { container } = render({'console.log("hi");'});
- const btn = screen.getByRole('button');
-
- expect(btn.parentNode?.nodeName.toLowerCase()).not.toBe('code');
+ it.each(renderingEngines)('%s: renders a fenced code block', (_label, renderContent) => {
+ const md = `\`\`\`js
+const x = 1;
+\`\`\``;
+ const Content = renderContent(md);
+ const { container } = render(` tag if safeMode={true}', () => {
+ // TODO: Skipped about the mdxish engine fails this test since it wraps the in a tag
+ // Rendering looks correct, so skip this for now until we decide if we want to fix this or not
+ it.skip.each(renderingEngines)('%s: renders the html in a `
` tag if safeMode={true}', (_label, renderContent) => {
const md = '{``} ';
- const Component = execute(md);
- expect(renderToStaticMarkup(<button onload="alert('gotcha!')"/>
"',
+ const Component = renderContent(md);
+ expect(renderToStaticMarkup(<button onload="alert('gotcha!')"/>
',
);
});
});
diff --git a/__tests__/components/Variable.test.tsx b/__tests__/components/Variable.test.tsx
index 26c91c4af..421d3e66f 100644
--- a/__tests__/components/Variable.test.tsx
+++ b/__tests__/components/Variable.test.tsx
@@ -1,12 +1,12 @@
import { render, screen } from '@testing-library/react';
import React from 'react';
-import { execute } from '../helpers';
+import { renderingEngines } from './utils';
describe('Variable', () => {
- it('render a variable', () => {
+ it.each(renderingEngines)('%s: render a variable', (_label, renderContent) => {
const md = '
+
+
+ Hello there
+
+
+
+`;
+
+exports[`Callout > mdx: renders the markdown inside the callout body 1`] = `
+
+
+
+
+
+
+ This should be a heading
+
+
+
+
+ This should be
+
+ strong
+
+ text,
+
+ italic
+
+ text, and a
+
+ strikethrough
+
+ text.
+
+
+
+`;
+
+exports[`Callout > mdxish: renders a callout with icon and body 1`] = `
+
+
+
+
+ Hello there
+
+
+
+`;
+
+exports[`Callout > mdxish: renders the markdown inside the callout body 1`] = `
+
+
+
+
+
+
+ This should be a heading
+
+
+
+
+ This should be
+
+ strong
+
+ text,
+
+ italic
+
+ text, and a
+
+ strikethrough
+
+ text.
+
+
+
+`;
diff --git a/__tests__/components/__snapshots__/Cards.test.tsx.snap b/__tests__/components/__snapshots__/Cards.test.tsx.snap
new file mode 100644
index 000000000..e2f740a79
--- /dev/null
+++ b/__tests__/components/__snapshots__/Cards.test.tsx.snap
@@ -0,0 +1,337 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Cards > given a Card with href > mdx: renders a Card as an anchor element 1`] = `
+
+
+
+`;
+
+exports[`Cards > given a Card with href > mdxish: renders a Card as an anchor element 1`] = `
+
+`;
+
+exports[`Cards > given a Card with icon and badge props > mdx: renders an icon and badge element 1`] = `
+
+
+
+
+
+
+ Featured
+
+ New
+
+
+ Featured content
+
+
+
+
+`;
+
+exports[`Cards > given a Card with icon and badge props > mdxish: renders an icon and badge element 1`] = `
+
+
+
+
+
+
+ Featured
+
+ New
+
+
+
+ Featured content
+
+
+
+
+
+`;
+
+exports[`Cards > given a Card without href > mdx: renders a Card as a div element 1`] = `
+
+
+
+
+
+ Static Card
+
+ Static
+
+
+
+
+`;
+
+exports[`Cards > given a Card without href > mdxish: renders a Card as a div element 1`] = `
+
+
+
+
+
+ Static Card
+
+
+ Static
+
+
+
+
+
+`;
+
+exports[`Cards > given a Cards with Card children > mdx: renders a CardsGrid wrapper containing Card children 1`] = `
+
+
+
+
+
+ First
+
+ First content
+
+
+
+
+
+ Second
+
+ Second content
+
+
+
+
+`;
+
+exports[`Cards > given a Cards with Card children > mdxish: renders a CardsGrid wrapper containing Card children 1`] = `
+
+
+
+
+
+ First
+
+
+ First content
+
+
+
+
+
+
+ Second
+
+
+ Second content
+
+
+
+
+
+`;
+
+exports[`Cards > given various card structures > mdx: should parse when the code is in one line 1`] = `
+
+
+
+
+
+ First
+
+ Content
+
+
+
+
+
+ Second
+
+ More
+
+
+
+
+`;
+
+exports[`Cards > given various card structures > mdxish: should parse when the code is in one line 1`] = `
+
+
+
+
+
+ First
+
+
+ Content
+
+
+
+ Second
+
+
+ More
+
+
+
+
+
+
+
+
+`;
diff --git a/__tests__/components/utils.ts b/__tests__/components/utils.ts
new file mode 100644
index 000000000..e43277623
--- /dev/null
+++ b/__tests__/components/utils.ts
@@ -0,0 +1,9 @@
+import type { MDXContent } from 'mdx/types';
+
+import { mdxish, renderMdxish } from '../../lib';
+import { execute } from '../helpers';
+
+export const renderingEngines = [
+ ['mdx', (md: string) => execute(md) as MDXContent] as const,
+ ['mdxish', (md: string) => renderMdxish(mdxish(md)).default as MDXContent] as const,
+];
diff --git a/docs/custom-components.mdx b/docs/custom-components.mdx
new file mode 100644
index 000000000..d9be83ab2
--- /dev/null
+++ b/docs/custom-components.mdx
@@ -0,0 +1,55 @@
+## Custom Components
+
+This page showcases all the custom components registered in the sandbox.
+
+### Demo
+
+The `Demo` component renders simple markdown content:
+
+
+ First, install the dependencies.
+ Then, configure your project.
+ Finally, deploy your app.
+
+
+### Dark Mode
+
+The `DarkMode` component lets you toggle between light and dark themes:
+
+Hello from a snake_case component!
diff --git a/example/Doc.tsx b/example/Doc.tsx
index f45de1c6c..a3bc9d975 100644
--- a/example/Doc.tsx
+++ b/example/Doc.tsx
@@ -19,7 +19,8 @@ Object.entries(components).forEach(async ([tag, body]) => {
executedComponents[tag] = mod;
Object.keys(mod).forEach(subTag => {
if (['toc', 'Toc', 'default', 'stylesheet'].includes(subTag)) return;
-
+ // This is add the sub components to the executedComponents object and mdxish
+ executedComponents[subTag] = { default: mod[subTag], Toc: null, toc: [] };
componentsByExport[subTag] = body;
});
});
@@ -162,14 +163,14 @@ const Doc = () => {
try {
const sanitized = await sanitize('mdxish');
if (sanitized === null) return;
- const tree = mdx.mdxish(sanitized, { variables, newEditorTypes });
- const vdom = mdx.renderMdxish(tree, { terms, variables });
+ const tree = mdx.mdxish(sanitized, { components: executedComponents, variables, newEditorTypes, useTailwind: true});
+ const vdom = mdx.renderMdxish(tree, { components: executedComponents, terms, variables, useTailwind: true });
setMdxishError(null);
setMdxishResult(vdom);
if (showAst) {
setMdxishHast(tree);
try {
- const { processor, parserReadyContent } = mdx.mdxishAstProcessor(sanitized, { variables, newEditorTypes });
+ const { processor, parserReadyContent } = mdx.mdxishAstProcessor(sanitized, { components: executedComponents, variables, newEditorTypes });
setMdxishMdast(processor.runSync(processor.parse(parserReadyContent)));
} catch {
setMdxishMdast(null);
diff --git a/example/components.ts b/example/components.ts
index 9acd8c6e3..199807126 100644
--- a/example/components.ts
+++ b/example/components.ts
@@ -66,6 +66,13 @@ export const DarkMode = () => {
)
}
`,
+ Snake_case_component: `
+export const Snake_case_component = ({ children }) => {
+ return {children};
+};
+
+Snake case component
+ `,
};
export default components;
diff --git a/example/docs.ts b/example/docs.ts
index 6f7f8bfac..f38fce778 100644
--- a/example/docs.ts
+++ b/example/docs.ts
@@ -11,6 +11,7 @@ import varsTest from '../__tests__/fixtures/variable-tests.md';
import builtInComponents from '../docs/built-in-components.mdx';
import callouts from '../docs/callouts.md';
import codeBlocks from '../docs/code-blocks.md';
+import customComponents from '../docs/custom-components.mdx';
import embeds from '../docs/embeds.md';
import features from '../docs/features.md';
import gettingStarted from '../docs/getting-started.md';
@@ -30,6 +31,7 @@ const fixtures = Object.entries({
childTests,
codeBlockTests,
codeBlocks,
+ customComponents,
embeds,
exportTests,
features,