>");'],
25 | };
26 |
27 | const { container } = render({'console.log("hi");'});
37 | const btn = screen.getByRole('button');
38 |
39 | expect(btn.parentNode?.nodeName.toLowerCase()).not.toBe('code');
40 | });
41 |
42 | it.skip('allows undefined children?!', () => {
43 | const { container } = render( tags
14 | // which React was not happy about
15 | let stderrSpy: ReturnType;
16 | let consoleErrorSpy: ReturnType;
17 |
18 | beforeAll(() => {
19 | stderrSpy = vi.spyOn(process.stderr, 'write').mockImplementation(() => true);
20 | consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
21 | });
22 |
23 | afterEach(() => {
24 | stderrSpy.mockRestore();
25 | consoleErrorSpy.mockRestore();
26 | });
27 |
28 | it('renders a glossary item without console errors', () => {
29 | const md = `The term exogenous should show a tooltip on hover.
30 | `;
31 | const tree = mdxish(md);
32 | const mod = renderMdxish(tree);
33 | render(Link ';
13 | const result = preprocessJSXExpressions(content, context);
14 |
15 | expect(result).toContain('href="https://example.com"');
16 | expect(result).toContain('id="123"');
17 | expect(result).toContain('active="true"');
18 | expect(result).not.toContain('href={baseUrl}');
19 | expect(result).not.toContain('id={userId}');
20 | expect(result).not.toContain('active={isActive}');
21 | });
22 |
23 | it.each([
24 | [true, '{"b":1}'],
25 | [false, '{"c":2}'],
26 | ])('should handle nested dictionary attributes when a is %s', (a, expectedJson) => {
27 | const context = { a };
28 |
29 | const content = 'Link
';
30 | const result = preprocessJSXExpressions(content, context);
31 |
32 | expect(result).toContain(`foo='${expectedJson}'`);
33 | expect(result).not.toContain('foo={a ? {b: 1} : {c: 2}}');
34 | });
35 | });
36 | });
37 |
--------------------------------------------------------------------------------
/lib/mdx.ts:
--------------------------------------------------------------------------------
1 | import type { Root as HastRoot } from 'hast';
2 | import type { Root as MdastRoot } from 'mdast';
3 | import type { PluggableList } from 'unified';
4 | import type { VFile } from 'vfile';
5 |
6 | import rehypeRemark from 'rehype-remark';
7 | import remarkGfm from 'remark-gfm';
8 | import remarkMdx from 'remark-mdx';
9 | import remarkStringify from 'remark-stringify';
10 | import { unified } from 'unified';
11 |
12 | import compilers from '../processor/compile';
13 | import { compatabilityTransfomer, divTransformer, readmeToMdx, tablesToJsx } from '../processor/transform';
14 | import { escapePipesInTables } from '../processor/transform/escape-pipes-in-tables';
15 |
16 | interface Opts {
17 | file?: VFile | string;
18 | hast?: boolean;
19 | remarkTransformers?: PluggableList;
20 | }
21 |
22 | export const mdx = (
23 | tree: HastRoot | MdastRoot,
24 | { hast = false, remarkTransformers = [], file, ...opts }: Opts = {},
25 | ) => {
26 | const processor = unified()
27 | .use(hast ? rehypeRemark : undefined)
28 | .use(remarkMdx)
29 | .use(remarkGfm)
30 | .use(remarkTransformers)
31 | .use(divTransformer)
32 | .use(readmeToMdx)
33 | .use(tablesToJsx)
34 | .use(compatabilityTransfomer)
35 | .use(escapePipesInTables)
36 | .use(compilers)
37 | .use(remarkStringify, opts);
38 |
39 | // @ts-expect-error - @todo: coerce the processor and tree to the correct
40 | // type depending on the value of hast
41 | return processor.stringify(processor.runSync(tree, file));
42 | };
43 |
44 | export default mdx;
45 |
--------------------------------------------------------------------------------
/processor/transform/div.ts:
--------------------------------------------------------------------------------
1 | import type { Recipe } from '../../types';
2 | import type { Node, Parent } from 'mdast';
3 | import type { Transform } from 'mdast-util-from-markdown';
4 |
5 | import { visit } from 'unist-util-visit';
6 |
7 | import { NodeTypes } from '../../enums';
8 |
9 | // This transformer has been necessary for migrating legacy markdown files
10 | // where tutorial tiles were wrapped in a div. It also provides a fallback for legacy magic blocks that were never fully supported:
11 | // [block:custom-block]
12 | // { ... }
13 | // [/block]
14 | // This transformer runs before the readme-to-mdx transformer which reshapes the tutorial tile node
15 | // to the Recipe component
16 | const divTransformer = (): Transform => tree => {
17 | visit(tree, 'div', (node: Node, index, parent: Parent) => {
18 | const type = node.data?.hName;
19 | switch (type) {
20 | // Check if the div is a tutorial-tile in disguise
21 | case NodeTypes.tutorialTile:
22 | {
23 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
24 | const { hName, hProperties, ...rest } = node.data;
25 | const tile = {
26 | ...rest,
27 | type: NodeTypes.recipe,
28 | } as Recipe;
29 | parent.children.splice(index, 1, tile);
30 | }
31 | break;
32 | // idk what this is and/or just make it a paragraph
33 | default:
34 | node.type = type || 'paragraph';
35 | }
36 | });
37 |
38 | return tree;
39 | };
40 |
41 | export default divTransformer;
42 |
--------------------------------------------------------------------------------
/lib/owlmoji.ts:
--------------------------------------------------------------------------------
1 | import type { Gemoji } from 'gemoji';
2 |
3 | import { gemoji, nameToEmoji } from 'gemoji';
4 |
5 | export const owlmoji = [
6 | {
7 | emoji: '', // This `emoji` property doesn't get consumed, but is required for type consistency
8 | names: ['owlbert'],
9 | tags: ['owlbert'],
10 | description: 'an owlbert for any occasion',
11 | category: 'ReadMe',
12 | },
13 | {
14 | emoji: '',
15 | names: ['owlbert-books'],
16 | tags: ['owlbert'],
17 | description: 'owlbert carrying books',
18 | category: 'ReadMe',
19 | },
20 | {
21 | emoji: '',
22 | names: ['owlbert-mask'],
23 | tags: ['owlbert'],
24 | description: 'owlbert with a respirator',
25 | category: 'ReadMe',
26 | },
27 | {
28 | emoji: '',
29 | names: ['owlbert-reading'],
30 | tags: ['owlbert'],
31 | description: 'owlbert reading',
32 | category: 'ReadMe',
33 | },
34 | {
35 | emoji: '',
36 | names: ['owlbert-thinking'],
37 | tags: ['owlbert'],
38 | description: 'owlbert thinking',
39 | category: 'ReadMe',
40 | },
41 | ] satisfies Gemoji[];
42 |
43 | const owlmojiNames = owlmoji.flatMap(emoji => emoji.names);
44 |
45 | export default class Owlmoji {
46 | static kind = (name: string) => {
47 | if (name in nameToEmoji) return 'gemoji';
48 | else if (name.match(/^fa-/)) return 'fontawesome';
49 | else if (owlmojiNames.includes(name)) return 'owlmoji';
50 | return null;
51 | };
52 |
53 | static nameToEmoji = nameToEmoji;
54 |
55 | static owlmoji = gemoji.concat(owlmoji);
56 | }
57 |
--------------------------------------------------------------------------------
/__tests__/parsers/tables.test.ts:
--------------------------------------------------------------------------------
1 | import { removePosition } from 'unist-util-remove-position';
2 |
3 | import { mdast } from '../../index';
4 |
5 | describe('table parser', () => {
6 | describe('unescaping pipes', () => {
7 | it('parses tables with pipes in inline code', () => {
8 | const doc = `
9 | | | |
10 | | :----------- | :- |
11 | | \`foo \\| bar\` | |
12 | `;
13 | const ast = mdast(doc);
14 | removePosition(ast, { force: true });
15 |
16 | expect(ast).toMatchSnapshot();
17 | });
18 |
19 | it('parses tables with pipes', () => {
20 | const doc = `
21 | | | |
22 | | :--------- | :- |
23 | | foo \\| bar | |
24 | `;
25 | const ast = mdast(doc);
26 | removePosition(ast, { force: true });
27 |
28 | expect(ast).toMatchSnapshot();
29 | });
30 |
31 | it('parses jsx tables with pipes in inline code', () => {
32 | const doc = `
33 |
34 |
35 |
36 |
37 | force
38 | jsx
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 | \`foo | bar\`
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 | `;
60 |
61 | const ast = mdast(doc);
62 | removePosition(ast, { force: true });
63 |
64 | expect(ast).toMatchSnapshot();
65 | });
66 | });
67 | });
68 |
--------------------------------------------------------------------------------
/docs/syntax-extensions.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Flavored Syntax
3 | category:
4 | uri: uri-that-does-not-map-to-5fdf7610134322007389a6ec
5 | content:
6 | excerpt: Specs and examples of ReadMe's (restrained) Markdown syntax extensions.
7 | privacy:
8 | view: public
9 | ---
10 | Custom Blocks
11 | ---
12 |
13 | ### Code Tabs
14 |
15 | A tabbed interface for displaying multiple code blocks. These are written nearly identically to a series of vanilla markdown code snippets, except for their distinct *lack* of an additional line break separating each subsequent block. [**Syntax & examples**.](doc:code-blocks)
16 |
17 | ### Callouts
18 |
19 | Callouts are very nearly equivalent to standard Markdown block quotes in their syntax, other than some specific requirements on their content: To be considered a “callout”, the block quote must start with an initial emoji, which is used to determine the callout's theme. [**Syntax & examples**.](doc:callouts)
20 |
21 | ### Embeds
22 |
23 | Embedded content is written as a simple Markdown link, with a title of "@embed". [**Syntax & examples**.](doc:embeds)
24 |
25 | Standard Markdown
26 | ---
27 |
28 | The engine also supports all standard markdown constructs, as well as CommonMark options, and most GitHub syntax extensions.
29 |
30 | - [**Tables**](doc:tables)
31 | - [**Lists**](doc:lists)
32 | - [**Headings**](doc:headings)
33 | - [**Images**](doc:images)
34 | - **Decorations** (link, strong, and emphasis tags, etc.)
35 |
--------------------------------------------------------------------------------
/components/Cards/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import './style.scss';
4 |
5 | interface CardProps
6 | extends React.PropsWithChildren<{
7 | badge?: string;
8 | href?: string;
9 | icon?: string;
10 | iconColor?: string;
11 | kind?: 'card' | 'tile';
12 | target?: string;
13 | title?: string;
14 | }> {}
15 |
16 | export const Card = ({ badge, children, href, kind = 'card', icon, iconColor, target, title }: CardProps) => {
17 | const Tag = href ? 'a' : 'div';
18 |
19 | return (
20 |
21 | {icon &&
23 | {title && (
24 |
25 | {title}
26 | {badge && {badge} }
27 | {href &&
29 | )}
30 | {children}
31 |
33 | );
34 | };
35 |
36 | interface CardsGridProps extends React.PropsWithChildren<{ cardWidth?: string, columns?: number | string }> {}
37 |
38 | const CardsGrid = ({ cardWidth = '200px', columns = 'auto-fit', children }: CardsGridProps) => {
39 |
40 | return (
41 |
42 | {children}
43 |
44 | );
45 | };
46 |
47 | export default CardsGrid;
48 |
--------------------------------------------------------------------------------
/__tests__/lib/__snapshots__/stripComments.test.ts.snap:
--------------------------------------------------------------------------------
1 | // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2 |
3 | exports[`removeComments > preserves magic block indentation 1`] = `
4 | "* foo
5 | * foo
6 | [block:html]
7 | {
8 | "html": "Hoo ha "
9 | }
10 | [/block]"
11 | `;
12 |
13 | exports[`removeComments > removes HTML comments 1`] = `
14 | "Hello
15 |
16 | Beep boop bop
17 | Bop
18 | [block:html]
19 | {
20 | "html": "Magic blocks should not have comments removed.
21 | "
22 | }
23 | [/block]
24 |
25 |
29 | Code blocks should not have comments removed.
30 |
31 |
32 | \`\`\`
33 | [block:image]{ "images": [{ "image": ["https://owlbertsio-resized.s3.amazonaws.com/This-Is-Fine.jpg.full.png", "", "" ], "align": "center" } ]}[/block]
34 |
35 | \`\`
36 |
37 |
68 | Hello
69 |
"
70 | }
71 | [/block]
72 |
73 | How are you?"
74 | `;
75 |
--------------------------------------------------------------------------------
/scripts/perf-test.js:
--------------------------------------------------------------------------------
1 | const childProcess = require('child_process');
2 | const { Blob } = require('node:buffer');
3 |
4 | const rdmd = require('..');
5 |
6 | const mdBuffer = childProcess.execSync('cat ./docs/*', { encoding: 'utf8' });
7 |
8 | const createDoc = bytes => {
9 | let doc = '';
10 |
11 | while (new Blob([doc]).size < bytes) {
12 | const start = Math.ceil(Math.random() * mdBuffer.length);
13 | doc += mdBuffer.slice(start, start + bytes);
14 | }
15 |
16 | return doc;
17 | };
18 |
19 | // https://stackoverflow.com/a/14919494
20 | function humanFileSize(bytes, si = false, dp = 1) {
21 | const thresh = si ? 1000 : 1024;
22 |
23 | if (Math.abs(bytes) < thresh) {
24 | return `${bytes} B`;
25 | }
26 |
27 | const units = si
28 | ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
29 | : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
30 | let u = -1;
31 | const r = 10 ** dp;
32 |
33 | do {
34 | // eslint-disable-next-line no-param-reassign
35 | bytes /= thresh;
36 | // eslint-disable-next-line no-plusplus
37 | ++u;
38 | } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
39 |
40 | return `${bytes.toFixed(dp)} ${units[u]}`;
41 | }
42 |
43 | const max = 8;
44 |
45 | console.log('n : string size : duration');
46 |
47 | new Array(max).fill(0).forEach((_, i) => {
48 | const bytes = 10 ** i;
49 | const doc = createDoc(bytes);
50 | const then = Date.now();
51 |
52 | rdmd.mdast(doc);
53 | const duration = Date.now() - then;
54 |
55 | console.log(`${i} : ${humanFileSize(new Blob([doc]).size)} : ${duration / 1000} s`);
56 | });
57 |
--------------------------------------------------------------------------------
/processor/transform/handle-missing-components.ts:
--------------------------------------------------------------------------------
1 | import type { CompileOpts } from '../../lib/compile';
2 | import type { Parents } from 'mdast';
3 | import type { Transform } from 'mdast-util-from-markdown';
4 | import type { MdxJsxFlowElement, MdxJsxTextElement } from 'mdast-util-mdx';
5 |
6 | import { visit } from 'unist-util-visit';
7 |
8 | import * as Components from '../../components';
9 | import mdast from '../../lib/mdast';
10 | import { getExports, isMDXElement } from '../utils';
11 |
12 | type HandleMissingComponentsProps = Pick;
13 |
14 | const handleMissingComponents =
15 | ({ components, missingComponents }: HandleMissingComponentsProps): Transform =>
16 | tree => {
17 | const allComponents = new Set([
18 | ...getExports(tree),
19 | ...Object.keys(Components),
20 | ...Object.keys(components),
21 | ...Object.values(components).flatMap(doc => getExports(mdast(doc))),
22 | 'Variable',
23 | 'TutorialTile',
24 | ]);
25 |
26 | visit(
27 | tree,
28 | isMDXElement,
29 | (node: MdxJsxFlowElement | MdxJsxTextElement, index: number, parent: Parents) => {
30 | if (allComponents.has(node.name) || node.name.match(/^[a-z]/)) return;
31 |
32 | if (missingComponents === 'throw') {
33 | throw new Error(
34 | `Expected component \`${node.name}\` to be defined: you likely forgot to import, pass, or provide it.`,
35 | );
36 | }
37 |
38 | parent.children.splice(index, 1);
39 | },
40 | true,
41 | );
42 | };
43 |
44 | export default handleMissingComponents;
45 |
--------------------------------------------------------------------------------
/docs/headings.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Headings
3 | category:
4 | uri: uri-that-does-not-map-to-5fdf7610134322007389a6ed
5 | privacy:
6 | view: public
7 | ---
8 |
9 | ## Examples
10 |
11 | > ### Heading Block 3
12 | >
13 | > #### Heading Block 4
14 | >
15 | > ##### Heading Block 5
16 | >
17 | > ###### Heading Block 6
18 |
19 | ## Edge Cases
20 |
21 | ### Heading Styles
22 |
23 | ####Compact Notation
24 |
25 | Headers are denoted using a space-separated `#` prefix. While the space is technically required in most standard Markdown implementations, some processors allow for a compact notation as well. ReadMe supports this style, so writing this
26 |
27 | ```
28 | ###A Valid Heading
29 |
30 | Lorem ipsum dolor etc.
31 | ```
32 |
33 | > 🛑
34 | > Compact headings must be followed by two line breaks before the following block.
35 |
36 | #### ATX-Style Notation ####
37 |
38 | If you prefer, you can "wrap" headers with hashes rather than simply prefixing them:
39 |
40 | ```
41 | ## ATX Headings are Valid ##
42 | ```
43 |
44 | #### Underline Notation
45 |
46 | For top-level headings, the underline notation is valid:
47 |
48 | ```
49 | Heading One
50 | ===========
51 |
52 | Heading Two
53 | ---
54 | ```
55 |
56 | ### Incremented Anchors
57 |
58 | Occasionally, a single doc might contain multiple headings with the same text, which can cause the generated anchor links to conflict. ReadMe's new markdown processor normalizes heading anchors by auto-incrementing similar heading's IDs. Try it out by clicking on this section header _or_ the following sub-section title:
59 |
60 | #### Incremented Heading Anchors
61 |
62 | #### Incremented Heading Anchors
63 |
--------------------------------------------------------------------------------
/processor/transform/index.ts:
--------------------------------------------------------------------------------
1 | import calloutTransformer from './callouts';
2 | import codeTabsTransformer from './code-tabs';
3 | import compatabilityTransfomer from './compatability';
4 | import divTransformer from './div';
5 | import embedTransformer from './embeds';
6 | import gemojiTransformer from './gemoji+';
7 | import handleMissingComponents from './handle-missing-components';
8 | import imageTransformer from './images';
9 | import injectComponents from './inject-components';
10 | import mdxToHast from './mdx-to-hast';
11 | import mdxishTables from './mdxish/mdxish-tables';
12 | import mermaidTransformer from './mermaid';
13 | import readmeComponentsTransformer from './readme-components';
14 | import readmeToMdx from './readme-to-mdx';
15 | import tablesToJsx from './tables-to-jsx';
16 | import tailwindTransformer from './tailwind';
17 | import validateMCPIntro from './validate-mcpintro';
18 | import variablesTransformer from './variables';
19 |
20 | export {
21 | compatabilityTransfomer,
22 | divTransformer,
23 | injectComponents,
24 | mdxToHast,
25 | mdxishTables,
26 | mermaidTransformer,
27 | readmeComponentsTransformer,
28 | readmeToMdx,
29 | tablesToJsx,
30 | tailwindTransformer,
31 | handleMissingComponents,
32 | validateMCPIntro,
33 | variablesTransformer,
34 | };
35 |
36 | export const defaultTransforms = {
37 | calloutTransformer,
38 | codeTabsTransformer,
39 | embedTransformer,
40 | imageTransformer,
41 | gemojiTransformer,
42 | };
43 |
44 | export const mdxishTransformers = [calloutTransformer, codeTabsTransformer, imageTransformer, gemojiTransformer];
45 |
46 | export default Object.values(defaultTransforms);
47 |
--------------------------------------------------------------------------------
/__tests__/lib/mdast/variables/out.json:
--------------------------------------------------------------------------------
1 | {
2 | "children": [
3 | {
4 | "children": [
5 | {
6 | "position": {
7 | "end": {
8 | "column": 8,
9 | "line": 1,
10 | "offset": 7
11 | },
12 | "start": {
13 | "column": 1,
14 | "line": 1,
15 | "offset": 0
16 | }
17 | },
18 | "type": "text",
19 | "value": "Hello, "
20 | },
21 | {
22 | "data": {
23 | "hName": "Variable",
24 | "hProperties": {
25 | "name": "name"
26 | }
27 | },
28 | "position": {
29 | "end": {
30 | "column": 19,
31 | "line": 1,
32 | "offset": 18
33 | },
34 | "start": {
35 | "column": 8,
36 | "line": 1,
37 | "offset": 7
38 | }
39 | },
40 | "type": "readme-variable",
41 | "value": "{user.name}"
42 | }
43 | ],
44 | "position": {
45 | "end": {
46 | "column": 19,
47 | "line": 1,
48 | "offset": 18
49 | },
50 | "start": {
51 | "column": 1,
52 | "line": 1,
53 | "offset": 0
54 | }
55 | },
56 | "type": "paragraph"
57 | }
58 | ],
59 | "position": {
60 | "end": {
61 | "column": 1,
62 | "line": 2,
63 | "offset": 19
64 | },
65 | "start": {
66 | "column": 1,
67 | "line": 1,
68 | "offset": 0
69 | }
70 | },
71 | "type": "root"
72 | }
73 |
--------------------------------------------------------------------------------
/__tests__/migration/html-comments.test.ts:
--------------------------------------------------------------------------------
1 | import { migrate } from '../helpers';
2 |
3 | describe('migrating html comments', () => {
4 | it('migrates escaped html comments', () => {
5 | const md = `
6 |
22 | `;
23 |
24 | const mdx = migrate(md);
25 | expect(mdx).toMatchInlineSnapshot(`
26 | "{/*
27 |
28 |
29 |
30 | ## Walkthrough
31 |
32 | {\`
33 |
34 | \`}
35 |
36 | cBEYONData.com "
31 | }
32 | ]
33 | }
34 | [/block]
35 |
36 | [block:callout]
37 | {
38 | "type": "danger",
39 | "title": "CONFIDENTIAL",
40 | "body": "*This documentation is confidential and proprietary information of cBEYONData LLC.* "
41 | }
42 | [/block]
43 | `;
44 | const mdx = migrate(md);
45 | expect(mdx).toMatchInlineSnapshot(`
46 | "## About cBEYONData
47 |
48 | [ Overview of cBEYONData ](/docs/about-cbeyondata)
49 |
50 | ## About CFO Control Control Tower
51 |
52 | [Overview of CFO Control Tower](https://docs.cfocontroltower.com/docs/about-cfo-control-tower)
53 |
54 | > ❗️ CONFIDENTIAL
55 | >
56 | > *This documentation is confidential and proprietary information of cBEYONData LLC.*
57 | "
58 | `);
59 | });
60 | });
61 |
--------------------------------------------------------------------------------
/processor/transform/gemoji+.ts:
--------------------------------------------------------------------------------
1 | import type { FaEmoji, Gemoji } from '../../types';
2 | import type { Image, Root } from 'mdast';
3 |
4 | import { findAndReplace } from 'mdast-util-find-and-replace';
5 |
6 | import { NodeTypes } from '../../enums';
7 | import Owlmoji from '../../lib/owlmoji';
8 |
9 | export const regex = /(?<=^|\s):(?\+1|[-\w]+):/g;
10 |
11 | const gemojiReplacer = (_, name: string) => {
12 | switch (Owlmoji.kind(name)) {
13 | case 'gemoji': {
14 | const node: Gemoji = {
15 | type: NodeTypes.emoji,
16 | value: Owlmoji.nameToEmoji[name],
17 | name,
18 | };
19 |
20 | return node;
21 | }
22 | case 'fontawesome': {
23 | const node: FaEmoji = {
24 | type: NodeTypes.i,
25 | value: name,
26 | data: {
27 | hName: 'i',
28 | hProperties: {
29 | className: ['fa-regular', name],
30 | },
31 | },
32 | };
33 |
34 | return node;
35 | }
36 | case 'owlmoji': {
37 | const node: Image = {
38 | type: 'image',
39 | title: `:${name}:`,
40 | alt: `:${name}:`,
41 | url: `/public/img/emojis/${name}.png`,
42 | data: {
43 | hProperties: {
44 | className: 'emoji',
45 | align: 'absmiddle',
46 | height: '20',
47 | width: '20',
48 | },
49 | },
50 | };
51 |
52 | return node;
53 | }
54 | default:
55 | return false;
56 | }
57 | };
58 |
59 | const gemojiTransformer = () => (tree: Root) => {
60 | findAndReplace(tree, [regex, gemojiReplacer]);
61 |
62 | return tree;
63 | };
64 |
65 | export default gemojiTransformer;
66 |
--------------------------------------------------------------------------------
/__tests__/transformers/mdxish-component-blocks.test.ts:
--------------------------------------------------------------------------------
1 | import type { Element } from 'hast';
2 |
3 | import { mdxish } from '../../index';
4 | import { parseAttributes } from '../../processor/transform/mdxish/mdxish-component-blocks';
5 |
6 | describe('mdxish-component-blocks', () => {
7 | describe('parseAttributes', () => {
8 | it('should parse normal key-value attributes', () => {
9 | const attrString = 'theme="info"';
10 | const result = parseAttributes(attrString);
11 |
12 | expect(result).toHaveLength(1);
13 | expect(result[0]).toStrictEqual({
14 | type: 'mdxJsxAttribute',
15 | name: 'theme',
16 | value: 'info',
17 | });
18 | });
19 |
20 | it('should parse boolean attributes without values', () => {
21 | const attrString = 'theme="info" empty';
22 | const result = parseAttributes(attrString);
23 |
24 | expect(result).toHaveLength(2);
25 | expect(result[0]).toStrictEqual({
26 | type: 'mdxJsxAttribute',
27 | name: 'theme',
28 | value: 'info',
29 | });
30 | expect(result[1]).toStrictEqual({
31 | type: 'mdxJsxAttribute',
32 | name: 'empty',
33 | value: null,
34 | });
35 | });
36 | });
37 |
38 | it('should parse Cards tag with columns attribute using mdxish', () => {
39 | const markdown = 'acme );
10 |
11 | const trigger = container.querySelector('.GlossaryItem-trigger');
12 | expect(trigger).toHaveTextContent(term);
13 | if (trigger) {
14 | fireEvent.mouseEnter(trigger);
15 | }
16 | const tooltipContent = screen.getByText(definition, { exact: false });
17 | expect(tooltipContent).toHaveTextContent(`${term} - ${definition}`);
18 | });
19 |
20 | test('should be case insensitive', () => {
21 | const term = 'aCme';
22 | const definition = 'This is a definition';
23 | const { container } = render(acme );
24 |
25 | const trigger = container.querySelector('.GlossaryItem-trigger');
26 | expect(trigger).toHaveTextContent('acme');
27 | if (trigger) {
28 | fireEvent.mouseEnter(trigger);
29 | }
30 | const tooltipContent = screen.getByText(definition, { exact: false });
31 | expect(tooltipContent).toHaveTextContent(`${term} - ${definition}`);
32 | });
33 |
34 | test('should output the term if the definition does not exist', () => {
35 | const term = 'something';
36 | const { container } = render({term} );
37 |
38 | expect(container.querySelector('.GlossaryItem-trigger')).not.toBeInTheDocument();
39 | expect(container.querySelector('span')).toHaveTextContent(term);
40 | });
41 |
--------------------------------------------------------------------------------
/__tests__/components/Image.test.tsx:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import React from 'react';
3 |
4 | import Image from '../../components/Image';
5 |
6 | describe('Image', () => {
7 | it('should render', () => {
8 | render(
40 |
43 |
53 | A pizza bro
54 |
55 |
56 |
57 | `);
58 | });
59 | });
60 |
--------------------------------------------------------------------------------
/__tests__/fixtures/code-block-tests.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Code Block Tests'
3 | category: 5fdf9fc9c2a7ef443e937315
4 | hidden: true
5 | ---
6 |
7 | ## Basics
8 |
9 | ### Simple
10 |
11 | ```php
12 | , props),
31 | Toc: null,
32 | toc: [],
33 | } satisfies RMDXModule;
34 |
35 | components[name] = wrappedModule;
36 | });
37 |
38 | return components;
39 | }
40 |
--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
1 | -include .env
2 |
3 | .DEFAULT_GOAL := help
4 | .PHONY: help
5 | .EXPORT_ALL_VARIABLES:
6 |
7 | DOCKER_WORKSPACE := "/markdown"
8 | MOUNTS = --volume ${PWD}:${DOCKER_WORKSPACE} \
9 | --volume ${DOCKER_WORKSPACE}/node_modules
10 |
11 | build:
12 | docker build -t markdown $(dockerfile) --build-arg REACT_VERSION=${REACT_VERSION} .
13 |
14 | # This lets us call `make run test.browser`. Make expects cmdline args
15 | # to be targets. So this creates noop targets out of args. Copied from
16 | # SO.
17 | ifeq (run,$(firstword $(MAKECMDGOALS)))
18 | RUN_ARGS := $(wordlist 2,$(words $(MAKECMDGOALS)),$(MAKECMDGOALS))
19 | $(eval $(RUN_ARGS):;@:)
20 | endif
21 |
22 | run: build ## Run npm scripts in a docker container. (default: make test.browser)
23 | docker run -it --rm ${MOUNTS} markdown $(RUN_ARGS)
24 |
25 | ci: build ## CI runner for `npm run test.browser -- --ci`
26 | # We don't mount root because CI doesn't care about live changes,
27 | # except for grabbing the snapshot diffs, so we mount __tests__.
28 | # Mounting root would break `make emoji` in the Dockerfile.
29 | docker run -i \
30 | --volume ${PWD}/__tests__:${DOCKER_WORKSPACE}/__tests__ \
31 | --env NODE_VERSION=${NODE_VERSION} \
32 | markdown test.browser -- --ci
33 |
34 | # I would like this to be `updateSnapshots` but I think it's better to
35 | # be consistent with jest.
36 | updateSnapshot: build ## Run `npm run test.browser -- --updateSnapshot`
37 | docker run -i --rm ${MOUNTS} markdown test.browser -- --updateSnapshot
38 |
39 | shell: build ## Docker shell.
40 | docker run -it --rm ${MOUNTS} --entrypoint /bin/bash markdown
41 |
42 | help: ## Show this help.
43 | @grep -E '^[a-zA-Z._-]+:.*?## .*$$' $(MAKEFILE_LIST) | sort | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-30s\033[0m %s\n", $$1, $$2}'
44 |
--------------------------------------------------------------------------------
/__tests__/lib/mdast/images/inline/out.json:
--------------------------------------------------------------------------------
1 | {
2 | "type": "root",
3 | "children": [
4 | {
5 | "type": "paragraph",
6 | "children": [
7 | {
8 | "type": "text",
9 | "value": "This should work "
10 | },
11 | {
12 | "align": "left",
13 | "border": true,
14 | "src": "https://media.giphy.com/media/3o7TKz9bX9v6hZ8NSA/giphy.gif",
15 | "width": "50%",
16 | "alt": "",
17 | "children": [
18 | {
19 | "type": "text",
20 | "value": "Captioned"
21 | }
22 | ],
23 | "title": null,
24 | "type": "image-block",
25 | "data": {
26 | "hName": "img",
27 | "hProperties": {
28 | "align": "left",
29 | "border": true,
30 | "src": "https://media.giphy.com/media/3o7TKz9bX9v6hZ8NSA/giphy.gif",
31 | "width": "50%",
32 | "alt": "",
33 | "children": [
34 | {
35 | "type": "text",
36 | "value": "Captioned",
37 | "position": {
38 | "start": {
39 | "line": 1,
40 | "column": 129,
41 | "offset": 128
42 | },
43 | "end": {
44 | "line": 1,
45 | "column": 138,
46 | "offset": 137
47 | }
48 | }
49 | }
50 | ],
51 | "title": null
52 | }
53 | }
54 | },
55 | {
56 | "type": "text",
57 | "value": "."
58 | }
59 | ]
60 | }
61 | ]
62 | }
63 |
--------------------------------------------------------------------------------
/__tests__/lib/mdast/__snapshots__/anchor.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2 |
3 | exports[`convert anchor tag > converts anchor tag to link node 1`] = `
4 | {
5 | "children": [
6 | {
7 | "children": [
8 | {
9 | "children": [
10 | {
11 | "position": {
12 | "end": {
13 | "column": 41,
14 | "line": 2,
15 | "offset": 41,
16 | },
17 | "start": {
18 | "column": 35,
19 | "line": 2,
20 | "offset": 35,
21 | },
22 | },
23 | "type": "text",
24 | "value": "ReadMe",
25 | },
26 | ],
27 | "position": {
28 | "end": {
29 | "column": 50,
30 | "line": 2,
31 | "offset": 50,
32 | },
33 | "start": {
34 | "column": 1,
35 | "line": 2,
36 | "offset": 1,
37 | },
38 | },
39 | "type": "link",
40 | "url": "https://readme.com",
41 | },
42 | ],
43 | "position": {
44 | "end": {
45 | "column": 50,
46 | "line": 2,
47 | "offset": 50,
48 | },
49 | "start": {
50 | "column": 1,
51 | "line": 2,
52 | "offset": 1,
53 | },
54 | },
55 | "type": "paragraph",
56 | },
57 | ],
58 | "position": {
59 | "end": {
60 | "column": 5,
61 | "line": 3,
62 | "offset": 55,
63 | },
64 | "start": {
65 | "column": 1,
66 | "line": 1,
67 | "offset": 0,
68 | },
69 | },
70 | "type": "root",
71 | }
72 | `;
73 |
--------------------------------------------------------------------------------
/processor/transform/tailwind.tsx:
--------------------------------------------------------------------------------
1 | import type { PhrasingContent, BlockContent, Root } from 'mdast';
2 | import type { MdxJsxFlowElement, MdxJsxTextElement } from 'mdast-util-mdx';
3 | import type { Plugin } from 'unified';
4 | import type { VFile } from 'vfile';
5 |
6 | import { visit, SKIP } from 'unist-util-visit';
7 |
8 | import { isMDXElement, toAttributes, getExports } from '../utils';
9 |
10 | interface TailwindRootOptions {
11 | components: Record;
12 | parseRoot?: boolean;
13 | }
14 |
15 | type Visitor =
16 | | ((node: MdxJsxFlowElement, index: number, parent: BlockContent) => undefined | void)
17 | | ((node: MdxJsxTextElement, index: number, parent: PhrasingContent) => undefined | void);
18 |
19 | const injectTailwindRoot =
20 | ({ components = {} }): Visitor =>
21 | (node, index, parent) => {
22 | if (!('name' in node)) return;
23 | if (!(node.name in components)) return;
24 | if (!('children' in parent)) return;
25 |
26 | const attrs = {
27 | flow: node.type === 'mdxJsxFlowElement',
28 | };
29 |
30 | const wrapper = {
31 | type: node.type,
32 | name: 'TailwindRoot',
33 | attributes: toAttributes(attrs),
34 | children: [node],
35 | };
36 |
37 | parent.children.splice(index, 1, wrapper);
38 |
39 | // eslint-disable-next-line consistent-return
40 | return SKIP;
41 | };
42 |
43 | const tailwind: Plugin<[TailwindRootOptions]> =
44 | ({ components }) =>
45 | (tree: Root, vfile: VFile) => {
46 | const localComponents = getExports(tree).reduce((acc, name) => {
47 | acc[name] = String(vfile);
48 | return acc;
49 | }, {});
50 |
51 | visit(tree, isMDXElement, injectTailwindRoot({ components: { ...components, ...localComponents } }));
52 |
53 | return tree;
54 | };
55 |
56 | export default tailwind;
57 |
--------------------------------------------------------------------------------
/__tests__/__snapshots__/html-block-parser.test.js.snap:
--------------------------------------------------------------------------------
1 | // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2 |
3 | exports[`Parse html block > parses an html block 1`] = `
4 | {
5 | "children": [
6 | {
7 | "children": [
8 | {
9 | "attributes": [],
10 | "children": [
11 | {
12 | "position": {
13 | "end": {
14 | "column": 21,
15 | "line": 2,
16 | "offset": 21,
17 | },
18 | "start": {
19 | "column": 6,
20 | "line": 2,
21 | "offset": 6,
22 | },
23 | },
24 | "type": "text",
25 | "value": "Some block html",
26 | },
27 | ],
28 | "name": "div",
29 | "position": {
30 | "end": {
31 | "column": 27,
32 | "line": 2,
33 | "offset": 27,
34 | },
35 | "start": {
36 | "column": 1,
37 | "line": 2,
38 | "offset": 1,
39 | },
40 | },
41 | "type": "mdxJsxTextElement",
42 | },
43 | ],
44 | "position": {
45 | "end": {
46 | "column": 27,
47 | "line": 2,
48 | "offset": 27,
49 | },
50 | "start": {
51 | "column": 1,
52 | "line": 2,
53 | "offset": 1,
54 | },
55 | },
56 | "type": "paragraph",
57 | },
58 | ],
59 | "position": {
60 | "end": {
61 | "column": 5,
62 | "line": 3,
63 | "offset": 32,
64 | },
65 | "start": {
66 | "column": 1,
67 | "line": 1,
68 | "offset": 0,
69 | },
70 | },
71 | "type": "root",
72 | }
73 | `;
74 |
--------------------------------------------------------------------------------
/__tests__/lib/render-mdxish/CodeTabs.test.tsx:
--------------------------------------------------------------------------------
1 | import '@testing-library/jest-dom';
2 | import { render } from '@testing-library/react';
3 | import React from 'react';
4 |
5 | import { mdxish, renderMdxish } from '../../../lib';
6 |
7 | describe('code tabs renderer', () => {
8 | describe('given 2 consecutive code blocks', () => {
9 | const cppCode = `#include
10 |
11 | int main(void) {
12 | std::cout << "hello world";
13 | return 0;
14 | }`;
15 | const pythonCode = 'print("hello world")';
16 |
17 | const md = `
18 | \`\`\`cplusplus
19 | ${cppCode}
20 | \`\`\`
21 | \`\`\`python
22 | ${pythonCode}
23 | \`\`\`
24 | `;
25 | const mod = renderMdxish(mdxish(md));
26 |
27 | it('should not error when rendering', () => {
28 | expect(() => render(');
40 | expect(container.textContent).toContain('std::cout << "hello world"');
41 | expect(container.textContent).toContain(pythonCode);
42 | });
43 |
44 | it('should render the buttons with the correct text', () => {
45 | const { container } = render(exogenous ** and **endogenous ** are long words.
31 | ```
32 |
33 | Which expands to: “Both **exogenous ** and **endogenous ** are long words.”
34 |
35 | #### Emoji Shortcodes
36 |
37 | You can use GitHub-style emoji short codes (feat. Owlbert!)
38 |
39 | ```
40 | :sparkles: :owlbert-reading:
41 | ```
42 |
43 | This expands out to: “:sparkles: :owlbert-reading:”
44 |
45 | ## Generative Semantics
46 |
47 | - Markup-based TOC generation.
48 | - Auto-generated [heading anchors](doc:headings#section-incremented-anchors).
49 |
50 | ## Known Issues
51 |
52 | - Variable and glossary term expansions are rendered even when they've been manually escaped by the author.
53 |
--------------------------------------------------------------------------------
/__tests__/migration/html-blocks/index.test.ts:
--------------------------------------------------------------------------------
1 | import fs from 'node:fs';
2 |
3 | import { migrate } from '../../helpers';
4 |
5 | describe('migrating html blocks', () => {
6 | it('correctly escapes back ticks', () => {
7 | const md = `
8 | [block:html]
9 | {
10 | "html": "\`example.com\` "
11 | }
12 | [/block]
13 | `;
14 |
15 | const mdx = migrate(md);
16 | expect(mdx).toMatchInlineSnapshot(`
17 | "{\`
18 | \\\`example.com\\\`
19 | \`}
20 | "
21 | `);
22 | });
23 |
24 | it('does not escape already escaped backticks', () => {
25 | const md = `
26 | [block:html]
27 | {
28 | "html": "${'\\\\`example.com\\\\`'} "
29 | }
30 | [/block]
31 | `;
32 |
33 | const mdx = migrate(md);
34 | expect(mdx).toMatchInlineSnapshot(`
35 | "{\`
36 | \\\\\`example.com\\\\\`
37 | \`}
38 | "
39 | `);
40 | });
41 |
42 | it('does not unescape backslashes', async () => {
43 | const md = fs.readFileSync(`${__dirname}/fixtures/html-block-escapes/in.md`, 'utf-8');
44 |
45 | await expect(migrate(md)).toMatchFileSnapshot(`${__dirname}/fixtures/html-block-escapes/out.mdx`);
46 | });
47 |
48 | it('correctly migrates html with newlines', async () => {
49 | const md = fs.readFileSync(`${__dirname}/fixtures/html-block-escapes-newlines/in.md`, 'utf-8');
50 |
51 | await expect(migrate(md)).toMatchFileSnapshot(`${__dirname}/fixtures/html-block-escapes-newlines/out.mdx`);
52 | });
53 |
54 | it('correctly migrates html with brackets and template literals', async () => {
55 | const md = fs.readFileSync(`${__dirname}/fixtures/html-block-with-brackets/in.md`, 'utf-8');
56 |
57 | await expect(migrate(md)).toMatchFileSnapshot(`${__dirname}/fixtures/html-block-with-brackets/out.mdx`);
58 | });
59 | });
60 |
--------------------------------------------------------------------------------
/example/components.ts:
--------------------------------------------------------------------------------
1 | const components = {
2 | Demo: `
3 | ## This is a Demo Component!
4 |
5 | > 📘 It can render JSX components!
6 | `,
7 | Test: `
8 | export const Test = ({ color = 'thistle' } = {}) => {
9 | return
10 | Hello, World!
11 |
;
12 | };
13 |
14 | export default Test;
15 | `,
16 | MultipleExports: `
17 | export const One = () => "One";
18 |
19 | export const Two = () => "Two";
20 | `,
21 | TailwindRootTest: `
22 | export const StyledComponent = () => {
23 | return
24 | Hello, World!
25 |
;
26 | }
27 | `,
28 | Steps: `
29 | export const Step = ({ children }) => {
30 | return (
31 |
32 |
33 | {children}
34 |
35 |
40 | {props.children}
41 |
42 | `,
43 |
44 | DarkMode: `
45 | import { useState } from 'react';
46 |
47 | export const DarkMode = () => {
48 | const [mode, setMode] = useState('dark');
49 |
50 | return (
51 |
52 |
setMode(mode === 'light' ? 'dark' : 'light')}
55 | style={{ border: 'none' }}
56 | >
57 | Toggle Mode
58 |
59 |
63 | {mode} Mode Component
64 |
65 |
> {
5 | attributes?: Record;
6 | empty?: boolean;
7 | icon?: string;
8 | theme?: string;
9 | }
10 |
11 | export const themes: Record = {
12 | error: 'error',
13 | default: 'default',
14 | info: 'info',
15 | okay: 'okay',
16 | warn: 'warn',
17 | '\uD83D\uDCD8': 'info',
18 | '\uD83D\uDEA7': 'warn',
19 | '\u26A0\uFE0F': 'warn',
20 | '\uD83D\uDC4D': 'okay',
21 | '\u2705': 'okay',
22 | '\u2757\uFE0F': 'error',
23 | '\u2757': 'error',
24 | '\uD83D\uDED1': 'error',
25 | '\u2049\uFE0F': 'error',
26 | '\u203C\uFE0F': 'error',
27 | '\u2139\uFE0F': 'info',
28 | '\u26A0': 'warn',
29 | };
30 |
31 | export const defaultIcons = {
32 | info: '\uD83D\uDCD8',
33 | warn: '\uD83D\uDEA7',
34 | okay: '\uD83D\uDC4D',
35 | error: '\u2757\uFE0F',
36 | };
37 |
38 | const Callout = (props: Props) => {
39 | const { attributes, empty } = props;
40 | const children = React.Children.toArray(props.children);
41 |
42 | const icon = props.icon;
43 | const isEmoji = icon && emojiRegex().test(icon);
44 | const heading = empty ?
: children[0];
45 | const theme = props.theme || (icon && themes[icon]) || 'default';
46 |
47 | return (
48 | // @ts-expect-error -- theme is not a valid attribute
49 | // eslint-disable-next-line react/jsx-props-no-spreading, react/no-unknown-property
50 |
51 | {icon ? (
52 | isEmoji ? (
53 | {icon}
54 | ) : (
55 |
61 | );
62 | };
63 |
64 | export default Callout;
65 |
--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
1 | name: Release
2 | on:
3 | push:
4 | branches:
5 | - main
6 | - beta
7 |
8 | permissions:
9 | id-token: write
10 | contents: write
11 |
12 | jobs:
13 | Release:
14 | if: "!contains(github.event.head_commit.message, 'SKIP CI')"
15 | runs-on: ubuntu-latest
16 | steps:
17 | # Setup the git repo & Node environemnt.
18 | #
19 | - name: Checkout branch (${{ github.ref }})
20 | uses: actions/checkout@v6
21 | with:
22 | persist-credentials: false # install breaks with persistant creds!
23 |
24 | - name: Setup node
25 | uses: actions/setup-node@v6
26 | with:
27 | node-version: 22
28 |
29 | - name: Update npm
30 | run: npm i -g npm@latest
31 |
32 | - name: Install dependencies
33 | run: |
34 | npm ci
35 | npm run build --if-present
36 | env:
37 | PUPPETEER_SKIP_DOWNLOAD: true
38 |
39 | # Build, version, and tag a new release.
40 | #
41 | - name: Publish release
42 | run: npm run release # configured in .releaserc
43 | env:
44 | GH_TOKEN: ${{ secrets.GH_TOKEN }} # auth push to remote repo
45 |
46 | # Push release changes to the remote.
47 | #
48 | - name: Push to remote
49 | uses: ad-m/github-push-action@master
50 | with:
51 | github_token: ${{ secrets.GITHUB_TOKEN }}
52 | branch: ${{ github.ref }}
53 |
54 | # Merge @latest release back to @next.
55 | #
56 | - name: Sync to next
57 | if: "github.ref == 'refs/heads/main'"
58 | uses: ad-m/github-push-action@master
59 | with:
60 | github_token: ${{ secrets.GITHUB_TOKEN }}
61 | branch: ${{ github.ref }}
62 | continue-on-error: true
63 |
64 | # Sync docs to rdmd.readme.io
65 | #
66 | - name: Sync docs to rdmd.readme.io
67 | uses: readmeio/rdme@v10
68 | with:
69 | rdme: docs upload ./docs --key=${{ secrets.RDME_KEY }} --version=2
70 |
--------------------------------------------------------------------------------
/components/PostmanRunButton/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from 'react';
2 |
3 | interface PostmanRunButtonProps {
4 | action: string;
5 | collectionId: string;
6 | collectionUrl: string;
7 | visibility: string;
8 | }
9 |
10 | const PostmanRunButton = ({
11 | collectionId = '', // Add your collection ID here
12 | collectionUrl = '', // Add your collection URL here
13 | visibility = 'public',
14 | action = 'collection/fork',
15 | }: PostmanRunButtonProps) => {
16 | useEffect(() => {
17 | // Only run on client-side
18 | if (typeof window !== 'undefined') {
19 | const scriptFunction = function noIdeaWhatThisShouldBeCalledOrDoesOne(p, o, s, t, m) {
20 | if (!p[s]) {
21 | p[s] = function noIdeaWhatThisShouldBeCalledOrDoesTwo(...args) {
22 | const postmanRunObject = p[t] || (p[t] = []);
23 | postmanRunObject.push(args);
24 | };
25 | }
26 | if (!o.getElementById(s + t)) {
27 | const scriptElement = o.createElement('script');
28 | scriptElement.id = s + t;
29 | scriptElement.async = 1;
30 | scriptElement.src = m;
31 | o.getElementsByTagName('head')[0].appendChild(scriptElement);
32 | }
33 | };
34 |
35 | // Execute the script function directly
36 | scriptFunction(window, document, '_pm', 'PostmanRunObject', 'https://run.pstmn.io/button.js');
37 |
38 | return () => {
39 | // Cleanup if needed
40 | const scriptElement = document.getElementById('_pmPostmanRunObject');
41 | if (scriptElement) document.head.removeChild(scriptElement);
42 | };
43 | }
44 | return undefined;
45 | }, []);
46 |
47 | return (
48 |
57 | );
58 | };
59 |
60 | export default PostmanRunButton;
61 |
--------------------------------------------------------------------------------
20 | `);
21 | });
22 |
23 | it('should render as a figure/figcaption if it has a caption', () => {
24 | render(
25 |