Skip to content
This repository was archived by the owner on Mar 30, 2025. It is now read-only.

Commit 118432d

Browse files
remcohaszingremcohaszing
committed
Add rehype compatibility
1 parent c9da59d commit 118432d

File tree

7 files changed

+289
-2
lines changed

7 files changed

+289
-2
lines changed

‎.prettierignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
__snapshots__/
2+
dist/

‎__fixtures__/gantt/output.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@
108108
<tspan x="10" alignment-baseline="central">Critical tasks</tspan>
109109
</text>
110110
</g>
111-
<path fill="none" stroke="red" stroke-width="2" d="M70727 25v290"/>
111+
<path fill="none" stroke="red" stroke-width="2" d="M71024 25v290"/>
112112
<text x="292" y="25" font-family="'trebuchet ms',verdana,arial,sans-serif" font-size="18" text-anchor="middle">
113113
Adding GANTT diagram functionality to mermaid
114114
</text>

‎__tests__/__snapshots__/rehype.html‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<p><svg xmlns="http://www.w3.org/2000/svg" height="233" style="max-width:124.640625px" fill="#333" fontFamily="&#x22;trebuchet ms&#x22;,verdana,arial,sans-serif" fontSize="16" viewBox="0 0 124.641 233">
2+
<path fill="none" stroke="#333" stroke-width="1.5" marker-end="url(#a)" d="M47.473 44.015L22.53 72v25"></path>
3+
<defs>
4+
<marker id="a" markerHeight="6" markerUnits="strokeWidth" markerWidth="8" orient="auto" refX="9" refY="5" viewBox="0 0 10 10">
5+
<path stroke-dasharray="1 0" d="M0 0l10 5-10 5z"></path>
6+
</marker>
7+
</defs>
8+
<path fill="none" stroke="#333" stroke-width="1.5" marker-end="url(#b)" d="M76.91 44.015L101.852 72v25"></path>
9+
<defs>
10+
<marker id="b" markerHeight="6" markerUnits="strokeWidth" markerWidth="8" orient="auto" refX="9" refY="5" viewBox="0 0 10 10">
11+
<path stroke-dasharray="1 0" d="M0 0l10 5-10 5z"></path>
12+
</marker>
13+
</defs>
14+
<path fill="none" stroke="#333" stroke-width="1.5" marker-end="url(#c)" d="M22.531 136v25l24.754 27.775"></path>
15+
<defs>
16+
<marker id="c" markerHeight="6" markerUnits="strokeWidth" markerWidth="8" orient="auto" refX="9" refY="5" viewBox="0 0 10 10">
17+
<path stroke-dasharray="1 0" d="M0 0l10 5-10 5z"></path>
18+
</marker>
19+
</defs>
20+
<path fill="none" stroke="#333" stroke-width="1.5" marker-end="url(#d)" d="M101.852 136v25l-24.754 27.775"></path>
21+
<defs>
22+
<marker id="d" markerHeight="6" markerUnits="strokeWidth" markerWidth="8" orient="auto" refX="9" refY="5" viewBox="0 0 10 10">
23+
<path stroke-dasharray="1 0" d="M0 0l10 5-10 5z"></path>
24+
</marker>
25+
</defs>
26+
<g color="#333">
27+
<foreignObject width="0" height="0">
28+
<div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
29+
<span style="background-color:#e8e8e8;text-align:center">
30+
</span></div>
31+
</foreignObject>
32+
<foreignObject width="0" height="0">
33+
<div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
34+
<span style="background-color:#e8e8e8;text-align:center">
35+
</span></div>
36+
</foreignObject>
37+
<foreignObject width="0" height="0">
38+
<div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
39+
<span style="background-color:#e8e8e8;text-align:center">
40+
</span></div>
41+
</foreignObject>
42+
<foreignObject width="0" height="0">
43+
<div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
44+
<span style="background-color:#e8e8e8;text-align:center">
45+
</span></div>
46+
</foreignObject>
47+
</g>
48+
<g transform="translate(62.191 27.5)">
49+
<rect width="29.438" height="39" x="-14.719" y="-19.5" fill="#ececff" stroke="#9370db" rx="0" ry="0"></rect>
50+
<foreignObject width="9.438" height="19" color="#333" transform="translate(-4.719 -9.5)">
51+
<div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
52+
A
53+
</div>
54+
</foreignObject>
55+
</g>
56+
<g transform="translate(22.531 116.5)">
57+
<rect width="29.063" height="39" x="-14.531" y="-19.5" fill="#ececff" stroke="#9370db" rx="0" ry="0"></rect>
58+
<foreignObject width="9.063" height="19" color="#333" transform="translate(-4.531 -9.5)">
59+
<div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
60+
B
61+
</div>
62+
</foreignObject>
63+
</g>
64+
<g transform="translate(101.852 116.5)">
65+
<rect width="29.578" height="39" x="-14.789" y="-19.5" fill="#ececff" stroke="#9370db" rx="0" ry="0"></rect>
66+
<foreignObject width="9.578" height="19" color="#333" transform="translate(-4.79 -9.5)">
67+
<div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
68+
C
69+
</div>
70+
</foreignObject>
71+
</g>
72+
<g transform="translate(62.191 205.5)">
73+
<rect width="29.813" height="39" x="-14.906" y="-19.5" fill="#ececff" stroke="#9370db" rx="0" ry="0"></rect>
74+
<foreignObject width="9.813" height="19" color="#333" transform="translate(-4.906 -9.5)">
75+
<div xmlns="http://www.w3.org/1999/xhtml" style="white-space:nowrap" display="inline-block">
76+
D
77+
</div>
78+
</foreignObject>
79+
</g>
80+
</svg>
81+
</p>

‎__tests__/index.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@ import { join, resolve } from 'path';
33

44
import { toMatchFile } from 'jest-file-snapshot';
55
import * as puppeteer from 'puppeteer';
6+
import * as rehypeStringify from 'rehype-stringify';
67
import * as remark from 'remark';
8+
import * as remarkRehype from 'remark-rehype';
79

810
import { defaultSVGOOptions, remarkMermaid, RemarkMermaidOptions } from '../src';
911

@@ -63,3 +65,18 @@ it('should close the browser if no more files are being processed', async () =>
6365
}
6466
expect(puppeteer.launch).toHaveBeenCalledTimes(3);
6567
});
68+
69+
it('should output a remark-rehype compatible ast', async () => {
70+
const processor = remark().use(remarkMermaid).use(remarkRehype).use(rehypeStringify);
71+
jest.spyOn(puppeteer, 'launch');
72+
const { contents } = await processor.process(`
73+
\`\`\`mermaid
74+
graph TD;
75+
A-->B;
76+
A-->C;
77+
B-->D;
78+
C-->D;
79+
\`\`\`
80+
`);
81+
expect(contents).toMatchFile(join(__dirname, '__snapshots__', 'rehype.html'));
82+
});

‎package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,9 @@
3535
},
3636
"dependencies": {
3737
"@types/svgo": "^1.3.3",
38+
"hast-util-from-parse5": "^6.0.1",
3839
"mermaid": "^8.2.3",
40+
"parse5": "^6.0.1",
3941
"svgo": "^1.3.0",
4042
"unified": "^9.2.0",
4143
"unist-util-visit": "^2.0.0"
@@ -64,7 +66,9 @@
6466
"jest-file-snapshot": "^0.5.0",
6567
"prettier": "^2.2.1",
6668
"puppeteer": "^7.1.0",
69+
"rehype-stringify": "^8.0.0",
6770
"remark": "^13.0.0",
71+
"remark-rehype": "^8.0.0",
6872
"ts-jest": "^26.5.1",
6973
"typescript": "^4.1.5"
7074
}

‎src/index.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import { resolve } from 'path';
22
import { pathToFileURL } from 'url';
33

4+
import * as fromParse5 from 'hast-util-from-parse5';
45
// eslint-disable-next-line import/no-unresolved
56
import { Code, Parent } from 'mdast';
67
import { Mermaid } from 'mermaid';
8+
import { parseFragment } from 'parse5';
79
import { Browser, launch, LaunchOptions, Page } from 'puppeteer';
810
import * as SVGO from 'svgo';
911
import { Attacher } from 'unified';
@@ -135,7 +137,11 @@ export const remarkMermaid: Attacher<[RemarkMermaidOptions?]> = ({
135137
if (optimizer) {
136138
value = (await optimizer.optimize(value)).data;
137139
}
138-
parent.children.splice(index, 1, { type: 'html', value });
140+
parent.children.splice(index, 1, {
141+
type: 'paragraph',
142+
children: [{ type: 'html', value }],
143+
data: { hChildren: [fromParse5(parseFragment(value))] },
144+
});
139145
}),
140146
);
141147
} finally {

0 commit comments

Comments
 (0)