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.
readmeio · Sep 7, 2023 · 227f12b · 227f12b
1 parent 48b7ecd
commit 227f12b
Show file tree

Hide file tree

Showing 10 changed files with 209 additions and 25 deletions.
diff --git 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
@@ -59,7 +59,11 @@ describe('ReadMe Flavored Blocks', () => {
     const ast = parse(text);
 
     expect(compile(ast)).toMatchInlineSnapshot(`
-      "[block:html]{\\"html\\":\\"<style>\\\\n  summary {\\\\n    padding-top: 8px;\\\\n    outline: none !important;\\\\n    user-select: none;\\\\n  }\\\\n  details[open] + details > summary {\\\\n    padding-top: 0;\\\\n  }\\\\n  details > summary + hr {\\\\n    opacity: .66;\\\\n  }\\\\n</style>\\"}[/block]
+      "[block:html]
+      {
+        \\"html\\": \\"<style>\\\\n  summary {\\\\n    padding-top: 8px;\\\\n    outline: none !important;\\\\n    user-select: none;\\\\n  }\\\\n  details[open] + details > summary {\\\\n    padding-top: 0;\\\\n  }\\\\n  details > summary + hr {\\\\n    opacity: .66;\\\\n  }\\\\n</style>\\"
+      }
+      [/block]
       "
     `);
   });

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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);
   };
 }