From a6d7db039428c27fbaab5f860ff6ac0b00b90f4b Mon Sep 17 00:00:00 2001
From: Dom Harrington <dom@harrington-mail.com>
Date: Mon, 25 Jun 2018 11:02:51 -0700
Subject: [PATCH] Make sure regular lists and check list items are working

---
 .../lib/__snapshots__/markdown.test.js.snap   | 10 +++---
 .../__tests__/lib/markdown.test.js            |  9 +++--
 .../api-explorer/src/lib/markdown/index.js    | 33 +++++++++++++++++++
 3 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/packages/api-explorer/__tests__/lib/__snapshots__/markdown.test.js.snap b/packages/api-explorer/__tests__/lib/__snapshots__/markdown.test.js.snap
index e1bbd680b..ac2bd137d 100644
--- a/packages/api-explorer/__tests__/lib/__snapshots__/markdown.test.js.snap
+++ b/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>
diff --git a/packages/api-explorer/__tests__/lib/markdown.test.js b/packages/api-explorer/__tests__/lib/markdown.test.js
index 815da34b9..362b72869 100644
--- a/packages/api-explorer/__tests__/lib/markdown.test.js
+++ b/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', () => {
diff --git a/packages/api-explorer/src/lib/markdown/index.js b/packages/api-explorer/src/lib/markdown/index.js
index 38e9a1d04..c0024302f 100644
--- a/packages/api-explorer/src/lib/markdown/index.js
+++ b/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);
 };