Skip to content
This repository has been archived by the owner on Nov 28, 2022. It is now read-only.

Commit

Permalink
fix(markdown): add missing compilers (#808)
Browse files Browse the repository at this point in the history
* fix(markdown): add missing compilers

- [x] add `tableHead` markdown compiler (fixes #772)
- [x] add `figure` markdown compiler

* refactor(markdown): restructure compiler imports

* fix(markdown): compile figcaptions

* fix(markdown): rename pin compile method

...so the pin compiler doesdn't override the default `visitors.div` method

* refactor(markdown): figcaption compiler

split `figcaption` compiler out of the `figure` visitor methods

* chore(markdown): add test.watch script alias

'cause I'm fuckin' lazy...

* refactor(markdown): restructure custom parsers and compilers

* test(markdown): figure compiler
rafegoldberg authored Jul 1, 2020
1 parent 6afc047 commit 3a6e720
Showing 9 changed files with 92 additions and 55 deletions.
Original file line number Diff line number Diff line change
@@ -30,3 +30,17 @@ exports[`ReadMe Magic Blocks Embed 1`] = `
"[](https://youtu.be/J3-uKv1DShQ \\"@youtu.be\\")
"
`;

exports[`ReadMe Magic Blocks Figure 1`] = `
"<div class=\\"rdmd-pinned\\">
<figure>
![](https://files.readme.io/6f52e22-man-eating-pizza-and-making-an-ok-gesture.jpg \\"rdme-blue.svg\\")
<figcaption>Ok, pizza man.</figcaption>
</figure>
</div>
"
`;
51 changes: 31 additions & 20 deletions packages/markdown/__tests__/flavored-compilers.test.js
Original file line number Diff line number Diff line change
@@ -1,34 +1,22 @@
const unified = require('unified');
const sanitize = require('hast-util-sanitize/lib/github.json');

const remarkParse = require('remark-parse');
const remarkStringify = require('remark-stringify');
const rehypeSanitize = require('rehype-sanitize');

const parseCallouts = require('../processor/parse/flavored/callout');
const parseCodeTabs = require('../processor/parse/flavored/code-tabs');
const parseEmbeds = require('../processor/parse/flavored/embed');
const parsers = Object.values(require('../processor/parse')).map(parser => parser.sanitize(sanitize));
const compilers = Object.values(require('../processor/compile'));
const options = require('../options.json').markdownOptions;
const parser = require('../processor/parse/magic-block-parser');

const DivCompiler = require('../processor/compile/div');
const CodeTabsCompiler = require('../processor/compile/code-tabs');
const CalloutCompiler = require('../processor/compile/callout');
const EmbedCompiler = require('../processor/compile/embed');

const sanitize = { attributes: [], tagNames: [] };
const process = unified()
const processor = unified()
.use(remarkParse, options)
.data('settings', { position: false })
.use(parser.sanitize(sanitize))
.use([parseCallouts.sanitize(sanitize), parseEmbeds.sanitize(sanitize), parseCodeTabs.sanitize(sanitize)])
.use(parsers)
.use(rehypeSanitize);

const parse = text => text && process().parse(text);
const compile = tree =>
tree &&
process()
.use(remarkStringify, options)
.use([DivCompiler, CodeTabsCompiler, CalloutCompiler, EmbedCompiler])
.stringify(tree);
const parse = text => text && processor().parse(text);
const compile = tree => tree && processor().use(remarkStringify, options).use(compilers).stringify(tree);

describe('ReadMe Flavored Blocks', () => {
it('Embed', () => {
@@ -91,4 +79,27 @@ describe('ReadMe Magic Blocks', () => {
const out = compile(ast);
expect(out).toMatchSnapshot();
});

it('Figure', () => {
const txt = `[block:image]
{
"images": [
{
"image": [
"https://files.readme.io/6f52e22-man-eating-pizza-and-making-an-ok-gesture.jpg",
"rdme-blue.svg",
300,
54,
"#000000"
],
"caption": "Ok, pizza man."
}
],
"sidebar": true
}
[/block]`;
const ast = parse(txt);
const out = compile(ast);
expect(out).toMatchSnapshot();
});
});
30 changes: 4 additions & 26 deletions packages/markdown/index.js
Original file line number Diff line number Diff line change
@@ -41,26 +41,11 @@ const {

/* Custom Unified Parsers
*/
const {
flavorCodeTabs,
flavorCallout,
flavorEmbed,
magicBlockParser,
variableParser,
gemojiParser,
compactHeadings,
} = require('./processor/parse');
const customParsers = Object.values(require('./processor/parse')).map(parser => parser.sanitize(sanitize));

/* Custom Unified Compilers
*/
const {
rdmeDivCompiler,
codeTabsCompiler,
rdmeEmbedCompiler,
rdmeVarCompiler,
rdmeCalloutCompiler,
rdmePinCompiler,
} = require('./processor/compile');
const customCompilers = Object.values(require('./processor/compile'));

/* Custom Unified Plugins
*/
@@ -152,12 +137,8 @@ export function processor(opts = {}) {
.use(remarkParse, opts.markdownOptions)
.data('settings', opts.settings)
.data('compatibilityMode', opts.compatibilityMode)
.use(magicBlockParser.sanitize(sanitize))
.use([flavorCodeTabs.sanitize(sanitize), flavorCallout.sanitize(sanitize), flavorEmbed.sanitize(sanitize)])
.use(compactHeadings.sanitize(sanitize))
.use(variableParser.sanitize(sanitize))
.use(!opts.correctnewlines ? remarkBreaks : () => {})
.use(gemojiParser.sanitize(sanitize))
.use(customParsers)
.use(remarkSlug)
.use(remarkRehype, { allowDangerousHtml: true })
.use(rehypeRaw)
@@ -266,10 +247,7 @@ export function md(tree, opts = {}) {
if (!tree) return null;
[, opts] = setup('', opts);

return processor(opts)
.use(remarkStringify, opts.markdownOptions)
.use([rdmeDivCompiler, codeTabsCompiler, rdmeCalloutCompiler, rdmeEmbedCompiler, rdmeVarCompiler, rdmePinCompiler])
.stringify(tree);
return processor(opts).use(remarkStringify, opts.markdownOptions).use(customCompilers).stringify(tree);
}

const ReadMeMarkdown = (text, opts = {}) => react(text, opts);
3 changes: 2 additions & 1 deletion packages/markdown/package.json
Original file line number Diff line number Diff line change
@@ -41,7 +41,8 @@
"inspect": "jsinspect",
"pretest": "npm run lint && npm run prettier && npm run inspect",
"prettier": "prettier --list-different --write \"./**/**.{js,jsx}\"",
"test": "jest --coverage --runInBand"
"test": "jest --coverage --runInBand",
"test.watch": "npm test -- --watch --coverage=false"
},
"publishConfig": {
"registry": "http://registry.npmjs.org",
21 changes: 21 additions & 0 deletions packages/markdown/processor/compile/figure.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
const nodeToString = require('hast-util-to-string');

module.exports = function FigureCompiler() {
const { Compiler } = this;
const { visitors } = Compiler.prototype;

visitors.figcaption = function figcaptionCompiler(node) {
const caption = nodeToString(node);
return `<figcaption>${caption}</figcaption>`;
};

visitors.figure = function figureCompiler(node) {
const [image, caption] = node.children;
return `<figure>
${visitors.image.call(this, image)}
${visitors.figcaption.call(this, caption)}
</figure>`;
};
};
5 changes: 4 additions & 1 deletion packages/markdown/processor/compile/index.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
export { default as rdmeDivCompiler } from './div';
export { default as divCompiler } from './div';
export { default as tableHeadCompiler } from './table-head';
export { default as figureCompiler } from './figure';

export { default as codeTabsCompiler } from './code-tabs';
export { default as rdmeEmbedCompiler } from './embed';
export { default as rdmeVarCompiler } from './var';
10 changes: 5 additions & 5 deletions packages/markdown/processor/compile/pin.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
/* div blocks directly alias the paragraph container; use for display only! */
module.exports = function DivCompiler() {
module.exports = function PinCompiler() {
const { Compiler } = this;
const { visitors } = Compiler.prototype;
visitors.div = function compile(/* node */) {
return 'PINNNED';
};
function compiler(node) {
return [`<div class="rdmd-pinned">`, this.block(node), `</div>`].join('\n\n');
}
visitors['rdme-pin'] = compiler;
};
7 changes: 7 additions & 0 deletions packages/markdown/processor/compile/table-head.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
module.exports = function TableHeadCompiler() {
const { Compiler } = this;
const { visitors } = Compiler.prototype;
visitors.tableHead = function compile(node) {
return visitors.tableCell.call(this, node);
};
};
6 changes: 4 additions & 2 deletions packages/markdown/processor/parse/index.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
export { default as magicBlockParser } from './magic-block-parser';

export { default as flavorCodeTabs } from './flavored/code-tabs';
export { default as flavorCallout } from './flavored/callout';
export { default as flavorEmbed } from './flavored/embed';
export { default as magicBlockParser } from './magic-block-parser';

export { default as compactHeadings } from './compact-headings';
export { default as variableParser } from './variable-parser';
export { default as gemojiParser } from './gemoji-parser';
export { default as compactHeadings } from './compact-headings';

0 comments on commit 3a6e720

Please sign in to comment.