1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
import { pick } from 'lodash';
import normalize from 'mdurl/encode';
import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remarkFrontmatter from 'remark-frontmatter';
import remarkGfm from 'remark-gfm';
import remarkRehype, { all } from 'remark-rehype';
import rehypeRaw from 'rehype-raw';
const skipFrontmatterHandler = (language) => (h, node) =>
h(node.position, 'frontmatter', { language }, [{ type: 'text', value: node.value }]);
const skipRenderingHandlers = {
footnoteReference: (h, node) =>
h(node.position, 'footnoteReference', { identifier: node.identifier, label: node.label }, []),
footnoteDefinition: (h, node) =>
h(
node.position,
'footnoteDefinition',
{ identifier: node.identifier, label: node.label },
all(h, node),
),
code: (h, node) =>
h(node.position, 'codeBlock', { language: node.lang, meta: node.meta }, [
{ type: 'text', value: node.value },
]),
definition: (h, node) => {
const title = node.title ? ` "${node.title}"` : '';
return h(
node.position,
'referenceDefinition',
{ identifier: node.identifier, url: node.url, title: node.title },
[{ type: 'text', value: `[${node.identifier}]: ${node.url}${title}` }],
);
},
linkReference: (h, node) => {
const definition = h.definition(node.identifier);
return h(
node.position,
'a',
{
href: normalize(definition.url ?? ''),
identifier: node.identifier,
isReference: 'true',
title: definition.title,
},
all(h, node),
);
},
imageReference: (h, node) => {
const definition = h.definition(node.identifier);
return h(
node.position,
'img',
{
src: normalize(definition.url ?? ''),
alt: node.alt,
identifier: node.identifier,
isReference: 'true',
title: definition.title,
},
all(h, node),
);
},
toml: skipFrontmatterHandler('toml'),
yaml: skipFrontmatterHandler('yaml'),
json: skipFrontmatterHandler('json'),
};
const createParser = ({ skipRendering = [] }) => {
return unified()
.use(remarkParse)
.use(remarkGfm)
.use(remarkFrontmatter, ['yaml', 'toml', { type: 'json', marker: ';' }])
.use(remarkRehype, {
allowDangerousHtml: true,
handlers: {
...pick(skipRenderingHandlers, skipRendering),
},
})
.use(rehypeRaw);
};
const compilerFactory = (renderer) =>
function compiler() {
Object.assign(this, {
Compiler(tree) {
return renderer(tree);
},
});
};
/**
* Parses a Markdown string and provides the result Abstract
* Syntax Tree (AST) to a renderer function to convert the
* tree in any desired representation
*
* @param {String} params.markdown Markdown to parse
* @param {(tree: MDast -> any)} params.renderer A function that accepts mdast
* AST tree and returns an object of any type that represents the result of
* rendering the tree. See the references below to for more information
* about MDast.
*
* MDastTree documentation https://github.com/syntax-tree/mdast
* @returns {Promise<any>} Returns a promise with the result of rendering
* the MDast tree
*/
export const render = async ({ markdown, renderer, skipRendering = [] }) => {
const { result } = await createParser({ skipRendering })
.use(compilerFactory(renderer))
.process(markdown);
return result;
};
|
