feat: specify component-to-custom magic block mappings

__tests__/__snapshots__/magic-block-parser.test.js.snap

@@ -212,6 +212,13 @@ Object {
 }
 `;
 
+exports[`Parse Magic Blocks Custom Default Block 1`] = `
+Object {
+  "children": Array [],
+  "type": "root",
+}
+`;
+
 exports[`Parse Magic Blocks Custom HTML Block 1`] = `
 Object {
   "children": Array [
@@ -507,6 +514,12 @@ Object {
       "data": Object {
         "body": "Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Praesent nec massa tristique arcu fermentum dapibus. Integer orci turpis, mollis vel augue eget, placerat rhoncus orci. Mauris metus libero, rutrum",
         "color": "#f00",
+        "hName": "unrecognized",
+        "hProperties": Object {
+          "body": "Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Praesent nec massa tristique arcu fermentum dapibus. Integer orci turpis, mollis vel augue eget, placerat rhoncus orci. Mauris metus libero, rutrum",
+          "color": "#f00",
+          "title": "Title",
+        },
         "title": "Title",
       },
       "type": "div",

__tests__/components.test.js

@@ -54,8 +54,8 @@ describe('Components', () => {
 `,
       `
 
-> 🚧  
-> 
+> 🚧
+>
 > Callout with no title.
 
 `,
@@ -167,6 +167,11 @@ describe('Components', () => {
     expect(blank.find('Heading').text()).toBe('');
   });
 
+  it('Heading no children', () => {
+    const wrap = mount(markdown.react('### Heading Level 3'));
+    expect(wrap.find('Heading')).toHaveLength(1);
+  });
+
   describe('Table of Contents', () => {
     it('generates TOC from headings', () => {
       const txt = '# Heading Zed\n\n# Heading One';

__tests__/magic-block-parser.test.js

@@ -214,6 +214,18 @@ describe('Parse Magic Blocks', () => {
     expect(process(text)).toMatchSnapshot();
   });
 
+  it('Custom Default Block', () => {
+    const text = `[block:tutorial-tile]
+    {
+      "backgroundColor": "#ffffff",
+      "title": "Tutorial Title",
+      "emoji": "🦉",
+      "link": "http://test.com",
+    }
+    [/block]`;
+    expect(process(text)).toMatchSnapshot();
+  });
+
   it('Unrecognized Blocks', () => {
     const text = `[block:unrecognized]
     {

index.js

@@ -67,6 +67,13 @@ sanitize.clobberPrefix = '';
 sanitize.tagNames.push('span', 'style');
 sanitize.attributes['*'].push('class', 'className', 'align', 'style');
 
+/**
+ * @todo don't manually whitelist custom component attributes
+ *       within the engine!
+ * @todo change `link` to `href`
+ */
+sanitize.attributes['tutorial-tile'] = ['backgroundColor', 'emoji', 'link'];
+
 sanitize.tagNames.push('rdme-pin');
 
 sanitize.tagNames.push('rdme-embed');
@@ -171,12 +178,14 @@ const PinWrap = ({ children }) => <div className="pin">{children}</div>; // @tod
 const count = {};
 
 export function reactProcessor(opts = {}, components = {}) {
+  Object.keys(components).map(key => sanitize.tagNames.push(key));
+
   return processor(opts)
     .use(sectionAnchorId)
     .use(rehypeReact, {
       createElement: React.createElement,
       Fragment: React.Fragment,
-      components: (typeof components === 'function' ? components : r => r)({
+      components: {
         'code-tabs': CodeTabs(sanitize),
         'html-block': HTMLBlock(sanitize),
         'rdme-callout': Callout(sanitize),
@@ -195,7 +204,7 @@ export function reactProcessor(opts = {}, components = {}) {
         code: Code(sanitize, opts),
         img: Image(sanitize),
         ...components,
-      }),
+      },
     });
 }
 

processor/parse/magic-block-parser.js

@@ -239,7 +239,11 @@ function tokenize(eat, value) {
           {
             type: 'div',
             children: this.tokenizeBlock(json.text || json.html, eat.now()),
-            data: json,
+            data: {
+              hName: type || 'div',
+              hProperties: json,
+              ...json,
+            },
           },
           json
         )