From 227f12b4f4653c98a6e661435daf91c26607874f Mon Sep 17 00:00:00 2001 From: Kelly Joseph Price Date: Thu, 7 Sep 2023 13:38:32 -0700 Subject: [PATCH] feat: only save inlined magic when in a container (#814) Updates some recent changes so we only save magic blocks to a single line format if they are in a container node. --- .../flavored-compilers.test.js.snap | 109 ++++++++++++++++-- __tests__/flavored-compilers.test.js | 6 +- .../__snapshots__/tables.test.js.snap | 34 +++++- .../flavored-compilers/magic-blocks.test.js | 59 +++++++++- processor/compile/div.js | 4 +- processor/compile/embed.js | 4 +- processor/compile/figure.js | 4 +- processor/compile/html-block.js | 4 +- processor/compile/magic-block.js | 6 +- processor/compile/table.js | 4 +- 10 files changed, 209 insertions(+), 25 deletions(-) diff --git a/__tests__/__snapshots__/flavored-compilers.test.js.snap b/__tests__/__snapshots__/flavored-compilers.test.js.snap index 01d232001..842fda325 100644 --- a/__tests__/__snapshots__/flavored-compilers.test.js.snap +++ b/__tests__/__snapshots__/flavored-compilers.test.js.snap @@ -1,7 +1,13 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ReadMe Flavored Blocks Embed 1`] = ` -"[block:embed]{\\"title\\":\\"Embedded meta links.\\",\\"url\\":\\"https://nyti.me/s/gzoa2xb2v3\\",\\"provider\\":\\"nyt\\"}[/block] +"[block:embed] +{ + \\"title\\": \\"Embedded meta links.\\", + \\"url\\": \\"https://nyti.me/s/gzoa2xb2v3\\", + \\"provider\\": \\"nyt\\" +} +[/block] " `; @@ -27,17 +33,54 @@ console.log('an unnamed sample snippet'); `; exports[`ReadMe Magic Blocks Embed 1`] = ` -"[block:embed]{\\"html\\":false,\\"url\\":\\"https://youtu.be/J3-uKv1DShQ\\",\\"title\\":null,\\"favicon\\":\\"https://youtu.be/favicon.ico\\",\\"provider\\":\\"youtu.be\\",\\"href\\":\\"https://youtu.be/J3-uKv1DShQ\\"}[/block] +"[block:embed] +{ + \\"html\\": false, + \\"url\\": \\"https://youtu.be/J3-uKv1DShQ\\", + \\"title\\": null, + \\"favicon\\": \\"https://youtu.be/favicon.ico\\", + \\"provider\\": \\"youtu.be\\", + \\"href\\": \\"https://youtu.be/J3-uKv1DShQ\\" +} +[/block] " `; exports[`ReadMe Magic Blocks Figure 1`] = ` -"[block:image]{\\"images\\":[{\\"image\\":[\\"https://files.readme.io/6f52e22-man-eating-pizza-and-making-an-ok-gesture.jpg\\",\\"rdme-blue.svg\\",\\"Ok, __pizza__ man.\\"],\\"sizing\\":\\"80\\",\\"caption\\":\\"Ok, **pizza** man.\\"}]}[/block] +"[block:image] +{ + \\"images\\": [ + { + \\"image\\": [ + \\"https://files.readme.io/6f52e22-man-eating-pizza-and-making-an-ok-gesture.jpg\\", + \\"rdme-blue.svg\\", + \\"Ok, __pizza__ man.\\" + ], + \\"sizing\\": \\"80\\", + \\"caption\\": \\"Ok, **pizza** man.\\" + } + ] +} +[/block] " `; exports[`ReadMe Magic Blocks Figure with alt text 1`] = ` -"[block:image]{\\"images\\":[{\\"image\\":[\\"https://files.readme.io/6f52e22-man-eating-pizza-and-making-an-ok-gesture.jpg\\",\\"rdme-blue.svg\\",\\"A man eating pizza and making an OK gesture\\"],\\"sizing\\":\\"80\\",\\"caption\\":\\"Ok, **pizza** man.\\"}]}[/block] +"[block:image] +{ + \\"images\\": [ + { + \\"image\\": [ + \\"https://files.readme.io/6f52e22-man-eating-pizza-and-making-an-ok-gesture.jpg\\", + \\"rdme-blue.svg\\", + \\"A man eating pizza and making an OK gesture\\" + ], + \\"sizing\\": \\"80\\", + \\"caption\\": \\"Ok, **pizza** man.\\" + } + ] +} +[/block] " `; @@ -47,12 +90,40 @@ exports[`ReadMe Magic Blocks Image 1`] = ` `; exports[`ReadMe Magic Blocks Image with sizing and alignment 1`] = ` -"[block:image]{\\"images\\":[{\\"image\\":[\\"https://files.readme.io/6f52e22-man-eating-pizza-and-making-an-ok-gesture.jpg\\",\\"rdme-blue.svg\\",\\"\\"],\\"align\\":\\"right\\",\\"sizing\\":\\"80px\\"}]}[/block] +"[block:image] +{ + \\"images\\": [ + { + \\"image\\": [ + \\"https://files.readme.io/6f52e22-man-eating-pizza-and-making-an-ok-gesture.jpg\\", + \\"rdme-blue.svg\\", + \\"\\" + ], + \\"align\\": \\"right\\", + \\"sizing\\": \\"80px\\" + } + ] +} +[/block] " `; exports[`ReadMe Magic Blocks Image with sizing and border 1`] = ` -"[block:image]{\\"images\\":[{\\"image\\":[\\"https://files.readme.io/6f52e22-man-eating-pizza-and-making-an-ok-gesture.jpg\\",\\"rdme-blue.svg\\",\\"\\"],\\"sizing\\":\\"80px\\",\\"border\\":true}]}[/block] +"[block:image] +{ + \\"images\\": [ + { + \\"image\\": [ + \\"https://files.readme.io/6f52e22-man-eating-pizza-and-making-an-ok-gesture.jpg\\", + \\"rdme-blue.svg\\", + \\"\\" + ], + \\"sizing\\": \\"80px\\", + \\"border\\": true + } + ] +} +[/block] " `; @@ -64,11 +135,33 @@ exports[`ReadMe Magic Blocks Tables 1`] = ` `; exports[`ReadMe Magic Blocks Tables with breaks 1`] = ` -"[block:parameters]{\\"data\\":{\\"h-0\\":\\"th 1\\",\\"h-1\\":\\"th 2\\",\\"0-0\\":\\"cell 1 \\\\nafter the break\\",\\"0-1\\":\\"cell 2\\"},\\"cols\\":2,\\"rows\\":1,\\"align\\":[\\"center\\",\\"center\\"]}[/block] +"[block:parameters] +{ + \\"data\\": { + \\"h-0\\": \\"th 1\\", + \\"h-1\\": \\"th 2\\", + \\"0-0\\": \\"cell 1 \\\\nafter the break\\", + \\"0-1\\": \\"cell 2\\" + }, + \\"cols\\": 2, + \\"rows\\": 1, + \\"align\\": [ + \\"center\\", + \\"center\\" + ] +} +[/block] " `; exports[`ReadMe Magic Blocks custom blocks 1`] = ` -"[block:tutorial-tile]{\\"backgroundColor\\":\\"#ffffff\\",\\"title\\":\\"Tutorial Title\\",\\"emoji\\":\\"🦉\\",\\"link\\":\\"http://test.com\\"}[/block] +"[block:tutorial-tile] +{ + \\"backgroundColor\\": \\"#ffffff\\", + \\"title\\": \\"Tutorial Title\\", + \\"emoji\\": \\"🦉\\", + \\"link\\": \\"http://test.com\\" +} +[/block] " `; diff --git a/__tests__/flavored-compilers.test.js b/__tests__/flavored-compilers.test.js index 46c1ed80d..12f4aeaf6 100644 --- a/__tests__/flavored-compilers.test.js +++ b/__tests__/flavored-compilers.test.js @@ -59,7 +59,11 @@ describe('ReadMe Flavored Blocks', () => { const ast = parse(text); expect(compile(ast)).toMatchInlineSnapshot(` - "[block:html]{\\"html\\":\\"\\"}[/block] + "[block:html] + { + \\"html\\": \\"\\" + } + [/block] " `); }); diff --git a/__tests__/flavored-compilers/__snapshots__/tables.test.js.snap b/__tests__/flavored-compilers/__snapshots__/tables.test.js.snap index 595055842..3999ac2b3 100644 --- a/__tests__/flavored-compilers/__snapshots__/tables.test.js.snap +++ b/__tests__/flavored-compilers/__snapshots__/tables.test.js.snap @@ -1,11 +1,41 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`table compiler converts to magic block syntax if there are breaks 1`] = ` -"[block:parameters]{\\"data\\":{\\"h-0\\":\\"th 1\\",\\"h-1\\":\\"th 2\\",\\"0-0\\":\\"cell 1 \\\\nextra line\\",\\"0-1\\":\\"cell 2\\"},\\"cols\\":2,\\"rows\\":1,\\"align\\":[\\"center\\",\\"center\\"]}[/block] +"[block:parameters] +{ + \\"data\\": { + \\"h-0\\": \\"th 1\\", + \\"h-1\\": \\"th 2\\", + \\"0-0\\": \\"cell 1 \\\\nextra line\\", + \\"0-1\\": \\"cell 2\\" + }, + \\"cols\\": 2, + \\"rows\\": 1, + \\"align\\": [ + \\"center\\", + \\"center\\" + ] +} +[/block] " `; exports[`table compiler saves to magic block syntax if there are breaks 1`] = ` -"[block:parameters]{\\"data\\":{\\"h-0\\":\\"th 1\\",\\"h-1\\":\\"th 2\\",\\"0-0\\":\\"cell 1 \\\\nextra line\\",\\"0-1\\":\\"cell 2\\"},\\"cols\\":2,\\"rows\\":1,\\"align\\":[\\"center\\",\\"center\\"]}[/block] +"[block:parameters] +{ + \\"data\\": { + \\"h-0\\": \\"th 1\\", + \\"h-1\\": \\"th 2\\", + \\"0-0\\": \\"cell 1 \\\\nextra line\\", + \\"0-1\\": \\"cell 2\\" + }, + \\"cols\\": 2, + \\"rows\\": 1, + \\"align\\": [ + \\"center\\", + \\"center\\" + ] +} +[/block] " `; diff --git a/__tests__/flavored-compilers/magic-blocks.test.js b/__tests__/flavored-compilers/magic-blocks.test.js index bedbd1935..2475c5765 100644 --- a/__tests__/flavored-compilers/magic-blocks.test.js +++ b/__tests__/flavored-compilers/magic-blocks.test.js @@ -1,7 +1,33 @@ import { md, mdast } from '../../index'; describe('Compile Magic Blocks', () => { - it('compiles a magic block in a callout', () => { + it('compiles a magic block to multiple lines', () => { + const text = ` +[block:image]{ "images": [{ "image": ["https://owlbertsio-resized.s3.amazonaws.com/This-Is-Fine.jpg.full.png", "", "" ], "align": "center" } ]}[/block] +`; + const tree = mdast(text); + const compiled = md(tree); + + expect(compiled).toMatchInlineSnapshot(` + "[block:image] + { + \\"images\\": [ + { + \\"image\\": [ + \\"https://owlbertsio-resized.s3.amazonaws.com/This-Is-Fine.jpg.full.png\\", + \\"\\", + \\"\\" + ], + \\"align\\": \\"center\\" + } + ] + } + [/block] + " + `); + }); + + it('compiles a magic block in a container on a single line', () => { const text = ` > 👍 It works! > @@ -28,9 +54,36 @@ describe('Compile Magic Blocks', () => { const compiled = md(tree); expect(compiled).toMatchInlineSnapshot(` - "[block:image]{\\"images\\":[{\\"image\\":[\\"https://owlbertsio-resized.s3.amazonaws.com/This-Is-Fine.jpg.full.png\\",\\"\\",\\"\\"],\\"align\\":\\"center\\"}]}[/block] + "[block:image] + { + \\"images\\": [ + { + \\"image\\": [ + \\"https://owlbertsio-resized.s3.amazonaws.com/This-Is-Fine.jpg.full.png\\", + \\"\\", + \\"\\" + ], + \\"align\\": \\"center\\" + } + ] + } + [/block] + - [block:image]{\\"images\\":[{\\"image\\":[\\"https://owlbertsio-resized.s3.amazonaws.com/This-Is-Fine.jpg.full.png\\",\\"\\",\\"\\"],\\"align\\":\\"center\\"}]}[/block] + [block:image] + { + \\"images\\": [ + { + \\"image\\": [ + \\"https://owlbertsio-resized.s3.amazonaws.com/This-Is-Fine.jpg.full.png\\", + \\"\\", + \\"\\" + ], + \\"align\\": \\"center\\" + } + ] + } + [/block] " `); }); diff --git a/processor/compile/div.js b/processor/compile/div.js index 15612e543..6e759f2ea 100644 --- a/processor/compile/div.js +++ b/processor/compile/div.js @@ -4,9 +4,9 @@ export default function DivCompiler() { const { Compiler } = this; const { visitors } = Compiler.prototype; - visitors.div = function compile(node) { + visitors.div = function compile(node, parent) { const data = node.data.hProperties; - return magicBlock(node.data.hName, data); + return magicBlock(node.data.hName, data, parent); }; } diff --git a/processor/compile/embed.js b/processor/compile/embed.js index 8ec7cee12..854f39c4b 100644 --- a/processor/compile/embed.js +++ b/processor/compile/embed.js @@ -1,11 +1,11 @@ import magicBlock from './magic-block'; -function EmbedCompiler(node) { +function EmbedCompiler(node, parent) { const data = node.data.hProperties; let { provider = 'embed' } = data; provider = provider.replace(/^@/, ''); - return magicBlock('embed', { ...data, provider }); + return magicBlock('embed', { ...data, provider }, parent); } export default function EmbedCompilerPlugin() { diff --git a/processor/compile/figure.js b/processor/compile/figure.js index f2b4ff4ad..b012d9416 100644 --- a/processor/compile/figure.js +++ b/processor/compile/figure.js @@ -18,7 +18,7 @@ export default function FigureCompiler() { const { Compiler } = this; const { visitors } = Compiler.prototype; - visitors.figure = function figureCompiler(node) { + visitors.figure = function figureCompiler(node, parent) { let image; let caption; @@ -35,6 +35,6 @@ export default function FigureCompiler() { images: [img], }; - return magicBlock('image', block); + return magicBlock('image', block, parent); }; } diff --git a/processor/compile/html-block.js b/processor/compile/html-block.js index 99d260894..a1c2c2ac0 100644 --- a/processor/compile/html-block.js +++ b/processor/compile/html-block.js @@ -4,9 +4,9 @@ export default function HtmlBlockCompiler() { const { Compiler } = this; const { visitors } = Compiler.prototype; - visitors['html-block'] = node => { + visitors['html-block'] = (node, parent) => { const html = node.data.hProperties.html; - return magicBlock('html', { html }); + return magicBlock('html', { html }, parent); }; } diff --git a/processor/compile/magic-block.js b/processor/compile/magic-block.js index dc40e4bc0..4dfed6523 100644 --- a/processor/compile/magic-block.js +++ b/processor/compile/magic-block.js @@ -1,3 +1,7 @@ -const magicBlock = (type, data) => `[block:${type}]${JSON.stringify(data)}[/block]`; +const magicBlock = (type, data, parent) => { + return parent.type === 'root' + ? `[block:${type}]\n${JSON.stringify(data, null, 2)}\n[/block]\n` + : `[block:${type}]${JSON.stringify(data)}[/block]`; +}; export default magicBlock; diff --git a/processor/compile/table.js b/processor/compile/table.js index 1c4d07df2..265a860a9 100644 --- a/processor/compile/table.js +++ b/processor/compile/table.js @@ -13,7 +13,7 @@ export default function TableCompiler() { const { table: original } = visitors; - visitors.table = function (node) { + visitors.table = function (node, parent) { if (!find(node, n => n.type === 'break')) { return original.call(this, node); } @@ -34,6 +34,6 @@ export default function TableCompiler() { }); }); - return magicBlock('parameters', data); + return magicBlock('parameters', data, parent); }; }