Make sure regular lists and check list items are working

packages/api-explorer/__tests__/lib/__snapshots__/markdown.test.js.snap

@@ -7,7 +7,7 @@ exports[`anchors 1`] = `
 
 exports[`check list items 1`] = `
 "<ul>
-<li style=\\"list-style: none\\" class=\\"checklist\\"><input type=\\"checkbox\\" disabled> checklistitem1</li></ul>
+<li style=\\"list-style: none\\" class=\\"checklist\\"><input type=\\"checkbox\\" disabled> checklistitem1</li><li style=\\"list-style: none\\" class=\\"checklist\\"><input type=\\"checkbox\\" checked disabled> checklistitem1</li></ul>
 "
 `;
 
@@ -33,11 +33,13 @@ exports[`headings 1`] = `
 exports[`image 1`] = `"<div><p><img src=\\"http://example.com/image.png\\" alt=\\"Image\\"/></p></div>"`;
 
 exports[`list items 1`] = `
-"<ul>
-<li >listitem1</li></ul>
-"
+"<div><ul>
+<li>listitem1</li>
+</ul></div>"
 `;
 
+exports[`should strip out inputs 1`] = `"<div></div>"`;
+
 exports[`tables 1`] = `
 "<div class=\\"marked-table\\"><table>
 <thead>

packages/api-explorer/__tests__/lib/markdown.test.js

@@ -1,4 +1,3 @@
-const fs = require('fs');
 const markdown = require('../../src/lib/markdown');
 
 const { shallow } = require('enzyme');
@@ -8,11 +7,15 @@ test('image', () => {
 });
 
 test('list items', () => {
-  expect(markdown('- listitem1')).toMatchSnapshot();
+  expect(shallow(markdown('- listitem1')).html()).toMatchSnapshot();
 });
 
 test('check list items', () => {
-  expect(markdown('- [ ] checklistitem1')).toMatchSnapshot();
+  expect(shallow(markdown('- [ ] checklistitem1\n- [x] checklistitem1')).html()).toMatchSnapshot();
+});
+
+test('should strip out inputs', () => {
+  expect(shallow(markdown('<input type="text" value="value" />')).html()).toMatchSnapshot();
 });
 
 test('tables', () => {

packages/api-explorer/src/lib/markdown/index.js

@@ -1,3 +1,16 @@
+const React = require('react');
+const remark = require('remark');
+const reactRenderer = require('remark-react');
+
+const variableParser = require('./variable-parser');
+const sanitizeSchema = require('hast-util-sanitize/lib/github.json');
+
+sanitizeSchema.tagNames.push('readme-variable');
+sanitizeSchema.attributes['readme-variable'] = ['variable'];
+
+sanitizeSchema.tagNames.push('input');
+sanitizeSchema.ancestors['input'] = ['li'];
+
 const marked = require('marked');
 const Emoji = require('./emojis.js').emoji;
 const syntaxHighlighter = require('@readme/syntax-highlighter');
@@ -6,6 +19,8 @@ const renderer = require('./renderer');
 
 const emojis = new Emoji();
 
+const Variable = require('../../Variable');
+
 module.exports = function markdown(text, opts = {}) {
   marked.setOptions({
     sanitize: true,
@@ -29,5 +44,23 @@ module.exports = function markdown(text, opts = {}) {
     // which just calls `escape()`
     sanitizer: opts.stripHtml ? undefined : sanitizer,
   });
+
+  return remark()
+    .use(variableParser)
+    .use(reactRenderer, {
+      sanitize: sanitizeSchema,
+      remarkReactComponents: {
+        'readme-variable': function({ variable }) {
+          return React.createElement(Variable, {
+            k: variable,
+            value: [{ name: 'project1', apiKey: '123' }, { name: 'project2', apiKey: '456' }],
+            defaults: [],
+            oauth: false,
+          });
+        },
+      },
+    })
+    .processSync(text).contents;
+
   return marked(text);
 };