RDMD Feedback Fixes (2) (#601)

* feat(markdown): render custom HTML via component

* test(markdown): custom HTML component

* feat(markdown): internalize compact heading normalization

* test(markdown): compact heading expectations

* build

* chore(markdown): nix loose mode

* build

* chore(markdown): refactor normalization

- nix normalize exports
- rename normalize to "setup"
- internalize option merging (defaults with user-passed config) in setup method
- use setup in every transformer method

* test(markdown): fix tests for new setup method

* BUILD

* refactor(markdown): wrap table in div.table

* build

* fix(markdown): style callout styles for Ffx

* BUILD

* chore(markdown): update component classes

* test(markdown): fix linting issues

* test(markdown): update callout + table expectations

* Update packages/markdown/components/Callout/index.jsx

packages/markdown/README.md

@@ -43,7 +43,6 @@ Which will give you the following:
 | *`html`*      | transform markdown in to HTML                  | `text`, `options`|
 | *`ast`*       | transform markdown to an mdast object          | `text`, `options`|
 | *`md`*        | transform mdast in to ReadMe-flavored markdown | `tree`, `options`|
-| *`normalize`* | normalize magic block syntax pre-processing    | `text`           |
 | *`utils`*     | default `options`, React contexts, other utils | N/A              |
 
 </details><hr>

packages/markdown/__tests__/__snapshots__/index.test.js.snap

@@ -35,6 +35,13 @@ exports[`emojis 1`] = `
 :unknown-emoji:</p>"
 `;
 
+exports[`export multiple Markdown renderers allows complex compact headings 1`] = `
+"<h1>Basic Text</h1>
+<h2>🙀 oh noes!</h2>
+<h3><strong>6</strong>. Oh No</h3>
+<p>Lorem ipsum dolor!</p>"
+`;
+
 exports[`export multiple Markdown renderers renders AST 1`] = `
 Object {
   "children": Array [
@@ -653,4 +660,4 @@ exports[`list items 1`] = `
 
 exports[`magic image 1`] = `"<figure><img src=\\"https://files.readme.io/6f52e22-man-eating-pizza-and-making-an-ok-gesture.jpg\\" title=\\"man-eating-pizza-and-making-an-ok-gesture.jpg\\" align=\\"\\" alt=\\"\\" caption=\\"\\" height=\\"auto\\" width=\\"auto\\" loading=\\"lazy\\"><figcaption><p>A guy. Eating pizza. And making an OK gesture.</p></figcaption></figure>"`;
 
-exports[`tables 1`] = `"<table><thead><tr><th>Tables</th><th style=\\"text-align: center;\\">Are</th><th style=\\"text-align: right;\\">Cool</th></tr></thead><tbody><tr><td>col 3 is</td><td style=\\"text-align: center;\\">right-aligned</td><td style=\\"text-align: right;\\">$1600</td></tr><tr><td>col 2 is</td><td style=\\"text-align: center;\\">centered</td><td style=\\"text-align: right;\\">$12</td></tr><tr><td>zebra stripes</td><td style=\\"text-align: center;\\">are neat</td><td style=\\"text-align: right;\\">$1</td></tr></tbody></table>"`;
+exports[`tables 1`] = `"<div class=\\"rdmd-table\\"><table><thead><tr><th>Tables</th><th style=\\"text-align: center;\\">Are</th><th style=\\"text-align: right;\\">Cool</th></tr></thead><tbody><tr><td>col 3 is</td><td style=\\"text-align: center;\\">right-aligned</td><td style=\\"text-align: right;\\">$1600</td></tr><tr><td>col 2 is</td><td style=\\"text-align: center;\\">centered</td><td style=\\"text-align: right;\\">$12</td></tr><tr><td>zebra stripes</td><td style=\\"text-align: center;\\">are neat</td><td style=\\"text-align: right;\\">$1</td></tr></tbody></table></div>"`;

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

@@ -211,6 +211,29 @@ Object {
 }
 `;
 
+exports[`Parse Magic Blocks Custom HTML Block 1`] = `
+Object {
+  "children": Array [
+    Object {
+      "data": Object {
+        "hName": "html-block",
+        "hProperties": Object {
+          "html": "<h1>👋🌍</h1>
+<hr>
+<form>
+  <input name=\\"test\\" value=\\"hello\\" type=\\"text\\"/>
+  <br/>
+  <a class=\\"button\\">Go</a>
+</form>",
+        },
+      },
+      "type": "html-block",
+    },
+  ],
+  "type": "root",
+}
+`;
+
 exports[`Parse Magic Blocks Embed Blocks 1`] = `
 Object {
   "children": Array [

packages/markdown/__tests__/components.test.js

@@ -61,10 +61,10 @@ describe('Components', () => {
     ];
     const wrap = [mount(markdown.react(callout[0])), mount(markdown.react(callout[1]))];
     expect(wrap[0].html()).toBe(
-      '<blockquote class="callout callout_error" theme="❗️"><h3 class="false"><p>❗️ Error Callout</p></h3><p>Lorem ipsum dolor.</p></blockquote>'
+      '<blockquote class="callout callout_error" theme="❗️"><h3 class="callout-heading false"><span class="callout-icon">❗️</span> Error Callout</h3><p>Lorem ipsum dolor.</p></blockquote>'
     );
     expect(wrap[1].html()).toBe(
-      '<blockquote class="callout callout_default" theme="🎟"><h3 class="floated"><p>🎟 </p></h3><p>Callout with no title or theme.</p></blockquote>'
+      '<blockquote class="callout callout_default" theme="🎟"><h3 class="callout-heading empty"><span class="callout-icon">🎟</span> </h3><p>Callout with no title or theme.</p></blockquote>'
     );
   });
 

packages/markdown/__tests__/index.test.js

@@ -6,7 +6,7 @@ const markdown = require('../index');
 const settings = require('../options.json');
 
 test('image', () => {
-  expect(mount(markdown.default('![Image](http://example.com/image.png)', settings)).html()).toMatchSnapshot();
+  expect(mount(markdown.default('![Image](http://example.com/image.png)')).html()).toMatchSnapshot();
 });
 
 test('magic image', () => {
@@ -39,15 +39,15 @@ test('magic image', () => {
 });
 
 test('list items', () => {
-  expect(mount(markdown.default('- listitem1', settings)).html()).toMatchSnapshot();
+  expect(mount(markdown.default('- listitem1')).html()).toMatchSnapshot();
 });
 
 test('check list items', () => {
-  expect(mount(markdown.default('- [ ] checklistitem1\n- [x] checklistitem1', settings)).html()).toMatchSnapshot();
+  expect(mount(markdown.default('- [ ] checklistitem1\n- [x] checklistitem1')).html()).toMatchSnapshot();
 });
 
 test('should strip out inputs', () => {
-  const wrap = mount(markdown.default('<input type="text" value="value" />', settings));
+  const wrap = mount(markdown.default('<input type="text" value="value" />'));
   expect(wrap.exists()).toBe(false);
 });
 
@@ -92,13 +92,11 @@ test('anchors', () => {
 });
 
 test('anchor target: should default to _self', () => {
-  expect(mount(markdown.default('[test](https://example.com)', settings)).html()).toMatchSnapshot();
+  expect(mount(markdown.default('[test](https://example.com)')).html()).toMatchSnapshot();
 });
 
 test('anchor target: should allow _blank if using HTML', () => {
-  expect(
-    mount(markdown.default('<a href="https://example.com" target="_blank">test</a>', settings)).html()
-  ).toMatchSnapshot();
+  expect(mount(markdown.default('<a href="https://example.com" target="_blank">test</a>')).html()).toMatchSnapshot();
 });
 
 test('anchors with baseUrl', () => {
@@ -150,7 +148,7 @@ code-without-language
 });
 
 test('should render nothing if nothing passed in', () => {
-  expect(markdown.html('', settings)).toBeNull();
+  expect(markdown.html('')).toBeNull();
 });
 
 test('`correctnewlines` option', () => {
@@ -186,19 +184,17 @@ describe('`stripHtml` option', () => {
 });
 
 test('should strip dangerous iframe tag', () => {
-  expect(mount(markdown.react('<p><iframe src="javascript:alert(\'delta\')"></iframe></p>', settings)).html()).toBe(
-    '<p></p>'
-  );
+  expect(mount(markdown.react('<p><iframe src="javascript:alert(\'delta\')"></iframe></p>')).html()).toBe('<p></p>');
 });
 
 test('should strip dangerous img attributes', () => {
-  expect(mount(markdown.default('<img src="x" onerror="alert(\'charlie\')">', settings)).html()).toBe(
+  expect(mount(markdown.default('<img src="x" onerror="alert(\'charlie\')">')).html()).toBe(
     '<img src="x" align="" alt="" caption="" height="auto" title="" width="auto" loading="lazy">'
   );
 });
 
 describe('export multiple Markdown renderers', () => {
-  const text = markdown.normalize(`# Hello World
+  const text = `# Hello World
 
   | Col. A  | Col. B  | Col. C  |
   |:-------:|:-------:|:-------:|
@@ -213,7 +209,7 @@ describe('export multiple Markdown renderers', () => {
   > Lorem ipsum dolor sit amet consectetur adipisicing elit.
 
 
-  `);
+  `;
   const tree = {
     type: 'root',
     children: [
@@ -235,7 +231,7 @@ describe('export multiple Markdown renderers', () => {
   });
 
   it('renders custom React components', () => {
-    expect(markdown.react(text, settings)).toMatchSnapshot();
+    expect(markdown.react(text)).toMatchSnapshot();
   });
 
   it('renders AST', () => {
@@ -246,8 +242,19 @@ describe('export multiple Markdown renderers', () => {
     expect(markdown.md(tree)).toMatchSnapshot();
   });
 
+  it('allows complex compact headings', () => {
+    const mdxt = `#Basic Text
+
+##🙀 oh noes!
+###**6**. Oh No
+
+Lorem ipsum dolor!`;
+    const html = markdown.html(mdxt);
+    expect(html).toMatchSnapshot();
+  });
+
   it('renders HTML', () => {
-    expect(markdown.html(text, settings)).toMatchSnapshot();
+    expect(markdown.html(text)).toMatchSnapshot();
   });
 
   it('returns null for blank input', () => {

packages/markdown/__tests__/magic-block-parser.test.js

@@ -164,6 +164,16 @@ describe('Parse Magic Blocks', () => {
     expect(process(text)).toMatchSnapshot();
   });
 
+  it('Custom HTML Block', () => {
+    const text = `[block:html]
+    ${JSON.stringify({
+      html:
+        '<h1>👋🌍</h1>\n<hr>\n<form>\n  <input name="test" value="hello" type="text"/>\n  <br/>\n  <a class="button">Go</a>\n</form>',
+    })}
+    [/block]`;
+    expect(process(text)).toMatchSnapshot();
+  });
+
   it('Unrecognized Blocks', () => {
     const text = `[block:unrecognized]
     {

packages/markdown/components/Callout/index.jsx

@@ -9,11 +9,14 @@ const Callout = props => {
    * hast-util's hProps and Slate's MDAST serializer
    */
   const { theme, title, icon } = props;
-
+  const titleProps = children.length && children[0].props; // @rafegoldberg sucks
   return (
     // eslint-disable-next-line react/jsx-props-no-spreading
     <blockquote {...attributes} className={`callout callout_${theme}`} theme={icon}>
-      <h3 className={[!title && 'floated']}>{children}</h3>
+      <h3 className={`callout-heading ${!title && 'empty'}`}>
+        <span className="callout-icon">{icon}</span>{' '}
+        {('children' in titleProps && titleProps.children.splice(1)[0]) || title}
+      </h3>
       {content}
     </blockquote>
   );

packages/markdown/components/Callout/style.scss

@@ -47,23 +47,22 @@
     color: inherit;
   }
 
-  h3,
-  h4 {
+  h3, h4 {
     color: var(--title, --text);
     margin-bottom: calc(#{$l-offset} * .5);
-    &.floated {
+    &.empty {
       float: left;
     }
     > * {
       color: inherit;
       margin: 0;
-    }  
-    &:first-letter {
-      float: left;
-      margin-left: calc(-#{$l-offset} - .5em);
-      margin-right: -.25rem;
     }
   }
+  .callout-icon {
+    float: left;
+    margin-left: calc(-#{$l-offset} - .5em);
+    margin-right: -.25rem;
+  }
 }
 
 .callout.callout {

packages/markdown/components/HTMLBlock.jsx

@@ -0,0 +1,19 @@
+const React = require('react');
+const PropTypes = require('prop-types');
+
+class HTMLBlock extends React.Component {
+  render() {
+    const { html } = this.props;
+    return <div className="rdmd-html" dangerouslySetInnerHTML={{ __html: html }} />;
+  }
+}
+
+HTMLBlock.propTypes = {
+  html: PropTypes.any,
+};
+
+module.exports = sanitize => {
+  sanitize.tagNames.push('html-block');
+  sanitize.attributes['html-block'] = ['html'];
+  return HTMLBlock;
+};

packages/markdown/components/Table.jsx

@@ -3,7 +3,11 @@ const PropTypes = require('prop-types');
 
 function Table(props) {
   const { children } = props;
-  return <table>{children}</table>;
+  return (
+    <div className="rdmd-table">
+      <table>{children}</table>
+    </div>
+  );
 }
 
 Table.propTypes = {

packages/markdown/components/index.js

@@ -7,3 +7,5 @@ export { default as Callout } from './Callout';
 export { default as CodeTabs } from './CodeTabs';
 export { default as Image } from './Image';
 export { default as Embed } from './Embed';
+
+export { default as HTMLBlock } from './HTMLBlock';